:root {
  --header-h: 64px;
  --bg: #000;
  --fg: #fff;
  --fg-dim: rgba(255,255,255,.75);
  --accent: #e30613;
  --dkaccent: #aa050e;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'chandler-42-regular', "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg);
  text-align: left;
  background-color: var(--bg);
  height: 100%;
  padding-top: var(--header-h);
}

/* ===== LINKS & IMAGES ===== */
a {
  color: var(--fg);
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: var(--fg);
  text-decoration: underline;
}

img {
  vertical-align: middle;
  border-style: none;
  max-width: 100%;
  height: auto;
}

/* ===== GRID SYSTEM ===== */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container { max-width: 540px; }
}

@media (min-width: 768px) {
  .container { max-width: 720px; }
}

@media (min-width: 992px) {
  .container { max-width: 960px; }
}

@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

[class*="col-"] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-lg-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-lg-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-lg-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Mobile columns stack */
@media (max-width: 991.98px) {
  [class*="col-lg-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ===== NAVIGATION ===== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: var(--bg);
  color: var(--fg);
  z-index: 1030;
  border-bottom: 1px solid var(--accent);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand img.homelogo {
  display: block;
  height: 40px;
  width: auto;
}

/* Burger button */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.nav-toggle-box {
  display: block;
  width: 22px;
  height: 16px;
  position: relative;
}

.nav-toggle-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--fg);
  transform-origin: center;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}

.nav-toggle-bar:nth-child(1) { top: 0; }
.nav-toggle-bar:nth-child(2) { top: 7px; }
.nav-toggle-bar:nth-child(3) { top: 14px; }

/* X state */
[data-open="true"] .nav-toggle-bar:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

[data-open="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

[data-open="true"] .nav-toggle-bar:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

/* Panel */
.nav-panel {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--bg);
}

.nav-panel[hidden] {
  display: none;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .5rem .75rem .75rem;
  margin: 0;
  list-style: none;
  text-align: center;
}

.nav-list a {
  display: block;
  padding: .5rem .75rem;
  color: var(--fg-dim);
  text-decoration: none;
  font-size: 1.125rem;
}

.nav-list a:hover,
.nav-list a:focus {
  color: var(--fg);
}

/* Anchor offset for fixed header */
[id] {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: 'blackno7blacklabel', "Helvetica Neue", Arial, sans-serif;
  text-transform: lowercase;
  font-weight: normal;
}

