/*
 * The "taproom" theme (BrandSetting::THEMES), modeled on a warm, bold
 * taproom look: white pages broken up by dark brown, black, and amber
 * bands; heavy, expanded, uppercase headings; square amber buttons; a
 * header that sits over the hero photo and turns solid on scroll; event
 * date badges; and a printed-style tap list.
 *
 * Colors and fonts still come from the brand's CSS custom properties (set
 * in the public layout's <style> block); the dark bands (hours, a hero
 * with no photo) use the secondary color, and the other darker tones are
 * mixed from them, so a business's own colors carry through. Headings on
 * the page background use --color-heading, the primary unless it's too
 * light to read there (BrandStylesheet#css_variables), and text on a brand
 * color uses its --color-on-* partner. The header's accent-on-primary
 * links, the buttons' and badges' primary-on-accent text, and the accent
 * titles and links on secondary bands (a plain hero, the hours box) go
 * through --tp-on-brown / --tp-on-amber / --tp-amber-on-dark, which keep
 * that pairing only while it reads and otherwise fall back to black or
 * white. The section components
 * are shared with classic, so everything here hangs off neutral hook
 * classes (site-header, site-hero, section-title, event-date, and so on)
 * scoped to data-theme="taproom". Unlayered, so these rules win over
 * Tailwind's utilities.
 */

body[data-layout="public"][data-theme="taproom"] {
  --tp-brown: var(--color-primary);
  --tp-dark: var(--color-secondary);
  --tp-amber: var(--color-accent);
  --tp-heading: var(--color-heading);
  --tp-on-brown: var(--color-accent-on-primary);
  --tp-on-amber: var(--color-primary-on-accent);
  --tp-on-dark: var(--color-on-secondary);
  --tp-amber-on-dark: var(--color-accent-on-secondary);
  --tp-link: color-mix(in srgb, var(--color-accent) 62%, black);
  --tp-ink: #000000;
  --tp-charcoal: #1a1a1a;
  --tp-muted: #6b6b6b;
  --tp-footer: color-mix(in srgb, var(--color-primary) 12%, #00090c);

  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  /* Rounds a soft-cornered font's corners (Fraunces), for a hand-made
     feel; a font without the SOFT axis (Archivo, Figtree) ignores it. */
  font-variation-settings: "SOFT" 100;
  font-size: 1.0625rem;
  line-height: 1.5;
}

body[data-layout="public"][data-theme="taproom"] a {
  color: inherit;
}

body[data-layout="public"][data-theme="taproom"] main a.underline {
  color: var(--tp-link);
  font-weight: 600;
}

body[data-layout="public"][data-theme="taproom"] a:focus-visible,
body[data-layout="public"][data-theme="taproom"] button:focus-visible {
  outline: 2px solid var(--tp-amber);
  outline-offset: 2px;
}

body[data-layout="public"][data-theme="taproom"] h1,
body[data-layout="public"][data-theme="taproom"] h2,
body[data-layout="public"][data-theme="taproom"] h3 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  line-height: 1.1;
}

body[data-layout="public"][data-theme="taproom"] main h1 {
  color: var(--tp-heading);
}

/* Square corners and light rules everywhere, like printed menus. */
body[data-layout="public"][data-theme="taproom"] main .rounded {
  border-radius: 0;
}

body[data-layout="public"][data-theme="taproom"] main .border {
  border-color: rgb(0 0 0 / 0.15);
}

/* ---------- Buttons: square, amber, colors swap on hover ---------- */

/* main a.site-button matches main a.underline's weight and comes later, so
   a section's "View ..." link (site-button underline) gets the button's
   colors rather than the link color. */
body[data-layout="public"][data-theme="taproom"] .site-button,
body[data-layout="public"][data-theme="taproom"] main a.site-button {
  display: inline-block;
  align-self: center;
  padding: 0.9rem 2.5rem;
  border-radius: 0;
  background: var(--tp-amber);
  color: var(--tp-on-amber);
  /* The body font, like the header's links, so a button reads as an
     action rather than another heading. */
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: background-color 0.15s, color 0.15s;
}

