/* ════════════════════════════════════════════════════════════════
   ZAJUGA · SAGE THEME — canonical palette
   Added 2026-10-09 on branch `sage-theme`.

   One place where the colors live. Every public page either links
   this file or repeats these same `--z-*` values at the top of its
   own :root (self-contained pages with no shared stylesheet).

   CONTRAST (WCAG 2.1, computed, not eyeballed):
     --z-text        on --z-bg      10.19:1   ✓ AA / AAA body
     --z-text-muted  on --z-bg       6.98:1   ✓ AA / AAA body
     --z-text-faint  on --z-bg       5.71:1   ✓ AA body
     --z-gold-text   on --z-bg       4.43:1   ✓ AA large text only
     --z-gold-text-strong on --z-bg  5.45:1   ✓ AA body
     --z-btn-text    on --z-gold     6.17:1   ✓ AA body
     --z-text-on-anchor       on --z-anchor  10.13:1  ✓
     --z-text-muted-on-anchor on --z-anchor   8.68:1  ✓
     --z-gold        on --z-anchor    4.88:1  ✓ AA body
     --z-gold        on --z-bg        2.09:1  ✗ NEVER gold ink on cream
                                              (that is what
                                               --z-gold-text is for)
   ════════════════════════════════════════════════════════════════ */

:root{
  /* ── The palette as specified ── */
  --z-bg:#EEF0E3;                  /* sage cream — the page, everywhere */
  --z-anchor:#1F3A2E;              /* deep green — anchor areas only */
  --z-gold:#C9A24A;                /* gold as a SURFACE: buttons, badges */
  --z-gold-text:#8A6A1F;           /* gold as INK on cream — large text */
  --z-text:#1F3A2E;
  --z-text-muted:#3D5447;
  --z-text-on-anchor:#F3EEDC;
  --z-text-muted-on-anchor:#D9DECF;

  /* ── Derived, so the whole site can be re-toned from the eight above ── */
  --z-gold-text-strong:#7A5C14;    /* gold ink at body size — clears 4.5:1 */
  --z-text-faint:#4A6356;          /* third-level ink, still clears 4.5:1 */
  --z-bg-2:#E4E7D7;                /* alternating band */
  --z-bg-3:#F6F7F0;                /* raised card on cream */
  --z-anchor-deep:#162B21;         /* footer, deepest anchor */
  --z-anchor-soft:#2A4B3B;         /* anchor hover / inner panel */
  --z-btn-text:#1F2A22;            /* ink on a gold button */
  --z-line:rgba(31,58,46,.16);
  --z-line-strong:rgba(31,58,46,.34);
  --z-line-on-anchor:rgba(243,238,220,.22);
  --z-tv:#7A4A9E;                  /* ZajugaTV purple, darkened for cream */
  --z-tv-on-anchor:#C9A6E6;
}

/* ════════════════════════════════════════════════════════════════
   Legacy token remap.

   `css/shared-shell.css` and `css/zajuga.css` are loaded FIRST and
   define their own names (--cream, --ink, --green-900, --forest…).
   Rather than rewrite the several hundred rules that consume those
   names, the names are re-pointed here. A page gets the sage theme
   by linking this file after its base stylesheet; a page that does
   not link it is byte-identical to before.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* shared-shell.css */
  --green-900:var(--z-anchor-deep);
  --green-800:var(--z-anchor);
  --green-700:var(--z-anchor);
  --green-600:var(--z-anchor-soft);
  --green-500:var(--z-gold-text-strong); /* used as ink on cream only */
  --gold:var(--z-gold);
  --gold-soft:#D8B465;
  --cream:var(--z-bg);
  --cream-2:var(--z-bg-2);
  --ink:var(--z-text);
  --ink-soft:var(--z-text-muted);
  --line:var(--z-line);
  --line-d:var(--z-line-on-anchor);

  /* css/zajuga.css (Farrah names) */
  --cream-deep:var(--z-bg-2);
  --paper:var(--z-bg-3);
  --ink-fade:var(--z-text-faint);
  --forest:var(--z-anchor);
  --forest-deep:var(--z-anchor-deep);
  --gold-deep:var(--z-gold-text-strong);
  --ember:#9C3B18;
  --ember-border:var(--z-line);
  --sage-mic:var(--z-anchor-soft);
  --burgundy:var(--z-anchor);
  --burgundy-d:var(--z-anchor-deep);
  --burgundy-l:var(--z-anchor-soft);
  --cream-d:var(--z-bg-2);
  --gold-l:#D8B465;
  --charcoal:var(--z-text);
  --charcoal-l:var(--z-text-muted);
  --muted:var(--z-text-muted);
  --white:var(--z-bg-3);
  --line-cream:var(--z-line);
}

