/*
Theme Name: Bremesgraf Enterprise
Author: Bremesgraf
Description: An accessible corporate theme with native block editing, a specification-led product catalogue and self-hosted typography.
Version: 4.12.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: bremesgraf
*/

/* ==========================================================================
   1. Tokens
   Brand colours are unchanged from version 3. What is new: two neutrals
   (a deeper navy for the footer and utility bar, a tinted ground for product
   photography), three named spacing tiers instead of one, and three type
   families. Everything downstream refers to these and nothing else.
   ========================================================================== */

:root {
  /* Brand */
  --bg-navy: #0a2635;
  --bg-navy-deep: #071c27;
  --bg-teal: #007c83;
  --bg-teal-dark: #00666c;
  --bg-cyan: #65d8e2;
  --bg-citron: #d9ed99;
  --bg-citron-ink: #3d5a20;

  /* Neutrals */
  --bg-ink: #152e3c;
  --bg-ink-soft: #37505c;
  --bg-muted: #536873;
  --bg-line: #d9e3e8;
  --bg-line-dark: #3d5a68;
  --bg-mist: #f1f5f5;
  --bg-mist-2: #f0f5f7;
  --bg-plinth: #eef3f5;
  --bg-paper: #ffffff;
  --bg-chip: #e4f0f1;

  /* Text on navy */
  --bg-on-navy: #c2d4dd;
  --bg-on-navy-soft: #a9c1cd;
  --bg-on-navy-faint: #7fa0b0;

  /* Type */
  --bg-font-display: "Archivo", "Segoe UI", Arial, Helvetica, sans-serif;
  --bg-font-body: "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --bg-font-mono: "IBM Plex Mono", Consolas, "Cascadia Mono", "Courier New", monospace;

  --bg-fs-display: clamp(2.5rem, 5.2vw, 4.875rem);   /* 40 - 78 */
  --bg-fs-section: clamp(2rem, 3.6vw, 3.25rem);      /* 32 - 52 */
  --bg-fs-sub: clamp(1.6875rem, 2.4vw, 2.125rem);    /* 27 - 34 */
  --bg-fs-card: 1.5rem;                              /* 24 */
  --bg-fs-model: clamp(1.25rem, 1.6vw, 1.4375rem);   /* 20 - 23 */
  --bg-fs-body: 1.0625rem;                           /* 17 */
  --bg-fs-meta: 0.90625rem;                          /* 14.5 */
  --bg-fs-eyebrow: 0.71875rem;                       /* 11.5 */

  --bg-tracking-display: -0.035em;
  --bg-tracking-tight: -0.025em;
  --bg-tracking-eyebrow: 0.16em;

  /* Space */
  --bg-space-generous: 104px;
  --bg-space-standard: 76px;
  --bg-space-compact: 44px;
  /* The north-east arrow, as a mask image. Same geometry and stroke weight as
     bg_arrow() in functions.php, so the arrow a template draws and the one CSS
     masks onto a content link are the same mark. Drawn rather than typed: the
     self-hosted faces are Latin subsets and carry no U+2197, so the character
     would fall back to whatever the reader's system had, or to a blank box. */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='8 7 17 7 17 16'/%3E%3C/svg%3E");

  --bg-gutter: clamp(24px, 4vw, 56px);
  --bg-max: 1240px;
  --bg-measure: 68ch;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
/* The header is sticky, so an anchor that scrolls to the top of the viewport
   lands underneath it. Every in-page jump stops clear of the header instead. */
html { scroll-behavior: smooth; scroll-padding-top: 116px; }
@media (max-width: 900px) { html { scroll-padding-top: 92px; } }

body {
  margin: 0;
  background: var(--bg-paper);
  color: var(--bg-ink);
  font-family: var(--bg-font-body);
  font-size: var(--bg-fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }

a { color: var(--bg-teal); text-underline-offset: 5px; }
a:hover { color: var(--bg-teal-dark); text-decoration-thickness: 2px; }

h1, h2, h3, h4 {
  font-family: var(--bg-font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--bg-tracking-tight);
  margin: 0;
}
h1 { font-size: var(--bg-fs-display); line-height: 1.03; letter-spacing: var(--bg-tracking-display); }
h2 { font-size: var(--bg-fs-section); line-height: 1.08; letter-spacing: -0.03em; }
h3 { font-size: var(--bg-fs-card); line-height: 1.22; letter-spacing: -0.02em; }
h4 { font-size: 1.125rem; }

p { margin: 0 0 1.3em; }
p:last-child { margin-bottom: 0; }

/* Model numbers, measurements and labels. Tabular figures matter in a catalogue
   where readers compare 1010 mm against 1013 mm down a column. */
.mono, .card-kicker, .eyebrow, .card-chips li, .key-figure dd,
.detail-title, .card-title, .filter-count {
  font-variant-numeric: tabular-nums;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--bg-teal);
  outline-offset: 3px;
}
/* On navy and citron grounds the teal ring disappears; use the ground's own
   high-contrast colour instead. */
.topbar a:focus-visible, .site-footer a:focus-visible,
.detail-hero a:focus-visible, .page-heading a:focus-visible,
.process-section a:focus-visible { outline-color: var(--bg-cyan); }
.closing-cta a:focus-visible, .enterprise-cta a:focus-visible { outline-color: var(--bg-navy); }

.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important;
}