body[data-layout="public"][data-theme="taproom"] .site-button:hover,
body[data-layout="public"][data-theme="taproom"] main a.site-button:hover {
  background: var(--tp-brown);
  color: var(--tp-on-brown);
}

/* ---------- Header: solid brown, over the hero on the home page ---------- */

body[data-layout="public"][data-theme="taproom"] .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--tp-brown);
  transition: background-color 0.25s, box-shadow 0.25s;
}

body[data-layout="public"][data-theme="taproom"][data-header-overlay] .site-header {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
}

/* Until it turns solid, the header's text sits on the hero, so it takes
   a color that reads there instead of the accent, which may be too dark
   (or too light): white over a photo, which always has a dark overlay,
   and the secondary's readable text color over a plain (secondary) hero. */
body[data-layout="public"][data-theme="taproom"][data-header-overlay] .site-header:not([data-scrolled]) :is(.site-header__brand, .site-header__toast, .site-header__links a, .site-header__toggle) {
  color: var(--color-on-secondary);
}

body[data-layout="public"][data-theme="taproom"][data-header-overlay]:has(.site-hero--photo) .site-header:not([data-scrolled]) :is(.site-header__brand, .site-header__toast, .site-header__links a, .site-header__toggle) {
  color: #ffffff;
}

body[data-layout="public"][data-theme="taproom"][data-header-overlay] .site-header[data-scrolled] {
  background: var(--tp-brown);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.35);
}

body[data-layout="public"][data-theme="taproom"] .site-header nav {
  max-width: 1860px;
  margin: 0 auto;
  min-height: 4.5rem;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

body[data-layout="public"][data-theme="taproom"] .site-header__brand {
  color: var(--tp-on-brown);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1.1;
}

body[data-layout="public"][data-theme="taproom"] .site-header__logo {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.6);
}

/* The toast message (Theme header_toast): one short line under the logo
   and name, in the name's color. */
body[data-layout="public"][data-theme="taproom"] .site-header__toast {
  color: var(--tp-on-brown);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.2;
}

body[data-layout="public"][data-theme="taproom"] .site-header__links {
  gap: 0.5rem;
  flex-wrap: wrap;
}

body[data-layout="public"][data-theme="taproom"] .site-header__links a {
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  /* A tint of the header's readable text color: white on a dark header,
     dark on a light one, where a white tint would all but vanish. */
  background: color-mix(in srgb, var(--color-on-primary) 18%, transparent);
  color: var(--tp-on-brown);
  /* The body font, tracked out, so the links stay quieter than the
     heading-font name beside them and the page titles below. */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background-color 0.15s;
}

body[data-layout="public"][data-theme="taproom"] .site-header__links a:hover {
  background: color-mix(in srgb, var(--color-on-primary) 32%, transparent);
}

/* The social icons sit in the same pills as the text links, squared up. */
body[data-layout="public"][data-theme="taproom"] .site-header__links .social-links {
  gap: 0.5rem;
}

body[data-layout="public"][data-theme="taproom"] .site-header__links .social-links a {
  padding: 0.5rem;
}

body[data-layout="public"][data-theme="taproom"] .site-header__links .social-links a:hover {
  opacity: 1;
}

/* ---------- Header: narrow-screen hamburger nav ----------
 * The partial only renders the toggle button and data-collapsible on
 * .site-header__links when there is at least one nav link, so the
 * button itself only needs hiding above the phone breakpoint; the
 * collapse below it is scoped to [data-js] (site_header_controller.js
 * sets that on connect) so the links stay visible, wrapped as they
 * always have, without JavaScript. */

body[data-layout="public"][data-theme="taproom"] .site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tp-on-brown);
  cursor: pointer;
}

