/* =========================================
   Primo Pizza — Responsive Styles
   ========================================= */

/* ---------- Theme tokens ---------- */
:root{
  --bg:#0f0f11;
  --card:#17171a;
  --accent:#c5241a;
  --gold:#ffd54f;
  --text:#f1f1f1;
  --muted:#bdbdbd;
  --white:#fff;
}

/* ---------- Base / global ---------- */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background: var(--bg) url("assets/Primo+Pizza+social-share-1200x628-1920w.png") center/cover fixed no-repeat;
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;                         /* kill sideways scroll */
}
img,svg,video{ max-width:100%; height:auto; display:block; }

body{
  display:flex; min-height:100vh; position:relative;
}

/* ---------- Crossfade page background layers ---------- */
.page-bg{
  position: fixed; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
  will-change: opacity, background-position;
  transition: opacity .5s ease;
  opacity: 0; pointer-events: none;
}
.page-bg::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.25); }
.page-bg.is-active{ opacity:1; }

/* Keep app content above backgrounds */
.content,.sidebar,.to-top{ position:relative; z-index:1; }

/* ---------- Content column ---------- */
.content{ flex:1; padding:2rem; min-width:0; }  /* min-width:0 prevents grid overflow */

/* ---------- Section overlay panels ---------- */
.section{ scroll-margin-top:110px; }
.section-card{
  position:relative;
  margin:2rem 0;
  padding:1.75rem 2rem;
  border-radius:16px;
  background: rgba(15,15,17,0.82);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  max-width:100%;
}
.section-card h2{ color:var(--gold); margin:.25rem 0; }
.section-card hr{ border:0; height:2px; background:#2a2a2f; margin:1rem 0 1.25rem; }

/* ---------- ABOUT (two-column; only section with foreground image) ---------- */
.about{
  display:grid; grid-template-columns: 1.1fr 1fr; align-items:center; gap:2.25rem;
}
.about-media{
  border-radius:18px; overflow:hidden; box-shadow:0 14px 36px rgba(0,0,0,.35);
  height: clamp(220px, 30vw, 340px);
}
.about-media img{
  width:100%; height:100%;
  object-fit:cover; object-position:left top; border-radius:18px;
}
.about-copy{ max-width:52ch; line-height:1.8; }
.about-title{
  margin:0 0 .75rem; font-size: clamp(28px,4vw,48px); font-weight:900; letter-spacing:.5px;
  color:var(--gold); text-transform:uppercase; position:relative;
}
.about-title::after{
  content:""; display:block; width:120px; height:4px; margin-top:.6rem; background:var(--accent); border-radius:2px;
}

/* ---------- Menu grids / items ---------- */
.menu-grid{ display:grid; grid-template-columns: repeat(2, minmax(260px,1fr)); gap:1rem; }
.menu-grid.one{ grid-template-columns:1fr; }
.menu-item{
  background: rgba(23,23,26,0.78);
  border-radius:12px; padding:1rem 1.25rem; line-height:1.6;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.menu-item h3{ margin:.25rem 0 .75rem; color:#fff; }
.toppings-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:2rem; margin-top:1rem; }
.price{ color:var(--gold); font-weight:800; margin-left:.75rem; }
.menu-item p{ display:flex; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.sub{ color:var(--muted); margin-top:0; }
.toppings{ color:#ddd; }
.note{ color:#bbb; font-style:italic; }
.deal-card{
  background: rgba(23,23,26,0.78);
  border-radius:12px; padding:1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.deal-title{ font-weight:900; font-size:1.2rem; }
.deal-price{ font-weight:900; font-size:1.2rem; color:var(--gold); }

/* ---------- BYOP table ---------- */
.byop-table{
  width:100%; border-collapse:collapse; overflow:hidden; border-radius:.75rem;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.byop-table th, .byop-table td{ border:1px solid #2a2a2f; padding:.75rem; background: rgba(23,23,26,0.85); }
.byop-table th{ color:#fff; }
.byop-table td{ color:#eaeaea; }

/* ---------- Hours / contact ---------- */
.hours{ margin-top:1.25rem; }
.hours-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
address{ font-style:normal; color:#ddd; margin-top:1rem; }
.phone{ font-weight:900; margin-top:.25rem; }
.privacy a{ color:#fff; text-decoration:underline; opacity:.85; }

/* ---------- CTA ---------- */
.cta{
  display:inline-block; background:var(--gold); color:#000; padding:.75rem 1rem; border-radius:.6rem;
  font-weight:800; text-decoration:none; text-align:center; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.cta.small{ padding:.5rem .75rem; font-weight:700; }
.cta.full{ width:100%; }

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:calc(320px + 16px); bottom:16px;
  width:40px; height:40px; border-radius:999px; border:none; cursor:pointer;
  background:#ffffff; color:#000; font-size:20px; line-height:40px; text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.25); opacity:.0; pointer-events:none; transition:.25s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; }

/* ---------- Right sidebar (sticky desktop / drawer mobile) ---------- */
.sidebar{
  width:320px; position:sticky; top:0; height:100vh;
  background:var(--accent); color:#fff; padding:1.25rem; display:flex; flex-direction:column; gap:1rem; z-index:10;
}
.hamburger{ display:none; position:absolute; top:12px; right:12px; width:42px; height:36px; background:transparent; border:none; cursor:pointer; }
.hamburger span{ display:block; height:3px; background:#fff; margin:7px 0; transition:.25s; }
.hamburger.open span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

.brand{
  display:grid; grid-template-columns:auto auto; align-items:center; gap:.75rem; margin-top:8px;
}
.logo-text{ width:auto; max-width:220px; height:auto; border-radius:8px; }
.logo-mascot{ width:96px; height:auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.25)); }

.side-nav ul{ list-style:none; margin:.25rem 0 0; padding:0; display:flex; flex-direction:column; gap:.25rem; }
.side-nav a{
  display:block; padding:.6rem .75rem; color:#fff; text-decoration:none; border-radius:.5rem; font-weight:700; outline:none;
}
.side-nav a:hover, .side-nav a.active, .side-nav a[aria-current="true"]{ background:#fff; color:#111; }
.side-nav a:focus-visible{ box-shadow:0 0 0 3px #fff8; }
.sidebar .cta.full{ margin-top:auto; }

/* ---------- HERO ---------- */
#hero{
  position:relative;
  min-height: clamp(70vh, 84vh, 92vh);     /* tall splash across devices */
  display:flex; align-items:center; justify-content:flex-start;
  text-align:center;
  background-size:cover; background-position:center; background-attachment:fixed;
}
.hero-body{
  background-color: rgba(204, 41, 41, 0.95);
  border-radius:16px;
  padding:1.5rem 1.25rem;
  max-width:min(92vw, 520px);
  margin:1rem;                             /* left aligned, but with safe margin */
}
.hero-body h1{
  font-size:clamp(1.6rem, 4.5vw + 0.6rem, 2.6rem);
  line-height:1.2; margin-bottom:1rem; color:#fff;
}
.hero-body .cta{
  background-color:#fbbc34; color:#000; padding:.75rem 1.5rem; border-radius:8px;
  font-weight:800; box-shadow:0 4px 6px rgba(0,0,0,.2); transition:background .2s ease;
}
.hero-body .cta:hover{ background-color:#e0a92c; }

/* =========================================
   RESPONSIVE
   ========================================= */

/* Phone/tablet adjustments */
@media (max-width: 980px){
  /* mobile drawer */
  body{ flex-direction:column; }
  .sidebar{
    position:fixed; inset:auto 0 0 0; height:auto; width:100%;
    top:auto; transform:translateY(100%); transition: transform .25s ease;
  }
  .sidebar.open{ transform:none; }
  .hamburger{ display:block; position:fixed; right:12px; bottom:12px; z-index:1001; }

  .content{ padding:1rem; }
  .section-card{ padding:1rem; margin:1rem 0; }
  .about{ grid-template-columns:1fr; gap:1.25rem; }
  .about-copy{ max-width:none; }
  .menu-grid{ grid-template-columns:1fr; }
  .hours-grid{ grid-template-columns:1fr; }
  .toppings-wrap{ grid-template-columns:1fr; gap:1rem; }
  .to-top{ right:16px; }

  /* fixed backgrounds can be janky on iOS */
  .page-bg{ background-attachment:scroll; }
  body{ background-attachment:scroll; }
}

/* BYOP table becomes horizontally scrollable on narrow screens */
@media (max-width: 640px){
  .byop-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
}

/* Desktop hardening: ensure sticky works even after mobile styles */
/* ----- DESKTOP LAYOUT: lock sidebar on the RIGHT ----- */
@media (min-width: 981px){
  .sidebar{
    position: fixed;
    top: 0;
    right: 0;               /* lock it to the right edge */
    left: auto;             /* make sure it's not sticking left */
    height: 100vh;
    width: 320px;           /* adjust to your actual sidebar width */
    overflow-y: auto;
    transform: none !important;
  }

  .content{
    margin-right: 320px;    /* leave space so content doesn't go under */
    padding-right: 2rem;
  }

  .to-top{
    right: calc(320px + 16px); /* keep button clear of sidebar */
  }

  .hamburger{ display: none !important; }
}


/* Extra-small phones */
@media (max-width: 380px){
  .content{ padding:.75rem; }
  .section-card{ padding:.875rem; }
  .hero-body{ margin:.75rem; padding:1.25rem; }
}
.coming-soon {
  margin-top: 10px;
  font-size: 1rem;
  color: #ffd54f; /* soft yellow/gold */
  font-weight: bold;
}
.coming-soon::before {
  content: "🚧 "; /* construction emoji */
}

/* Align columns on desktop */
.deal-card{
  display:grid;
  grid-template-columns: 1fr auto auto; /* title | price | button */
  align-items:center;
  gap:1rem;
  padding:1rem;
  border-radius:12px;
  background: rgba(0,0,0,.55);
  overflow: visible; /* make sure the button shadow can't clip */
}

.deal-title{ font-weight:800; color:#fff; }
.deal-price{ color:var(--gold); font-weight:800; text-align:right; min-width:120px; }
.deal-card .cta.small{ justify-self:end; white-space:nowrap; }

/* Mobile: stack neatly so nothing clips */
@media (max-width: 560px){
  .deal-card{
    grid-template-columns: 1fr;      /* single column */
    gap:.5rem;
    padding:.85rem 1rem;
  }
  .deal-price{
    text-align:left;                 /* price under title */
    min-width:0;
  }
  .deal-card .cta.small{
    justify-self:stretch;            /* full-width button */
    width:100%;
    text-align:center;
  }
}