/* QoT Core: quote-listicle template layer.
   ---------------------------------------------------------------------------
   Scope: body.qot-tmpl-listicle, set from post meta qot_template = 'listicle'
   by includes/class-template-style.php.

   WHY THIS FILE EXISTS. This began as a post-scoped <style> block inside CP-0207
   (WP 3061), approved by the CEO as a one-off design override on 2026-08-30. The
   structure was then approved as the listicle best-practice, at which point the
   post-scoped block became a liability: copying it into every listicle is
   stylesheet sprawl at the content layer, and one colour change would mean
   editing every post. Promoted here 2026-08-30 by CEO approval.

   WHAT THIS FILE DOES NOT OWN. Hero colour is site-wide and lives in hero.css.
   Copy-quote behaviour lives in copy-quote.css. Brand token VALUES belong to the
   theme. This file owns the listicle TYPE SCALE and the listicle-specific
   component treatments, nothing else.

   ADDING A SIBLING TEMPLATE. Drop assets/css/<name>.css and set post meta
   qot_template = '<name>'. The loader does the rest. Commercial roundups should
   take this route rather than extending this file.

   TECH DEBT, deliberate. The !important flags are inherited from the post-scoped
   original, where they were fighting theme rules from a lower-specificity
   position. From here the body-class prefix already out-specifies the theme, so
   most are now redundant. They stay until a render diff proves each one safe to
   drop; removing them blind risks a silent regression across every listicle.
   --------------------------------------------------------------------------- */

/* Token overrides for the listicle register: navy = verified, amber = corrected.
   Sage and gold are retired inside this template. */
body.qot-tmpl-listicle .entry-content {
	--brand-bg-callout: #EAF0F8;
	--brand-success: #1B365D;
	--brand-bg-light: #FFFFFF;
	--brand-border: rgba(27, 54, 93, .16);
	--brand-text-muted: #57606B;
	--brand-line-height-body: 1.75;
	/* variants.css builds the corrected-card ground from this via color-mix */
	--brand-warning: #A9761B;
}

/* Body prose. The theme renders it navy and semibold; this restores reading
   weight and 13:1 contrast. */
body.qot-tmpl-listicle .entry-content > p,
body.qot-tmpl-listicle .entry-content > ul > li,
body.qot-tmpl-listicle .entry-content > ol > li {
	font-family: var(--brand-font-body) !important;
	font-size: clamp(17px, 0.9rem + 0.45vw, 19px) !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
	color: #2A2E35 !important;
}

/* One column edge. Prose ran 661px while cards ran 1242px. */
body.qot-tmpl-listicle .entry-content > * {
	max-width: 1080px;
	margin-inline: auto;
}
body.qot-tmpl-listicle .entry-content > p {
	margin-block: 1.15rem;
}

/* Section H2. Was 28px navy serif, identical to every quote text on the page.
   Now it has scale, a rule and air, so sections read as sections. */
body.qot-tmpl-listicle .entry-content > h2 {
	font-family: var(--brand-font-display) !important;
	font-size: clamp(27px, 3.8vw, 40px) !important;
	font-weight: 600 !important;
	line-height: 1.14 !important;
	color: #16294A !important;
	letter-spacing: -.012em;
	margin: 4.75rem auto 1.15rem !important;
	padding-top: 1.3rem;
	position: relative;
	/* Jump-nav targets: keep the heading clear of any sticky header. */
	scroll-margin-top: 96px;
}
body.qot-tmpl-listicle .entry-content > h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 4px;
	border-radius: 2px;
	background: #1B365D;
}

/* Hero TYPE SCALE only. The navy ground and light text are hero.css, site-wide. */
body.qot-tmpl-listicle .entry-content .qot-hero {
	border: 0;
	border-radius: 14px;
	padding: clamp(1.75rem, 4.5vw, 3rem);
	box-shadow: 0 1px 3px rgba(14, 31, 58, .10);
}
body.qot-tmpl-listicle .entry-content .qot-hero__title {
	font-size: clamp(34px, 5.4vw, 48px) !important;
	font-weight: 700 !important;
	line-height: 1.08 !important;
	letter-spacing: -.015em;
	/* hero.css defaults to --brand-text-on-dark (#F5F5F5). The listicle register
	   goes pure white for maximum separation from the navy. 12.6:1. */
	color: #FFFFFF !important;
}
body.qot-tmpl-listicle .entry-content .qot-hero__subtitle {
	font-family: var(--brand-font-body) !important;
	font-size: 19px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	max-width: 58ch;
}
body.qot-tmpl-listicle .entry-content .qot-hero__subtitle strong {
	font-weight: 400;
}
body.qot-tmpl-listicle .entry-content .qot-hero__subtitle {
	color: rgba(255, 255, 255, .86) !important;
}
/* hero.css defaults the muted on-dark colour to --brand-text-on-dark-muted, which
   is the sage tint (#B1C0B6). Sage is retired inside this register (CEO, 2026-08-30:
   "these greens and gold and white and blue just aren't working"), so the listicle
   layer takes it to neutral white at 75%. Composites to ~8.5:1 on the navy. */
