/* ============================================================================
 * OGA · Realistic Tourism Theme — v1 (Hybrid: warm tourism + tech accent)
 * ----------------------------------------------------------------------------
 * This file is a PRESENTATION-ONLY overlay. It changes no markup, no PHP
 * logic, no shortcodes, no WooCommerce hooks — it only redeclares the CSS
 * custom properties the existing theme already renders through, plus a
 * small set of component refinements. It is enqueued last (see functions.php)
 * so it wins the cascade without needing !important almost anywhere.
 *
 * Design direction:
 *   - Main content areas (hero, cards, listings, magazine, networks, footer
 *     quick-links) move from near-black "dark mode" to a warm, sunlit,
 *     photograph-friendly palette inspired by Siem Reap sandstone, saffron
 *     robes and jungle green.
 *   - The header bar and footer band stay dark navy — the "tech accent" —
 *     which is where the terminal-style prompts (`guide@ogace:...$`) and
 *     G-layer badges already live. This keeps OGACE's engineering identity
 *     intact while the tourist-facing content around it feels human.
 *   - Brand colors are pulled directly from the existing OGA logo (navy
 *     #0A2463, red #C1121F, teal #247BA0) so nothing new fights the mark.
 * ==========================================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
	/* ── Brand core (from assets/img/oga-logo.svg) ─────────────────────── */
	--oga-navy:        #0A2463;
	--oga-navy-deep:   #071A47;
	--oga-navy-soft:   #16336E;
	--oga-teal:        #2E86A6;
	--oga-red:         #C1121F;
	--oga-terracotta:  #D9713C;   /* new warm sibling of the logo red, for sunlit accents */
	--oga-gold:        #C9962C;  /* temple-gold, for premium/CTA highlights */
	--oga-jade:        #2F6B4F;  /* pagoda-roof green, for nature/eco tags */

	/* ── Warm neutral surface stack (replaces near-black dark mode) ────── */
	--bg0: #FBF6EC;   /* page background — warm sand/cream */
	--bg1: #FFFFFF;   /* card / raised surface */
	--bg2: #F5EDDC;   /* secondary surface — soft sand */
	--bg3: #EDE0C4;   /* tertiary / hover surface */
	--bg4: #E2D0A8;   /* deepest sand — dividers, chips */

	--line1: rgba(10,36,99,0.08);
	--line2: rgba(10,36,99,0.14);
	--line3: rgba(10,36,99,0.22);

	--fg0: #241B12;   /* primary ink — warm near-black */
	--fg1: #4A3B29;   /* secondary ink */
	--fg2: #7C6C54;   /* muted / captions */
	--fg3: #A6957A;   /* faint / mono labels, timestamps */

	/* ── "gold" is the theme's original primary-action variable name;
	 * point it at the brand navy so every existing --gold / --gold-dim /
	 * --gold-hover reference (buttons, links, borders) inherits the brand
	 * color for free. ─────────────────────────────────────────────────── */
	--gold:        var(--oga-navy);
	--gold-dim:    rgba(10,36,99,0.12);
	--gold-glow:   rgba(10,36,99,0.20);
	--gold-hover:  var(--oga-navy-deep);

	/* ── Network / G-layer chip colors — re-tuned for a light background
	 * (same hue families, adjusted for contrast on cream instead of
	 * near-black). ─────────────────────────────────────────────────────── */
	--g0: #1E7D8C; --g0-bg: rgba(30,125,140,0.10);  --g0-bd: rgba(30,125,140,0.28);
	--g1: #0A2463; --g1-bg: rgba(10,36,99,0.08);    --g1-bd: rgba(10,36,99,0.24);
	--g2: #6B3FA0; --g2-bg: rgba(107,63,160,0.09);  --g2-bd: rgba(107,63,160,0.24);
	--g3: #8A2F87; --g3-bg: rgba(138,47,135,0.09);  --g3-bd: rgba(138,47,135,0.24);
	--g4: #2F6B4F; --g4-bg: rgba(47,107,79,0.10);   --g4-bd: rgba(47,107,79,0.26);
	--g5: #1D5FB8; --g5-bg: rgba(29,95,184,0.09);   --g5-bd: rgba(29,95,184,0.24);
	--g6: #C1121F; --g6-bg: rgba(193,18,31,0.09);   --g6-bd: rgba(193,18,31,0.26);
	--g7: #B5651D; --g7-bg: rgba(181,101,29,0.10);  --g7-bd: rgba(181,101,29,0.26);

	/* ── Typography: friendlier display face for headings, Inter for body,
	 * DM Mono kept for the tech-accent prompts/badges. ─────────────────── */
	--sans:    'Inter', system-ui, -apple-system, sans-serif;
	--mono:    'DM Mono', ui-monospace, 'JetBrains Mono', 'Courier New', monospace;
	--display: 'Poppins', 'Inter Tight', 'Inter', system-ui, sans-serif;

	/* ── Warmer, rounder geometry ────────────────────────────────────────*/
	--r4:  6px;
	--r6:  8px;
	--r8:  10px;
	--r12: 16px;
	--r16: 20px;

	--shadow-card:       0 1px 2px rgba(60,42,18,0.06), 0 2px 8px rgba(60,42,18,0.07);
	--shadow-card-hover: 0 8px 20px rgba(60,42,18,0.12), 0 14px 34px rgba(60,42,18,0.10);
	--card-lift: -4px;

	/* Aliases used throughout inc/*.php (o-prefixed) follow the same light
	 * palette by default; header/footer re-scope these back to dark below. */
	--o-bg0: var(--bg0);   --o-bg1: var(--bg1);   --o-bg2: var(--bg2);   --o-bg3: var(--bg3);
	--o-fg0: var(--fg0);   --o-fg1: var(--fg1);   --o-fg2: var(--fg2);   --o-fg3: var(--fg3);
	--o-line1: var(--line1);  --o-line2: var(--line2);
	--o-gold: var(--gold);  --o-rose: var(--g6);   --o-teal: var(--g0);  --o-violet: var(--g2);
}

