/* ==========================================================================
   HẢI TRIỀU FP — BRAND IDENTITY v2  ·  "Mindful Prosperity"
   --------------------------------------------------------------------------
   Single source of truth for the site's look: colors, typography, logo and
   the shared components (nav, footer, buttons, labels, floating actions).

   Every page links this file AFTER its own <style>, so rules here win over
   the page-level copies. To re-brand the whole site, edit this file only.

   Sections
     1. Fonts
     2. Core palette (from HaiTrieuFP_BrandIdentity.pdf)
     3. Semantic tokens + legacy aliases used by page CSS
     4. Dark surfaces (accent switches to the original Gold)
     5. Base
     6. Logo
     7. Nav
     8. Footer
     9. Buttons
    10. Eyebrow / section label
    11. Floating actions + feedback modal
   ========================================================================== */

/* 1. FONTS — Plus Jakarta Sans, 4 weights (300/400/500/700) + 600 for labels */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* 2. CORE PALETTE — 60% Cream · 30% Forest · 10% Gold */
  --brand-forest:      #2D4A3E;   /* Forest Deep — structure, headings, CTA */
  --brand-forest-900:  #223A30;   /* derived: deeper Forest for gradients/footer */
  --brand-forest-700:  #3F6253;   /* derived: lighter Forest for secondary fills */
  --brand-gold:        #C9A84C;   /* Refined Gold — logo, icons, accents on dark */
  --brand-gold-light:  #DCC27A;   /* derived: hover / highlight on dark */
  --brand-gold-pale:   #F3E9CC;   /* derived: tinted text on dark */
  --brand-gold-text:   #84681C;   /* derived: Gold for small text on light bg (4.8:1) */
  --brand-gold-hover:  #B8963A;   /* derived: pressed/hover Gold fill */
  --brand-cream:       #FAF4E8;   /* Warm Cream — main background */
  --brand-cream-deep:  #F2EADA;   /* derived: alternating section band */
  --brand-stone:       #8C7B6B;   /* Warm Stone — decorative/large secondary text */
  --brand-stone-text:  #75685B;   /* derived: Stone for small text (4.9:1) */
  --brand-sand:        #DDD1B9;   /* Sand Mist — borders, dividers */
  --brand-ink:         #574D43;   /* derived: body text, warm and readable */

  /* RGB triplets for translucent tints: rgba(var(--x-rgb), alpha) */
  --forest-rgb: 45,74,62;
  --gold-rgb:   201,168,76;
  --ink-rgb:    45,74,62;

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* 3. SEMANTIC TOKENS + LEGACY ALIASES (names the page CSS already uses) */
  --brand-darkest:      var(--brand-forest);
  --brand-dark:         var(--brand-forest-900);
  --brand-primary:      var(--brand-forest-700);
  --brand-mid:          var(--brand-stone-text);
  --brand-accent:       var(--brand-gold-text);
  --brand-accent-light: var(--brand-gold);
  --brand-accent-pale:  var(--brand-gold-pale);
  --brand-accent-hover: var(--brand-forest-900);
  --brand-neutral:      var(--brand-sand);
  --brand-light:        var(--brand-cream-deep);
  --gold:               var(--brand-accent);
  --cream:              var(--brand-cream);
  --text-dark:          var(--brand-forest);
  --text-mid:           var(--brand-ink);
  --text-light:         var(--brand-stone-text);
  --border:             rgba(var(--ink-rgb),0.12);
  --shadow:             0 4px 21px rgba(var(--ink-rgb),0.08);

  /* translucent accent tints (old orange rgba(255,145,77,a) now maps here) */
  --accent-rgb:  var(--gold-rgb);
  --darkest-rgb: var(--forest-rgb);

  /* buttons */
  --btn-bg:       var(--brand-forest);
  --btn-fg:       var(--brand-cream);
  --btn-bg-hover: var(--brand-forest-900);
}

/* 4. DARK SURFACES — on Forest backgrounds the accent becomes the true Gold */
nav, footer, .nav-dropdown-menu,
.landing, #hero, .article-hero, .article-cta, .highlight-box, .story-highlight,
#cta, #journey, #newsletter, #how-it-works, .solution-quicknav, .rom-tabs,
.post-card-big-cover, .post-card-mid-cover, .cred-period, .cred-icon,
.sub-nav, .sim-result-card, .rom .intro-card.earth,
[data-surface="dark"] {
  --brand-accent:       var(--brand-gold);
  --brand-accent-light: var(--brand-gold-light);
  --brand-accent-hover: var(--brand-gold-light);
  --gold:               var(--brand-gold);   /* aliases must be re-declared: custom props resolve where defined */
  --btn-bg:       var(--brand-gold);
  --btn-fg:       var(--brand-forest);
  --btn-bg-hover: var(--brand-gold-light);
}

/* 5. BASE */
body { font-family: var(--font-sans); }
::selection { background: rgba(var(--gold-rgb),0.35); color: var(--brand-forest); }
button, input, textarea, select { font-family: inherit; }

/* 5b. LINE BREAKS — Vietnamese typography
   Headings: balanced lines; highlighted phrases never split across lines.
   Body text: avoid a lone word on the last line. Compound words are glued by brand.js. */
h1, h2, h3, h4,
[class*="title"], [class*="-name"], .article-desc, .hero-desc, .section-sub { text-wrap: balance; }
[class*="title"] .fp { white-space: nowrap; }  /* short em/strong in headings get nowrap from brand.js */
p, li, blockquote, [class*="-desc"], [class*="-body"], [class*="-note"] { text-wrap: pretty; }
/* Article meta line (author · date · read time): each item stays whole, the row wraps between items */
.article-meta { flex-wrap: wrap; row-gap: 4px; }
.article-meta > span { white-space: nowrap; }