body.qot-tmpl-listicle .entry-content .qot-hero__byline,
body.qot-tmpl-listicle .entry-content .qot-hero__read-time,
body.qot-tmpl-listicle .entry-content .qot-hero__meta {
	font-size: 14px !important;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .75) !important;
}
body.qot-tmpl-listicle .entry-content .qot-hero__byline a {
	color: #FFFFFF !important;
	text-decoration-color: rgba(255, 255, 255, .45);
}

/* Verified quote cards. White on pearl gives real figure/ground; weight 500
   is the fix for "the font is too thin". */
body.qot-tmpl-listicle .entry-content .qot-quote-card {
	background: #fff;
	border: 1px solid rgba(27, 54, 93, .10);
	border-left: 4px solid #1B365D;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(14, 31, 58, .06);
	padding: 1.7rem 1.9rem;
	margin-block: 1.15rem;
}
body.qot-tmpl-listicle .entry-content .qot-quote-card .qot-quote-card__quote,
body.qot-tmpl-listicle .entry-content .qot-quote-card .qot-quote-card__text {
	font-size: clamp(20px, 2.4vw, 25px) !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	color: #16294A !important;
}
body.qot-tmpl-listicle .entry-content .qot-quote-card__attribution {
	margin-top: .85rem;
}
body.qot-tmpl-listicle .entry-content .qot-quote-card__attribution-name {
	font-family: var(--brand-font-body);
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #1B365D !important;
}
body.qot-tmpl-listicle .entry-content .qot-quote-card__attribution-source {
	font-size: 15px !important;
	color: #4A5158 !important;
}
body.qot-tmpl-listicle .entry-content .qot-quote-card__attribution-context {
	font-size: 14px !important;
	color: #57606B !important;
}
body.qot-tmpl-listicle .entry-content .qot-quote-card__commentary {
	font-size: 17px !important;
	line-height: 1.7 !important;
	color: #33383F !important;
	border-top: 1px solid rgba(27, 54, 93, .10);
	margin-top: 1rem;
	padding-top: .95rem;
}
body.qot-tmpl-listicle .entry-content .qot-quote-card__numbering {
	background: #1B365D !important;
	color: #fff !important;
	font-family: var(--brand-font-body);
	font-weight: 700;
	font-size: 13px;
}

/* Corrected quotes. Amber ground says "this is not what you think it is". */
body.qot-tmpl-listicle .entry-content .qot-quote-card--bg-override-warning {
	border-left-width: 4px;
}
body.qot-tmpl-listicle .entry-content .qot-quote-card--bg-override-warning .qot-quote-card__numbering {
	background: #A9761B !important;
}
body.qot-tmpl-listicle .entry-content .qot-quote-card--bg-override-warning .qot-quote-card__attribution-name {
	color: #7A5312 !important;
}
body.qot-tmpl-listicle .entry-content .qot-quote-card--bg-override-warning .qot-quote-card__commentary {
	border-top-color: rgba(169, 118, 27, .25);
}

/* Key takeaways */
body.qot-tmpl-listicle .entry-content .qot-key-takeaways {
	background: #EAF0F8;
	border-left: 5px solid #1B365D;
	border-radius: 10px;
	padding: 1.7rem 1.9rem;
	margin-block: 1.75rem;
}
body.qot-tmpl-listicle .entry-content .qot-key-takeaways__label {
	font-family: var(--brand-font-body);
	font-size: 13px !important;
	letter-spacing: .09em;
	color: #1B365D !important;
}
body.qot-tmpl-listicle .entry-content .qot-key-takeaways__list li {
	font-size: 18px;
	line-height: 1.7;
	color: #242830;
	margin-bottom: .55rem;
}

/* Jump navigation. Sits under the key-takeaways table on listicles with 3+
   sections; plain anchors, no JS. Pill register: navy on white, filled navy
   on hover, 44px touch targets. Section H2s carry scroll-margin-top above. */
