/*
 * DAP Vertical Blocks: corrections layered on top of the ported design system.
 *
 * The five stylesheets this plugin ships are verbatim ports of the approved
 * staging build, so they can be diffed against it. Anything we deliberately
 * change goes here instead of being edited into them.
 *
 * No em-dashes anywhere in this codebase, per brand guardrails.
 */

/* ---------------------------------------------------------------------------
 * The 14px type floor.
 *
 * The design requires a hard 14px minimum on every element, including card
 * bodies, table cells, form labels, chip labels, eyebrows and fine print. Three
 * rules in the approved build hardcode px values below it. Corrected here
 * rather than in the ported files.
 * ------------------------------------------------------------------------- */

/* was 11px in shared.css */
.urgency-bar__text { font-size: 14px; }

/* was 12px in shared.css */
.urgency-bar__cta { font-size: 14px; }

@media (max-width: 767px) {
  .urgency-bar__text { font-size: 14px; letter-spacing: .02em; }
  .urgency-bar__cta  { font-size: 14px; }
}

/* was 11px in pages.css */
.hc-logocell .logo-wordmark,
.hc-logocell span { font-size: 14px; line-height: 1.2; }

/* ---------------------------------------------------------------------------
 * 2. Host theme collisions.
 *
 * Production's theme defines its own `.btn` rule, `display:inline-block;
 * margin: 0 auto; padding: 8px 24px; font-size: 22px`, and the design system
 * uses the same class name. Our components.css sets padding and size but never
 * declares margin, so the theme's `margin: 0 auto` survived and centred five
 * buttons the design left-aligns: the hero audit button, both audit band CTAs,
 * the case studies CTA and the people CTA.
 *
 * Measured rather than guessed: on staging no button in any section has an auto
 * side margin, and centring in this design always comes from text-align on the
 * parent. So resetting the horizontal margin reproduces the approved layout
 * exactly and cannot re-centre anything that is meant to be centred.
 *
 * Scoped to these pages, so the theme's own buttons elsewhere are untouched.
 * ------------------------------------------------------------------------- */
body.dapv-page .btn,
body.dapv-shell .btn {
  margin-left: 0;
  margin-right: 0;
}

/* ---------------------------------------------------------------------------
 * Page background.
 *
 * The design uses a light grey page canvas (--bg-page, #F2F4F7). Sections that
 * read as "grey bands" (#logos, #proof, #faq ...) are themselves transparent
 * and simply let that canvas show through, which is how staging renders them.
 *
 * The production child theme sets `body { background-color: #fff !important }`
 * in css/main.min.css, so on production those bands came out white. Restore the
 * canvas on vertical pages only; !important is required to beat the theme rule,
 * and background-size/position are deliberately left alone so any theme
 * background image behaviour elsewhere is untouched.
 * ------------------------------------------------------------------------- */
body.dapv-page,
body.dapv-shell {
  background-color: var(--bg-page) !important;
}

/* ---------------------------------------------------------------------------
 * Theme reset bleed.
 *
 * The production child theme ships a Bootstrap-derived reset in
 * css/main.min.css. Four of its declarations reach elements inside the
 * vertical page and change the approved layout. Each value below was read off
 * staging, not guessed:
 *
 *   img            vertical-align  theme: top      design: baseline
 *   .btn           vertical-align  theme: middle   design: baseline
 *   .form-label    margin-bottom   theme: 8px      design: 0
 *                  -> made every .form-group 8px taller, so the hero form
 *                     card rendered 24px taller than the design
 *   input/select   line-height     theme: 1.15/24  design: normal
 *
 * Scoped to the vertical pages, so the theme's own forms and buttons
 * everywhere else on the site keep the reset they were built against.
 * ------------------------------------------------------------------------- */
body.dapv-page #main-content img,
body.dapv-shell #main-content img {
  vertical-align: baseline;
}

body.dapv-page .btn,
body.dapv-shell .btn {
  vertical-align: baseline;
}

body.dapv-page .form-label,
body.dapv-shell .form-label {
  margin-bottom: 0;
}