@media (max-width: 639px) {
  body[data-layout="public"][data-theme="taproom"] .site-header__toggle {
    display: inline-flex;
    flex-shrink: 0;
  }

  /* No room for the toggle beside the name and logo
     (site_header_controller.js sets data-compact): drop the logo and let
     the name wrap in its own column, rather than the toggle falling to a
     row of its own. */
  body[data-layout="public"][data-theme="taproom"] .site-header[data-compact] .site-header__identity {
    flex: 1 1 0;
    min-width: 0;
  }

  body[data-layout="public"][data-theme="taproom"] .site-header[data-compact] .site-header__brand {
    overflow-wrap: anywhere;
  }

  body[data-layout="public"][data-theme="taproom"] .site-header[data-compact] .site-header__logo {
    display: none;
  }

  body[data-layout="public"][data-theme="taproom"] .site-header[data-js] .site-header__links[data-collapsible] {
    display: none;
  }

  /* The panel: full width under the header row, a solid brown band (not
     the pill links or the overlay's on-hero color) so it reads over a
     hero photo in overlay mode too. */
  body[data-layout="public"][data-theme="taproom"] .site-header[data-js][data-open] .site-header__links[data-collapsible] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem 0;
    background: var(--tp-brown);
  }

  body[data-layout="public"][data-theme="taproom"] .site-header[data-js][data-open] .site-header__links[data-collapsible] a {
    min-height: 44px;
    padding: 0.75rem 0.9rem;
    background: none;
    border-radius: 0;
    color: var(--tp-on-brown);
  }

  body[data-layout="public"][data-theme="taproom"] .site-header[data-js][data-open] .site-header__links[data-collapsible] .social-links {
    padding: 0.5rem 0.9rem 0;
  }
}

/* ---------- Hero: photo under a dark overlay, logo front and center ---------- */

body[data-layout="public"][data-theme="taproom"] .site-hero {
  position: relative;
  min-height: 70vh;
  justify-content: center;
  padding: 7rem 1.25rem 6rem;
  background: var(--tp-dark);
  color: var(--tp-on-dark);
}

/* A photo always sits under a dark overlay, so its text stays white. */
body[data-layout="public"][data-theme="taproom"] .site-hero--photo {
  background: var(--tp-ink);
  color: #ffffff;
}

body[data-layout="public"][data-theme="taproom"] .site-hero__overlay {
  background: rgb(0 0 0 / 0.6);
}

body[data-layout="public"][data-theme="taproom"] .site-hero__content {
  gap: 1.5rem;
  animation: tp-fade-in 1.5s ease-out both;
}

body[data-layout="public"][data-theme="taproom"] .site-hero__logo {
  width: 9rem;
  height: 9rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.7);
}

body[data-layout="public"][data-theme="taproom"] .site-hero h1 {
  color: inherit;
  font-size: clamp(2.25rem, 7vw, 5rem);
  line-height: 1;
}

body[data-layout="public"][data-theme="taproom"] .site-hero--photo h1 {
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.5);
}

/* The city and state (Theme hero_location): a small tracked line tucked
   under the name, closer than the content's gap. */
body[data-layout="public"][data-theme="taproom"] .site-hero__location {
  margin-top: -0.75rem;
  color: inherit;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body[data-layout="public"][data-theme="taproom"] .site-hero--photo .site-hero__location {
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}

body[data-layout="public"][data-theme="taproom"] .site-hero__description {
  color: inherit;
  opacity: 0.85;
  font-size: 1.2rem;
}

body[data-layout="public"][data-theme="taproom"] .site-hero__scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 4px solid var(--tp-amber-on-dark);
  border-radius: 9999px;
  color: var(--tp-amber-on-dark);
  transition: background-color 0.15s, color 0.15s;
}

body[data-layout="public"][data-theme="taproom"] .site-hero--photo .site-hero__scroll {
  border-color: var(--tp-amber);
  color: var(--tp-amber);
}

body[data-layout="public"][data-theme="taproom"] .site-hero__scroll:hover {
  background: var(--tp-amber);
  color: var(--tp-on-amber);
}

/* The toast adds a line to the fixed header, so the hero starts lower. */
body[data-layout="public"][data-theme="taproom"]:has(.site-header__toast) .site-hero {
  padding-top: 8.5rem;
}

