/* ============================================================================
   Forgebury Core — Layout component
   Section wrappers, container, generic grid, warm-white page background.
   Tokens only (design-system.css).
   ============================================================================ */

/* Section wrapper */
.forge-section {
  padding: var(--forge-space-3xl) var(--forge-space-xl);
}
.forge-section--warm { background: var(--forge-warm-white); }
.forge-section--grey { background: var(--forge-grey); }
.forge-section--dark { background: var(--forge-black); }

/* Container */
.forge-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Generic responsive grid (3 → 2 → 1) */
.forge-grid {
  display: grid;
  grid-template-columns: repeat(var(--forge-grid-cols), minmax(0, 1fr));
  gap: var(--forge-grid-gap);
  background: var(--forge-grid-bg);
  padding: var(--forge-grid-padding);
  border-radius: var(--forge-card-radius);
}
@media (max-width: 1024px) {
  .forge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .forge-grid { grid-template-columns: 1fr; }
}

/* Warm-white page background helper */
.forge-bg-warm { background: var(--forge-warm-white); }

/* ── Category page template (single source of truth for page styling) ─────────
   Full-width dark hero + light product-grid section. Tokens only. */
/* Neutralise the Astra content container ON CATEGORY PAGES ONLY so the
   full-bleed sections aren't constrained or clipped (mirrors what Forge already
   does for `.home`). Scoped via the forge-category-page body class. */
.forge-category-template #content,
.forge-category-template .site-content,
.forge-category-template #primary,
.forge-category-template .ast-container,
.forge-category-template .entry-content {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;           /* kill the 120px top from body:not(.home) rule + any Astra padding */
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
}
/* Ensure no ancestor clips the breakout */
.forge-category-template,
.forge-category-template #page { overflow-x: visible !important; }

/* Sections must stack vertically, full width each */
.forge-category-template .forge-category-hero,
.forge-category-template .forge-category-grid {
  display: block !important;
  float: none !important;
  clear: both !important;
}

.forge-category-hero {
  background: var(--forge-black);
  text-align: center;
  padding: var(--forge-space-3xl) var(--forge-space-xl); /* 4rem top/bottom */
}

/* Full-bleed.
   Was `width: 100vw` with a -50vw breakout. 100vw INCLUDES the scrollbar
   while the containing block does not, so on any page tall enough to
   scroll these sections ran ~8px wider than the viewport and produced a
   horizontal scrollbar (measured 1273 vs 1265). That trips the
   `horizontal-scroll` guideline, which is HIGH severity.

   The breakout is also unnecessary here: the rules above already force
   #content / .site-content / .ast-container to full width with zero
   padding on this template, so the parent is edge-to-edge and 100% does
   the job without involving vw at all.

   Not solved with `overflow-x: hidden` on the body — that would break the
   sticky header, which is now load-bearing. */
.forge-category-hero,
.forge-category-grid {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative;
  left: 0;
  right: 0;
  box-sizing: border-box;
}
.forge-category-hero__label {
  font-family: var(--forge-font-body);
  font-size: var(--forge-size-xs);          /* 0.75rem */
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forge-gold);
  margin: 0 0 var(--forge-space-md);
}
.forge-category-hero__title {
  font-family: var(--forge-font-heading);
  font-size: var(--forge-size-2xl);         /* 2.5rem */
  font-weight: 400;
  line-height: 1.1;
  color: var(--forge-warm-white);
  margin: 0;
}
.forge-category-hero__subtitle {
  font-family: var(--forge-font-body);
  font-size: var(--forge-size-sm);          /* 0.875rem */
  line-height: 1.6;
  color: var(--forge-text-muted);           /* #999999 */
  max-width: 500px;
  margin: var(--forge-space-md) auto 0;
}

/* Product grid section below hero (full-bleed handled by the shared rule above) */
.forge-category-grid {
  background: var(--forge-grid-bg);
  padding: var(--forge-space-2xl) var(--forge-space-xl); /* 3rem top/bottom */
}

