/* ==========================================================================
   Pinocchio's Bar & Grill — shared stylesheet
   Loaded via <link rel="stylesheet" href="./styles.css"> from every page's
   <helmet>. Custom properties hold the brand palette; everything else is
   organized as small, composable component classes (BEM-ish --modifiers)
   plus a few page-specific one-off classes for layouts that only appear once.
   ========================================================================== */

:root{
  --ink:oklch(24% 0.03 45);            /* primary text, dark pill/btn, footer bg */
  --brand:oklch(64% 0.19 45);          /* links, active nav, primary CTA, eyebrow */
  --brand-dark:oklch(54% 0.18 45);     /* announcement bar bg, link hover, secondary eyebrow */
  --legal-body:oklch(30% 0.02 45);     /* legal article copy */
  --muted:oklch(46% 0.02 45);          /* muted body copy */
  --meta:oklch(56% 0.02 45);           /* byline/date/"last updated" */
  --meta-dim:oklch(60% 0.02 45);
  --hairline:oklch(90% 0.02 85);       /* borders, header shadow */
  --dotted:oklch(88% 0.02 85);
  --bg:oklch(97% 0.02 85);             /* body background */
  --sticky-bg:oklch(97% 0.02 85 / .95);
  --band-bg:oklch(83% 0.14 95 / .35);  /* alternating section band */
  --gold:oklch(83% 0.14 95);           /* solid badge bg, menu h2 underline */
  --tag-bg:oklch(94% 0.03 85);         /* tag/badge pill bg */
  --font-head:'Archivo',sans-serif;
  --font-body:'Source Sans 3',sans-serif;
}

/* ---- base ---------------------------------------------------------- */

body{margin:0;background:var(--bg);font-family:var(--font-body);color:var(--ink)}
a{color:var(--brand)}
a:hover{color:var(--brand-dark)}

/* ---- announcement bar ------------------------------------------------ */

