/* ===========================================================================
   Chrome: promo bar, the red header with its Menu panel (Pizza Ranch's tiles),
   the mobile drawer, the sticky call/order bar and the footer.

   None of this lives inside `.elementor`, so plain selectors are enough here.
   =========================================================================== */

/* ------------------------------------------------------------- promo bar */

.promo-bar{
  background:var(--red-ink);
  color:var(--on-dark);
  font-size:.9rem;
  position:relative;z-index:101;
}
.promo-in{
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  min-height:var(--promo-h);
}
.promo-text{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0;
  font-weight:500;line-height:1.3;padding:.35rem 0;
}
.promo-text > .ico{color:var(--saffron);font-size:1.05rem}
.promo-text .code-chip{color:var(--saffron);padding:.18rem .5rem;font-size:.8rem}
.promo-text .code-k{color:var(--on-dark-2)}
.promo-link{
  color:var(--white);font-family:var(--font-cond);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:.82rem;text-decoration:none;
  display:inline-flex;align-items:center;gap:.3rem;
}
.promo-link:hover{color:var(--saffron)}
.util-links{display:flex;align-items:center;gap:1.35rem;flex:none}
.util-links a{
  color:var(--on-dark-2);text-decoration:none;
  font-family:var(--font-cond);font-weight:500;font-size:.86rem;letter-spacing:.07em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.4rem;
}
.util-links a:hover{color:var(--white)}
.util-links .util-tel{color:var(--white);font-weight:600}

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

.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--red);
  color:var(--white);
  box-shadow:0 6px 18px -10px rgba(60,10,4,.55);
  transition:box-shadow .25s var(--ease);
}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
@media (max-width:600px){.admin-bar .site-header{top:0}}

/* the bar may run wider than the page's content: on big screens its type
   grows faster than --container does */
.header-in{
  max-width:max(var(--container), 1500px);
  display:flex;align-items:center;gap:clamp(.75rem, 1.6vw, 2rem);
  height:var(--header-h);
  transition:height .25s var(--ease);
  position:static;
}

/* The lockup hangs from the bar on a cream badge — the brand red script
   would vanish on the red bar, and the badge is the shop sign. */
.brand{
  position:relative;align-self:flex-start;flex:none;
  width:clamp(150px, 11.5vw, 186px);height:var(--header-h);
  z-index:3;text-decoration:none;
  transition:width .25s var(--ease),height .25s var(--ease);
}
.brand-badge{
  position:absolute;left:0;top:0;width:100%;
  background:var(--paper);
  border-radius:0 0 24px 24px;
  padding:12px 13px 13px;
  box-shadow:0 14px 26px -12px rgba(60,10,4,.6), inset 0 -4px 0 var(--cream-2);
  transition:padding .25s var(--ease);
}
.brand-badge::before{               /* a stitched rim, like a patch */
  content:"";position:absolute;inset:5px 5px 6px;border-radius:0 0 19px 19px;
  border:1.5px dashed rgba(210,61,45,.35);border-top:0;pointer-events:none;
}
.brand img{width:100%;height:auto;display:block}

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

.nav{align-self:stretch;display:flex}
.nav-list{display:flex;align-items:stretch;gap:clamp(.1rem, .9vw, 1.1rem);list-style:none;margin:0;padding:0}
.nav-item{position:relative;display:flex;align-items:center;list-style:none}
/* The Menu panel spans the whole header, not this item: let it resolve its
   position against the header. The item stays full header height so the
   pointer never crosses a gap on its way down into the panel. */
