/*
Theme Name: Fernson
Theme URI: https://sitereboots.com/
Author: Site Reboots
Description: Block theme for Fernson Brewing Company, Sioux Falls, South Dakota.
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: fernson
*/

/* ===========================================================================
   Fernson Brewing Company — the skin.

   Behaviour lives in assets/mechanics.css, which loads first. Nothing in this
   file should re-implement the header, the burger, the mobile panel or the
   action bar; it only paints them.

   The idea: Fernson's own logo is a hand-drawn roadside sign on the Great
   Plains with a little arrow board pointing at COLD BEER, and their beer
   locator is called Find Fernson. So the whole site is built out of SIGN
   BLADES — a rectangle with one chevron-pointed end — and the wordmark arches
   the way their badge does. Blue is theirs, measured off the logo file.
   ======================================================================== */

:root{
  --fbc-ink:#15325F;
  --fbc-body:#2B3E55;
  --fbc-muted:#4E5868;
  --fbc-paper:#F4EBD7;
  --fbc-board:#E9DCC0;
  --fbc-sky:#1E4484;
  --fbc-brand:#2759A7;
  --fbc-wheat:#E3C98A;
  --fbc-dim:#A9BBDA;
  --fbc-red:#B8321F;
  --fbc-rule:#D4C6A6;

  /* the mechanics.css contract */
  --fbc-focus:#B8321F;
  --fbc-nav-bg:#F4EBD7;
  --fbc-burger:#15325F;
  --fbc-header-h:74px;

  /* the one shape decision: a 14px chevron point, used everywhere */
  --fbc-point:14px;
  --fbc-r:3px;
}

body{background:var(--fbc-paper);color:var(--fbc-body)}
::selection{background:var(--fbc-brand);color:var(--fbc-paper)}

/* The display face is variable 400-900 and the body face 300-800. Nothing
   below asks for a weight outside those ranges. */
.fbc-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ----------------------------------------------------------------- bands -- */
.fbc-band{
  padding-block:clamp(3.1rem,6vw,5.4rem);
  padding-inline:1.25rem;
  background:var(--fbc-paper);
}
.fbc-band--board{background:var(--fbc-board)}
.fbc-band--sky{background:var(--fbc-sky);color:var(--fbc-paper)}
.fbc-band--ink{background:var(--fbc-ink);color:var(--fbc-paper)}
.fbc-band--tight{padding-block:clamp(2.1rem,4vw,3.2rem)}
.fbc-band--flush{padding-block:0;padding-inline:0}
.fbc-band--sky h1,.fbc-band--sky h2,.fbc-band--sky h3,.fbc-band--sky h4,
.fbc-band--ink h1,.fbc-band--ink h2,.fbc-band--ink h3,.fbc-band--ink h4{color:var(--fbc-paper)}
.fbc-band--sky a:not(.fbc-btn),.fbc-band--ink a:not(.fbc-btn){color:var(--fbc-wheat)}
.fbc-band--sky a:not(.fbc-btn):hover,.fbc-band--ink a:not(.fbc-btn):hover{color:#fff}

.fbc-in{max-width:69rem;margin-inline:auto}
.fbc-in--wide{max-width:86rem}

/* A band seam. Their drawn sign is outlined, so every change of ground gets a
   3px blue line rather than a shadow or a gradient. */
.fbc-band--seam{border-top:3px solid var(--fbc-brand)}

/* -------------------------------------------------------------- the blade -- */
/* THE motif. A rectangle with one chevron-pointed end, off the arrow board in
   their own roadside-sign artwork. Everything that points at something uses it. */
.fbc-blade{
  clip-path:polygon(0 0,calc(100% - var(--fbc-point)) 0,100% 50%,calc(100% - var(--fbc-point)) 100%,0 100%);
}
.fbc-blade--left{
  clip-path:polygon(var(--fbc-point) 0,100% 0,100% 100%,var(--fbc-point) 100%,0 50%);
}

/* ------------------------------------------------------------- the eyebrow -- */
/* A small solid chevron, then sentence case. Deliberately not uppercase and
   letterspaced: that is the agency's eyebrow, not a client's. */
.fbc-eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--wp--preset--font-family--display);
  font-weight:700;font-size:1rem;letter-spacing:0;
  color:var(--fbc-brand);margin:0 0 .85rem;
}
.fbc-eyebrow::before{
  content:"";flex:0 0 auto;width:22px;height:11px;background:currentColor;
  clip-path:polygon(0 0,8px 0,22px 50%,8px 100%,0 100%,14px 50%);
}
.fbc-band--sky .fbc-eyebrow,.fbc-band--ink .fbc-eyebrow{color:var(--fbc-wheat)}