h2 {
  color: var(--accent);
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

b, strong {
  font-weight: bolder;
}

.text-white {
  color: var(--fg);
}

.text-center {
  text-align: center;
}

.small {
  font-size: 80%;
}

.express {
  font-size: 24px;
  margin-top: 48px;
}

/* ===== LAYOUT UTILITIES ===== */
.full-height {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.full-height > .container {
  width: 100%;
}

.darkgreybg {
  background-color: #222;
  color: var(--fg);
}

.m-0 {
  margin: 0;
}

#contact {
  padding: 60px 0; /* Add top and bottom margin */
}

#contact .row {
  margin-bottom: 40px; /* Space below venue listings */
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-family: 'blackno7blacklabel', sans-serif;
  font-size: 1.5rem;
  font-weight: normal;
  text-transform: lowercase;
  text-align: center;
  line-height: 1.4;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover,
.btn:focus {
  background-color: var(--accent);
  color: var(--fg);
  outline: none;
  text-decoration: none;
}

.btn-lg {
  padding: 0.75rem 1.25rem;
  font-size: 1.5rem;
}

.btn-block {
  display: block;
  width: 100%;
}

/* Button angle classes */
.btn-tilt-left {
  transform: rotate(1.1deg);
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-tilt-right {
  transform: rotate(1.5deg);
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-tilt-slight {
  transform: rotate(-0.25deg);
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* All tilted buttons rotate to 0 on hover */
.btn-tilt-left:hover,
.btn-tilt-left:focus,
.btn-tilt-right:hover,
.btn-tilt-right:focus,
.btn-tilt-slight:hover,
.btn-tilt-slight:focus {
  transform: rotate(0deg);
}

/* Hero CTA buttons */
.cta-row {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.btn-hero {
  display: inline-block;
  padding: 0;
  color: var(--fg);
  text-decoration: none;
  font-family: 'blackno7blacklabel', system-ui, sans-serif;
  border: 0;
}

.btn-hero .btn-inner {
  display: inline-block;
  background: var(--accent);
  color: var(--fg);
  font-size: clamp(24px, 4vw, 42px);
  padding: 10px 18px;
  text-transform: lowercase;
  line-height: 1;
  border: none;
  border-radius: 0;
  transform: rotate(var(--angle, 0deg));
  transform-origin: center;
transition: background-color .2s ease, transform .1s ease; /* Very fast transform */  
}



.btn-hero:nth-child(1) .btn-inner {
  transform: rotate(-2deg);
}

.btn-hero:nth-child(1) .btn-inner:hover,
.btn-hero:nth-child(1) .btn-inner:focus {
  background: var(--dkaccent);
  transform: rotate(0deg); /* Less negative angle on hover */
  outline: none;
}

.btn-hero:nth-child(2) .btn-inner {
  transform: rotate(1deg);
}

.btn-hero:nth-child(2) .btn-inner:hover,
.btn-hero:nth-child(2) .btn-inner:focus {
  background: var(--dkaccent);
  transform: rotate(0deg); /* Less positive angle on hover */
  outline: none;
}

/* ===== HERO SECTION ===== */
.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 120px;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  text-align: center;
}

.hero-lockup {
  display: grid;
  place-items: center;
  margin-bottom: 36px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 10;
}

/* Buck's hero animation */
.bucks-hero {
  position: relative;
  width: 80%;
  margin: 0 auto;
  aspect-ratio: 1600/650;
  overflow: hidden;
}

.bucks-hero .h {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* Animations */
@keyframes homeIntro {
  0% { opacity: 0; transform: scale(.5) }
  25% { opacity: 1; transform: scale(1) }
  75% { opacity: 1; transform: scale(1) }
  100% { opacity: 0; transform: scale(1) }
}

.bucks-home {
  animation: homeIntro 2s ease-in-out forwards;
}

@keyframes winnerIn {
  from { opacity: 0; transform: rotate(10deg) }
  to { opacity: 1; transform: rotate(0) }
}

.winner {
  animation: winnerIn 1s ease-out 2s forwards;
}

@keyframes fadeInHold {
  from { opacity: 0 }
  to { opacity: 1 }
}

.best {
  animation: fadeInHold .6s ease-out 2.5s forwards;
}

.scot {
  animation: fadeInHold .6s ease-out 3s forwards;
}

.deliver {
  animation: fadeInHold .3s ease-out 3.5s forwards;
  z-index: 5;
  will-change: opacity, transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes hideHeroLockup {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

.hero-lockup {
  animation: hideHeroLockup 0.5s ease-out 4.5s forwards;
}

@keyframes fadeInContent {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


.cta-row,
.promo-rotator,
.locations-slab,
.social-feature {
  opacity: 0;
  animation: fadeInContent 0.8s ease-out 5s forwards;
  width: 100%;
  max-width: 1200px;
}



/* ===== PROMO ROTATOR ===== */
.promo-rotator {
  --padY: 24px;
  --padX: 28px;
  position: relative;
  border: 2px solid var(--accent);
  color: var(--fg);
  text-align: center;
  overflow: hidden;
  padding: 0 var(--padX);
  min-height: calc(42px + var(--padY)*2);
}

.promo-rotator .promo {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--padY);
  bottom: var(--padY);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'blackno7blacklabel', system-ui, sans-serif;
  text-transform: lowercase;
  font-size: 42px;
  line-height: 1;
  padding: 0 8px;
  opacity: 0;
}

.promo-rotator .promo {
  /* Keep existing styles */
  text-decoration: none; /* Remove underline */
  color: inherit; /* Keep white text */
  cursor: pointer;
}

.promo-rotator .promo:hover {
  text-decoration: none; /* No underline on hover */
  opacity: 0.9; /* Subtle hover effect */
}

/* Pause promo animation when user hovers */
.promo-rotator:hover .promo {
  animation-play-state: paused;
}


/* Make hidden promo non-clickable too */
.promo-rotator .promo {
  visibility: hidden; /* default hidden; avoids click-through */
}

/* Show p1 during first half, hide otherwise */
@keyframes swapA {
  0%, 45%   { opacity: 1; visibility: visible; }
  55%, 100% { opacity: 0; visibility: hidden; }
}

/* Show p2 during second half, hide otherwise */
@keyframes swapB {
  0%, 45%   { opacity: 0; visibility: hidden; }
  55%, 100% { opacity: 1; visibility: visible; }
}


.promo-rotator .p1 {
  animation: swapA 10s ease-in-out infinite;
}

.promo-rotator .p2 {
  animation: swapB 10s ease-in-out infinite;
}

/* ===== LOCATIONS SLAB ===== */
.locations-slab {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 10px;
  align-items: end;
  margin: 36px 0;
  color: var(--fg);
  justify-content: center;
  padding: 0;
}

@media (max-width: 480px) {
  .locations-slab {
    margin: 18px 0;
  }
}


.loc-text {
  transform: translateY(clamp(-10px, -1.5vw, -8px));
}

.loc-line {
  display: flex;
  align-items: flex-end;
  transform: rotate(var(--angle-main, -2deg));
}

.loc-num {
  font-family: 'blackno7blacklabel', system-ui, sans-serif;
  font-size: clamp(56px, 7vw, 96px);
  line-height: .8;
  position: relative;
  top: 12px;
  text-transform: lowercase;
}

.loc-word {
  font-family: 'blackno7blacklabel', system-ui, sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  margin-left: 12px;
  text-transform: lowercase;
  min-inline-size: clamp(6ch, 16vw, 10ch);
}

.loc-sub {
  margin-top: 6px;
  text-align: right;
  transform: rotate(var(--angle-sub, 5deg));
  font-family: 'chandler-42-regular', serif;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1;
  text-transform: lowercase;
}

.loc-cta {
  position: relative;
}

.loc-toggle {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.visit-label {
  display: block;
  width: 100%;
  background: var(--accent);
  color: var(--fg);
  line-height: 1;
  text-transform: lowercase;
  font-family: 'blackno7blacklabel', system-ui, sans-serif;
  font-size: clamp(24px, 4vw, 42px);
  padding: 10px 18px;
  transform: rotate(-1deg);
}

.visit-label:hover {
  background: var(--dkaccent);
}

[hidden] {
  display: none !important;
}

.loc-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  border: 2px solid var(--accent);
  padding: 20px;
  z-index: 1000;
  min-width: 250px;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 0 40px rgba(0,0,0,0.7);
}

.loc-menu::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: -1;
}

.loc-group {
  margin-bottom: 20px;
}

.loc-group:last-child {
  margin-bottom: 0;
}

.city {
  font-family: 'chandler-42-regular', serif;
  font-size: 18px;
  line-height: 1;
  text-transform: capitalize;
  opacity: .85;
  text-align: center;
  margin: 6px 0 12px;
  color: var(--fg);
}

.loc-menu a {
  display: block;
  font-family: 'blackno7blacklabel', system-ui, sans-serif;
  font-size: 24px;
  line-height: 1.2;
  text-transform: lowercase;
  color: var(--fg);
  text-decoration: none;
  padding: 8px 12px;
  margin: 4px 0;
  transition: background-color 0.2s ease;
}

.loc-menu a:hover {
  background: var(--accent);
  text-decoration: none;
}

@keyframes flash {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.parking-note {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-family: 'chandler-42-regular', serif;
  font-size: clamp(16px, 2vw, 22px);
  text-align: center;
  justify-self: center;
  animation: flash 1.5s infinite;
}



/* Minimal inline icons, placed after locations slab */
.social-feature {
  text-align: center;
  margin: 0px auto 0;         /* tight to the parking note above */
  padding-bottom: 0px;        /* breathing room before hero ends */
}

.social-feature a {
  display: inline-block;
  margin: 0 10px;
  color: var(--fg);
  font-size: clamp(42px, 10vw, 54px);  /* smaller, consistent on phones */
  line-height: 1;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

.social-feature a:hover,
.social-feature a:focus-visible {
  color: var(--accent);
  transform: translateY(-1px);
}

@media (max-width: 420px) {
  .social-feature { margin-top: 8px; }
  .social-feature a { margin: 0 8px; }
}


/* ===== FONTS ===== */
@font-face {
  font-family: 'chandler-42-regular';
  src: url('/fonts/chandler-42-regular.woff2') format('woff2'),
       url('/fonts/chandler-42-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== FONT AWESOME ===== */
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
}

.fa-3x {
  font-size: 3em;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .hero {
    padding: 36px 20px;
  }
  
  .cta-row {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 768px) {
  .locations-slab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .parking-note {
      order: 3; /* Puts it at the bottom */
      grid-column: unset; /* Reset grid properties */
      grid-row: unset;
    }
	
  .loc-text {
    text-align: center;
    transform: none;
    order: 1;
  }
  
  .loc-cta {
    order: 2;
  }
  
  .loc-num {
    font-size: clamp(72px, 12vw, 120px);
  }
  
  .loc-word {
    font-size: clamp(48px, 8vw, 80px);
  }
  
  .loc-sub {
    font-size: clamp(20px, 3vw, 28px);
  }
  
  .btn .btn-inner {
    font-size: clamp(36px, 8vw, 54px);
    padding: 12px 16px;
  }
  
  .btn-hero .btn-inner {
      font-size: clamp(28px, 8vw, 36px);
      padding: 8px 12px;
  }
  
  .visit-label {
      font-size: clamp(28px, 8vw, 36px);
      padding: 8px 12px;
  }
  
  
}

@media (max-width: 600px) {
  .bucks-hero {
    width: 100%;
  }

  .promo-rotator {
    min-height: calc(65px + var(--padY)*2);
  }
  
  .promo-rotator .promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0;
    line-height: 0;
  }
  
  .promo-rotator .p1::before {
    content: '40% off all cocktails';
    font-family: 'blackno7blacklabel', system-ui, sans-serif;
    font-size: 36px;
    line-height: 1;
  }
  
  .promo-rotator .p1::after {
    content: 'monday – wednesday';
    font-family: 'chandler-42-regular', serif;
    font-size: 21px;
    line-height: 1;
    text-transform: capitalize;
  }
  
  .promo-rotator .p2::before {
    content: 'express lunch £13.95';
    font-family: 'blackno7blacklabel', system-ui, sans-serif;
    font-size: 36px;
    line-height: 1;
  }
  
  .promo-rotator .p2::after {
    content: 'mon–fri, 12pm–2pm';
    font-family: 'chandler-42-regular', serif;
    font-size: 21px;
    line-height: 1;
    text-transform: capitalize;
  }
}

/* Small mobile improvements */
@media (max-width: 480px) {
  .cta-row {
    gap: 12px;
	margin-top: 0px;  /* reduce top spacing on phones */
	  
	}
  }
  
  .btn-hero .btn-inner {
    width: 100%;
    text-align: center;
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  .bucks-home,
  .winner,
  .best,
  .scot,
  .deliver {
    animation: none;
    opacity: 1;
  }
  
  .promo-rotator .promo {
    animation: none;
    opacity: 1;
  }
  
  .cta-row,
  .promo-rotator,
  .locations-slab {
    animation: none;
    opacity: 1;
  }
  
  .btn-hero .btn-inner {
    transition: none;
    transform: none;
  }
}



/* ============== Food menu ============== */
.menu-header {
  padding: 20px 0 0 0;
  text-align: center;
  margin-top: 20px;
  max-width: 900px; margin: 0 auto;
}
.menu-header h1 { font-size: 3rem; margin-bottom: 15px; }
.subtitle { margin-bottom: 30px; }

.guilt-free-info {
  margin: 30px auto 0;
  max-width: 800px;
}
.guilt-free-info h3 { margin-bottom: 0px; font-size: 1.5rem; }

/* ============== Footer ============== */
.menu-footer {
  background: var(--bg);
  padding: 10px 0;

}
.footer-info { text-align: center; }
.footer-info p { margin-bottom: 10px; color: var(--fg); }
.footer-info a { color: var(--fg); text-decoration: none; }
.footer-info a:hover { text-decoration: underline; }

/* ============== Content Shell ============== */
.menu-content { padding: 40px 0 80px; }
.menu-accordion { max-width: 900px; margin: 0 auto; }

/* ============== Accordion ============== */
.accordion-item {
  margin-bottom: 15px;
  border: 1px solid var(--accent);
  overflow: hidden;
  transition: all 0.3s ease;
}

.accordion-header {
  padding: 25px 30px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
  position: relative;
}
.accordion-header:hover { border-color: var(--dkaccent); }



/* Optional arrow for FontAwesome chevron (used in Desserts header) */
.accordion-header i {
  font-size: 1.2rem;
  color: var(--accent);
  transition: transform 0.3s ease;
  margin-left: 15px;
  flex-shrink: 0;
}
.accordion-header i:before {
  content: "\f078";
  font-family: FontAwesome;
}

/* Panel body */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}
.accordion-content-inner { padding: 0 15px 20px 15px; }

/* Stop the browser yanking the page during height changes */
.accordion-item, .accordion-content { overflow-anchor: none; }

/* If you have a sticky header, set this once */
.accordion-header { scroll-margin-top: 80px; } /* <-- change 64 to your header height */

/* Let JS temporarily disable smooth-behavior for precise corrections */
html.no-smooth { scroll-behavior: auto !important; }

/* Ensure we animate max-height only */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  will-change: max-height;
}



/* Header H2 gentle random pulse */
.accordion-header h2 {
  font-size: 2.5rem;
  color: var(--fg);
  margin: 0;
  text-align: center;
  animation: randomPulse 4s infinite;
}

@keyframes randomPulse {
  0%, 85% { transform: scale(1); }
  92%     { transform: scale(1.04); }
  100%    { transform: scale(1); }
}

/* Random delays per section header */
.accordion-item:nth-child(1)  h2 { animation-delay: 0.3s; }
.accordion-item:nth-child(2)  h2 { animation-delay: 1.8s; }
.accordion-item:nth-child(3)  h2 { animation-delay: 0.7s; }
.accordion-item:nth-child(4)  h2 { animation-delay: 2.4s; }
.accordion-item:nth-child(5)  h2 { animation-delay: 1.1s; }
.accordion-item:nth-child(6)  h2 { animation-delay: 3.2s; }
.accordion-item:nth-child(7)  h2 { animation-delay: 0.9s; }
.accordion-item:nth-child(8)  h2 { animation-delay: 2.7s; }
.accordion-item:nth-child(9)  h2 { animation-delay: 1.5s; }
.accordion-item:nth-child(10) h2 { animation-delay: 3.8s; }

/* Warning banner pulse */
.warning-banner {
  color: #fff;
  text-align: center;
  padding: 15px;
  margin: -15px -30px 15px -30px;
  font-weight: bold;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}



.description {
  font-size: 1rem;
  color: var(--fg);
  margin-bottom: 15px;
  text-align: center;
}

/* ============== Callouts (used) ============== */
.warning-banner {
  color: #fff;
  text-align: center;
  padding: 15px;
  margin: -15px -30px 15px -30px;
  font-weight: bold;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Heat levels list (Nashville section) */
.heat-levels { display: grid; gap: 10px; margin-top: 15px; }
.heat-level {
  border: 1px solid var(--dkaccent);
  padding: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.heat-name { color: var(--accent); font-size: 1.1rem; }
.heat-desc { color: var(--fg); }

/* ============== Menu items ============== */
.menu-items-grid { display: grid; gap: 15px; margin-top: 0; }

.menu-item { padding: 0; position: relative; }

.menu-item h4 {
  color: var(--fg);
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.75rem; /* keep aligned with .item-price */
  overflow: hidden;     /* clear floats from .item-price */
}

.menu-item h4.beside { margin: 0 0 8px 0; }

.menu-item h4.smallshake { font-size: 1.5rem; }

.menu-item p {
  color: var(--fg);
  margin: 8px 0 8px 0;
  line-height: 1.3;
  padding-right: 50px;  /* space so long text doesn’t collide with price */
}

/* Price alignment */
.item-price {
  float: right;
  color: var(--fg);
  font-family: 'chandler-42-regular', "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.1;
  margin-top: 0.1rem;
  margin-left: 10px;
}


.menu-item.long-name .item-price {
  float: none;
  display: block;
  text-align: right;
  margin-top: 5px;
  margin-left: 0;
}

.add-ons { font-style: italic; }

/* ============== Wings block ============== */
.wing-pricing {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 15px;
  border: 1px solid var(--accent);
}
.wing-pricing span { color: var(--fg); font-size: 1rem; }

.sauce-intro {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 15px;
  color: var(--fg);
}

/* ============== Dips list ============== */
.dips-list { margin: 8px 0 15px; }

/* ============== Responsive ============== */
@media (max-width: 768px) {
  .accordion-header {
    padding: 20px 15px;
    justify-content: center;
    gap: 10px;
  }
  .accordion-header h2 { font-size: 2rem; }
  .accordion-header i { flex-shrink: 0; margin-top: 3px; }

  .accordion-content-inner { padding: 15px 15px 20px; }

  .menu-item h4 {
    font-size: 1.6rem;
    line-height: 1.3; /* match price line-height on mobile */
    overflow-wrap: break-word;
  }

  .item-price {
    font-size: .9rem;
    line-height: 1.3;
    margin-left: 8px;
  }

  .wing-pricing { flex-direction: column; text-align: center; gap: 8px; }
}

/* Consistent spacing between stacked menu items (not inside grids) */
.accordion-content-inner > .menu-item + .menu-item h4 {
  margin-top: 1.1rem;
  padding-top: .9rem;
}

/* Slightly looser body copy */
.accordion-content-inner > .menu-item p {
  margin: 8px 0 1rem;
}


/* === Booze page === */


.abv{
  font-family: 'chandler-42-regular', "Helvetica Neue", Arial, sans-serif;
  font-size: .95rem;
  opacity: .85;
  margin-left: .5ch;
  white-space: nowrap;
}

:is(#three-pound-drinks, #non-alc, #spirits) .accordion-content-inner h3 {
  color: var(--accent);
  font-family: 'chandler-42-regular', "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1rem;
  text-transform: capitalize;
  margin: 1rem 0 .5rem;
  letter-spacing: .02em;
}
{
  color: var(--accent);
  font-family: 'chandler-42-regular', "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1rem;
  text-transform:capitalize;
  margin: 1rem 0 .5rem;
  letter-spacing: .02em;
}

/* Center the Wine & Fizz section only */
#wine-fizz .accordion-content-inner {
  text-align: center;
  max-width: 720px;   /* optional: keeps the measure tidy */
  margin: 0 auto;
}

#wine-fizz h3 { margin-top: 1.25rem; }   /* small breathing room */


@media (max-width: 480px) {
  .accordion-content-inner { padding: 12px 12px 16px; }
  .menu-item h4 { font-size: 1.3rem; }
  .item-price { font-size: 1rem; }
}


/* ===== Venue page ===== */
#venuepage {
  padding: 48px 0;
}

#venuepage h2 {
  margin-bottom: 16px;
}

.venue-address {
  margin: 0 0 24px;
}

.venue-hours {
  margin: 16px 0 24px;
}

/* Parking link spacing (replaces inline margin) */
.prebook-link {
  margin: 16px 0 24px;
}

/* Group of three cards */
.venue-cards {
  margin: 8px 0 28px;
}

/* Base card */
.venuebox {
  --venue-pad: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;

  min-height: 170px;         /* default for desktop */
  padding: var(--venue-pad);
  text-align: center;
  color: var(--fg);
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Headline */
.venuebox .highvoltage {
  font-family: 'blackno7blacklabel', system-ui, sans-serif;
  margin: 0;
  text-transform: lowercase;
  line-height: 1.05;
  letter-spacing: .02em;
  font-size: clamp(22px, 3.3vw, 34px);
  word-break: break-word; /* fallback if no <br> */
}

/* Secondary line */
.venuebox p {
  margin: 0;
  font-size: 15px;
  font-family: 'chandler-42-regular', "Helvetica Neue", Arial, sans-serif;
}

/* Mobile: venue cards edge-to-edge like the buttons */
@media (max-width: 768px) {
  /* remove row gutters */
  .venue-cards.row {
    margin-left: 0;
    margin-right: 0;
  }
  .venue-cards.row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    flex: 0 0 100%;
  }

  /* tighten the card and make the heading bigger */
  .venuebox {
    min-height: auto;
    padding: 12px 16px;
	margin-bottom:12px;
  }
  .venuebox .highvoltage {
    font-size: clamp(24px, 7vw, 32px); /* bigger headline on phone */
    line-height: 1.15;
  }
}



/* Button polish */
.opentable-btn {
  margin: 8px 0 18px;
}

/* Stack buttons on venue pages with spacing */
#venuepage .btn-block {
  margin-bottom: 12px; /* adjust to taste */
}

/* Last button in the group – remove margin to avoid a gap before the next heading */
#venuepage .btn-block:last-of-type {
  margin-bottom: 24px; /* or 0 if you want it tight to the heading */
}


/* Utility: remove any need for <div style="clear:both"> */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* pages */
#general {
  min-height: 100vh;        /* full page height */
  padding: 2rem;
  box-sizing: border-box;
  display: flex;            /* optional: center content */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#general h4 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Reservation: phone list */
#general .call-note {
  margin: 0.75rem 0 24px;
  text-align:center;
}

.phone-grid
 {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 10px 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  font-size: clamp(16px, 1.6vw, 18px);
}
#general .opentableleft { margin-top: 1rem; }

 .phone-grid li
 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

 .phone-grid li:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}



 .phone-grid .tel {
  margin-left: auto;
  text-decoration: none;
  white-space: nowrap;
}

 .phone-grid .tel:hover,
 .phone-grid .tel:focus {
  text-decoration: none;
}

/* Touch targets a bit taller on small screens */
@media (max-width: 520px) {
  .phone-grid li { padding: 12px 14px; }
}


/* Cocktails  */
#cocktails {
  max-width: 900px;          /* narrower on desktop */
  margin: 0 auto;
  padding: 24px 20px;
  min-height: 100vh;         /* fill the viewport height */
  box-sizing: border-box;
}


#cocktails > h2,
#cocktails > h3 {
  text-align: center;
}