.nav-item.has-mega{position:static}
.nav-link{
  position:relative;display:inline-flex;align-items:center;gap:.25rem;
  padding:.4rem .55rem;
  color:var(--white);text-decoration:none;white-space:nowrap;
  font-family:var(--font-cond);font-weight:600;font-size:clamp(1.02rem, .7rem + .55vw, 1.24rem);
  letter-spacing:.045em;text-transform:uppercase;line-height:1;
}
.nav-link::after{
  content:"";position:absolute;left:.55rem;right:.55rem;bottom:-.1rem;height:3px;border-radius:3px;
  background:var(--white);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav-link:hover,.nav-link:focus-visible{color:var(--white)}
.nav-link:hover::after,
.nav-item.is-current > .nav-link::after,
.nav-item.is-open > .nav-link::after{transform:scaleX(1)}
.mega-toggle{
  display:inline-grid;place-items:center;width:30px;height:30px;margin-left:-.35rem;
  background:transparent;border:0;border-radius:6px;color:var(--white);cursor:pointer;padding:0;
}
.mega-toggle .ico{font-size:1.15rem;transition:transform .25s var(--ease)}
.nav-item.is-open .mega-toggle .ico{transform:rotate(180deg)}
.mega-toggle:hover{background:rgba(255,255,255,.12)}

/* ----------------------------------------------------- the Menu panel */

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--red);
  padding:.5rem 0 2rem;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:0 34px 44px -26px rgba(60,10,4,.6);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s var(--ease),transform .28s var(--ease-out),visibility 0s linear .28s;
  z-index:2;
}
.nav-item.is-open > .mega{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .22s var(--ease),transform .28s var(--ease-out),visibility 0s;
}
/* Keyboard: the panel opens from its toggle button (aria-expanded), not on
   focus — otherwise tabbing past "Menu" would walk through every tile. The
   "Menu" link itself still goes to the full menu page. */
.mega-in{max-width:1180px}
.mega-grid{
  list-style:none;margin:0 auto;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
}
.mega-grid > li{list-style:none;flex:0 0 calc((100% - 5 * 14px) / 6)}
/* `.nav a` styling reaches every link in the panel; these rules carry the
   same weight plus a class so the panel never inherits the nav's caps,
   nowrap and underline by accident of source order. */
.nav a.mega-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;
  min-height:150px;height:100%;padding:1.25rem .75rem 1.1rem;
  background:var(--red-deep);border-radius:var(--r);
  color:var(--white);text-decoration:none;text-align:center;
  font-family:var(--font-cond);font-weight:600;font-size:1.02rem;letter-spacing:.05em;
  text-transform:uppercase;white-space:normal;line-height:1.15;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);
  transition:background-color .2s var(--ease),transform .2s var(--ease);
}
.nav a.mega-tile::after{content:none}
.nav a.mega-tile .mi{width:58px;height:58px;transition:transform .35s var(--spring)}
.nav a.mega-tile:hover{background:var(--red-ink);transform:translateY(-3px)}
.nav a.mega-tile:hover .mi{transform:rotate(-8deg) scale(1.08)}
.nav a.mega-tile.is-deals{background:var(--saffron);color:var(--ink)}
.nav a.mega-tile.is-deals:hover{background:var(--white);color:var(--red-deep)}
.mega-foot{
  display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;
  margin-top:1.4rem;padding-top:1.1rem;border-top:2px dashed rgba(255,255,255,.28);
}
.nav a.mega-more{
  color:var(--white);text-decoration:none;text-transform:uppercase;white-space:nowrap;
  font-family:var(--font-cond);font-weight:600;letter-spacing:.06em;font-size:.98rem;
  display:inline-flex;align-items:center;gap:.4rem;
}
.nav a.mega-more::after{content:none}
.nav a.mega-more:hover{color:var(--saffron)}

/* --------------------------------------------------------- header actions */

/* nothing on the right ever squeezes: the menu gives way first, and the
   address only shows where the whole row fits (1600px up) */