/* ── Anchor contexts: flip the ink tokens, keep the component rules ──
   Any section painted deep green re-points the same names to their
   on-anchor values, so the rules inside it need no edit at all. */
.sec-dark, .sec-darker, .sec-gradient,
.page-hero.dark, main.stub, nav, footer, .z-anchor{
  --cream:var(--z-text-on-anchor);
  --cream-2:var(--z-text-muted-on-anchor);
  --ink:var(--z-text-on-anchor);
  --ink-soft:var(--z-text-muted-on-anchor);
  --green-500:var(--z-gold);
  --line:var(--z-line-on-anchor);
  --paper:var(--z-anchor-soft);
  --white:var(--z-anchor-soft);
  --muted:var(--z-text-muted-on-anchor);
  --charcoal:var(--z-text-on-anchor);
  --charcoal-l:var(--z-text-muted-on-anchor);
}

/* ── Page ground ── */
html{background:var(--z-bg)}
body{background:var(--z-bg); color:var(--z-text)}

/* ── Buttons (rule 3) ── */
.btn-gold{background:var(--z-gold); color:var(--z-btn-text); box-shadow:0 10px 26px -14px rgba(31,58,46,.45)}
.btn-gold:hover{background:#D8B465; box-shadow:0 16px 34px -14px rgba(31,58,46,.5)}
.btn-ghost{border:2px solid var(--z-text); color:var(--z-text)}
.btn-ghost:hover{border-color:var(--z-anchor-soft); color:var(--z-anchor-soft)}
.btn-dark{background:var(--z-anchor); color:var(--z-text-on-anchor)}
.btn-dark:hover{background:var(--z-anchor-soft)}
.btn-light{background:var(--z-bg-3); color:var(--z-text); border-color:var(--z-line-strong)}
.btn-light:hover{border-color:var(--z-anchor); color:var(--z-anchor)}
/* On an anchor section an outline button needs light ink, not dark. */
.sec-dark .btn-ghost, .sec-darker .btn-ghost, .sec-gradient .btn-ghost,
.page-hero.dark .btn-ghost, main.stub .btn-ghost, nav .btn-ghost,
footer .btn-ghost, .z-anchor .btn-ghost{
  border-color:var(--z-text-on-anchor); color:var(--z-text-on-anchor);
}
.sec-dark .btn-ghost:hover, .sec-darker .btn-ghost:hover, .sec-gradient .btn-ghost:hover,
.page-hero.dark .btn-ghost:hover, main.stub .btn-ghost:hover, nav .btn-ghost:hover,
footer .btn-ghost:hover, .z-anchor .btn-ghost:hover{
  border-color:var(--z-gold); color:var(--z-gold);
}

/* ── Chrome ── */
nav{background:var(--z-anchor-deep); border-bottom:1px solid var(--z-line-on-anchor)}
.logo{color:var(--z-gold)}
.nav-links a{color:var(--z-text-muted-on-anchor)}
.nav-links a:hover{color:var(--z-gold)}
.lang-switch{color:var(--z-text-muted-on-anchor); border-color:var(--z-line-on-anchor)}
.lang-switch:hover{color:var(--z-gold); border-color:var(--z-gold)}
.mobile-menu{background:var(--z-anchor-deep); border-top:1px solid var(--z-line-on-anchor)}
.mobile-menu li{border-top:1px solid var(--z-line-on-anchor)}
.mobile-menu li a{color:var(--z-text-on-anchor)}
.menu-btn{color:var(--z-text-on-anchor)}
.menu-btn svg line{stroke:var(--z-text-on-anchor)}

footer{background:var(--z-anchor-deep); color:var(--z-text-muted-on-anchor); border-top:1px solid var(--z-line-on-anchor)}
footer h5{color:var(--z-text-on-anchor)}
footer ul a:hover{color:var(--z-gold)}
footer .base{border-top:1px solid var(--z-line-on-anchor)}

/* ── Sections ── */
.sec-dark{background:var(--z-anchor); color:var(--z-text-on-anchor)}
.sec-darker{background:var(--z-anchor-deep); color:var(--z-text-on-anchor)}
.sec-gradient{background:linear-gradient(160deg,var(--z-anchor),var(--z-anchor-deep)); color:var(--z-text-on-anchor)}
.sec-cream-2{background:var(--z-bg-2)}
.sec-head .eyebrow{color:var(--z-gold-text-strong)}
.sec-head p{color:var(--z-text-muted)}
.sec-dark .sec-head .eyebrow,
.sec-darker .sec-head .eyebrow,
.sec-gradient .sec-head .eyebrow{color:var(--z-gold)}
.sec-dark .sec-head p,
.sec-darker .sec-head p,
.sec-gradient .sec-head p{color:var(--z-text-muted-on-anchor)}

/* ── Cards ── */
.card{background:var(--z-bg-3); border:1px solid var(--z-line); color:var(--z-text)}
.card:hover{border-color:var(--z-gold-text); background:var(--z-bg-3)}
.card p{color:var(--z-text-muted)}
.card-light{background:var(--z-bg-3); border:1px solid var(--z-line); color:var(--z-text); box-shadow:0 8px 24px -18px rgba(31,58,46,.5)}
.card-light:hover{border-color:var(--z-anchor); background:var(--z-bg-3)}
.card-light p{color:var(--z-text-muted)}
/* Cards sitting on an anchor section keep the translucent-light treatment. */
.sec-dark .card, .sec-darker .card, .sec-gradient .card, .z-anchor .card{
  background:rgba(243,238,220,.06); border-color:var(--z-line-on-anchor); color:var(--z-text-on-anchor);
}
.sec-dark .card:hover, .sec-darker .card:hover, .sec-gradient .card:hover, .z-anchor .card:hover{
  border-color:rgba(201,162,74,.55); background:rgba(243,238,220,.09);
}
.sec-dark .card p, .sec-darker .card p, .sec-gradient .card p, .z-anchor .card p,
.card-dark p{color:var(--z-text-muted-on-anchor)}

/* ── Heroes ── */
.page-hero{background:linear-gradient(180deg,var(--z-bg),var(--z-bg-2)); border-bottom:1px solid var(--z-line)}
.page-hero .eyebrow{color:var(--z-gold-text-strong)}
.page-hero h1{color:var(--z-text)}
.page-hero p.lead{color:var(--z-text-muted)}
.page-hero.dark{background:linear-gradient(160deg,var(--z-anchor),var(--z-anchor-deep)); color:var(--z-text-on-anchor); border-bottom-color:var(--z-line-on-anchor)}
.page-hero.dark h1{color:var(--z-text-on-anchor)}
.page-hero.dark p.lead{color:var(--z-text-muted-on-anchor)}
.page-hero.dark .eyebrow{color:var(--z-gold)}

main.stub{background:linear-gradient(160deg,var(--z-anchor),var(--z-anchor-deep)); color:var(--z-text-on-anchor)}
main.stub .eyebrow{color:var(--z-gold)}
main.stub h1{color:var(--z-text-on-anchor)}
main.stub p.tag{color:var(--z-text-muted-on-anchor)}

/* ── Forms ── */
.form-shell{background:var(--z-bg-3); border:1px solid var(--z-line); box-shadow:0 20px 44px -34px rgba(31,58,46,.4)}
.form-shell .sub{color:var(--z-text-muted)}
.form-field label{color:var(--z-gold-text-strong)}
.form-field input,.form-field select,.form-field textarea{background:var(--z-bg-3); border:1px solid var(--z-line-strong); color:var(--z-text)}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--z-text-faint)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--z-gold-text); box-shadow:0 0 0 3px rgba(138,106,31,.18)}
.form-shell.dark{background:var(--z-anchor); border-color:var(--z-line-on-anchor)}
.form-shell.dark .sub{color:var(--z-text-muted-on-anchor)}
.form-shell.dark .form-field label{color:var(--z-text-muted-on-anchor)}
.form-shell.dark .form-field input,
.form-shell.dark .form-field select,
.form-shell.dark .form-field textarea{background:rgba(22,43,33,.75); border-color:var(--z-line-on-anchor); color:var(--z-text-on-anchor)}
.form-shell.dark .pw-toggle{color:var(--z-text-muted-on-anchor)}
.pw-toggle{color:var(--z-text-muted)}
.pw-toggle:hover,.pw-toggle:focus-visible{color:var(--z-gold-text-strong)}
.form-error{border-color:rgba(124,42,18,.45); background:rgba(124,42,18,.07); color:#7C2A12}
.form-success{border-color:rgba(31,58,46,.4); background:rgba(31,58,46,.07); color:var(--z-anchor)}
.form-shell.dark .form-success{color:var(--z-gold)}

/* ── Odds and ends ── */
.media-placeholder{background:linear-gradient(140deg,var(--z-anchor),var(--z-anchor-deep)); border:1px solid var(--z-line-on-anchor)}
.media-placeholder:before{background-image:radial-gradient(rgba(243,238,220,.7) 1px, transparent 1px)}
::selection{background:var(--z-gold); color:var(--z-btn-text)}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--z-gold-text-strong); outline-offset:3px}