/* On phones the header's links wrap under the name, so the hero needs
   more room under the fixed header and a smaller logo. */
@media (max-width: 639px) {
  body[data-layout="public"][data-theme="taproom"] .site-hero {
    padding-top: 9.5rem;
  }

  body[data-layout="public"][data-theme="taproom"]:has(.site-header__toast) .site-hero {
    padding-top: 11rem;
  }

  /* A collapsed header (any nav links, once JS has marked it
     collapsible) is one row tall, like the desktop header, so it needs
     only the same room as desktop rather than the extra room a header
     that stays wrapped over several rows needs. */
  body[data-layout="public"][data-theme="taproom"]:has(.site-header[data-js] .site-header__links[data-collapsible]) .site-hero {
    padding-top: 7rem;
  }

  body[data-layout="public"][data-theme="taproom"]:has(.site-header[data-js] .site-header__links[data-collapsible]):has(.site-header__toast) .site-hero {
    padding-top: 8.5rem;
  }

  body[data-layout="public"][data-theme="taproom"] .site-hero__logo {
    width: 6rem;
    height: 6rem;
  }

  body[data-layout="public"][data-theme="taproom"] .site-hero__scroll {
    display: none;
  }
}

@media (min-width: 800px) {
  body[data-layout="public"][data-theme="taproom"] .site-hero {
    min-height: 88vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-layout="public"][data-theme="taproom"] .site-hero__content {
    animation: none;
  }
}

@keyframes tp-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Sections: generous, centered, big titles ---------- */

body[data-layout="public"][data-theme="taproom"] main > section:not(.site-hero) {
  padding: 4.5rem 1.25rem;
  align-items: center;
  gap: 2rem;
}

/* The specials, events, gallery, reviews, and blog pages' titles (and the menu page's first
   menu) open the page rather than a band, so they sit the same distance
   under the header as the content below them. */
body[data-layout="public"][data-theme="taproom"] main > section.menu-page,
body[data-layout="public"][data-theme="taproom"] main > section.specials-page,
body[data-layout="public"][data-theme="taproom"] main > section.gallery-page,
body[data-layout="public"][data-theme="taproom"] main > section.reviews-page,
body[data-layout="public"][data-theme="taproom"] main > section.events-page,
body[data-layout="public"][data-theme="taproom"] main > section.event-page,
body[data-layout="public"][data-theme="taproom"] main > section.blog-page {
  padding-top: 2rem;
}

body[data-layout="public"][data-theme="taproom"] main > section:not(.site-hero) > * {
  width: 100%;
  max-width: 70rem;
}

body[data-layout="public"][data-theme="taproom"] main > section > .site-button {
  width: auto;
}

body[data-layout="public"][data-theme="taproom"] .section-title {
  text-align: center;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  color: var(--tp-heading);
}

/* Dark bands: amber titles, white text. */
body[data-layout="public"][data-theme="taproom"] [data-testid="section-specials"],
body[data-layout="public"][data-theme="taproom"] [data-testid="section-events"] {
  color: #ffffff;
}

body[data-layout="public"][data-theme="taproom"] [data-testid="section-specials"] .section-title,
body[data-layout="public"][data-theme="taproom"] [data-testid="section-events"] .section-title {
  color: var(--tp-amber);
}

/* The hours box is the secondary color, which a brand may pick light, so
   its text and titles take colors that read on it. */
body[data-layout="public"][data-theme="taproom"] .hours-location {
  color: var(--tp-on-dark);
}

body[data-layout="public"][data-theme="taproom"] .hours-location .section-title {
  color: var(--tp-amber-on-dark);
}

/* ---------- Specials: dark block, amber price circles ---------- */

body[data-layout="public"][data-theme="taproom"] [data-testid="section-specials"] {
  background: var(--tp-charcoal);
}