.header-act{margin-left:auto;display:flex;align-items:center;gap:clamp(.75rem, 1.4vw, 1.5rem);flex:none}
.header-act > *{flex:none}
.find-us{
  display:none;align-items:center;gap:.6rem;
  padding:.3rem 1.2rem;border-inline:2px dashed rgba(255,255,255,.38);
  color:var(--white);text-decoration:none;line-height:1.15;
}
.find-us .ico{font-size:1.65rem;flex:none}
.find-us-k{display:block;font-family:var(--font-cond);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--white)}
.find-us-v{display:block;font-family:var(--font-cond);font-weight:600;font-size:1.02rem;letter-spacing:.03em;white-space:nowrap}
.find-us:hover{color:var(--white)}
.find-us:hover .find-us-v{text-decoration:underline;text-underline-offset:4px}

.btn-order{
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:54px;padding:.5rem 1.15rem .5rem .8rem;
  background:var(--white);color:var(--red-deep);border-radius:var(--r-sm);
  font-family:var(--font-cond);font-weight:700;font-size:1.12rem;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  box-shadow:0 8px 20px -10px rgba(60,10,4,.7);
  transition:transform .18s var(--ease),background-color .18s var(--ease);
}
.btn-order .mi{width:34px;height:34px;color:var(--red)}
.btn-order:hover{background:var(--paper);color:var(--red);transform:translateY(-2px)}

/* the store's cart (only printed once WooCommerce is active) */
.hdr-cart{
  position:relative;flex:none;width:48px;height:48px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:rgba(0,0,0,.16);color:var(--white);text-decoration:none;font-size:1.35rem;
  transition:background-color .18s var(--ease);
}
.hdr-cart:hover{background:rgba(0,0,0,.28);color:var(--white)}
.hdr-cart-n{
  position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--saffron);color:var(--ink);font-family:var(--font-cond);font-weight:700;font-size:.78rem;
  display:grid;place-items:center;line-height:1;box-shadow:0 0 0 2px var(--red);
}
.hdr-cart-n.is-empty{display:none}
.shop-head-t{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:var(--lh-display);margin:0;color:var(--white)}
.shop-head-t a{color:inherit;text-decoration:none}
.shop-wrap{background:var(--paper)}

.burger{
  display:none;position:relative;width:48px;height:48px;flex:none;
  background:rgba(0,0,0,.12);border:0;border-radius:var(--r-sm);cursor:pointer;color:var(--white);
}
.burger > span:first-child,
.burger > span:first-child::before,
.burger > span:first-child::after{
  position:absolute;left:13px;width:22px;height:2.5px;border-radius:2px;background:currentColor;content:"";
}
.burger > span:first-child{top:23px}
.burger > span:first-child::before{left:0;top:-7px}
.burger > span:first-child::after{left:0;top:7px}

/* scrolled: tighter bar, smaller badge */
.site-header.is-scrolled{--header-h:72px}
.site-header.is-scrolled .brand{width:136px}
.site-header.is-scrolled .brand-badge{padding:9px 10px 10px}

@media (min-width:1600px){
  .find-us{display:flex}
}
@media (max-width:1024px){
  :root{--header-h:72px}
  .nav{display:none}
  .burger{display:block}
  .brand{width:132px}
  .site-header.is-scrolled{--header-h:64px}
  .site-header.is-scrolled .brand{width:116px}
  .btn-order{min-height:48px;font-size:1rem;padding:.45rem .9rem .45rem .6rem}
  .btn-order .mi{width:28px;height:28px}
}
@media (max-width:767px){
  .promo-bar{font-size:.84rem}
  .util-links{display:none}
  .promo-in{justify-content:center;text-align:center}
  .promo-text{justify-content:center}
}
@media (max-width:400px){
  :root{--header-h:66px}
  .brand{width:112px}
  .btn-order .btn-order-label{display:none}
  .btn-order{padding:.45rem .6rem}
}

/* ---------------------------------------------------------------- drawer */

