/* ============================================================
   Shin Shin — Recipes page (self-contained, single file)
   Navbar / footer / layout & margins mirror index.html; the mood is
   the Shin Shin blue system (see css/shin-shin.css) — clean corporate
   blue with minimal hairlines, no ornate/traditional borders.
   ============================================================ */

:root{
  /* Brand blue (= index.html / CCI) */
  --cci-blue:#1f1a6e;
  --cci-blue-700:#2a2496;
  --cci-blue-500:#3f7fd6;
  --cci-blue-50:#eef1fb;
  --cci-yellow:#f5e21f;

  /* Shin Shin accents */
  --ss-navy:#1f1a6e;
  --ss-navy-700:#2a2496;
  --ss-blue:#3f7fd6;
  --ss-blue-300:#7fb0e6;
  --ss-blue-50:#eef1fb;
  --ss-sky:#eaf2fc;
  --ss-line:rgba(31,26,110,.12);
  --ss-line-blue:rgba(63,127,214,.45);
  --ss-shadow:0 24px 50px -28px rgba(31,26,110,.5);

  /* Neutral */
  --white:#ffffff;
  --ink:#15151b;
  --ink-soft:#54545e;
  --line:#e7e7ee;
  --tint:#f6f7fb;
  --shadow:0 18px 50px -20px rgba(31,26,110,.22);
  --shadow-sm:0 8px 24px -12px rgba(31,26,110,.18);

  --wrap:1320px;
  --pad:40px;
  --nav-h:74px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  margin:0;font-family:"Roboto",system-ui,sans-serif;font-size:16px;line-height:1.6;
  color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"DM Sans",sans-serif;margin:0;line-height:1.1;letter-spacing:-.025em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%}

.eyebrow{display:inline-block;font-family:"DM Sans",sans-serif;font-weight:600;
  font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cci-blue-500);margin-bottom:16px}

/* ---------- buttons (homepage shape) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:16px;
  padding:15px 30px;border-radius:100px;border:2px solid transparent;
  cursor:pointer;transition:.2s ease;white-space:nowrap}
.btn--primary{background:var(--cci-blue);color:#fff}
.btn--primary:hover{background:var(--cci-blue-700);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--outline{background:transparent;color:var(--cci-blue);border-color:var(--cci-blue)}
.btn--outline:hover{background:var(--cci-blue);color:#fff;transform:translateY(-2px)}

/* ============================================================
   NAVBAR — same markup/margins as index.html
   ============================================================ */
.nav{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__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__logo{display:flex;align-items:center;flex:none;margin-right:8px}
.nav__logo img{height:38px}
.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__logo-fallback b{color:var(--cci-blue);position:relative}
.nav__logo-fallback b::after{content:"";position:absolute;top:-2px;right:-3px;
  width:7px;height:7px;background:var(--cci-yellow);border-radius:2px}

.nav__menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;width:max-content}
.nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__list > li > a,.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;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;transition:.15s}
.nav__list > li > a:hover,.nav__top:hover{color:var(--cci-blue);background:var(--cci-blue-50)}
.nav__top[aria-current="page"]{color:var(--cci-blue);background:var(--cci-blue-50)}
.caret{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.has-drop:hover .caret{transform:rotate(180deg)}

.has-drop{position:relative}
.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}
.drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:10px 14px;border-radius:9px;font-size:14px;color:var(--ink-soft);transition:.12s}
.drop a:hover{background:var(--cci-blue-50);color:var(--cci-blue)}
/* Cho's Kitchen submenu — Taste of Myanmar / Pantry, indented under the parent link */
.drop a.drop__sub{padding-left:26px;font-size:13px;opacity:.82}
.drop a.drop__sub:hover{opacity:1}

