/*
Theme Name: Quotes on Travel
Theme URI: https://quotesontravel.net
Description: Production child theme for Quotes on Travel. Kadence child. Declares the QoT --brand-* tokens (from 02-Brand/design-tokens.json) that jab-core-blocks / qot-blocks consume, implements the venture filters in functions.php, and carries the render fixes (header z-index, quote-card readability, image-placeholder hide, CC attribution caption). Honest Field-Notes brand.
Author: Quotes on Travel (Gianluca Giuca / JAB Growth Ventures)
Author URI: https://quotesontravel.net
Template: kadence
Version: 1.0.5
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: qot-theme
*/

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

/* ============================================================
 * QoT brand tokens. Mapped from 02-Brand/design-tokens.json onto the
 * --brand-* slots jab-core-blocks expects. Six brand colours:
 * Navy #1B365D, Sage #7C9082, Pearl #F5F5F5, Warm Grey #707070,
 * Gold #D4B483, Rose #A85D5D. No bright or aggressive colours.
 * ============================================================ */
:root {
	/* Brand */
	--brand-primary: #1B365D;        /* Deep Navy: headings, hero, brand */
	--brand-primary-dark: #142a4d;   /* navy-800: hover/darker */
	--brand-accent: #D4B483;         /* Sunset Gold: CTAs, author-bio edge, pills */
	--brand-emphasis: #A85D5D;       /* Deep Rose: emotional emphasis (1-2 per page) */
	--brand-success: #7C9082;        /* Sage */
	--brand-warning: #D4B483;        /* Gold */

	/* Text */
	--brand-text: #1B365D;           /* Navy: headings, quotes, strong text */
	--brand-text-body: #404040;      /* warm-grey-800: body prose */
	--brand-text-muted: #707070;     /* Warm Grey: secondary text, attribution */
	--brand-text-on-dark: #F5F5F5;   /* Pearl: text on navy */
	--brand-text-on-dark-muted: #b1c0b6;

	/* Surfaces */
	--brand-surface: #ffffff;        /* white cards */
	--brand-bg-light: #F5F5F5;       /* Pearl */
	--brand-bg-callout: #e6ece8;     /* sage-100: key-takeaways, FAQ open */
	--brand-bg-page: #F5F5F5;        /* Pearl: never pure white */

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

	/* Accents */
	--brand-rating-star: #D4B483;    /* Gold stars */
	--brand-pullquote-bg: #f1f4f2;   /* sage-50 */

	/* Typography: Cormorant Garamond (display/quotes) + Source Sans 3 (body) */
	--brand-font-display: "Cormorant Garamond", Georgia, "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.7;

	/* Type scale (px) from design-tokens.json */
	--brand-text-xs: 12px;
	--brand-text-sm: 14px;
	--brand-text-base: 16px;
	--brand-text-lg: 18px;
	--brand-text-xl: 20px;
	--brand-text-2xl: 24px;   /* H3 / quote */
	--brand-text-3xl: 36px;   /* H2 */
	--brand-text-4xl: 48px;   /* H1 */

	/* 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;

	/* Radius from design-tokens.json (3/6/10/18/999) */
	--brand-radius-sm: 6px;
	--brand-radius-md: 10px;
	--brand-radius-lg: 18px;
	--brand-radius-pill: 999px;

	/* Shadow: 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;
}

body {
	font-family: var(--brand-font-body);
	color: var(--brand-text-body);
	background: var(--brand-bg-page);
}

h1, h2, h3, h4, h5, .entry-title {
	font-family: var(--brand-font-display);
	letter-spacing: -0.01em;
	line-height: var(--brand-line-height-display);
}
/* Prose headings navy. wp:heading carries .wp-block-heading (RR-21), so this
 * hits writer prose headings only; block headings (hero title etc.) use their
 * own BEM classes and keep their plugin colour. */
.wp-block-heading { color: var(--brand-text); }
/* ============================================================
 * Navy hero treatment (locked 2026-06-01 per JL). The jab-core-blocks plugin
 * ships a light pearl hero; QoT overrides to a navy panel with light text.
 * All hero text goes light; the primary CTA goes gold. Scoped to .jab-hero so
 * site-wide buttons are unaffected.
 * ============================================================ */
.jab-hero { background: var(--brand-primary); color: var(--brand-text-on-dark); }
.jab-hero__title { color: var(--brand-text-on-dark); }
.jab-hero__subtitle { color: var(--brand-text-on-dark); }
.jab-hero__byline { color: var(--brand-text-on-dark-muted); }
.jab-hero .jab-btn--filled { background: var(--brand-accent); color: var(--brand-primary); border-color: var(--brand-accent); }
.jab-hero .jab-btn--filled:hover { background: #c2a06d; border-color: #c2a06d; }
.jab-hero .jab-btn--outline { color: var(--brand-text-on-dark); border-color: var(--brand-text-on-dark); }

/* ============================================================
 * Image placeholder hide (BUG-014).
 * The writer emits qot-image-placeholder-pending wrappers that image-studio
 * later fills. They must never render as visible body text.
 * ============================================================ */
.qot-image-placeholder-pending,
.ecc-image-placeholder-pending,
.jab-image-placeholder-pending {
	display: none !important;
}

/* ============================================================
 * CC attribution caption (BUG-015).
 * Wikimedia / CC images carry a visible credit. The image-studio populates
 * a caption; ensure it renders legibly and small under the image.
 * ============================================================ */
.qot-image-attribution,
figure.wp-block-image figcaption.cc-attribution {
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-xs);
	color: var(--brand-text-muted);
	line-height: var(--brand-line-height-body);
	margin-top: var(--brand-space-1);
	text-align: center;
}
.qot-image-attribution a { color: var(--brand-text-muted); text-decoration: underline; }

/* ============================================================
 * Header z-index + opaque background (carried from jab-test-theme fix).
 * Stops AdSense Auto Ads bleeding through a transparent Kadence header.
 * ============================================================ */
.site-header,
.kadence-header,
header.site-header,
.kadence-header-wrap,
.site-branding-header,
#masthead {
	background-color: var(--brand-surface, #fff);
	position: relative;
	z-index: 50;
}
.site-header.kadence-sticky-scrolled,
.kadence-scroll-down .site-header,
body.header-sticky-show .site-header {
	background-color: var(--brand-surface, #fff);
	box-shadow: var(--brand-shadow-sm);
}
.adsbygoogle,
ins.adsbygoogle,
.ad-container,
[id^="google_ads_iframe"] {
	z-index: 10 !important;
	position: relative;
}

/* ============================================================
 * Quote card readability (carried from jab-test-theme, QoT tokens).
 * Navy quote text, sage left-edge, gold on the card variant.
 * ============================================================ */
.jab-quote-card {
	background-color: var(--brand-pullquote-bg);
	border-left: 4px solid var(--brand-success);
	padding: var(--brand-space-5) var(--brand-space-6);
	border-radius: var(--brand-radius-md);
	margin: var(--brand-space-6) 0;
}
.jab-quote-card__text {
	font-family: var(--brand-font-display);
	font-size: var(--brand-text-2xl);
	font-style: italic;
	line-height: var(--brand-line-height-display);
	color: var(--brand-text);
	margin: 0 0 var(--brand-space-4);
}
.jab-quote-card__attribution {
	display: flex; flex-direction: column; gap: var(--brand-space-1);
	font-size: var(--brand-text-sm);
	line-height: var(--brand-line-height-body);
}
.jab-quote-card__attribution-name {
	font-weight: var(--brand-font-weight-semibold);
	color: var(--brand-success);   /* Sage attribution per brand */
	font-style: normal;
}
.jab-quote-card__attribution-source { color: var(--brand-text-muted); }
.jab-quote-card__attribution-source em { font-style: italic; }
.jab-quote-card__attribution-context { color: var(--brand-text-muted); font-size: var(--brand-text-xs); }
.jab-quote-card__commentary {
	margin-top: var(--brand-space-4);
	padding-top: var(--brand-space-4);
	border-top: 1px solid var(--brand-border);
	font-size: var(--brand-text-base);
	line-height: var(--brand-line-height-callout);
	color: var(--brand-text-body);
}
.jab-quote-card--variant-compact .jab-quote-card__text { font-size: var(--brand-text-lg); }
.jab-quote-card--variant-card {
	background-color: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-left: 4px solid var(--brand-accent);
	box-shadow: var(--brand-shadow-sm);
}

/* ============================================================
 * Related authors + related listicles.
 * LIVE markup (verified 2026-06-01): the writer emits these as wp:html with
 * .qot-related-{authors,listicles}__grid > a.__card containing an unclassed
 * <strong> (name) + <span> (description). Without CSS they collapse into one
 * underlined run. Fix: 2-col card grid, name over muted description, gold edge,
 * no underline (!important beats Kadence .entry-content a). jab-* selectors
 * kept for the future block-emitted path (__name / __context / __item).
 * ============================================================ */
.qot-related-authors__grid,
.qot-related-listicles__grid,
.jab-related-authors__grid,
.jab-related-listicles__grid {
	list-style: none;
	margin: var(--brand-space-5) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--brand-space-4);
}
@media (max-width: 600px) {
	.qot-related-authors__grid,
	.qot-related-listicles__grid,
	.jab-related-authors__grid,
	.jab-related-listicles__grid { grid-template-columns: 1fr; }
}
.jab-related-authors__item,
.jab-related-listicles__item { margin: 0; padding: 0; }
.qot-related-authors__card,
.qot-related-listicles__card,
.jab-related-authors__card,
.jab-related-listicles__card {
	display: block;
	height: 100%;
	text-decoration: none !important;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-left: 4px solid var(--brand-accent);
	border-radius: var(--brand-radius-md);
	padding: var(--brand-space-4) var(--brand-space-5);
	box-shadow: var(--brand-shadow-sm);
	transition: transform 140ms ease, box-shadow 140ms ease;
}
.qot-related-authors__card:hover,
.qot-related-listicles__card:hover,
.jab-related-authors__card:hover,
.jab-related-listicles__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--brand-shadow-md);
}
.qot-related-authors__card > strong,
.qot-related-listicles__card > strong,
.jab-related-authors__name,
.jab-related-listicles__title {
	display: block;
	font-family: var(--brand-font-display);
	font-size: var(--brand-text-xl);
	font-weight: var(--brand-font-weight-semibold);
	color: var(--brand-text);
	line-height: var(--brand-line-height-display);
	margin: 0 0 var(--brand-space-2);
}
.qot-related-authors__card > span,
.qot-related-listicles__card > span,
.jab-related-authors__context,
.jab-related-listicles__context {
	display: block;
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-sm);
	font-weight: var(--brand-font-weight-body);
	color: var(--brand-text-muted);
	line-height: var(--brand-line-height-body);
}
.qot-related-authors__card em,
.qot-related-listicles__card em,
.jab-related-authors__context em,
.jab-related-listicles__context em { font-style: italic; }