/* ------------------------------------------------------------------ type -- */
h1,h2,h3,h4{font-family:var(--wp--preset--font-family--display)}
.fbc-lede{
  font-size:clamp(1.14rem,2vw,1.34rem);line-height:1.56;
  color:var(--fbc-body);max-width:56ch;margin:0 0 1.5rem;
}
.fbc-band--sky .fbc-lede,.fbc-band--ink .fbc-lede{color:var(--fbc-dim)}
.fbc-prose{max-width:66ch}
.fbc-prose p{margin:0 0 1.1rem}
.fbc-prose h3{margin:2.1rem 0 .7rem}
.fbc-prose ul{margin:0 0 1.2rem;padding-left:1.1rem}
.fbc-prose li{margin-bottom:.45rem}
.fbc-sechead{margin:0 0 1.1rem}
.fbc-quiet{color:var(--fbc-muted);font-size:.95rem}
.fbc-band--sky .fbc-quiet,.fbc-band--ink .fbc-quiet{color:var(--fbc-dim)}

/* --------------------------------------------------------------- buttons -- */
.fbc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.85rem 1.5rem;border-radius:var(--fbc-r);
  background:var(--fbc-brand);color:var(--fbc-paper);
  font-family:var(--wp--preset--font-family--display);font-weight:700;
  font-size:1.02rem;line-height:1.2;text-decoration:none;border:0;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.fbc-btn:hover{background:var(--fbc-ink);color:var(--fbc-paper)}
.fbc-btn--ghost{
  background:transparent;color:var(--fbc-ink);
  box-shadow:inset 0 0 0 1.5px var(--fbc-ink);
}
.fbc-btn--ghost:hover{background:var(--fbc-ink);color:var(--fbc-paper);box-shadow:none}
.fbc-btn--cream{background:var(--fbc-paper);color:var(--fbc-ink)}
.fbc-btn--cream:hover{background:var(--fbc-wheat);color:var(--fbc-ink)}
.fbc-btn--line{
  background:transparent;color:var(--fbc-paper);
  box-shadow:inset 0 0 0 1.5px var(--fbc-dim);
}
.fbc-btn--line:hover{background:var(--fbc-paper);color:var(--fbc-ink);box-shadow:none}
.fbc-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

/* ---------------------------------------------------------------- header -- */
.fbc-header{
  background:var(--fbc-paper);
  border-bottom:3px solid var(--fbc-brand);
}
.fbc-headbar{
  max-width:86rem;margin-inline:auto;
  padding:.7rem 1.25rem;min-height:var(--fbc-header-h);
}
.fbc-brand img{display:block;height:30px;width:auto}
.fbc-nav__link{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700;font-size:1.02rem;color:var(--fbc-ink);
  text-decoration:none;
}
.fbc-nav__link:hover{color:var(--fbc-brand)}
/* The nav foot only exists inside the mobile panel, so its rules are scoped
   to the phone. A top-level display here would also beat mechanics.css. */
@media (max-width:52rem){
  .fbc-header .fbc-nav__foot a{display:flex;margin-bottom:.6rem}
  .fbc-header .fbc-nav__foot p{color:var(--fbc-muted);font-size:.95rem;margin:1rem 0 0}
}
.fbc-header .fbc-nav{border-top:3px solid var(--fbc-brand)}
.fbc-headbar > .fbc-btn{display:none}

@media (min-width:52.0625rem){
  .fbc-headbar > .fbc-btn{display:inline-flex;min-height:44px;padding:.6rem 1.15rem;font-size:.98rem}
  .fbc-header .fbc-nav__inner{display:flex;align-items:center;gap:1.6rem}
  .fbc-header .fbc-nav{border-top:0}
  .fbc-brand img{height:34px}
}

/* ------------------------------------------------------------------ hero -- */
/* Sky band, no photograph in it. The arch is their badge, set as real text on
   an SVG path so it scales and can be read. */
