/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ==========================================================================
   Freelance Finder design tokens - "Clay & Ochre"
   Documented at /brand/ (noindexed).
   Ratios below are measured, not estimated. Re-verify with
   .claude/skills/web-design-standards/scripts/contrast.py before changing.
   ========================================================================== */

:root {
  /* Ink and surfaces */
  --ff-ink:         #241C1A;  /* 16.72:1 on paper - headings, primary text  */
  --ff-ink-2:       #463B36;  /* 10.83:1 on paper - body copy               */
  --ff-muted:       #756860;  /*  5.38:1 on paper - secondary, meta         */
  --ff-ground:      #FBF6EF;  /* section backgrounds                        */
  --ff-paper:       #FFFFFF;  /* cards, page surface                        */
  --ff-sunken:      #F3EDE4;  /* inset panels, table headers                */

  /* Lines */
  --ff-hair:        #EADFD2;  /* 1.31:1 DECORATIVE ONLY, never a control    */
  --ff-border:      #A8917A;  /* 3.00:1 form controls, WCAG SC 1.4.11       */

  /* Clay, primary accent. NOTE: fails on every dark ground below.          */
  --ff-clay:        #B8503F;  /* 4.93:1 white-on-clay - primary button      */
  --ff-clay-dark:   #9C4234;  /* 6.48:1 - hover and focus ring              */
  --ff-clay-tint:   #F7E7E3;  /* panels, badges                            */

  /* Ochre, background hue only on light grounds */
  --ff-ochre:       #D98E2B;  /* NEVER text on light. Ink on it = 6.25:1   */
  --ff-ochre-dark:  #8F5915;  /* 5.82:1 - ochre as readable text            */
  --ff-ochre-tint:  #FBF0DC;

  /* Sage, links and secondary */
  --ff-sage:        #3E6B5A;  /* 6.08:1 - links, secondary action           */
  --ff-sage-dark:   #2F5546;  /* 8.37:1 white-on-it - dark ground, lighter  */
  --ff-sage-deep:   #1E3229;  /* 13.61:1 white-on-it - dark ground, deeper  */
  --ff-sage-tint:   #E4EFE9;  /* 11.55:1 on sage-deep - text on dark        */

  --ff-alert:       #A33B2C;  /* 6.52:1 - errors                            */

  /* Spacing, 4px base */
  --ff-s1: 0.25rem; --ff-s2: 0.5rem;  --ff-s3: 0.75rem;
  --ff-s4: 1rem;    --ff-s5: 1.5rem;  --ff-s6: 2rem;
  --ff-s7: 3rem;    --ff-s8: 4rem;    --ff-s9: 6rem;
  --ff-section: clamp(3.5rem, 8vw, 8rem);

  /* Measure. Inside Baymard 50-75 and WCAG 1.4.8 max 80. */
  --ff-measure: 68ch;
  --ff-measure-tight: 58ch;

  /* Targets. WCAG SC 2.5.8 min 24px, 44px comfortable. */
  --ff-tap-min: 24px;
  --ff-tap:     44px;

  /* Radius */
  --ff-r-sm: 4px; --ff-r: 6px; --ff-r-lg: 10px; --ff-r-pill: 999px;

  /* Dark surface gradient, used by heroes and the footer. */
  --ff-dark-gradient: linear-gradient(105deg, var(--ff-sage-deep) 0%, var(--ff-sage-dark) 100%);

  --ff-badge-clear: 3.25rem;
}

/* ==========================================================================
   Baseline
   ========================================================================== */

/* Constrain prose without constraining layout. Container stays 1200px;
   sentences stop at 68ch so wide screens widen grids, not paragraphs. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
  max-width: var(--ff-measure);
}

/* Visible focus on everything interactive, keyboard only. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ff-clay-dark);
  outline-offset: 2px;
  border-radius: var(--ff-r-sm);
}

/* Form controls need a 3:1 boundary; the hairline does not qualify. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
select,
textarea {
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-r);
  min-height: var(--ff-tap);
  font-size: 1rem; /* 16px stops iOS zoom-on-focus */
}

textarea { min-height: calc(var(--ff-tap) * 2); }

/* Submit buttons. BDP's search form sits outside .wpbdp-page, so these were
   falling back to the WordPress default #32373C. */
input[type="submit"],
button[type="submit"],
.wpbdp-page button,
.wpbdp-page input[type="submit"],
#wpbdp-search-form button,
.wpbdp-search-form button,
.wpbdp-bar button,
button.wpbdp-button,
input[type="submit"].wpbdp-button,
.submit-btn input[type="submit"] {
  font-size: 1rem;
  background-color: var(--ff-clay);
  color: #fff;
  border: 2px solid transparent;
  border-radius: var(--ff-r);
  min-height: var(--ff-tap);
  padding: 0 var(--ff-s5);
  font-weight: 600;
  cursor: pointer;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
input[type="submit"]:focus,
button[type="submit"]:focus {
  background-color: var(--ff-clay-dark);
  color: #fff;
}

.wp-block-button__link,
.button {
  min-height: var(--ff-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Buttons

   These are the REAL GenerateBlocks Global Style classes, not lookalikes. The
   brand guide renders these same classes, so anything changed here shows up
   there and on every page at once. Do not invent parallel button CSS.
   ========================================================================== */

body .gbp-button--primary,
body .gbp-button--secondary,
body .gbp-button--quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--ff-tap);
  padding: 0 var(--ff-s5);
  border-radius: var(--ff-r);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

/* Primary. One per view. The thing we most want clicked. */
body .gbp-button--primary {
  background-color: var(--ff-clay);
  color: #fff;
}
body .gbp-button--primary:hover,
body .gbp-button--primary:focus-visible {
  background-color: var(--ff-clay-dark);
  color: #fff;
}

/* Secondary. Equal-weight alternative action. */
body .gbp-button--secondary {
  background-color: transparent;
  color: var(--ff-sage-dark);
  border-color: var(--ff-sage);
}
body .gbp-button--secondary:hover,
body .gbp-button--secondary:focus-visible {
  background-color: var(--ff-sage-tint);
  color: var(--ff-sage-dark);
}

/* Quiet. Repeating, low-priority actions such as Read More on a card grid,
   where a filled button on every card competes with the real CTA. */
body .gbp-button--quiet {
  background-color: transparent;
  color: var(--ff-clay-dark);
  padding-inline: 0;
  border-color: transparent;
}
body .gbp-button--quiet::after {
  content: "\2192";
  transition: transform 150ms ease;
}
body .gbp-button--quiet:hover,
body .gbp-button--quiet:focus-visible {
  color: var(--ff-clay);
}
body .gbp-button--quiet:hover::after {
  transform: translateX(3px);
}

/* On-dark. The fourth and final variant. Clay is 2.76:1 on sage and fails, so
   anything actionable on the footer, a hero, or the off-canvas menu uses this.
   Deliberately NOT an ochre fill: ochre needs dark text (white on it is
   2.12:1), which makes a filled ochre button read as a warning badge rather
   than an action. */
body .gbp-button--on-dark,
body .site-footer .gbp-button--secondary,
body .gb-menu-container .gbp-button--secondary {
  background-color: transparent;
  color: var(--ff-sage-tint);          /* 7.10:1 on sage-dark */
  border-color: var(--ff-sage-tint);
}

body .gbp-button--on-dark:hover,
body .gbp-button--on-dark:focus-visible {
  background-color: var(--ff-sage-tint);
  color: var(--ff-sage-deep);          /* 11.55:1 inverted */
}

/* ==========================================================================
   Formidable forms

   The submit button uses the same Global Style as everything else rather than
   Formidable's own chrome, so there is one button system on the site.
   ========================================================================== */

.frm_forms .frm_form_field {
  margin-bottom: var(--ff-s5);
}

.frm_forms .frm_primary_label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ff-ink);
  margin-bottom: var(--ff-s2);
}

.frm_forms .frm_required {
  color: var(--ff-alert);
  font-weight: 700;
}

