/* Menus page. Top to bottom: teal hero band, intro, the six menu panels, food photos.
   The panel markup and the rules under "menu panel content" come from the menus the
   restaurant maintains by hand, so those class names are kept as they are. */

.menus-page { background: url(/assets/img/Background_yellowWhiteStatic1.jpg) top left repeat; }

/* ---------- teal hero band ----------
   The band art is a 390px-tall strip tiled sideways, so the chips photo (which sets the
   band's height) hangs a little past the teal onto the cream. That is the intended look. */
.menus-hero {
  display: flex;
  background: url(/assets/img/Teal-Background2.png) top left repeat-x;
}
.menus-hero-text {
  width: 40%;
  margin-top: -50px;
  padding-left: 5%;
  display: flex; flex-direction: column; justify-content: center;
}
.menus-hero-eyebrow {
  margin: 0;
  font: 700 25px / 31px var(--font-serif);
  text-transform: uppercase; letter-spacing: 4.2px; color: var(--navy);
}
.menus-hero-title { margin-top: 10px; font-size: var(--fs-hero); line-height: var(--lh-hero); color: var(--white); }
.menus-hero-image { width: 60%; display: flex; align-items: flex-start; }
/* live serves the 1000px original and never upscales it, so the band is 475px tall above 1666px */
.menus-hero-image img { display: block; width: auto; max-width: 100%; height: auto; }

/* Between 1201 and 1366 live gives the photo column a 50px right / 15px bottom
   margin, so the image shrinks by 50px and the band grows 15px below it. */
@media (min-width: 1201px) and (max-width: 1366px) {
  .menus-hero-image { width: calc(60% - 50px); margin: 0 50px 15px 0; }
}
@media (max-width: 1366px) {
  .menus-hero-eyebrow { font-size: 18px; }
  .menus-hero-title { margin-top: 5px; }
}
@media (max-width: 1200px) { .menus-hero-eyebrow { font-size: 17px; } }
@media (max-width: 1024px) { .menus-hero-eyebrow { font-size: 16px; } }
@media (max-width: 880px) {
  .menus-hero { flex-direction: column; background-image: url(/assets/img/teal-250px.png); }
  .menus-hero-text {
    width: 100%; margin-top: 50px; padding-left: 5%;
    align-items: center; text-align: center;
  }
  .menus-hero-eyebrow { font-size: 15px; }
  .menus-hero-image { width: 100%; padding: 0 150px; }
}
@media (max-width: 767px) {
  .menus-hero-eyebrow { font-size: 14px; }
  .menus-hero-image { padding: 0; justify-content: center; }
  .menus-hero-image img { width: 80%; }
}


/* Above 1900 live switches to its desktop hero: a fixed-height band, the heading indented 13%,
   and above 1920 the columns stay 1920 wide and centred. */
@media (min-width: 1901px) {
  .menus-hero { height: 440px; overflow: hidden; padding-inline: max(0px, calc((100% - 1920px) / 2)); }
  .menus-hero-text { padding-left: 13%; }
  /* the chips photo sits on the band's bottom edge, so its top 35px is clipped */
  .menus-hero-image { align-items: flex-end; }
}

