/**
 * nak-storefront.css — Storefront & Menu OS design layer (1.10.0)
 *
 * A deepening pass over the dish single, the menu hero and the dish-archive
 * cards, turning them into an app-style ordering storefront. Everything here
 * is expressed through the existing culture tokens (--nak-*) and ornaments
 * (--nak-motif / --nak-rule / --nak-crest), so it re-skins automatically with
 * `data-style="indian|khmer|fusion"` — one layer, three cultures. It also
 * bridges KAT Smart Menu (.kat-smart-menu__*, styled by the plugin) onto the
 * same tokens so the plugin's menu reads as native, temple-deep design here.
 *
 * Loads after nak-culture.css, so token values are already in scope. Every
 * var() carries a fallback, so a missing token degrades, never breaks.
 *
 * @package NamasteAngkorTheme
 */

:root{
  --nak-sf-radius: var(--nak-box-radius, 18px);
  --nak-sf-line:   var(--nak-border, rgba(122,31,43,.15));
  --nak-sf-cream:  var(--nak-cream, #FBF6EC);
  --nak-sf-cream2: var(--nak-cream-deep, #F3E9D6);
  --nak-sf-stone:  var(--nak-stone, #E7DAC4);
  --nak-sf-ink:    var(--nak-ink, #241a12);
  --nak-sf-ink2:   var(--nak-ink-soft, #6b5c4c);
  --nak-sf-accent: var(--nak-lotus-deep, var(--nak-spicy, #7A1F2B));
  --nak-sf-accent2:var(--nak-lotus, #9c2b3a);
  --nak-sf-gold:   var(--nak-saffron, #D4A437);
  --nak-sf-gold2:  var(--nak-turmeric, #E8871E);
  --nak-sf-veg:    var(--nak-veg, #55703f);
  --nak-sf-spicy:  var(--nak-spicy, #b0203c);
  --nak-sf-shadow: 0 10px 30px rgba(36,20,10,.12), 0 2px 8px rgba(36,20,10,.06);
}

/* =====================================================================
 * Menu hero — crown it with the culture crest + a gold spice line
 * ================================================================== */
.nak-menu-hero{
  position:relative;
  background:
    radial-gradient(120% 150% at 12% -10%, rgba(232,135,30,.16), transparent 55%),
    linear-gradient(178deg, var(--nak-sf-cream), var(--nak-sf-cream2));
  padding-block: clamp(30px, 6vw, 58px) clamp(26px, 5vw, 46px);
  overflow:hidden;
}
.nak-menu-hero::before{ /* motif medallion, quiet */
  content:""; position:absolute; inset:auto -40px -46px auto;
  width:220px; height:220px; opacity:.12; transform:rotate(-8deg);
  background:var(--nak-motif) center/contain no-repeat;
}
.nak-menu-hero::after{ /* crest crown along the bottom edge */
  content:""; position:absolute; left:0; right:0; bottom:0; height:20px;
  -webkit-mask:var(--nak-crest) bottom/300px 100% repeat-x; mask:var(--nak-crest) bottom/300px 100% repeat-x;
  background:var(--nak-sf-accent); opacity:.9;
}
.nak-menu-hero .nak-menu-hero__title{ position:relative }
.nak-menu-hero__lede{ max-width:56ch }

/* Section (course) headings on the menu — a woven gold rule */
.nak-course__title{
  display:flex; align-items:center; gap:14px;
}
.nak-course__title::after{
  content:""; flex:1; height:14px;
  background:var(--nak-rule) left/auto 100% repeat-x; opacity:.5;
}

/* =====================================================================
 * Dish cards (archive raw-loop fallback) — app cards
 * ================================================================== */
.nak-menu-grid.nak-cols-3{ gap:18px 22px }
.nak-menu-grid .nak-dish{
  position:relative; background:var(--nak-white, #fff);
  border:1px solid var(--nak-sf-line); border-radius:var(--nak-sf-radius);
  padding:0; overflow:hidden; box-shadow:var(--nak-sf-shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.nak-menu-grid .nak-dish:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(36,20,10,.16) }
.nak-menu-grid .nak-dish__body{ padding:16px 18px 18px }
.nak-menu-grid .nak-dish__title{
  font-family:var(--nak-display, Fraunces, serif);
  font-weight:var(--nak-disp-weight, 600); font-size:1.12rem; line-height:1.2;
  margin:0 0 6px; color:var(--nak-sf-ink);
}
.nak-menu-grid .nak-dish__title a{ text-decoration:none; color:inherit }
.nak-menu-grid .nak-dish__desc{ color:var(--nak-sf-ink2); font-size:.92rem; line-height:1.5; margin:0 }

/* =====================================================================
 * Dish single — the ordering page
 * ================================================================== */
.nak-single--dish .nak-page__head{
  position:relative;
  background:
    radial-gradient(130% 160% at 88% -20%, rgba(212,164,55,.20), transparent 55%),
    linear-gradient(180deg, var(--nak-sf-cream), var(--nak-sf-cream2));
  padding-block: clamp(26px, 5vw, 46px) clamp(22px, 4vw, 34px);
  overflow:hidden;
}
.nak-single--dish .nak-page__head::before{
  content:""; position:absolute; inset:-30px -30px auto auto;
  width:180px; height:180px; opacity:.12; transform:rotate(10deg);
  background:var(--nak-motif) center/contain no-repeat;
}
.nak-single--dish .nak-page__title{
  font-family:var(--nak-display, Fraunces, serif);
  font-weight:var(--nak-disp-weight, 600);
  font-size:clamp(1.9rem, 5vw, 2.7rem); line-height:1.08; letter-spacing:var(--nak-title-spacing, 0);
  margin:.1em 0 .35em; max-width:20ch;
}
.nak-single--dish .nak-single__eyebrow{
  font-family:var(--nak-body, Karla, sans-serif); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; font-size:.72rem;
  color:var(--nak-sf-accent); margin:0 0 .4em;
}
.nak-single--dish .nak-single__eyebrow a{ text-decoration:none; color:inherit }

/* tags → chips (veg / spicy / diet) */
.nak-single--dish .nak-single__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px }
.nak-single--dish .nak-tag{
  display:inline-flex; align-items:center; gap:6px;
  background:color-mix(in srgb, var(--nak-sf-veg) 14%, transparent);
  color:var(--nak-sf-veg); border:1px solid color-mix(in srgb, var(--nak-sf-veg) 26%, transparent);
  border-radius:999px; padding:5px 12px; font-size:.78rem; font-weight:700; letter-spacing:.01em;
}
.nak-single--dish .nak-single__price{
  font-family:var(--nak-display, Fraunces, serif); font-weight:700;
  font-size:1.5rem; color:var(--nak-white,#fff);
  background:linear-gradient(135deg, var(--nak-sf-accent), var(--nak-sf-accent2));
  border-radius:999px; padding:6px 18px; box-shadow:var(--nak-sf-shadow);
}

/* dish photo — framed, temple-crest crowned */
.nak-single__media{
  border-radius:var(--nak-sf-radius); overflow:hidden;
  border:1px solid var(--nak-sf-line); box-shadow:var(--nak-sf-shadow);
  position:relative;
}
.nak-single__media img{ display:block; width:100%; height:auto }

/* the KAT WooCommerce order button + delivery row, together as an order band */
.nak-single__order, .nak-single__delivery{ margin-top:18px }
.nak-single__order .button, .nak-single__order a.button, .nak-single__order button{
  background:linear-gradient(135deg, var(--nak-sf-accent), var(--nak-sf-accent2)) !important;
  color:var(--nak-white,#fff) !important; border:0 !important; border-radius:999px !important;
  padding:14px 24px !important; font-weight:700 !important; letter-spacing:.01em;
  box-shadow:var(--nak-sf-shadow); text-decoration:none !important;
}
.nak-single__delivery::before{
  content:"Order for delivery"; display:flex; align-items:center; gap:12px;
  font-family:var(--nak-body, Karla, sans-serif); font-weight:700; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--nak-sf-ink2); margin:0 0 12px;
}
.nak-single__delivery::after{
  /* woven rule under the label, spice-gold */
  content:""; display:block; height:12px; margin:-6px 0 12px;
  background:var(--nak-rule) left/auto 100% repeat-x; opacity:.4;
}

/* =====================================================================
 * KAT Smart Menu bridge — feed the plugin's storefront the culture tokens
 * (the plugin's own CSS reads these with its own fallbacks; here we hand it
 * the temple palette + ornament so /menu/ reads native on this theme).
 * ================================================================== */
.kat-smart-menu{
  --kat-sm-accent: var(--nak-sf-accent);
  --kat-sm-accent-2: var(--nak-sf-accent2);
  --kat-sm-gold: var(--nak-sf-gold);
  --kat-sm-ink: var(--nak-sf-ink);
  --kat-sm-ink-soft: var(--nak-sf-ink2);
  --kat-sm-surface: var(--nak-white, #fff);
  --kat-sm-cream: var(--nak-sf-cream);
  --kat-sm-line: var(--nak-sf-line);
  --kat-sm-veg: var(--nak-sf-veg);
  --kat-sm-spicy: var(--nak-sf-spicy);
  --kat-sm-radius: var(--nak-sf-radius);
  --kat-sm-motif: var(--nak-motif);
  --kat-sm-rule: var(--nak-rule);
}
.kat-smart-menu__name{ font-family:var(--nak-display, Fraunces, serif) !important }
.kat-smart-menu__khmer{ font-family:var(--nak-khmer, "Noto Serif Khmer", serif) !important }
.kat-smart-menu__section-title{
  font-family:var(--nak-display, Fraunces, serif) !important;
}

/* Respect reduced motion + keep focus visible (quality floor). */
@media (prefers-reduced-motion: reduce){
  .nak-menu-grid .nak-dish{ transition:none }
}
.nak-single__delivery a:focus-visible,
.nak-single__order a:focus-visible{ outline:3px solid var(--nak-sf-gold); outline-offset:3px }

/* =====================================================================
 * Top-bar "Talk Us" hook — one culture-following CTA that replaces the
 * old WhatsApp / Telegram word-links. Its leading glyph is the culture
 * motif (marigold / lotus-bud tower / lotus), so the hook itself changes
 * shape with data-style. Sits on the dark utility bar (--nak-ink).
 * ================================================================== */
.nak-topbar__talk{
  display:inline-flex; align-items:center; gap:.5em;
  padding:3px 13px 3px 10px; border-radius:999px; text-decoration:none; line-height:1.1;
  font-weight:700; letter-spacing:.05em;
  color:var(--nak-saffron, #E4A11B);
  border:1px solid color-mix(in srgb, var(--nak-saffron, #E4A11B) 55%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--nak-saffron, #E4A11B) 15%, transparent), transparent);
  transition:color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.nak-topbar__talk-text{ text-transform:uppercase; font-size:.92em; }
.nak-topbar__talk-glyph{
  width:1.15em; height:1.15em; flex:none;
  background:var(--nak-gold-line, linear-gradient(90deg,#e8871e,#f2b035));
  -webkit-mask:var(--nak-motif) center/contain no-repeat; mask:var(--nak-motif) center/contain no-repeat;
}
.nak-topbar__talk:hover,
.nak-topbar__talk:focus-visible{
  color:var(--nak-ink, #241a12); border-color:transparent; transform:translateY(-1px);
  background:var(--nak-gold-line, linear-gradient(90deg,#e8871e,#f2b035));
}
.nak-topbar__talk:hover .nak-topbar__talk-glyph,
.nak-topbar__talk:focus-visible .nak-topbar__talk-glyph{ background:var(--nak-ink, #241a12); }
.nak-topbar__talk:focus-visible{ outline:2px solid var(--nak-white, #fff); outline-offset:2px; }

/* Telegram kept as a compact secondary icon (no word-label). */
.nak-topbar__tg{ display:inline-flex; align-items:center; color:var(--nak-turmeric); }
.nak-topbar__tg:hover{ color:var(--nak-white, #fff); }
@media (prefers-reduced-motion: reduce){ .nak-topbar__talk{ transition:none; } }

/* =====================================================================
 * Front-page feature tree — deep Indian × Khmer × Fusion styling for the
 * navigation and the two product feeds (Menu + Experiences). Every rule is
 * token-driven, so the whole tree re-skins with data-style. Scoped to the
 * feature wrappers so nothing else on the site is disturbed.
 * ================================================================== */

/* --- Primary navigation: motif branch + gold underline on the active leaf */
.nak-nav .nak-menu > li > a{ position:relative; font-weight:600; }
.nak-nav .nak-menu > li > a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px;
  background:var(--nak-gold-line, linear-gradient(90deg,#e8871e,#f2b035)); transition:right .2s ease;
}
.nak-nav .nak-menu > li > a:hover::after,
.nak-nav .nak-menu > li.current-menu-item > a::after,
.nak-nav .nak-menu > li.current-menu-parent > a::after{ right:0; }
.nak-nav .nak-menu > li.current-menu-item > a{ color:var(--nak-lotus-deep, var(--nak-spicy, #7A1F2B)); }

/* --- Shared feature-section head: a motif node the feed branches from */
.nak-menu-feature .nak-section__eyebrow,
.nak-experiences .nak-section__eyebrow,
.nak-signature .nak-section__eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
}
.nak-menu-feature .nak-section__eyebrow::before,
.nak-experiences .nak-section__eyebrow::before,
.nak-signature .nak-section__eyebrow::before{
  content:""; width:1.15em; height:1.15em; flex:none;
  background:var(--nak-lotus-deep, var(--nak-spicy, #7A1F2B));
  -webkit-mask:var(--nak-motif) center/contain no-repeat; mask:var(--nak-motif) center/contain no-repeat;
}
.nak-menu-feature .nak-section__title,
.nak-experiences .nak-section__title,
.nak-signature .nak-section__title{
  display:flex; align-items:center; gap:16px;
}
.nak-menu-feature .nak-section__title::after,
.nak-experiences .nak-section__title::after,
.nak-signature .nak-section__title::after{
  content:""; flex:1; height:14px; opacity:.5;
  background:var(--nak-rule, none) left/auto 100% repeat-x;
}

/* --- Menu feature: crown the feed with the culture crest */
.nak-menu-feature{ position:relative; }
.nak-menu-feature::before{
  content:""; display:block; height:16px; margin-bottom:22px;
  -webkit-mask:var(--nak-crest, none) top/22px 100% repeat-x; mask:var(--nak-crest, none) top/22px 100% repeat-x;
  background:var(--nak-lotus-deep, var(--nak-spicy, #7A1F2B)); opacity:.85;
}

/* --- Experiences feed: temple cards with a motif corner medallion */
.nak-experiences__grid{ gap:18px 22px; }
.nak-experiences .nak-experience-card{
  position:relative; overflow:hidden;
  background:var(--nak-white, #fff); border:1px solid var(--nak-sf-line);
  border-radius:var(--nak-sf-radius); box-shadow:var(--nak-sf-shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.nak-experiences .nak-experience-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(36,20,10,.16); }
.nak-experiences .nak-experience-card::after{
  content:""; position:absolute; right:-24px; top:-24px; width:90px; height:90px; pointer-events:none;
  background:var(--nak-motif, none) center/contain no-repeat; opacity:.10; transform:rotate(8deg);
}
.nak-experiences .nak-experience-card__icon{ color:var(--nak-sf-gold2); }
.nak-experiences .nak-experience-card__title{ font-family:var(--nak-display, Fraunces, serif); color:var(--nak-sf-ink); }
.nak-experiences .nak-experience-card__text{ color:var(--nak-sf-ink2); }

/* --- Featured products feed: cultural tabs, temple cards, gilded price */
.nak-feat .nak-feat-title{ font-family:var(--nak-display, Fraunces, serif); }
.nak-feat .nak-feat-tab{
  border:1px solid var(--nak-sf-line); border-radius:999px; background:var(--nak-sf-cream); color:var(--nak-sf-accent);
}
.nak-feat .nak-feat__tab-input:checked + .nak-feat-tab,
.nak-feat .nak-feat-tab[aria-selected="true"]{
  background:var(--nak-sf-accent); border-color:var(--nak-sf-accent); color:#fff;
}
.nak-feat .nak-feat-card{
  position:relative; overflow:hidden;
  border:1px solid var(--nak-sf-line); border-radius:var(--nak-sf-radius);
  box-shadow:var(--nak-sf-shadow); transition:transform .18s ease, box-shadow .18s ease;
}
.nak-feat .nak-feat-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(36,20,10,.16); }
.nak-feat .nak-feat-card__title{ font-family:var(--nak-display, Fraunces, serif); color:var(--nak-sf-ink); }
.nak-feat .nak-feat-card__price,
.nak-feat .nak-feat-card__price-fill{
  font-family:var(--nak-display, Fraunces, serif); font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--nak-sf-accent), var(--nak-sf-accent2));
  border-radius:999px; padding:3px 12px;
}
.nak-feat .nak-feat-card__stars{ color:var(--nak-sf-gold); }
.nak-feat .nak-feat-card__cta .nak-btn--primary,
.nak-feat .nak-feat-card__cta a{ border-radius:999px; }

@media (prefers-reduced-motion: reduce){
  .nak-experiences .nak-experience-card,
  .nak-feat .nak-feat-card,
  .nak-nav .nak-menu > li > a::after{ transition:none; }
}