/*
 * Nova Cafe & Juice Bar: layered layout.
 * Loaded after each page's inline styles. It turns the flat, full-width bands
 * into rounded panels and glass cards that float over the ambient background
 * (see js/site.js).
 */
:root{
  --r-xl:clamp(22px,3vw,36px);
  --r-lg:clamp(18px,2.2vw,26px);
  --r-md:16px;
  --inset:clamp(10px,1.6vw,22px);
  --glass:rgba(251,247,238,.66);
  --glass-strong:rgba(251,247,238,.86);
  --glass-line:rgba(255,255,255,.7);
  --shadow-soft:0 1px 2px rgba(26,23,18,.05),0 12px 32px -12px rgba(26,23,18,.18);
  --shadow-lift:0 2px 6px rgba(26,23,18,.06),0 30px 60px -24px rgba(26,23,18,.35);
  --ease-out:cubic-bezier(.22,1,.36,1);
}

/* ---------- buttons: soft pills ---------- */
.btn-box{border-radius:999px;transition:background .25s ease,color .25s ease,transform .25s var(--ease-out),box-shadow .25s ease;}
.btn-box:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(26,23,18,.45);}
.btn-box.solid{box-shadow:0 8px 20px -10px rgba(164,85,47,.7);}

/* ---------- floating glass nav ---------- */
header.site-nav,header.site-nav.scrolled{background:transparent;box-shadow:none;backdrop-filter:none;padding-block:14px;}
header.site-nav .nav-row{
  max-width:calc(1320px - 2 * var(--inset));margin-inline:var(--inset);
  padding:10px 10px 10px clamp(18px,2.4vw,28px);border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:var(--shadow-soft);transition:box-shadow .3s ease,background .3s ease;
}
@media (min-width:1364px){ header.site-nav .nav-row{margin-inline:auto;} }
header.site-nav.scrolled .nav-row{background:var(--glass-strong);box-shadow:var(--shadow-lift);}
.lang-select{border-radius:999px;}

/* ---------- hero: inset rounded stage ---------- */
.hero-photo{margin:6px var(--inset) 0;border-radius:var(--r-xl);box-shadow:var(--shadow-lift);isolation:isolate;}
.hero-photo .hero-bg{animation:nl-zoom 22s ease-in-out infinite alternate;}
@keyframes nl-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-photo .value-strip{gap:10px;}
.hero-photo .value-chip{
  padding:8px 14px;border-radius:999px;background:rgba(246,241,230,.12);
  border:1px solid rgba(246,241,230,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--on-dark);
}
.hero-photo .hero-foot{border-top:0;padding:clamp(18px,2.6vw,28px);border-radius:var(--r-lg);
  background:rgba(26,23,18,.28);border:1px solid rgba(246,241,230,.16);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}

/* interior page headers become a glass card */
.page-header{
  margin-top:clamp(14px,2vw,24px);border-bottom:0;border-radius:var(--r-xl);
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow-soft);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  max-width:calc(1320px - 2 * var(--inset));
  margin-inline:max(var(--inset),calc((100% - 1320px) / 2 + var(--inset)));
}

/* old grain divider is replaced by breathing room */
.grain-band{height:clamp(18px,3vw,36px);}
.grain-band svg{display:none;}

/* ---------- full-bleed photos become inset frames with floating captions ---------- */
.photo-band{position:relative;margin-inline:var(--inset);}
.photo-band .frame{border-radius:var(--r-xl);box-shadow:var(--shadow-lift);}
.photo-band .cap{
  position:absolute;left:0;right:0;bottom:clamp(14px,2vw,24px);border-bottom:0;padding-block:0;
  pointer-events:none;
}
.photo-band .cap .num{
  color:var(--ink);background:var(--glass-strong);border:1px solid var(--glass-line);
  padding:7px 14px;border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:var(--shadow-soft);
}

/* ---------- photo + text: card overlapping the image ---------- */
.photo-duo{gap:0;}
.photo-duo .pframe{border-radius:var(--r-xl);position:relative;z-index:1;
  box-shadow:22px 22px 0 -4px var(--cream-soft),var(--shadow-lift);}
