/*
Theme Name: M.B. Haskett
Theme URI: https://sitereboots.com/
Author: Site Reboots
Author URI: https://sitereboots.com/
Description: Block theme for M.B. Haskett Delicatessen, Sioux Falls.
Version: 1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: haskett
*/

/* ===========================================================================
   The idea
   ---------------------------------------------------------------------------
   The back wall of M.B. Haskett's dining room is built out of salvaged boards
   nailed up horizontally, some left raw, some painted blue, mint, grey and
   maroon by whoever had a brush. It is in the background of half their own
   photographs. So the page is a stack of boards:

     · every band is a plank, and butts straight into the next one
     · the seam between two planks is a 3px rule in a contrasting plank colour
     · the colours are measured off that wall, not picked off a mood board
     · nothing is a floating card, because nothing on that wall floats

   mechanics.css has already loaded and owns all the behaviour. This file is
   only the skin. Read the contract at the top of mechanics.css before adding
   a navigation rule — in particular, anything for the desktop bar must sit
   inside @media (min-width:52.0625rem) or it also applies on a phone.
   ========================================================================= */

@import url("assets/mechanics.css");

/* ------------------------------------------------------------- tokens ---- */

:root {
  /* Measured off their own photographs. haskettwall.JPG gives the painted
     planks; MBH+LOGO.png gives the ink. */
  --mbh-ink:      #241C17;   /* warm near-black, their wordmark warmed      */
  --mbh-ink-2:    #3C332C;   /* body text, 10.55 on mint                    */
  --mbh-muted:    #6B5C50;   /* 5.49 on mint, 5.11 on pine                  */
  --mbh-paper:    #E9EFE6;   /* mint wash: the mint plank taken a long way up */
  --mbh-pine:     #EFE4D4;   /* sapwood: the raw pine boards, lifted        */
  --mbh-denim:    #20394F;   /* the blue plank, darkened to carry chalk     */
  --mbh-denim-lo: #2C4C66;   /* one step up, for seams inside the dark band */
  --mbh-oxblood:  #8E2F33;   /* the maroon plank, opened up. Links.         */
  --mbh-oxblood-d:#73252A;   /* hover                                       */
  --mbh-mint:     #8BC5AB;   /* the mint plank itself. Rules and highlights. */
  --mbh-sap:      #C9A27C;   /* raw pine at full strength. Seams only.      */
  --mbh-rule:     #D2DACE;   /* hairlines on the mint ground                */
  --mbh-rule-pine:#E0D2BD;   /* hairlines on the pine ground                */

  /* Contrast notes that cost real checking:
       oxblood on mint fill = 4.10 and FAILS body text. Never put a link
       inside a mint fill; use ink (8.51) there.
       mint on denim = 6.07, chalk on denim = 10.20. Both fine.             */

  /* mechanics.css contract. */
  --mbh-focus:     #8E2F33;
  --mbh-nav-bg:    #EFE4D4;
  --mbh-burger:    #241C17;
  --mbh-header-h:  78px;

  --mbh-seam: 3px;
  --mbh-r:    4px;           /* one radius, used everywhere                 */
}

/* --------------------------------------------------------------- base ---- */

body {
  background: var(--mbh-paper);
  color: var(--mbh-ink-2);
}

::selection { background: var(--mbh-mint); color: var(--mbh-ink); }

/* -------------------------------------------------------------- bands ---- */
/* A band is a plank. It runs the full width, carries its own vertical rhythm
   and announces itself with a seam on top — the dark line you see between two
   boards that do not quite meet. */

.mbh-band {
  padding-block: clamp(2.1rem, 4vw, 3.4rem);
  border-top: var(--mbh-seam) solid var(--mbh-sap);
}
.mbh-band--tight  { padding-block: clamp(1.5rem, 2.5vw, 2.1rem); }
.mbh-band--pine   { background: var(--mbh-pine);  border-top-color: var(--mbh-mint); }
.mbh-band--mint   { background: var(--mbh-paper); border-top-color: var(--mbh-sap); }
.mbh-band--denim  { background: var(--mbh-denim); border-top-color: var(--mbh-oxblood); color: var(--mbh-paper); }
.mbh-band--oxblood{ background: var(--mbh-oxblood); border-top-color: var(--mbh-ink); color: var(--mbh-paper); }