.fbc-hero{background:var(--fbc-sky);color:var(--fbc-paper);padding-block:clamp(2.6rem,6vw,4.6rem)}
.fbc-hero__arch{display:block;width:min(100%,560px);margin:0 auto .4rem}
.fbc-hero__arch text{
  font-family:var(--wp--preset--font-family--display);
  font-weight:900;font-size:40px;letter-spacing:.04em;fill:var(--fbc-paper);
}
.fbc-hero__sub{
  text-align:center;font-family:var(--wp--preset--font-family--display);
  font-weight:700;font-size:clamp(1rem,2.4vw,1.35rem);letter-spacing:.16em;
  color:var(--fbc-wheat);margin:0 0 1.9rem;
}
.fbc-hero h1{
  text-align:center;max-width:19ch;margin:0 auto .9rem;
  font-size:clamp(2.1rem,5.6vw,3.5rem);
  color:var(--fbc-paper);
}
.fbc-hero__lede{
  text-align:center;max-width:52ch;margin:0 auto;
  color:var(--fbc-dim);font-size:clamp(1.06rem,2vw,1.22rem);line-height:1.56;
}
.fbc-hero .fbc-btns{justify-content:center}

/* the three figures */
.fbc-figs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:2.6rem;background:rgba(244,235,215,.22);
}
.fbc-fig{background:var(--fbc-sky);padding:1.1rem .75rem;text-align:center}
.fbc-fig b{
  display:block;font-family:var(--wp--preset--font-family--display);
  font-weight:900;font-size:clamp(1.7rem,4.4vw,2.5rem);line-height:1;
  color:var(--fbc-wheat);
}
.fbc-fig span{display:block;margin-top:.4rem;font-size:.9rem;color:var(--fbc-dim)}

/* The horizon strip. The photograph is present but it is a band, not a
   backdrop with type on it. Wide open spaces, which is their own line. */
.fbc-strip{display:block;width:100%;height:clamp(140px,22vw,250px);object-fit:cover;border-block:3px solid var(--fbc-brand)}

/* ------------------------------------------------------------ sign boards -- */
/* The signature component: Find Fernson. Each destination is a board with a
   chevron-tipped header blade carrying its status. */
.fbc-boards{display:grid;gap:1.25rem;margin-top:2rem}
@media (min-width:46rem){.fbc-boards{grid-template-columns:repeat(2,1fr)}}

.fbc-board{background:var(--fbc-paper);border-radius:var(--fbc-r);overflow:hidden;display:flex;flex-direction:column}
/* A board is always a light panel, whatever it is standing on. Without this it
   inherits the dark band's cream headings and wheat links onto its own cream. */
.fbc-band .fbc-board{background:var(--fbc-board)}
.fbc-band--board .fbc-board{background:var(--fbc-paper)}
.fbc-band--sky .fbc-board,.fbc-band--ink .fbc-board{background:var(--fbc-paper);color:var(--fbc-body)}
.fbc-band--sky .fbc-board h3,.fbc-band--ink .fbc-board h3{color:var(--fbc-ink)}
.fbc-band--sky .fbc-board a:not(.fbc-btn),.fbc-band--ink .fbc-board a:not(.fbc-btn){color:var(--fbc-brand)}
.fbc-band--sky .fbc-board a:not(.fbc-btn):hover,.fbc-band--ink .fbc-board a:not(.fbc-btn):hover{color:var(--fbc-ink)}
.fbc-band--sky .fbc-board .fbc-quiet,.fbc-band--ink .fbc-board .fbc-quiet{color:var(--fbc-muted)}
.fbc-board__blade{
  display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
  background:var(--fbc-brand);color:var(--fbc-paper);
  padding:.5rem 1.6rem .5rem 1rem;
  font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:.95rem;
  clip-path:polygon(0 0,calc(100% - var(--fbc-point)) 0,100% 50%,calc(100% - var(--fbc-point)) 100%,0 100%);
}
.fbc-board__blade--shut{background:var(--fbc-red)}
.fbc-board__body{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1 1 auto}
.fbc-board__body h3{margin:0 0 .5rem;font-size:1.35rem}
.fbc-board__body p{margin:0 0 .85rem}
.fbc-board__meta{
  margin:0 0 1.1rem;padding-top:.9rem;border-top:1px solid var(--fbc-rule);
  color:var(--fbc-muted);font-size:.96rem;
}
.fbc-board__meta b{color:var(--fbc-ink);font-weight:600}
/* A meta block used straight on a dark band, rather than inside a cream board. */
.fbc-band--sky .fbc-board__meta:not(.fbc-board *),
.fbc-band--ink .fbc-board__meta:not(.fbc-board *){color:var(--fbc-dim);border-top-color:rgba(244,235,215,.2)}
.fbc-band--sky .fbc-board__meta:not(.fbc-board *) b,
.fbc-band--ink .fbc-board__meta:not(.fbc-board *) b{color:var(--fbc-paper)}
.fbc-board .fbc-btns{margin-top:auto;padding-top:.3rem}
.fbc-board img{display:block;width:100%;height:190px;object-fit:cover}

