/* ==========================================================================
   DAP Homepage Blocks - theme bridge.
   Loaded ONLY when the active theme is not "dap" (see dap_hb_is_dap_theme()).
   The blocks carry their whole design system, but a host theme still wraps the
   page and styles elements globally. This sheet neutralises the two things that
   break the sections under another theme, and is the one place to add an
   override when a specific theme collides with the blocks:

   1. The canvas: the page template prints the blocks inside main.dap-hb-canvas
      with no theme wrapper, but a theme may still constrain <main> or the body.
      The canvas is full-bleed and the type base is the design's.
   2. Global element styles a theme is likely to set (links, headings, lists,
      buttons, images) are reset INSIDE the canvas to what the design expects,
      so the block CSS (which targets classes) lands on a known base.

   Tokens only, zero hex. Everything is scoped to .dap-hb-canvas.
   ========================================================================== */

.dap-hb-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;
}
.dap-hb-canvas *,
.dap-hb-canvas *::before,
.dap-hb-canvas *::after { box-sizing: border-box; }

/* Sections are full width; the design's .container does the centring. */
.dap-hb-canvas > section,
.dap-hb-canvas > .section,
.dap-hb-canvas > .hero { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }

/* Element resets inside the canvas: what components.css assumes. */
.dap-hb-canvas h1, .dap-hb-canvas h2, .dap-hb-canvas h3, .dap-hb-canvas h4 {
  font-family: var(--t-font-heading, var(--t-font-body));
  margin-top: 0;
  text-transform: none;
  letter-spacing: normal;
}
.dap-hb-canvas p { margin-top: 0; }
/* the logo wall's "See all client stories" line keeps its space above the last logo row (the reset above removed it) */
.dap-hb-canvas p.lw-more { margin-top: var(--space-12); }
.dap-hb-canvas ul, .dap-hb-canvas ol { margin: 0; padding: 0; }
.dap-hb-canvas a { text-decoration: none; }
.dap-hb-canvas a:hover { text-decoration: none; }
.dap-hb-canvas a.audit-v5-card, .dap-hb-canvas a.audit-v5-card:hover, .dap-hb-canvas a.audit-v5-card:focus { color: inherit !important; text-decoration: none !important; font-weight: inherit; }
.dap-hb-canvas img { max-width: 100%; height: auto; border: 0; box-shadow: none; }
.dap-hb-canvas button { font: inherit; }
.dap-hb-canvas .btn,
.dap-hb-canvas .btn:hover,
.dap-hb-canvas .btn:focus { text-decoration: none; text-transform: none; letter-spacing: normal; box-shadow: none; }
.dap-hb-canvas .btn--primary:hover { box-shadow: 0 4px 14px rgba(215,119,87,0.35); }

/* Images the sections size themselves. Host themes commonly set img { width:100% }
   or .entry img { height:auto } with enough specificity (or later in the cascade)
   to blow a 23px logo up to its natural 512px, so the design's sizes are restated
   here with !important. Values mirror shared.css / homepage.css. */
.dap-hb-canvas .client-logo-pill img { height: 23px !important; width: auto !important; max-width: none !important; display: block; }
.dap-hb-canvas .client-logo-pill img[src*="tidewater"] { height: 30px !important; }
.dap-hb-canvas .client-logo-pill img[src*="socioh"] { height: 28px !important; }
.dap-hb-canvas .c-logo img { max-height: 26px !important; max-width: 128px !important; width: auto !important; height: auto !important; }
/* an explicit height (not max-height) so SVG marks with only a viewBox, like Dolby, scale instead of rendering at 300x150 and cropping */
.dap-hb-canvas .v1-logos img { height: 30px !important; max-height: none !important; width: auto !important; }
.dap-hb-canvas .v1-logos img[src*="partyslate"] { height: 16px !important; }
.dap-hb-canvas .v1-logos img[src*="unity-communications"] { height: 26px !important; }
.dap-hb-canvas .v1-logos img[src*="tidewater"] { height: 40px !important; } /* two-line wordmark */
.dap-hb-canvas .v1-logos img[src*="cjp"] { height: 30px !important; }
.dap-hb-canvas .logo-row img { max-height: 40px !important; width: auto !important; height: auto !important; }
.dap-hb-canvas .logo-row img[src*="fresh-thyme"] { max-height: 48px !important; }
.dap-hb-canvas .vp .logo-row img { max-height: 28px !important; }
.dap-hb-canvas .vp .logo-row img[src*="fresh-thyme"] { max-height: 34px !important; }
.dap-hb-canvas .avatar img { width: 56px !important; height: 56px !important; object-fit: cover; border-radius: var(--radius-full); }
.dap-hb-canvas .tg-author img { width: 56px !important; height: 56px !important; object-fit: cover; border-radius: var(--radius-full); }
.dap-hb-canvas .team-card img { width: 100% !important; height: auto !important; aspect-ratio: 2 / 3; object-fit: cover; object-position: center top; }
.dap-hb-canvas .film-cell img { width: 100% !important; height: auto !important; display: block; }
/* On the desktop collage each cell has a fixed ratio (or takes the column's remaining
   height) and the photo fills it; the generic height:auto above would shrink it back to
   its intrinsic height and leave the column's bottom empty. Mirrors homepage.css 16. */