/* ════════════════════════════════════════════════════════════════
   css/zajuga.css chrome — the second shared nav (#nav-logged-out /
   #nav-logged-in + the mobile drawer) and the inlined site footer.

   This bar was cream-on-cream with #C99A2E lettering (2.41:1) and a
   #5A8B7B log-in pill (3.63:1). Both failed on the old ground too;
   on sage cream they would have stayed failing. It is now the same
   ANCHOR bar the shared-shell pages use, so the site has one nav
   treatment and the gold reads at 4.88:1.
   ════════════════════════════════════════════════════════════════ */
:root{
  --nav-bg:var(--z-anchor-deep);
  --nav-text:var(--z-text-on-anchor);
  --nav-accent:var(--z-gold);
  --nav-border:var(--z-line-on-anchor);
  --nav-link-muted:var(--z-text-muted-on-anchor);
}
body.nav-dark{
  --nav-bg:var(--z-anchor-deep);
  --nav-text:var(--z-text-on-anchor);
  --nav-link-muted:var(--z-text-muted-on-anchor);
  --nav-border:var(--z-line-on-anchor);
}
#nav-logged-out,#nav-logged-in{background:var(--z-anchor-deep); border-bottom:1px solid var(--z-line-on-anchor)}
.nav-link-cta{background:var(--z-gold); color:var(--z-btn-text)}
.nav-link-cta:hover{background:#D8B465; color:var(--z-btn-text)}
.nav-link-login,
body.nav-dark .nav-link-login{border:1.5px solid var(--z-text-muted-on-anchor); color:var(--z-text-on-anchor); background:transparent}
.nav-link-login:hover,
body.nav-dark .nav-link-login:hover{background:var(--z-text-on-anchor); color:var(--z-anchor-deep); border-color:var(--z-text-on-anchor)}
.nav-li.accent{color:var(--z-gold)}
.nav-avatar{background:var(--z-gold); color:var(--z-btn-text)}

.nav-mobile-menu{background:var(--z-anchor-deep)}
.nav-mobile-head{border-bottom:1px solid var(--z-line-on-anchor)}
.nav-mobile-head .nmm-brand{color:var(--z-gold)}
.nav-mobile-close{color:var(--z-text-on-anchor)}
.nav-mobile-menu a{color:var(--z-text-on-anchor); border-bottom:1px solid var(--z-line-on-anchor)}
.nav-mobile-menu a:hover,.nav-mobile-menu a:active{color:var(--z-gold)}
.nav-mobile-menu a.nmm-login{border:1.5px solid var(--z-text-muted-on-anchor); color:var(--z-text-on-anchor)}
.nav-mobile-menu a.nmm-login:hover{background:var(--z-text-on-anchor); color:var(--z-anchor-deep)}
.nav-mobile-menu a.nmm-cta{background:var(--z-gold); color:var(--z-btn-text); border-bottom:none}
.nav-mobile-menu a.nmm-cta:hover{background:#D8B465; color:var(--z-btn-text)}

/* May-11 subpage utilities from zajuga.css */
.btn-primary{background:var(--z-gold); color:var(--z-btn-text)}
.btn-primary:hover{background:#D8B465; color:var(--z-btn-text); box-shadow:0 8px 22px rgba(31,58,46,.22)}
/* Outline on cream: 2px --z-text border, --z-text ink (rule 3). */
.btn-secondary{background:transparent; color:var(--z-text); border:2px solid var(--z-text)}
.btn-secondary:hover{background:var(--z-anchor); color:var(--z-text-on-anchor); border-color:var(--z-anchor)}
.lede{color:var(--z-text-muted)}

/* ── The inlined site footer (.zj-footer), carried on ~29 pages ──
   ANCHOR. The crisis strip below it is deliberately left alone: it is
   the one surface that must break the palette to be noticed, and its
   wording, numbers and links are untouched. */
.zj-footer{background:var(--z-anchor-deep); color:var(--z-text-on-anchor)}
.zj-footer-col h4{color:var(--z-gold)}
.zj-footer-col a{color:var(--z-text-muted-on-anchor)}
.zj-footer-col a:hover{color:var(--z-text-on-anchor)}
.zj-footer-bottom{border-top:1px solid var(--z-line-on-anchor); color:var(--z-text-muted-on-anchor)}
.zj-footer-bottom a{color:var(--z-text-muted-on-anchor)}
.zj-drawer a:hover{color:var(--z-gold)}
.nav-es:hover{border-color:var(--z-gold)}

/* ── Retreat sub-page chrome (zajuga.css .r-*).
   NOTE: zajuga.css line ~559 already forced `.r-hero` to a CREAM ground
   with !important in the May-11 pass, while `.r-eyebrow` / `.r-crumb`
   kept painting themselves in --gold. That was 2.41:1 on the old cream
   and is a pre-existing failure, not one this theme introduced; it is
   fixed here rather than carried over. */
.r-eyebrow{color:var(--z-gold-text-strong)}
.r-crumb{color:var(--z-gold-text-strong)}
.r-crumb a{color:var(--z-text-muted); opacity:1}
.r-crumb a:hover{color:var(--z-gold-text-strong); opacity:1}
.r-title em{color:var(--z-gold-text)}
.r-tag{opacity:1}
/* ANCHOR: the retreat hero illustration plate (was #2a1219). */
.r-hero-img{
  background:radial-gradient(ellipse at 30% 30%,rgba(201,162,74,.22),transparent 55%),
             radial-gradient(ellipse at 70% 70%,rgba(42,75,59,.55),transparent 55%),
             var(--z-anchor);
  border:1px solid rgba(31,58,46,.3);
}
.r-prose-dark, .r-prose-burgundy, .r-three, .r-quotes, .r-apply,
.section-dark, .section-charcoal, .biz-hero{color:var(--z-text-on-anchor)}

/* ════════════════════════════════════════════════════════════════
   Language menu (2026-10-10) — the five language dropdown that
   replaced the single toggle pill. Homepages carry this same block
   inline; these rules serve the shared-shell pages.
   ════════════════════════════════════════════════════════════════ */
.lang-menu{position:relative; display:inline-flex}
.lang-menu > button{background:none; cursor:pointer; line-height:1; font-family:inherit}
.lang-caret{margin-left:5px; font-size:8px; vertical-align:middle}
.lang-list{
  position:absolute; top:calc(100% + 8px); right:0; z-index:200;
  min-width:152px; margin:0; padding:6px; list-style:none;
  background:var(--z-bg-3); border:1px solid var(--z-line-strong);
  border-radius:12px; box-shadow:0 18px 40px -22px rgba(31,58,46,.55);
}
.lang-list a{
  display:block; padding:9px 12px; border-radius:8px;
  font-size:.92rem; letter-spacing:0; text-transform:none;
  color:var(--z-text); white-space:nowrap; font-weight:500;
}
.lang-list a:hover,.lang-list a:focus-visible{background:var(--z-bg-2); color:var(--z-text)}
.lang-list a[aria-current="true"]{font-weight:700}
.lang-list a[aria-current="true"]::after{content:"\2713"; float:right; margin-left:12px; color:var(--z-gold-text-strong)}
/* The nav bar is an anchor on these pages, so the button wears the
   lang-switch pill and the list stays a light popover beneath it. */
nav .lang-menu > button{
  color:var(--z-text-muted-on-anchor); border:1px solid var(--z-line-on-anchor);
  border-radius:100px; padding:.4rem .8rem; font-size:.82rem; font-weight:500;
}
nav .lang-menu > button:hover{color:var(--z-gold); border-color:var(--z-gold)}
/* Mobile drawer: five flat pills, no dropdown needed. */
.mobile-menu .lang-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px 0 0}
.mobile-menu .lang-row .lang-switch{margin:0}
.mobile-menu .lang-row .lang-switch[aria-current="true"]{color:var(--z-gold); border-color:var(--z-gold)}
@media(max-width:1180px) and (min-width:769px){ .lang-caret{display:none} }