.photo-duo.reverse .pframe{box-shadow:-22px 22px 0 -4px rgba(113,131,106,.28),var(--shadow-lift);}
.photo-duo .ptext{
  position:relative;z-index:2;padding:clamp(26px,3.4vw,46px);border-radius:var(--r-lg);
  background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:var(--shadow-lift);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
@media (min-width:861px){
  .photo-duo .ptext{margin-left:clamp(-140px,-8vw,-60px);}
  .photo-duo.reverse .ptext{margin-left:0;margin-right:clamp(-140px,-8vw,-60px);}
}
@media (max-width:860px){
  .photo-duo .ptext{margin:-56px 14px 0;}
}

/* ---------- colored sections: rounded panels stacked on the canvas ---------- */
.diagram-section,.menu-section,.cta-band{
  margin-inline:var(--inset);border-radius:var(--r-xl);position:relative;overflow:hidden;isolation:isolate;
}
.diagram-section{
  background:rgba(236,225,203,.62);border:1px solid var(--glass-line);box-shadow:var(--shadow-soft);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.menu-section,.cta-band{box-shadow:var(--shadow-lift);}
.menu-section::before,.cta-band::before{
  content:"";position:absolute;z-index:-1;width:60vmax;height:60vmax;right:-22vmax;top:-30vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(164,85,47,.32),transparent 62%);pointer-events:none;
}
.cta-band::after{
  content:"";position:absolute;z-index:-1;width:46vmax;height:46vmax;left:-18vmax;bottom:-26vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(95,179,161,.18),transparent 62%);pointer-events:none;
}
.cta-band{margin-top:clamp(20px,3vw,40px);}
.hours-table{padding:clamp(18px,2.4vw,28px);border-radius:var(--r-lg);background:rgba(246,241,230,.06);
  border:1px solid var(--line-on-dark);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.hours-row:last-child{border-bottom:0;}
.ig-card{border-radius:var(--r-md);background:rgba(246,241,230,.05);}

/* ---------- tiles: rounded, staggered, lifted ---------- */
.mood-tile,.board-strip .btile,.gallery-grid figure{border-radius:var(--r-md);box-shadow:var(--shadow-soft);
  transition:transform .5s var(--ease-out),box-shadow .5s ease;}
.mood-tile:hover,.board-strip .btile:hover,.gallery-grid figure:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);}
@media (min-width:761px){
  .mood-grid{padding-bottom:36px;}
  .mood-tile:nth-child(even){transform:translateY(36px);}
  .mood-tile:nth-child(even):hover{transform:translateY(30px);}
}

/* ---------- section dividers become spacing; lists become cards ---------- */
section.wrap[style*="border-top"]{border-top:0 !important;}
.faq-list{border-top:0;display:grid;gap:10px;}
.faq-item{
  border:1px solid var(--glass-line);border-radius:var(--r-md);padding:18px clamp(18px,2.4vw,26px);
  background:var(--glass);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .25s ease,box-shadow .25s ease;
}
.faq-item[open]{background:var(--glass-strong);box-shadow:var(--shadow-lift);}
.about-list{border-top:0;padding:8px clamp(16px,2vw,24px);border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow-soft);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.about-list li:last-child a{border-bottom:0;}
.about-list a{transition:padding .25s var(--ease-out);}
.about-list a:hover{padding-left:6px;}

/* "New to Astoria?" style flex teasers become a glass banner */
section.section-pad.wrap.reveal[style*="display:flex"]{
  padding:clamp(28px,4vw,48px);border-radius:var(--r-xl);background:var(--glass);
  border:1px solid var(--glass-line);box-shadow:var(--shadow-soft);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  max-width:calc(1320px - 2 * var(--inset));
  margin:clamp(20px,3vw,40px) max(var(--inset),calc((100% - 1320px) / 2 + var(--inset)));
}

/* ---------- footer: glass sheet ---------- */
footer{
  border-top:0;margin:clamp(20px,3vw,40px) var(--inset) var(--inset);border-radius:var(--r-xl);
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow-soft);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}

@media (prefers-reduced-motion: reduce){
  .hero-photo .hero-bg{animation:none;}
  .btn-box:hover,.mood-tile:hover,.board-strip .btile:hover,.gallery-grid figure:hover{transform:none;}
}

@media (max-width:860px){
  .photo-duo,.photo-duo.reverse{grid-template-columns:1fr;}
  .photo-duo.reverse .pframe{order:0;box-shadow:22px 22px 0 -4px rgba(113,131,106,.28),var(--shadow-lift);}
  .hero-photo .hero-foot{gap:22px;}
}

/* footer bottom bar: copyright left, links grouped right */
.foot-bottom{justify-content:flex-start;gap:8px 12px;}
.foot-bottom > span:first-child{margin-right:auto;}