body[data-layout="public"][data-theme="taproom"] main .special,
body[data-layout="public"][data-theme="taproom"] main .job-posting {
  align-items: center;
  padding: 1.5rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--tp-amber) 45%, transparent);
  text-align: center;
}

body[data-layout="public"][data-theme="taproom"] .special-when,
body[data-layout="public"][data-theme="taproom"] .job-posting__type {
  color: var(--tp-amber);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body[data-layout="public"][data-theme="taproom"] .special strong,
body[data-layout="public"][data-theme="taproom"] .job-posting strong {
  text-transform: uppercase;
  font-weight: 800;
}

/* ---------- Careers: same dark block as Specials ---------- */

body[data-layout="public"][data-theme="taproom"] [data-testid="section-careers"] {
  background: var(--tp-charcoal);
}

body[data-layout="public"][data-theme="taproom"] [data-testid="section-careers"] .job-posting .text-sm {
  color: rgb(255 255 255 / 0.75);
}

body[data-layout="public"][data-theme="taproom"] .special-price__dash {
  display: none;
}

/* The price circle gets its own line under the title, so a long title
   wraps on its own instead of leaving the circle beside its last word. */
body[data-layout="public"][data-theme="taproom"] .special-price {
  display: block;
  margin-top: 0.75rem;
}

body[data-layout="public"][data-theme="taproom"] .special-price__amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 3rem;
  padding: 0 0.5rem;
  border-radius: 9999px;
  background: var(--tp-amber);
  color: var(--tp-on-amber);
  font-weight: 800;
  font-size: 0.85rem;
  vertical-align: middle;
}

body[data-layout="public"][data-theme="taproom"] [data-testid="section-specials"] .special .text-sm {
  color: rgb(255 255 255 / 0.75);
}

/* The specials page sits on the light page background rather than the
   dark band, so its cards keep the body text color and a darkened accent. */
body[data-layout="public"][data-theme="taproom"] .specials-page .special-when {
  color: var(--tp-link);
}

/* ---------- Events: black band, amber date badges, two columns ---------- */

body[data-layout="public"][data-theme="taproom"] [data-testid="section-events"] {
  background: var(--tp-ink);
}

body[data-layout="public"][data-theme="taproom"] .event-list {
  display: grid;
  gap: 2.5rem 4rem;
}

body[data-layout="public"][data-theme="taproom"] .event {
  display: grid;
  grid-template-columns: 6rem 1fr;
  grid-template-areas: "badge title" "badge time";
  align-content: start;
  column-gap: 1.25rem;
}

body[data-layout="public"][data-theme="taproom"] .event-when {
  display: contents;
}

body[data-layout="public"][data-theme="taproom"] .event-date {
  grid-area: badge;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--tp-amber);
  color: var(--tp-on-amber);
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

body[data-layout="public"][data-theme="taproom"] .event-date__weekday { order: 1; font-size: 0.7rem; }
body[data-layout="public"][data-theme="taproom"] .event-date__day { order: 2; font-size: 2.4rem; font-stretch: 125%; margin: 0.15rem 0; }
body[data-layout="public"][data-theme="taproom"] .event-date__month { order: 3; font-size: 0.7rem; }
body[data-layout="public"][data-theme="taproom"] .event-date__comma { display: none; }

body[data-layout="public"][data-theme="taproom"] .event-title {
  grid-area: title;
  align-self: end;
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 1.6rem;
  line-height: 1.1;
  transition: color 0.15s;
}

body[data-layout="public"][data-theme="taproom"] .event-title:hover {
  color: var(--tp-amber);
}

body[data-layout="public"][data-theme="taproom"] .event-date__time {
  grid-area: time;
  color: rgb(255 255 255 / 0.75);
  font-size: 1rem;
}

@media (min-width: 800px) {
  body[data-layout="public"][data-theme="taproom"] .event-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Hours and location: dark brown box ---------- */

body[data-layout="public"][data-theme="taproom"] .hours-location {
  background: var(--tp-dark);
}

body[data-layout="public"][data-theme="taproom"] main > section.hours-location > * {
  max-width: 34rem;
}

body[data-layout="public"][data-theme="taproom"] .hours-location__day {
  max-width: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tp-amber-on-dark) 35%, transparent);
}