/* The first band on a page sits under the header, which supplies its own seam. */
.wp-site-blocks > main > .mbh-band:first-child { border-top: 0; }

/* ========================= EVERY DARK SURFACE =============================
   Four surfaces on this site are dark, and anything written for one of them
   has to be written for all four or it ships a dark heading on a dark ground.
   The list is kept here, in one place, on purpose. If you add a fifth dark
   surface, add it to every rule in this block.

     .mbh-band--denim     the dark page band
     .mbh-band--oxblood   the maroon call-to-action band
     .mbh-footer          the footer
     .mbh-photoband       a full-bleed photograph with copy over it
   ========================================================================= */

.mbh-band--denim,
.mbh-band--oxblood,
.mbh-footer,
.mbh-photoband { color: var(--mbh-paper); }

.mbh-band--denim h1, .mbh-band--denim h2, .mbh-band--denim h3, .mbh-band--denim h4,
.mbh-band--oxblood h1, .mbh-band--oxblood h2, .mbh-band--oxblood h3, .mbh-band--oxblood h4,
.mbh-footer h1, .mbh-footer h2, .mbh-footer h3, .mbh-footer h4,
.mbh-photoband h1, .mbh-photoband h2, .mbh-photoband h3, .mbh-photoband h4 {
  color: var(--mbh-paper);
}

.mbh-band--denim .mbh-eyebrow,
.mbh-band--oxblood .mbh-eyebrow,
.mbh-footer .mbh-eyebrow,
.mbh-photoband .mbh-eyebrow { color: var(--mbh-mint); }

.mbh-band--denim .mbh-eyebrow::before,
.mbh-band--oxblood .mbh-eyebrow::before,
.mbh-footer .mbh-eyebrow::before,
.mbh-photoband .mbh-eyebrow::before { background: var(--mbh-mint); }

/* The lede is the loudest line in a dark band, so it takes the full paper
   tone. Supporting paragraphs step DOWN to the muted one. This was the wrong
   way round and the 22px lede read greyer than the 18px line beneath it. */
.mbh-band--denim .mbh-lead,
.mbh-band--oxblood .mbh-lead,
.mbh-footer .mbh-lead,
.mbh-photoband .mbh-lead { color: var(--mbh-paper); }

.mbh-band--denim p:not(.mbh-lead):not(.mbh-eyebrow),
.mbh-band--oxblood p:not(.mbh-lead):not(.mbh-eyebrow),
.mbh-photoband p:not(.mbh-lead):not(.mbh-eyebrow) { color: #CFDCD4; }

/* Every descendant link rule carries :not(.mbh-btn). A button inside a prose
   block otherwise inherits the link colour, and on this site that paints
   oxblood on denim at 1.48 — a button that looks disabled. */
.mbh-band--denim a:not(.mbh-btn),
.mbh-band--oxblood a:not(.mbh-btn),
.mbh-footer a:not(.mbh-btn),
.mbh-photoband a:not(.mbh-btn) {
  color: var(--mbh-mint);
  text-decoration-color: rgba(139, 197, 171, .5);
}
.mbh-band--denim a:not(.mbh-btn):hover,
.mbh-band--oxblood a:not(.mbh-btn):hover,
.mbh-footer a:not(.mbh-btn):hover,
.mbh-photoband a:not(.mbh-btn):hover { color: #B6DCC9; }

.mbh-band--denim :focus-visible,
.mbh-band--oxblood :focus-visible,
.mbh-footer :focus-visible,
.mbh-photoband :focus-visible { outline-color: var(--mbh-mint); }
/* ======================= end dark surfaces ============================== */

/* --------------------------------------------------------- typography ---- */

.mbh-eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .85rem;
  font-family: var(--wp--preset--font-family--text);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mbh-denim);
}
.mbh-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 3px;
  background: var(--mbh-mint);
}

.mbh-lead {
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.55;
  color: var(--mbh-ink-2);
  max-width: 48ch;
}
/* Everything stacked in one column of a split shares the lede's measure, or
   the paragraphs wrap at a different width to the lede above them. */
.mbh-split > div > p { max-width: 48ch; }

.mbh-prose { max-width: 36rem; }
.mbh-prose p + p { margin-top: .9rem; }
.mbh-prose h3 { margin: 1.6rem 0 .5rem; }
.mbh-prose a:not(.mbh-btn) { color: var(--mbh-oxblood); text-underline-offset: .18em; }
.mbh-prose a:not(.mbh-btn):hover { color: var(--mbh-oxblood-d); }

