/* Shared navigation on every Cityburger landing page. */
:root { --sn-height: 132px; }
html { scroll-padding-top: calc(var(--sn-height) + 22px); }
.sn-header, .sn-mobile-menu { font-family: Archivo, Arial, sans-serif; }
.sn-header *, .sn-mobile-menu * { box-sizing: border-box; }
.sn-header { position: fixed; inset: 0 0 auto; z-index: 70; width: 100%; color: #f2efdf; background: #b41232; box-shadow: 0 3px 18px #5a102923; }
.sn-header a, .sn-header button { -webkit-tap-highlight-color: transparent; }
.sn-header a { text-decoration: none; }
.sn-header button { font-family: inherit; }
.sn-bar { display: grid; grid-template-columns: 200px minmax(145px, 1fr) auto auto; align-items: center; gap: 18px; max-width: 1680px; min-height: var(--sn-height); margin: auto; padding: 12px 4vw; }
.sn-header .sn-brand { display: grid; place-items: center; width: 200px; height: 108px; padding: 8px 10px; border-radius: 50%; background: #f2efdf; transform: rotate(-6deg); color: #b41232; }
.sn-header .sn-brand img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.sn-header .sn-location { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; min-height: 44px; color: #f2efdf; }
.sn-header .sn-location strong { display: block; color: #ffbd11; font: 900 clamp(19px, 1.5vw, 25px)/1.05 Barlow, Impact, sans-serif; }
.sn-header .sn-location small { display: block; font-size: 9px; font-weight: 800; line-height: 1.3; letter-spacing: .035em; }
.sn-desktop-nav { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sn-header .sn-toggle, .sn-header .sn-about { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 48px; padding: 12px 13px; border: 1px solid transparent; border-radius: 26px; color: #f2efdf; background: transparent; font-size: 12px; line-height: 1.2; font-weight: 900; white-space: nowrap; }
.sn-header .sn-toggle svg { display: block; width: 13px; height: 13px; flex: 0 0 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.sn-header .sn-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sn-header .sn-menu-primary { min-height: 62px; padding: 14px 23px; border: 2px solid #ffbd11; background: #ffbd11; color: #b41232; font: 900 24px/1 Barlow, Impact, sans-serif; box-shadow: 0 4px 0 #86182a; }
.sn-header .sn-drinks-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 12px 16px; border: 2px solid #f2efdf; border-radius: 28px; color: #f2efdf; font: 900 21px/1 Barlow, Impact, sans-serif; white-space: nowrap; }
.sn-header .sn-drinks-primary:hover, .sn-header .sn-drinks-primary[aria-current="page"] { background: #f2efdf; color: #b41232; }
.sn-header .sn-toggle:hover, .sn-header .sn-toggle[aria-expanded="true"], .sn-header .sn-about:hover { background: #ffffff14; border-color: #f2efdf66; }
.sn-header .sn-menu-primary:hover, .sn-header .sn-menu-primary[aria-expanded="true"] { background: #f2efdf; color: #b41232; border-color: #f2efdf; }
.sn-header .sn-about[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sn-header .sn-call { display: inline-flex; align-items: center; justify-content: center; justify-self: end; gap: 14px; min-height: 60px; padding: 12px 20px; border: 2px solid #f2efdf; border-radius: 38px; background: #f2efdf; color: #b41232; white-space: nowrap; }
.sn-call-copy { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.sn-call-copy small { font-size: 10px; line-height: 1.2; font-weight: 900; letter-spacing: .04em; }
.sn-call-copy strong { font-size: 16px; line-height: 1.2; font-weight: 900; }
.sn-header .sn-call > svg { display: block; width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sn-header .sn-call:hover { background: #ffbd11; border-color: #ffbd11; }
.sn-header .sn-mobile-toggle, .sn-header .sn-call-mobile { display: none; }
.sn-header :is(a, button):focus-visible { outline: 3px solid #ffbd11; outline-offset: 5px; }
.sn-header .sn-menu-primary:focus-visible, .sn-header .sn-call:focus-visible { outline-color: #f2efdf; }

/* Panels are regular disclosure navigation, so links keep their normal order. */
.sn-panel[hidden] { display: none !important; }
.sn-header .sn-panel { position: absolute; inset: 100% 4vw auto; max-width: 1360px; max-height: calc(100dvh - var(--sn-height) - 20px); margin: 0 auto; padding: 24px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #b4123226; border-top: 4px solid #ffbd11; border-radius: 0 0 22px 22px; color: #7b182a; background: #f2efdf; box-shadow: 0 26px 45px #40102236; }
.sn-panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.sn-panel-heading > strong { font: 900 29px/1.05 Barlow, Impact, sans-serif; color: #b41232; }
.sn-panel-heading > small { font-size: 11px; line-height: 1.5; color: #7b182a; }
.sn-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
.sn-header .sn-card-link { display: grid; grid-template-columns: 110px minmax(0, 1fr) 26px; gap: 18px; align-items: center; min-width: 0; min-height: 124px; padding: 8px 20px 8px 8px; border: 2px solid #b41232; border-radius: 15px; color: #b41232; background: #fffaf2; transition: box-shadow .18s, transform .18s; }
.sn-header .sn-card-menu { background: #ffbd11; border-color: #ffbd11; }
.sn-card-link > img { display: block; width: 110px; height: 104px; object-fit: cover; border-radius: 9px; }
.sn-card-link > span { display: grid; gap: 5px; min-width: 0; }
.sn-card-link small { font-size: 10px; line-height: 1.4; font-weight: 900; letter-spacing: .05em; }
.sn-card-link strong { color: #b41232; font: 900 clamp(27px, 2vw, 34px)/1 Barlow, Impact, sans-serif; }
.sn-card-link > span > span { font-size: 12px; line-height: 1.4; }
.sn-card-link > b { font-size: 28px; font-weight: 500; }
.sn-header .sn-card-link:hover { box-shadow: 0 5px 0 #b41232; transform: translateY(-2px); }
.sn-header .sn-card-link[aria-current="page"] { box-shadow: inset 0 0 0 2px #b41232; }
.sn-food-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sn-header .sn-feature { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: stretch; min-width: 0; border: 1px solid #b4123224; border-radius: 13px; overflow: hidden; color: #7b182a; background: #fffaf2; transition: border-color .18s, box-shadow .18s; }
.sn-header .sn-feature > img { width: 120px; height: 132px; max-width: 100%; margin: 0; object-fit: cover; }
.sn-feature-copy { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-width: 0; padding: 17px 14px; }
.sn-feature-copy strong { display: block; color: #b41232; font: 900 24px/1 Barlow, Impact, sans-serif; }
.sn-feature-copy small { display: block; font-size: 11px; line-height: 1.5; color: #7b182a; }
.sn-feature-special .sn-feature-copy { background: #fff0bf; }
.sn-header .sn-feature:hover, .sn-header .sn-feature:focus-visible { border-color: #b41232; box-shadow: 0 4px 0 #b41232; }
.sn-panel-bottom > span { font-size: 10px; line-height: 1.4; font-weight: 800; letter-spacing: .04em; }
.sn-panel-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; border-top: 1px solid #b4123226; margin-top: 20px; padding-top: 18px; }
.sn-header .sn-panel-bottom > a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; line-height: 1.4; font-weight: 800; color: #b41232; }
.sn-header .sn-panel-bottom > a:hover { text-decoration: underline; text-underline-offset: 5px; }
.sn-header .sn-panel :is(a, button):focus-visible { outline-color: #b41232; }
.sn-visit-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(230px, 1fr); gap: 24px; }
.sn-header .sn-visit-photo { position: relative; display: block; min-width: 0; min-height: 228px; overflow: hidden; border-radius: 13px; background: #173e3e; color: #f2efdf; }
.sn-header .sn-visit-photo img { display: block; width: 100%; height: 100%; max-height: 270px; min-height: 228px; object-fit: cover; }
.sn-header .sn-visit-photo::after { content: ''; position: absolute; inset: 25% 0 0; background: linear-gradient(transparent, #17201ed6); pointer-events: none; }
.sn-header .sn-visit-photo > strong { position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 1; font: 900 28px/1 Barlow, Impact, sans-serif; color: #f2efdf; }
.sn-link-group { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 5px 0; }
.sn-group-label { margin-bottom: 10px; font-size: 10px; font-weight: 900; letter-spacing: .07em; color: #b41232; }
.sn-header .sn-link-group > a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; border-bottom: 1px solid #b4123224; font-size: 13px; line-height: 1.35; font-weight: 800; color: #7b182a; }
.sn-header .sn-link-group > a:hover { color: #b41232; text-decoration: underline; text-underline-offset: 4px; }
.sn-address-card { min-width: 0; border-radius: 13px; background: #ffbd11; padding: 22px; color: #7b182a; }
.sn-address-card > strong { display: block; color: #b41232; font: 900 27px/1.08 Barlow, Impact, sans-serif; }
.sn-address-card > p { margin: 6px 0 9px; font-size: 12px; line-height: 1.45; }
.sn-address-card > .sn-full-address { margin: 10px 0; color: #b41232; font: 900 25px/1.18 Barlow, Impact, sans-serif; }
.sn-header .sn-address-card > a { display: flex; align-items: center; min-height: 44px; font-size: 12px; line-height: 1.4; font-weight: 900; color: #7b182a; }
.sn-header .sn-address-card .sn-hours { margin-bottom: 5px; border-bottom: 1px solid #b4123230; font-size: 10px; letter-spacing: .035em; }
.sn-header .sn-address-card > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sn-header .sn-address-card > .sn-reserve { display: inline-flex; justify-content: center; gap: 9px; margin-top: 8px; padding: 10px 14px; border-radius: 24px; background: #b41232; color: #f2efdf; font-size: 11px; }
.sn-header .sn-nojs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; padding: 8px 4vw 16px; }
.sn-header .sn-nojs a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 800; color: #f2efdf; text-decoration: underline; }

/* Native mobile dialog, grouped into short, expandable lists. */
#sn-mobile-menu { position: fixed; inset: 12px 12px auto; width: min(540px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: 0 auto; padding: 20px; border: 0; border-radius: 22px; color: #b41232; background: #f2efdf; overflow-y: auto; overscroll-behavior: contain; }
#sn-mobile-menu::backdrop { background: #3c0719ba; backdrop-filter: blur(5px); }
#sn-mobile-menu .sn-mobile-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
#sn-mobile-menu .sn-mobile-top > strong { font: 900 27px/1.05 Barlow, Impact, sans-serif; }
#sn-mobile-menu #sn-menu-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid #b41232; border-radius: 50%; background: #f2efdf; color: #b41232; font-size: 29px; line-height: 1; }
#sn-mobile-menu a { text-decoration: none; color: #7b182a; }
#sn-mobile-menu :is(a, button, summary):focus-visible { outline: 3px solid #b41232; outline-offset: 3px; }
#sn-mobile-menu .sn-mobile-nav { display: grid; gap: 9px; }
#sn-mobile-menu .sn-mobile-nav > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 10px 3px; font-size: 14px; font-weight: 900; }
#sn-mobile-menu .sn-mobile-nav > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
#sn-mobile-menu .sn-mobile-cards { display: grid; gap: 10px; margin: 0 0 9px; }
#sn-mobile-menu .sn-mobile-card { display: grid; gap: 5px; min-height: 80px; padding: 16px; border: 2px solid #b41232; border-radius: 12px; color: #b41232; background: #fffaf2; }
#sn-mobile-menu .sn-mobile-card-menu { background: #ffbd11; border-color: #ffbd11; }
#sn-mobile-menu .sn-mobile-card strong { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 900 27px/1 Barlow, Impact, sans-serif; }
#sn-mobile-menu .sn-mobile-card strong > span { flex: 0 0 auto; }
#sn-mobile-menu .sn-mobile-card small { font-size: 12px; line-height: 1.4; }
#sn-mobile-menu .sn-mobile-card[aria-current="page"] { box-shadow: inset 0 0 0 2px #b41232; }
#sn-mobile-menu details { min-width: 0; margin: 0; border: 1px solid #b4123230; border-radius: 12px; overflow: hidden; background: #fffaf2; }
#sn-mobile-menu summary { position: relative; display: block; min-height: 54px; padding: 16px 43px 15px 15px; font-size: 15px; line-height: 1.4; font-weight: 900; list-style: none; color: #b41232; background: #ffbd11; cursor: pointer; }
#sn-mobile-menu summary::-webkit-details-marker { display: none; }
#sn-mobile-menu summary > svg { position: absolute; right: 16px; top: 20px; display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#sn-mobile-menu details[open] > summary > svg { transform: rotate(180deg); }
#sn-mobile-menu .sn-mobile-group { display: grid; gap: 0; padding: 8px 12px 12px; }
#sn-mobile-menu .sn-mobile-group > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 10px 2px; border-bottom: 1px solid #b412321f; font-size: 12px; line-height: 1.45; font-weight: 800; }
#sn-mobile-menu .sn-mobile-group > a:last-child { border-bottom: 0; }
#sn-mobile-menu .sn-mobile-group > .sn-mobile-feature { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 0; }
#sn-mobile-menu .sn-mobile-feature > img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
#sn-mobile-menu .sn-mobile-feature > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#sn-mobile-menu .sn-mobile-feature strong { font-size: 13px; line-height: 1.3; }
#sn-mobile-menu .sn-mobile-feature small { font-size: 10px; line-height: 1.4; font-weight: 500; }
#sn-mobile-menu .sn-mobile-address { border-top: 1px solid #b4123230; margin-top: 18px; padding-top: 17px; }
#sn-mobile-menu .sn-mobile-address .sn-full-address { margin: 0; font-style: normal; font-size: 13px; line-height: 1.5; font-weight: 800; color: #b41232; }
#sn-mobile-menu .sn-mobile-address > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 20px; font-weight: 900; }
#sn-mobile-menu .sn-mobile-address [data-status] { display: block; margin: 3px 0 0; font-size: 10px; line-height: 1.5; font-weight: 800; }
#sn-mobile-menu .sn-mobile-legal { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 12px; }
#sn-mobile-menu .sn-mobile-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 10px; font-weight: 700; }

/* All templates reserve the same fixed header space. */
.about-page .about-hero, .milkshake-page .milkshake-hero { padding-top: calc(var(--sn-height) + 40px); }
.milkshake-page .milkshake-category-nav { top: var(--sn-height); }
.milkshake-page .milkshake-section[id] { scroll-margin-top: 70px; }
@media (min-width: 851px) and (max-width: 1350px) {
  :root { --sn-height: 176px; }
  .sn-bar { grid-template-columns: 160px minmax(0, 1fr) auto; gap: 4px 16px; padding-block: 10px; }
  .sn-header .sn-brand { grid-column: 1; grid-row: 1; width: 160px; height: 86px; }
  .sn-header .sn-location { grid-column: 2; grid-row: 1; }
  .sn-header .sn-location strong { font-size: 22px; }
  .sn-header .sn-call { grid-column: 3; grid-row: 1; min-height: 56px; padding: 10px 17px; }
  .sn-desktop-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; gap: 24px; }
  .sn-header .sn-toggle, .sn-header .sn-about { min-height: 42px; padding-block: 10px; }
  .sn-header .sn-menu-primary { min-height: 56px; padding: 10px 23px; }
  .sn-header .sn-drinks-primary { min-height: 52px; }
  .sn-header .sn-panel { padding: 22px; }
  .sn-header .sn-card-link { grid-template-columns: 86px minmax(0, 1fr) 22px; gap: 12px; padding-right: 14px; }
  .sn-card-link > img { width: 86px; height: 104px; }
  .sn-food-grid { gap: 13px; }
  .sn-header .sn-feature { grid-template-columns: 1fr; }
  .sn-header .sn-feature > img { width: 100%; height: 110px; }
  .sn-feature-copy { padding: 14px; min-height: 95px; }
  .sn-visit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(220px, 1fr); gap: 18px; }
}
@media (max-width: 850px) {
  :root { --sn-height: 144px; }
  html { scroll-padding-top: 164px; }
  html:has(.sn-header.is-compact) { --sn-height: 72px; scroll-padding-top: 94px; }
  .sn-bar { grid-template-columns: minmax(0, 1fr) 44px auto; grid-template-rows: 64px 44px; gap: 8px; min-height: 144px; padding: 12px 5vw 16px; }
  .sn-header .sn-brand { grid-column: 1; grid-row: 1 / 3; width: clamp(112px, 32vw, 150px); height: 80px; padding: 7px 8px; }
  .sn-header .sn-location { grid-column: 2 / 4; grid-row: 1; align-items: flex-end; text-align: right; gap: 4px; }
  .sn-header .sn-location strong { font-size: clamp(18px, 3.8vw, 25px); line-height: 1.05; text-wrap: balance; }
  .sn-header .sn-location small { font-size: 9px; letter-spacing: 0; }
  .sn-header .sn-desktop-nav, .sn-header .sn-panel { display: none !important; }
  .sn-header .sn-mobile-toggle { display: grid; place-items: center; grid-column: 2; grid-row: 2; width: 44px; height: 44px; padding: 10px; border: 1px solid #f2efdf99; border-radius: 50%; color: #f2efdf; background: #b41232; }
  .sn-header .sn-mobile-toggle svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .sn-header .sn-call { grid-column: 3; grid-row: 2; min-height: 44px; padding: 9px 11px; gap: 0; }
  .sn-header .sn-call-copy, .sn-header .sn-call > svg { display: none; }
  .sn-header .sn-call-mobile { display: block; font-size: 10px; line-height: 1.2; font-weight: 900; }
  .sn-header.is-compact .sn-bar { grid-template-rows: 56px; min-height: 72px; padding-block: 8px; }
  .sn-header.is-compact .sn-brand { grid-column: 1; grid-row: 1; width: 104px; height: 58px; }
  .sn-header.is-compact .sn-location { display: none; }
  .sn-header.is-compact .sn-mobile-toggle, .sn-header.is-compact .sn-call { grid-row: 1; }
  .about-page .about-hero, .milkshake-page .milkshake-hero { padding-top: 179px; }
  .milkshake-page .milkshake-category-nav { top: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .sn-header *, #sn-mobile-menu * { scroll-behavior: auto !important; transition: none !important; }
}
@media (scripting: none) {
  .sn-header { position: relative; }
  .sn-header .sn-toggle, .sn-header .sn-mobile-toggle { display: none; }
  .about-page .about-hero, .milkshake-page .milkshake-hero { padding-top: 40px; }
}

.sn-mobile-top #sn-mobile-title{display:block;min-width:0;max-width:calc(100% - 58px)}
.sn-mobile-top .sn-mobile-logo{display:block;width:190px;max-width:100%;height:auto}

footer nav:has(> .design-credit) { flex-wrap: wrap; }
footer nav a.design-credit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
footer nav a.design-credit:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }