/* ==========================================================================
   DAP Vertical Blocks - theme bridge.

   Loaded ONLY on templates/vertical-page-sitehdr.php, after
   assets/css/scoped/bundle.css. That template renders the theme's real header
   and footer, so the child theme's main.min.css stays enqueued and the design
   system is confined to .dapv-canvas by @scope.

   @scope stops the design system reaching OUT of the canvas. It does nothing
   about main.min.css reaching IN, and it does not raise the design system's
   specificity. This sheet is that second direction.

   HOW THIS SHEET IS MAINTAINED
   ----------------------------
   Every rule here earned its place by showing up in a measured diff of this
   template against the same page on the old template (the pain page, whose
   post content is 37 bytes from the probe's). Nothing is added on suspicion.
   The first draft was ported wholesale from dap-homepage-blocks' own
   theme-bridge.css and was responsible for more regressions than it fixed:
   "h1,h2,h3,h4 { font-family }" at (0,1,1) outranked .hc-h2 at (0,1,0) and
   stripped the display font off every heading, "button { font: inherit }" did
   the same to .faq-q, and hard-coded logo heights overrode the design's own.

   So: rules that only need to beat the THEME's element selectors are written
   :where(.dapv-canvas) :where(x), which scores (0,0,0) and loses to anything
   the design says. Rules that must beat a theme class are written out and
   commented with the collision.

   Tokens, not hex. Everything is scoped to .dapv-canvas or
   body.dapv-site-header so nothing here can touch another page.

   No em-dashes anywhere in this codebase, per brand guardrails.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The canvas itself.
   The theme may constrain <main> or set a content column; the vertical
   sections are full-bleed and their own .container does the centring.
   -------------------------------------------------------------------------- */
.dapv-canvas {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: var(--t-font-body);
  font-size: var(--t-body);
  line-height: var(--t-leading-body);
  color: var(--text-main);
  background: var(--bg-page, var(--bg-surface));
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  overflow-x: clip; /* the 28 Oct horizontal-scroll fix, kept on this template */
}
.dapv-canvas *,
.dapv-canvas *::before,
.dapv-canvas *::after { box-sizing: border-box; }

.dapv-canvas > main { width: 100%; max-width: none; margin: 0; padding: 0; }
.dapv-canvas main > section,
.dapv-canvas main > .section,
.dapv-canvas main > .hero { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }

/* --------------------------------------------------------------------------
   2. Element styles the theme sets globally.
   Zero specificity, so the design system always wins and these only land
   where it says nothing.
   -------------------------------------------------------------------------- */
:where(.dapv-canvas) :where(a, a:hover) { text-decoration: none; }
:where(.dapv-canvas) :where(img) { max-width: 100%; height: auto; border: 0; box-shadow: none; }
:where(.dapv-canvas) :where(ul, ol) { margin: 0; padding: 0; }
:where(.dapv-canvas) :where(h1, h2, h3, h4) { text-transform: none; letter-spacing: normal; }

/* The theme sets line-height on form controls; the design leaves them at the
   UA default. Written at (0,1,0) so it beats the theme's element selectors
   and still loses to any design class. */
.dapv-canvas :where(input, select, textarea, button) { line-height: normal; }

/* dap-wpengine gives every .btn "margin: 0 auto", which centred the hero and
   audit CTAs instead of leaving them at the start of their row. Measured at
   214px and 90px of phantom left margin before this rule. */
.dapv-canvas :where(.btn) { margin: 0; }

/* --------------------------------------------------------------------------
   3. The live theme's own furniture, which the page replaces.
   -------------------------------------------------------------------------- */

/* The theme prints a fixed bottom bar ("Do you want to grow in 2026?"); the
   page's urgency strip replaces it, so the two never stack. */
body.dapv-site-header .container-fluid.fixed-bottom { display: none !important; }

/* The strip prints after <main>, so its body padding cannot be scoped. */
body.dapv-site-header:has(.urgency-bar:not(.is-hidden)) { padding-bottom: 68px; }
@media (max-width: 760px) { body.dapv-site-header:has(.urgency-bar:not(.is-hidden)) { padding-bottom: 104px; } }
body.dapv-site-header:has(.urgency-bar:not(.is-hidden)) #hubspot-messages-iframe-container { bottom: 68px !important; }
@media (max-width: 760px) { body.dapv-site-header:has(.urgency-bar:not(.is-hidden)) #hubspot-messages-iframe-container { bottom: 104px !important; } }

/* The design sets scroll-behavior on html, which no @scope block can reach, so
   the in-page anchors (Free Audit, Book a call) jumped. */
html:has(body.dapv-site-header) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(body.dapv-site-header) { scroll-behavior: auto; } }

/* Below 992px the live header is in the page flow, and .shrink (added once the
   page scrolls) gives it 20px more padding, so everything under it jumped 20px
   each time the page crossed the top. */
@media (max-width: 991px) {
  body.dapv-site-header .site-header.shrink { padding-top: 0; padding-bottom: 0; }
}

/*
 * dap-wpengine's header is position:fixed and TRANSPARENT until the page
 * scrolls, with a near-black logo and nav. That works on an ordinary page,
 * which opens on white, so the header reads as white. These pages open on the
 * dark hero, so an unstyled header and its inline-SVG logo vanish into it.
 *
 * The fix is white, not navy. Measured across the site: an ordinary page reads
 * white at the top and goes navy on scroll (.shrink), and that is exactly what
 * the vertical pages already do today with their own header, at 96% white over
 * black nav. Only the homepage forces navy at the top, and that is a
 * homepage-specific choice for its own hero.
 *
 * So: give the header a solid white, and leave the logo and nav at the theme's
 * dark default, which is correct on white. .shrink is untouched and keeps the
 * theme's navy, so the scrolled state is identical to every other page.
 *
 * Fully opaque, not the 96% the verticals' own header used: at 96% the dark
 * hero reads through as a faint grey cast behind the logo and nav.
 */