.mbh-section-head { margin-bottom: 1.5rem; max-width: 46rem; }
.mbh-section-head h2 { margin: 0 0 .7rem; }
.mbh-section-head p  { margin: 0; color: var(--mbh-muted); max-width: 62ch; }
.mbh-band--denim .mbh-section-head p,
.mbh-band--oxblood .mbh-section-head p { color: #CFDCD4; }

/* ------------------------------------------------------------ buttons ---- */
/* Denim fill, chalk label, 4px, no border. The opposite of the agency's
   orange-fill-dark-label-2px-border button in every one of those four. */

.mbh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .85rem 1.5rem;
  border: 0;
  border-radius: var(--mbh-r);
  background: var(--mbh-denim);
  color: var(--mbh-paper);
  font-family: var(--wp--preset--font-family--text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.mbh-btn:hover  { background: #17293a; color: var(--mbh-paper); transform: translateY(-1px); }
.mbh-btn:active { transform: none; }

.mbh-btn--mint  { background: var(--mbh-mint); color: var(--mbh-ink); }   /* 8.51 */
.mbh-btn--mint:hover { background: #7AB79C; color: var(--mbh-ink); }

.mbh-btn--ghost {
  background: transparent;
  color: var(--mbh-denim);
  box-shadow: inset 0 0 0 2px var(--mbh-denim);
}
.mbh-btn--ghost:hover { background: var(--mbh-denim); color: var(--mbh-paper); }

/* On a dark surface the ghost has to invert, or it is denim on denim. */
.mbh-band--denim .mbh-btn--ghost,
.mbh-band--oxblood .mbh-btn--ghost,
.mbh-footer .mbh-btn--ghost,
.mbh-photoband .mbh-btn--ghost {
  color: var(--mbh-paper);
  box-shadow: inset 0 0 0 2px rgba(233, 239, 230, .55);
}
.mbh-band--denim .mbh-btn--ghost:hover,
.mbh-band--oxblood .mbh-btn--ghost:hover,
.mbh-footer .mbh-btn--ghost:hover,
.mbh-photoband .mbh-btn--ghost:hover { background: var(--mbh-paper); color: var(--mbh-ink); }

.mbh-btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

/* ------------------------------------------------------------- header ---- */
/* Pine, with their black wordmark on it, and a denim seam underneath that
   reads as the next board down. */

.mbh-header {
  background: var(--mbh-pine);
  border-bottom: var(--mbh-seam) solid var(--mbh-denim);
}
.mbh-headbar {
  max-width: 84rem;
  margin: 0 auto;
  padding: .7rem 1.25rem;
}
.mbh-brand img {
  display: block;
  width: 212px;
  height: auto;
}
.mbh-brand__sub {
  display: none;
  margin-left: .9rem;
  padding-left: .9rem;
  border-left: 1px solid var(--mbh-rule-pine);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mbh-muted);
}

.mbh-nav__link {
  font-weight: 600;
  text-decoration: none;
  color: var(--mbh-ink);
}
.mbh-nav__link:hover { color: var(--mbh-oxblood); }

/* Mobile panel: pine ground, planks between the links. */
.mbh-header .mbh-nav__link {
  border-bottom: 1px solid var(--mbh-rule-pine);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.3rem;
  font-weight: 700;
}
.mbh-header .mbh-nav__foot { border-top: var(--mbh-seam) solid var(--mbh-denim); }
.mbh-header .mbh-nav__foot .mbh-btn { width: 100%; margin-bottom: .6rem; }
.mbh-header .mbh-nav__foot p {
  margin: 1rem 0 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--mbh-muted);
}

/* The header call-to-action is hidden on a phone; the burger panel and the
   quick action bar both carry it instead. */
.mbh-headbar > .mbh-btn { display: none; }

@media (min-width: 52.0625rem) {
  .mbh-brand img { width: 238px; }
  .mbh-brand__sub { display: inline-block; }
  .mbh-nav__inner { display: flex; align-items: center; gap: 1.6rem; }
  .mbh-header .mbh-nav__link {
    border-bottom: 0;
    font-family: var(--wp--preset--font-family--text);
    font-size: .98rem;
    font-weight: 600;
  }
  .mbh-headbar > .mbh-btn {
    display: inline-flex;
    min-height: 46px;
    padding: .6rem 1.15rem;
    font-size: .95rem;
  }
}

/* --------------------------------------------------------------- hero ---- */
/* Their pastry case, full bleed, with the copy on a pine sign panel laid over
   it. The panel is opaque, so the photograph never has to carry text and the
   scrim can stay light enough that you can still see what is in the case. */

.mbh-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--mbh-ink);
  padding-block: clamp(2rem, 4.5vw, 3.5rem);
}
.mbh-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
}
.mbh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(94deg, rgba(27, 21, 17, .62) 0%, rgba(27, 21, 17, .34) 46%, rgba(27, 21, 17, .14) 100%);
}

.mbh-hero__inner {
  max-width: 84rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
}
.mbh-hero__sign {
  max-width: 41rem;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  background: var(--mbh-pine);
  border-radius: var(--mbh-r);
  border-top: var(--mbh-seam) solid var(--mbh-mint);
  border-bottom: var(--mbh-seam) solid var(--mbh-denim);
}
.mbh-hero__sign h1 { margin: 0 0 .7rem; }
.mbh-hero__sign .mbh-lead { margin: 0; color: var(--mbh-ink-2); max-width: none; font-size: 1.14rem; }

/* The three sittings, as painted chips. This is the fact a reader is actually
   looking for, so it is on the first screen and not in the footer. */
.mbh-sittings {
  display: grid;
  gap: .4rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.mbh-sittings li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .7rem;
  padding: .55rem .8rem;
  border-radius: var(--mbh-r);
  border-left: 5px solid var(--mbh-sap);
  background: rgba(36, 28, 23, .055);
}
.mbh-sittings li:nth-child(1) { border-left-color: var(--mbh-sap); }
.mbh-sittings li:nth-child(2) { border-left-color: var(--mbh-mint); }
.mbh-sittings li:nth-child(3) { border-left-color: var(--mbh-denim); }
.mbh-sittings li:nth-child(4) { border-left-color: var(--mbh-oxblood); }
.mbh-sittings b {
  font-family: var(--wp--preset--font-family--display);
  font-size: .98rem;
  font-weight: 800;
  color: var(--mbh-ink);
  min-width: 5.75rem;
}
.mbh-sittings span { color: var(--mbh-ink-2); font-variant-numeric: tabular-nums; }
.mbh-sittings em {
  margin-left: auto;
  font-style: normal;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mbh-muted);
}

@media (min-width: 46rem) {
  .mbh-sittings { grid-template-columns: 1fr 1fr; }
}

/* On a phone the sign panel is the whole first screen, so the headline, the
   lede and the four chips all have to come down a step or the photograph never
   gets seen and the fold lands mid-paragraph. */
@media (max-width: 46rem) {
  .mbh-hero { padding-block: 1.5rem; }
  .mbh-hero__sign { padding: 1.25rem 1.1rem; }
  .mbh-hero__sign h1 { font-size: 1.95rem; line-height: 1.12; }
  .mbh-hero__sign .mbh-lead { font-size: 1.02rem; line-height: 1.5; }
  .mbh-sittings { margin-top: 1rem; gap: .35rem; }
  .mbh-sittings li { padding: .45rem .65rem; gap: .15rem .55rem; }
  .mbh-sittings b { min-width: 0; font-size: .92rem; }
  .mbh-sittings span { font-size: .93rem; }
  .mbh-sittings em { font-size: .7rem; letter-spacing: .06em; }
}

/* --------------------------------------------------- the menu, as boards -- */
/* The signature component. Each course is a plank: a coloured header strip
   with the section name on it, then its dishes underneath. Stacked, they are
   the wall. */

.mbh-boards { display: grid; gap: 1.1rem; }

.mbh-board {
  border-radius: var(--mbh-r);
  overflow: hidden;
  background: var(--mbh-pine);
}
.mbh-band--pine .mbh-board { background: var(--mbh-paper); }