/* Remove the white band above the hero. Forge applies
   `body:not(.home) #content { padding-top:120px }` to clear the transparent
   header — but that transparent pad shows the page background as white above
   the dark hero. Zero it on category pages and move the header clearance into
   the hero so its dark background fills behind the transparent header.
   `html body…` raises specificity above the inline !important rule. */
html body.forge-category-template #content,
html body.forge-category-template .site-content {
  padding-top: 0 !important;
}
/* Desktop: hero absorbs the absolute header height + breathing room.
   Only when Astra's header is the one rendering — Forge_Desktop_Header is
   sticky and occupies real flow space, so the +120px showed as a large empty
   band above the category hero (reported 2026-08-04). Same omission the
   content padding had; excluded at source rather than overridden, since the
   override would have had to out-specify this rule. */
html body.forge-category-template:not(.ast-header-break-point):not(.forge-has-desktop-header) .forge-category-hero {
  padding-top: calc(var(--forge-space-3xl) + 120px) !important; /* 4rem + ~120px header */
}
html body.forge-category-template.forge-has-desktop-header:not(.ast-header-break-point) .forge-category-hero {
  padding-top: var(--forge-space-3xl) !important; /* 4rem breathing room only */
}
/* Mobile: body padding-top:143px already clears the fixed header — just breathing room */
html body.forge-category-template.ast-header-break-point .forge-category-hero {
  padding-top: var(--forge-space-3xl) !important; /* 4rem */
}
body.forge-category-template,
body.forge-category-template #page,
body.forge-category-template .site-header {
  margin-top: 0 !important;
}

/* ── Secondary menu bar (Astra below-header row / secondary_menu location) ────
   "Product Categories Menu" — third header row, matched to the dark header:
   dark bg, warm-white uppercase links, gold on hover/active, no bullets,
   evenly spaced + centered. Tokens only. */
/* Suppress ALL Astra dropdown/flyout sub-menus on desktop — sectors and
   categories are in the below-header strip, not hover dropdowns. */
@media (min-width: 769px) {
  .main-header-bar .sub-menu,
  .main-header-bar .ast-sub-menu,
  .ast-primary-header-bar .sub-menu,
  .ast-primary-header-bar .ast-sub-menu,
  #masthead .main-header-menu .sub-menu,
  #masthead .main-header-menu .ast-sub-menu,
  .main-navigation .sub-menu,
  .ast-nav-menu .sub-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    clip: rect(0,0,0,0) !important;
  }
}