body.dapv-page #main-content input,
body.dapv-page #main-content select,
body.dapv-page #main-content textarea,
body.dapv-shell #main-content input,
body.dapv-shell #main-content select,
body.dapv-shell #main-content textarea {
  line-height: normal;
}

/* ---------------------------------------------------------------------------
 * Theme reset bleed, part 2.
 *
 * Two more declarations in the child theme's css/main.min.css reach this page:
 *
 *   ul, ol   font-size: 18px   -> the design's lists inherit 16px. This one is
 *                                visible: .hc-strip__items and .pricing__chips
 *                                and their list items rendered a size up.
 *   .btn     text-align: center -> only changes the anchor buttons, because
 *                                <button> is centred by the UA anyway. On
 *                                staging an a.btn inherits its parent's
 *                                alignment, so inherit is the exact value.
 * ------------------------------------------------------------------------- */
body.dapv-page #main-content ul,
body.dapv-page #main-content ol,
body.dapv-shell #main-content ul,
body.dapv-shell #main-content ol {
  font-size: inherit;
}

body.dapv-page a.btn,
body.dapv-shell a.btn {
  /* Reproduces staging: there an anchor button takes its parent's alignment,
   * where the production theme forced centre on every .btn. */
  text-align: inherit;
}

/* Below 768px a long label wraps, and left-ragged text inside a centred pill
 * reads as a bug - Zayd flagged it on "Browse our ABA and pediatric therapy
 * case studies". <button> already centres via the UA sheet, so this only brings
 * anchor buttons into line, and only where the wrapping happens. */
@media (max-width: 767px) {
  body.dapv-page a.btn,
  body.dapv-shell a.btn {
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
 * Theme reset bleed, part 3 - the bare <button> rule.
 *
 * css/main.min.css styles every <button> on the site as a dark pill:
 *   button { background:#263238; border:0; border-radius:5px; color:#fff;
 *            font-size:16px; font-weight:600; padding:15px 30px;
 *            text-align:center; width:auto }
 *
 * The design's own .btn and .acc rules already win on background, colour,
 * border, padding and text-align, so the only declarations that got through
 * are font-size, font-weight, line-height (from the reboot's 1.15) and
 * border-radius on the accordion toggles in #audits / #audits2.
 *
 * pages.css sets no font-size, font-weight, line-height or border-radius on
 * .acc at any breakpoint - it only changes padding - so on staging those four
 * resolve to the user-agent value. `revert` reproduces exactly that, at every
 * viewport, without hard-coding the UA's 13.3333px.
 *
 * This has no visual effect today (every visible glyph in .acc lives in a
 * child span with its own size, and the button has no background or radius to
 * show) - it is here so the next vertical page that uses a plain <button>
 * does not inherit a dark pill.
 * ------------------------------------------------------------------------- */
body.dapv-page #main-content .acc,
body.dapv-shell #main-content .acc {
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  border-radius: revert;
}

/* ---------------------------------------------------------------------------
 * Theme reset bleed, part 4 - heading margins.
 *
 * The design zeroes margins with a universal reset in components.css:
 *   *, *::before, *::after { margin: 0 }
 * A universal selector has zero specificity, so the child theme's
 *   h2, h3, h4 { margin-bottom: 20px }
 * beat it on production and pushed content down 20px in #pricing, in all
 * eight #services cards and in all five #people cards.
 *
 * This re-states the reset at element specificity from the last sheet in the
 * cascade, so it beats the theme rule while every design rule that targets a
 * heading by class (.hc-h2, .hc-person__n and friends) still wins over it.
 * No design stylesheet sets a margin on a bare h1-h6 selector - checked - so
 * nothing of the design's own is overridden here.
 * ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Theme reset bleed, part 5 - the select's inset shadow.
 *
 * main.min.css gives .form-select an inset shadow:
 *   .form-select { box-shadow: rgba(0,0,0,.075) 0 1px 2px inset }
 * The design's .form-input declares no shadow, so on staging the industry
 * select renders flat. Restore flat.
 * ------------------------------------------------------------------------- */
body.dapv-page #main-content .form-select,
body.dapv-shell #main-content .form-select {
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Theme furniture the vertical page does not use.
 *
 * The page no longer loads the child theme's main.min.css (see the dequeue in
 * dap-vertical-blocks.php), so two elements the theme prints on every page
 * would arrive here with no styling at all:
 *
 *   div.container-fluid.fixed-bottom  the site-wide sticky "Chat With Sales"
 *                                     bar. Unstyled it becomes a block of
 *                                     stray text at the foot of the page, and
 *                                     even styled it stacked on top of the
 *                                     design's own #urgency-bar, which does
 *                                     the same job. Hidden here; every other
 *                                     page keeps it.
 *   div[id^="div-gpt-ad-"]            an empty ad slot, 1890x27 of blank strip.
 *
 * Hidden with display:none rather than removed server side, so nothing about
 * the theme's own output or its scripts changes.
 * ------------------------------------------------------------------------- */
body.dapv-page > .container-fluid.fixed-bottom,
body.dapv-shell > .container-fluid.fixed-bottom,
body.dapv-page > div[id^="div-gpt-ad-"],
body.dapv-shell > div[id^="div-gpt-ad-"] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * The HubSpot plugin prints an inline <style> with
 *   .hs-form-field > label { font-size: 15px; padding-left: 12px }
 * which is not in main.min.css and so survives the dequeue. The design's
 * .form-label is a class selector and loses to it. Restate the design's own
 * values, from the design's own tokens, at a specificity that wins.
 * ------------------------------------------------------------------------- */
body.dapv-page .dapv-hsform .form-label,
body.dapv-shell .dapv-hsform .form-label {
  font-size: var(--t-small);
  padding-left: 0;
}

/* ---------------------------------------------------------------------------
 * Mobile corrections.
 *
 * This sheet only loads on vertical pages, so plain selectors are enough here -
 * nothing in the theme is being fought, unlike the blocks above.
 * ------------------------------------------------------------------------- */

/* The urgency bar's second clause, and the middot that introduces it, are
 * wrapped in .urgency-bar__more so both disappear together. Hiding only the
 * <strong> left a stray "." at the end of the line. Below 768px the bar has
 * room for one clause, the dot and the button, and no more. */
@media (max-width: 767px) {
  .urgency-bar__more {
    display: none;
  }

  /* One clause fits on one or two lines, so the dot, the text and the button
   * sit on a shared centre line. */
  .urgency-bar__inner {
    align-items: center;
  }

  .urgency-bar__text {
    align-items: center;
    text-wrap: balance;
  }
}

/* Five photos in two columns leaves a hole in the last row. The first photo
 * already carries .lg for the desktop 2x2 span, so on mobile it goes full
 * width and the remaining four fill two clean rows of two. */
@media (max-width: 767px) {
  .team-grid {
    /* `1fr` rows make every row as tall as the tallest, which is the
     * full-width first photo. Content-sized rows instead. */
    grid-auto-rows: auto;
  }

  .team-grid .lg {
    grid-column: 1 / -1;
  }
}

/* Legal links in the form fine print, in the brand orange. Underlined on hover
 * only, matching how links read elsewhere in this design. */
.hc-fine a {
  color: var(--accent-main);
  text-decoration: none;
}

.hc-fine a:hover,
.hc-fine a:focus-visible {
  text-decoration: underline;
}

/* Keeps the legal sentence on its own line at the end of the fine print. */
.hc-fine__legal {
  display: block;
  margin-top: var(--space-2);
}

/* ---------------------------------------------------------------------------
 * #problem: centre the number disc against the whole card.
 *
 * The disc is a ::before placed at `grid-row: 1 / -1` with `align-self: center`,
 * and computed style says it is centred - but it rendered against the title.
 *
 * The cause: a wide-viewport rule sets `grid-template-rows: auto`, a single
 * EXPLICIT track, and it applies at every width. The title and the description
 * then land in IMPLICIT tracks. `-1` names the end of the explicit grid, so the
 * disc's area was just the first row - about 24px - and it was being centred
 * faithfully inside that. getComputedStyle reporting three tracks is what hid
 * this: it lists implicit tracks alongside explicit ones.
 *
 * So the fix is to declare the rows the mobile layout actually uses, which makes
 * `1 / -1` span the whole card again. The label row stays collapsed on every
 * card but the first, exactly as before.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .prob-card {
    grid-template-rows: auto auto auto;
  }

  .prob-card:not(:first-of-type) {
    grid-template-rows: 0 auto auto;
  }

  .prob-card::before {
    grid-row: 1 / -1;
    align-self: center;
  }
}

/* ---------------------------------------------------------------------------
 * #how-we-help: the eight strategies read "1)" rather than "1".
 *
 * The number and the title are one generated string, not two elements:
 *   .lem__data span::before { content: attr(data-n) " " attr(data-name) }
 * so the bracket goes into that content, keeping the single space that
 * separates the number from the title. Same specificity as the rule in
 * pages.css; this sheet loads after it, so it wins.
 *
 * (An earlier attempt put the bracket on .lem__n, which is the circular badge
 * in the interactive diagram's readout panel - the wrong element - and was
 * reverted.)
 * ------------------------------------------------------------------------- */
.lem__data span::before {
  content: attr(data-n) ") " attr(data-name);
}


/* ---------------------------------------------------------------------------
 * Mobile round 2.
 * ------------------------------------------------------------------------- */

/* 1. The people cards are a horizontal scroller (382px visible, 1074px of
 *    content) with scroll snapping already on, but nothing on screen says so.
 *    Three cues, no JavaScript: a brand-coloured scrollbar that is actually
 *    visible, a fade on the trailing edge so the row reads as continuing, and
 *    padding so a snapped card sits clear of that fade. */
@media (max-width: 767px) {
  .hc-people {
    /* Kept for pointer devices that render a scrollbar. Touch devices do not,
     * which is why the rail below exists. No mask: it would clip the scrollbar
     * and the card edges. */
    scrollbar-color: var(--accent-main) rgba(4, 28, 44, .12);
    scrollbar-width: thin;
  }

  .hc-people::-webkit-scrollbar {
    height: 4px;
  }

  .hc-people::-webkit-scrollbar-track {
    background: rgba(4, 28, 44, .12);
    border-radius: 999px;
  }

  .hc-people::-webkit-scrollbar-thumb {
    background: var(--accent-main);
    border-radius: 999px;
  }

  .hc-people > * {
    scroll-snap-align: start;
  }
}

/* 2. The hero audit form: input and button sat on one flex row with a 6px gap,
 *    which is what made the spacing look wrong at 414px. Stack them, give the
 *    gap a real value, and let the button fill the width. */
@media (max-width: 767px) {
  .hc-audit__row {
    /* Wrap, do NOT switch to column: the input is `flex: 1`, and in a column
     * that grows it vertically into an oversized pill. Keeping the main axis
     * horizontal leaves the input at its own height and lets the button wrap
     * onto the next line. */
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .hc-audit__input {
    flex: 1 1 100%;
  }

  .hc-audit__btn {
    flex: 1 0 100%;
    width: 100%;
  }
}

/* 3. #audits heading: 28px type on a 30.8px line (1.1) is too tight once the
 *    highlighted phrase carries its own background box. */
@media (max-width: 767px) {
  #audits h2,
  #audits2 h2 {
    line-height: 1.3;
  }
}

/* The scroll rail. Only rendered by hubspot-forms.js's sibling, vertical.js,
 * and only when the row actually overflows, so it never appears on a viewport
 * where all the cards already fit. */
.hc-people__rail {
  display: none;
}

@media (max-width: 767px) {
  .hc-people__rail {
    display: block;
    position: relative;
    height: 4px;
    margin: var(--space-4) auto 0;
    width: calc(100% - var(--space-10));
    max-width: 220px;
    background: rgba(4, 28, 44, .12);
    border-radius: 999px;
    overflow: hidden;
  }

  .hc-people__rail span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: var(--accent-main);
    border-radius: 999px;
    transition: left .12s linear;
    will-change: left;
  }

  /* Sits on a dark band, so the track needs to read against it. */
  .hc-closeband .hc-people__rail,
  [data-theme="dark-section"] .hc-people__rail {
    background: rgba(255, 255, 255, .22);
  }
}