/**
 * Base structural styles for the "Read More Toggle" Divi module.
 * Per-instance button colors are injected inline by the module's render()
 * method, scoped to that instance's unique class.
 */

.crde-read-more {
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

@media (max-width: 640px) { 
	.crde-read-more {
		margin-bottom: 36px;
	}	
}

/* Keep every child inside the module's own box -- this is what stops the
   module from visually spilling into neighboring Divi columns on the
   builder canvas (and on the front end) regardless of column width. */
.crde-read-more * {
	box-sizing: border-box;
	max-width: 100%;
}

/*
 * Divi's tiny_mce fields normally wrap text in <p> tags, whose default
 * browser margins are what caused the "extra <p> at the start/end" look.
 * The module's render() now strips those <p> tags entirely, so spacing is
 * controlled here instead, directly on the wrapping element.
 */
.crde-rm-intro {
	margin: 5px 0 0;
	font-size: 16px;
	line-height: 1.2em;
	color: #1c1c45;
	font-weight: 400;
}

.crde-rm-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
	font-size: 16px;
	line-height: 1.2em;
	color: #1c1c45;
	font-weight: 400;
	margin-top: 6px;
}

.crde-rm-toggle {
	display: block;
	background: transparent;
	border: none;
	width: 100%;
	text-align: left;
	margin-top: 0;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-bottom: 0.25px solid #12122c !important;
	padding: 20px 0 6px;
	cursor: pointer;
	background: none;
	font-family: 'Nunito Sans',Helvetica,Arial,Lucida,sans-serif;
	border-radius: 0;
}

.crde-rm-toggle-label {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: inherit;
}