body.dapv-site-header .site-header:not(.shrink) { background-color: rgba(255, 255, 255, 1) !important; }

/* The urgency strip's dismiss icon. Both main.min.css and the design set
   "svg { max-width: 100% }", and that percentage resolves against the close
   button, which is shrink-to-fit around this very icon. The circular
   dependency resolves to zero, so the X measured 0x15 and the button rendered
   as an empty pill. An explicit max-width breaks the cycle. */
.dapv-canvas .urg-close__svg {
  width: 15px !important;
  height: 15px !important;
  max-width: none !important;
}

/* The skip link is the template's own, and .sr-only was defined in
   dap-shell.css, which this template does not load. Without it the link
   renders as orange body text over the logo.

   No child combinator: get_header() opens div.site-inner before the template
   regains control, so the link is not a child of <body>. */
body.dapv-site-header .sr-only:not(:focus) {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. HubSpot forms.
   The live theme turns every HubSpot label into an italic floating label
   (position:absolute, top:20px) laid over the field, and skins the submit as a
   30px pill with an orange focus glow, several declarations !important. This
   is the single biggest reason the other two templates drop main.min.css
   outright, so these rules do have to outrank theme classes.
   -------------------------------------------------------------------------- */
/*
 * :not(.hs-form-required) everywhere a span is touched. hubspot-forms.css
 * visually hides that asterisk span with position:absolute and a 1px box, and
 * the first version of these rules forced it back to static/inline and put a
 * stray asterisk next to every label.
 */
.dapv-canvas .hs-form .hs-form-field > label:not(.hs-error-msg),
.dapv-canvas .hs-form .hs-form-field > label:not(.hs-error-msg) > span:not(.hs-form-required) {
  position: static !important; top: auto !important; left: auto !important;
  transform: none !important; z-index: auto !important;
  margin: 0 !important; padding: 0 !important;
  background: none !important; transition: none !important;
  font-style: normal !important;
}
.dapv-canvas .hs-form .hs-form-field { position: static !important; }

/* The theme's label typography comes from
   ".hbspt-form form label span, .hs-form-field label:not(.hs-error-msg)",
   which at (0,2,1) outranks the design's .form-label at (0,1,0): italic
   Cerebri 17px/22px in mid grey where the page wants Geist 14px semibold in
   the heading colour. Restated here at a specificity that wins. */
.dapv-canvas .hs-form .hs-form-field > label:not(.hs-error-msg),
.dapv-canvas .hs-form .hs-form-field > label:not(.hs-error-msg) > span:not(.hs-form-required) {
  font-family: var(--t-font-body) !important;
  font-size: var(--t-small) !important;
  font-weight: var(--t-weight-ui) !important;
  line-height: 1.7 !important;
  /* --gray-900, not --text-main: the form cards sit inside dark sections,
     where tokens.css redefines --text-main to --white-90, and the design's own
     ".hc-form .form-label" asks for --gray-900 because the card itself is
     light. Using --text-main turned every label white on white. */
  color: var(--gray-900) !important;
}

/* Fields. The theme sets height 50px, a 25px radius, 30px of left padding and
   its own grey, all from ".hs-form .hs-input" and
   ".hs-form input:not([type=submit])". The design's .form-input is a pill at
   --input-height with --input-padding. */
.dapv-canvas .hs-form .hs-input,
.dapv-canvas .hs-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.dapv-canvas .hs-form select,
.dapv-canvas .hs-form textarea {
  height: var(--input-height);
  padding: var(--input-padding);
  border-radius: var(--btn-radius) !important;
  background: var(--gray-100);
  color: var(--gray-900);
  border: 1.5px solid var(--gray-300) !important;
  font-family: var(--t-font-body);
  font-size: var(--t-body);
  line-height: normal;
}
.dapv-canvas .hs-form textarea { height: auto; }

/* The theme gives fieldsets a bottom margin and caps them at 100%; the
   design's form grid handles its own spacing. */
.dapv-canvas .hs-form fieldset { margin-bottom: 0; max-width: none; }

/* The submit carries the design's own classes (btn btn--primary btn--md
   btn--full), but the theme's ".hs-button" skin outranks them: its own orange,
   15px type, 10px/30px of margin and 30px of padding. Restated from
   components.css .btn / .btn--primary / .btn--md so the button matches every
   other primary button on the page. */
.dapv-canvas .hs-form input[type="submit"],
.dapv-canvas .hs-form .hs-button {
  display: inline-flex !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 var(--space-12) !important;
  font-family: var(--t-font-body) !important;
  font-size: var(--t-body) !important;
  font-weight: var(--weight-bold) !important;
  background: var(--accent-main) !important;
  color: var(--text-inverse) !important;
  border-color: var(--accent-main) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  /* the theme's 30px corner; the design's primary button is a full pill */
  border-radius: var(--radius-full, 9999px) !important;
}
.dapv-canvas .hs-form .hs-button.btn--full,
.dapv-canvas .hs-form input[type="submit"].btn--full { width: 100% !important; }
.dapv-canvas .hs-form input:focus,
.dapv-canvas .hs-form select:focus,
.dapv-canvas .hs-form textarea:focus { box-shadow: none !important; }