.drawer{position:fixed;inset:0;z-index:300;visibility:hidden}
/* `:target` opens it with no JavaScript at all (the burger is a #nav-drawer link) */
.drawer.is-open,.drawer:target{visibility:visible}
.drawer:target .drawer-shade{opacity:1}
.drawer:target .drawer-panel{transform:none}
.drawer-shade{
  position:absolute;inset:0;background:rgba(30,12,8,.55);opacity:0;
  transition:opacity .3s var(--ease);border:0;padding:0;width:100%;cursor:pointer;
}
.drawer.is-open .drawer-shade{opacity:1}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);
  background:var(--red) var(--pat-doodle);color:var(--white);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(102%);transition:transform .38s var(--ease-out);
  display:flex;flex-direction:column;gap:1.4rem;
  padding:1rem clamp(16px, 5vw, 28px) calc(1.5rem + env(safe-area-inset-bottom));
}
.drawer.is-open .drawer-panel{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between}
.drawer-brand{display:block;width:140px;background:var(--paper);border-radius:16px;padding:9px 11px}
.drawer-brand img{width:100%;height:auto}
.drawer-close{
  width:48px;height:48px;border:0;border-radius:var(--r-sm);background:rgba(0,0,0,.16);
  color:var(--white);display:grid;place-items:center;cursor:pointer;font-size:1.4rem;text-decoration:none;
}
.drawer-close:hover{color:var(--white);background:rgba(0,0,0,.26)}
.drawer-nav ul{list-style:none;margin:0;padding:0}
.drawer-nav li{list-style:none;border-bottom:1px solid rgba(255,255,255,.18)}
.drawer-nav a{
  display:flex;align-items:center;justify-content:space-between;padding:.85rem 0;
  color:var(--white);text-decoration:none;
  font-family:var(--font-cond);font-weight:600;font-size:1.45rem;letter-spacing:.04em;text-transform:uppercase;
}
.drawer-nav a .ico{opacity:.7}
.drawer-nav li.is-current > a{color:var(--saffron)}
.drawer-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;margin:0;padding:0}
.drawer-cats li{list-style:none}
.drawer-cats a{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.8rem .3rem .7rem;
  background:var(--red-deep);border-radius:var(--r-sm);color:var(--white);text-decoration:none;text-align:center;
  font-family:var(--font-cond);font-weight:600;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.15;
}
.drawer-cats .mi{width:38px;height:38px}
.drawer-label{font-family:var(--font-cond);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);margin:0 0 .6rem}
.drawer-foot{margin-top:auto;display:grid;gap:.6rem;font-size:.98rem}
.drawer-foot a{color:var(--white);text-decoration:none;display:flex;align-items:center;gap:.6rem}
.drawer-foot .ico{font-size:1.15rem;color:var(--saffron-light)}
.drawer-foot p{display:flex;align-items:flex-start;gap:.6rem;margin:0;color:var(--on-dark)}
.drawer-order{margin:0}
body.drawer-open{overflow:hidden}

/* --------------------------------------------------------------- callbar */

.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--paper);
  box-shadow:0 -10px 28px -14px rgba(42,26,20,.45);
  transform:translateY(110%);transition:transform .35s var(--ease-out);
}
.callbar.is-on{transform:none}
.callbar .btn{flex:1;min-height:52px}
.callbar .btn-ghost{border-color:var(--ink);color:var(--ink)}
@media (max-width:767px){
  .callbar{display:flex}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}

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

.site-footer{background-color:var(--ink);background-image:var(--pat-grid),var(--glow-ink);color:var(--on-dark-2);font-size:.98rem}
/* The band's lower edge is cut to a soft curve, so the footer's own ground
   (dot grid and all) shows through below it, already lined up. */
.footer-cta{
  position:relative;background:var(--red) var(--pat-doodle);color:var(--white);
  padding:clamp(3rem, 2rem + 3vw, 4.5rem) 0 calc(clamp(3rem, 2rem + 3vw, 4.5rem) + var(--edge-h) * .5);overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--edge-h) + 1px) no-repeat,
               var(--edge-curve) 0 100% / 100% var(--edge-h) no-repeat;
          mask:linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--edge-h) + 1px) no-repeat,
               var(--edge-curve) 0 100% / 100% var(--edge-h) no-repeat;
}
.footer-cta-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1.5rem, 3vw, 3rem)}
.footer-chef{width:clamp(92px, 9vw, 132px);height:auto;filter:drop-shadow(0 10px 18px rgba(60,10,4,.4))}
.footer-cta-k{font-family:var(--font-script);font-size:var(--fs-kicker);color:var(--saffron-light);margin:0;line-height:1.1}
.footer-cta-t{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:var(--lh-display);
  margin:.2rem 0 0;color:var(--white)}
