/* ===== Annapurna — Nepali-ravintolademo ===== */
:root{
  --np-crimson:#DC143C;
  --np-crimson-deep:#C0102E;
  --np-blue:#003893;
  --np-ink:#0e1b33;
  --np-paper:#ffffff;
  --np-paper2:#f6f7fb;
  --np-muted:#5a6473;
  --max:1140px;
  --r:8px;
  --border:rgba(15,18,46,.07);
  --radius-card:24px;
  --shadow-card:0 24px 60px -28px rgba(15,18,46,.22);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:'Outfit',system-ui,sans-serif; color:var(--np-ink); background:var(--np-paper); line-height:1.55; }
h1,h2,h3{ font-family:'Fraunces',Georgia,serif; line-height:1.05; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
.label{ font-size:.72rem; font-weight:600; letter-spacing:2px; color:var(--np-crimson); text-transform:uppercase; }
.btn{ display:inline-block; font-weight:500; font-size:.9rem; padding:13px 26px; border-radius:9999px; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.btn-primary{ background:var(--np-crimson); color:#fff; border:none; }
.btn-primary:hover{ background:var(--np-crimson-deep); }
.btn-ghost{ background:transparent; color:var(--np-blue); border:1.6px solid var(--np-blue); }
.btn-ghost:hover{ background:var(--np-blue); color:#fff; }
section{ padding:84px 0; }
.sec-title{ font-weight:600; font-size:clamp(1.9rem,4vw,2.6rem); color:var(--np-ink); margin:6px 0 26px; }
/* Ruudunlukijalle luettava, silmälle näkymätön. Ei display:none eikä
   visibility:hidden — ne poistaisivat tekstin myös ruudunlukijalta. */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
/* Ohituslinkki: piilossa kunnes se saa fokuksen. */
.skip{ position:absolute; left:-9999px; top:0; z-index:100; }
.skip:focus{ left:14px; top:14px; background:var(--np-ink); color:#fff; padding:12px 18px; border-radius:9999px; font-size:.9rem; }
main:focus{ outline:none; }

/* ===== NAV ===== */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid #eee; transition:box-shadow .2s ease; }
.nav.scrolled{ box-shadow:0 4px 24px rgba(0,0,0,.07); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.nav-logo{ font-family:'Fraunces',serif; font-weight:700; font-size:1.5rem; color:var(--np-blue); }
.nav-logo span{ color:var(--np-crimson); }
.nav-links{ display:flex; align-items:center; gap:28px; font-size:.92rem; font-weight:400; }
.nav-links a:not(.nav-cta):hover{ color:var(--np-crimson); }
.nav-cta{ padding:9px 18px; font-size:.85rem; }
.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-burger span{ width:24px; height:2px; background:var(--np-ink); transition:.25s; }
@media (max-width:780px){
  .nav-burger{ display:flex; }
  /* >= 100: jaetun demopalkin sopimus, ks. ../demo-bar.css. Nostettava on
     .nav eikä .nav-links, koska .nav on sticky + z-index:50 ja luo siten
     pinoamiskontekstin, josta lapsen z-index ei pääse ulos. */
  .nav.has-open-menu{ z-index:100; }
  .nav-links{ position:fixed; inset:68px 0 auto 0; flex-direction:column; gap:0; background:#fff; border-bottom:1px solid #eee; padding:8px 0; transform:translateY(-120%); transition:transform .3s ease; }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:14px 24px; width:100%; }
  .nav-cta{ margin:8px 24px; text-align:center; }
}

/* ===== HERO (full-bleed background + overlay) ===== */
.hero{ position:relative; overflow:hidden; min-height:82vh; display:flex; align-items:center; padding:120px 0; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.hero-overlay{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(100deg, rgba(0,44,124,.97) 0%, rgba(0,48,134,.90) 42%, rgba(6,18,52,.52) 72%, rgba(6,18,52,.16) 100%),
  linear-gradient(0deg, rgba(4,14,44,.45) 0%, rgba(4,14,44,0) 42%); }
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-text{ max-width:600px; }
.hero-kicker{ font-size:.8rem; font-weight:600; letter-spacing:1.5px; color:#ff5d73; text-transform:uppercase; }
.hero-title{ font-weight:700; font-size:clamp(3rem,7.5vw,5.8rem); color:#fff; letter-spacing:-1px; margin-top:.3rem; text-shadow:0 6px 34px rgba(0,0,0,.4); }
.hero-uline{ display:block; width:74px; height:5px; background:var(--np-crimson); border-radius:2px; margin:18px 0 22px; }
.hero-sub{ font-size:1.15rem; font-weight:300; color:#dfe3ee; max-width:430px; margin-bottom:32px; }
.hero-btns{ display:flex; gap:14px; flex-wrap:wrap; }
.hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.55); }
.hero .btn-ghost:hover{ background:#fff; color:var(--np-ink); border-color:#fff; }

/* live badge (glass on dark, static) */
.hero-badge{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 12px; border-radius:9999px; background:rgba(255,255,255,.12); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.22); font-size:.82rem; font-weight:500; color:#fff; margin-bottom:20px; }
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:#2bd575; box-shadow:0 0 0 4px rgba(43,213,117,.25); }

@media (max-width:780px){
  .hero{ min-height:auto; padding:108px 0 88px; text-align:center; }
  .hero-text{ max-width:none; }
  .hero-uline{ margin-left:auto; margin-right:auto; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-btns{ justify-content:center; }
}

/* ===== FLOATING FEATURE BAR (overlapping hero) ===== */
/* padding:0 kumoaa section{padding:84px 0} — nostopalkki on <section> vain
   otsikkorakenteen takia, ei osiona jolla olisi omaa pystyväljyyttä. */
.feature-bar-wrap{ position:relative; z-index:5; padding:0; margin-top:-78px; background:linear-gradient(to bottom, transparent 78px, var(--np-paper2) 78px); }
.feature-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feat-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-card); transition:box-shadow .25s ease; }
.feat-card:hover{ box-shadow:0 32px 70px -26px rgba(15,18,46,.36); }
.feat-img{ position:relative; aspect-ratio:5/4; overflow:hidden; }
.feat-img img{ width:100%; height:100%; object-fit:cover; }
.feat-tag{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:5px; background:rgba(220,20,60,.95); color:#fff; font-size:.7rem; font-weight:600; letter-spacing:.4px; text-transform:uppercase; padding:5px 10px 5px 9px; border-radius:9999px; box-shadow:0 6px 16px -6px rgba(192,16,46,.7); }
.feat-tag svg{ width:12px; height:12px; }
.feat-body{ display:flex; flex-direction:column; flex:1; padding:15px 17px 17px; }
.feat-body h3{ font-family:'Fraunces',serif; font-weight:600; font-size:1.12rem; color:var(--np-ink); }
.feat-body p{ font-size:.84rem; font-weight:300; color:var(--np-muted); margin-top:3px; flex:1; }
.feat-price{ font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; color:var(--np-crimson); margin-top:12px; }
/* lunch highlight card */
.feat-lunch{ background:linear-gradient(150deg, var(--np-blue), #00256a); border-color:transparent; display:flex; flex-direction:column; padding:20px 20px 22px; }
.feat-lunch:hover{ box-shadow:0 32px 70px -24px rgba(0,56,147,.6); }
.feat-lunch-tag{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; background:rgba(255,255,255,.16); color:#fff; font-size:.7rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; padding:5px 11px; border-radius:9999px; }
.feat-lunch-tag svg{ width:13px; height:13px; }
.feat-lunch-price{ font-family:'Fraunces',serif; font-weight:700; font-size:1.95rem; color:#fff; margin-top:auto; line-height:1; }
.feat-lunch p{ font-size:.84rem; font-weight:300; color:#cdd6ea; margin-top:7px; }
.feat-lunch-time{ font-family:'Outfit',sans-serif; font-size:.92rem; font-weight:500; color:#cdd6ea; margin-top:7px; }
@media (max-width:880px){
  .feature-bar{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .feature-bar-wrap{ margin-top:-52px; background:linear-gradient(to bottom, transparent 52px, var(--np-paper2) 52px); }
}
@media (max-width:480px){
  .feature-bar{ grid-template-columns:1fr; }
  .feature-bar-wrap{ margin-top:-40px; background:linear-gradient(to bottom, transparent 40px, var(--np-paper2) 40px); }
}

/* ===== MENU ===== */
.menu{ background:var(--np-paper2); }
.menu-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:32px 40px; }
.menu-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.menu-tab{ font-family:'Outfit',sans-serif; font-size:.9rem; font-weight:500; padding:9px 18px; border-radius:9999px; border:1px solid #e3e3ec; background:#fff; color:var(--np-muted); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.menu-tab:hover{ border-color:var(--np-blue); color:var(--np-blue); }
.menu-tab.is-active{ background:var(--np-blue); border-color:var(--np-blue); color:#fff; }
.menu-panel{ display:none; }
/* Kaksipalstainen ruokalista ravintolakonvention mukaan: hinta seuraa nimeä
   samalla rivillä, ei hiusviivoja eikä levitettyjä justify-between-rivejä. */
.menu-panel.is-active{ display:grid; grid-template-columns:1fr 1fr; column-gap:56px; row-gap:2px; }
.dish{ padding:11px 0 13px; }
.dish-name{ font-family:'Outfit',sans-serif; font-weight:600; font-size:1.02rem; line-height:1.3; color:var(--np-ink); }
.dish-price{ font-family:'Fraunces',serif; font-weight:600; font-size:1.02rem; color:var(--np-crimson); white-space:nowrap; margin-left:.35em; }
.dish-desc{ font-size:.88rem; font-weight:300; color:var(--np-muted); margin-top:2px; }
@media (max-width:780px){
  .menu-card{ padding:22px 18px; }
  .menu-panel.is-active{ grid-template-columns:1fr; column-gap:0; }
}

/* ===== STORY ===== */
.story-inner{ display:flex; align-items:center; gap:54px; }
.story-img{ flex:1 1 46%; }
.story-img img{ width:100%; height:420px; object-fit:cover; border-radius:var(--r); box-shadow:0 18px 50px rgba(0,0,0,.14); }
.story-text{ flex:1 1 54%; }
.story-text p:not(.label){ color:var(--np-muted); font-weight:300; font-size:1.05rem; margin-bottom:16px; }
.story-text .sec-title{ margin-bottom:18px; }
@media (max-width:780px){
  .story-inner{ flex-direction:column; gap:28px; }
  .story-img img{ height:280px; }
}

/* ===== GALLERY ===== */
.gallery{ background:var(--np-paper2); }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
/* height:auto on pakollinen: kuvilla on width/height-attribuutit (estävät
   layout shiftin), ja ilman tätä attribuutin 880px-korkeus jyrää tämän
   aspect-ration yli — height jäisi kiinteäksi 880px:ksi leveydestä
   riippumatta, ja 3 saraketta venyisi pystyyn. */
.gallery-grid img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); transition:box-shadow .25s ease; cursor:pointer; }
.gallery-grid img:hover{ box-shadow:0 16px 40px rgba(0,0,0,.16); }
@media (max-width:780px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
}

/* ===== CONTACT ===== */
.contact-card{ display:grid; grid-template-columns:1fr 1.15fr; background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); overflow:hidden; }
.contact-info{ display:flex; flex-direction:column; padding:30px 36px; }
.ci-row{ display:flex; align-items:flex-start; gap:15px; padding:16px 0; }
.ci-row + .ci-row{ border-top:1px solid var(--border); }
.ci-icon{ flex:none; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:rgba(220,20,60,.08); color:var(--np-crimson); }
.ci-icon svg{ width:21px; height:21px; }
.ci-row strong{ display:block; font-size:.72rem; letter-spacing:1px; text-transform:uppercase; color:var(--np-blue); margin-bottom:4px; }
.ci-row span{ color:var(--np-ink); font-weight:300; }
.ci-row a{ color:var(--np-ink); }
.ci-row a:hover{ color:var(--np-crimson); }
/* Staattinen karttakuva upotetun kartan sijaan: ei kolmannen osapuolen
   latausta ilman suostumusta, ei tyhjää laatikkoa jos palvelu on estetty. */
.contact-map{ position:relative; min-height:360px; overflow:hidden; }
.map-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.map-note{ position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; padding:9px 14px; background:rgba(255,255,255,.95); border-top:1px solid var(--border); font-size:.78rem; color:var(--np-muted); }
.map-note a{ text-decoration:underline; text-underline-offset:2px; }
.map-note > a{ font-weight:500; color:var(--np-crimson); }
.map-note > a:hover{ color:var(--np-crimson-deep); }
.map-credit a{ color:var(--np-muted); }
.map-credit a:hover{ color:var(--np-ink); }
.map-pin{ position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); z-index:3; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.map-pin-label{ background:#fff; color:var(--np-ink); font-weight:600; font-size:.78rem; letter-spacing:.2px; padding:5px 12px; border-radius:9999px; box-shadow:0 8px 20px -6px rgba(15,18,46,.4); margin-bottom:7px; white-space:nowrap; }
.map-pin-mark{ width:34px; height:46px; filter:drop-shadow(0 7px 7px rgba(0,0,0,.35)); }
.map-pin::after{ content:''; width:14px; height:5px; border-radius:50%; background:rgba(0,0,0,.28); filter:blur(2px); margin-top:-3px; }
.contact-cta{ margin-top:24px; background:linear-gradient(120deg, var(--np-blue), #00256a); border-radius:var(--radius-card); padding:34px 42px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; box-shadow:0 26px 60px -30px rgba(0,56,147,.6); }
.contact-cta .cta-text h3{ color:#fff; font-size:1.55rem; }
.contact-cta .cta-text p{ color:#cdd6ea; font-weight:300; margin-top:4px; }
.cta-btn{ display:inline-flex; align-items:center; gap:9px; }
.cta-btn svg{ width:18px; height:18px; }

/* ===== FOOTER ===== */
.footer{ background:var(--np-ink); color:#aeb6c6; position:relative; overflow:hidden; }
.footer::before{ content:''; position:absolute; top:-130px; left:-90px; width:360px; height:360px; border-radius:50%; background:var(--np-crimson); filter:blur(120px); opacity:.16; pointer-events:none; }
/* Yksi leveä rivi: iso nimi vasemmalla, tiiviit tietoblokit oikealla.
   Ei sarakeotsikoita eikä linkkisaraketta. */
.footer-row{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:36px 48px; flex-wrap:wrap; padding:56px 24px 42px; }
.footer-brand{ display:flex; flex-direction:column; gap:20px; }
.footer-logo{ font-family:'Fraunces',serif; font-weight:700; font-size:clamp(2.1rem,5.5vw,3.1rem); line-height:1; letter-spacing:-.5px; color:#fff; }
.footer-logo span{ color:var(--np-crimson); }
.footer-facts{ display:flex; gap:14px 46px; flex-wrap:wrap; }
.footer-facts p{ font-size:.92rem; font-weight:300; color:#9aa3b5; line-height:1.7; }
.footer-facts a{ color:#cfd6e2; transition:color .2s ease; }
.footer-facts a:hover{ color:#fff; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); color:#cfd6e2; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.footer-social a:hover{ background:var(--np-crimson); color:#fff; border-color:var(--np-crimson); }
.footer-social svg{ width:18px; height:18px; }
.footer-bottom{ position:relative; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:20px 24px; border-top:1px solid rgba(255,255,255,.08); font-size:.82rem; color:#7e8798; }
.footer-bottom strong{ color:#fff; }

@media (max-width:780px){
  .contact-card{ grid-template-columns:1fr; }
  .contact-info{ padding:24px 22px; }
  .contact-map{ min-height:260px; }
  .contact-cta{ flex-direction:column; text-align:center; padding:28px 24px; }
  .footer-row{ align-items:flex-start; gap:26px; padding:44px 22px 30px; }
  .footer-facts{ gap:14px 34px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}