/* ==========================================================================
   Saturday's — overrides on top of the vendor template (style.css).
   style.css is treated as vendor: don't edit it, override it here.
   ========================================================================== */

:root {
  --sat-orange: #f0542c;
  --sat-gold:   #f2c64d;
  --sat-ink:    #1c1a19;
  --sat-ink-2:  #2e2825;
  --sat-paper:  #ffffff;
}

/* --- Accessibility ------------------------------------------------------ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--sat-ink);
  color: #fff;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--sat-gold);
  outline-offset: 2px;
}

/* --- Header -------------------------------------------------------------
   The template's header had no vertical padding, so the logo sat flush
   against the top edge of the window. It also forced the 184x100 logo into
   a 180x60 box, squashing it to 61% of its real height.
   ------------------------------------------------------------------------ */

.header-area .main-header-area {
  padding: 22px 0;
  transition: padding 0.25s ease, background-color 0.25s ease;
}

.header-area .main-header-area.sticky {
  padding: 10px 0;
}

.logo-img {
  padding: 0 16px;
  text-align: center;
}

/* style.css sets `.header-area .main-header-area .logo-img img { width: 100% }`
   between 992-1200px and `width: 70px` below that, at specificity (0,3,1).
   Combined with a fixed height that stretched the wordmark at every
   breakpoint under 1200px. Matching their selector so we win the cascade. */
.header-area .main-header-area .logo-img img {
  /* Both dimensions pinned at the artwork's true 184:100 ratio (96x52). */
  width: 96px;
  height: 52px;
  object-fit: contain;
  transition: width 0.25s ease, height 0.25s ease;
}

.header-area .main-header-area.sticky .logo-img img { width: 74px; height: 40px; }

/* On the home page the hero already carries a full-size wordmark, so a second
   one in the header is redundant. It fades in once the header sticks. */
.is-home #sticky-header:not(.sticky) .logo-img {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.is-home #sticky-header.sticky .logo-img {
  opacity: 1;
  visibility: visible;
}

/* --- Hero ---------------------------------------------------------------
   The template's slider_bg_1/_2 JPEGs were never shipped, which left the
   hero a flat grey. Replaced with a CSS-only treatment so nothing is
   waiting on a photo. Drop a real image into --hero-image when you have one.
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  /* Fill the browser window. dvh so mobile address bars don't clip it;
     the vh line above is the fallback for browsers without dvh. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(242, 198, 77, 0.18), transparent 60%),
    linear-gradient(160deg, var(--sat-ink-2) 0%, var(--sat-ink) 55%, #120f0e 100%);
  overflow: hidden;
}

.hero::after {
  /* faint warm vignette so the type has something to sit on */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, transparent 35%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  /* Extra top padding clears the absolutely-positioned header. */
  padding: 130px 0 100px;
}

/* On a short window (laptop with lots of browser chrome, landscape phone)
   the fixed padding would push content past the fold, so it tightens up. */
@media (max-height: 700px) {
  .hero__inner { padding: 100px 0 56px; }
  .hero__tagline { margin-top: 14px; }
}