.ast-below-header-bar {
  background: var(--forge-black) !important;
}
.ast-below-header-bar .ast-builder-menu-2 .main-header-menu {
  list-style: none !important;
  justify-content: center !important;
  gap: var(--forge-space-lg) !important;
}
.ast-below-header-bar .ast-builder-menu-2 .menu-item {
  margin: 0 !important;
  list-style: none !important;
}
.ast-below-header-bar .ast-builder-menu-2 .menu-item > a,
.ast-below-header-bar .ast-builder-menu-2 .menu-link {
  color: var(--forge-warm-white) !important;
  font-family: var(--forge-font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: var(--forge-space-sm) var(--forge-space-sm) !important;
  border-bottom: 2px solid transparent !important;
  transition: var(--forge-transition) !important;
}
.ast-below-header-bar .ast-builder-menu-2 .menu-item:hover > a,
.ast-below-header-bar .ast-builder-menu-2 .menu-item > a:hover {
  color: var(--forge-gold) !important;
}
/* Active item — gold text + thin gold underline */
.ast-below-header-bar .ast-builder-menu-2 .menu-item.current-menu-item > a,
.ast-below-header-bar .ast-builder-menu-2 .menu-item.current_page_item > a,
.ast-below-header-bar .ast-builder-menu-2 .menu-item.current-menu-ancestor > a {
  color: var(--forge-gold) !important;
  border-bottom-color: var(--forge-gold) !important;
}


/* ============================================================================
   Forgebury Core — Custom Mobile Header (Eden-Canvas-style)
   Active when Astra fires its mobile layout (body.ast-header-break-point).
   Row 1: logo + circular icons. Rows 2+3: horizontal scrolling nav strips
   with gold diamond separators. Strip/hide CSS lives in PHP companion.
   ============================================================================ */
body.ast-header-break-point .forge-mh {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
}
/* The WP admin bar is also position:fixed/top:0 but with a higher
   z-index (99999 vs our 10000), so for any logged-in user it physically
   covers the top of this bar rather than sitting above it. Push down by
   the admin bar's own height -- 32px desktop, 46px on the same <=782px
   breakpoint WP core itself switches the admin bar to the taller mobile
   height. Logged-out visitors are unaffected (.admin-bar class absent). */
body.ast-header-break-point.admin-bar .forge-mh { top: 32px; }
@media screen and (max-width: 782px) {
  body.ast-header-break-point.admin-bar .forge-mh { top: 46px; }
}
/* Row 1 — logo + icons */
body.ast-header-break-point #forge-mobile-header,
body.ast-header-break-point .forge-mh__bar {
  height: 60px !important;
  max-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 1.25rem !important;
  background: var(--forge-black) !important;
  border-bottom: 1px solid rgba(201,168,76,0.15);
}
body.ast-header-break-point .forge-mh__logo {
  color: var(--forge-gold) !important;
  font-family: var(--forge-font-heading);
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none !important;
  line-height: 1;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 60% !important;
}
body.ast-header-break-point #forge-mobile-header .custom-logo-link {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
body.ast-header-break-point .forge-mh__logo img,
body.ast-header-break-point #forge-mobile-header img,
body.ast-header-break-point #forge-mobile-header .custom-logo {
  max-height: 40px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}
/* Top bar text links (Contact + Shop) */
body.ast-header-break-point .forge-mh__toplinks {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 10px;
}
body.ast-header-break-point .forge-mh__toplink {
  font-family: var(--forge-font-body) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--forge-warm-white) !important;
  text-decoration: none !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(201,168,76,0.35) !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  transition: border-color 0.15s ease, color 0.15s ease;
}
body.ast-header-break-point .forge-mh__toplink:hover,
body.ast-header-break-point .forge-mh__toplink:focus {
  color: var(--forge-gold) !important;
  border-color: var(--forge-gold) !important;
}
/* Right-side circular icons */
body.ast-header-break-point .forge-mh__icons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
body.ast-header-break-point .forge-mh__icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--forge-gold);
  background: transparent;
  color: var(--forge-gold) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}
body.ast-header-break-point .forge-mh__icon:hover,
body.ast-header-break-point .forge-mh__icon:focus {
  background: var(--forge-gold);
  color: var(--forge-black) !important;
}
body.ast-header-break-point .forge-mh__icon svg { display: block; }
body.ast-header-break-point .forge-mh__badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--forge-gold);
  color: var(--forge-black);
  font-family: var(--forge-font-body);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* Rows 2 + 3 — two horizontal scroll strips with a 3px dark gap */
body.ast-header-break-point .forge-mh__nav {
  background: var(--forge-black);
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
body.ast-header-break-point .forge-mh__strip-gap {
  height: 3px;
  background: rgba(201,168,76,0.12);
  margin: 0;
}
body.ast-header-break-point .forge-mh__list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 1.25rem !important;
  margin: 0 !important;
  list-style: none !important;
  height: 40px;
  background: var(--forge-black);
}
body.ast-header-break-point .forge-mh__list::-webkit-scrollbar { display: none !important; }
body.ast-header-break-point .forge-mh__li {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
  border: 0 !important;
}
body.ast-header-break-point .forge-mh__li + .forge-mh__li::before {
  content: "\25C6"; /* ◆ */
  color: var(--forge-gold);
  font-size: 8px;
  margin: 0 14px;
  opacity: 0.7;
}
body.ast-header-break-point .forge-mh__link {
  font-family: var(--forge-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--forge-warm-white) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  white-space: nowrap !important;
  padding: 4px 0 !important;
  transition: color 0.15s ease;
}
body.ast-header-break-point .forge-mh__link:hover,
body.ast-header-break-point .forge-mh__link:focus { color: var(--forge-gold) !important; }

