/*
Theme Name: JAB Test Theme
Theme URI: https://github.com/jab-growth-ventures/jab-test-theme
Description: Sandbox child theme for jab-core-blocks. Declares every --brand-* token mapped to the Quotes on Travel design system palette (BRAND.md May 2026). Staging only.
Author: JAB Growth Ventures
Template: kadence
Version: 0.2.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: jab-test-theme
*/

/* QoT design tokens — sourced from `01-Ventures/Quotes on Travel/03-Reference/design-system/project/colors_and_type.css`.
   Token names follow the jab-core-blocks `--brand-*` contract. Design-system granular tokens added below as extensions. */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap");

:root {
	/* --- Brand tokens (jab-core-blocks contract) --- */
	--brand-primary:           #1B365D;                            /* Deep Navy — brand + headings */
	--brand-primary-dark:      #0e1f3a;                            /* navy-900 */
	--brand-accent:            #D4B483;                            /* Sunset Gold — primary CTA */
	--brand-success:           #5c8a73;                            /* sage-shifted */
	--brand-warning:           #D4B483;                            /* gold (never bright red — palette forbids aggressive colors) */

	--brand-text:              #1B365D;                            /* headings on pearl */
	--brand-text-muted:        #707070;                            /* body — warm grey */
	--brand-text-on-dark:      #F5F5F5;                            /* pearl on navy */
	--brand-text-on-dark-muted:#a8a8a8;                            /* warm-grey-400 */

	--brand-surface:           #ffffff;                            /* cards */
	--brand-bg-light:          #F5F5F5;                            /* pearl */
	--brand-bg-callout:        #f1f4f2;                            /* sage-50 */
	--brand-bg-page:           #F5F5F5;                            /* pearl — page background */

	--brand-border:            rgba(27, 54, 93, .12);              /* hairline navy-tinted */
	--brand-border-strong:     rgba(27, 54, 93, .22);

	--brand-rating-star:       #D4B483;                            /* sunset gold */
	--brand-pullquote-bg:      #f1f4f2;                            /* sage-50 */

	/* --- Typography --- */
	--brand-font-display:      "Cormorant Garamond", Georgia, "Iowan Old Style", "Times New Roman", serif;
	--brand-font-body:         "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", Arial, sans-serif;
	--brand-font-weight-body:  400;
	--brand-font-weight-semibold: 600;
	--brand-font-weight-bold:  700;
	--brand-line-height-display: 1.15;
	--brand-line-height-body:    1.7;
	--brand-line-height-callout: 1.5;

	/* Type scale — matches BRAND.md web hierarchy (48 / 36 / 24 / 16 / 14) */
	--brand-text-xs:           12px;
	--brand-text-sm:           14px;
	--brand-text-base:         16px;
	--brand-text-lg:           18px;
	--brand-text-xl:           20px;
	--brand-text-2xl:          24px;
	--brand-text-3xl:          36px;                                /* H2 (was 32px) */
	--brand-text-4xl:          48px;                                /* H1 (was 40px) */

	/* Spacing — 4px base */
	--brand-space-1:           4px;
	--brand-space-2:           8px;
	--brand-space-3:           12px;
	--brand-space-4:           16px;
	--brand-space-5:           24px;
	--brand-space-6:           32px;
	--brand-space-7:           48px;
	--brand-space-8:           64px;

	/* Radii — reflective, not aggressive */
	--brand-radius-sm:         6px;
	--brand-radius-md:         10px;                                /* default card */
	--brand-radius-lg:         18px;
	--brand-radius-pill:       999px;

	/* Shadows — soft, navy-tinted */
	--brand-shadow-sm:         0 1px 2px rgba(14, 31, 58, .06);
	--brand-shadow-md:         0 2px 8px rgba(14, 31, 58, .08), 0 1px 2px rgba(14, 31, 58, .04);
	--brand-shadow-none:       none;

	/* --- Design system granular tokens (for direct authoring) --- */
	--navy-700:                #1B365D;
	--navy-900:                #0e1f3a;
	--sage-500:                #7C9082;
	--sage-700:                #5c6f63;
	--pearl:                   #F5F5F5;
	--warm-grey-600:           #707070;
	--gold-500:                #D4B483;
	--gold-600:                #b08653;
	--rose-500:                #A85D5D;
	--ease-standard:           cubic-bezier(.2, .8, .2, 1);
	--reading-max:             680px;
	--container-max:           1180px;
}