/* ============================================================================
 * SECOND TOKEN NAMESPACE — inc/ogace-core.php, ogace-pillars.php,
 * ogace-monetization.php and friends (the "v110007 merged" layer) render
 * through assets/css/design-tokens.css, which uses a *different* variable
 * naming convention (--text-primary, --bg-primary, --g0-color…--g4-color,
 * --pillar-*). It already defaults to a light theme, so it mostly agrees
 * with the palette above by luck — this block just warms it to match
 * exactly instead of leaving a slightly-too-white seam next to the cream
 * surfaces everywhere else.
 * ==========================================================================*/
:root {
	--text-primary:   var(--fg0);
	--text-secondary: var(--fg2);
	--bg-primary:     var(--bg1);
	--bg-secondary:   var(--bg2);
	--bg-tertiary:    var(--bg3);
	--border:         var(--line2);

	--g0-color: var(--g0);
	--g1-color: var(--g1);
	--g2-color: var(--g2);
	--g3-color: var(--g1); /* primary CTA in this namespace → brand navy */
	--g4-color: var(--g4);

	--pillar-tourism:   var(--oga-terracotta);
	--pillar-buddhism:  var(--oga-gold);
	--pillar-hinduism:  var(--oga-red);
	--pillar-digitalism: var(--oga-teal);
	--pillar-autoism:   var(--oga-jade);

	--font-primary: var(--sans);
	--radius-sm: var(--r4);
	--radius-base: var(--r8);
	--radius-lg: var(--r12);
	--shadow-sm: var(--shadow-card);
	--shadow-base: var(--shadow-card);
	--shadow-lg: var(--shadow-card-hover);
}

/* ============================================================================
 * DARK "TECH ACCENT" ZONES — header bar, mobile drawer, footer band.
 * Re-scopes the --o-* aliases (and the couple of --bg/--fg used directly)
 * back to a navy surface, so these two bookends keep the OGACE terminal
 * identity while everything between them reads as a warm tourism site.
 * ==========================================================================*/
.oga-topbar,
.oga-header-wrap,
.oga-mobile-drawer,
#colophon,
footer.oga-footer {
	--bg0: var(--oga-navy-deep);
	--bg1: var(--oga-navy);
	--bg2: var(--oga-navy-soft);
	--bg3: #1E407E;
	--fg0: #FBF6EC;
	--fg1: #D9E1F2;
	--fg2: #9FB0D6;
	--fg3: #6E82AE;
	--line1: rgba(255,255,255,0.10);
	--line2: rgba(255,255,255,0.16);

	--o-bg0: var(--bg0);   --o-bg1: var(--bg1);   --o-bg2: var(--bg2);
	--o-fg0: var(--fg0);   --o-fg1: var(--fg1);   --o-fg2: var(--fg2);  --o-fg3: var(--fg3);
	--o-line1: var(--line1); --o-line2: var(--line2);
	--o-gold: #E6C878; /* warm gold reads better than navy-on-navy for footer links */

	background: var(--bg0);
	color: var(--fg0);
}

/* ============================================================================
 * BASE
 * ==========================================================================*/
html { scroll-behavior: smooth; }

body {
	font-family: var(--sans);
	background: var(--bg0);
	color: var(--fg0);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, .oga-h1, .oga-h2, .oga-h3, .oga-logo-name {
	font-family: var(--display);
	letter-spacing: -0.01em;
}

a { color: var(--oga-navy); }
.oga-topbar a, .oga-header-wrap a, #colophon a, footer.oga-footer a { color: var(--fg1); }
.oga-topbar a:hover, .oga-header-wrap a:hover, #colophon a:hover, footer.oga-footer a:hover { color: #FFFFFF; }

.oga-shell { background: var(--bg0); }

/* ============================================================================
 * SECTION RHYTHM + DECORATIVE FRAMES
 * A subtle scalloped divider between stacked sections, evoking temple
 * roofline silhouettes, without touching any PHP-generated markup.
 * ==========================================================================*/
.oga-section {
	position: relative;
}
main#main-content > div > .oga-section + .oga-section::before,
main#main-content .oga-section + .oga-section::before {
	content: '';
	display: block;
	height: 10px;
	margin: 0 auto 14px;
	max-width: 220px;
	opacity: 0.55;
	background-repeat: repeat-x;
	background-size: 22px 10px;
	background-image: radial-gradient(circle at 50% 0%, var(--oga-gold) 0 3px, transparent 3.5px);
}

