:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#616161;
  --accent:#c62828;   /* red */
  --accent-2:#2e7d32; /* green */
  --card:#fafafa;
  --border:#e5e7eb;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
  --radius: 16px;
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Inter, system-ui, sans-serif; line-height:1.6;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1100px,92vw); margin-inline:auto}

/* Desktop body padding so content doesn't jump when header hides */
@media (min-width:901px){ body{ padding-top: var(--header-h); } }

/* ---------- Header (aesthetic) ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:1100;
  background:#fff; border-bottom:1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .35s ease, opacity .35s ease, box-shadow .2s ease;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; }

.brand{ display:flex; align-items:center; gap:.6rem; }
.site-logo{ height:64px; width:auto; border-radius:12px; }
.site-title{ font-size:1.25rem; font-weight:800; letter-spacing:.02em; }

/* Desktop nav as soft pills */
.desktop-nav a{
  padding:.55rem .75rem; border-radius:999px; color:#222;
  background:transparent; border:1px solid transparent;
  transition:.2s;
}
.desktop-nav a:hover{ background:#f6f7f9; border-color:#eef0f3; }
.cta{
  background:var(--accent); color:#fff; padding:.55rem 1rem;
  border-radius:999px; font-weight:800; border:2px solid var(--accent);
}
.cta:hover{ filter:brightness(1.05) }

/* Hamburger (3 lines -> X) */
.menu-btn{
  display:none; width:42px; height:42px; border:1px solid var(--border);
  border-radius:12px; background:#fff; align-items:center; justify-content:center;
  position: relative; cursor:pointer;
}
.menu-btn span{
  position:absolute; left:50%; transform:translateX(-50%);
  width:20px; height:2px; background:#222; transition:.25s;
}
.menu-btn span:nth-child(1){ top:12px; }
.menu-btn span:nth-child(2){ top:19px; }
.menu-btn span:nth-child(3){ top:26px; }
.menu-btn.open span:nth-child(1){ top:19px; transform:translateX(-50%) rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ top:19px; transform:translateX(-50%) rotate(-45deg); }

/* Hide only on desktop when scrolling down */
@media (min-width:901px){ .site-header.hide{ transform:translateY(-100%); opacity:0; } }
body.menu-open .site-header{ transform:none !important; opacity:1 !important; }

/* ---------- Mobile drawer ---------- */
.mobile-nav{
  position:fixed; top:0; right:0; height:100dvh; width:86vw; max-width:380px;
  background:#fff; color:#111; border-left:1px solid var(--border);
  transform:translateX(100%); transition:transform .3s ease; z-index:2000;
  display:flex; flex-direction:column; padding:0 .75rem .75rem; overflow-y:auto;
  box-shadow: var(--shadow);
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid var(--border); font-weight:800; }
.close-btn{ font-size:2rem; background:none; border:none; color:#111; cursor:pointer; line-height:1; }
.mobile-nav a{ display:block; padding:1rem; border-bottom:1px solid var(--border); color:#111; }
.mobile-nav a:last-child{ border-bottom:none; }
.mobile-nav .cta{ margin:1rem .5rem 0; display:inline-block; text-align:center; }

/* Overlay */
.nav-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 1500; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.nav-overlay.show{ opacity: 1; pointer-events: auto; }
body.menu-open{ overflow:hidden; position:relative; width:100%; }

/* ---------- Hero ---------- */
.hero{position:relative; isolation:isolate}
.hero::before{ content:""; position:absolute; inset:0; background:url("../img/pizza%20header.jpg") center/cover no-repeat; z-index:-2; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); z-index:-1; }
.hero .container{ padding:14vh 0 18vh; color:#fff }
.eyebrow{ color:#ffe082; font-weight:700; text-transform:uppercase; letter-spacing:.12em }
.hero h1{ font-size:clamp(2rem,5vw,3.6rem); line-height:1.1; margin:.5rem 0 1rem; text-align:left }
.sub{ max-width:60ch; color:#f1f1f1; text-align:left }
.actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem; text-align:left }
.btn{ background:#ffffff; color:#111; padding:.7rem 1rem; border-radius:999px; font-weight:800; border:2px solid #ffffff; }
.btn.alt{ background:transparent; color:#fff; border:2px solid #ffffff }

/* ---------- Global headings centered (except hero text) ---------- */
h1, h2, h3 { text-align:center; }

/* ---------- Ribbon ---------- */
.ribbon{ background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.ribbon ul{
  list-style:none; margin:0; padding:1rem 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem;
}
.ribbon li{ display:flex; justify-content:center; align-items:center; font-weight:800; gap:.5rem; }
.ribbon li::before{ content:""; width:.75rem; height:.75rem; border-radius:50%; background:var(--accent); }

/* Mobile: centered stacked with mini pizza bullets */
@media (max-width:900px){
  .ribbon ul{ padding:.4rem 0; margin:0; display:grid; grid-template-columns:1fr; row-gap:.35rem; justify-items:center; text-align:center; }
  .ribbon li{ display:inline-flex; align-items:center; gap:.4rem; font-size:.95rem; font-weight:600; padding:.25rem 0; }
  .ribbon li::before{ content:"🍕"; background:none; width:auto; height:auto; border-radius:0; font-size:1rem; line-height:1; margin-right:.2rem; }
}

/* ---------- Sections / spacing ---------- */
section{ padding:72px 0; border-bottom:1px solid var(--border) }
h2{ font-size:clamp(1.6rem,3.5vw,2.4rem); margin:0 0 1rem; color:#111 }
@media (max-width:900px){
  section { padding:40px 0; }
  .hero .container { padding:12vh 0 10vh; }
  h2 { margin:0 0 .75rem; }
}

/* ---------- Menu ---------- */
.menu-list{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem }
.menu-item{ border-bottom:1px dashed #d1d5db; padding:.8rem 0 }
.menu-item:last-child{ border-bottom:none }
.menu-item h3{ margin:0; color:#111; text-align:center }
.menu-item p{ margin:.35rem 0 0; color:var(--muted); text-align:center }

/* ---------- Cards (Event Catering & Small Gathering) ---------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.2rem; text-align:center;
  box-shadow: var(--shadow);
}
.card h3{ margin-top:0; color:#111 }
.card .btn{ background:var(--accent); color:#fff; border-color:var(--accent); display:block; margin:1rem auto 0 }
.card .btn.alt{ background:#fff; color:var(--accent-2); border-color:var(--accent-2); display:block; margin:1rem auto 0 }

/* ---------- Gallery (4-up desktop, 2-up mobile) ---------- */
.gallery-wrap{
  position: relative;
  overflow: hidden;
}

.gallery-track{
  display:flex;
  gap:.5rem;                 /* tighter gap so items look smaller */
  transition: transform .4s ease;
  will-change: transform;
}

/* Show 4 per view on desktop */
.gallery-track img{
  flex:0 0 calc((100% - 3 * .5rem) / 4);  /* 4 columns with 3 gaps */
  max-width: calc((100% - 3 * .5rem) / 4);
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Arrows */
.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.5); color:#fff; border:none;
  width:40px; height:40px; border-radius:50%;
  cursor:pointer; z-index:5;
}
.gallery-arrow.left{ left:6px; }
.gallery-arrow.right{ right:6px; }
.gallery-arrow:hover{ background:rgba(0,0,0,0.7); }

/* Mobile: show 2 at a time */
@media(max-width:900px){
  .gallery-track img{
    flex:0 0 calc((100% - .5rem) / 2);   /* 2 columns with 1 gap */
    max-width: calc((100% - .5rem) / 2);
  }
}


/* ---------- Reviews ---------- */
blockquote{
  background:#fff; border:1px solid var(--border); border-left:6px solid var(--accent-2);
  border-radius:var(--radius); padding:1rem; margin:0; color:#222; text-align:center; box-shadow: var(--shadow);
}
cite{ display:block; margin-top:.5rem; color: var(--muted); font-style:normal }
.three-col{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.desktop-reviews{ display:none; }
@media (min-width:901px){ .reviews-wrap, .reviews-dots { display:none; } .desktop-reviews{ display:grid; } }

.reviews-wrap{ position:relative; }
.reviews-viewport{ overflow:hidden; }
.reviews-track{ display:flex; transition: transform .35s ease; }
.review{ flex:0 0 100%; max-width:100%; }
.reviews-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.5); color:#fff; border:none; width:36px; height:36px; border-radius:50%;
  cursor:pointer; z-index:5;
}
.reviews-arrow.left{ left:6px; } .reviews-arrow.right{ right:6px; }
.reviews-dots{ display:flex; justify-content:center; gap:.4rem; margin-top:.6rem; }
.reviews-dots button{ width:8px; height:8px; border-radius:50%; border:none; background:#d1d5db; cursor:pointer; }
.reviews-dots button.active{ background:#111; }

/* ---------- Contact ---------- */
.contact-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:start }
.contact-form{ text-align:left; }
.contact-form h2, .contact-form p, .contact-form form, .contact-form label{ text-align:left; }
.contact-form form{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1rem; display:grid; gap:.75rem; box-shadow: var(--shadow); }
.contact-form label{ display:block; font-weight:600; margin-bottom:.25rem; }
.contact-form input,.contact-form textarea{ width:100%; padding:.8rem; border:1px solid #d1d5db; border-radius:12px; background:#fff; color:#111; text-align:left; }
.contact-form input:focus,.contact-form textarea:focus{ outline:2px solid var(--accent-2); outline-offset:2px; }
.contact-form button{
  margin-top:.4rem; background:var(--accent-2); color:#fff; border:2px solid var(--accent-2);
  padding:.7rem 1rem; border-radius:999px; font-weight:800; cursor:pointer; display:inline-block;
}
.map-wrap{ min-height:340px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow: var(--shadow); }

/* ---------- Footer ---------- */
.site-footer{ background:#0f1115; color:#e9eaee; margin-top:40px; }
.footer-main{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:28px 0;
}
.footer-brand{ display:flex; align-items:center; gap:.6rem; color:#e9eaee; text-decoration:none; }
.footer-logo{ height:56px; width:auto; border-radius:12px; }
.footer-title{ font-weight:800; letter-spacing:.04em; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
.footer-nav a{
  color:#c9cbd1; padding:.45rem .8rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.08); transition:.2s; text-decoration:none;
}
.footer-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.footer-nav .cta.small{ padding:.45rem .9rem; border-color:transparent; background:var(--accent); color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:14px 0; font-size:.9rem; color:#a8aab0; text-align:center;
}

/* ---------- A11y / responsive ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important} }

@media(max-width:900px){
  .desktop-nav{display:none}
  .menu-btn{display:inline-flex}
  .site-title{font-size:1.1rem}
  .header-inner{padding:.6rem 0}
  .site-logo{height:56px}
  .hero .container{padding:12vh 0 10vh}
  .menu-list{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .footer-main{ flex-direction:column; gap:12px; align-items:center; text-align:center; }
}
@media(max-width:380px){ .site-title{display:none} }
/* ==== Pizza Rain Easter Egg ==== */
#pizza-rain{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.pizza-emoji{
  position: absolute;
  top: -10vh;
  will-change: transform, opacity;
  animation: pizza-fall var(--dur, 8s) linear var(--delay, 0s) forwards;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
}

@keyframes pizza-fall{
  0%   { transform: translate(var(--x, 0), -10vh) rotate(var(--rot-start, 0deg)); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--x, 0), 110vh) rotate(var(--rot-end, 360deg)); opacity: .95; }
}