/**
 * SEO landing-page layer.
 *
 * Loaded only on pages whose content carries `.ec-lp-page` (see
 * inc/enqueue.php), so the whole landing-page set opts in by markup and
 * nothing here reaches HivePress archives, dashboards or the blog.
 *
 * Everything is built on top of the parent theme's own vocabulary rather
 * than replacing it: `.content-block` still supplies the cream card, its
 * radius, padding and corner dot fields, and `.content-title` still
 * supplies the 4x2 teal dot ornament. These classes add the pieces the
 * parent theme has no equivalent for (eyebrows, two-voice headings, the
 * dark interrupt card, the restaurant-vs-ChefCations comparison, the FAQ
 * accordion) and nothing else.
 *
 * Palette is the customizer's, not a second source of truth:
 *   primary #00876F  cream #FFF1E5  dark #14312B
 *   text    #0F1727  muted rgba(15,23,39,.45)
 *
 * @package experthive-child
 */

:root {
	--ec-lp-primary: #00876F;
	--ec-lp-cream: #FFF1E5;
	--ec-lp-dark: #14312B;
	--ec-lp-ink: #0F1727;
	--ec-lp-muted: rgba(15, 23, 39, 0.45);
	--ec-lp-hairline: rgba(7, 36, 86, 0.075);
}

/* ---------------------------------------------------------------------------
   Eyebrow
   Small uppercase label above a heading. Sits tight to the heading below it
   because .content-title already owns the space above itself for its dots.
   --------------------------------------------------------------------------- */

