:root {
  --font-rye: "Rye";
  --font-barlow: "Barlow Condensed";
  --font-montserrat: "Montserrat";
  --font-yellowtail: "Yellowtail";
}

.admin-bar .site-header-shell { top: 32px; }
.lightbox { z-index: 2000; }
.desktop-nav .current-menu-item > a,
.desktop-nav .current_page_item > a { color: var(--orange-dark); }

.wp-generic-page {
  min-height: calc(100vh - 138px);
  padding: clamp(80px, 10vw, 150px) clamp(24px, 7vw, 110px);
}

.wp-generic-page__inner {
  margin: 0 auto;
  max-width: 980px;
}

.wp-generic-page__inner--center { text-align: center; }
.wp-generic-page h1 {
  font-family: var(--font-rye), serif;
  font-size: clamp(42px, 7vw, 88px);
  line-height: 1.05;
}

.wp-generic-page article {
  border-bottom: 1px solid rgba(59,36,23,.2);
  padding: 26px 0;
}

.job-application__status {
  align-items: flex-start;
  background: rgba(59, 36, 23, .08);
  border-left: 5px solid var(--orange);
  display: flex;
  font-weight: 600;
  gap: 12px;
  margin: 20px 0 0;
  padding: 16px 18px;
}

.job-application__status.is-error { border-color: var(--red); color: var(--red); }
.job-application.is-submitting { opacity: .72; pointer-events: none; }