#cocktails h3 {
  margin: 2.5rem 0 .5rem;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: 0.01em;
}

#cocktails h4 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(18px, 2vw, 22px);
  margin: 1.1rem 0 0;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: .9rem;
}
#cocktails h4:first-of-type { border-top: 0; padding-top: 0; }

#cocktails h4 .price {
  margin-left: auto;         /* pushes price to the right */
  color: var(--fg);
  font-family: 'chandler-42-regular', "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
}


#cocktails p {
  margin: 0 0 1.1rem;
  line-height: 1.2;

}

/* === Unified heading scale (food + cocktails) === */
:root{
  /* H4 (item names) */
  --h4-min: 1.4rem;   /* ↑ bigger on mobile than before */
  --h4-fluid: 2.6vw;
  --h4-max: 1.8rem;   /* ~28.8px on large screens */

  /* H3 (section subheads) */
  --h3-min: 1.5rem;
  --h3-fluid: 3vw;
  --h3-max: 2rem;
}

/* Item names: food + cocktails */
#cocktails h4,
.menu-item h4{
  font-size: clamp(var(--h4-min), var(--h4-fluid), var(--h4-max));
}

/* Subheads: make consistent too (optional but tidy) */
#cocktails h3,
.menu-header h3,
.guilt-free-info h3{
  font-size: clamp(var(--h3-min), var(--h3-fluid), var(--h3-max));
}