.announcement-bar{
  background:var(--brand-dark);color:#fff;font:700 13px/1.4 var(--font-body);
  padding:9px 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;
}
.announcement-bar .phones{display:flex;gap:22px}
.announcement-bar a{color:#fff;text-decoration:none}

/* ---- header / nav ----------------------------------------------------- */

.site-header{
  display:flex;align-items:center;justify-content:space-between;padding:16px 40px;
  background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 1px 0 var(--hairline);
}
.site-header .logo{
  font:800 26px var(--font-head);color:var(--ink);text-decoration:none;
  display:flex;align-items:center;gap:10px;
}
.site-header .logo img{height:52px;width:auto;display:block}
.site-nav{display:flex;gap:30px;font:700 15px var(--font-body)}
.site-nav a{color:var(--ink);text-decoration:none}
.site-nav a.active{color:var(--brand)}
.header-pill{
  background:var(--brand);color:#fff;padding:11px 24px;border-radius:999px;
  font:800 14px var(--font-head);text-decoration:none;white-space:nowrap;
}

/* ---- buttons ----------------------------------------------------------- */

.pill-btn{
  border-radius:999px;font-family:var(--font-head);font-weight:800;
  text-decoration:none;display:inline-block;border:none;cursor:pointer;
}
.pill-btn--brand{background:var(--brand);color:#fff}
.pill-btn--dark{background:var(--ink);color:#fff}
.pill-btn--light{background:#fff;color:var(--ink)}
.pill-btn--ghost{background:var(--bg);color:var(--ink);border:2px solid var(--hairline)}

.pill-btn--sm{padding:12px 22px;font-size:14px}
.pill-btn--md{padding:13px 24px;font-size:14px}
.pill-btn--lg{padding:14px 26px;font-size:15px}
.pill-btn--xl{padding:16px 28px;font-size:16px}

/* ---- section / band layout primitives ---------------------------------- */

.section{max-width:1200px;margin:0 auto;padding:100px 40px}
.section--narrow{max-width:1100px}
.section--article{max-width:900px}
.section--legal{max-width:760px}
.section--wide{max-width:1300px}
.section--flush-bottom{padding-bottom:0}
.section--pad-60{padding:60px 40px}
.section--pad-80{padding:80px 40px}

.section-inner{max-width:1200px;margin:0 auto}

.band{background:var(--band-bg)}
.home-band{padding:100px 40px}

.section-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}

.cta-row{display:flex;gap:16px;flex-wrap:wrap}
.cta-row--tight{gap:14px}

/* ---- eyebrow / headings ------------------------------------------------- */

.eyebrow{
  font:800 13px var(--font-head);color:var(--brand);letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:10px;
}
.eyebrow--alt{color:var(--brand-dark)}
.eyebrow--center{text-align:center}

.h-hero-lg{font:800 58px/1.05 var(--font-head);margin:0 0 16px}
.h-hero{font:800 48px/1.1 var(--font-head);margin:0 auto 16px;max-width:700px;text-align:center}
.h2-lg{font:800 40px/1.1 var(--font-head);margin:0 0 20px}
.h2-lg--center{text-align:center;margin:0 0 44px}
.h2-md{font:800 36px/1.15 var(--font-head);margin:0 0 20px}
.h2{font:800 30px/1.15 var(--font-head);margin:0 0 14px}
.h2-sm{font:800 22px var(--font-head);margin:0 0 12px}

.body-copy{font:500 17px/1.7 var(--font-body);color:var(--muted);margin:0 0 28px}
.body-copy--tight{margin:0 0 16px}
.body-copy--mb-20{margin:0 0 20px}
.body-copy--mb-24{margin:0 0 24px}
.body-copy--flush{margin:0}
.section-photo{width:100%;border-radius:28px;box-shadow:0 20px 50px -20px rgba(0,0,0,.3)}

/* ---- cards --------------------------------------------------------------- */

.card{background:#fff;box-shadow:0 10px 30px -18px rgba(0,0,0,.25)}
.card--lg{border-radius:28px;box-shadow:0 20px 50px -20px rgba(0,0,0,.25)}
.card--md{border-radius:24px;overflow:hidden}
.card img{width:100%;object-fit:cover;display:block}
.card .card-body{padding:18px}

.tag-pill{
  font:800 11px var(--font-head);padding:5px 12px;border-radius:999px;
  letter-spacing:.05em;text-transform:uppercase;
}
.tag-pill--gold{background:var(--gold);color:var(--ink);font-size:12px;padding:6px 14px}
.tag-pill--tint{background:var(--tag-bg);color:var(--brand-dark)}

.stash-card{
  background:#fff;border-radius:26px;overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;box-shadow:0 12px 30px -20px rgba(0,0,0,.3);
}
.stash-card img{width:100%;height:190px;object-fit:cover;display:block}
.stash-card .stash-card-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.stash-card .stash-card-meta{display:flex;gap:10px;align-items:center}
.stash-card .stash-card-meta span:last-child{font:700 12px var(--font-body);color:var(--meta-dim)}
.stash-card h3{font:800 21px/1.2 var(--font-head);margin:0}
.stash-card p{font:500 15px/1.6 var(--font-body);color:var(--muted);margin:0}
.stash-card--related img{height:180px}
.stash-card--related h3{font:800 20px/1.25 var(--font-head)}

/* ---- footer -------------------------------------------------------------- */

.site-footer{background:var(--ink);color:#fff;padding:64px 40px 28px}
.footer-grid{
  max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
}
.footer-grid .footer-logo{margin-bottom:16px}
.footer-grid .footer-logo img{height:118px;width:auto;display:block}
.footer-grid .footer-blurb{font:500 14px/1.6 var(--font-body);opacity:.7;max-width:280px}
.footer-grid .footer-facebook{color:#fff;opacity:.8;font:700 14px var(--font-body);text-decoration:none}
.footer-grid .footer-col-heading{font:800 15px var(--font-head);margin:0 0 12px}
.footer-grid .footer-address{font:600 14px/1.7 var(--font-body);opacity:.7;margin:0}
.footer-grid .footer-address a{color:#fff;text-decoration:none}
.footer-grid p{font:600 14px/1.7 var(--font-body);margin:0}
.footer-grid .footer-giving p{font:600 14px/1.7 var(--font-body);opacity:.7;margin:0 0 8px}
.footer-grid .footer-giving a{
  color:#fff;opacity:.8;font:700 13px var(--font-body);text-decoration:none;
}
.footer-grid .footer-giving a.block{display:block}
.footer-bottom{
  max-width:1200px;margin:48px auto 0;border-top:1px solid rgba(255,255,255,.12);
  padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:12px 28px;font:600 13px var(--font-body);
}
.footer-bottom .footer-copyright{opacity:.5}
.footer-bottom .footer-legal-links{display:flex;gap:24px}
.footer-bottom .footer-legal-links a{color:#fff;opacity:.7;text-decoration:none}

/* ---- legal article pages (Privacy / Terms / Accessibility) --------------- */

.legal-article{max-width:760px;margin:0 auto;padding:64px 40px 90px}
.legal-article h1{font:800 44px/1.1 var(--font-head);margin:0 0 12px}
.legal-article .meta{
  font:600 15px var(--font-body);color:var(--meta);margin:0 0 36px;
  padding-bottom:28px;border-bottom:1px solid var(--hairline);
}
.legal-article p{font:400 18px/1.8 var(--font-body);color:var(--legal-body);margin:0 0 28px}
.legal-article p.intro{margin-bottom:16px}
.legal-article h2{font:800 26px/1.2 var(--font-head);margin:40px 0 14px}
.legal-article ul{
  font:400 18px/1.8 var(--font-body);color:var(--legal-body);margin:0 0 28px;
  padding-left:24px;display:flex;flex-direction:column;gap:8px;
}
.legal-article .contact-card{background:#fff;border-radius:24px;padding:32px;margin-top:44px}
.legal-article .contact-card h2{margin:0 0 12px}
.legal-article .contact-card p{
  font:500 17px/1.7 var(--font-body);color:var(--muted);margin:0 0 18px;
}

/* ---- long-form article body (Stash Post) ---------------------------------- */

.article-body p{font:400 19px/1.8 var(--font-body);color:var(--legal-body);margin:0 0 24px}
.article-body h2{font:800 30px/1.2 var(--font-head);margin:44px 0 16px}
.article-body ul{
  font:400 19px/1.8 var(--font-body);color:var(--legal-body);margin:0 0 24px;
  padding-left:24px;display:flex;flex-direction:column;gap:8px;
}
.article-body blockquote{
  margin:36px 0;padding:28px 32px;background:var(--band-bg);border-radius:22px;
}
.article-body blockquote p{
  font:600 22px/1.5 var(--font-body);margin:0;text-wrap:pretty;color:var(--ink);
}

/* ---- Home page ------------------------------------------------------------ */

.home-hero{position:relative;height:640px;overflow:hidden}
.home-hero img{width:100%;height:100%;object-fit:cover;display:block}
.home-hero .home-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(30,18,10,.82) 5%,rgba(30,18,10,.35) 55%,rgba(30,18,10,.15) 100%);
}
.home-hero .home-hero-content{
  position:absolute;left:0;right:0;bottom:0;padding:56px 40px 48px;color:#fff;max-width:820px;
}
.home-hero .hero-badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--ink);
  font:800 13px var(--font-head);padding:7px 16px;border-radius:999px;margin-bottom:18px;
}
.home-hero p{font:500 19px/1.5 var(--font-body);margin:0 0 28px;max-width:600px;opacity:.95}

.home-menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.home-menu-grid .card-body div:first-child{font:800 18px var(--font-head);margin-bottom:4px}
.home-menu-grid .card-body div:last-child{font:600 14px var(--font-body);color:var(--muted)}
.home-menu-grid img{height:170px}
.menu-cta{text-align:center;margin-top:40px}

.home-locations-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.home-locations-grid .card{border-radius:28px;padding:36px}
.home-locations-grid img{height:200px;border-radius:20px;margin-bottom:18px}
.home-locations-grid .location-name{font:800 26px var(--font-head);margin-bottom:8px}
.home-locations-grid p{font:600 16px/1.6 var(--font-body);color:var(--muted);margin:0 0 18px}

/* ---- About page ------------------------------------------------------------ */

.about-hero{padding:80px 40px 20px;text-align:center}
.about-hero h1{max-width:700px}

.about-signoff{font:800 17px var(--font-head);color:var(--ink)}
.about-cta{font:800 15px var(--font-head);margin:0}

/* links typed into an About section body render as pill buttons:
   the first link is brand-coloured, every following link is dark.
   (put the links in the SAME paragraph so they are siblings) */
.about-section-body a{
  display:inline-block;border-radius:999px;padding:13px 24px;
  font:800 14px var(--font-head);text-decoration:none;line-height:1;
  margin:18px 12px 0 0;background:var(--brand);color:#fff;
}
.about-section-body a:hover{color:#fff}
.about-section-body a ~ a{background:var(--ink)}

.about-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.about-photo-pair img{width:100%;height:280px;object-fit:cover;border-radius:24px}
.about-photo-pair img:first-child{margin-top:40px}

.about-charity img{width:100%;max-width:440px;justify-self:center;display:block}

/* ---- Locations page --------------------------------------------------------- */

.locations-hero{padding:80px 40px 20px;text-align:center}
.locations-hero h1{max-width:700px}

.locations-grid{margin:60px auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.locations-grid .card{border-radius:32px;overflow:hidden}
.locations-grid .card img{height:280px}
.locations-grid .card-body{padding:36px}
.locations-grid h2{font:800 30px var(--font-head);margin:0 0 14px}
.locations-grid p{font:600 16px/1.7 var(--font-body);color:var(--muted);margin:0 0 20px}
.locations-grid .location-address{font:600 16px/1.7 var(--font-body);color:var(--muted);margin:0 0 20px}

.locations-cta-band{padding:70px 40px;margin-top:40px}
.locations-cta-band .inner{max-width:900px;margin:0 auto;text-align:center}
.locations-cta-band h2{font:800 32px/1.15 var(--font-head);margin:0 0 16px}
.locations-cta-band p{font:500 17px/1.7 var(--font-body);color:var(--muted);margin:0 0 24px}
.locations-cta-band .cta-row{justify-content:center}

/* ---- Gallery page ------------------------------------------------------------ */

.gallery-hero{padding:80px 40px 20px;text-align:center}
.gallery-hero h1{max-width:700px}
.gallery-hero p{font:500 17px/1.6 var(--font-body);color:var(--muted);max-width:600px;margin:0 auto}

.gallery-masonry{margin:40px auto 100px;padding:0 40px;columns:4;column-gap:20px}
.gallery-masonry img{
  width:100%;border-radius:18px;margin:0 0 20px;display:block;break-inside:avoid;
  box-shadow:0 10px 24px -16px rgba(0,0,0,.3);
}

/* ---- Stash / Stash Post ------------------------------------------------------- */

.stash-hero{padding:80px 40px 10px;text-align:center}
.stash-hero h1{max-width:700px}
.stash-hero p{font:500 17px/1.6 var(--font-body);color:var(--muted);max-width:620px;margin:0 auto}

.stash-featured-wrap{max-width:1200px;margin:0 auto;padding:50px 40px 20px}
.stash-listing-wrap{max-width:1200px;margin:0 auto;padding:40px 40px 100px}

.featured-post{
  display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center;
  background:#fff;border-radius:32px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.25);
}
.featured-post img{width:100%;height:100%;min-height:380px;object-fit:cover;display:block}
.featured-post .featured-post-body{padding:44px 44px 44px 0}
.featured-post .featured-post-meta{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.featured-post .featured-post-meta span:last-child{font:700 13px var(--font-body);color:var(--meta)}
.featured-post h2{font:800 32px/1.15 var(--font-head);margin:0 0 14px}
.featured-post p{font:500 17px/1.7 var(--font-body);color:var(--muted);margin:0 0 20px}
.featured-post .featured-post-cta{font:800 15px var(--font-head);color:var(--brand)}

.stash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

.blog-pagination{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:60px}
.blog-pagination-link{font:800 14px var(--font-head);color:var(--brand);text-decoration:none}
.blog-pagination-link.is-disabled{color:var(--meta);opacity:.45;pointer-events:none}
.blog-pagination-status{font:700 13px var(--font-body);color:var(--meta)}

.newsletter-band{padding:70px 40px}
.newsletter-band .inner{max-width:760px;margin:0 auto;text-align:center}
.newsletter-band h2{font:800 32px/1.15 var(--font-head);margin:0 0 14px}
.newsletter-band p{font:500 17px/1.7 var(--font-body);color:var(--muted);margin:0 0 24px}

.related-posts{background:var(--band-bg);padding:70px 40px}
.related-posts .inner{max-width:1200px;margin:0 auto}
.related-posts h2{font:800 30px var(--font-head);margin:0 0 28px}
.newsletter-form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.email-input{
  padding:14px 20px;border-radius:999px;border:2px solid var(--dotted);
  font:600 15px var(--font-body);min-width:280px;background:#fff;color:var(--ink);
}
.pill-btn:disabled{opacity:.6;cursor:default}
.pill-btn.is-loading{position:relative;color:transparent}
.pill-btn.is-loading::after{
  content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  color:#fff;animation:pill-spin .6s linear infinite;
}
@keyframes pill-spin{to{transform:rotate(360deg)}}

.newsletter-message{font:600 14px var(--font-body);margin:14px 0 0}
.newsletter-message:empty{display:none}
.newsletter-message--error{color:#c0392b}
.newsletter-message--success{color:#1e824c;margin-top: 15px;}
.newsletter-recaptcha-note{font:500 12px/1.5 var(--font-body);color:var(--meta);margin:12px auto 0;max-width:460px}
.newsletter-recaptcha-note a{color:var(--meta);text-decoration:underline}

.post-back-link{font:700 14px var(--font-body);text-decoration:none;display:inline-block;margin-bottom:24px}
.post-header{max-width:760px;margin:0 auto;padding:56px 40px 20px}
.post-header .post-meta{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.post-header .post-meta span:last-child{font:700 13px var(--font-body);color:var(--meta)}
.post-header h1{font:800 46px/1.1 var(--font-head);margin:0 0 20px;text-wrap:pretty}
.post-header .dek{
  font:500 21px/1.6 var(--font-body);color:var(--muted);margin:0 0 28px;text-wrap:pretty;
}
.post-byline{
  display:flex;align-items:center;gap:12px;padding-bottom:32px;
  border-bottom:1px solid var(--hairline);
}
.post-byline .avatar{
  width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font:800 17px var(--font-head);flex:none;
}
.post-byline .name{font:800 15px var(--font-head)}
.post-byline .role{font:600 13px var(--font-body);color:var(--meta)}

.post-figure{max-width:1100px;margin:40px auto;padding:0 40px}
.post-figure img{width:100%;border-radius:28px;display:block;box-shadow:0 20px 50px -24px rgba(0,0,0,.3)}
.post-figure figcaption{font:600 14px var(--font-body);color:var(--meta);text-align:center;margin-top:14px}

.post-article{max-width:760px;margin:0 auto;padding:20px 40px 80px}
.post-article .cta-row{margin-top:36px;padding-top:32px;border-top:1px solid var(--hairline)}

/* ---- Menu page ------------------------------------------------------------------ */

.menu-hero{position:relative;height:340px;overflow:hidden}
.menu-hero img{width:100%;height:100%;object-fit:cover;display:block}
.menu-hero .menu-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(30,18,10,.8) 10%,rgba(30,18,10,.25) 100%);
}
.menu-hero .menu-hero-content{
  position:absolute;left:0;right:0;bottom:0;padding:40px;text-align:center;color:#fff;
}
.menu-hero .eyebrow{color:var(--gold)}
.menu-hero h1{font:800 46px/1.1 var(--font-head);margin:0}

.menu-pdf-links{display:flex;justify-content:center;gap:16px;margin:36px 0;flex-wrap:wrap}

.menu-tabs-bar{
  position:sticky;top:74px;z-index:15;background:var(--sticky-bg);backdrop-filter:blur(6px);
  display:flex;justify-content:center;gap:12px;padding:14px 40px;border-bottom:1px solid var(--hairline);
}
.tab-btn{
  padding:12px 28px;border-radius:999px;font:800 15px var(--font-head);
  border:none;cursor:pointer;background:transparent;color:var(--ink);
}
.tab-btn.active{background:var(--brand);color:#fff}

.menu-categories{max-width:900px;margin:0 auto;padding:50px 40px 110px}
.menu-category{margin-bottom:48px}
.menu-category-heading{
  font:800 26px var(--font-head);color:var(--brand);margin:0 0 20px;
  border-bottom:3px solid var(--gold);padding-bottom:10px;
}
.menu-item{margin-bottom:20px}
.menu-item .menu-item-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.menu-item .menu-item-name{font:800 17px var(--font-head)}
.menu-item .leader{flex:1;border-bottom:2px dotted var(--dotted);min-width:16px;margin-bottom:5px}
.menu-item .price{font:800 17px var(--font-head);color:var(--brand-dark);white-space:nowrap}
.menu-item .desc{font:500 15px/1.6 var(--font-body);color:var(--muted);margin:4px 0 0}
.menu-category-note{font:600 14px/1.5 var(--font-body);color:var(--muted);font-style:italic;margin:-10px 0 20px}
.menu-item-tags{font:700 11px var(--font-head);color:var(--gold);text-transform:uppercase;letter-spacing:.04em;margin-left:8px;white-space:nowrap}
.menu-item-addons{list-style:none;margin:6px 0 0;padding:0}
.menu-item-addons li{display:flex;justify-content:space-between;gap:16px;max-width:340px;font:500 13px/1.7 var(--font-body);color:var(--muted)}
.menu-item-addons .addon-price{color:var(--brand-dark);font-weight:700;white-space:nowrap}

.location-address p {margin-bottom: 0px }
.mt-1{margin-top: 10px;}

/* ---- 404 / Sitemap utility pages ------------------------------------------------ */

.quick-links-section{max-width:700px;margin:0 auto;padding:0 40px 100px;text-align:center}
.quick-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;font:700 15px var(--font-body)}
.cta-row--center{justify-content:center}
.sotial-links{margin-top: 15px}
.footer-grid .footer-address p {    color: #fff;}

/* ---- Scroll animations (AOS) ------------------------------------------------- */
/* Keep sideways reveal animations from briefly widening the page. `clip` (not
   `hidden`) so the sticky header / menu tab bar keep working. */
html { overflow-x: hidden; overflow-x: clip; }

/* Reduced-motion safety net — also covers the case where AOS' CSS loads but its
   JS does not, leaving [data-aos] elements stuck at opacity 0. */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}