.nav__right{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
.lang{display:flex;gap:7px}
.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}
.lang__btn:hover{border-color:var(--cci-blue-500);color:var(--cci-blue)}
.lang__btn.is-active{background:var(--cci-blue);border-color:var(--cci-blue);color:#fff}

.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__burger span{width:24px;height:2px;background:var(--cci-blue);border-radius:2px;transition:.25s}
.nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* drawer */
.drawer{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.is-open{transform:translateX(0);visibility:visible}
.drawer__nav{padding:18px 24px 60px;display:flex;flex-direction:column}
.drawer__nav > a,.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__nav summary::-webkit-details-marker{display:none}
.drawer__nav summary::after{content:"+";float:right;color:var(--cci-blue-500);font-weight:400}
.drawer__nav details[open] summary::after{content:"\2013"}
.drawer__nav details a{display:block;padding:10px 16px;color:var(--ink-soft);font-size:16px}
.drawer__nav details a.drawer__sub{padding-left:30px;font-size:14px;opacity:.82}
.drawer__lang{display:flex;gap:10px;margin-top:24px}

/* ============================================================
   HERO — compact centred page header (blue). Same size/layout as
   the Cho's Kitchen recipe hero, recoloured to the Shin Shin blue
   system. Breadcrumb overlaid INSIDE the hero.
   ============================================================ */
.sshero2{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,var(--ss-sky) 0%,#dbe8fb 100%);
  border-bottom:1px solid var(--ss-line);
  padding:clamp(104px,11vw,140px) 0 clamp(64px,8vw,96px);
}

/* breadcrumb — overlaid inside the hero (no gradient bar); same placement as
   contact.html: a 48px row flush under the navbar, left-aligned, text centred */
.sshero2__crumbs{position:absolute;left:0;right:0;top:0;z-index:3;height:48px;
  display:flex;align-items:center;gap:8px;
  font-family:"DM Sans",sans-serif;font-size:14px;white-space:nowrap;overflow:hidden}
.sshero2__crumbs a{color:var(--ss-navy-700);font-weight:500;flex:none;transition:.15s}
.sshero2__crumbs a:hover{color:var(--ss-navy)}
.sshero2__crumbs-sep{color:var(--ss-blue);flex:none}
.sshero2__crumbs-current{color:var(--ss-blue);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis}

.sshero2__content{position:relative;z-index:2}
.sshero2__content .eyebrow{display:block;margin-bottom:12px;color:var(--ss-blue)}
.sshero2__title{font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:clamp(36px,4.4vw,54px);color:var(--ss-navy);margin:0 0 14px;line-height:1.12}
.sshero2__lead{color:var(--ss-navy-700);font-size:16px;max-width:560px;margin:0 auto}

/* banner layer — full-bleed photography behind the centred title.
   The artwork keeps its middle deliberately clear, so the crop can lean on
   the centre at every width and the navy type always lands on flat colour. */
.sshero2__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
/* lifts the navy title off the photograph and keeps the breadcrumb readable
   over the props that sit in the top corners */
.sshero2__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 22%),
    radial-gradient(120% 78% at 50% 52%,rgba(255,255,255,.72) 0%,rgba(255,255,255,.34) 46%,rgba(255,255,255,0) 76%)}

/* ============================================================
   RECIPE — product picker + single preview card (blue, minimal)
   Layout / padding / margins match the Cho's Kitchen recipe card.
   ============================================================ */