body.qot-tmpl-listicle {
	scroll-behavior: smooth;
}
body.qot-tmpl-listicle .entry-content .qot-jump-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem;
	margin-block: 1.1rem 1.4rem;
}
body.qot-tmpl-listicle .entry-content .qot-jump-nav__label {
	font-family: var(--brand-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #57606B;
	margin-right: .35rem;
}
body.qot-tmpl-listicle .entry-content .qot-jump-nav a {
	font-family: var(--brand-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #1B365D;
	background: #FFFFFF;
	border: 1.5px solid rgba(27, 54, 93, .35);
	border-radius: 999px;
	padding: 0 1.05rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.qot-tmpl-listicle .entry-content .qot-jump-nav a:hover {
	background: #1B365D;
	border-color: #1B365D;
	color: #FFFFFF;
}
body.qot-tmpl-listicle .entry-content .qot-jump-nav a:focus-visible {
	outline: 3px solid #1B365D;
	outline-offset: 2px;
}

/* FAQ accordion. Sans-serif questions so they stop competing with the serif
   quote runs; AA focus ring; 44px touch targets. */
body.qot-tmpl-listicle .entry-content .qot-faq-accordion__heading {
	font-size: clamp(30px, 4.4vw, 40px) !important;
	font-weight: 600 !important;
	color: #16294A !important;
	line-height: 1.14;
}
body.qot-tmpl-listicle .entry-content .qot-faq-accordion__item {
	background: #fff;
	border: 1px solid rgba(27, 54, 93, .14);
	border-radius: 10px;
}
body.qot-tmpl-listicle .entry-content .qot-faq-accordion__item[open] {
	background: #F6FAFD;
	border-color: rgba(27, 54, 93, .26);
}
body.qot-tmpl-listicle .entry-content .qot-faq-accordion__question {
	font-family: var(--brand-font-body) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #1B365D !important;
	min-height: 44px;
	display: flex;
	align-items: center;
}
body.qot-tmpl-listicle .entry-content .qot-faq-accordion__question:focus-visible {
	outline: 3px solid #1B365D;
	outline-offset: 2px;
	border-radius: 8px;
}
body.qot-tmpl-listicle .entry-content .qot-faq-accordion__question::after {
	color: #1B365D !important;
}
body.qot-tmpl-listicle .entry-content .qot-faq-accordion__answer {
	font-size: 17px !important;
	line-height: 1.75 !important;
	color: #33383F !important;
}

/* Inline images sit at section boundaries, so they get section-sized air. */
body.qot-tmpl-listicle .entry-content > figure.wp-block-image {
	margin-block: 2.5rem;
}
body.qot-tmpl-listicle .entry-content > figure.wp-block-image img {
	border-radius: 10px;
	width: 100%;
	height: auto;
}

/* An image placeholder should read as a placeholder, not as a bug. */
body.qot-tmpl-listicle .entry-content .wp-block-group[class*="image-placeholder"] {
	background: repeating-linear-gradient(45deg, #F0F0F0, #F0F0F0 10px, #E8E8E8 10px, #E8E8E8 20px);
	border: 1px dashed #B9BEC6;
	border-radius: 10px;
	padding: 2.5rem 1rem;
	text-align: center;
}
body.qot-tmpl-listicle .entry-content .wp-block-group[class*="image-placeholder"] p {
	color: #5A626C !important;
	font-size: 14px !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	body.qot-tmpl-listicle {
		scroll-behavior: auto !important;
	}
	body.qot-tmpl-listicle .entry-content * {
		transition: none !important;
		animation: none !important;
	}
}

@media (max-width: 600px) {
	body.qot-tmpl-listicle .entry-content .qot-quote-card {
		padding: 1.2rem 1.15rem;
	}
	body.qot-tmpl-listicle .entry-content .qot-key-takeaways {
		padding: 1.2rem 1.15rem;
	}
	/* Cormorant 600 reads thin at phone sizes. 700 is loaded, so this is real
	   bold, not a faux-bold synthesis. */
	body.qot-tmpl-listicle .entry-content .qot-hero__title {
		font-weight: 700 !important;
		letter-spacing: -.022em;
	}
	body.qot-tmpl-listicle .entry-content .qot-hero {
		padding: 1.35rem 1.25rem;
	}
	/* CEO 2026-08-30: no hero image on mobile. The featured image is a separate
	   field and still serves listings, social cards and search; this only removes
	   the in-content copy so the first quote is not pushed two screens down. */
	body.qot-tmpl-listicle .entry-content .qot-hero__image {
		display: none !important;
	}
	body.qot-tmpl-listicle .entry-content > h2 {
		margin-top: 3.1rem !important;
		margin-inline: auto !important;
	}
	body.qot-tmpl-listicle .entry-content > p,
	body.qot-tmpl-listicle .entry-content > ul > li,
	body.qot-tmpl-listicle .entry-content > ol > li {
		line-height: 1.6 !important;
	}
	body.qot-tmpl-listicle .entry-content .qot-key-takeaways__list li {
		font-size: 17px;
		line-height: 1.6;
	}
	body.qot-tmpl-listicle .entry-content > figure.wp-block-image {
		margin-block: 1.8rem;
	}
	body.qot-tmpl-listicle .entry-content .qot-jump-nav a {
		font-size: 13px;
		min-height: 40px;
		padding: 0 .85rem;
	}
}