/* Force a single font across the footer */
#include-footer,
#include-footer * {
    font-family: 'chandler-42-regular', "Helvetica Neue", Arial, sans-serif !important;
   letter-spacing: normal !important;
}

/* Keep Font Awesome using its own icon font */
#include-footer .fa,
#include-footer [class^="fa-"],
#include-footer [class*=" fa-"] {
  font-family: "FontAwesome" !important; /* FA v4.7 */
  font-weight: normal !important;
}

/* If your footer headings were picking up a display font, flatten them too */
#include-footer h1,
#include-footer h2,
#include-footer h3,
#include-footer h4,
#include-footer strong {
    font-family: 'blackno7blacklabel', system-ui, sans-serif !important;
}

/* Deal box in Cocktails panel */
#booze-cocktails .deal-box,
.menu-accordion .accordion-content-inner .deal-box {
  display: block;
  padding: 12px 14px;
  margin: 0 0 12px;
  text-align: center;
  border: 1px solid var(--accent);
  font-family: 'blackno7blacklabel', system-ui, sans-serif !important;
  font-size:2em;
  text-transform: lowercase;
  letter-spacing: .015em;
}

/* header layout */
.site-header .nav-inner{display:flex;align-items:center;gap:12px;}
.site-header .brand{margin-right:auto;}
.nav-actions{display:flex;align-items:center;gap:10px;}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;}