@media (min-width: 900px) {
  .dap-hb-canvas [data-screen-label="filmstrip"] .film-cell img { height: 100% !important; object-fit: cover; object-position: 50% 30%; }
}
/* The design sets scroll-behavior on html, which no @scope block can reach, so the
   in-page anchors (Run an audit, See case studies) jumped under the host theme. */
html:has(body.dap-hb-homepage) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(body.dap-hb-homepage) { scroll-behavior: auto; } }
.dap-hb-canvas .btn__arrow, .dap-hb-canvas .ind-a-go__svg { width: 1em !important; height: 1em !important; }

/* Theme-specific overrides go below this line, one block per theme, with the
   selector the theme uses and why it collided. Keep them scoped to the canvas. */

/* dap-wpengine (Genesis child, the live theme). Its header is transparent on
   body.home until the page scrolls (.shrink adds the navy), and on the old home
   that works because the old hero is light. Over the new dark hero the header and
   its inline-SVG logo vanish. On pages with the new hero, give the header the
   design's navy from the start and keep the logo and nav links white. */
body.dap-hb-homepage .site-header:not(.shrink) { background-color: var(--secondary-800) !important; }
body.dap-hb-homepage .site-header:not(.shrink) .dap-header__menu__logo path { fill: var(--gray-0) !important; }
body.dap-hb-homepage .site-header:not(.shrink) .dap-header__nav__item__link { color: var(--gray-0) !important; }

/* the live theme prints its own fixed bottom bar ("Do you want to grow in 2026?"); on the new
   homepage the design's strip replaces it, so the two never stack (2026-10-13) */
body:has(.urgency-bar) .container-fluid.fixed-bottom { display: none !important; }

/* The live theme turns every HubSpot label into an italic floating label (position:absolute,
   top:20px) laid over the field. On the homepage forms the labels sit above the fields. */
.dap-hb-canvas .dap-form-shortcode .hs-form .hs-form-field > label:not(.hs-error-msg),
.dap-hb-canvas .dap-form-shortcode .hs-form .hs-form-field > label:not(.hs-error-msg) span {
  position: static !important; top: auto !important; left: auto !important; transform: none !important; z-index: auto !important;
  display: block; margin: 0 !important; padding: 0 !important; background: none !important; transition: none !important;
  font-family: var(--t-font-body) !important; font-style: normal !important; font-size: var(--t-small) !important;
  font-weight: var(--weight-semibold) !important; line-height: 1.4 !important; color: var(--text-heading) !important; text-align: left;
}
.dap-hb-canvas .dap-form-shortcode .hs-form .hs-form-field > label:not(.hs-error-msg) span { display: inline; }
/* the strip prints after <main>; its body padding has to be unscoped */
body:has(.urgency-bar:not(.is-hidden)) { padding-bottom: 68px; }
@media (max-width: 760px) { body:has(.urgency-bar:not(.is-hidden)) { padding-bottom: 104px; } }
.dap-hb-urgency-host { min-height: 0; height: 0; padding: 0; margin: 0; background: none; }
body:has(.urgency-bar:not(.is-hidden)) #hubspot-messages-iframe-container { bottom: 68px !important; }
@media (max-width: 760px) { body:has(.urgency-bar:not(.is-hidden)) #hubspot-messages-iframe-container { bottom: 104px !important; } }