.mbh-board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1.25rem;
  padding: .95rem 1.35rem;
  background: var(--mbh-denim);
  color: var(--mbh-paper);
}
.mbh-board--mint    .mbh-board__head { background: var(--mbh-mint);    color: var(--mbh-ink); }
.mbh-board--oxblood .mbh-board__head { background: var(--mbh-oxblood); color: var(--mbh-paper); }
.mbh-board--sap     .mbh-board__head { background: #8A5E3F;            color: var(--mbh-paper); }

.mbh-board__head h3 {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: inherit;
}
.mbh-board__when {
  font-family: var(--wp--preset--font-family--text);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  opacity: .92;
}

.mbh-board__body { padding: 1.15rem 1.25rem 1.25rem; }
.mbh-board__sub {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  font-family: var(--wp--preset--font-family--text);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mbh-denim);
}
.mbh-board__sub::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  background: var(--mbh-mint);
}
.mbh-board__sub + .mbh-dishes { margin-top: 0; }
.mbh-board__body > .mbh-dishes + .mbh-board__sub { margin-top: 1.5rem; }
.mbh-board__note {
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--mbh-rule-pine);
  font-size: .95rem;
  color: var(--mbh-muted);
}
.mbh-band--pine .mbh-board__note { border-top-color: var(--mbh-rule); }

/* A dish: name, a leader of dots, a price. The leader is how a printed menu
   does it and it is what makes a long list scannable. */
.mbh-dishes { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.mbh-dish__line {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.mbh-dish__name {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.07rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--mbh-ink);
}
.mbh-dish__dots {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 0;
  border-bottom: 2px dotted var(--mbh-muted);
  opacity: .42;
  transform: translateY(-.3em);
}
.mbh-dish__price {
  font-family: var(--wp--preset--font-family--display);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--mbh-denim);
  white-space: nowrap;
}
.mbh-dish p {
  margin: .22rem 0 0;
  font-size: .97rem;
  line-height: 1.5;
  color: var(--mbh-muted);
  max-width: 52ch;
}
.mbh-dish__tag {
  display: inline-block;
  margin-left: .45rem;
  padding: .06rem .4rem;
  border-radius: 2px;
  background: var(--mbh-mint);
  color: var(--mbh-ink);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  vertical-align: .12em;
}

@media (min-width: 52rem) {
  .mbh-boards--two { grid-template-columns: 1fr 1fr; align-items: start; }

  /* A long list in one column leaves a 60rem dotted leader between the dish
     and its price, which is a lot of nothing to track across. Their own
     printed breakfast menu is set in two columns for exactly this reason. */
  .mbh-board__body--cols .mbh-dishes {
    display: block;
    columns: 2;
    column-gap: 2.75rem;
  }
  .mbh-board__body--cols .mbh-dish {
    break-inside: avoid;
    margin-bottom: 1.05rem;
  }
  .mbh-board__body--cols .mbh-dish:last-child { margin-bottom: 0; }
}

/* ---------------------------------------------------------- plank rows --- */
/* The card replacement. A full-width tinted row with a coloured edge and a
   seam, no border and no shadow — because nothing on that wall floats. */

.mbh-planks { display: grid; gap: .6rem; }
.mbh-plank {
  display: grid;
  gap: .3rem 1.5rem;
  padding: 1.05rem 1.3rem;
  border-left: 6px solid var(--mbh-sap);
  border-radius: var(--mbh-r);
  background: var(--mbh-pine);
}
.mbh-band--pine .mbh-plank { background: var(--mbh-paper); }
.mbh-plank:nth-child(2n) { border-left-color: var(--mbh-mint); }
.mbh-plank:nth-child(3n) { border-left-color: var(--mbh-denim); }
.mbh-plank:nth-child(5n) { border-left-color: var(--mbh-oxblood); }
.mbh-plank h3 { margin: 0; font-size: 1.18rem; }
.mbh-plank p  { margin: 0; color: var(--mbh-muted); }
.mbh-plank__meta {
  font-family: var(--wp--preset--font-family--text);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mbh-denim);
}

@media (min-width: 46rem) {
  .mbh-plank { grid-template-columns: 1fr auto; align-items: baseline; }
  .mbh-plank p { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- video --- */
/* The iframe is lazy, so Vimeo's player is not fetched until somebody scrolls
   to it. It is framed like every other picture on the site rather than dropped
   in as a bare rectangle. */

.mbh-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--mbh-r);
  border-top: var(--mbh-seam) solid var(--mbh-mint);
  overflow: hidden;
  background: #000;
}
.mbh-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.mbh-credit {
  margin: .75rem 0 0;
  font-size: .88rem;
  color: var(--mbh-muted);
}
.mbh-band--denim .mbh-credit { color: #AEC0CE; }

/* ----------------------------------------------------------------- map --- */
/* A real map with the pin on it. The embed is keyless, lazy and framed like
   every other picture on the site, so it reads as part of the page rather than
   as a widget bolted onto it. */

.mbh-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--mbh-r);
  border-top: var(--mbh-seam) solid var(--mbh-mint);
  overflow: hidden;
  background: var(--mbh-pine);
}
.mbh-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (min-width: 52rem) { .mbh-map { aspect-ratio: 1 / 1; } }

/* --------------------------------------------------------- hours panel --- */
/* The hours are the second thing anyone wants off this page, so they get the
   one dark block on it. It is also what stops the page being three light
   bands in a row. */

.mbh-hourpanel {
  padding: 1.25rem 1.35rem 1.4rem;
  border-radius: var(--mbh-r);
  border-top: var(--mbh-seam) solid var(--mbh-oxblood);
  background: var(--mbh-denim);
  color: var(--mbh-paper);
}
.mbh-hourpanel h2 { margin: 0 0 .9rem; font-size: 1.25rem; color: var(--mbh-paper); }
.mbh-hourpanel .mbh-hours th,
.mbh-hourpanel .mbh-hours td { border-bottom-color: rgba(233, 239, 230, .22); }
.mbh-hourpanel .mbh-sittings li { background: rgba(233, 239, 230, .1); }
.mbh-hourpanel .mbh-sittings b { color: var(--mbh-paper); }
.mbh-hourpanel .mbh-sittings span { color: var(--mbh-paper); }
.mbh-hourpanel .mbh-sittings em { color: var(--mbh-mint); }

/* --------------------------------------------------------- menu jumps --- */
/* Four menus on one page is a lot of scrolling to find the one you came for. */

.mbh-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.mbh-jumps a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem 1rem;
  border-radius: var(--mbh-r);
  background: var(--mbh-paper);
  color: var(--mbh-denim);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--mbh-rule);
}
.mbh-jumps a:hover { background: var(--mbh-denim); color: var(--mbh-paper); box-shadow: none; }

/* ------------------------------------------------------------- photos ---- */

.mbh-shots { display: grid; gap: .85rem; }
.mbh-shot { margin: 0; }
.mbh-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--mbh-r);
  border-top: var(--mbh-seam) solid var(--mbh-mint);
}
.mbh-shot figcaption {
  margin-top: .6rem;
  font-size: .92rem;
  color: var(--mbh-muted);
}
.mbh-band--denim .mbh-shot figcaption { color: #CFDCD4; }

@media (min-width: 46rem) { .mbh-shots--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 46rem) { .mbh-shots--2 { grid-template-columns: repeat(2, 1fr); } }

/* A full-bleed photograph with copy over it. Used to close a page, because a
   dark band immediately above a dark footer fuses into one slab with no seam. */
.mbh-photoband {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.4rem, 5vw, 3.8rem);
  border-top: var(--mbh-seam) solid var(--mbh-mint);
  background: var(--mbh-ink);
}
.mbh-photoband img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mbh-photoband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(20, 32, 44, .9) 0%, rgba(20, 32, 44, .82) 44%, rgba(20, 32, 44, .4) 100%);
}
.mbh-photoband__inner { max-width: 40rem; }
.mbh-photoband--slim { padding-block: clamp(1.9rem, 3.5vw, 2.7rem); }
.mbh-photoband--slim h2 { font-size: 1.6rem; }

/* ----------------------------------------------------------- split row --- */

/* Top-aligned by default: a text column and a fact list almost never have the
   same height, and centring them leaves the shorter one floating. */
.mbh-split { display: grid; gap: 1.6rem; align-items: start; }
.mbh-split--center { align-items: center; }
@media (min-width: 52rem) {
  .mbh-split { grid-template-columns: 1.05fr .95fr; gap: 2.6rem; }
  .mbh-split--wide-left { grid-template-columns: 1.3fr .7fr; }
}

/* --------------------------------------------------------------- facts --- */

.mbh-facts { display: grid; gap: .55rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.mbh-facts li {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--mbh-rule);
}
.mbh-band--pine .mbh-facts li { border-bottom-color: var(--mbh-rule-pine); }
.mbh-band--denim .mbh-facts li { border-bottom-color: rgba(233, 239, 230, .22); }
.mbh-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.mbh-facts b {
  flex: 0 0 auto;
  min-width: 5.5rem;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  color: var(--mbh-ink);
}
.mbh-band--denim .mbh-facts b { color: var(--mbh-mint); }

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

.mbh-hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mbh-hours th, .mbh-hours td {
  padding: .6rem 0;
  text-align: left;
  border-bottom: 1px solid rgba(233, 239, 230, .2);
  font-weight: 500;
}
.mbh-hours th { font-weight: 700; padding-right: 1.25rem; white-space: nowrap; }
.mbh-hours td { text-align: right; }
.mbh-hours tr:last-child th, .mbh-hours tr:last-child td { border-bottom: 0; }
.mbh-hours .is-shut td { opacity: .62; }

/* On a light band the hour rules have to be the light-band rule colour. */
.mbh-band--pine .mbh-hours th, .mbh-band--pine .mbh-hours td { border-bottom-color: var(--mbh-rule-pine); }
.mbh-band--mint .mbh-hours th, .mbh-band--mint .mbh-hours td { border-bottom-color: var(--mbh-rule); }

/* ----------------------------------------------------------- suppliers --- */

.mbh-suppliers { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.mbh-suppliers li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .9rem;
  padding: .8rem 1.15rem;
  border-radius: var(--mbh-r);
  border-left: 6px solid var(--mbh-mint);
  background: var(--mbh-paper);
}
.mbh-band--mint .mbh-suppliers li { background: var(--mbh-pine); }
.mbh-suppliers b {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--mbh-ink);
}
.mbh-suppliers span { color: var(--mbh-muted); font-size: .95rem; }
.mbh-suppliers b { margin-right: auto; }
.mbh-suppliers em {
  margin-left: auto;
  font-style: normal;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mbh-denim);
}

/* ------------------------------------------------------------ page head -- */

.mbh-pagehead {
  background: var(--mbh-pine);
  border-bottom: var(--mbh-seam) solid var(--mbh-mint);
  padding-block: clamp(1.75rem, 3.5vw, 2.6rem);
}
.mbh-pagehead h1 { margin: 0 0 .75rem; }
.mbh-pagehead .mbh-lead { margin: 0; }

.mbh-crumbs {
  margin: 0 0 1rem;
  font-size: .88rem;
  color: var(--mbh-muted);
}
.mbh-crumbs a { color: var(--mbh-muted); text-decoration: none; }
.mbh-crumbs a:hover { color: var(--mbh-oxblood); text-decoration: underline; }
.mbh-crumbs span { padding: 0 .4rem; opacity: .6; }

/* --------------------------------------------------------------- forms --- */

.mbh-form {
  padding: clamp(1.25rem, 3vw, 1.9rem);
  border-radius: var(--mbh-r);
  border-top: var(--mbh-seam) solid var(--mbh-denim);
  background: var(--mbh-pine);
}
.mbh-band--pine .mbh-form { background: var(--mbh-paper); }
.mbh-form h3 { margin: 0 0 .6rem; font-size: 1.4rem; }
.mbh-form__intro { margin: 0 0 1.25rem; color: var(--mbh-muted); max-width: 52ch; }
.mbh-form__fine  { margin: 1rem 0 0; font-size: .88rem; color: var(--mbh-muted); }

.mbh-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
.mbh-field label {
  font-weight: 700;
  font-size: .95rem;
  color: var(--mbh-ink);
}
.mbh-hint {
  display: block;
  font-weight: 400;
  font-size: .85rem;
  color: var(--mbh-muted);
}
.mbh-field input,
.mbh-field select,
.mbh-field textarea {
  width: 100%;
  min-height: 52px;
  padding: .7rem .85rem;
  border: 2px solid var(--mbh-rule-pine);
  border-radius: var(--mbh-r);
  background: #fff;
  font: inherit;
  color: var(--mbh-ink-2);
}
.mbh-band--pine .mbh-field input,
.mbh-band--pine .mbh-field select,
.mbh-band--pine .mbh-field textarea { border-color: var(--mbh-rule); }
.mbh-field textarea { min-height: 7rem; resize: vertical; }
.mbh-field input:focus, .mbh-field select:focus, .mbh-field textarea:focus {
  border-color: var(--mbh-denim);
  outline: 2px solid transparent;
}