/* header locations picker (namespaced to avoid hero collisions) */
.site-header .nav-locations{position:relative;list-style:none;display:inline-flex;}
.site-header .nav-locations .navloc{position:relative;}
.site-header .nav-locations .navloc>summary::-webkit-details-marker{display:none;}

.site-header .nav-locations .navloc-trigger{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 36px 8px 12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  border-radius:0; /* no radius on this site */
  font:inherit;color:inherit;line-height:1;cursor:pointer;user-select:none;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.site-header .nav-locations .navloc-trigger:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);}
.site-header .nav-locations .navloc-trigger:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,255,255,.08);}
.site-header .nav-locations .navloc-trigger::after{
  content:"";position:absolute;right:10px;width:10px;height:6px;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:10px 6px;
}

/* dropdown panel: opens downward; same width as trigger; no radius */
.site-header .nav-locations .navloc-menu{
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  list-style:none;margin:0;padding:8px 0;
  background:rgba(0,0,0,.92);
  border:1px solid rgba(255,255,255,.15);
  border-radius:0;
  box-shadow:0 12px 24px rgba(0,0,0,.35);
  z-index:9999;

  opacity:0;transform:translateY(-6px) scaleY(.98);
  transform-origin:top left;pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
}
.site-header .nav-locations .navloc[open] .navloc-menu{
  opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto;
}

