/* HWY 50 Brewery draft: shared styles.
   Colours and type come from the live BeTheme setup (archive, 7 Oct 2026).
   Page-only styles belong in /assets/pages/<page>.css, never here. */

/* ---------- Tokens ---------- */
:root {
  /* Brand and band colours (live theme values) */
  --c-yellow: #fad819;        /* menu hover and current page, logo stripes */
  --c-band-yellow: #ffd23f;   /* home intro band, construction band */
  --c-band-pale: #fbf2c0;     /* home "The Taproom" band */
  --c-band-light: #f7f7f7;    /* home blog teaser band */
  --c-band-dark: #484a47;     /* tap list and menu bands (live class "dark") */
  --c-band-brick: #914b43;    /* construction page bands */
  --c-black: #000;
  --c-white: #fff;

  /* Text */
  --c-text: #0a0a0a;          /* body text */
  --c-heading: #161922;       /* h1 to h6 */
  --c-link: #042fdb;          /* links */
  --c-link-hover: #444;
  --c-theme: #0079c1;         /* live theme blue #0095eb, darkened to pass 4.5:1 on white */
  --c-theme-live: #0095eb;    /* live value, only for decoration such as icons and arrows */
  --c-rust: #993300;          /* "HOURS" and "RESERVATIONS:" labels on the yellow band */
  --c-price: #fdd541;         /* sizes, prices and notes on the dark band */
  --c-on-dark: #fff;
  --c-on-dark-muted: #c8c8c8; /* links in dark bands (live: white at 66%) */

  /* Header, menu, footer */
  --c-header: #181818;        /* live: rgba(0,0,0,.8) over #797979 */
  --c-header-over: rgba(0, 0, 0, .8);
  --c-menu: #fff;
  --c-menu-active: var(--c-yellow);
  --c-menu-plus: #9a9a9a;
  --c-submenu-bg: #595959;    /* live #999 failed contrast with white text */
  --c-panel: #191919;         /* phone menu panel (live "side slide") */
  --c-panel-link: #a6a6a6;
  --c-footer: #303030;
  --c-footer-text: #e8e8e8;
  --c-footer-link: #4bacfb;
  --c-instagram: #f00075;
  --c-facebook: #0866ff;

  /* Lines and forms */
  --c-rule: rgba(0, 0, 0, .08);
  --c-input-text: #626262;
  --c-input-border: #8f8f8f;
  --c-input-focus-bg: #e9f5fc;
  --c-input-focus-text: var(--c-text); /* live #1982c2 measured 3.78:1 on the focus background */

  /* Focus ring: navy on light backgrounds, yellow on dark ones */
  --c-focus: #233c7f;

  /* Type (live: body Karla, headings Rubik, top menu Roboto) */
  --f-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --f-head: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --f-menu: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;

  /* Type scale, desktop (live sizes). Pages size text in em so large text mode scales it. */
  --fs-body: 20px;  --lh-body: 32px;
  --fs-h1: 48px;    --lh-h1: 58px;
  --fs-h2: 32px;    --lh-h2: 42px;
  --fs-h3: 25px;    --lh-h3: 35px;
  --fs-h4: 21px;    --lh-h4: 27px;   /* live h4: Rubik 500 at 21/27 */
  --fs-h5: 18px;    --lh-h5: 27px;
  --fs-h6: 14px;    --lh-h6: 25px;   /* live h6: Rubik 400 at 14/25 */
  --fs-fancy: 42px; --lh-fancy: 50px;
  --fs-menu: 15px;
  --fs-small: .8em;

  /* Layout */
  --container: 1220px;        /* live section width; columns keep 12px gutters inside it */
  --gutter: 12px;
  --measure: 708px;           /* live "three-fifth" text column */
  --header-h: 140px;
  --band-pad: 70px;
  --band-bg: #fff;            /* each band resets this so heading notches match */
}

/* Laptops and tablets in landscape: the live theme narrows its sections to 940px here */
@media (min-width: 960px) and (max-width: 1239px) {
  :root { --container: 940px; }
}