/* ----------------------------------------------------------------- cards -- */
.fbc-grid{display:grid;gap:1.25rem}
@media (min-width:44rem){.fbc-grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:52rem){.fbc-grid--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:60rem){.fbc-grid--4{grid-template-columns:repeat(4,1fr)}}

.fbc-card{background:var(--fbc-paper);border-radius:var(--fbc-r);padding:1.3rem 1.35rem 1.4rem}
.fbc-band .fbc-card{background:var(--fbc-board)}
.fbc-band--board .fbc-card{background:var(--fbc-paper)}
.fbc-band--sky .fbc-card,.fbc-band--ink .fbc-card{background:rgba(244,235,215,.08)}
.fbc-card h3{margin:0 0 .5rem;font-size:1.2rem}
.fbc-card p{margin:0}
.fbc-card__tag{
  display:inline-block;background:var(--fbc-ink);color:var(--fbc-paper);
  padding:.3rem 1.25rem .3rem .7rem;margin-bottom:.8rem;
  font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:.82rem;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);
}
.fbc-card figure,.fbc-card img{margin:0}
.fbc-shot{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--fbc-r)}

/* ------------------------------------------------------------ beer record -- */
/* Their site has ABV, IBU, hops, malt and availability for every beer, one
   page deep each. Here they are a comparable record you can read down. */
.fbc-rec{display:grid;gap:0;margin-top:1.9rem;border-top:1px solid var(--fbc-rule)}
.fbc-rec__row{
  display:grid;gap:.35rem 1.5rem;padding:1.35rem 0;
  border-bottom:1px solid var(--fbc-rule);
}
@media (min-width:54rem){
  .fbc-rec__row{grid-template-columns:minmax(0,15rem) minmax(0,1fr) minmax(0,16rem);align-items:start}
}
.fbc-rec__name{margin:0;font-size:1.3rem;font-family:var(--wp--preset--font-family--display);font-weight:800;color:var(--fbc-ink)}
.fbc-rec__style{display:block;margin-top:.25rem;color:var(--fbc-muted);font-size:.94rem}
.fbc-rec__tale{margin:0;color:var(--fbc-body)}
.fbc-rec__spec{
  display:grid;grid-template-columns:auto auto;gap:.3rem .9rem;
  align-content:start;justify-content:start;margin:0;
  font-size:.92rem;
}
@media (min-width:54rem){.fbc-rec__spec{justify-content:end;text-align:right}}
.fbc-rec__spec dt{color:var(--fbc-muted)}
.fbc-rec__spec dd{margin:0;color:var(--fbc-ink);font-weight:600;font-variant-numeric:tabular-nums}
.fbc-flag{
  display:inline-block;padding:.22rem 1.05rem .22rem .6rem;
  background:var(--fbc-ink);color:var(--fbc-paper);
  font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:.78rem;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%);
}
.fbc-flag--ltd{background:var(--fbc-red)}

/* ------------------------------------------------------------------ menu -- */
.fbc-menu{margin:0;padding:0;list-style:none}
.fbc-item{
  display:grid;grid-template-columns:1fr auto;gap:.2rem .9rem;
  padding:.85rem 0;border-bottom:1px solid var(--fbc-rule);
}
.fbc-item:last-child{border-bottom:0}
.fbc-item__name{
  font-family:var(--wp--preset--font-family--display);font-weight:700;
  color:var(--fbc-ink);font-size:1.06rem;
}
.fbc-item__price{
  font-family:var(--wp--preset--font-family--display);font-weight:700;
  color:var(--fbc-brand);font-variant-numeric:tabular-nums;font-size:1.06rem;
}
.fbc-item__desc{grid-column:1/-1;color:var(--fbc-muted);font-size:.96rem;margin:0}

/* ----------------------------------------------------------------- hours -- */
.fbc-hours{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.fbc-hours th,.fbc-hours td{text-align:left;padding:.42rem 0;font-weight:400;vertical-align:top}
.fbc-hours td{text-align:right;font-weight:600}
.fbc-hours tr + tr th,.fbc-hours tr + tr td{border-top:1px solid var(--fbc-rule)}
.fbc-band--ink .fbc-hours tr + tr th,.fbc-band--ink .fbc-hours tr + tr td,
.fbc-footer .fbc-hours tr + tr th,.fbc-footer .fbc-hours tr + tr td{border-top-color:rgba(244,235,215,.2)}

/* ------------------------------------------------------------------- faq -- */
.fbc-faq{margin-top:1.6rem;border-top:1px solid var(--fbc-rule)}
.fbc-faq details{border-bottom:1px solid var(--fbc-rule)}
.fbc-faq summary{
  cursor:pointer;list-style:none;padding:1rem 2.2rem 1rem 0;position:relative;
  font-family:var(--wp--preset--font-family--display);font-weight:700;
  color:var(--fbc-ink);font-size:1.08rem;min-height:52px;display:flex;align-items:center;
}
.fbc-faq summary::-webkit-details-marker{display:none}
.fbc-faq summary::after{
  content:"";position:absolute;right:.25rem;top:50%;width:13px;height:13px;
  border-right:2.5px solid var(--fbc-brand);border-bottom:2.5px solid var(--fbc-brand);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.fbc-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.fbc-faq details > p{margin:0 0 1.1rem;max-width:68ch}

/* --------------------------------------------------------------- pagehead -- */
.fbc-pagehead{background:var(--fbc-ink);color:var(--fbc-paper);padding-block:clamp(2.4rem,5vw,3.6rem)}
/* theme.json colours every heading with the ink token, which is this band's own
   background. Any dark band has to take its headings back. */
.fbc-pagehead h1,.fbc-pagehead h2{color:var(--fbc-paper)}
.fbc-pagehead h1{margin:0 0 .7rem;max-width:20ch}
.fbc-pagehead p{margin:0;max-width:56ch;color:var(--fbc-dim);font-size:clamp(1.05rem,2vw,1.2rem)}
.fbc-crumbs{font-size:.92rem;margin:0 0 .9rem;color:var(--fbc-dim)}
.fbc-crumbs a{color:var(--fbc-wheat)}

/* ------------------------------------------------------------------ form -- */
.fbc-form{background:var(--fbc-board);border-radius:var(--fbc-r);padding:clamp(1.4rem,3vw,2.2rem)}
.fbc-form h3{margin:0 0 .6rem;font-size:1.5rem}
.fbc-form__intro{margin:0 0 1.5rem;color:var(--fbc-body);max-width:60ch}
.fbc-form__fine{margin:1rem 0 0;color:var(--fbc-muted);font-size:.9rem;max-width:56ch}
.fbc-field{margin-bottom:1.1rem;display:flex;flex-direction:column}
.fbc-field-row{display:grid;gap:0 1.1rem}
@media (min-width:38rem){.fbc-field-row{grid-template-columns:1fr 1fr}}
.fbc-field label{
  font-family:var(--wp--preset--font-family--display);font-weight:700;
  color:var(--fbc-ink);margin-bottom:.4rem;font-size:1rem;
}
.fbc-hint{display:block;font-family:var(--wp--preset--font-family--text);font-weight:400;color:var(--fbc-muted);font-size:.88rem;margin-top:.15rem}
.fbc-field input,.fbc-field select,.fbc-field textarea{
  font:inherit;font-size:1.02rem;color:var(--fbc-body);
  background:var(--fbc-paper);border:1.5px solid var(--fbc-rule);border-radius:var(--fbc-r);
  padding:.75rem .85rem;min-height:52px;width:100%;
}
.fbc-field textarea{min-height:130px;resize:vertical}
.fbc-field input:focus,.fbc-field select:focus,.fbc-field textarea:focus{border-color:var(--fbc-brand);outline:0}
.fbc-submit{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:.85rem 1.7rem;border:0;border-radius:var(--fbc-r);cursor:pointer;
  background:var(--fbc-brand);color:var(--fbc-paper);
  font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:1.04rem;
}
.fbc-submit:hover{background:var(--fbc-ink)}
.fbc-note{padding:.95rem 1.1rem;border-radius:var(--fbc-r);margin:0 0 1.3rem}
.fbc-note--ok{background:var(--fbc-paper);border-left:4px solid var(--fbc-brand)}
.fbc-note--err{background:var(--fbc-paper);border-left:4px solid var(--fbc-red);color:var(--fbc-ink)}
/* The honeypot is deliberately off-screen rather than display:none, so bots
   still fill it. Without this it renders as a visible "Leave this empty". */
.fbc-trap{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------- footer -- */
.fbc-footer{background:var(--fbc-ink);color:var(--fbc-dim);padding:clamp(2.6rem,5vw,4rem) 1.25rem 0}
.fbc-footer__in{
  max-width:86rem;margin-inline:auto;display:grid;gap:2.2rem;
  padding-bottom:2.4rem;
}
@media (min-width:50rem){.fbc-footer__in{grid-template-columns:1.3fr 1fr 1fr}}
.fbc-footer img{display:block;height:28px;width:auto}
.fbc-footer h2{font-size:1.08rem;margin:0 0 .8rem;color:var(--fbc-paper)}
.fbc-footer p{margin:0;color:var(--fbc-dim)}
.fbc-footer ul{list-style:none;margin:0;padding:0}
.fbc-footer a{color:var(--fbc-wheat);text-decoration:none}
.fbc-footer a:hover{color:#fff;text-decoration:underline}
.fbc-footer .fbc-hours th{color:var(--fbc-dim)}
.fbc-footer .fbc-hours td{color:var(--fbc-paper)}
.fbc-footer__bot{
  max-width:86rem;margin-inline:auto;
  border-top:1px solid rgba(244,235,215,.2);
  padding:1.2rem 0 1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  font-size:.9rem;color:var(--fbc-dim);
}

/* ---------------------------------------------------- action bar + top ---- */
.fbc-actionbar .fbc-ab{
  border-radius:var(--fbc-r);text-decoration:none;
  font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:1rem;
  background:var(--fbc-brand);color:var(--fbc-paper);
}
.fbc-actionbar .fbc-ab--alt{background:var(--fbc-paper);color:var(--fbc-ink);box-shadow:inset 0 0 0 1.5px var(--fbc-ink)}
.fbc-top{
  border:0;border-radius:var(--fbc-r);background:var(--fbc-ink);color:var(--fbc-paper);
}
.fbc-top:hover{background:var(--fbc-brand)}

/* --------------------------------------------------------------- the 404 -- */
.fbc-404{padding-block:clamp(3rem,8vw,6rem);text-align:center}

/* ------------------------------------------------------------ small print -- */
@media (max-width:34rem){
  .fbc-figs{grid-template-columns:1fr;gap:1px}
  .fbc-footer__bot{flex-direction:column;gap:.35rem}
}

/* ===========================================================================
   The menu system, the ordering tray and the maps.

   These three are the reason the rebuild is worth having rather than just
   nicer to look at, so they get the same shape language as everything else:
   3px radius, flat, and the chevron wherever something points.
   ======================================================================== */

/* ------------------------------------------------------- service switcher - */
.fbc-switch{
  display:flex;flex-wrap:wrap;gap:.4rem;
  margin:0 0 1.6rem;padding:.35rem;
  background:var(--fbc-board);border-radius:var(--fbc-r);
}
.fbc-band--board .fbc-switch{background:var(--fbc-paper)}
.fbc-switch__tab{
  flex:1 1 auto;min-height:48px;padding:.6rem 1.1rem;
  border:0;border-radius:2px;cursor:pointer;background:transparent;
  font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:1.02rem;
  color:var(--fbc-ink);
}
.fbc-switch__tab:hover{background:rgba(39,89,167,.1)}
.fbc-switch__tab[aria-selected="true"]{background:var(--fbc-brand);color:var(--fbc-paper)}

.fbc-svc__when{
  display:flex;align-items:center;gap:.55rem;margin:0 0 .5rem;
  font-family:var(--wp--preset--font-family--display);font-weight:700;color:var(--fbc-brand);
}
.fbc-svc__dot{
  flex:0 0 auto;width:20px;height:10px;background:currentColor;
  clip-path:polygon(0 0,7px 0,20px 50%,7px 100%,0 100%,13px 50%);
}
.fbc-svc__note{margin:0 0 1.4rem;color:var(--fbc-muted);font-size:.96rem;max-width:72ch}

/* -------------------------------------------------------------- jump bar -- */
/* Their menu is one 1,200 word column and the burgers are two thirds down it. */
.fbc-jump{
  display:flex;flex-wrap:wrap;gap:.45rem;
  padding-bottom:1.6rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--fbc-rule);
}
.fbc-jump__link{
  display:inline-flex;align-items:center;min-height:40px;
  padding:.35rem 1.15rem .35rem .75rem;
  background:var(--fbc-board);color:var(--fbc-ink);text-decoration:none;
  font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:.92rem;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);
}
.fbc-band--board .fbc-jump__link{background:var(--fbc-paper)}
.fbc-jump__link:hover{background:var(--fbc-brand);color:var(--fbc-paper)}

.fbc-group{padding-top:2.2rem;scroll-margin-top:calc(var(--fbc-stick-h,76px) + 1rem)}
.fbc-group__name{margin:0 0 .4rem;font-size:1.45rem}

/* ------------------------------------------------------- an orderable row - */
.fbc-item--row{
  grid-template-columns:1fr auto auto;
  column-gap:1rem;align-items:baseline;
  padding:.95rem .6rem;margin-inline:-.6rem;border-radius:var(--fbc-r);
}
.fbc-item--row .fbc-item__desc,
.fbc-item--row .fbc-item__tags{grid-column:1/-1}
.fbc-item--row .fbc-item__add{grid-row:1/2;grid-column:3/4}
.fbc-item--row.is-in{background:rgba(39,89,167,.09)}
.fbc-item__tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:.45rem 0 0}
.fbc-tag{
  display:inline-block;padding:.15rem .5rem;border-radius:2px;
  background:var(--fbc-board);color:var(--fbc-muted);
  font-size:.76rem;font-weight:600;letter-spacing:.01em;
}
.fbc-band--board .fbc-tag{background:var(--fbc-paper)}
.fbc-tag--ggg{background:var(--fbc-red);color:var(--fbc-paper)}

.fbc-add{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  min-height:40px;min-width:76px;padding:.4rem .8rem;cursor:pointer;
  border:0;border-radius:2px;
  background:var(--fbc-board);color:var(--fbc-brand);
  box-shadow:inset 0 0 0 1.5px var(--fbc-brand);
  font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:.92rem;
}
.fbc-band--board .fbc-add{background:var(--fbc-paper)}
.fbc-add:hover{background:var(--fbc-brand);color:var(--fbc-paper);box-shadow:none}
.fbc-item--row.is-in .fbc-add{background:var(--fbc-brand);color:var(--fbc-paper);box-shadow:none}
.fbc-add__plus{font-size:1.05rem;line-height:1}

/* --------------------------------------------------------------- the tray - */
/* Fixed to the foot of the window, and only ever present when the basket has
   something in it. z 97 clears the quick-action bar (95) and back-to-top (96);
   both of those step aside below. */
.fbc-tray{
  position:fixed;left:0;right:0;bottom:0;z-index:97;
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom,0px));
  background:var(--fbc-ink);border-top:3px solid var(--fbc-brand);
}
.fbc-tray__in{max-width:40rem;margin:0 auto}
.fbc-tray__open{
  display:flex;align-items:center;gap:.8rem;width:100%;min-height:54px;
  padding:.6rem 1.1rem;cursor:pointer;border:0;border-radius:var(--fbc-r);
  background:var(--fbc-brand);color:var(--fbc-paper);
  font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:1.05rem;
}
.fbc-tray__open:hover{background:var(--fbc-paper);color:var(--fbc-ink)}
.fbc-tray__count{
  flex:0 0 auto;display:grid;place-items:center;min-width:28px;height:28px;padding:0 .4rem;
  background:var(--fbc-paper);color:var(--fbc-ink);border-radius:2px;
  font-size:.92rem;font-variant-numeric:tabular-nums;
}
.fbc-tray__open:hover .fbc-tray__count{background:var(--fbc-ink);color:var(--fbc-paper)}
.fbc-tray__label{margin-right:auto}
.fbc-tray__total{font-variant-numeric:tabular-nums}

/* The tray takes the bottom of the screen, so the floating controls that
   normally live there get out of the way rather than stacking on top of it.
   The action bar only exists below 52rem, so its rule is scoped to match —
   an unscoped display here would be the exact mistake mechanics.css warns of. */
@media (max-width:52rem){
  body[data-order="shown"] .fbc-actionbar{display:none!important}
}
body[data-order="shown"] .fbc-top,
body[data-order="shown"] .fbc-demo-badge{
  bottom:calc(1rem + var(--fbc-ob-h,70px) + env(safe-area-inset-bottom,0px));
}
/* The open mobile menu hides every other floating control. The tray goes too,
   or it paints over the nav panel and swallows taps meant for the links. */
body:has(.fbc-burger__box:checked) .fbc-tray,
body[data-nav="open"] .fbc-tray{display:none!important}

/* ------------------------------------------------------------- the drawer - */
/* Above the sticky site header, which mechanics.css puts at z-index 100. At 98
   the header painted straight over the drawer's own heading and close button,
   and the drawer looked like it had opened without one. A modal has to clear
   every piece of page chrome, not most of it. */
.fbc-drawer{position:fixed;inset:0;z-index:120}
/* The mobile nav lives inside the header's stacking context, so an open drawer
   would cover it. Only one of the two is ever wanted at a time. */
body:has(.fbc-burger__box:checked) .fbc-drawer,
body[data-nav="open"] .fbc-drawer{display:none!important}
.fbc-drawer__scrim{position:absolute;inset:0;background:rgba(21,50,95,.55)}
.fbc-drawer__panel{
  position:absolute;right:0;bottom:0;left:0;
  max-height:92vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--fbc-paper);border-top:3px solid var(--fbc-brand);
}
@media (min-width:46rem){
  .fbc-drawer__panel{
    top:0;left:auto;width:min(30rem,100%);max-height:none;
    border-top:0;border-left:3px solid var(--fbc-brand);
  }
}
body[data-drawer="open"]{overflow:hidden}
.fbc-drawer__head{
  position:sticky;top:0;z-index:1;
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.25rem;background:var(--fbc-ink);color:var(--fbc-paper);
}
.fbc-drawer__head h2{margin:0;font-size:1.3rem;color:var(--fbc-paper)}
.fbc-drawer__x{
  margin-left:auto;width:44px;height:44px;cursor:pointer;
  border:0;border-radius:2px;background:transparent;color:var(--fbc-paper);
  font-size:1.6rem;line-height:1;
}
.fbc-drawer__x:hover{background:var(--fbc-brand)}
.fbc-drawer__body{padding:1.25rem}