.footer-cta-act{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:flex-end}

.footer-main{
  display:grid;grid-template-columns:1.35fr 1fr 1fr 1.25fr;gap:clamp(2rem, 3vw, 3.5rem);
  padding-top:clamp(3.5rem, 2.5rem + 3vw, 5rem);padding-bottom:3rem;
}
.footer-logo{width:min(250px,100%);height:auto;margin-bottom:1.25rem}
.footer-blurb{max-width:36ch;color:var(--on-dark-2);margin-bottom:1.4rem}
.footer-social{display:flex;gap:.6rem}
.footer-social a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,246,227,.08);color:var(--on-dark);text-decoration:none;
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.footer-social a .ico{font-size:1.25rem}
.footer-social a:hover{background:var(--red);color:var(--white);transform:translateY(-2px)}
.site-footer .footer-head{
  font-family:var(--font-cond);font-weight:600;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--saffron);margin:0 0 1.1rem;
}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer-links li{list-style:none}
.footer-links a{color:var(--on-dark);text-decoration:none}
.footer-links a:hover{color:var(--white);text-decoration:underline}
.footer-visit p{margin:0 0 .9rem;display:flex;gap:.6rem;align-items:flex-start;color:var(--on-dark)}
.footer-visit p .ico{color:var(--saffron);font-size:1.1rem;margin-top:.2rem}
.footer-visit a{color:var(--on-dark);text-decoration:none}
.footer-visit a:hover{color:var(--white);text-decoration:underline}
.footer-hours{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:.4rem}
.footer-hours th,.footer-hours td{padding:.28rem 0;text-align:left;font-weight:400;color:var(--on-dark-2)}
.footer-hours td{text-align:right;color:var(--on-dark)}
.footer-hours tr.is-today th,.footer-hours tr.is-today td{color:var(--saffron);font-weight:600}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-top:1.4rem;padding-bottom:1.6rem;border-top:1px solid rgba(255,246,227,.14);
  font-size:.88rem;color:var(--on-dark-2);
}
.footer-bottom p{margin:0}
.footer-legal{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center}
.footer-legal a{color:var(--on-dark-2);text-decoration:none}
.footer-legal a:hover{color:var(--white)}
.ssq-credit{color:var(--on-dark-2);text-decoration:none}
.ssq-credit:hover{color:var(--white)}

@media (max-width:1024px){
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-cta-in{grid-template-columns:auto 1fr}
  .footer-cta-act{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:560px){
  /* phones: brand on top, the two link lists side by side, then visit */
  .footer-main{grid-template-columns:1fr 1fr;gap:2.2rem 1.25rem;padding-top:2.75rem;padding-bottom:2.25rem}
  .footer-brand,.footer-visit{grid-column:1 / -1}
  .footer-brand{text-align:center}
  .footer-logo{width:200px;margin-inline:auto}
  .footer-blurb{margin-inline:auto;font-size:.92rem}
  .footer-social{justify-content:center}
  .site-footer .footer-head{margin-bottom:.8rem}
  .footer-links{gap:.45rem;font-size:.95rem}
  .footer-visit{padding-top:1.6rem;border-top:1px solid rgba(255,246,227,.14)}
  .footer-bottom{flex-direction:column;justify-content:center;text-align:center;gap:.6rem}
  .footer-legal{justify-content:center}
  .footer-cta-in{grid-template-columns:1fr}
  .footer-chef{width:86px}
  .footer-cta-act .btn{flex:1}
}