.recipe{background:#fff;padding:clamp(36px,5vw,56px) 0 clamp(48px,6vw,72px)}
.recipe__head{text-align:center;margin:0 auto clamp(14px,2vw,22px)}
.recipe__head .eyebrow{display:block;margin-bottom:6px}
.recipe__title{font-family:"DM Sans",sans-serif;font-weight:700;color:var(--ss-navy);
  font-size:clamp(28px,4vw,46px);margin:0;line-height:1.12}

.recipe__grid{max-width:var(--wrap);margin:32px auto 0}

.rec{background:#fff;border:1px solid var(--ss-line);border-radius:24px;overflow:hidden}
/* fixed height so every flavour's card is identical and the CTA bar always
   lands in the same spot */
.rec--preview{height:420px}

.rec__preview{display:grid;grid-template-columns:1fr 1fr;height:100%}
.rec__previewMedia,.rec__previewBody{min-width:0}
/* soft blue panel behind the transparent bowl cutout — object-fit:contain
   keeps the WHOLE bowl in frame (minimal, clean) */
.rec__previewMedia{height:100%;overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%,#f3f8ff 0%,var(--ss-blue-50) 55%,#dfeafb 100%);
  display:flex;align-items:center;justify-content:center}
.rec__previewMedia img{width:100%;height:100%;object-fit:contain;padding:20px;display:block}
.rec__previewBody{display:flex;flex-direction:column;padding:30px 34px}
/* reserve enough height for the longest flavour description so the peek
   pills / CTA bar below always land in the same spot, no matter which
   flavour is selected (matches recipe-chos-kitchen.css) */
.rec__preview .rec__desc{margin-top:10px;min-height:120px}
.rec__peek{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.rec__peekItem{display:flex;align-items:center;gap:9px;font-family:"DM Sans",sans-serif;font-weight:500;
  font-size:13px;color:var(--ss-navy-700);background:var(--ss-blue-50);border-radius:999px;
  padding:10px 18px}
.rec__peekItem svg{width:22px;height:22px;flex:none;color:var(--ss-blue)}

.rec__left{display:flex;flex-direction:column;min-width:0}
.rec__name{font-family:"DM Sans",sans-serif;font-weight:700;color:var(--ss-navy);
  font-size:30px;margin:0;line-height:1.15}
.rec__desc{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}

/* toggle bar — full-width link to the flavour's detail page */
.rec__toggle{display:flex;align-items:center;justify-content:flex-end;gap:14px;width:100%;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--ss-line);
  background:transparent;cursor:pointer;font-family:"DM Sans",sans-serif;font-weight:700;
  color:var(--ss-blue);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.rec__toggleArrow{flex:none;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--ss-navy);color:#fff;
  transition:transform .2s ease,background .2s ease}
.rec__toggle:hover .rec__toggleArrow{background:var(--ss-blue);transform:translateX(3px)}
.rec__toggleArrow svg{width:20px;height:20px}

/* ============================================================
   RECIPE PICKER — clickable product thumbnails between minimal
   blue hairlines (no ornate border artwork)
   ============================================================ */
.recipe__picker{max-width:var(--wrap);margin:0 auto 40px}
/* thin minimal blue rule spanning the full content width (fades at the ends) */
.recipe__pickerline{display:block;width:100%;max-width:var(--wrap);height:1px;margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--ss-line-blue) 4%,var(--ss-line-blue) 96%,transparent)}

/* the scrolling packs fade out to white on both edges (soft mask) instead
   of a hard cut */
.recipe__pickerviewport{position:relative;overflow-x:auto;overflow-y:hidden;
  max-width:862px;margin:0 auto;
  scrollbar-width:none;cursor:grab;touch-action:pan-x;
  -webkit-user-select:none;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.recipe__pickerviewport::-webkit-scrollbar{display:none;height:0}
.recipe__pickerviewport.is-grabbing{cursor:grabbing}
.recipe__pickerrow{display:flex;gap:24px;justify-content:center;
  padding:20px var(--pad) 24px;width:max-content;margin:0 auto}

.rpick{position:relative;flex:0 0 auto;width:132px;height:132px;padding:8px;
  border:0;background:transparent;border-radius:16px;cursor:pointer;
  transition:transform .3s ease}
.rpick::before{content:"";position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(150deg,var(--ss-blue),var(--ss-navy));
  opacity:0;transform:scale(.86);transition:opacity .25s ease,transform .25s ease;z-index:0;
  box-shadow:0 10px 22px -10px rgba(31,26,110,.5)}
.rpick img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  display:block;filter:drop-shadow(0 6px 10px rgba(31,26,110,.22))}
.rpick:hover,.rpick:focus-visible{transform:rotate(-6deg) scale(1.08)}
.rpick:hover::before,.rpick:focus-visible::before{opacity:1;transform:scale(1)}
.rpick.is-active::before{opacity:.5;transform:scale(1)}