.fbc-lines{list-style:none;margin:0 0 1.2rem;padding:0;border-top:1px solid var(--fbc-rule)}
.fbc-line{
  display:grid;grid-template-columns:1fr auto auto;gap:.5rem 1rem;align-items:center;
  padding:.8rem 0;border-bottom:1px solid var(--fbc-rule);
}
.fbc-line__name{font-family:var(--wp--preset--font-family--display);font-weight:700;color:var(--fbc-ink)}
.fbc-line__sum{min-width:3.2rem;text-align:right;font-weight:700;color:var(--fbc-ink)}
.fbc-line__qty{display:inline-flex;align-items:center;gap:.15rem}
.fbc-qty{
  width:40px;height:40px;cursor:pointer;border:0;border-radius:2px;
  background:var(--fbc-board);color:var(--fbc-ink);
  font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:1.1rem;line-height:1;
}
.fbc-qty:hover{background:var(--fbc-brand);color:var(--fbc-paper)}
.fbc-qty__n{min-width:2ch;text-align:center;font-weight:700;color:var(--fbc-ink)}
.fbc-lines__empty{color:var(--fbc-muted);margin:0 0 1.2rem}

.fbc-sum{display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;margin:0 0 1.5rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--fbc-rule)}
.fbc-sum dt{color:var(--fbc-muted);font-size:.96rem}
.fbc-sum dd{margin:0;text-align:right;font-weight:700;color:var(--fbc-ink);font-size:.96rem}
.fbc-ord-form .fbc-submit{width:100%}

/* ---------------------------------------------------------------- the map - */
.fbc-map{
  position:relative;border-radius:var(--fbc-r);overflow:hidden;
  background:var(--fbc-board);
}
.fbc-map iframe{display:block;width:100%;height:340px;border:0}
.fbc-map__bar{
  /* margin:0 because it is a <p>, and the theme's paragraph margin would show
     as a strip of band colour under the bar inside the map's own rounded box. */
  margin:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;
  padding:.75rem 1rem;background:var(--fbc-ink);color:var(--fbc-paper);
  font-size:.94rem;
}
.fbc-map__bar b{font-family:var(--wp--preset--font-family--display)}
.fbc-map__bar a{margin-left:auto;color:var(--fbc-wheat)}
@media (max-width:34rem){
  .fbc-map iframe{height:260px}
  .fbc-map__bar a{margin-left:0}
}