body[data-layout="public"][data-theme="taproom"] .hours-location a.underline {
  color: var(--tp-amber-on-dark);
}

body[data-layout="public"][data-theme="taproom"] .hours-location .social-links {
  justify-content: center;
  color: var(--tp-amber-on-dark);
}

/* ---------- The full menu page: straight into the menus' cards ---------- */

/* The header's Menu link already says where you are, so the "Menu" title
   stays for screen readers and search engines but takes no space. */
body[data-layout="public"][data-theme="taproom"] main > section.menu-page > .menu-page__masthead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body[data-layout="public"][data-theme="taproom"] .menu-block__title {
  align-self: flex-start;
  padding: 0.35rem 0.9rem;
  background: var(--tp-amber);
  color: var(--tp-on-amber);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

/* Jump buttons to the other menus: smaller than a section's button, set
   left under the first menu's title. The sticky header would cover a
   jumped-to menu's title without the scroll margin. */
body[data-layout="public"][data-theme="taproom"] .menu-jump__link {
  align-self: auto;
  padding: 0.55rem 1.4rem;
  font-size: 0.95rem;
}

body[data-layout="public"][data-theme="taproom"] .menu-block,
body[data-layout="public"][data-theme="taproom"] .review-card {
  scroll-margin-top: 7rem;
}

body[data-layout="public"][data-theme="taproom"] .menu-section__title {
  margin-top: 1.5rem;
  color: var(--tp-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
}

body[data-layout="public"][data-theme="taproom"] .menu-section__description {
  color: var(--color-text);
  font-size: 1rem;
}

body[data-layout="public"][data-theme="taproom"] .menu-section__description:empty {
  display: none;
}

/* ---------- Menu items: amber-topped cards, on the menu page and the
   home page's menu preview alike ---------- */

/* Lighter than the page, so the cards lift off a colored background too. */
body[data-layout="public"][data-theme="taproom"] :is(.menu-page, [data-testid="section-menu"]) .menu-item {
  padding: 1.25rem 1.25rem 1.4rem;
  background: color-mix(in srgb, var(--color-background) 55%, white);
  border: 1px solid rgb(0 0 0 / 0.1);
  border-top: 5px solid var(--tp-amber);
}

body[data-layout="public"][data-theme="taproom"] :is(.menu-page, [data-testid="section-menu"]) .menu-item__name {
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 800;
}

body[data-layout="public"][data-theme="taproom"] :is(.menu-page, [data-testid="section-menu"]) .menu-item__name a.underline {
  color: inherit;
  font-weight: inherit;
  text-decoration-color: var(--tp-amber);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

body[data-layout="public"][data-theme="taproom"] :is(.menu-page, [data-testid="section-menu"]) .menu-item__description {
  display: block;
  color: var(--color-text);
  opacity: 0.85;
  font-size: 0.95rem;
  line-height: 1.45;
}

body[data-layout="public"][data-theme="taproom"] :is(.menu-page, [data-testid="section-menu"]) .menu-item__prices {
  color: var(--tp-heading);
  font-size: 1rem;
  font-weight: 800;
}

/* ---------- On tap / wine list: a printed tap list, no photos ---------- */

body[data-layout="public"][data-theme="taproom"] main > section > .beer-list,
body[data-layout="public"][data-theme="taproom"] main > section > .wine-list {
  max-width: 56rem;
  gap: 0 5rem;
  grid-template-columns: 1fr;
}

body[data-layout="public"][data-theme="taproom"] .beer-card,
body[data-layout="public"][data-theme="taproom"] .wine-card {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  row-gap: 0.1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgb(0 0 0 / 0.12);
}

body[data-layout="public"][data-theme="taproom"] .beer-card {
  grid-template-areas: "brewery abv" "name abv" "style abv";
}

body[data-layout="public"][data-theme="taproom"] .wine-card {
  grid-template-areas: "winery vintage" "name vintage" "type vintage" "varietal vintage";
}

body[data-layout="public"][data-theme="taproom"] .beer-card__photo,
body[data-layout="public"][data-theme="taproom"] .beer-card__sep,
body[data-layout="public"][data-theme="taproom"] .wine-card__photo,
body[data-layout="public"][data-theme="taproom"] .wine-card__sep {
  display: none;
}

body[data-layout="public"][data-theme="taproom"] .beer-card__meta,
body[data-layout="public"][data-theme="taproom"] .wine-card__meta {
  display: contents;
}

body[data-layout="public"][data-theme="taproom"] .beer-card__brewery,
body[data-layout="public"][data-theme="taproom"] .wine-card__winery {
  color: var(--tp-muted);
  font-size: 0.95rem;
}

body[data-layout="public"][data-theme="taproom"] .beer-card__brewery { grid-area: brewery; }
body[data-layout="public"][data-theme="taproom"] .wine-card__winery { grid-area: winery; }

body[data-layout="public"][data-theme="taproom"] .beer-card__name,
body[data-layout="public"][data-theme="taproom"] .wine-card__name {
  grid-area: name;
  color: var(--tp-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.1rem;
}

body[data-layout="public"][data-theme="taproom"] .beer-card__style,
body[data-layout="public"][data-theme="taproom"] .wine-card__type,
body[data-layout="public"][data-theme="taproom"] .wine-card__varietal {
  color: var(--tp-muted);
  font-size: 0.85rem;
}

body[data-layout="public"][data-theme="taproom"] .beer-card__style { grid-area: style; }
body[data-layout="public"][data-theme="taproom"] .wine-card__type { grid-area: type; }
body[data-layout="public"][data-theme="taproom"] .wine-card__varietal { grid-area: varietal; }

body[data-layout="public"][data-theme="taproom"] .beer-card__abv,
body[data-layout="public"][data-theme="taproom"] .wine-card__vintage {
  align-self: center;
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.95rem;
}

body[data-layout="public"][data-theme="taproom"] .beer-card__abv { grid-area: abv; }
body[data-layout="public"][data-theme="taproom"] .wine-card__vintage { grid-area: vintage; }

@media (min-width: 800px) {
  body[data-layout="public"][data-theme="taproom"] .beer-list,
  body[data-layout="public"][data-theme="taproom"] .wine-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Blog ---------- */

body[data-layout="public"][data-theme="taproom"] [data-testid="section-blog"] img {
  border-radius: 0;
}

body[data-layout="public"][data-theme="taproom"] [data-testid="section-blog"] strong {
  color: var(--tp-heading);
  text-transform: uppercase;
  font-weight: 800;
}

/* ---------- Footer: near-black, amber, in columns ---------- */

body[data-layout="public"][data-theme="taproom"] .site-footer {
  display: grid;
  gap: 1.5rem 4rem;
  justify-content: center;
  padding: 3.5rem 1.25rem;
  border: 0;
  background: var(--tp-footer);
  color: var(--tp-amber);
  font-size: 0.95rem;
}

body[data-layout="public"][data-theme="taproom"] .site-footer__name {
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  font-size: 1.35rem;
  line-height: 1.1;
}

body[data-layout="public"][data-theme="taproom"] .site-footer__hours {
  color: rgb(255 255 255 / 0.8);
}

/* A row of its own under the footer's columns. */
body[data-layout="public"][data-theme="taproom"] .site-footer .social-links {
  grid-column: 1 / -1;
  justify-content: center;
}

body[data-layout="public"][data-theme="taproom"] .site-footer .social-links svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 800px) {
  body[data-layout="public"][data-theme="taproom"] .site-footer {
    grid-template-columns: repeat(3, auto);
    align-items: start;
  }
}

/* The reviews section's "View reviews" button and "Write a review" link
   share a row, centered like the theme's other section buttons. */
body[data-layout="public"][data-theme="taproom"] .reviews-actions {
  justify-content: center;
}