.site-header .nav-locations .navloc-menu li{margin:0;padding:0;}
.site-header .nav-locations .navloc-menu li.sep{height:1px;margin:6px 8px;background:rgba(255,255,255,.12);}
.site-header .nav-locations .navloc-menu a{
  display:block;padding:10px 14px;text-decoration:none;color:inherit;
}
.site-header .nav-locations .navloc-menu a:hover,
.site-header .nav-locations .navloc-menu a:focus{background:rgba(255,255,255,.06);outline:none;}

/* mobile */
@media (max-width:520px){
  .nav-actions{gap:8px;}
  .site-header .nav-locations .navloc-trigger{padding-right:30px;}
}

/* Locations page */
.locations-header { padding: 32px 0 8px; text-align: center; }
.locations-header .subtitle { opacity: .9; margin: 6px 0 0; }

.loc-grid {
  list-style: none; margin: 0; padding: 20px 0 40px;
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Card as a single big link */
.loc-card { padding: 0; background: transparent; border: 0; } /* li only structures the grid */

.loc-link {
  display: block;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.03);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.loc-link h3 { margin: 0 0 .4rem; }

/* Hover/focus: accent + lift */
.loc-link:hover,
.loc-link:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  outline: none;
  text-decoration: none;
  
}

.loc-link:hover h3,
.loc-link:focus-visible h3,
.loc-link:hover p,
.loc-link:focus-visible p {
  color: var(--accent);
  text-decoration: none;
  
}

