/* ============================================================
   CCI — header / footer tones
   ------------------------------------------------------------
   WHY THIS FILE EXISTS

   The site chrome comes in two palettes. styles.css gives the header a white
   bar and the footer a grey ground; five Cho's Kitchen stylesheets override
   both to cream. Because a page enqueues its own stylesheet, the right tone
   already happens on the front end without anyone choosing it.

   That is fine until you want to CHOOSE. The tone was invisible in the editor
   panel, impossible to preview, and — with Polylang multiplying pages — awkward
   to reason about through Theme Builder display conditions alone.

   So the header and footer widgets now emit .cew-tone-cream / .cew-tone-blue,
   and this file carries both palettes re-hung on those classes at (0,2,0) or
   deeper, which beats the page stylesheets' bare (0,1,0) chrome rules.

   The widgets default to Automatic, which emits NO class — the page stylesheet
   decides, exactly as before. Nothing changes until someone picks a tone.

   Note the root remapping: .drawer is a sibling of .nav rather than a child,
   and .lang appears inside both, so a single class on .nav could never have
   reached them. Each root carries its own tone class.

   GENERATED, NOT HAND-WRITTEN. Regenerate after re-syncing either source:

       php tools/build-nav-variants.php
   ============================================================ */

/* ---- Cream — styles.css + chos-kitchen.css (Cho's Kitchen family) ---- */
.nav.cew-tone-cream,
.drawer.cew-tone-cream,
.foot.cew-tone-cream {
  --ck-gold: #C9A227;
  --ck-gold-bright: #E3A50E;
  --ck-gold-soft: #DBB372;
  --ck-gold-frame: #D9AE3C;
  --ck-brown: #4D371A;
  --ck-brown-deep: #2E2112;
  --ck-brown-mid: #674921;
  --ck-cream: #FCF5E3;
  --ck-cream-2: #F5E9CC;
  --ck-on-dark: #F3E7C8;
  --ck-green: #87A943;
  --ck-line: rgba(46,33,18,.14);
  --ck-gold-line: rgba(201,162,39,.55);
  --ck-shadow: 0 24px 50px -28px rgba(46,33,18,.5);
  --font-head: 'DM Sans',system-ui,sans-serif;
  --font-body: 'Roboto',system-ui,sans-serif;
}
.nav.cew-tone-cream { position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line) }
.nav.cew-tone-cream .nav__inner { position:relative; max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:var(--nav-h); display:flex;align-items:center;gap:24px; }
.nav.cew-tone-cream .nav__logo { display:flex;align-items:center;flex:none;margin-right:8px }
.nav.cew-tone-cream .nav__logo img { height:38px }
.nav.cew-tone-cream .nav__logo-fallback { display:none;font-family:"DM Sans",sans-serif;font-weight:700;font-size:26px; color:var(--cci-blue);letter-spacing:-.04em;align-items:center; }
.nav.cew-tone-cream .nav__logo-fallback b { color:var(--cci-blue);position:relative }
.nav.cew-tone-cream .nav__logo-fallback b::after { content:"";position:absolute;top:-2px;right:-3px; width:7px;height:7px;background:var(--cci-yellow);border-radius:2px }
.nav.cew-tone-cream .nav__menu { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;align-items:center }
.nav.cew-tone-cream .nav__list { display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0 }
.nav.cew-tone-cream .nav__list > li > a, .nav.cew-tone-cream .nav__top { font-family:"DM Sans",sans-serif;font-weight:500;font-size:16px;color:var(--ink); background:none;border:0;cursor:pointer;padding:9px 11px;border-radius:9px; display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:.15s; }
.nav.cew-tone-cream .nav__list > li > a:hover, .nav.cew-tone-cream .nav__top:hover { color:var(--cci-blue);background:var(--cci-blue-50) }
.nav.cew-tone-cream .drop { position:absolute;margin-top:10px;min-width:230px;background:#fff; border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow); padding:8px;opacity:0;visibility:hidden;transform:translateY(8px); transition:.18s ease;z-index:60; }
.nav.cew-tone-cream .drop::before { content:"";position:absolute;left:0;right:0;top:-12px;height:12px }
.nav.cew-tone-cream .has-drop:hover .drop, .nav.cew-tone-cream .has-drop:focus-within .drop { opacity:1;visibility:visible;transform:translateY(0) }
.nav.cew-tone-cream .drop a { display:block;padding:10px 14px;border-radius:9px;font-size:14px;color:var(--ink-soft);transition:.12s }
.nav.cew-tone-cream .drop a:hover { background:var(--cci-blue-50);color:var(--cci-blue) }
.nav.cew-tone-cream .drop a.drop__sub { padding-left:26px;font-size:13px;opacity:.82 }
.nav.cew-tone-cream .drop a.drop__sub:hover { opacity:1 }
.nav.cew-tone-cream .drop__div { display:block;height:1px;background:var(--line);margin:6px 8px }
.nav.cew-tone-cream .nav__right { display:flex;align-items:center;gap:14px;flex:none;margin-left:auto }
.nav.cew-tone-cream .lang, .drawer.cew-tone-cream .lang { display:flex;gap:7px }
.nav.cew-tone-cream .lang__btn, .drawer.cew-tone-cream .lang__btn { width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line); background:#fff;cursor:pointer;font-family:"DM Sans",sans-serif;font-weight:600; font-size:12px;color:var(--ink-soft);transition:.18s;display:flex; align-items:center;justify-content:center;padding:0; }
.nav.cew-tone-cream .lang__btn:hover, .drawer.cew-tone-cream .lang__btn:hover { border-color:var(--cci-blue-500);color:var(--cci-blue) }
.nav.cew-tone-cream .lang__btn.is-active, .drawer.cew-tone-cream .lang__btn.is-active { background:var(--cci-blue);border-color:var(--cci-blue);color:#fff }
.nav.cew-tone-cream .nav__burger { display:none;flex-direction:column;gap:5px;background:none;border:0; cursor:pointer;padding:8px }
.nav.cew-tone-cream .nav__burger span { width:24px;height:2px;background:var(--cci-blue);border-radius:2px;transition:.25s }
.nav.cew-tone-cream .nav__burger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.nav.cew-tone-cream .nav__burger.is-open span:nth-child(2) { opacity:0 }
.nav.cew-tone-cream .nav__burger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }
.drawer.cew-tone-cream { position:fixed;inset:var(--nav-h) 0 0;background:#fff;z-index:45; transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;visibility:hidden }
.drawer.cew-tone-cream.is-open { transform:translateX(0);visibility:visible }
.drawer.cew-tone-cream .drawer__nav { padding:18px 24px 60px;display:flex;flex-direction:column }
.drawer.cew-tone-cream .drawer__nav > a, .drawer.cew-tone-cream .drawer__nav summary { font-family:"DM Sans",sans-serif;font-weight:600;font-size:16px; padding:15px 4px;border-bottom:1px solid var(--line);cursor:pointer;list-style:none; }
.drawer.cew-tone-cream .drawer__nav summary::-webkit-details-marker { display:none }
.drawer.cew-tone-cream .drawer__nav summary::after { content:"+";float:right;color:var(--cci-blue-500);font-weight:400 }
.drawer.cew-tone-cream .drawer__nav details[open] summary::after { content:"–" }
.drawer.cew-tone-cream .drawer__nav details a { display:block;padding:10px 16px;color:var(--ink-soft);font-size:16px }
.drawer.cew-tone-cream .drawer__nav details a.drawer__sub { padding-left:30px;font-size:14px;opacity:.82 }
.drawer.cew-tone-cream .drawer__lang { display:flex;gap:10px;margin-top:24px }
.foot.cew-tone-cream { background:var(--tint);color:var(--ink-soft);padding:80px 0 0 }
.foot.cew-tone-cream .foot__grid { display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:52px; max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad) }
.foot.cew-tone-cream .foot__logo { height:46px;width:auto;margin-bottom:18px }
.foot.cew-tone-cream .foot__logo-fallback { display:none;font-family:"DM Sans",sans-serif;font-weight:700; font-size:28px;color:var(--cci-blue);margin-bottom:18px }
.foot.cew-tone-cream .foot__brand p { font-size:16px;max-width:320px;margin:0 0 20px }
.foot.cew-tone-cream .foot__col h4 { font-family:"DM Sans",sans-serif;color:var(--ink);font-size:16px;margin-bottom:16px }
.foot.cew-tone-cream .foot__col a { display:block;padding:6px 0;font-size:14px;transition:.15s }
.foot.cew-tone-cream .foot__col a:hover { color:var(--cci-blue) }
.foot.cew-tone-cream .foot__bar { border-top:1px solid var(--line);padding:22px 0; display:flex;justify-content:space-between;font-size:14px; max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);flex-wrap:wrap;gap:10px }
.foot.cew-tone-cream .foot__legal { display:flex;gap:18px }
.foot.cew-tone-cream .foot__legal a:hover { color:var(--cci-blue) }
.foot.cew-tone-cream .foot__by { opacity:.75;white-space:nowrap }
.nav.cew-tone-cream { position:sticky;top:0;z-index:50;background:rgba(252,245,227,.9); backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--ck-line) }
.nav.cew-tone-cream .nav__inner { position:relative;display:flex;align-items:center;height:var(--nav-h); max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) }
.nav.cew-tone-cream .nav__logo img { height:38px;width:auto }
.nav.cew-tone-cream .nav__logo-fallback { display:none;font-family:var(--font-head);font-weight:700; font-size:24px;color:var(--ck-brown-deep) }
.nav.cew-tone-cream .nav__logo-fallback b { color:var(--ck-gold) }
.nav.cew-tone-cream .nav__menu { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;align-items:center;width:max-content }
.nav.cew-tone-cream .nav__list > li > a, .nav.cew-tone-cream .nav__top { display:inline-flex;align-items:center;gap:5px; font-family:var(--font-head);font-weight:500;font-size:16px; color:var(--ck-brown);background:none;border:0;cursor:pointer;padding:9px 11px;border-radius:9px;transition:.15s }
.nav.cew-tone-cream .nav__list > li > a:hover, .nav.cew-tone-cream .nav__top:hover { color:var(--ck-brown-deep);background:var(--ck-cream-2) }
.nav.cew-tone-cream .nav__top[aria-current="page"] { color:var(--ck-brown-deep);background:var(--ck-cream-2) }
.nav.cew-tone-cream .drop { position:absolute;margin-top:10px;min-width:230px;background:#fff; border:1px solid var(--ck-line);border-radius:14px;box-shadow:var(--ck-shadow); padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s ease;z-index:60 }
.nav.cew-tone-cream .drop a { display:block;padding:10px 14px;border-radius:9px;font-size:14px;color:var(--ck-brown);transition:.12s }
.nav.cew-tone-cream .drop a:hover { background:var(--ck-cream-2);color:var(--ck-brown-deep) }
.nav.cew-tone-cream .drop__div { display:block;height:1px;background:var(--ck-line);margin:6px 8px }
.nav.cew-tone-cream .lang__btn, .drawer.cew-tone-cream .lang__btn { font-family:var(--font-head);font-weight:500;font-size:.72rem; width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ck-line); background:transparent;color:var(--ck-brown);cursor:pointer;transition:.15s; display:flex;align-items:center;justify-content:center;padding:0 }
.nav.cew-tone-cream .lang__btn:hover, .drawer.cew-tone-cream .lang__btn:hover { border-color:var(--ck-gold);color:var(--ck-brown-deep) }
.nav.cew-tone-cream .lang__btn.is-active, .drawer.cew-tone-cream .lang__btn.is-active { background:var(--ck-brown-deep);border-color:var(--ck-brown-deep);color:var(--ck-gold-soft) }
.nav.cew-tone-cream .nav__burger { display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px }
.nav.cew-tone-cream .nav__burger span { width:24px;height:2px;background:var(--ck-brown-deep);border-radius:2px;transition:.25s }
.drawer.cew-tone-cream { position:fixed;inset:var(--nav-h) 0 0;background:var(--ck-cream);z-index:45; transform:translateX(100%);visibility:hidden;transition:.28s ease;overflow-y:auto }
.drawer.cew-tone-cream .drawer__nav > a, .drawer.cew-tone-cream .drawer__nav summary { font-family:var(--font-head);font-weight:500;font-size:16px; color:var(--ck-brown-deep);padding:14px 16px;border-bottom:1px solid var(--ck-line);cursor:pointer;list-style:none }
.drawer.cew-tone-cream .drawer__nav summary::after { content:"+";float:right;color:var(--ck-gold);font-weight:400 }
.drawer.cew-tone-cream .drawer__nav details[open] summary::after { content:"\2013" }
.drawer.cew-tone-cream .drawer__nav details a { display:block;padding:10px 16px;color:var(--ck-brown);font-size:14px }
.drawer.cew-tone-cream .drawer__nav details a.drawer__sub { padding-left:30px;font-size:13px;opacity:.82 }
.foot.cew-tone-cream { background:var(--ck-cream-2);color:var(--ck-brown-mid);padding:80px 0 0; border-top:2px solid var(--ck-gold) }
.foot.cew-tone-cream .foot__grid { display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:52px }
.foot.cew-tone-cream .foot__logo-fallback { display:none;font-family:var(--font-head);font-weight:700; font-size:1.8rem;color:var(--ck-brown-deep);margin-bottom:18px }
.foot.cew-tone-cream .foot__logo-fallback b { color:var(--ck-gold) }
.foot.cew-tone-cream .foot__brand p { font-size:.94rem;max-width:320px;margin:0 0 20px }
.foot.cew-tone-cream .foot__col h4 { font-family:var(--font-head);color:var(--ck-brown-deep);font-size:1rem;line-height:1.1;margin:0 0 16px }
.foot.cew-tone-cream .foot__col a { display:block;padding:6px 0;font-size:.92rem;transition:.15s;color:var(--ck-brown-mid) }
.foot.cew-tone-cream .foot__col a:hover { color:var(--ck-gold) }
.foot.cew-tone-cream .foot__bar { border-top:1px solid var(--ck-line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; padding-top:22px;padding-bottom:22px;font-size:.85rem }
.foot.cew-tone-cream .foot__legal a:hover { color:var(--ck-gold) }

@media (max-width:1100px) {
  .nav.cew-tone-cream .nav__menu { display:none }
  .nav.cew-tone-cream .nav__burger { display:flex }
  .nav.cew-tone-cream .nav__right { margin-left:auto }
  .nav.cew-tone-cream .nav__right .lang { display:none }
  .foot.cew-tone-cream .foot__grid { grid-template-columns:1fr 1fr }
}

@media (max-width:720px) {
  .foot.cew-tone-cream .foot__grid { grid-template-columns:1fr;gap:30px }
  .foot.cew-tone-cream { padding-top:56px }
  .foot.cew-tone-cream .foot__grid { grid-template-columns:1fr;gap:28px }
}

/* ---- Blue / white — from styles.css (site default) ---- */
.nav.cew-tone-blue { position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line) }
.nav.cew-tone-blue .nav__inner { position:relative; max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:var(--nav-h); display:flex;align-items:center;gap:24px; }
.nav.cew-tone-blue .nav__logo { display:flex;align-items:center;flex:none;margin-right:8px }
.nav.cew-tone-blue .nav__logo img { height:38px }
.nav.cew-tone-blue .nav__logo-fallback { display:none;font-family:"DM Sans",sans-serif;font-weight:700;font-size:26px; color:var(--cci-blue);letter-spacing:-.04em;align-items:center; }
.nav.cew-tone-blue .nav__logo-fallback b { color:var(--cci-blue);position:relative }
.nav.cew-tone-blue .nav__logo-fallback b::after { content:"";position:absolute;top:-2px;right:-3px; width:7px;height:7px;background:var(--cci-yellow);border-radius:2px }
.nav.cew-tone-blue .nav__menu { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;align-items:center }
.nav.cew-tone-blue .nav__list { display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0 }
.nav.cew-tone-blue .nav__list > li > a, .nav.cew-tone-blue .nav__top { font-family:"DM Sans",sans-serif;font-weight:500;font-size:16px;color:var(--ink); background:none;border:0;cursor:pointer;padding:9px 11px;border-radius:9px; display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:.15s; }
.nav.cew-tone-blue .nav__list > li > a:hover, .nav.cew-tone-blue .nav__top:hover { color:var(--cci-blue);background:var(--cci-blue-50) }
.nav.cew-tone-blue .drop { position:absolute;margin-top:10px;min-width:230px;background:#fff; border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow); padding:8px;opacity:0;visibility:hidden;transform:translateY(8px); transition:.18s ease;z-index:60; }
.nav.cew-tone-blue .drop::before { content:"";position:absolute;left:0;right:0;top:-12px;height:12px }
.nav.cew-tone-blue .has-drop:hover .drop, .nav.cew-tone-blue .has-drop:focus-within .drop { opacity:1;visibility:visible;transform:translateY(0) }
.nav.cew-tone-blue .drop a { display:block;padding:10px 14px;border-radius:9px;font-size:14px;color:var(--ink-soft);transition:.12s }
.nav.cew-tone-blue .drop a:hover { background:var(--cci-blue-50);color:var(--cci-blue) }
.nav.cew-tone-blue .drop a.drop__sub { padding-left:26px;font-size:13px;opacity:.82 }
.nav.cew-tone-blue .drop a.drop__sub:hover { opacity:1 }
.nav.cew-tone-blue .drop__div { display:block;height:1px;background:var(--line);margin:6px 8px }
.nav.cew-tone-blue .nav__right { display:flex;align-items:center;gap:14px;flex:none;margin-left:auto }
.nav.cew-tone-blue .lang, .drawer.cew-tone-blue .lang { display:flex;gap:7px }
.nav.cew-tone-blue .lang__btn, .drawer.cew-tone-blue .lang__btn { width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line); background:#fff;cursor:pointer;font-family:"DM Sans",sans-serif;font-weight:600; font-size:12px;color:var(--ink-soft);transition:.18s;display:flex; align-items:center;justify-content:center;padding:0; }
.nav.cew-tone-blue .lang__btn:hover, .drawer.cew-tone-blue .lang__btn:hover { border-color:var(--cci-blue-500);color:var(--cci-blue) }
.nav.cew-tone-blue .lang__btn.is-active, .drawer.cew-tone-blue .lang__btn.is-active { background:var(--cci-blue);border-color:var(--cci-blue);color:#fff }
.nav.cew-tone-blue .nav__burger { display:none;flex-direction:column;gap:5px;background:none;border:0; cursor:pointer;padding:8px }
.nav.cew-tone-blue .nav__burger span { width:24px;height:2px;background:var(--cci-blue);border-radius:2px;transition:.25s }
.nav.cew-tone-blue .nav__burger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.nav.cew-tone-blue .nav__burger.is-open span:nth-child(2) { opacity:0 }
.nav.cew-tone-blue .nav__burger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }
.drawer.cew-tone-blue { position:fixed;inset:var(--nav-h) 0 0;background:#fff;z-index:45; transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;visibility:hidden }
.drawer.cew-tone-blue.is-open { transform:translateX(0);visibility:visible }
.drawer.cew-tone-blue .drawer__nav { padding:18px 24px 60px;display:flex;flex-direction:column }
.drawer.cew-tone-blue .drawer__nav > a, .drawer.cew-tone-blue .drawer__nav summary { font-family:"DM Sans",sans-serif;font-weight:600;font-size:16px; padding:15px 4px;border-bottom:1px solid var(--line);cursor:pointer;list-style:none; }
.drawer.cew-tone-blue .drawer__nav summary::-webkit-details-marker { display:none }
.drawer.cew-tone-blue .drawer__nav summary::after { content:"+";float:right;color:var(--cci-blue-500);font-weight:400 }
.drawer.cew-tone-blue .drawer__nav details[open] summary::after { content:"–" }
.drawer.cew-tone-blue .drawer__nav details a { display:block;padding:10px 16px;color:var(--ink-soft);font-size:16px }
.drawer.cew-tone-blue .drawer__nav details a.drawer__sub { padding-left:30px;font-size:14px;opacity:.82 }
.drawer.cew-tone-blue .drawer__lang { display:flex;gap:10px;margin-top:24px }
.foot.cew-tone-blue { background:var(--tint);color:var(--ink-soft);padding:80px 0 0 }
.foot.cew-tone-blue .foot__grid { display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:52px; max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad) }
.foot.cew-tone-blue .foot__logo { height:46px;width:auto;margin-bottom:18px }
.foot.cew-tone-blue .foot__logo-fallback { display:none;font-family:"DM Sans",sans-serif;font-weight:700; font-size:28px;color:var(--cci-blue);margin-bottom:18px }
.foot.cew-tone-blue .foot__brand p { font-size:16px;max-width:320px;margin:0 0 20px }
.foot.cew-tone-blue .foot__col h4 { font-family:"DM Sans",sans-serif;color:var(--ink);font-size:16px;margin-bottom:16px }
.foot.cew-tone-blue .foot__col a { display:block;padding:6px 0;font-size:14px;transition:.15s }
.foot.cew-tone-blue .foot__col a:hover { color:var(--cci-blue) }
.foot.cew-tone-blue .foot__bar { border-top:1px solid var(--line);padding:22px 0; display:flex;justify-content:space-between;font-size:14px; max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);flex-wrap:wrap;gap:10px }
.foot.cew-tone-blue .foot__legal { display:flex;gap:18px }
.foot.cew-tone-blue .foot__legal a:hover { color:var(--cci-blue) }
.foot.cew-tone-blue .foot__by { opacity:.75;white-space:nowrap }

@media (max-width:1100px) {
  .nav.cew-tone-blue .nav__menu { display:none }
  .nav.cew-tone-blue .nav__burger { display:flex }
  .nav.cew-tone-blue .nav__right { margin-left:auto }
  .nav.cew-tone-blue .nav__right .lang { display:none }
  .foot.cew-tone-blue .foot__grid { grid-template-columns:1fr 1fr }
}

@media (max-width:720px) {
  .foot.cew-tone-blue .foot__grid { grid-template-columns:1fr;gap:30px }
}