@media (max-width: 782px) {
  .admin-bar .site-header-shell { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* A calmer hero photo story: two moments at a time on wide screens, one on phones. */
.hero-collage.is-rotating { pointer-events: auto; }

html:not(.ev-js) .hero-collage__rope,
html:not(.ev-js) .hero-collage__seal,
html:not(.ev-js) .hero-collage__card--fajitas,
html:not(.ev-js) .hero-collage__card--karaoke {
  opacity: 0;
  visibility: hidden;
}

.hero-collage.is-rotating .hero-collage__rope,
.hero-collage.is-rotating .hero-collage__seal {
  opacity: 0;
  visibility: hidden;
}

.hero-collage.is-rotating .hero-collage__card {
  opacity: 0;
  pointer-events: none;
  scale: .965;
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    scale 1.1s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear .9s;
  visibility: hidden;
}

.hero-collage.is-rotating .hero-collage__card.is-active {
  opacity: 1;
  scale: 1;
  transition-delay: 0s;
  visibility: visible;
}

@media (min-width: 1101px) {
  .hero-collage.is-rotating .hero-collage__card--family,
  .hero-collage.is-rotating .hero-collage__card--fajitas {
    bottom: auto;
    height: min(67%, 500px);
    left: 4%;
    right: auto;
    top: 14%;
    width: 47%;
  }

  .hero-collage.is-rotating .hero-collage__card--toast,
  .hero-collage.is-rotating .hero-collage__card--karaoke {
    bottom: auto;
    height: min(64%, 470px);
    left: auto;
    right: 2%;
    top: 19%;
    width: 43%;
  }

  .hero-collage.is-rotating .hero-collage__card--fajitas { top: 17%; }
  .hero-collage.is-rotating .hero-collage__card--karaoke { top: 13%; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .hero-collage.is-rotating .hero-collage__card--family,
  .hero-collage.is-rotating .hero-collage__card--fajitas {
    bottom: auto;
    height: 390px;
    left: 3%;
    right: auto;
    top: 46px;
    width: 46%;
  }

  .hero-collage.is-rotating .hero-collage__card--toast,
  .hero-collage.is-rotating .hero-collage__card--karaoke {
    bottom: auto;
    height: 370px;
    left: auto;
    right: 3%;
    top: 70px;
    width: 43%;
  }
}

@media (max-width: 700px) {
  .hero-collage.is-rotating {
    height: 390px;
    overflow: hidden;
  }

  .hero-collage.is-rotating .hero-collage__card {
    bottom: auto;
    height: 330px;
    left: 50%;
    right: auto;
    top: 24px;
    transform: translateX(-50%);
    width: min(82vw, 350px);
  }

  .hero-collage.is-rotating .hero-collage__card--family,
  .hero-collage.is-rotating .hero-collage__card--fajitas,
  .hero-collage.is-rotating .hero-collage__card--toast,
  .hero-collage.is-rotating .hero-collage__card--karaoke {
    bottom: auto;
    left: 50%;
    right: auto;
    top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-collage.is-rotating .hero-collage__card { transition: none; }
}
/* DerbyFlow Connect owns the content inside these slots; the theme owns placement. */
.ev-derbyflow-slot {
  width: 100%;
  min-width: 0;
}

.ev-derbyflow-slot--featured-specials,
.ev-derbyflow-slot--specials,
.ev-derbyflow-slot--catering-menu,
.ev-derbyflow-slot--catering-form,
.ev-derbyflow-slot--private-events,
.ev-derbyflow-slot--reservations,
.ev-derbyflow-slot--jobs {
  max-width: 1180px;
  margin-inline: auto;
}

/* The live menu is the page experience, so it runs edge-to-edge. */
.menu-categories:has(.ev-derbyflow-slot--menu) {
  padding-left: 0;
  padding-right: 0;
}

.ev-derbyflow-slot--menu,
.ev-derbyflow-slot--menu .df-menu-canvas {
  max-width: none;
  width: 100%;
}

.ev-derbyflow-slot--menu .df-menu-canvas {
  border-left: 0;
  border-radius: 0;
  border-right: 0;
}

.ev-derbyflow-slot--ordering {
  width: 100%;
}

.ev-derbyflow-slot--signup {
  max-width: 650px;
  position: relative;
  z-index: 2;
}

.event-steps--derbyflow-top {
  padding-top: clamp(54px, 6vw, 88px);
}

.catering-form-top {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(54px, 6vw, 88px) clamp(20px, 6vw, 96px) clamp(64px, 8vw, 112px);
}

.catering-form-top .inner-section-title {
  margin-bottom: 0;
}

.catering-form-top .ev-derbyflow-slot--catering-form {
  max-width: 1180px;
  width: 100%;
}

.reservation-booking--derbyflow {
  align-items: center;
  display: grid;
  gap: clamp(42px, 6vw, 100px);
  grid-template-columns: minmax(300px, .72fr) minmax(560px, 1.28fr);
  justify-content: center;
  min-height: 0;
  padding: clamp(64px, 7vw, 100px) clamp(28px, 7vw, 120px);
}

.reservation-booking--derbyflow::before {
  background: linear-gradient(180deg, rgba(20, 8, 3, .8), rgba(20, 8, 3, .68));
}

.reservation-booking--derbyflow .inner-section-title {
  margin-bottom: 0;
  max-width: 520px;
  text-align: left;
  width: 100%;
}

.reservation-booking--derbyflow .inner-section-title h2 {
  font-size: clamp(54px, 5.2vw, 88px);
  line-height: .98;
}

.reservation-booking--derbyflow .ev-derbyflow-slot--reservations {
  max-width: 900px;
  width: 100%;
}

@media (max-width: 980px) {
  .reservation-booking--derbyflow {
    gap: 36px;
    grid-template-columns: 1fr;
    padding: 58px clamp(20px, 5vw, 48px) 76px;
  }

  .reservation-booking--derbyflow .inner-section-title {
    max-width: 760px;
    text-align: center;
  }

  .reservation-booking--derbyflow .inner-section-title h2 {
    font-size: clamp(44px, 8vw, 68px);
  }

  .reservation-booking--derbyflow .ev-derbyflow-slot--reservations {
    justify-self: center;
  }
}

.ev-derbyflow-slot--map,
.ev-derbyflow-slot--map .df-map {
  height: 100%;
  min-height: 420px;
}

.ev-derbyflow-slot--footer-business {
  display: grid;
  gap: 0.55rem;
}

.ev-derbyflow-slot--footer-business .df-hours {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev-derbyflow-slot--footer-business .df-address,
.ev-derbyflow-slot--footer-business .df-phone {
  display: block;
}

.footer__seo-copy {
  border-top: 1px solid rgba(245, 233, 213, .13);
  display: grid;
  gap: clamp(24px, 4vw, 64px);
  grid-template-columns: minmax(260px, .75fr) minmax(420px, 1.25fr);
  margin: 0 auto;
  max-width: 1300px;
  padding: 34px 30px 30px;
}

.footer__seo-copy > div:first-child > p {
  color: var(--orange);
  font-family: var(--font-barlow), sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.footer__seo-copy h2 {
  color: var(--cream);
  font-family: var(--font-rye), serif;
  font-size: clamp(24px, 2.3vw, 35px);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  text-transform: uppercase;
}

.footer__seo-copy > div:last-child > p {
  color: rgba(245, 233, 213, .82);
  font-size: 12px;
  line-height: 1.8;
  margin: 0;
}

.footer__seo-copy nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
}

.footer__seo-copy nav a {
  color: #e9b46d;
  font-family: var(--font-barlow), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: color .2s ease, transform .2s ease;
}

.footer__seo-copy nav a:hover {
  color: var(--orange);
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .ev-derbyflow-slot--map,
  .ev-derbyflow-slot--map .df-map {
    min-height: 340px;
  }

  .footer__seo-copy {
    grid-template-columns: 1fr;
    padding: 30px 24px;
  }
}