/* A row where one field has a hint and the other does not: without this the
   labels are different heights and the two inputs do not line up. */
.mbh-field-row { display: grid; gap: 0 1rem; align-items: end; }
@media (min-width: 40rem) { .mbh-field-row { grid-template-columns: 1fr 1fr; } }

.mbh-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .85rem 1.6rem;
  border: 0;
  border-radius: var(--mbh-r);
  background: var(--mbh-denim);
  color: var(--mbh-paper);
  font-family: var(--wp--preset--font-family--text);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.mbh-submit:hover { background: #17293a; }

.mbh-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mbh-note {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--mbh-r);
  border-left: 6px solid var(--mbh-mint);
  background: rgba(139, 197, 171, .22);
  color: var(--mbh-ink-2);
}
.mbh-note--err { border-left-color: var(--mbh-oxblood); background: rgba(142, 47, 51, .12); }
.mbh-note a { color: var(--mbh-oxblood); }

/* -------------------------------------------------------------- footer ---- */

.mbh-footer {
  background: var(--mbh-denim);
  border-top: var(--mbh-seam) solid var(--mbh-oxblood);
  padding-top: clamp(2rem, 3.5vw, 2.9rem);
}
.mbh-footer__inner {
  display: grid;
  gap: 1.9rem;
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 1.25rem clamp(1.6rem, 3vw, 2.2rem);
}
.mbh-footer h2 { font-size: 1.3rem; margin: 0 0 1rem; }
.mbh-footer h3 {
  margin: 0 0 .9rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--text);
  color: var(--mbh-mint);
}
.mbh-footer ul { margin: 0; padding: 0; list-style: none; }
.mbh-footer__mark { margin-bottom: 1.5rem; }
.mbh-footer__mark img { display: block; width: 210px; height: auto; margin-bottom: .9rem; }
.mbh-footer__mark span { font-size: .95rem; color: #CFDCD4; line-height: 1.6; }

.mbh-deets { margin: 0; padding: 0; list-style: none; }
.mbh-deets li { margin-bottom: .7rem; font-size: .97rem; line-height: 1.6; }
.mbh-deets b {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--mbh-mint);
  margin-bottom: .1rem;
}

.mbh-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.75rem;
  max-width: 84rem;
  margin: 0 auto;
  padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(233, 239, 230, .18);
  font-size: .88rem;
  color: #BCCBD8;
}

@media (min-width: 52rem) {
  .mbh-footer__inner { grid-template-columns: 1.15fr .85fr 1fr; gap: 3rem; }
}

/* On a phone the fixed action bar covers the bottom of the footer. */
@media (max-width: 52rem) {
  .mbh-footer__base { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------- quick action bar ---- */

.mbh-ab {
  border-radius: var(--mbh-r);
  background: var(--mbh-denim);
  color: var(--mbh-paper);
  font-weight: 700;
  font-size: .97rem;
  box-shadow: 0 6px 20px rgba(36, 28, 23, .3);
}
.mbh-ab--call { background: var(--mbh-oxblood); color: var(--mbh-paper); }
.mbh-ab:hover { color: var(--mbh-paper); }

.mbh-top {
  border: 0;
  border-radius: var(--mbh-r);
  background: var(--mbh-ink);
  color: var(--mbh-paper);
  box-shadow: 0 6px 20px rgba(36, 28, 23, .32);
}

/* --------------------------------------------------------- page bodies --- */
/* WordPress wraps post content in blocks that each carry their own margin.
   The bands supply all the vertical rhythm on this site, so the gaps between
   top-level groups would double it up. */

.mbh-band > * + * { margin-top: 0; }
.mbh-band .mbh-section-head + * { margin-top: 0; }

/* 404 and search, which nobody designs and everybody eventually sees. */
.mbh-simple { padding-block: clamp(3rem, 8vw, 6rem); }
.mbh-simple h1 { margin: 0 0 1rem; }

/* A jump link lands under the sticky header without this. mechanics.css sets
   scroll-padding-top on <html>; a board also needs its own offset because the
   anchor is the board, not the band. */
.mbh-board[id] { scroll-margin-top: calc(var(--mbh-stick-h, var(--mbh-header-h)) + 1rem); }