.frm_forms input[type="text"],
.frm_forms input[type="email"],
.frm_forms input[type="tel"],
.frm_forms input[type="url"],
.frm_forms select,
.frm_forms textarea {
  width: 100%;
  max-width: var(--ff-measure-tight);
  border: 1px solid var(--ff-border);   /* 3:1, WCAG SC 1.4.11 */
  border-radius: var(--ff-r);
  background: var(--ff-paper);
  color: var(--ff-ink);
  font-size: 1rem;                      /* 16px stops iOS zoom-on-focus */
  min-height: var(--ff-tap);
  padding: var(--ff-s2) var(--ff-s3);
}

.frm_forms textarea {
  min-height: calc(var(--ff-tap) * 3);
  line-height: 1.6;
}

.frm_forms input:focus-visible,
.frm_forms textarea:focus-visible,
.frm_forms select:focus-visible {
  outline: 3px solid var(--ff-clay-dark);
  outline-offset: 1px;
  border-color: var(--ff-clay-dark);
}

/* Errors name the fix, and never rely on colour alone. */
.frm_forms .frm_error {
  color: var(--ff-alert);
  font-size: 0.88rem;
  margin-top: var(--ff-s2);
}

.frm_forms .frm_blank_field input,
.frm_forms .frm_blank_field textarea {
  border-color: var(--ff-alert);
  border-width: 2px;
}

.frm_forms .frm_message,
.frm_forms .frm_success_style {
  background: var(--ff-sage-tint);
  border: 1px solid var(--ff-sage);
  border-radius: var(--ff-r);
  color: var(--ff-ink);
  padding: var(--ff-s4) var(--ff-s5);
}

.frm_forms .frm_button_submit,
.frm_forms input[type="submit"],
.frm_forms button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ff-tap);
  padding: 0 var(--ff-s5);
  border-radius: var(--ff-r);
  border: 2px solid transparent;
  background-color: var(--ff-clay);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

.frm_forms .frm_button_submit:hover,
.frm_forms .frm_button_submit:focus-visible {
  background-color: var(--ff-clay-dark);
  color: #fff;
}

/* ==========================================================================
   Business Directory rules that must live HERE, not in wpbdp.css

   BDP enqueues its override file as wpbdp.css?ver=WPBDP_VERSION (6.4.26), so
   the URL never changes when the file is edited and a CDN serves a stale copy
   indefinitely. This stylesheet is enqueued with filemtime(), so edits take
   effect immediately. Anything being actively iterated on belongs here.
   ========================================================================== */

/* Listing tags. Rendered as bare inline links at 20px tall, under the 24px
   floor, and packed close enough that SC 2.5.8's Spacing exception does not
   apply. Verified class chain: .wpbdp-field-association-tags > .value > a */
body .wpbdp-field-association-tags .value,
body .wpbdp-field-business_tags .value {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ff-s2);
}

body .wpbdp-field-association-tags .value a,
body .wpbdp-field-business_tags .value a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ff-tap-min);
  padding: 2px 10px;
  background: var(--ff-sunken);
  color: var(--ff-ink-2);
  border: 1px solid var(--ff-hair);
  border-radius: var(--ff-r-pill);
  font-size: 0.8rem;
  text-decoration: none;
}

body .wpbdp-field-association-tags .value a:hover,
body .wpbdp-field-business_tags .value a:hover {
  background: var(--ff-clay-tint);
  border-color: var(--ff-clay);
  color: var(--ff-clay-dark);
}

/* ==========================================================================
   Badges
   ========================================================================== */

body .gbp-badge,
body .gb-element-054aef3e {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--ff-r-pill);
  background-color: var(--ff-clay-tint);
  color: var(--ff-clay-dark);
}

body .gb-element-054aef3e .gb-text,
body .gb-element-054aef3e a {
  color: var(--ff-clay-dark) !important;
  font-style: normal !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  text-decoration: none;
}

body .gbp-badge--sage { background-color: var(--ff-sage-tint); color: var(--ff-sage-dark); }
body .gbp-badge--ochre { background-color: var(--ff-ochre); color: var(--ff-ink); }

/* Stacked link lists need 24px targets. SC 2.5.8 exempts inline links inside
   a sentence, but a list of standalone links is not that, and neighbours sit
   close enough that the Spacing exception does not apply. These rendered at
   21px tall. */