.oga-section-label {
	font-family: var(--mono);
	color: var(--fg2);
	font-weight: 500;
}
.oga-section-label::after { background: var(--line2); }

/* First on-page surface (OGOS console / homepage top feature) reads as the
 * hero: warm gradient wash + soft temple-silhouette watermark. */
main#main-content > div:first-child .oga-section:first-of-type,
main#main-content > .oga-section:first-of-type {
	background:
		radial-gradient(ellipse 900px 420px at 15% -10%, rgba(217,113,60,0.14), transparent 60%),
		radial-gradient(ellipse 700px 380px at 100% 0%, rgba(46,134,166,0.12), transparent 55%),
		var(--bg0);
	border-bottom: 1px solid var(--line1);
	padding-top: clamp(20px, 4vw, 40px);
	padding-bottom: clamp(20px, 4vw, 40px);
}

/* ============================================================================
 * CARDS, CHIPS, BADGES, LINKS — shared across every template
 * ==========================================================================*/
.oga-card, .ogace-card {
	background: var(--bg1);
	border: 1px solid var(--line2);
	border-radius: var(--r12);
	box-shadow: var(--shadow-card);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.oga-card:hover, .ogace-card:hover {
	border-color: var(--oga-terracotta);
	box-shadow: var(--shadow-card-hover);
	transform: translateY(var(--card-lift));
}

.oga-badge, .oga-quicklink {
	font-family: var(--mono);
	border-radius: var(--r8) !important;
}

.oga-prompt {
	background: var(--bg2);
	border-left: 2px solid var(--oga-terracotta);
	color: var(--fg2);
}

/* Buttons — sunlit primary CTA, calm secondary */
.ogace-btn, .oga-connect-btn, button.oga-connect-btn {
	font-family: var(--sans);
	border-radius: var(--r8);
	font-weight: 600;
	letter-spacing: -0.005em;
}
.ogace-btn-primary {
	background: linear-gradient(135deg, var(--oga-terracotta), var(--oga-red));
	color: #FFFFFF;
	box-shadow: 0 4px 14px rgba(193,18,31,0.22);
}
.ogace-btn-primary:hover {
	background: linear-gradient(135deg, #E3854E, var(--oga-red));
	box-shadow: 0 8px 20px rgba(193,18,31,0.28);
	transform: translateY(-2px);
}
.ogace-btn-secondary {
	background: var(--bg1);
	color: var(--oga-navy);
	border: 1px solid var(--line2);
}
.ogace-btn-secondary:hover { background: var(--bg2); border-color: var(--oga-teal); }

/* Emoji / icon glyphs used throughout copy (network names, chip icons,
 * quick-links) — keep them crisp and consistently sized instead of
 * inheriting whatever the surrounding text size happens to be. */
.oga-logo-mark, .net-icon, .chip-icon {
	font-size: 1.05em;
	line-height: 1;
}
.oga-quicklink span:first-child,
.oga-drawer-item span:first-child {
	font-size: 1.1em;
}

/* ============================================================================
 * HEADER — logo prominence, calmer hamburger/search, warm hover states
 * ==========================================================================*/
.oga-logo-name { color: #FFFFFF; font-weight: 700; }
.oga-logo-sub  { color: var(--fg2); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }
.oga-logo-mark-svg, .oga-logo-mark--svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }

.oga-topbar { border-bottom: 1px solid var(--line2); backdrop-filter: saturate(140%) blur(6px); }
.oga-icon-btn:hover, .oga-hamburger:hover { background: rgba(255,255,255,0.08); }
.oga-search-bar input, .oga-search-expanded input {
	background: var(--bg2);
	color: var(--fg0);
	border: 1px solid var(--line2);
	border-radius: var(--r8);
}

/* ============================================================================
 * FOOTER — warm-gold quick-links on navy, calmer prompt line
 * ==========================================================================*/
#colophon, footer.oga-footer { border-top: 1px solid var(--line2); }
#colophon a.oga-quicklink, footer.oga-footer a.oga-quicklink {
	background: rgba(255,255,255,0.04) !important;
	border-color: var(--line2) !important;
}
#colophon a.oga-quicklink:hover, footer.oga-footer a.oga-quicklink:hover {
	background: rgba(255,255,255,0.09) !important;
	border-color: var(--oga-gold) !important;
}

/* ============================================================================
 * RESPONSIVE — hero watermark backs off on small screens for legibility
 * ==========================================================================*/
@media (max-width: 640px) {
	main#main-content > .oga-section:first-of-type { padding-top: 16px; padding-bottom: 16px; }
}

/* ============================================================================
 * REDUCED MOTION
 * ==========================================================================*/
@media (prefers-reduced-motion: reduce) {
	.oga-card, .ogace-card, .ogace-btn-primary { transition: none; }
}