/* ---------- intro ---------- */
.menus-intro {
  margin-top: 50px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* eyebrow, heading and divider share one 10px-padded block with a 20px gap, as on live */
.menus-intro-head {
  width: 100%; padding: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.menus-intro .eyebrow { line-height: 1; margin: 0; }
.menus-intro .h2 { margin: 0; }
/* live wraps the rule in a 20/5 padded box and leaves it on a text line, so the box stays
   56px tall while the rule itself shrinks with the column. */
.menus-divider-slot { width: 100%; padding: 20px 0 5px; line-height: 31px; }
.menus-divider { display: inline-block; padding: 0; margin: 0; }
.menus-intro-copy { width: 52%; margin: 0 0 14px; color: var(--text); }
.menus-intro-buttons {
  width: 1060px; max-width: 100%; min-height: 104px;
  display: flex; align-items: center; gap: 50px;
}
.menus-btn-slot { width: 320px; max-width: 100%; text-align: center; }
.menus-btn-slot .btn { width: 100%; border-radius: 10px; } /* live paints the whole 320px slot red */

@media (max-width: 1200px) {
  .menus-intro-buttons { flex-direction: column; justify-content: center; gap: 20px; }
}
@media (max-width: 767px) {
  .menus-intro { margin-top: 0; }
  .menus-intro-copy { width: 100%; }
}

/* ---------- the six menu panels ---------- */
.menus-panels {
  width: 80%; margin: 50px auto 0;
  background: var(--white);
}
/* live's tab strip wraps: below ~1300 "HAPPY HOUR SPECIALS" drops to a centred second row */
.menus-tablist { display: flex; flex-wrap: wrap; justify-content: center; padding-top: 50px; }
.menus-tab {
  /* the live tabs carry an empty 11px icon slot before the label; keep the label x and tab width */
  position: relative; padding: 10px 10px 10px 21px;
  font: 400 25px / 34px var(--font-display); color: var(--navy);
  transition: color .2s ease-in-out;
}
.menus-tab:hover, .menus-tab.is-active { color: var(--red); }
.menus-tab + .menus-tab::before {
  content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 24px; background: var(--red);
}
.menus-panel-heading { margin: 0; }
.menus-panel-toggle {
  /* same empty 11px icon slot as the desktop tabs: it pushes the centred label 5.5px right */
  display: none; width: 100%; padding: 10px 10px 10px 21px;
  font: 400 20px / 31px var(--font-display); color: var(--navy); text-align: center;
  transition: color .2s ease-in-out;
}
.menus-panel-toggle:hover, .menus-panel-toggle.is-active { color: var(--red); }
.menus-panel-body {
  padding: 10px; text-align: center;
  font: 500 var(--fs-body) / var(--lh-body) var(--font-sans); color: #808080;
}

@media (max-width: 1366px) { .menus-tab { font-size: 22px; } }
@media (max-width: 1200px) { .menus-tab { font-size: 21px; } }
@media (max-width: 1024px) {
  .menus-tablist { display: none; }
  .menus-panel-toggle { display: block; }
}
@media (max-width: 880px) { .menus-panel-toggle { font-size: 18px; } }
@media (max-width: 767px) { .menus-panel-toggle { font-size: 16px; line-height: 33px; } }

/* ---------- menu panel content ----------
   "Mrs Eaves" is named by the original menus but never served, so every browser falls back
   to its default serif. Keeping the name keeps the fallback identical. */
.menus-panels .content-container {
  max-width: 1200px; margin: 0 auto; padding: 20px;
  font-family: 'Mrs Eaves', serif; text-align: left; background: var(--white);
}
.menus-panels :is(h2, h3, h4) { line-height: 1.1; }

.menus-panels .header-image { display: block; width: 100%; height: auto; margin: 29px 0 20px; }
.menus-panels .details-header-image { display: block; width: 100%; height: auto; margin: 109px 0 20px; }

.menus-panels .menu-main-title {
  color: var(--navy); font: 400 60px / 1.1 var(--font-display);
  text-transform: uppercase; text-align: center; margin: 0 0 40px;
}
.menus-panels .menu-header {
  color: var(--red); font: 500 38px / 1.1 var(--font-display);
  text-transform: uppercase; text-align: left; margin: 40px 0 0;
}
.menus-panels .menu-item {
  color: var(--navy); font: 800 26px / 1.1 'Mrs Eaves', serif; margin: 20px 0 0;
}
.menus-panels .heading-desc {
  color: var(--teal); font: 500 25px / 1.1 var(--font-display);
  text-transform: uppercase; margin: 0 0 5px;
}
.menus-panels .teal-standard-description {
  color: var(--teal); font: 600 19px / 1.1 'Mrs Eaves', serif; margin: 0 0 5px;
}
.menus-panels .teal-description {
  color: var(--teal); font: italic 600 19px / 1.1 'Mrs Eaves', serif; margin: 0 0 5px;
}
.menus-panels .menu-text .teal-description { font-size: 18px; margin: 0 0 3px; }
.menus-panels .menu-item-size {
  color: var(--navy); font: 600 19px / 1.1 'Mrs Eaves', serif; margin: 5px 0 0;
}
.menus-panels .menu-item-size span,
.menus-panels .serving-size {
  color: var(--teal); font-style: italic; font-weight: 700; font-size: 19px;
}
.menus-panels .menu-text p,
.menus-panels .menu-text-bolded {
  color: var(--navy); font: 300 19px / 1.25 'Mrs Eaves', serif; margin: 5px 0 0;
}
.menus-panels .menu-text-bolded { font-weight: 800; }
.menus-panels .menu-text .two-columns p { color: var(--navy); }
.menus-panels .center-text { text-align: center; }
.menus-panels .text-spacing { margin-bottom: 30px; }

.menus-panels .menu-button {
  display: inline-block; margin-bottom: 40px; padding: 12px 30px;
  background: var(--red); color: var(--white); text-decoration: none;
  font: 400 18px / 31px var(--font-display); text-transform: uppercase;
  transition: background-color .2s ease-in-out;
}
.menus-panels .menu-button:hover { background: #CC1F22; }
.menus-panels .button-row { margin-left: 20px; }

.menus-panels .two-columns { display: flex; margin: 40px 0; gap: 25px; text-align: left; }
/* live puts an empty spacer block before each column, so every column is indented by one more
   25px step: the left column keeps its 50% (its item-cols floor stops it shrinking) and the
   right column absorbs the overflow. */
.menus-panels .two-columns > .column { flex: 1 1 50%; max-width: 50%; margin-left: 25px; padding-right: 2%; }
.menus-panels .item-cols { display: flex; justify-content: flex-start; min-width: 650px; margin-bottom: 30px; }
.menus-panels .item-cols .col { flex: 1 1 50%; line-height: 1.8; }
.menus-panels .item-cols .col p.menu-item { color: var(--navy); font-size: 26px; font-weight: 800; margin: 20px 0 0; }
/* The printed menu leaves a blank line before "Side Orders"; live spells it out as a row
   holding a single   paragraph, preceded by an empty marker paragraph worth 5px. */
.menus-panels .menus-blank-row { margin-top: 5px; }
.menus-panels .menus-blank-row .col::after { content: ""; display: block; height: 23.75px; margin-top: 5px; }

@media (max-width: 1550px) {
  .menus-panels .two-columns { flex-direction: column; }
  /* stacked, the same spacer blocks sit above each column: 5px of margin plus the 25px gap */
  .menus-panels .two-columns > .column { max-width: 100%; padding-right: 0; margin: 30px 0 20px; }
}
@media (max-width: 767px) {
  .menus-panels .item-cols { flex-direction: column; gap: 30px; min-width: 250px; }
}

/* ---------- food photos ---------- */
.menus-food { display: flex; align-items: flex-start; margin-top: 50px; }
.menus-food img { flex: 0 1 auto; min-width: 0; width: auto; height: auto; display: block; }
@media (max-width: 767px) {
  .menus-food { flex-wrap: wrap; }
  .menus-food img { flex: 1 0 100%; width: 100%; }
}