.ec-lp-eyebrow {
	margin-bottom: 0.75rem;
	color: var(--ec-lp-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ec-lp-eyebrow--light {
	color: #7FD3C0;
}

/*
 * The parent theme reserves 2rem above every .content-title for its 4x2 dot
 * ornament. With an eyebrow directly above, that stacks two decorative
 * elements on top of each other and pushes the heading away from the label
 * it belongs to — so the eyebrow takes over the ornament's job.
 */
.ec-lp-eyebrow + .content-title {
	padding-top: 0;
}

.ec-lp-eyebrow + .content-title::before {
	content: none;
}

/* Microcopy sitting under a button group needs its own gap; the buttons
   block has no bottom margin of its own inside a column. */
.wp-block-buttons + .ec-lp-fine {
	margin-top: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Two-voice headings
   An <em> phrase against the rest of the heading. DM Sans 700 is the theme
   face; the <em> drops to 400 italic so the contrast reads as two voices
   rather than one italicised sentence.

   To restore the Fraunces Italic treatment used on the Elementor build,
   enqueue the family and add one declaration here:
       .ec-lp-split em { font-family: Fraunces, Georgia, serif; }
   Nothing else needs to change.
   --------------------------------------------------------------------------- */

.ec-lp-split em {
	display: inline;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.005em;
}

/* ---------------------------------------------------------------------------
   Measure and rhythm
   --------------------------------------------------------------------------- */

.ec-lp-narrow {
	max-width: 50rem;
	margin-right: auto;
	margin-left: auto;
}

.ec-lp-section {
	margin-top: 4rem;
	margin-bottom: 4rem;
}

@media only screen and (max-width: 74.99em) {

	.ec-lp-section {
		margin-top: 3rem;
		margin-bottom: 3rem;
	}
}

.ec-lp-fine {
	color: var(--ec-lp-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Pull quote — the single teal line that closes section 2. */
.ec-lp-pull {
	margin: 2rem 0;
	color: var(--ec-lp-primary);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
}

/* Oversized statement — section 4's payoff, and the closing H3. */
.ec-lp-statement {
	margin: 2rem 0 1.5rem;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.25;
}

.ec-lp-statement em {
	display: block;
	color: var(--ec-lp-primary);
	font-style: italic;
	font-weight: 400;
}

@media only screen and (max-width: 48em) {

	.ec-lp-statement {
		font-size: 1.75rem;
	}

	.ec-lp-pull {
		font-size: 1.25rem;
	}
}

/* ---------------------------------------------------------------------------
   Media frames
   SVG placeholders carry no attachment metadata, so WordPress emits no
   width/height and the browser would otherwise render them at intrinsic
   size. Forcing width:100% keeps the slot correct now and stays correct
   after a real photograph replaces the file.
   --------------------------------------------------------------------------- */

.ec-lp-media {
	margin: 0;
}

.ec-lp-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 5px 30px rgba(7, 36, 86, 0.075);
}

.ec-lp-media--hero img {
	box-shadow: 0 5px 30px rgba(7, 36, 86, 0.125);
}

/* ---------------------------------------------------------------------------
   Dark interrupt card (section 10)
   A .content-block variant. Two classes beats the customizer's single-class
   `.content-block { background-color: #FFF1E5 }`, so this wins on
   specificity rather than depending on stylesheet order.
   --------------------------------------------------------------------------- */

.content-block.ec-lp-dark {
	background-color: var(--ec-lp-dark);
	color: #fff;
}

.content-block.ec-lp-dark h2,
.content-block.ec-lp-dark h3,
.content-block.ec-lp-dark p,
.content-block.ec-lp-dark li {
	color: #fff;
}

.content-block.ec-lp-dark .content-title::before {
	color: #7FD3C0;
}

/* The corner dot fields are navy at 15% and vanish on a dark ground. */
.content-block.ec-lp-dark::before,
.content-block.ec-lp-dark::after {
	opacity: 0.35;
	filter: invert(1);
}

.content-block.ec-lp-dark .ec-lp-fine {
	color: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------------------------------------------------
   Restaurant vs. ChefCations (section 6)
   Two white sub-cards inside the cream block. The muted card is deliberately
   flat and borderless; the featured card carries the teal border, shadow and
   badge so the eye lands on it first.
   --------------------------------------------------------------------------- */

.ec-lp-compare {
	position: relative;
	height: 100%;
	padding: 2rem;
	border-radius: 4px;
	background-color: #fff;
}

.ec-lp-compare__title {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
}

.ec-lp-compare ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-lp-compare li {
	position: relative;
	padding-left: 1.875rem;
	margin-bottom: 0.75rem;
	line-height: 1.5;
}

.ec-lp-compare li::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 1.25rem;
	font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro";
	font-weight: 900;
	text-align: center;
}

/* Restaurant column — grey dashes, muted heading, neutral border. */
.ec-lp-compare--muted {
	border: 1px solid var(--ec-lp-hairline);
}

.ec-lp-compare--muted .ec-lp-compare__title {
	color: var(--ec-lp-muted);
}

.ec-lp-compare--muted li {
	color: rgba(15, 23, 39, 0.7);
}

.ec-lp-compare--muted li::before {
	content: "\f068"; /* fa-minus */
	color: rgba(15, 23, 39, 0.25);
	font-size: 0.75rem;
}

/* ChefCations column — teal border, teal checks, lifted. */
.ec-lp-compare--feature {
	border: 2px solid var(--ec-lp-primary);
	box-shadow: 0 5px 30px rgba(0, 135, 111, 0.15);
}

.ec-lp-compare--feature .ec-lp-compare__title {
	color: var(--ec-lp-ink);
}

.ec-lp-compare--feature li::before {
	content: "\f00c"; /* fa-check */
	color: var(--ec-lp-primary);
	font-size: 0.8125rem;
}

.ec-lp-badge {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	margin-bottom: 1rem;
	border-radius: 2px;
	background-color: var(--ec-lp-primary);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
}

/* Equalise the two columns so the shorter list doesn't leave a short card. */
@media only screen and (min-width: 48em) {

	.ec-lp-compare-row .wp-block-column {
		display: flex;
	}
}

/*
 * Core stacks wp-block-columns below 781px, at which point the two cards sit
 * on top of each other and 2rem of card padding on top of .content-block's
 * own 2rem (see the parent theme's max-width:48em rule) eats most of a
 * 390px viewport.
 */
@media only screen and (max-width: 48em) {

	.ec-lp-compare {
		padding: 1.5rem;
	}

	.ec-lp-compare-row .wp-block-column:not(:last-child) {
		margin-bottom: 1.5rem;
	}
}

/* ---------------------------------------------------------------------------
   FAQ accordion (section 11)
   Core's wp:details block, restyled. Each <details> is a row in a single
   bordered stack rather than eight separate cards.
   --------------------------------------------------------------------------- */

.ec-lp-faq .wp-block-details {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--ec-lp-hairline);
}

.ec-lp-faq .wp-block-details:first-of-type {
	border-top: 1px solid var(--ec-lp-hairline);
}

.ec-lp-faq .wp-block-details summary {
	position: relative;
	padding-right: 2.5rem;
	color: var(--ec-lp-ink);
	cursor: pointer;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.45;
	list-style: none;
	transition: color 0.2s;
}

.ec-lp-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.ec-lp-faq .wp-block-details summary:hover {
	color: var(--ec-lp-primary);
}

.ec-lp-faq .wp-block-details summary::after {
	position: absolute;
	top: 0;
	right: 0;
	content: "\f067"; /* fa-plus */
	color: var(--ec-lp-primary);
	font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro";
	font-size: 0.875rem;
	font-weight: 900;
	transition: transform 0.2s;
}

.ec-lp-faq .wp-block-details[open] summary::after {
	content: "\f068"; /* fa-minus */
}

.ec-lp-faq .wp-block-details p {
	margin: 0.875rem 0 0;
	color: rgba(15, 23, 39, 0.75);
	line-height: 1.65;
}

/* ---------------------------------------------------------------------------
   Hero
   The theme lifts everything above <!--more--> into .header-hero--large and
   renders it full-container-width with no column split of its own, so the
   two-up here is the page's, not the theme's.
   --------------------------------------------------------------------------- */

.header-hero .ec-lp-hero {
	align-items: center;
	margin-bottom: 0;
}

@media only screen and (max-width: 48em) {

	.header-hero .ec-lp-hero .ec-lp-media {
		margin-top: 2rem;
	}
}

/* ---------------------------------------------------------------------------
   HivePress blocks in a landing-page context
   The listings grid and vendors slider are dropped straight into the page
   flow, so they need the section rhythm the surrounding blocks have.
   --------------------------------------------------------------------------- */

.ec-lp .hp-listings,
.ec-lp .hp-vendors,
.ec-lp .hp-testimonials {
	margin-top: 2.5rem;
}