/* 6. LOGO — mark + wordmark; "FP" is always Gold */
.fp { color: var(--brand-gold); }
.brand-mark { display: block; height: auto; }

/* 7. NAV */
nav {
  background: rgba(var(--forest-rgb),0.97);
  border-bottom: 1px solid rgba(var(--gold-rgb),0.30);
}
.nav-logo { flex-direction: row !important; align-items: center; gap: 10px !important; }
.nav-logo-mark { height: 38px; width: auto; flex-shrink: 0; }
.nav-logo-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.nav-logo-name { font-weight: 700 !important; color: var(--brand-cream) !important; }
.nav-dot { display: none; }
.nav-slogan { color: rgba(250,244,232,0.5) !important; }
.nav-links a { color: rgba(250,244,232,0.75); }
.nav-links a:hover, .nav-links a.active { color: var(--brand-gold); }
.nav-cta { background: var(--brand-gold) !important; color: var(--brand-forest) !important; font-weight: 600 !important; }
.nav-cta:hover { background: var(--brand-gold-light) !important; }
.nav-logo-name, .nav-cta { white-space: nowrap; }
@media (max-width: 640px) {
  .nav-logo-mark { height: 32px; }
  .nav-slogan { display: none; }
}
.nav-dropdown-menu { background: rgba(var(--forest-rgb),0.98); border-color: rgba(var(--gold-rgb),0.2); }
.nav-dropdown-menu a { color: rgba(250,244,232,0.75) !important; }
.nav-dropdown-menu a:hover { background: rgba(var(--gold-rgb),0.12); color: var(--brand-gold) !important; }

/* 7b. MOBILE MENU (☰) — toggle injected by brand/brand.js */
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 10px; margin-right: -10px;
    background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span {
    display: block; height: 2px; border-radius: 2px; background: var(--brand-cream);
    transition: transform 0.25s, opacity 0.2s;
  }
  nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  nav .nav-links {
    position: fixed; top: 55px; left: 0; right: 0;
    display: flex !important; flex-direction: column; align-items: stretch; gap: 0 !important;
    max-height: calc(100vh - 55px); overflow-y: auto;
    padding: 8px 21px 21px;
    background: rgba(var(--forest-rgb),0.99);
    border-bottom: 1px solid rgba(var(--gold-rgb),0.3);
    box-shadow: 0 13px 34px rgba(0,0,0,0.25);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }
  nav.nav-open .nav-links { opacity: 1; visibility: visible; transform: none; }
  nav .nav-links a, nav .nav-links a:not(.nav-cta) {
    display: block !important; padding: 13px 0; font-size: 0.9375rem !important;
    border-bottom: 1px solid rgba(250,244,232,0.08);
  }
  nav .nav-dropdown { position: static; }
  nav .nav-dropdown::before { display: none; }
  nav .nav-dropdown > a::after { content: ''; }
  nav .nav-dropdown-menu {
    display: block; position: static; transform: none; min-width: 0;
    background: none; border: 0; border-radius: 0; padding: 0 0 0 13px;
  }
  nav.nav-open .nav-dropdown-menu { visibility: visible; opacity: 1; }
  nav .nav-links .nav-dropdown-menu a { white-space: normal; font-size: 0.875rem !important; padding: 10px 8px !important; }
  nav .nav-links .nav-cta {
    margin-top: 13px; padding: 12px !important; text-align: center;
    border-bottom: 0; border-radius: var(--r-md, 8px);
  }
}

/* 8. FOOTER */
footer { background: var(--brand-forest-900); border-top: 1px solid rgba(var(--gold-rgb),0.15); }
.footer-copy { color: rgba(250,244,232,0.45); }
.footer-links a { color: rgba(250,244,232,0.6); }
.footer-links a:hover { color: var(--brand-gold); }
.social-link { background: rgba(250,244,232,0.05); border-color: rgba(var(--gold-rgb),0.2); }
.social-link:hover { background: rgba(var(--gold-rgb),0.12); border-color: rgba(var(--gold-rgb),0.45); }

/* 9. BUTTONS — Forest on light, Gold on dark (see section 4) */
.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-fg) !important;
  font-weight: 600;
}
.btn-primary svg [stroke] { stroke: currentColor; }
.btn-primary svg text, .btn-primary svg [fill]:not([fill="none"]) { fill: currentColor; }
.btn-primary:hover { background: var(--btn-bg-hover); box-shadow: 0 8px 28px rgba(var(--forest-rgb),0.25); }
.btn-outline { color: var(--brand-accent-pale); border-color: rgba(var(--gold-rgb),0.5); }
.btn-outline:hover { background: rgba(var(--gold-rgb),0.12); }

/* 10. EYEBROW / SECTION LABEL — 10–11px · 600 · uppercase · 3px tracking */
.section-tag {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brand-accent);
}

/* 11. FLOATING ACTIONS + FEEDBACK MODAL (markup is inline on every page) */
#float-actions > button { background: var(--brand-gold) !important; box-shadow: 0 4px 16px rgba(var(--forest-rgb),0.35) !important; }
#float-actions > button svg { stroke: var(--brand-forest); }
#float-feedback-modal > div { font-family: var(--font-sans) !important; }
#float-feedback-modal button[type="submit"] { background: var(--brand-forest) !important; color: var(--brand-cream) !important; }