@media (max-width: 959px) {
  :root {
    --fs-body: 17px;  --lh-body: 27px;
    --fs-h1: 40px;    --lh-h1: 48px;
    --fs-h2: 27px;    --lh-h2: 36px;
    --fs-h3: 21px;    --lh-h3: 30px;
    --fs-h4: 19px;    --lh-h4: 28px;
    --fs-fancy: 38px; --lh-fancy: 44px;
    --gutter: 24px;
    --band-pad: 56px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-body: 16px;  --lh-body: 25px;
    --fs-h1: 34px;    --lh-h1: 42px;
    --fs-h2: 24px;    --lh-h2: 32px;
    --fs-h3: 19px;    --lh-h3: 26px;
    --fs-h4: 18px;    --lh-h4: 26px;
    --fs-fancy: 30px; --lh-fancy: 36px;
    --gutter: 33px;
    --band-pad: 44px;
  }
}

/* Large text mode (toolbar). Same sizes as the live WP Accessibility plugin. */
html.a11y-fontsize {
  --fs-body: 24px;  --lh-body: 38px;
  --fs-h1: 48px;    --lh-h1: 58px;
  --fs-h2: 40px;    --lh-h2: 50px;
  --fs-h3: 32px;    --lh-h3: 42px;
  --fs-h4: 28px;    --lh-h4: 38px;
  --fs-h5: 24px;    --lh-h5: 34px;
  --fs-h6: 22px;    --lh-h6: 32px;
  --fs-fancy: 48px; --lh-fancy: 58px;
  --fs-menu: 17px;
}
@media (max-width: 767px) {
  html.a11y-fontsize {
    --fs-body: 21px;  --lh-body: 33px;
    --fs-h1: 38px;    --lh-h1: 46px;
    --fs-h2: 32px;    --lh-h2: 40px;
    --fs-h3: 27px;    --lh-h3: 35px;
    --fs-h4: 24px;    --lh-h4: 32px;
    --fs-fancy: 38px; --lh-fancy: 46px;
    --fs-menu: 18px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--c-white); }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* keep the footer at the bottom on short pages */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main { flex: 1 0 auto; }
/* On a tall screen a short page leaves space under its last band. Fill it with
   that band's colour so the band seems to run down to the footer. */
body > main:has(> .band--yellow:last-child) { background: var(--c-band-yellow); }
body > main:has(> .band--pale:last-child) { background: var(--c-band-pale); }
body > main:has(> .band--light:last-child) { background: var(--c-band-light); }
body > main:has(> .band--dark:last-child) { background: var(--c-band-dark); }
body > main:has(> .band--black:last-child) { background: var(--c-black); }
body > main:has(> .band--brick:last-child) { background: var(--c-band-brick); }
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 15px;
  color: var(--c-heading);
  font-family: var(--f-head);
  font-weight: 400;
  letter-spacing: 0;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 300; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 500; }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: 700; }
h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); }
p { margin: 0 0 15px; }
ul, ol { margin: 0 0 15px; padding-left: 1.5em; }
li { margin: 0; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }
img, video { max-width: 100%; height: auto; }
/* Browsers do not pass the page font into form controls on their own */
button, input, select, textarea { font: inherit; }
img { border: 0; }
figure { margin: 0 0 15px; }
hr { border: 0; border-top: 1px solid var(--c-rule); margin: 30px 0; }
table { border-collapse: collapse; }

a { color: var(--c-link); text-decoration: underline; text-underline-offset: .12em; }
a:hover { color: var(--c-link-hover); }

/* WordPress image alignment classes, kept so copied markup still lines up */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; margin: 0 0 15px 20px; }
.alignleft { float: left; margin: 0 20px 15px 0; }
.clearfix::after { content: ""; display: table; clear: both; }