/* ── Row 1 layout fix: logo left, pills centre, icons right ── */
body.ast-header-break-point #forge-mobile-header .forge-mh-row-1 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 1rem !important;
  height: 60px !important;
}
body.ast-header-break-point #forge-mobile-header .forge-mh-logo {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
body.ast-header-break-point #forge-mobile-header .forge-mh-logo img {
  height: 36px !important;
  width: auto !important;
  display: block !important;
}
body.ast-header-break-point #forge-mobile-header .forge-mh-pills {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  overflow: hidden !important;
  padding: 0 0.5rem !important;
}
body.ast-header-break-point #forge-mobile-header .forge-mh-pills a {
  font-size: 0.7rem !important;
  padding: 0.3rem 0.75rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
body.ast-header-break-point #forge-mobile-header .forge-mh-icons {
  flex: 0 0 auto !important;
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP HEADER — Forge_Desktop_Header (1.6.0)

   Replaces the block that used to graft a cart icon and icon-nav onto Astra's
   markup. All of that is gone: the header is our own markup now, so there is
   nothing to filter, relocate or fight for specificity against.

   Three rows, one shared 1400px inner column. The bars stay full-bleed; only
   the contents align. That single constraint is what fixed the flush-left
   logo and the ~400px dead gaps — Astra's bar was unconstrained, so its grid
   pushed the left section to x=0 and the right section to the viewport edge.
   ══════════════════════════════════════════════════════════════════════════ */

.forge-dh {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--forge-black, #1a1a1a);
  font-family: var(--forge-font-body, "Inter", sans-serif);
}
/* The WP admin bar is fixed at the top for logged-in users — without this the
   header slides underneath it. */
body.admin-bar .forge-dh { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .forge-dh { top: 46px; }
}

.forge-dh__inner {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  width: 100%;
}

/* ── Row 1: utility strip ────────────────────────────────────────────────
   Deliberately the quietest row — it carries secondary routes, so it sits a
   shade darker than the main bar and a size smaller. */
.forge-dh__utility { background: #0e0e0e; }
/* flex-end since 1.7.0: the industries group that used to sit on the left
   moved into the Shop by Industry dropdown in row 3, so About/Contact are all
   that remain and they stay right-aligned. */
.forge-dh__utility .forge-dh__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  min-height: 34px;
  flex-wrap: wrap;
}
.forge-dh__company { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.forge-dh__utility-link {
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #b5b5b5;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.forge-dh__company .forge-dh__utility-link {
  text-transform: none;
  letter-spacing: 0.2px;
  font-size: 13px;
}
.forge-dh__utility-link:hover,
.forge-dh__utility-link:focus-visible { color: var(--forge-gold, #c9a84c); }
.forge-dh__utility-link.is-current {
  color: var(--forge-gold, #c9a84c);
  border-bottom-color: var(--forge-gold, #c9a84c);
}

/* ── Row 2: logo | search | CTA + icons ──────────────────────────────────
   Search takes the middle via flex:1 — the reference's key move. Everything
   else is flex:none, so the bar absorbs all the slack instead of it turning
   into gaps between elements. */
.forge-dh__main .forge-dh__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Two possible logo anchors, never both: our own text wordmark, or WordPress's
   .custom-logo-link when a logo image is set. Both are styled identically so
   the left edge lines up with rows 1 and 3 either way — before this, the
   custom-logo variant carried no styling at all and sat ~24px out. */
.forge-dh__logo,
.forge-dh__main .custom-logo-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-family: var(--forge-font-heading, "Cormorant Garamond", serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--forge-gold, #c9a84c);
  text-decoration: none;
  white-space: nowrap;
}
.forge-dh__logo img,
.forge-dh__main .custom-logo-link img {
  max-height: 40px;
  width: auto;
  height: auto;
  display: block;
}

.forge-dh__search { flex: 1 1 auto; min-width: 0; }
/* The common-core strip contains only the search bar here (show_account and
   show_help are both 0 in brand-config), so it can fill the slot outright. */
.forge-dh__search .cc-header-actions { width: 100%; margin: 0; }
.forge-dh__search .cc-header-actions__search { width: 100%; }
.forge-dh__search .cc-header-actions__panel { width: 100%; }
.forge-dh__search .cc-header-actions__input { width: 100%; }
/* Warm stone rather than white — softer against the dark bar while still
   reading unmistakably as an input. common-core ships the white; the colour
   override belongs here in the brand (ground rule 6). */
.forge-dh__search .cc-header-actions__search--bar form {
  border-radius: 999px;
  border-color: transparent;
  background: #e7e5e4;
  padding: 0 20px;
}
.forge-dh__search .cc-header-actions__search--bar .cc-header-actions__input {
  padding: 11px 0;
  font-size: 15px;
  background: transparent;
  color: #1a1a1a;                      /* 14.2:1 on #e7e5e4 */
}
/* Browsers default placeholders to a grey that fails 4.5:1 on this stone —
   set it explicitly. #57534e is ~6:1. */
.forge-dh__search .cc-header-actions__input::placeholder { color: #57534e; opacity: 1; }
.forge-dh__search .cc-header-actions__search--bar form:focus-within {
  box-shadow: 0 0 0 2px var(--forge-gold, #c9a84c);
  border-color: transparent;
}
.forge-dh__search .cc-header-actions__bar-icon {
  order: 2;
  color: var(--forge-black, #1a1a1a);
}

.forge-dh__actions { flex: none; display: flex; align-items: center; gap: 10px; }

/* The one text button in the row, because "Ask a Quote" has no icon anyone
   would recognise — and it is the conversion path, so it should be the most
   prominent thing here after the search field. */
.forge-dh__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--forge-gold, #c9a84c);
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.forge-dh__cta:hover,
.forge-dh__cta:focus-visible {
  background: var(--forge-gold-light, #d4b55e);
  color: #1a1a1a;
}

/* Icon-only controls. 44x44 meets the minimum touch target; both carry an
   aria-label and a title, since there is no visible text to name them. */
.forge-dh__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--forge-warm-white, #f7f4ef);
  text-decoration: none;
  transition: background 0.2s ease;
}
.forge-dh__icon svg { width: 20px; height: 20px; }
.forge-dh__icon:hover,
.forge-dh__icon:focus-visible {
  background: rgba(247, 244, 239, 0.1);
  color: var(--forge-warm-white, #f7f4ef);
}

.forge-header-cart__badge {
  position: absolute;
  top: 5px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 50%;
  background: var(--forge-gold, #c9a84c);
  color: var(--forge-black, #1a1a1a);
  font: 600 10px/16px var(--forge-font-body, "Inter", sans-serif);
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 0 0 2px var(--forge-black, #1a1a1a);
}
.forge-header-cart__badge[hidden] { display: none; }

/* ── Row 3: categories ──────────────────────────────────────────────────── */
.forge-dh__categories { border-top: 1px solid #2e2e2e; }
/* space-between so the categories span the full column rather than clumping
   left and leaving ~350px empty on the right — the reference spreads them the
   same way. Reverts to flex-start below 1100px, where they wrap and
   space-between would strand the last line. */
.forge-dh__categories .forge-dh__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}
/* Categories spread across the space they have; the industry dropdown is
   pushed to the far right by margin-left:auto, so it stays pinned there
   whatever number of categories exist. */
.forge-dh__cats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}
.forge-dh__cat-link {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--forge-warm-white, #f7f4ef);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.forge-dh__cat-link:hover,
.forge-dh__cat-link:focus-visible { color: var(--forge-gold, #c9a84c); }
.forge-dh__cat-link.is-current {
  color: var(--forge-gold, #c9a84c);
  border-bottom-color: var(--forge-gold, #c9a84c);
}

.forge-dh a:focus-visible {
  outline: 2px solid var(--forge-gold, #c9a84c);
  outline-offset: 2px;
}

/* Below ~1100px the fixed elements plus a flexing search stop fitting on one
   line comfortably, so everything tightens rather than the row wrapping. */
@media (max-width: 1100px) {
  .forge-dh__inner { padding-left: 20px; padding-right: 20px; }
  .forge-dh__main .forge-dh__inner { gap: 14px; }
  .forge-dh__cta { padding: 0 16px; font-size: 13px; }
  .forge-dh__logo { font-size: 19px; letter-spacing: 2px; }
  .forge-dh__categories .forge-dh__inner { gap: 16px; justify-content: flex-start; }
  .forge-dh__cat-link { font-size: 11.5px; }
}

/* ── common-core strip inside Forgebury's mobile header ──────────────────
   Retained from the previous round: the module ships structural CSS only, so
   the colour has to come from the brand (ground rule 6). */
body.ast-header-break-point #forge-mobile-header .cc-header-actions {
  margin-left: 0;
  gap: 0;
  color: var(--forge-warm-white, #f7f4ef);
}
body.ast-header-break-point #forge-mobile-header .cc-header-actions__input {
  color: var(--forge-black, #1a1a1a);
}

/* ── Shop by Industry dropdown (row 3, pinned right) ─────────────────────
   <details>/<summary>, so Enter/Space toggle and Escape closes without any
   JavaScript — same pattern as forge_contact_cta_disclosure() on product
   pages. z-index 110 sits one step above the header's 100. */
/* First item in the row since 1.8.0 — was pinned right, now leads the
   category nav with its chevron ahead of the label. */
.forge-dh__industry {
  position: relative;
  flex: none;
  margin-right: 8px;
}
.forge-dh__industry-menu { left: 0; right: auto; }

.forge-dh__industry-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 14px;
  border: 1px solid #3a3a3a;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--forge-warm-white, #f7f4ef);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.forge-dh__industry-btn::-webkit-details-marker { display: none; }
.forge-dh__industry-btn::marker { content: ""; }
.forge-dh__industry-btn:hover,
.forge-dh__industry[open] .forge-dh__industry-btn {
  color: var(--forge-gold, #c9a84c);
  border-color: var(--forge-gold, #c9a84c);
}
.forge-dh__industry-btn:focus-visible {
  outline: 2px solid var(--forge-gold, #c9a84c);
  outline-offset: 2px;
}

.forge-dh__industry-chev {
  width: 13px;
  height: 13px;
  flex: none;
  transition: transform 0.2s ease;
}
.forge-dh__industry[open] .forge-dh__industry-chev { transform: rotate(180deg); }

.forge-dh__industry-menu {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 110;
  min-width: 220px;
  padding: 8px;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  background: #1a1a1a;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
}

.forge-dh__industry-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 14px;
  letter-spacing: 0.2px;
  color: var(--forge-warm-white, #f7f4ef);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.forge-dh__industry-link:hover,
.forge-dh__industry-link:focus-visible {
  background: rgba(247, 244, 239, 0.08);
  color: var(--forge-gold, #c9a84c);
}
.forge-dh__industry-link.is-current { color: var(--forge-gold, #c9a84c); }

/* ── Condensed state (scrolling down) ────────────────────────────────────
   Rows 1 and 3 collapse so only the logo/search/CTA row stays pinned.
   Scrolling up restores them, at any point in the page — see forge-main.js.

   This animates max-height, which the UX guidance would rather avoid in
   favour of transform/opacity. Deliberate: the space genuinely has to be
   reclaimed, and transform alone cannot do that. Two short strips at 200ms
   keeps the cost small. */
/* overflow stays VISIBLE while expanded — the Shop by Industry menu is
   absolutely positioned and hangs below this row, so a blanket
   overflow:hidden clipped it to a 2px sliver (caught in Chrome). Nothing
   overflows vertically at rest anyway, since max-height is well above the
   row's real height. Hidden applies only while collapsing, and the scroll
   handler refuses to condense while the menu is open, so the two never
   fight. */
.forge-dh__utility,
.forge-dh__categories {
  overflow: visible;
  max-height: 120px;
  opacity: 1;
  transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
}
.forge-dh.is-condensed .forge-dh__utility,
.forge-dh.is-condensed .forge-dh__categories {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  border-top-color: transparent;
}

/* Respecting the setting means dropping the animation, not the behaviour —
   the rows still collapse, they just do it instantly. */
@media (prefers-reduced-motion: reduce) {
  .forge-dh__utility,
  .forge-dh__categories,
  .forge-dh__industry-chev { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SITE FOOTER — Forge_Footer (1.8.0)

   Contrast values carried over from the homepage footer fix: the original
   used #444 and #555 on #111 (1.9:1 and 2.6:1, both far under the 4.5:1 AA
   floor). These are the corrected ones.
   ══════════════════════════════════════════════════════════════════════════ */

.forge-ft {
  background: #111111;
  padding: 64px 0 28px;
  font-family: var(--forge-font-body, "Inter", sans-serif);
}

.forge-ft__inner {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

.forge-ft__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #2a2a2a;
}

.forge-ft__logo {
  display: inline-block;
  font-family: var(--forge-font-heading, "Cormorant Garamond", serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--forge-gold, #c9a84c);
  text-decoration: none;
  margin-bottom: 14px;
}

.forge-ft__tagline {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: #b0b0b0;
  max-width: 260px;
  margin: 0 0 20px;
}

.forge-ft__contact { display: flex; flex-direction: column; gap: 10px; }
.forge-ft__contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: #b5b5b5;
  text-decoration: none;
  transition: color 0.2s ease;
}
.forge-ft__contact a:hover,
.forge-ft__contact a:focus-visible { color: var(--forge-gold, #c9a84c); }
.forge-ft__contact svg { width: 15px; height: 15px; flex: none; }

.forge-ft__col-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--forge-warm-white, #f7f4ef);
  margin: 0 0 18px;
}

.forge-ft__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.forge-ft__links a {
  font-size: 15px;
  font-weight: 400;
  color: #b5b5b5;
  text-decoration: none;
  transition: color 0.2s ease;
}
.forge-ft__links a:hover,
.forge-ft__links a:focus-visible { color: var(--forge-gold, #c9a84c); }

.forge-ft__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  flex-wrap: wrap;
}
.forge-ft__legal {
  font-size: 14px;
  font-weight: 400;
  color: #a3a3a3;
  margin: 0;
}
.forge-ft__legal a { color: #c2c2c2; text-decoration: none; }
.forge-ft__legal a:hover { color: var(--forge-gold, #c9a84c); }

.forge-ft__mark {
  font-family: var(--forge-font-heading, "Cormorant Garamond", serif);
  font-size: 26px;
  color: var(--forge-gold, #c9a84c);
  opacity: 0.4;
}

.forge-ft a:focus-visible {
  outline: 2px solid var(--forge-gold, #c9a84c);
  outline-offset: 2px;
}

@media (max-width: 1000px) {
  .forge-ft__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .forge-ft__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .forge-ft { padding: 48px 0 24px; }
  .forge-ft__inner { padding-left: 20px; padding-right: 20px; }
  .forge-ft__top { grid-template-columns: 1fr; gap: 28px; }
}