@media (max-height: 560px) {
  .hero__inner { padding: 86px 0 40px; }
  .hero__address { margin-top: 10px; }
  .hero__phone {
  margin: 10px 0 0;
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: 0.04em;
}

/* Plain text, not a tel: link. */
.hero__phone {
  color: var(--sat-gold);
}

.hero__investment {
  margin: 14px 0 0;
  font-size: clamp(13px, 1.3vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hero__contact {
  margin: 26px 0 0;
  font-size: 15px;
}

.hero__contact a {
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 2px;
}

.hero__contact a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.hero__social {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 22px 0 0;
  padding: 0;
}

.hero__social a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
}

.hero__social a:hover { color: var(--sat-gold); }

/* No header to clear on the launch page, so the hero re-centres. */
.is-coming-soon .hero__inner {
  padding: 60px 0;
}

.hero__opening { margin-top: 12px; }
}

.hero__title {
  font-family: "Paytone One", sans-serif;
  font-size: clamp(28px, 8.5vw, 104px);
  line-height: 1.04;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  text-wrap: balance;
}

.hero__script {
  display: block;
  font-family: "Pacifico", cursive;
  text-transform: none;
  color: var(--sat-gold);
  font-size: clamp(26px, 7vw, 80px);
  margin-top: -0.1em;
}

.hero__tagline {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(16px, 1.9vw, 22px);
  line-height: 1.5;
  margin: 30px auto 0;
  max-width: 30em;
}

.hero__address {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero__sep {
  display: inline-block;
  margin: 0 0.6em;
  color: var(--sat-gold);
}

.hero__phone {
  margin: 10px 0 0;
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: 0.04em;
}

/* Plain text, not a tel: link. */
.hero__phone {
  color: var(--sat-gold);
}

.hero__investment {
  margin: 14px 0 0;
  font-size: clamp(13px, 1.3vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hero__contact {
  margin: 26px 0 0;
  font-size: 15px;
}

.hero__contact a {
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 2px;
}

.hero__contact a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.hero__social {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 22px 0 0;
  padding: 0;
}

.hero__social a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
}

.hero__social a:hover { color: var(--sat-gold); }

/* No header to clear on the launch page, so the hero re-centres. */
.is-coming-soon .hero__inner {
  padding: 60px 0;
}

.hero__opening {
  display: inline-block;
  margin: 32px 0 0;
  padding: 10px 22px;
  border: 1px solid rgba(242, 198, 77, 0.5);
  border-radius: 999px;
  color: var(--sat-gold);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-opening {
  text-align: center;
  color: var(--sat-gold);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 10px 0 30px;
}

.hero__meta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
}
.hero__meta strong { color: #fff; font-weight: 600; }
.hero__meta a { color: var(--sat-gold); }

/* --- Sections that lost their background images -------------------------- */

.best_burgers_area,
.about_area {
  background-image: none;
  background-color: var(--sat-paper);
}

.about_area { background-color: #faf8f5; }

.footer {
  background-image: none;
  background-color: var(--sat-ink);
}

/* --- Mobile navigation ---------------------------------------------------
   The template used a jQuery plugin (Slicknav) that was stripped out, so
   .mobile_menu rendered as an empty div and there was no nav under 992px.
   This is the replacement; behaviour lives in assets/js/main.js.
   ------------------------------------------------------------------------ */

.mobile-nav-toggle {
  background: transparent;
  border: 0;
  padding: 14px 16px;
  cursor: pointer;
  line-height: 0;
}

.mobile-nav-toggle__bar {
  display: block;
  width: 26px;
  height: 2px;
  margin: 5px 0;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.2s ease;
}

/* Once the header sticks it sits on white, so the bars flip back to dark. */
.sticky .mobile-nav-toggle__bar,
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar {
  background: var(--sat-ink);
}

.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  border-top: 1px solid #eee;
  background: #fff;
}
.mobile-nav[hidden] { display: none; }

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.mobile-nav a {
  display: block;
  padding: 14px 24px;
  color: var(--sat-ink);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] { color: var(--sat-orange); }

/* --- Drinks grid --------------------------------------------------------- */

.single_delicious { margin-bottom: 40px; }

.single_delicious .thumb img {
  width: 166px;
  height: 166px;
  object-fit: cover;
  border-radius: 50%;
}

.drink-card__dog {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-bottom: 4px;
}

/* --- Footer hours -------------------------------------------------------- */

.footer-hours {
  list-style: none;
  margin: 10px 0 30px;
  padding: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
}
.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-hours li:last-child { border-bottom: 0; }
.footer-hours span:last-child { color: #fff; }

.copy_right { color: rgba(255, 255, 255, 0.5); font-size: 14px; }

/* --- Misc ---------------------------------------------------------------- */

.section_note {
  text-align: center;
  color: #8d8d8d;
  font-style: italic;
  margin: 0 auto 50px;
  max-width: 40em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* The template puts bare .row elements outside any .container, so Bootstrap's
   negative row gutters hung a few pixels off the edge of the page. */
.header-area .container-fluid > .row,
.footer .footer_top > .row {
  margin-left: 0;
  margin-right: 0;
}

/* Backstop: no page should scroll sideways. */
html, body { overflow-x: hidden; }
.hero__title { overflow-wrap: anywhere; }

/* --- Interior page header ------------------------------------------------
   The template's .bradcam_area wants assets/img/banner/bradcam.png, which
   was never shipped. Same CSS-only treatment as the hero, sized to clear
   the absolutely-positioned header.
   ------------------------------------------------------------------------ */

.page-head {
  position: relative;
  text-align: center;
  padding: 170px 0 70px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(242, 198, 77, 0.16), transparent 60%),
    linear-gradient(160deg, var(--sat-ink-2) 0%, var(--sat-ink) 60%, #120f0e 100%);
}

.page-head__eyebrow {
  display: inline-block;
  font-family: "Pacifico", cursive;
  font-size: 22px;
  color: var(--sat-gold);
  margin-bottom: 6px;
}

.page-head__title {
  font-family: "Paytone One", sans-serif;
  font-size: clamp(34px, 7vw, 70px);
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  overflow-wrap: anywhere;
}

.page-head__tagline {
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  margin: 16px auto 0;
  max-width: 34em;
}

@media (max-width: 767px) {
  .page-head { padding: 120px 0 50px; }
}

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

/* The home page's drinks grid is the first thing under the hero and carries
   the template's 140px top padding. On /menu/ it follows .page-head, so it
   needs less air above it. */
.menu-section.best_burgers_area {
  padding-top: 80px;
  padding-bottom: 70px;
}

.menu-section--list {
  padding: 70px 0;
  border-top: 1px solid #ece7e1;
  background-color: #faf8f5;
}

.menu-section--list + .menu-section--list { background-color: var(--sat-paper); }

.menu-section--list .section_title { margin-bottom: 40px; }
.menu-section--list .section_note { margin-bottom: 0; }

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list__item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #ece7e1;
}
.menu-list__item:last-child { border-bottom: 0; }

.menu-list__main {
  flex: 1 1 auto;
  min-width: 0;
}

.menu-list__name {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #1a0d01;
  overflow-wrap: anywhere;
}

.menu-list__meta {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.menu-list__desc {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 26px;
  color: #6e6e6e;
}

.menu-list__price {
  flex: 0 0 auto;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--sat-orange);
  white-space: nowrap;
}

/* Cocktails carries both a subtitle and a note; the template's .section_note
   bottom margin is sized for one, so tighten all but the last. */
.menu-section .section_note:not(:last-child) { margin-bottom: 14px; }

/* The template's .iteam_links a is display:block, which stretched the
   "More Items" pill across the whole container. Size it to its label. */
.iteam_links a.boxed-btn5 { display: inline-block; }