/* ---------- Accessibility helpers ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: 12px; top: -200px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--c-yellow);
  color: #000;
  font-family: var(--f-menu);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
}
.skip-link:focus { top: 0; color: #000; }
/* The tab hangs from the very top of the window, so a ring drawn outside it would lose its
   top edge there. Its ring is black and drawn inside the yellow tab, 6px clear of the words. */
.skip-link:focus-visible { outline: 3px solid #000; outline-offset: -6px; }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }
main:focus { outline: none; }

.site-header, .site-footer, .band--dark, .band--black, .band--brick, .band--photo, .a11y-toolbar {
  --c-focus: var(--c-yellow);
}

/* Controls whose box starts at the very top of the window (the desktop menu row, 80px tall
   from y 0, and the logo on tablets and phones, whose box starts at y 0) would lose the top
   edge of a ring drawn outside them. Their ring is a frame drawn on the box instead (see
   the header rules): along its top and bottom edges, where the box has room round the
   words or the logo, and 5px outside it at the sides, where every other ring sits. A whole
   rectangle on every page. */
.menu__link:focus-visible::after,
.site-logo:focus-visible::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  right: -5px;
  border: 3px solid var(--c-focus);
  pointer-events: none;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.measure { max-width: var(--measure); margin-left: auto; margin-right: auto; }

/* Columns. Children of .grid are the columns; they stack below 768px. */
.grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .grid--gap-0 { gap: 0; }
  .grid--gap-lg { gap: 48px; }
}
.grid--center { align-items: center; }

/* Section bands. Every section of a page is a .band; pick one colour modifier. */
.band { position: relative; padding-top: var(--band-pad); padding-bottom: var(--band-pad); background: var(--band-bg); }
.band--tight { padding-top: 30px; padding-bottom: 30px; }
.band--flush-top { padding-top: 0; }
.band--flush-bottom { padding-bottom: 0; }

.band--yellow { --band-bg: var(--c-band-yellow); }
.band--pale { --band-bg: var(--c-band-pale); }
.band--light { --band-bg: var(--c-band-light); }
.band--white { --band-bg: #fff; }

.band--dark, .band--black, .band--brick {
  color: var(--c-on-dark);
}
.band--dark { --band-bg: var(--c-band-dark); }
.band--black { --band-bg: var(--c-black); }
.band--brick { --band-bg: var(--c-band-brick); }
.band--dark :is(h1, h2, h3, h4, h5, h6),
.band--black :is(h1, h2, h3, h4, h5, h6),
.band--brick :is(h1, h2, h3, h4, h5, h6),
.band--photo :is(h1, h2, h3, h4, h5, h6) { color: var(--c-on-dark); }
.band--dark a, .band--black a, .band--brick a { color: var(--c-on-dark-muted); }
.band--dark a:hover, .band--black a:hover, .band--brick a:hover { color: var(--c-on-dark); }
.band--dark .price, .band--black .price { color: var(--c-price); }

/* Photo band: set the picture with style="--band-img:url(/wp-content/uploads/...)".
   Add .band--hero for a page-top title band. */
.band--photo {
  --band-bg: #797979;
  color: var(--c-on-dark);
  background-color: var(--band-bg);
  background-image: var(--band-img, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.band--hero { min-height: 560px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 767px) { .band--hero { min-height: 280px; } }
@media (hover: hover) and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .band--parallax { background-attachment: fixed; }
}

/* Page-top title picture (Our Beers, Live Music, About, Contact Us). Live: a full-width
   section with a photo background and a transparent 1920 wide title PNG on top.
   Here the photo is a real <img> (so it keeps its alt text) cropped to fill the band,
   and the title picture sets the height. Markup:
   <section class="title-hero"><img class="title-hero__photo" ...><img class="title-hero__title" ...></section>
   The title may also be an <h1 class="title-hero__title"> holding the <img>. */
.title-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #797979;
  line-height: 0;
}
.title-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.title-hero__title { position: relative; display: block; width: 100%; height: auto; margin: 0; line-height: 0; }
.title-hero__title img { display: block; width: 100%; height: auto; }

/* Small text helpers matching the live inline sizes */
.small { font-size: var(--fs-small); }
.centered { text-align: center; }
.label-rust { color: var(--c-rust); font-weight: 700; }
.price { color: var(--c-price); }

/* ---------- Fancy headings (live BeTheme "fancy heading") ---------- */
.fancy-heading {
  text-align: center;
  margin: 0 0 40px;
}
.fancy-heading__title {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 400;
  font-size: var(--fs-fancy);
  line-height: var(--lh-fancy);
}
/* Line style: blue title over a thin rule with a small notch (Privacy Policy, Job Application) */
.fancy-heading--line { position: relative; padding-bottom: 20px; border-bottom: 1px solid var(--c-rule); }
.fancy-heading--line .fancy-heading__title { color: var(--c-theme); }
.fancy-heading--line::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -7px;
  width: 12px; height: 12px;
  background: var(--band-bg);
  border-right: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  transform: translateX(-50%) rotate(45deg);
}
/* Arrow style: dark title between two small blue arrows (home blog teaser) */
.fancy-heading--arrows .fancy-heading__title { color: var(--c-heading); }
.fancy-heading--arrows .fancy-heading__title::before,
.fancy-heading--arrows .fancy-heading__title::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-top: .3em solid transparent;
  border-bottom: .3em solid transparent;
  vertical-align: .12em;
}
.fancy-heading--arrows .fancy-heading__title::before { border-left: .42em solid var(--c-theme-live); margin-right: .4em; }
.fancy-heading--arrows .fancy-heading__title::after { border-right: .42em solid var(--c-theme-live); margin-left: .4em; }