.entry-title a,
.wp-block-latest-posts__list a,
.widget_categories li a,
.widget_archive li a,
.widget_nav_menu li a,
.wpbdp-categories li.cat-item a,
.site-footer li > a {
  display: inline-block;
  min-height: var(--ff-tap-min);
  line-height: 1.45;
  padding-block: 2px;
}

/* The front page has no hero, so Mechanic's 128px content padding leaves a
   void under the header. GeneratePress puts .one-container on BODY next to
   .home, so these must be on the same element, not a descendant. */
body.home .site-content,
body.page-id-8 .site-content {
  padding-top: var(--ff-s6);
}

/* ==========================================================================
   Dark surfaces

   GenerateBlocks prints its block CSS AFTER this stylesheet, and at equal
   single-class specificity the later rule wins, so these carry a body prefix
   and !important on paint properties only.

   Accessibility constraint: CLAY FAILS on every sage ground (2.76:1 on deep,
   1.70:1 on sage-dark). Never put clay text or clay buttons on these. Use
   sage-tint or white for text, ochre only on the deeper stop (5.09:1).
   ========================================================================== */

body .gb-element-212c8daf,   /* Page Hero - Pages */
body .gb-element-d38e93e9,   /* Page Hero - Blog and Archives */
body .gb-element-a2567e39,   /* Page Hero - Search Results */
body .gb-element-4ddf4c07,   /* Template - 404 */
body .gb-element-73c3ebb8 {  /* Template - No Search Results */
  background-image: var(--ff-dark-gradient) !important;
  background-color: var(--ff-sage-deep) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Footer sits on the same family rather than brown. */
body .site-footer,
body .gb-element-8e4d88dd,
body footer.site-footer {
  background-image: var(--ff-dark-gradient);
  background-color: var(--ff-sage-deep);
}

/* Mechanic wraps the footer in its own dark-brown containers, so only the
   inner panel picked up the sage. Paint the whole footer stack, including the
   CTA band and the bottom bar. */
body .site-footer,
body .site-footer > .gb-element,
body .site-footer .gb-element[class*="gb-element-"]:not([class*="gbp-card"]) {
  background-color: transparent;
}

/* Footer is a SOLID ground, not a gradient. Two reasons: the gradient read as
   two different greens across the width, and a solid deep stop means ochre
   clears 4.5:1 everywhere on it (5.09:1) instead of only on the dark end. */
body .site-footer {
  background-image: none !important;
  background-color: var(--ff-sage-deep) !important;
}

/* The footer's bounded panel had content sitting hard against its border:
   the mark and blurb on the left, the column values on the right. If the box
   keeps its border it needs real padding on all four sides. */
/* With the panel gone, the columns align to the CTA band above by sharing its
   inset rather than by compensating for a border. */
body .site-footer .gbp-section__inner {
  padding-block: var(--ff-s7);
  padding-inline: 0;
  margin-inline: 0;
}

@media (max-width: 767px) {
  body .site-footer .gbp-section__inner {
    padding-block: var(--ff-s6);
  }
}

body .site-footer .gbp-card__text {
  min-width: 0;
}

body .site-footer .gbp-card__text .gb-element {
  gap: var(--ff-s4);
  min-width: 0;
}

body .site-footer .gbp-card__text .gb-element > span:last-child {
  white-space: nowrap;
  flex: 0 0 auto;
  text-align: right;
}

body .site-footer .gbp-card__text .gb-element > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* The CTA band is the one surface in the footer that earns a panel, because
   it is a distinct call to action. Translucent white lifts it off the sage
   without introducing a second hue. */
body .site-footer .gb-element-fd7f39c7 {
  background-color: rgba(255, 255, 255, 0.07) !important;
  background-image: none !important;
  border-radius: var(--ff-r-lg);
}

/* Mechanic paints this wrapper section ink (#241C1A) across the whole footer
   height. It sat under the old gradient, so removing the gradient exposed it
   and the footer went brown again. Let the sage ground through. */
body .site-footer .gbp-section,
body .site-footer .gb-element-0abd59bc {
  background-color: transparent !important;
  background-image: none !important;
}

/* The link columns do NOT earn a panel. A bordered, gradient-filled box inside
   an already-distinct footer ground is chrome for its own sake, and it was the
   source of the two-tone green, the alignment drift, and the padding issues.
   Let the columns sit directly on the sage. */
body .gb-element-8e4d88dd {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Mechanic's footer grid still declares four tracks (220px 220px 165px 330px)
   but only holds three columns since Listing Details came out, leaving a dead
   330px on the right. Three even-ish columns, brand blurb slightly wider. */
body .site-footer .gb-element-125af5d3 {
  grid-template-columns: 1.3fr 1fr 1fr !important;
  gap: var(--ff-s7) var(--ff-s6) !important;
  align-items: start;
}

@media (max-width: 900px) {
  body .site-footer .gb-element-125af5d3 {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 600px) {
  body .site-footer .gb-element-125af5d3 {
    grid-template-columns: 1fr !important;
    gap: var(--ff-s6) !important;
  }
}

/* Listing Details rows were clipping their values at the panel edge because
   the label and value both sat on a fixed-width flex row. */
body .site-footer .gbp-card__text > .gb-element {
  flex-wrap: wrap;
  column-gap: var(--ff-s4);
}

body .site-footer .gbp-card__text > .gb-element > span:last-child {
  text-align: right;
  white-space: nowrap;
  flex: 0 0 auto;
}

body .site-footer .gbp-card__text > .gb-element > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* Footer text legibility.

   Measured after the ground changed: four elements were inheriting ink-2
   (#463B36) and rendering at 1.26:1 on the sage ground, which is effectively
   invisible. Anything on a dark surface takes a light token.

   Ochre is 5.09:1 on the deep stop but only 3.13:1 on the lighter one, so it
   fails as text across the gradient and is reserved for non-text accents. */
body .site-footer,
body .site-footer p,
body .site-footer span,
body .site-footer li,
body .site-footer h2,
body .site-footer h3,
body .site-footer h4 {
  color: var(--ff-ground);
}

body .site-footer a {
  color: var(--ff-sage-tint);      /* 7.10:1 on the lighter stop */
}

body .site-footer a:hover,
body .site-footer a:focus-visible {
  color: #FFFFFF;                  /* 8.37:1 */
  text-decoration: underline;
}

/* Focus ring must clear 3:1 against the dark ground, and clay does not. */
body .site-footer a:focus-visible,
body .site-footer button:focus-visible {
  outline: 3px solid var(--ff-sage-tint);
  outline-offset: 2px;
}

/* ==========================================================================
   Single post hero

   Mechanic builds the diagonal from a hard-stop gradient:
     linear-gradient(45deg, var(--contrast-2) 50%, var(--base) 50%)
   The brown half is the outlier, so it becomes sage. Cream stays because it is
   our actual ground token and gives the split its contrast.

   Padding-bottom was 10rem (160px), which pushed the article roughly 1000px
   down the page before a reader reached a sentence.
   ========================================================================== */

body .gb-element-2331788b {
  background-color: var(--ff-sage-deep) !important;
  background-image:
    linear-gradient(180deg, var(--ff-sage-deep) 2%, rgba(0, 0, 0, 0) 2%),
    linear-gradient(45deg, var(--ff-sage-deep) 50%, var(--ff-ground) 50%) !important;
  /* Measured 128px above the content and 64px below, a 2:1 imbalance that read
     as the hero sagging. Symmetric and fluid, so it tightens on small screens
     without needing a breakpoint. */
  padding-top: clamp(3rem, 6vw, 5rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

/* Article body started 96px below the hero on top of that. */
body .gb-element-7e6aac2a {
  padding-top: var(--ff-s7) !important;
}

/* Single-post hero reading order.

   NN/g: a byline earns its space when the author carries credibility relevant
   to the piece, and should stay short because users read roughly 120 words per
   page view. Every post here is written by the person who runs the directory,
   so one line of "By <name> - <date>" qualifies.

   Order is category, then title, then byline. The category acts as an eyebrow,
   which is the pattern the typographic card already uses on the archive.
   Done with flex order rather than moving blocks, so the template stays intact
   and the change is reversible. */
/* The wrapper renders with NO class, because GenerateBlocks only emits one
   when the block carries styles. Target it structurally through its parent. */
body .gb-element-31e92985 > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ff-s3);
}

body .gb-element-31e92985 > div > .gb-element-60361446 { order: -1; }  /* category */
body .gb-element-31e92985 > div > h1 { order: 0; margin-bottom: 0; }   /* title    */
body .gb-element-31e92985 > div > p  { order: 1; margin-bottom: 0; }   /* byline   */

/* Badge colour follows the ground it sits on.
   On the dark sage hero, clay-tint is a pale pink that reads as foreign and
   clay itself fails at 2.76:1. Ochre with ink text is 6.25:1 and stays in the
   accent family. On light grounds the archive badge keeps clay-tint. */
body .gb-text-93ec5672 a {
  background-color: var(--ff-ochre) !important;
  color: var(--ff-ink) !important;
  border-radius: var(--ff-r-pill) !important;
  padding: 4px 12px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--ff-tap-min);
}

body .gb-text-93ec5672 a:hover {
  background-color: var(--ff-ochre-dark) !important;
  color: #fff !important;
}

/* Blog archive category badge.

   Mechanic pins this absolutely at top:0 so it overlays the card's featured
   image. No post on this site has a featured image and none are planned, so
   the image collapses and the badge lands on the post title, overlapping it
   by 16px. Putting it back in normal flow fixes the collision and gives us
   the category eyebrow the typographic card wanted anyway. */
body .gb-element-054aef3e {
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin-bottom: var(--ff-s4);
  box-shadow: none !important;
  border-radius: var(--ff-r-sm);
  align-self: flex-start;
}

/* The tail on the corner-tab motif only makes sense when it is pinned. */
body .gb-element-054aef3e::before {
  display: none !important;
}

/* Measured: badge sat at left 40 while the card heading sat at 72, because the
   badge escapes the card's inner padding. Indent it to match the content. */
body .gb-loop-item .gb-element-054aef3e,
body article .gb-element-054aef3e {
  margin-left: var(--ff-s6);
}

@media (max-width: 767px) {
  body .gb-loop-item .gb-element-054aef3e,
  body article .gb-element-054aef3e {
    margin-left: var(--ff-s5);
  }
}

/* Empty featured-image slot, in case GenerateBlocks still reserves height. */
body .gb-media-97e1a150:not([src]),
body .gb-media-97e1a150[src=""] {
  display: none !important;
}

/* Mobile menu label.

   The header uses the GenerateBlocks Pro navigation block, so GeneratePress's
   native "Mobile Menu Label" Customizer setting does not apply. A ::before is
   decorative and is not guaranteed to reach assistive tech, so the button
   keeps its own accessible name; this only adds the visible word. */
@media (max-width: 1024px) {
  /* Toggle belongs on the right. It was rendering hard left because the
     wordmark container carries flex-grow:1 and the toggle followed it. */
  .gb-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5em;
    min-height: var(--ff-tap);
    padding-inline: var(--ff-s3);
    margin-left: auto !important;
    order: 99;
  }

  /* Off-canvas panel: sage, not Mechanic's brown #463B36. Solid deep stop so
     ochre clears 4.5:1 for the active state. */
  .gb-menu-container,
  .gb-menu-container .menu-item,
  .gb-menu-container ul,
  .gb-menu-container li {
    background-color: transparent !important;
  }

  .gb-menu-container {
    background-color: var(--ff-sage-deep) !important;
  }

  .gb-menu-container a {
    color: var(--ff-ground) !important;   /* 12.65:1 */
    min-height: var(--ff-tap);
    display: flex;
    align-items: center;
  }

  .gb-menu-container a:hover,
  .gb-menu-container a:focus-visible {
    color: #FFFFFF !important;
  }

  /* Active state. Clay is 2.76:1 on this ground and fails, so the current
     item takes ochre at 5.09:1 instead. */
  .gb-menu-container .current-menu-item > a,
  .gb-menu-container [class*="current-menu"] > a,
  .gb-menu-container [aria-current="page"] {
    color: var(--ff-ochre) !important;
    font-weight: 700;
  }

  .gb-menu-container a:focus-visible {
    outline: 3px solid var(--ff-sage-tint);
    outline-offset: -3px;
  }

  .gb-menu-toggle::before {
    content: "Menu";
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1;
    color: currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}