/* Mini-hero style promos (no radius) */
.fancypromo { margin: 28px 0 36px; }

.fancypromo-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.fancypromo-tile {
  position: relative;
  display: block;
  padding: clamp(20px, 2.5vw, 28px);
  color: var(--fg);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.15);
  background:
    linear-gradient(160deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent 55%),
    rgba(255,255,255,.03);
  border-radius: 0;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}

/* glow layer */
.fancypromo-tile::before {
  content: "";
  position: absolute; inset: -30% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 80% at 20% 40%, rgba(255,255,255,.18), transparent 60%);
  pointer-events: none;
  opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
}

.fancypromo-tile .eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  font-size: .92rem;
  opacity: .95;
  margin-bottom: .35rem;
}

.fancypromo-tile .title {
  display: block;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .01em;
  font-size: clamp(1.5rem, 1.2vw + 1.25rem, 2.2rem);
  text-wrap: balance;
}

.fancypromo-tile .accent-bar {
  display: inline-block;
  width: 44px; height: 2px;
  background: var(--accent);
  margin-top: .65rem;
  opacity: .95;
}

/* interactions */
@media (hover: hover) and (pointer: fine) {
  .fancypromo-tile:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 14px 44px rgba(0,0,0,.35);
    color: var(--accent);
  }
  .fancypromo-tile:hover::before { opacity: .75; transform: translateY(-4px); }
}

