/* ============================================================
   HOLT shared chrome: global site nav, footer, and Contact Us modal.
   Loaded on the home page AND every product/hub page, so the
   navigation and contact form are identical everywhere. Self-contained:
   every rule is scoped under .nav / .site-footer / .contact-band (or a
   .wpforms- override) and uses only root tokens that exist in both
   tokens.css and momentum.css - never a component class (.btn, .eyebrow,
   .h2 etc.) that's only defined in one of the two page-type stylesheets.
   ============================================================ */

/* ---- Global page guards ----
   These two are the only rules in this file that are not scoped to a chrome
   component. They live here because they must apply on BOTH rendering systems
   (momentum.css home page and product.css everywhere else) and chrome.css is
   the only stylesheet loaded on both.

   overflow-x: the full-bleed sections use `width: 100vw` with a negative
   margin, and 100vw counts the scrollbar while clientWidth does not, so every
   section hangs ~8px past each edge and the document scrolls sideways.
   `body { overflow-x: hidden }` did NOT contain it: body's overflow propagates
   up to the viewport, which leaves the document itself scrollable. `clip` is
   the correct value here because, unlike `hidden`, it does not turn the root
   into a scroll container, so position:sticky descendants keep working. The
   `hidden` line before it is the fallback for engines without `clip`. */
html, body { overflow-x: hidden; overflow-x: clip; }

/* Focus visibility: the theme previously painted no focus indicator on any
   interactive element, so keyboard users had no idea where they were (WCAG
   2.4.7). One brand-coloured ring, applied only for keyboard interaction so it
   never appears on mouse clicks. Components that need a different treatment
   (the FAQ summary) override it locally. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--hce-yellow, #f7ce46);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}
/* On light surfaces the yellow ring is too low-contrast to see. */
:where(.on-light, .section, .holt-panel, .contact-card, .cta-form)
  :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--color-primary, #c4161c);
}

/* ---- Global nav ---- */
/* The bar is solid HCE Black at every scroll position. It was previously
   transparent-until-scrolled, which meant the logo needed its own dark block
   to stay legible over the hero video; that block read as a floating tile
   against the bar, so the bar itself carries the color now and the logo sits
   directly on it. .scrolled survives only to add the lift shadow. */
.nav { position: fixed; inset: 0 0 auto 0; height: var(--header-height); z-index: 200; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(16px,4vw,48px); background: var(--hce-black, #2d2926); transition: box-shadow 0.35s var(--ease); }
.nav.scrolled { box-shadow: 0 2px 18px rgba(0,0,0,0.28); }
.nav-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex: none;
}
.nav-logo img { height: 48px; width: auto; display: block; }
@media (max-width: 880px) {
  .nav-logo img { height: 36px; }
}

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > a,
.nav-drop-btn { color: #fff; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 0.83rem; letter-spacing: 0.02em; padding: 8px 13px; border-radius: var(--radius-sm); background: none; border: 0; cursor: pointer; transition: background 0.2s var(--ease); }
.nav-links > a:hover,
.nav-drop-btn:hover,
.nav-drop-btn[aria-expanded="true"] { background: rgba(255,255,255,0.15); }

/* Cranes dropdown */
.nav-item { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.2s var(--ease); }
.nav-drop-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-drop { position: absolute; top: calc(100% + 8px); left: 0; min-width: 224px; background: rgba(30,27,25,0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius-md); box-shadow: 0 12px 40px rgba(0,0,0,0.42); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s; }
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop,
.nav-drop.open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop a { display: block; color: #fff; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; padding: 10px 14px; border-radius: var(--radius-sm); white-space: nowrap; transition: background 0.15s var(--ease); }
.nav-drop a:hover { background: var(--color-primary); }

.nav-cta { display: flex; align-items: center; gap: 12px; flex: none; }
.nav-phone { font-family: var(--font-mono); font-size: 0.8rem; color: #fff; text-decoration: none; white-space: nowrap; }
.nav-phone:hover { color: var(--hce-yellow); }
.nav-quote { display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: 0.83rem; letter-spacing: 0.02em; text-decoration: none; padding: 0.6em 1.3em; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; border: 1px solid transparent; white-space: nowrap; transition: background 0.2s var(--ease); }
.nav-quote:hover { background: var(--color-primary-hover, #a01218); }

/* Mobile burger */
.nav-burger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; flex: none; }
.nav-burger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-burger { display: flex; order: 3; }
  .nav-cta { order: 2; }
  .nav-cta .nav-phone { display: none; }
  /* box-sizing: without it the inset:0 width has the side padding ADDED, so
     the drawer measured 395px inside a 375px viewport.
     visibility: transform alone only moves the closed drawer off-screen - it
     stays visible to the accessibility tree, so a keyboard user tabbed through
     twelve invisible links before reaching the page. visibility:hidden removes
     it from the tab order, and is transitioned with a delay so it still slides
     out rather than vanishing. */
  .nav-links { box-sizing: border-box; position: fixed; inset: var(--header-height) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(20,18,17,0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 8px clamp(16px,4vw,48px) 22px; max-height: calc(100vh - var(--header-height)); overflow-y: auto; transform: translateY(-125%); visibility: hidden; transition: transform 0.3s var(--ease), visibility 0s linear 0.3s; box-shadow: 0 22px 44px rgba(0,0,0,0.45); }
  .nav-links.open { transform: translateY(0); visibility: visible; transition: transform 0.3s var(--ease), visibility 0s; }
  .nav-links > a,
  .nav-drop-btn { padding: 14px 6px; font-size: 1rem; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.08); width: 100%; text-align: left; }
  .nav-item { position: static; }
  .nav-drop { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(255,255,255,0.04); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; max-height: 0; overflow: hidden; padding: 0; transition: max-height 0.3s var(--ease); }
  .nav-drop.open { max-height: 520px; padding: 6px 0 10px; }
  .nav-drop a { padding: 12px 18px; font-weight: 500; }
}

/* ---- Footer ---- */
/* box-sizing: momentum.css gives the footer width:100vw for full-bleed, and
   with the theme's default content-box that 100vw had the 48px side padding
   ADDED to it, pushing the page 96px wider than the viewport. body's
   overflow-x:hidden did not contain it (it propagates to the viewport, which
   leaves the document itself scrollable), so every page scrolled sideways. */
/* The closing CTA band uses the same --hce-black, so without a rule the two
   merge into a single undifferentiated dark block at the bottom of every hub
   and crane page. */
.site-footer { box-sizing: border-box; border-top: 1px solid rgba(255,255,255,0.09); background: var(--hce-black); color: rgba(255,255,255,0.6); padding: clamp(3rem,6vh,4.5rem) clamp(16px,4vw,48px) 2rem; }
.site-footer-top {
  max-width: 72rem;
  margin: 0 auto;
  /* Grid, not flex + space-between. The brand block and the link groups were
     pushed to opposite edges, leaving a ~430px void through the middle of the
     footer at 1280, and the 6/3/2 column lengths made the right edge ragged.
     A shared 4-track grid distributes them and keeps the columns on one row
     down to the tablet breakpoint. */
  display: grid;
  grid-template-columns: minmax(16rem, 1.4fr) repeat(3, minmax(8rem, 1fr));
  gap: 2.5rem 3rem;
  align-items: start;
}
.site-footer-brand { max-width: 22rem; }
.site-footer-logo { height: 42px; width: auto; display: block; margin-bottom: 1rem; }
.site-footer-tag { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.55); margin: 0 0 1.1rem; }
/* Top 5 Dealer badge: dark artwork on transparent, so it needs a light card to
   read against the black footer (SA review, 8/10/26). */
/* The artwork ships on an opaque white ground, so it cannot simply sit on the
   black footer. Toned down from a full-white card to a soft panel with the
   footer's own radius, so it reads as a credential rather than the loudest
   element in the region. */
.site-footer-badge { display: block; width: 118px; height: auto; background: rgba(255,255,255,0.92); border-radius: var(--radius-md); padding: 9px 11px; margin: 0 0 1.2rem; }
.site-footer-phone { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-mono); font-size: 0.98rem; color: #fff; text-decoration: none; }
.site-footer-phone:hover { color: var(--hce-yellow); }
/* The three groups are now grid children of .site-footer-top, so this wrapper
   has to stop being a layout box of its own. display:contents lets its
   children participate in the parent grid directly. */
.site-footer-cols { display: contents; }
.site-footer-col h4 { font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin: 0 0 1.1rem; }
.site-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.site-footer-col a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.9rem; transition: color 0.15s var(--ease); }
.site-footer-col a:hover { color: #fff; }
.site-footer-legal { max-width: 72rem; margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); }
/* 0.72rem/40% opacity measured 3.60:1 on #2d2926, under the 4.5:1 AA floor for
   text this size, and 11.5px is below a sane readability floor besides. */
.site-footer-legal p { font-size: 0.8rem; line-height: 1.65; color: rgba(255,255,255,0.62); margin: 0; }

@media (max-width: 880px) {
  /* Brand on its own row, then the three link groups share a row. Previously
     they collapsed to two columns and orphaned COMPANY onto a row of its own
     with the whole right half empty. */
  .site-footer-top { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .site-footer-brand { grid-column: 1 / -1; }
  /* Touch targets. These links sat at 17-22px tall on a 37px pitch, well under
     the 44px minimum, and they are the whole footer navigation. Padding is
     used rather than min-height so the hit area grows without the visual
     rhythm of the list changing much. */
  .site-footer-col ul { gap: 0.15rem; }
  .site-footer-col a,
  .site-footer-phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 2px;
  }
}
@media (max-width: 880px) {
  /* 145x39 in the header. */
  .nav-quote { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Smooth anchor jumps on every page. product.css sets this too, but the home
   page loads momentum.css instead and had none - so "Request a Quote" snapped
   there and glided everywhere else. Guarded, which the product.css copy is not. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Offset anchor jumps so the fixed nav doesn't cover section tops */
:where([id]) { scroll-margin-top: calc(var(--header-height) + 14px); }

/* ---- Contact section ----
   The form used to slide in from the right as a drawer. It now sits at the
   bottom of every page, in the same band as the branch information, so there is
   nothing to open before a visitor can start typing.

   Defined here rather than in product.css because chrome.css is the one
   stylesheet loaded on BOTH the home page (momentum.css) and every product page
   (product.css). It is therefore fully self-contained and never leans on
   .cta-band or .wrap, which exist only in product.css - otherwise the home
   page's copy of the section would render unstyled.

   Layout: copy and branches on the left, a white form card on the right. The
   card is what makes a form on a black band comfortable to fill in - the fields
   stay on white, and the band keeps the terminal-CTA weight the site already
   had. */
.contact-band {
  /* Deliberately NOT --hce-black: the footer is that colour, and with the band
     sitting directly on top of it the two read as one slab. One step lighter
     separates them. */
  background: #3a3431;
  /* #9a9a9c measured 4.36:1 on the lighter band, under the 4.5 AA floor it
     cleared on the old one. Lightening the copy with the background keeps the
     section readable instead of trading contrast for separation. */
  --contact-muted: #b0aca8;
  color: #fff;
  text-align: left;
  padding-block: clamp(3.5rem, 8vh, 6rem);
}
.contact-grid {
  /* Nothing in this theme sets a global border-box, so the inline padding has
     to sit inside the max-width or the grid overhangs and the page scrolls
     sideways - the same fault that once put 104px of horizontal scroll on the
     footer. */
  box-sizing: border-box;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  grid-template-areas: "copy form" "reach form";
  gap: clamp(1.75rem, 3vh, 2.5rem) clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
/* Nested groups still inherit the editor's block gap; the sitewide neutraliser
   only reaches direct children of .entry-content. */
.entry-content .contact-grid > *,
.entry-content .contact-copy > *,
.entry-content .contact-reach > * { margin-block-start: 0; }

.contact-copy { grid-area: copy; }
.contact-band .accent-rule { width: 4rem; height: 4px; border: 0; opacity: 1; background: var(--color-primary, #c4161c); margin: 0 0 var(--space-md, 1.5rem); }
.contact-band .contact-copy h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); line-height: 1.08; color: #fff; margin: 0 0 0.75rem; }
.contact-band .contact-copy p { font-family: var(--font-body); font-size: 1.02rem; line-height: 1.6; color: var(--contact-muted); max-width: 34rem; margin: 0; }
/* Used-crane detail pages append a link to the same unit on HoltUsed.com. */
.contact-extra { display: inline-block; margin-top: 0.5rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.contact-extra:hover { color: var(--color-primary, #c4161c); border-bottom-color: var(--color-primary, #c4161c); }

/* Left column, lower half: the toll-free line and the two branches. */
.contact-reach { grid-area: reach; }
.contact-phone { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; margin-bottom: var(--space-md, 1.5rem); }
.contact-phone-label { font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-primary, #c4161c); }
.contact-phone-num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2rem); line-height: 1.1; color: #fff; transition: color 0.2s var(--ease); }
.contact-phone:hover .contact-phone-num, .contact-phone:focus-visible .contact-phone-num { color: var(--color-primary, #c4161c); }

.contact-locs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 14px; }
.contact-loc {
  box-sizing: border-box;
  padding: 18px 20px;
  border-radius: var(--radius-md, 14px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
/* No stretched-link overlay on these cards, unlike .holt-loc on the home page:
   each one carries its own parts number, and an overlay would swallow it. */
.contact-loc:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(196, 22, 28, 0.6); }
.contact-loc-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: #fff; margin: 0 0 3px; }
.contact-loc-role { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary, #c4161c); margin: 0 0 10px; }
.contact-loc-addr { font-style: normal; font-size: 0.88rem; line-height: 1.5; color: var(--contact-muted); margin: 0 0 8px; }
.contact-loc-parts { font-size: 0.85rem; color: var(--contact-muted); margin: 0 0 10px; }
.contact-loc-parts a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.contact-loc-parts a:hover { color: var(--color-primary, #c4161c); border-bottom-color: var(--color-primary, #c4161c); }
.contact-loc-link { margin: 0; }
.contact-loc-link a { font-family: var(--font-mono); font-size: 0.76rem; color: var(--color-primary, #c4161c); text-decoration: none; }
.contact-loc-link a:hover { text-decoration: underline; }

/* Right column: the form, on white. */
.contact-card {
  grid-area: form;
  box-sizing: border-box;
  background: #fff;
  color: var(--hce-black, #141211);
  border-radius: var(--radius-md, 14px);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}
.contact-card-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--hce-black, #141211); margin: 0 0 4px; }
.contact-card-sub { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.5; color: var(--color-text-muted, #57534e); margin: 0 0 1.25rem; }
.contact-card-sub a { color: var(--color-primary, #c4161c); }

/* WPForms override: this form is on "modern markup", which exposes a documented
   set of CSS custom properties for exactly this purpose. Setting these is the
   supported theming path and avoids fighting wpforms-full.min.css's own
   specificity (its defaults come from these same variables). */
.contact-card .wpforms-container {
  --wpforms-field-border-color: var(--grey-100, #e8e8ea);
  --wpforms-field-background-color: #fff;
  --wpforms-field-text-color: var(--hce-black, #141211);
  --wpforms-field-border-radius: var(--radius-sm, 8px);
  --wpforms-field-size-input-height: 2.9em;
  --wpforms-label-color: var(--hce-black, #141211);
  --wpforms-label-error-color: var(--color-primary, #c4161c);
  --wpforms-button-background-color: var(--color-primary, #c4161c);
  --wpforms-button-background-color-alt: var(--color-primary-hover, #a91217);
  --wpforms-button-text-color: #fff;
  --wpforms-button-text-color-alt: #fff;
  --wpforms-button-border-radius: var(--radius-pill, 999px);
  margin: 0;
  font-family: var(--font-body);
}
/* Two fields to a row. Keyed off the field TYPE, not the field id: the id is
   derived from the form id, so an id-based rule would silently stop matching
   the day the form is rebuilt - which has already happened once. */
.contact-card .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.contact-card .wpforms-field-container > .wpforms-field-textarea,
.contact-card .wpforms-field-container > .wpforms-field-hp { grid-column: 1 / -1; }
.contact-card .wpforms-field { box-sizing: border-box; min-width: 0; }
.contact-card .wpforms-container .wpforms-field-medium,
.contact-card .wpforms-container .wpforms-field-small,
.contact-card .wpforms-container .wpforms-field-large { max-width: 100%; }
.contact-card .wpforms-field-label { font-family: var(--font-heading); font-weight: 700; font-size: 0.86rem; }
.contact-card .wpforms-field-sublabel, .contact-card .wpforms-field-description { font-size: 0.78rem; }
.contact-card .wpforms-container textarea { min-height: 6.5rem; }
/* min-height, not padding: WPForms' own button rules landed it at 41px, three short of the 44px target size. */
.contact-card .wpforms-submit { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.02em; cursor: pointer; width: 100%; min-height: 44px; }
.contact-card .wpforms-confirmation-container-full { font-family: var(--font-body); color: var(--hce-black, #141211); margin: 0; }

@media (max-width: 900px) {
  /* Form ahead of the branch cards once the columns stack, so the thing being
     asked for is not below two address blocks. */
  .contact-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "form" "reach"; gap: 2rem; }
  /* The parts number and the branch link are inline text, so they measured 16
     and 17px tall on a phone - well under the 44px target size. Same treatment
     .holt-loc-link already gets on the home page. */
  .contact-loc-parts a, .contact-loc-link a { display: inline-flex; align-items: center; min-height: 44px; }
  .contact-loc-parts { margin-bottom: 0; }
}
@media (max-width: 480px) {
  .contact-card { padding: 1.25rem; }
  .contact-card .wpforms-field-container { grid-template-columns: 1fr; }
}