/* ============================================================
   FOOTER — same structure as index.html
   ============================================================ */
.foot{background:var(--tint);color:var(--ink-soft);padding:80px 0 0}
.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__logo{height:46px;width:auto;margin-bottom:18px}
.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__brand p{font-size:16px;max-width:320px;margin:0 0 20px}
.foot__col h4{font-family:"DM Sans",sans-serif;color:var(--ink);font-size:16px;margin-bottom:16px}
.foot__col a{display:block;padding:6px 0;font-size:14px;transition:.15s}
.foot__col a:hover{color:var(--cci-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__legal{display:flex;gap:18px}
.foot__legal a:hover{color:var(--cci-blue)}
/* agency credit in the legal line — set as a quiet note, not a link, so it
   reads as a byline beside Privacy / Terms (per the Yes! design agreement) */
.foot__by{opacity:.75;white-space:nowrap}

.contact__social{display:flex;gap:12px}
.contact__social a{width:42px;height:42px;border-radius:12px;background:var(--cci-blue);
  display:flex;align-items:center;justify-content:center;transition:.2s}
.contact__social a:hover{background:var(--cci-blue-700);transform:translateY(-2px)}
.contact__social svg{width:20px;height:20px;fill:#fff}
.contact__social .ig{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact__social .ig .dot{fill:#fff;stroke:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Deliberate line breaks (<br class="brk brk--wide">) tidy the ragged edge of
   the dish copy. They only help while the column is wide enough to hold each
   phrase on one line — otherwise a phrase wraps and leaves an orphan word — so
   they switch off below 1280px (the longest phrase needs a 498px column, which
   the card reaches at ~1260), falling back to normal wrapping. Mirrors the same
   rule on recipe-chos-kitchen.css. */
@media (max-width:1279px){
  .brk--wide{display:none}
}
@media (max-width:1100px){
  .nav__menu{display:none}
  .nav__burger{display:flex}
  .nav__right{margin-left:auto}
  .nav__right .lang{display:none}
}
@media (max-width:980px){
  .recipe__grid{max-width:560px}
  /* card stacks — release the fixed height, media gets its own */
  .rec--preview{height:auto}
  .rec__preview{grid-template-columns:1fr;height:auto}
  .rec__previewMedia{height:260px}
  .rec__previewBody{padding:24px 26px}
}
/* tablet — the two centre-ward feature packs would crowd the centred text */
@media (max-width:960px){
}
@media (max-width:720px){
  :root{--pad:18px}
  /* the banner is 3.7:1 — behind a phone-shaped block the cover-crop would
     keep only its empty middle, so stack it instead: the artwork runs full
     width at its own proportions and the title sits underneath it */
  .sshero2{padding:0 0 clamp(30px,8vw,42px)}
  .sshero2__crumbs{position:relative;height:auto;padding-block:14px}
  .sshero2__bg{position:relative;inset:auto;height:auto;aspect-ratio:2932/791;
    margin-bottom:clamp(22px,6vw,30px)}
  .sshero2__scrim{display:none}

  .foot{padding-top:56px}
  .foot__grid{grid-template-columns:1fr;gap:28px}
  .foot__bar{flex-direction:column;gap:8px}

  .recipe{padding:44px 0 56px}
  .rec__name{font-size:22px}
  .rec__previewMedia{height:220px}
  /* phones: the script reserves the longest flavour's copy height (inline
     min-height), so the chips lock to one spot and every card matches. These
     just tighten the block — chips closer to the copy, 16px off the divider */
  .rec__peek{margin-top:10px;margin-bottom:16px;gap:10px}
  /* tighter padding so two chips still share a row on a 375px phone; each
     chip keeps its natural width */
  .rec__peekItem{padding:10px 14px}
  .rpick{width:104px;height:104px}
  .recipe__pickerrow{gap:16px}
  .recipe__pickerviewport,.recipe__pickerline{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
}