.skip-link { position: absolute; top: -100px; left: 16px; z-index: 99; background: #fff; padding: 12px; }
.skip-link:focus { top: 8px; }

.wrap { width: min(var(--bg-max), calc(100% - 2 * var(--bg-gutter))); margin-inline: auto; }

/* ==========================================================================
   3. Shared components
   ========================================================================== */

.eyebrow {
  font-family: var(--bg-font-mono);
  font-size: var(--bg-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--bg-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bg-teal);
  margin: 0;
}

.bg-arrow { flex: none; }

.button,
.wp-block-button__link,
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  background: var(--bg-navy);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-family: var(--bg-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 16px 26px;
  min-height: 48px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.button:hover, .wp-block-button__link:hover, .header-cta:hover { background: var(--bg-teal); color: #fff; }

/* One citron action per page: the single most important next step. */
.button-primary,
.detail-hero .button-primary { background: var(--bg-citron); color: var(--bg-navy); }
.button-primary:hover { background: #cbe37f; color: var(--bg-navy); }

.button-ghost { background: transparent; color: #fff; border: 1px solid #52707f; }
.button-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.button-solid { width: 100%; }

/* ==========================================================================
   4. Utility bar and header
   ========================================================================== */

.topbar { background: var(--bg-navy-deep); color: var(--bg-on-navy-faint); }
/* The phone and email are the whole bar now, so they close on the right rather
   than sitting against a country line that is no longer there. */
.topbar-row {
  display: flex; align-items: center; justify-content: flex-end; gap: 24px;
  min-height: 40px;
  font-family: var(--bg-font-mono);
  font-size: 0.71875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar-contact { display: flex; align-items: center; gap: 20px; }
.topbar-divider { color: #3a5666; }

/* The header follows you down the page. The utility bar above it does not - it
   carries the phone and email, which the header's own button covers, and
   holding both would cost 136px of every screen. */
.site-header {
  background: var(--bg-paper); border-bottom: 1px solid var(--bg-line);
  position: sticky; top: 0; z-index: 50;
}
/* Logged in, the admin bar owns the top of the viewport: 32px, and 46px below
   783px where WordPress switches it to the taller mobile bar. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
/* The containing block for the catalogue panel, which spans the header rather
   than hanging off the Products item. */
.header-row { display: flex; align-items: center; gap: 40px; min-height: 96px; position: relative; }

.brand { font-family: var(--bg-font-display); font-weight: 700; font-size: 1.75rem; letter-spacing: -0.04em; color: var(--bg-navy); text-decoration: none; }
.brand-logo { display: block; width: 208px; height: auto; }
.custom-logo { max-height: 62px; width: auto; }

.primary-nav { margin-left: auto; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 28px; }
.primary-nav li { position: relative; }
.primary-nav a { font-size: 0.9375rem; font-weight: 500; color: var(--bg-ink); text-decoration: none; }
.primary-nav > ul > li > a { display: inline-block; padding: 12px 0; }
.primary-nav a:hover { color: var(--bg-teal); }
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-parent > a,
.primary-nav .current-menu-ancestor > a { color: var(--bg-teal); font-weight: 600; }

.primary-nav .menu-item-has-children > a::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 9px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .55;
}

/* Ordinary drop-down (any second-level menu item the client adds). */
.primary-nav .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 60; min-width: 262px;
  background: #fff; border: 1px solid var(--bg-line); border-top: 2px solid var(--bg-teal);
  padding: 8px 0; margin: 0; display: none; flex-direction: column; gap: 0;
  box-shadow: 0 18px 40px rgba(10, 38, 53, .13);
  /* Sectors runs to ten items; on a short laptop screen the panel scrolls
     rather than running off the bottom of the viewport. */
  max-height: min(70vh, 540px); overflow-y: auto;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: flex; }

/* The caret button that folds a drop-down open on a phone. It is in the markup
   at every width and hidden here, so nothing has to be built or torn down when
   the viewport crosses the breakpoint. */
.submenu-toggle {
  display: none;
  position: absolute; top: 0; right: -8px;
  width: 48px; height: 52px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 0; color: var(--bg-ink); cursor: pointer;
}
.submenu-toggle svg { transition: transform .22s ease; opacity: .6; }
.submenu-toggle:hover svg { opacity: 1; }
.menu-item.is-expanded > .submenu-toggle svg { transform: rotate(180deg); opacity: 1; }
.primary-nav .sub-menu li { width: 100%; }
.primary-nav .sub-menu a { display: block; padding: 11px 20px; font-size: 0.9375rem; line-height: 1.4; }
.primary-nav .sub-menu a:hover { background: var(--bg-mist-2); }

/* Catalogue panel: full width of the header, columns generated from the
   product-category taxonomy. */
/*
 * Measured against .header-row, not the Products item, so it lines up with the
 * page gutters and cannot run off the side of the viewport.
 *
 * It must not be centred with a transform. The open animation (bg-drop, in
 * enterprise.css) animates transform and fills forwards, so a translateX(-50%)
 * here would be replaced by "none" the moment the panel finished opening and
 * the panel would jump half its own width to the right - off the screen on a
 * narrow desktop window. Left and right offsets are not animated, so they hold.
 */
.primary-nav li.has-mega-panel { position: static; }
.mega-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid var(--bg-line); border-top: 2px solid var(--bg-teal);
  box-shadow: 0 18px 40px rgba(10, 38, 53, .13);
  padding: 30px 34px; display: none; z-index: 60;
}
/*
 * The pointer has to cross 18px of header between the bottom of the Products
 * item and the top of the panel, and :hover on the item is lost on the way -
 * the panel shuts just as you reach for it. This transparent strip spans that
 * gap. It is inside the panel, which is inside the list item, so the pointer
 * never leaves the item it is hovering and the panel stays open.
 */
.mega-panel::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px;
}
.has-mega-panel:hover > .mega-panel,
.has-mega-panel:focus-within > .mega-panel { display: block; }
.mega-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; }
.mega-column { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mega-heading {
  font-family: var(--bg-font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bg-teal) !important;
}
.mega-column ul { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.mega-column li { width: 100%; }
.mega-column a { font-size: 0.90625rem; line-height: 1.45; }

/*
 * A wide screen with no pointer - an iPad in landscape sits above the 900px
 * breakpoint and still has nothing to hover with - can never open a hover-only
 * panel, and the drop-downs are simply unreachable. There the caret button that
 * the phone layout uses is shown inline instead, and the panels answer to it
 * rather than to :hover. Safari on iPadOS reports itself as a desktop browser,
 * so a width breakpoint alone would never have caught this.
 */
@media (min-width: 901px) and (hover: none) {
  .primary-nav .menu-item-has-children > a::after { display: none; }
  .primary-nav .menu-item-has-children > a { padding-right: 2px; }
  .submenu-toggle {
    display: inline-flex; position: static;
    width: 28px; height: 44px; margin-left: 2px; vertical-align: middle;
  }
  .primary-nav li:hover > .sub-menu,
  .primary-nav li:hover > .mega-panel { display: none; }
  .primary-nav li.is-expanded > .sub-menu { display: flex; }
  .primary-nav li.is-expanded > .mega-panel { display: block; }
}

.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-left: auto;
  background: #fff; border: 1px solid var(--bg-line); color: var(--bg-navy); border-radius: 0;
}

.header-cta { margin-left: 4px; padding: 15px 24px; min-height: 46px; white-space: nowrap; }

/* ==========================================================================
   5. Footer
   ========================================================================== */

.site-footer { background: var(--bg-navy-deep); color: var(--bg-on-navy-soft); padding: 72px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 56px; }
.footer-brand { display: flex; flex-direction: column; gap: 22px; }
.site-footer .brand, .site-footer .brand-logo { color: #fff; }
.site-footer .brand-logo { width: 224px; }
.footer-tagline { font-size: 0.9375rem; line-height: 1.75; color: #93aebb; max-width: 42ch; margin: 0; }

.site-footer h2 {
  font-family: var(--bg-font-mono); font-size: 0.71875rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: #fff; margin: 0 0 18px;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer p, .site-footer a { font-size: var(--bg-fs-meta); color: var(--bg-on-navy-soft); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-address, .footer-lines { line-height: 1.7; margin: 0 0 14px; }
.footer-address-label {
  display: block; font-family: var(--bg-font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #6f8b99; margin-bottom: 4px;
}

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  border-top: 1px solid #24404e; margin-top: 52px; padding-top: 24px;
}
.footer-bottom p, .footer-bottom a {
  font-family: var(--bg-font-mono); font-size: 0.71875rem; letter-spacing: .05em; color: #7d99a7; margin: 0;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* ==========================================================================
   6. Page chrome shared by every template
   ========================================================================== */

.breadcrumbs { font-family: var(--bg-font-mono); font-size: 0.75rem; letter-spacing: .07em; color: var(--bg-muted); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.breadcrumbs li + li::before { content: "/"; margin: 0 10px; opacity: .55; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--bg-teal); }
.breadcrumbs [aria-current="page"] { color: var(--bg-ink); }

/* Breadcrumb bar for pages with no page heading of their own.
   Set on the deep navy so it reads as the top edge of a dark hero rather than
   as a separate strip; on a light page it still reads as chrome under the
   header. */
.breadcrumb-bar { background: var(--bg-navy-deep); }
.breadcrumb-bar .breadcrumbs { color: var(--bg-on-navy-faint); padding-block: 15px; }
.breadcrumb-bar .breadcrumbs a { color: var(--bg-on-navy-soft); }
.breadcrumb-bar .breadcrumbs a:hover { color: var(--bg-cyan); }
.breadcrumb-bar .breadcrumbs [aria-current="page"] { color: #fff; }

.page-heading { background: var(--bg-navy); color: var(--bg-on-navy); padding: var(--bg-space-compact) 0 calc(var(--bg-space-compact) + 12px); margin-bottom: 0; }
.page-heading h1 { color: #fff; margin: 16px 0 0; max-width: 20ch; }
.page-heading .eyebrow { color: var(--bg-cyan); }
.page-heading .breadcrumbs { color: var(--bg-on-navy-faint); margin-bottom: 30px; }
.page-heading .breadcrumbs [aria-current="page"] { color: #fff; }
.page-heading .breadcrumbs a:hover { color: var(--bg-cyan); }
.page-heading .entry-meta { color: var(--bg-on-navy-soft); }

.prose { padding: var(--bg-space-standard) 0; }
.prose .entry-content { max-width: var(--bg-max); margin-inline: auto; }
.prose h2 { font-size: var(--bg-fs-sub); margin-top: 1.8em; }
.prose ul { padding-left: 24px; }
.prose li { padding-left: 5px; margin-bottom: 8px; }
.prose .wp-block-image { margin-block: 36px; }

/* Tables anywhere in page content. WordPress core boxes every cell, which reads
   like a word-processor document; rules between rows are enough to separate
   them. The product templates refine this further in enterprise.css. */
/* A three-column table of prose - the lawful bases in the privacy notice, the
   cookies in the cookie policy - cannot fold into 327px of phone. It scrolls
   inside its own figure instead, so the table moves and the page does not. */
.entry-content .wp-block-table { margin-block: 2em; overflow-x: auto; }
.entry-content .wp-block-table table { width: 100%; min-width: 26rem; border: 0; border-collapse: collapse; font-size: 1rem; }
.entry-content .wp-block-table td,
.entry-content .wp-block-table th {
  border: 0; border-top: 1px solid var(--bg-line);
  padding: 14px 24px 14px 0; text-align: left; vertical-align: baseline;
}
.entry-content .wp-block-table td:last-child,
.entry-content .wp-block-table th:last-child { padding-right: 0; }
.entry-content .wp-block-table tr:first-child > * { border-top: 0; padding-top: 0; }
.entry-content .wp-block-table tr:last-child > * { border-bottom: 1px solid var(--bg-line); }
.entry-content .wp-block-table thead th {
  font-family: var(--bg-font-mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bg-muted);
}
.entry-content .wp-block-table figcaption { font-size: var(--bg-fs-meta); color: var(--bg-muted); margin-top: 14px; }

.entry-content > .alignfull { max-width: none !important; width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
.entry-content > :not(.alignfull) { max-width: 820px; margin-inline: auto; }
.entry-content > .alignwide { max-width: var(--bg-max); }
.entry-content::after { content: ""; display: table; clear: both; }

.single-cta { max-width: 820px; margin: 45px auto 0; border-top: 1px solid var(--bg-line); padding-top: 35px; }

/* Generic templates: posts, search, 404, date and author archives. */
.generic-main { padding-block: var(--bg-space-standard); }
.archive-main { padding-bottom: 0; }
.archive-intro { max-width: 62ch; font-size: 1.1875rem; line-height: 1.7; color: var(--bg-muted); margin-bottom: 36px; }
.archive-entry { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--bg-line); }
.archive-entry:last-of-type { border-bottom: 0; }
.archive-entry h2 { font-size: 1.6875rem; line-height: 1.2; margin: 0 0 8px; }
.archive-entry h2 a { color: var(--bg-navy); text-decoration: none; }
.archive-entry h2 a:hover { color: var(--bg-teal); }
.entry-meta { font-size: var(--bg-fs-meta); color: var(--bg-muted); margin: 0 0 12px; }

.empty-state { padding: 48px; border: 1px solid var(--bg-line); background: var(--bg-mist); }
.empty-state h2 { font-size: var(--bg-fs-sub); margin-bottom: 12px; }

.pagination, .wp-block-query-pagination { margin-top: 40px; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 46px; padding: 0 12px;
  border: 1px solid var(--bg-line); text-decoration: none; font-family: var(--bg-font-mono); font-size: 0.875rem;
}
.pagination .page-numbers.current { background: var(--bg-navy); color: #fff; border-color: var(--bg-navy); }

.search-form { display: flex; gap: 10px; margin: 30px 0; }
.search-field { padding: 13px 14px; border: 1px solid var(--bg-line); min-height: 48px; max-width: 100%; }
.search-submit { background: var(--bg-navy); color: #fff; border: 0; padding: 0 22px; min-height: 48px; }

/* ==========================================================================
   7. Enquiry form
   ========================================================================== */

.bg-form { max-width: 820px; }
.bg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.bg-field { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.bg-field-full { grid-column: 1 / -1; }
.bg-form label { font-size: 0.875rem; font-weight: 600; color: var(--bg-ink); }
.bg-form .req { color: #b42318; margin-left: 2px; }
.bg-form input, .bg-form select, .bg-form textarea {
  font: inherit; font-size: 1rem; padding: 13px 14px; border: 1px solid var(--bg-line);
  background: #fff; color: var(--bg-ink); border-radius: 0; width: 100%; min-height: 48px;
}
.bg-form textarea { min-height: 150px; resize: vertical; }
.bg-form input:focus-visible, .bg-form select:focus-visible, .bg-form textarea:focus-visible { border-color: var(--bg-teal); }
.bg-phone-row { display: flex; gap: 10px; }
.bg-phone-row #bg-code { max-width: 96px; }
.bg-form-actions { margin: 28px 0 0; }
.bg-form-note { font-size: var(--bg-fs-meta); color: var(--bg-muted); margin: 14px 0 0; }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.bg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { padding: 16px 20px; margin: 0 0 28px; border-left: 3px solid var(--bg-teal); background: var(--bg-mist-2); }
.form-notice p { margin: 0; }
.form-notice.is-error { border-left-color: #b42318; background: #fdf3f2; }

/* ==========================================================================
   8. Responsive
   ========================================================================== */

/* Seven menu items, a wordmark and a call to action stop fitting on one line
   below about 1250px. Tighten the bar here rather than let the links wrap to a
   second row, which is what happened between roughly 1060 and 1250px. */
@media (max-width: 1300px) {
  .header-row { gap: 26px; }
  .brand-logo { width: 176px; }
  .primary-nav ul { gap: 18px; }
  .primary-nav a { font-size: 0.875rem; }
  .header-cta { padding: 13px 18px; font-size: 0.84375rem; gap: 10px; }
}

@media (max-width: 1100px) {
  .header-row { gap: 24px; }
  .primary-nav ul { gap: 20px; }
  .primary-nav a { font-size: 0.9375rem; }
  .header-cta { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  :root { --bg-space-generous: 68px; --bg-space-standard: 56px; --bg-space-compact: 36px; }

  .header-row { min-height: 76px; flex-wrap: wrap; gap: 0; justify-content: space-between; }
  .brand-logo { width: 176px; }
  .menu-toggle { display: inline-flex; }

  /* The nav becomes a stacked panel; the catalogue columns stack with it rather
     than hanging off the viewport. */
  /* Sticky and open at once, a long menu would run past the bottom of a phone
     with no way to reach the last item, so the panel scrolls inside itself. */
  .primary-nav { width: 100%; margin: 0; padding: 0 0 20px; max-height: calc(100vh - 140px); overflow-y: auto; }
  .js .primary-nav { display: none; }
  .js .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav > ul > li { border-top: 1px solid var(--bg-line); }
  .primary-nav > ul > li > a { display: block; padding: 15px 0; }
  .primary-nav .menu-item-has-children > a::after { display: none; }
  /* Stacked, there is no gap to bridge and nothing hovers. */
  .mega-panel::before { display: none; }

  /* Stacked, the four drop-downs hold twenty-six links between them. Left open
     they push Contact 2,700px down the panel, so each one is folded behind its
     own caret and the seven top-level items stay reachable in one screen. The
     parent link still goes to its own page; the caret is a separate control. */
  .primary-nav .sub-menu,
  .mega-panel,
  .primary-nav li:hover > .sub-menu,
  .primary-nav li:focus-within > .sub-menu {
    position: static; transform: none; width: auto; display: none;
    max-height: none; overflow: visible;
    border: 0; border-left: 2px solid var(--bg-line); box-shadow: none;
    padding: 0 0 14px 16px; margin: 0;
  }
  .primary-nav li.is-expanded > .sub-menu,
  .primary-nav li.is-expanded > .mega-panel { display: block; }
  .submenu-toggle { display: inline-flex; }
  .mega-inner { grid-template-columns: 1fr; gap: 18px; }
  .primary-nav .sub-menu a { padding: 10px 0; }
}

@media (max-width: 700px) {
  .topbar-locations { display: none; }
  .topbar-row { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { display: block; }
  .footer-bottom a { display: inline-block; margin-top: 10px; }
  .empty-state { padding: 28px; }
  .bg-form-grid { grid-template-columns: 1fr; gap: 18px; }
  .entry-content > :not(.alignfull) { max-width: 100%; }
  .search-form { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}