.fancypromo-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-color: var(--accent);
}

/* accessibility niceties */
@media (prefers-reduced-motion: reduce) {
  .fancypromo-tile,
  .fancypromo-tile::before { transition: none; }
}

/* ensure no underlines anywhere on these tiles */
.fancypromo .fancypromo-tile,
.fancypromo .fancypromo-tile:link,
.fancypromo .fancypromo-tile:visited,
.fancypromo .fancypromo-tile:hover,
.fancypromo .fancypromo-tile:focus,
.fancypromo .fancypromo-tile:active {
  text-decoration: none;
}
#contact {
  background: var(--dk, #222);
  color: var(--fg, #fff);
  border-top: 2px solid var(--accent, #e63946);
  padding: 44px 16px 28px;
  text-align: center;
}

#contact h2 {
  font-family: 'blackno7blacklabel', system-ui, sans-serif;
  text-transform: uppercase;
  font-size: clamp(24px, 3.5vw, 36px);
  margin-bottom: 18px;
  color: var(--accent, #e63946);
}

#contact .intro {
  font-family: 'chandler-42-regular', serif;
  font-size: clamp(15px, 2vw, 17px);
  margin-bottom: 24px;
}

#contact .venue-picker {
  margin: 20px auto;
}

#venue-select {
  font-family: 'chandler-42-regular', serif;
  font-size: 16px;
  padding: 8px 20px;
  border: 1px solid rgba(230, 24, 37, 0.6);  /* Thinner, semi-transparent border */
  background: rgba(0, 0, 0, 0.3);             /* Semi-transparent background */
  color: #fff;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  cursor: pointer;
  min-width: 240px;
  user-select: none;
}

/* Hover state - make it more prominent */
#venue-select:hover {
  border-color: var(--accent, #e63946);
  background: rgba(0, 0, 0, 0.6);
}

#venue-select:focus,
#venue-select:active {
  outline: none;
  box-shadow: none;
  border-color: var(--accent, #e63946);
  background: rgba(0, 0, 0, 0.8);
}

#venue-select option {
  background: #000;
  color: #fff;
}

#venue-select option:checked,
#venue-select option:hover,
#venue-select option:focus {
  background: var(--accent, #e63946);
  color: #000;
}

#contact .socials {
  margin-top: 24px;
}

#contact .socials a {
  display: inline-block;
  margin: 0 12px;
  font-size: clamp(36px, 7vw, 52px);
  color: var(--fg, #fff);
  transition: color .2s ease;
}

#contact .socials a:hover {
  color: var(--accent, #e63946);
}
/* Label spacing */
#contact .venue-picker label {
  display: block;
  margin-bottom: 8px;
  font-family: 'chandler-42-regular', serif;
  font-size: 15px;
}

/* Bigger/taller dropdown on phones */
@media (max-width: 600px) {
  #venue-select {
    font-size: 18px;
    padding: 14px 16px;
    min-height: 50px;    /* taller tap target */
  }

  #contact .venue-picker label {
    margin-bottom: 12px; /* extra breathing room */
    font-size: 16px;
  }
}