body {
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-base);
	line-height: var(--brand-line-height-body);
	color: var(--brand-text-muted);
	background: var(--brand-bg-page);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
	font-family: var(--brand-font-display);
	color: var(--brand-text);
	font-weight: var(--brand-font-weight-semibold);
	line-height: var(--brand-line-height-display);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1 { font-size: clamp(var(--brand-text-3xl), 4.5vw, var(--brand-text-4xl)); font-weight: 600; }
h2 { font-size: clamp(28px, 3.2vw, var(--brand-text-3xl)); font-weight: 500; }
h3 { font-size: var(--brand-text-2xl); font-weight: 500; }

a {
	color: var(--brand-primary);
	transition: color 140ms var(--ease-standard);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
a:hover { color: var(--rose-500); }

blockquote {
	font-family: var(--brand-font-display);
	font-style: italic;
	font-weight: 500;
	color: var(--brand-text);
	border-left: 2px solid var(--sage-500);
	padding: var(--brand-space-2) 0 var(--brand-space-2) var(--brand-space-5);
	margin: var(--brand-space-6) 0;
	max-width: var(--reading-max);
}
blockquote cite {
	display: block;
	font-family: var(--brand-font-display);
	font-style: normal;
	font-weight: 400;
	color: var(--sage-700);
	margin-top: var(--brand-space-3);
}

::selection { background: rgba(212, 180, 131, .25); color: var(--brand-primary-dark); }

/* ═══════════════════════════════════════════════════════════════════════
   Visual contrast boost — 2026-05-19
   ═══════════════════════════════════════════════════════════════════════ */

/* Body text: nudge #707070 → #525252 for comfortable reading on pearl bg. */
body { color: #525252; }

/* H2 section headings: clear visual break between quote themes.
   Gold hairline beneath + generous margin-top so each theme "starts fresh". */
.entry-content h2 {
	margin-block-start: var(--brand-space-8);    /* 64px — strong section break */
	margin-block-end:   var(--brand-space-4);
	padding-bottom:     var(--brand-space-3);
	border-bottom:      2px solid rgba(212, 180, 131, 0.45);
	color: var(--brand-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   Quote Card block — QoT visual treatment (2026-05-19)
   Plugin ships no .jab-quote-card CSS — all styling lives here.
   HTML: <figure class="jab-quote-card jab-quote-card--{variant}">
           <blockquote class="jab-quote-card__quote">
             <p class="jab-quote-card__text">…</p>
             <figcaption class="jab-quote-card__attribution">
               <span class="jab-quote-card__attribution-name">
               <span class="jab-quote-card__attribution-source">
             </figcaption>
           </blockquote>
         </figure>
   ═══════════════════════════════════════════════════════════════════════ */

/* Base — all variants */
.jab-quote-card {
	margin-block: var(--brand-space-5);
	position: relative;
}

/* Reset browser blockquote defaults inside the card */
.jab-quote-card .jab-quote-card__quote {
	border: none;
	margin: 0;
	padding: 0;
	background: none;
	max-width: none;
	font-family: var(--brand-font-display);
	font-style: italic;
}

.jab-quote-card__text {
	font-family: var(--brand-font-display);
	font-style: italic;
	color: var(--brand-text);
	margin: 0 0 var(--brand-space-3);
	line-height: 1.5;
}

.jab-quote-card__attribution {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--brand-font-body);
	font-style: normal;
}
.jab-quote-card__attribution-name {
	font-weight: 600;
	font-size: var(--brand-text-sm);
	color: var(--brand-primary);
	letter-spacing: 0.02em;
}
.jab-quote-card__attribution-source {
	font-size: var(--brand-text-sm);
	color: var(--sage-700);
}
.jab-quote-card__attribution-context {
	font-size: var(--brand-text-xs);
	color: var(--warm-grey-600);
}

.jab-quote-card__numbering {
	position: absolute;
	top: var(--brand-space-3);
	right: var(--brand-space-4);
	font-family: var(--brand-font-display);
	font-size: var(--brand-text-xs);
	color: var(--gold-500);
	font-weight: 600;
	opacity: 0.65;
}

.jab-quote-card__commentary {
	margin-top: var(--brand-space-3);
	font-size: var(--brand-text-sm);
	color: var(--brand-text-muted);
	font-style: normal;
	line-height: 1.6;
}

/* -- LARGE variant: hero pull-quote — gold left bar + gold-tint bg */
.jab-quote-card--large {
	background: rgba(212, 180, 131, 0.07);
	border-left: 4px solid var(--gold-500);
	border-radius: 0 var(--brand-radius-md) var(--brand-radius-md) 0;
	padding: var(--brand-space-6) var(--brand-space-6) var(--brand-space-5) var(--brand-space-7);
	margin-block: var(--brand-space-7);
}
.jab-quote-card--large::before {
	content: "\201C";
	position: absolute;
	top: -10px;
	left: var(--brand-space-4);
	font-family: var(--brand-font-display);
	font-size: 80px;
	color: var(--gold-500);
	opacity: 0.2;
	line-height: 1;
	font-weight: 600;
}
.jab-quote-card--large .jab-quote-card__text {
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 500;
	color: var(--brand-primary);
	line-height: 1.4;
}

/* -- COMPACT variant: body-rhythm quote — sage left edge, restrained */
.jab-quote-card--compact {
	border-left: 3px solid var(--sage-500);
	padding: var(--brand-space-3) var(--brand-space-4) var(--brand-space-3) var(--brand-space-5);
	margin-block: var(--brand-space-4);
}
.jab-quote-card--compact .jab-quote-card__text {
	font-size: var(--brand-text-base);
	color: var(--brand-text);
}

/* -- CARD variant: boxed pearl card + gold corner " */
.jab-quote-card--card {
	background: var(--brand-surface);
	border: 1px solid var(--brand-border-strong);
	border-radius: var(--brand-radius-md);
	padding: var(--brand-space-6) var(--brand-space-6) var(--brand-space-5);
	box-shadow: var(--brand-shadow-sm);
	margin-block: var(--brand-space-5);
}
.jab-quote-card--card::before {
	content: "\201C";
	position: absolute;
	top: var(--brand-space-3);
	left: var(--brand-space-4);
	font-family: var(--brand-font-display);
	font-size: 48px;
	color: var(--gold-500);
	opacity: 0.3;
	line-height: 1;
	font-weight: 600;
}
.jab-quote-card--card .jab-quote-card__text {
	font-size: var(--brand-text-lg);
	color: var(--brand-text);
	padding-top: var(--brand-space-4); /* clear the decorative " */
}

/* ═══════════════════════════════════════════════════════════════════════
   Layout fixes — 2026-05-18 (v2 — transparent header aware)
   ═══════════════════════════════════════════════════════════════════════

   ROOT CAUSE: Kadence transparent header (height: 46px, bg: #ffffff) is
   position:absolute, overlaying content from y=0. The header is NOT in
   normal document flow — padding-block on .site-header / #masthead does
   nothing useful. .entry-content starts at y=0 and the first block
   (hero) appears directly under the nav with no breathing room.

   FIX A — content offset: push .entry-content below the overlay using
   padding-top = header height (46px) + breathing gap (24px) = 70px.
   Scoped to .kadence-transparent-header so it only fires when Kadence's
   transparent mode is active (body class Kadence adds automatically).

   FIX B — first-child reset: zero block-start margin on the first block
   since .entry-content padding now owns the top gap; prevents double
   spacing when the hero's own margin-block-start fires.

   FIX C — header inner padding: Kadence's main row height is 46px with
   no explicit padding set. Add symmetric vertical padding inside the
   main-row wrapper so logo + nav have breathing room and don't feel
   cramped. Targets the inner layout div that actually holds the items.
   ═══════════════════════════════════════════════════════════════════════ */

/* A — Push content below the 46px transparent header overlay. */
.kadence-transparent-header .entry-content {
	padding-top: calc(46px + var(--brand-space-5)); /* 46 + 24 = 70px */
}

/* Fallback for non-transparent single posts and static pages only.
   NOT applied to home/archive templates — avoids blank ad-inventory slab. */
.single .entry-content,
.page:not(.home) .entry-content {
	padding-top: var(--brand-space-6); /* 32px */
}

/* B — First block: zero its own top margin; .entry-content padding owns the gap. */
.entry-content > *:first-child {
	margin-block-start: 0;
}

/* C — Header main row inner: breathing room for logo + nav items.
        Confirmed class names via Firecrawl JSON extraction 2026-05-18:
        Kadence renders the main row wrapper as .header-wrapper and
        the inner main-row div as .header-main. Both need padding-block
        for symmetrical vertical space inside the absolute-positioned bar. */
.site-header .header-wrapper,
.site-header .header-main {
	padding-block: var(--brand-space-3); /* 12px top + bottom */
}