/* ---------- Buttons ---------- */
.button, button.button, input[type="submit"].button {
  display: inline-block;
  padding: 16px 20px;
  border: 0;
  border-radius: 0;
  background: var(--c-band-light);
  color: #4a4a4a;
  font-family: var(--f-body);
  font-size: 1em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.button:hover { background: #eaeaea; color: #222; }
.button--theme { background: var(--c-theme); color: #fff; }
.button--theme:hover { background: #00609a; color: #fff; }
.button--dark { background: #000; color: #fff; }
.button--dark:hover { background: #333; color: #fff; }

/* ---------- Forms (base only; WPForms details go in the page CSS) ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"],
input[type="date"], input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-input-border);
  border-radius: 2px;
  background: #fff;
  color: var(--c-input-text);
  font-family: var(--f-body);
  font-size: 1em;
  line-height: 1.4;
}
input:focus, select:focus, textarea:focus {
  background: var(--c-input-focus-bg);
  color: var(--c-input-focus-text);
}
::placeholder { color: #6b6b6b; opacity: 1; }
label { display: block; font-weight: 700; margin-bottom: 6px; }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 60;
  background: var(--c-header);
  color: var(--c-menu);
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: var(--header-h);
  padding: 0 88px 0 68px;
}
.site-logo {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  line-height: 0;
  z-index: 2;
}
.site-logo img { display: block; height: 110px; width: auto; max-width: none; }

.menu-toggle, .site-nav__close { display: none; }

.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.menu {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu > li { position: relative; display: flex; align-items: center; margin-right: 4px; }
.menu > li:last-child { margin-right: 0; }
.menu__link {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 20px;
  border: 0;
  background: none;
  color: var(--c-menu);
  font-family: var(--f-menu);
  font-size: var(--fs-menu);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.menu__link:hover,
.menu > li:hover > .menu__link,
.menu__link[aria-current="page"],
.menu > li.is-current-parent > .menu__link { color: var(--c-menu-active); }
/* Desktop: the menu row starts at the top of the window, so the ring is the frame on the
   link's 80px box (see "Controls whose box starts at the very top" above) */
@media (min-width: 1240px) {
  .menu__link { position: relative; }
  .menu__link:focus-visible { outline: none; }
  /* the desktop logo sits 15px down, so its own ring fits whole */
  .site-logo:focus-visible::after { content: none; }
}
@media (max-width: 1239px) {
  .menu__link:focus-visible::after { content: none; }
}
.menu__plus {
  display: inline-block;
  margin-left: 12px;
  color: var(--c-menu-plus);
  font-size: 15px;
  font-weight: 300;
  line-height: 1;
}
/* "Beer & Food" is a button: keep its plus inside the label */
.menu__parent { padding-right: 14px; }
.menu__parent + .submenu { left: 0; }
/* "Contact Us" is a link with its own toggle for the submenu: a 44 by 44 square right
   after the link, so the two tap areas meet but never overlap. Its focus ring is drawn
   inside the square, 4px clear of the link's words. */
.has-sub > a.menu__link { padding-right: 4px; }
.submenu-toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-menu-plus);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.submenu-toggle:hover, .submenu-toggle[aria-expanded="true"] { color: var(--c-menu-active); }
.submenu-toggle:focus-visible { outline-offset: -3px; }

.submenu {
  display: none;
  position: absolute;
  top: 80px;
  left: 0;
  z-index: 70;
  min-width: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--c-submenu-bg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}
.menu--right .submenu { left: auto; right: 0; }
/* every submenu link taps as at least 44px tall, its words centred in it */
.submenu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 20px;
  color: #fff;
  font-family: var(--f-menu);
  font-size: var(--fs-menu);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.submenu a:hover, .submenu a[aria-current="page"] { color: var(--c-menu-active); background: rgba(0, 0, 0, .12); }
.has-sub.is-open > .submenu { display: block; }
@media (hover: hover) and (min-width: 1240px) {
  .has-sub:hover > .submenu { display: block; }
}

/* Home page: header sits over the hero picture (body class "header-over", see CONVENTIONS.md) */
@media (min-width: 768px) {
  body.header-over .site-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: var(--c-header-over);
  }
}

/* Collapsed menu: phones and tablets (live breakpoint 1240px) */
@media (max-width: 1239px) {
  :root { --header-h: 110px; }
  .site-header__inner { align-items: center; padding: 0 15px 0 24px; }
  .site-logo { position: relative; top: auto; left: auto; transform: none; padding: 15px 0; }
  .site-logo img { height: 80px; }
  /* the logo's box starts at the top of the window: its ring is the frame on the box */
  .site-logo:focus-visible { outline: none; }

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: none;
    color: var(--c-theme-live);
    cursor: pointer;
  }
  .menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
    display: block;
    width: 26px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
  }
  .menu-toggle__bars { position: relative; }
  .menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .menu-toggle__bars::before { top: -8px; }
  .menu-toggle__bars::after { top: 8px; }

  .site-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 100;
    display: block;
    width: min(300px, 86vw);
    padding: 64px 0 40px;
    overflow-y: auto;
    background: var(--c-panel);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .site-nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform .3s ease, visibility 0s;
  }
  .site-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px; right: 10px;
    width: 44px; height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-panel-link);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }
  .site-nav__close:hover { color: #fff; }
  .menu { display: block; }
  .menu > li { display: flex; flex-wrap: wrap; align-items: center; }
  .menu__link {
    flex: 1 1 auto;
    height: auto;
    min-height: 44px;
    padding: 11px 5px 10px 24px;
    color: var(--c-panel-link);
    font-size: max(16px, var(--fs-menu));
    white-space: normal;
    text-align: left;
  }
  .menu__link:hover,
  .menu > li:hover > .menu__link { color: #fff; }
  .menu__link[aria-current="page"],
  .menu > li.is-current-parent > .menu__link { color: #fff; }
  .menu__parent { justify-content: space-between; padding-right: 24px; }
  .menu__plus { font-size: 20px; }
  .submenu-toggle { width: 44px; height: 44px; margin-right: 12px; font-size: 20px; }
  .submenu {
    position: static;
    flex: 1 0 100%;
    min-width: 0;
    background: rgba(255, 255, 255, .025);
    box-shadow: none;
  }
  .submenu a {
    padding: 11px 20px 10px 40px;
    color: var(--c-panel-link);
    font-size: max(16px, var(--fs-menu));
    white-space: normal;
  }
  .submenu a:hover, .submenu a[aria-current="page"] { color: #fff; background: none; }
  /* The panel scrolls, so it clips a ring drawn outside an item, and in high contrast each
     item's black box hides the bottom of the ring above it: panel rings sit inside the item,
     as the submenu toggle's does */
  .menu__link:focus-visible,
  .submenu a:focus-visible { outline-offset: -3px; }

  body.nav-open { overflow: hidden; }
  /* Dim the page behind the panel. The panel lives inside the header (z-index 60),
     so the dimmer sits just under it and the toolbar drops below the dimmer. */
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, .6);
  }
  body.nav-open .a11y-toolbar { z-index: 50; }
}
@media (max-width: 767px) {
  :root { --header-h: 60px; }
  .site-header { background: #000; }
  .site-header__inner { padding: 0 8px 0 16px; }
  .site-logo { padding: 5px 0; }
  .site-logo img { height: 50px; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-footer);
  color: var(--c-footer-text);
  padding: 100px 0 70px;
}
.site-footer__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.site-footer p { margin: 0 0 30px; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--c-footer-link); }
.site-footer a:hover { color: #9fd1fd; }
/* The address (directions), phone (tap to call) and EMAIL US links: each is one box, so
   the focus ring is a single rectangle round the words. */
.site-footer__col p > a { position: relative; display: inline-block; }
/* Every footer link taps as at least 44 by 44 (America's floor): an invisible ::before,
   centred on the link, at least 44px each way. Nothing moves and the focus ring still hugs
   the words or the circle. Areas never meet: the lines have 30px between them and grow at
   most 9.5px a side (a 25px line), the circles have 12px and grow 4px a side. */
.site-footer__col p > a::before,
.site-footer .social-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
.site-footer__col--right { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.site-footer__seal { display: block; width: 88px; height: 150px; flex: none; }
.social-links { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.social-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: #fff;
}
.site-footer .social-link, .site-footer .social-link:hover { color: #fff; }
.social-link svg { width: 24px; height: 24px; fill: currentColor; }
.social-link--instagram { background: var(--c-instagram); }
.social-link--facebook { background: var(--c-facebook); }
.social-link:hover { transform: scale(1.08); }
@media (max-width: 767px) {
  .site-footer { padding: 70px 0 50px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Accessibility toolbar (live WP Accessibility look) ---------- */
.a11y-toolbar {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  transform: translateY(-50%);
  border-radius: 6px 0 0 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 2px 8px rgba(0, 0, 0, .25);
  overflow: hidden;
}
/* Each button is 44 by 44 at every width (America's floor), so neither one's tap
   area takes in the other's. The 1px line between them is inside the lower one. */
.a11y-toolbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: #e2e2e2;
  color: #111;
  font-family: var(--f-menu);
  cursor: pointer;
}
.a11y-toolbar__btn + .a11y-toolbar__btn { border-top: 1px solid #fff; }
.a11y-toolbar__btn:hover { background: #fff; }
.a11y-toolbar__btn[aria-pressed="true"] { background: #111; color: #fff; }
.a11y-toolbar__btn:focus-visible { outline: 3px solid #233c7f; outline-offset: -3px; }
.a11y-toolbar__btn[aria-pressed="true"]:focus-visible { outline-color: var(--c-yellow); }
.a11y-toolbar__btn svg { width: 22px; height: 22px; fill: currentColor; }
.a11y-toolbar__tt { font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.a11y-toolbar__tt small { font-size: 13px; }

/* ---------- High contrast mode (toolbar) ---------- */
html.a11y-contrast, html.a11y-contrast body { background: #000 !important; }
html.a11y-contrast body *:not(img):not(svg):not(path):not(video) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.a11y-contrast a,
html.a11y-contrast a * { color: #ff0 !important; text-decoration: underline !important; }
html.a11y-contrast .menu__link,
html.a11y-contrast .submenu a { text-decoration: none !important; }
html.a11y-contrast .menu__link[aria-current="page"],
html.a11y-contrast .submenu a[aria-current="page"] { text-decoration: underline !important; }
html.a11y-contrast .social-link svg,
html.a11y-contrast .a11y-toolbar svg { fill: #ff0 !important; }
html.a11y-contrast .social-link { border: 2px solid #ff0 !important; }
html.a11y-contrast .a11y-toolbar__btn { border: 1px solid #fff !important; }
html.a11y-contrast .a11y-toolbar__btn[aria-pressed="true"] { background: #ff0 !important; color: #000 !important; }
html.a11y-contrast .a11y-toolbar__btn[aria-pressed="true"] svg { fill: #000 !important; }
/* the TT letters are spans, which the rule above paints black and white: pressed, they
   take the button's own black on yellow, with no box of their own */
html.a11y-contrast .a11y-toolbar__btn[aria-pressed="true"] .a11y-toolbar__tt,
html.a11y-contrast .a11y-toolbar__btn[aria-pressed="true"] .a11y-toolbar__tt small { background-color: transparent !important; color: #000 !important; }
html.a11y-contrast .menu-toggle__bars,
html.a11y-contrast .menu-toggle__bars::before,
html.a11y-contrast .menu-toggle__bars::after { background: #ff0 !important; }
html.a11y-contrast .fancy-heading--line::after { display: none; }
html.a11y-contrast .fancy-heading--arrows .fancy-heading__title::before { border-left-color: #fff !important; }
html.a11y-contrast .fancy-heading--arrows .fancy-heading__title::after { border-right-color: #fff !important; }
html.a11y-contrast input, html.a11y-contrast select, html.a11y-contrast textarea { border: 2px solid #fff !important; }
html.a11y-contrast { --c-focus: #ff0; }
html.a11y-contrast :focus-visible { outline-color: #ff0 !important; }
/* A pressed toolbar button is yellow in high contrast, so a yellow ring would not show:
   its focus ring is black, drawn inside the button (the toolbar clips anything outside) */
html.a11y-contrast .a11y-toolbar__btn[aria-pressed="true"]:focus-visible { outline: 3px solid #000 !important; outline-offset: -5px; }
html.a11y-contrast .skip-link:focus { background: #ff0 !important; color: #000 !important; }
html.a11y-contrast .skip-link:focus-visible { outline-color: #000 !important; }
/* the frames drawn for the menu row and the logo take the high contrast yellow too */
html.a11y-contrast .menu__link:focus-visible::after,
html.a11y-contrast .site-logo:focus-visible::after { border-color: #ff0; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .band--parallax { background-attachment: scroll !important; }
  .social-link:hover { transform: none; }
}

/* The live phone menu ends with the Facebook and Instagram links; the
   desktop bar does not show them (they sit in the footer there). */
.site-nav__social { display: none; }
@media (max-width: 1239px) {
  /* inset 24px like the menu items above, and each link 44px tall to tap */
  .site-nav__social { display: flex; gap: 18px; margin: 28px 0 0; padding: 0 24px; list-style: none; }
  .site-nav__social a { display: inline-flex; align-items: center; min-height: 44px; color: #a6a6a6; text-decoration: underline; }
  .site-nav__social a:hover, .site-nav__social a:focus-visible { color: #fff; }
}

/* ---------- One logo per page (site.js) ----------
   While the big logo on home or Live Music waits and flies up, the header's own logo
   holds its place unseen; once it lands the big copy goes. */
html.hwy-logo-fly .site-logo img { opacity: 0; }
html.hwy-logo-landed .home-hero__logo { visibility: hidden; }
/* the Live Music copy is the h1's name ("Hwy 50 Brewery"), so it only goes see-through */
html.hwy-logo-landed .lm-hero__title img { opacity: 0; }