/* ==========================================================================
   Augusta Pediatric Associates — redesign layer
   Iteration 4 · all four service split sections on the home page.

   Purely additive. Remove the two <link>/<script> lines in index.html and the
   clone renders exactly as captured.

   The rule that shapes everything below: during the hover transition NOTHING
   lays out. No width animates, no text re-wraps, no background re-scales.
   Only `transform` and `opacity` change, which the compositor handles without
   ever asking the layout engine a question.

   The rows alternate — Well Checks and Immunizations put the copy on the
   right, Sick Visits and Prenatal on the left — so nothing here is written
   four times. The script tags each row `.apa-copy-left` or `.apa-copy-right`
   and tags the two columns `.apa-copy` / `.apa-photo`; only the ground's
   origin and the copy's slide direction differ between them.

   One `--apa-panel` covers all four because all four copy panels are already
   white, by two different routes: Well Checks and Immunizations have no fill
   on the copy column and show their row's own #ffffff through it, while Sick
   Visits and Prenatal paint #ffffff on the column itself over an #f2f2f2 row.
   ========================================================================== */

:root {
  /* The checkerboard band above these sections is #f06878. White type on that
     pink only reaches 3.0:1, so the button takes the same hue two steps
     deeper: still unmistakably the section's red, but legible. */
  --apa-red:        #d5344b;  /* 4.75:1 against white */
  --apa-red-deep:   #c9283f;  /* 5.44:1 — the hover state */
  --apa-red-rgb:    213, 52, 75;

  --apa-panel:      #fff;     /* the ground the copy sits on */

  --apa-glide:      cubic-bezier(.16, 1, .3, 1);   /* the panel and the lift */
  --apa-ease:       cubic-bezier(.22, .61, .36, 1); /* the words, the button */
}

/* --------------------------------------------------------------------------
   1 · The split
   --------------------------------------------------------------------------
   Both columns are pinned and never move: the photograph holds 70%, the copy
   column holds 30%. What appears to expand is `.apa-ground`, a plain rectangle
   inside the copy column that scales away from its outer edge — 30% of the row
   wide, scaled to 50%. The photograph sits behind it, untouched and
   unrepainted; the copy rides above it and slides by the same 10% of the row
   so it stays centred in the ground as the ground grows.

   `.apa-split-row` is put there by redesign.js, so if the script never runs
   the rows simply stay the 50/50 they were captured as.

   75em, not 64em: below about 1200px a 30% column is under 360px and the
   paragraph gets too narrow to read. `(hover: hover)` is load-bearing too —
   the copy only appears on hover, so a touch screen wide enough to clear the
   breakpoint (an iPad in landscape) would otherwise be left with a narrow
   panel and no words in it. Both cases keep the original 50/50.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 75em) and (hover: hover) {

  .apa-split-row:not(.apa-bleed) > .apa-photo {
    flex: 0 0 70%;
    max-width: 70%;
  }

  .apa-split-row:not(.apa-bleed) > .apa-copy {
    flex: 0 0 30%;
    max-width: 30%;
  }

  .apa-split-row > .apa-copy {
    position: relative;
    z-index: 1;
  }

  /* the ground — the only thing that "expands" */
  .apa-split-row > .apa-copy > .apa-ground {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--apa-panel);
    transition: transform .8s var(--apa-glide);
    pointer-events: none;
    will-change: transform;   /* its own layer: scaled, never repainted */
  }

  /* it grows away from the edge it is anchored to */
  .apa-copy-right > .apa-copy > .apa-ground { transform-origin: 100% 50%; }
  .apa-copy-left  > .apa-copy > .apa-ground { transform-origin: 0    50%; }

  .apa-split-row > .apa-copy:hover        > .apa-ground,
  .apa-split-row > .apa-copy:focus-within > .apa-ground {
    transform: scaleX(1.6667);          /* 30% of the row → 50% */
  }

  /* the copy rides above it, and re-centres by sliding, not by re-wrapping.
     Sick Visits paints its own white on the inner; the ground owns that now. */
  .apa-split-row > .apa-copy > .vc_column-inner {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
    padding: clamp(48px, 4.5vw, 84px) clamp(32px, 2.6vw, 48px) !important;
    transition: transform .8s var(--apa-glide);
    will-change: transform;   /* the copy is rasterised once, then slid */
  }

  /* half the growth, toward the photograph */
  .apa-copy-right:not(.apa-bleed) > .apa-copy:hover        > .vc_column-inner,
  .apa-copy-right:not(.apa-bleed) > .apa-copy:focus-within > .vc_column-inner {
    transform: translateX(-33.333%);
  }

  .apa-copy-left:not(.apa-bleed) > .apa-copy:hover        > .vc_column-inner,
  .apa-copy-left:not(.apa-bleed) > .apa-copy:focus-within > .vc_column-inner {
    transform: translateX(33.333%);
  }

  /* ------------------------------------------------------------------------
     1b · The cluster
     ------------------------------------------------------------------------
     At rest the icon and the title sit down near the button, tight together,
     with the paragraph's space held open but empty beneath them. On hover the
     pair rises by exactly that paragraph's height — measured per row by the
     script into --apa-lift — and the words form in the space they vacate.

     The lift is carried by `.iconbox-image` and by an `.apa-title` span the
     script puts inside the h5, NOT by the figure and the h5 themselves. The
     theme's own scroll-reveal tweens those two with an *inline* transform, so
     anything a stylesheet writes there is overridden the moment the section
     scrolls into view. These two elements it never touches.
     ------------------------------------------------------------------------ */

  .apa-split-row .thb-iconbox figure { margin-bottom: 4px; }
  .apa-split-row .thb-iconbox .iconbox-image { margin-bottom: 0; }

  /* ------------------------------------------------------------------------
     Compacting the card, so the panels can be shorter.

     The panel height is bounded by the card's OPEN content run, not by the
     resting state, and that run was 356px: icon 76, title 63 + 10, paragraph
     103 + 14, iconbox 20, button 48. Of that, only the space the title
     translates down over is truly reserved — the rest is spacing, and it was
     set for a card that had a whole half-section to fill.

     Trimmed here rather than by cutting copy: the blurbs are the client's
     words and a pediatric practice's service descriptions are not padding.
     Icon 76 -> 60 and the three margins tightened takes the run to ~320,
     which is what lets --apa-stack-h come down to 0.84.

     --apa-icon is the knob if the icons want to be smaller again.
     ------------------------------------------------------------------------ */

  .apa-split-row { --apa-icon: 60px; }

  /* height only, width auto — the icons are not all the same aspect and
     setting both would squash the wider ones. The natural file is 99x116 and
     renders at 76 tall only because max-width caps it to its 65px column, so
     the height has to be stated and the width freed for it to take effect.

     !important on these two: the theme sizes the icon and the blurb from
     further inside than this selector reaches, and it wins on specificity
     otherwise — the iconbox margin below needs no such help. */
  .apa-split-row .thb-iconbox .iconbox-image img {
    height: var(--apa-icon) !important;
    width: auto !important;
    max-width: none !important;
  }

  .apa-split-row .thb-iconbox        { margin-bottom: 10px; }
  .apa-split-row .iconbox-content h5 { margin-bottom: 6px !important; }
  .apa-split-row .iconbox-content p  { margin-bottom: 8px !important; }

  .apa-split-row .apa-title { display: inline-block; }

  .apa-split-row .thb-iconbox .iconbox-image,
  .apa-split-row .iconbox-content .apa-title {
    transition: transform .8s var(--apa-glide);
  }

  .apa-split-row .thb-iconbox .iconbox-image,
  .apa-split-row .iconbox-content .apa-title {
    transform: translateY(var(--apa-lift, 0px));
  }

  .apa-split-row > .apa-copy:hover .iconbox-image,
  .apa-split-row > .apa-copy:hover .apa-title,
  .apa-split-row > .apa-copy:focus-within .iconbox-image,
  .apa-split-row > .apa-copy:focus-within .apa-title {
    transform: translateY(0);
  }

  /* the icon travels a touch further than the title, so the pair separates
     slightly on the way up instead of moving as one rigid block */
  .apa-split-row > .apa-copy:hover .iconbox-image,
  .apa-split-row > .apa-copy:focus-within .iconbox-image {
    transform: translateY(-10px);
  }

  /* the lines — spans come from redesign.js

     Each line is a box that hides what overflows it, holding an inner span
     that sits one line-height below at rest. Nothing is masked at the sides,
     so the effect is the line rising into its own slot rather than sliding in
     from anywhere.

     The box is exactly one line-height tall and the glyphs are centred in it
     by the half-leading, which leaves room for descenders and for most of the
     copy's text-shadow; only the outer edge of the wide glow is clipped.

     The duration lives on the hover rule, not here, which is what makes the
     exit instant: leaving, the lines fall back to this rule and cut out in a
     single frame. They have to. The title and the icon take .8s to descend
     back over this exact space, so any fade at all reads as the copy smearing
     through the type on its way down. */
  .apa-split-row .apa-line {
    display: block;
    overflow: hidden;
  }

  .apa-split-row .apa-line-in {
    display: block;
    opacity: 0;
    transform: translateY(100%);
    transition: none;
  }

  .apa-split-row > .apa-copy:hover .apa-line-in,
  .apa-split-row > .apa-copy:focus-within .apa-line-in {
    opacity: 1;
    transform: none;
    transition: opacity   .45s ease,
                transform .55s var(--apa-ease);
    /* starts once the title has cleared the space, 70ms between lines — far
       enough apart to read as one line after another rather than as a block
       arriving slightly unevenly */
    transition-delay: calc(.34s + var(--apa-i) * .07s);
  }

  /* ------------------------------------------------------------------------
     1c · The duo band — Well Checks and Sick Visits
     ------------------------------------------------------------------------
     redesign.js lifts these two rows out of the page's vertical stack and
     drops them side by side into one <div class="apa-duo">, so they read as a
     single band rather than two sections. Each keeps its own photograph, and
     because the photo is positioned against its own row it is confined to
     that half — it no longer bleeds across the whole page.

     At rest the band is 50/50 and both halves are open. Hovering either one
     takes it to 70% and squeezes its neighbour to 30%; the neighbour, having
     lost the room for its blurb, tucks its copy away — the same retreat the
     panel rows do, triggered by the sibling instead of by itself.

     This is the one place in the layer that animates layout, and it is worth
     saying why. Everywhere else only transform and opacity move, and that
     still holds — but here the effect IS the panel's width, and there is no
     transform that widens a cover-cropped photograph without stretching the
     faces in it. So flex-basis is what transitions, and the copy is protected
     from re-wrapping a different way: its width is --apa-measure, published
     in pixels by the script from the band's own width, so it never depends on
     the panel it happens to be sitting in.
     ------------------------------------------------------------------------ */

  .apa-bleed { position: relative; }

  /* the photograph, promoted from column to its panel's ground */
  .apa-bleed > .apa-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    flex: none;
    width: 100%;
    max-width: none;
  }

  .apa-bleed > .apa-photo > .vc_column-inner { height: 100%; }

  .apa-duo {
    display: flex;
    align-items: stretch;   /* both halves take the taller one's height */
  }

  .apa-duo > .apa-panel {
    flex: 0 0 50%;
    max-width: none;
    transition: flex-basis .8s var(--apa-glide);

    /* The rows carry `auto` vertical margins from the theme. An auto margin on
       the cross axis centres the item and cancels `stretch` outright — which
       left the shorter half floating in the band with a strip of page showing
       above and below it. align-self cannot override that; only this can. */
    margin-top: 0;
    margin-bottom: 0;
  }

  /* order matters: the neighbour rule is written first so that the hovered
     panel's own rule, at equal specificity, is the one that lands on it */
  .apa-duo:hover        > .apa-panel,
  .apa-duo:focus-within > .apa-panel { flex-basis: 36%; }

  .apa-duo > .apa-panel:hover,
  .apa-duo > .apa-panel:focus-within { flex-basis: 64%; }

  /* ------------------------------------------------------------------------
     1e · The stack — the vertical half of the accordion
     ------------------------------------------------------------------------
     Both bands live in one column-flex wrapper, so hovering a card moves all
     four: its own column widens, the card beside it narrows, its band grows,
     and the other band shrinks. Exactly the rule from 1c, turned on its side,
     with the neighbour written before the hovered one for the same reason.

     Both axes travel 14 points from 50 — out to 64%, back to 36% — so a card
     pushes down by the same share it pushes out. That is why the horizontal
     pair above came down from 70/30: at 70 the squeezed band would be 242px
     against a 233px closed card, nine pixels of clearance, and a heading that
     wrapped differently at another width would clip. At 36 it is 290px, with
     room to spare.

     The height is pinned to --apa-stack-h, the two bands measured at their
     natural heights and summed by the script. So the section redistributes
     its space rather than gaining any, and nothing below it ever moves.

     `overflow: hidden` on the band is what makes the squeeze safe: the copy
     block keeps its full height and simply gets cropped, and because the
     visible card is centred in it (that is what --apa-drop is for) what gets
     cropped is the empty reserve above and below, never the card.
     ------------------------------------------------------------------------ */

  .apa-stack {
    display: flex;
    flex-direction: column;
    height: var(--apa-stack-h, auto);
  }

  /* Each band holds half the stack, always. The vertical half of this effect
     is deliberately gone: hovering a card used to grow its own band to 64% and
     squeeze the other to 36%, so touching Well Checks shoved Immunizations and
     Prenatal 112px down the page and cropped 113px off them. Four things
     moving for one hover read as the section lurching rather than responding.

     A hover now redistributes width between the two cards BESIDE each other
     and nothing else — the band it lives in keeps its height, and the other
     band never moves at all. */
  .apa-stack > .apa-duo {
    flex: 0 0 50%;
    min-height: 0;
    overflow: hidden;
  }

  /* the script sums the bands at their natural heights, which it can only do
     with the pinning lifted */
  .apa-stack.apa-measuring-stack { height: auto !important; }

  .apa-stack.apa-measuring-stack > .apa-duo {
    flex-basis: auto !important;
    transition: none !important;
  }

  /* the copy fills its panel; the block inside holds a constant measure and
     stays centred in whatever the panel currently is */
  .apa-duo > .apa-panel > .apa-copy {
    flex: 1 1 100%;
    max-width: 100%;

    /* Centre the block itself, not just its contents. Once a band can be
       squeezed shorter than its copy, a block left in normal flow anchors to
       the top and hangs out of the bottom — the card was being cut off by
       28px. Centred, the overflow is split evenly, and since the visible card
       already sits in the middle of the block (that is --apa-drop's job) what
       spills past the edges is the empty reserve, not the card. */
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* An explicit height, not `align-self: stretch`. Stretch sizes an item to
       the flex *line*, and with the photograph absolutely positioned the copy
       is the only item in that line — so the line was itself 406px and
       stretching to it changed nothing. A percentage resolves against the
       panel, which has a definite height from the band's flex-basis, so the
       column is finally clamped and the centring has something to work with. */
    height: 100%;
    min-height: 0;
  }

  /* and the block must not be squashed to fit the short band — it is a flex
     item now, so it would shrink by default and crush the card */
  .apa-duo > .apa-panel > .apa-copy > .vc_column-inner { flex-shrink: 0; }

  .apa-duo > .apa-panel > .apa-copy > .vc_column-inner {
    width: var(--apa-measure, 30%);
    max-width: 100%;
    margin: 0 auto;

    /* closed, the card hangs low: the blurb's empty box sits above the button
       and the cluster drops into it, leaving twice as much air above the icon
       as below the button. --apa-drop is that error, measured by the script,
       and taking it back off centres the closed card in its panel. */
    transform: translateY(calc(-1 * var(--apa-drop, 0px)));
  }

  /* open, the card fills its box again and needs no correction */
  .apa-duo > .apa-panel:hover > .apa-copy > .vc_column-inner,
  .apa-duo > .apa-panel:focus-within > .apa-copy > .vc_column-inner {
    transform: translateY(0);
  }

  /* The cluster and the blurb need no rules of their own here. Both halves
     rest closed and open on their own hover, exactly like the panel rows, and
     `.apa-copy` spans the whole panel — so `.apa-copy:hover` up in 1b already
     means "this half is hovered". The panel widths are the only thing this
     section still has to say.

     Symmetry, which is the reason the next rule exists: the two blurbs are
     different lengths — four lines against two — and the blurb's box is what
     sets each card's height, whether or not the words are showing. Left alone
     that puts the two buttons at different heights and makes the closed cards
     different sizes. So both blurbs reserve the same box, the taller of the
     two, measured by the script. Equal boxes, equal card heights, equal lifts,
     and the two buttons land level. */
  .apa-duo .iconbox-content p { min-height: var(--apa-para, 0px); }

  /* and the same for the icons, which are two different drawings at two
     different sizes. The box is equalised and the artwork centred in it,
     rather than one icon being scaled up to match the other. */
  .apa-duo .thb-iconbox .iconbox-image {
    min-height: var(--apa-icon, 0px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* and the buttons, which are the same button with different wording — the
     longer label sets the width and both take it */
  .apa-duo .vc_btn3.apa-cta {
    width: var(--apa-btn, auto);
    justify-content: center;
  }

  /* Height. The band started at 627px and almost none of it was the content:
     77px of block padding, a <figure> standing 164px tall to hold a 116px
     icon, 22px of margin hanging below the button, and a spacer div the
     theme leaves between the cluster and the button. Each of those is taken
     out below, and the icon itself is capped — it is line art and reads
     perfectly well smaller, and at 116px it was the single tallest item in
     the card. Nothing here touches the type sizes. */
  .apa-duo > .apa-panel > .apa-copy > .vc_column-inner {
    padding-top: clamp(20px, 1.7vw, 32px) !important;
    padding-bottom: clamp(20px, 1.7vw, 32px) !important;
  }

  .apa-duo .thb-iconbox figure {
    margin-bottom: 0;
    padding: 0 !important;
  }

  .apa-duo .thb-iconbox .iconbox-image img {
    height: 76px;
    width: auto;
  }

  .apa-duo .iconbox-content p { margin-bottom: 14px; }

  .apa-duo .vc_btn3-container { margin-bottom: 0 !important; }

  .apa-duo .vc_empty_space { height: 12px !important; }

  /* the heading takes the same equal-box treatment as the blurb and the icon:
     one of a pair may wrap to a second line, and that difference lands
     straight on the buttons */
  .apa-duo .thb-iconbox .iconbox-content h5 {
    margin-bottom: 10px;
    min-height: var(--apa-h5, 0px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ------------------------------------------------------------------------
     1d · Holding the type on the photograph
     ------------------------------------------------------------------------
     Two layers, because one cannot do it. Dark type was never going to work
     here — dimming the picture to help it would only bury it — so the copy
     goes white and the picture goes down to meet it. Nothing is resized.

     The first layer is the faint, even dim over the whole photograph. The
     second is a soft pool centred on the copy that fades out well before the
     panel edge, so it reads as shading in the picture rather than a panel
     sneaking back in. Both are navy rather than black: a black wash drains
     the skin tones and leaves the photographs looking grey and dead.

     Measured, not assumed: 1440 points sampled across the paragraph's own box
     on each panel, reading the source photograph and compositing both layers
     over it. At rest the worst pixel is 5.3:1 on Well Checks and 5.7:1 on
     Sick Visits, medians 9.5 and 7.0, and every sampled point clears 4.5:1.
     The pool earns most of that, being deepest exactly where the type sits —
     a flat dim heavy enough to do the same job alone would have to be about
     twice as dark, and would flatten the photographs.
     ------------------------------------------------------------------------ */

  /* layer one — the even dim, very slightly deeper at the foot */
  .apa-bleed > .apa-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
                rgba(9, 24, 41, .30),
                rgba(9, 24, 41, .40));
    pointer-events: none;
  }

  /* layer two — the pool under the copy. ::before is the copy column's first
     box, so it paints beneath .vc_column-inner without needing a z-index,
     and it sits above the photograph because .apa-copy is the higher sibling. */
  .apa-bleed > .apa-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 62% 58% at 50% 50%,
                rgba(9, 24, 41, .58) 0%,
                rgba(9, 24, 41, .34) 48%,
                rgba(9, 24, 41, 0)   80%);
    pointer-events: none;
  }

  /* !important is unavoidable here. Every iconbox ships its own <style> block
     in the page body, keyed by its generated id —
     `#thb-iconbox-….thb-iconbox .iconbox-content h5 { color:#333333 }` — and an
     ID selector cannot be out-specified by any number of classes. It names the
     spans directly too, so .apa-title and every .apa-line have to be listed;
     they are not just inheriting the paragraph's colour. */
  .apa-bleed .iconbox-content h5,
  .apa-bleed .iconbox-content p,
  .apa-bleed .iconbox-content span {
    color: #fff !important;
  }

  /* text-shadow inherits, so the spans pick this up and each glyph still
     paints exactly one shadow */
  .apa-bleed .iconbox-content h5,
  .apa-bleed .iconbox-content p {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55),
                 0 0 18px rgba(0, 0, 0, .38);
  }

  /* the icons keep their brand colours and take a dark shadow instead of the
     light one — they are pale line art and read better on the dimmed picture */
  .apa-bleed .thb-iconbox .iconbox-image img {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5))
            drop-shadow(0 0 12px rgba(0, 0, 0, .32));
  }
}

/* --------------------------------------------------------------------------
   2 · The call to action
   --------------------------------------------------------------------------
   Replaces the four full-width WPBakery buttons, which arrived in four
   different colours — yellow on Well Checks, blue on Sick Visits, green on
   Immunizations, red on Prenatal. One red pill for all four instead: the
   shape echoes the COVID-19 / APPOINTMENTS / RESOURCES buttons in the red
   band above, so the whole stack reads as one system rather than four.

   The `!important` on the paint is not decoration: the page carries an inline
   customizer block that hard-codes every one of those four —
   `.buttonone a { background-color:#4987c6 !important }`,
   `.buttontwo a { background-color:#ffc432 !important }`,
   `.buttonthree a { #bbdd8c }`, `.buttonfour a { #d24641 }`, and a shared
   `#98d8e2` hover — and nothing without it can win. What wins is specificity
   between two !important declarations: `.vc_btn3.apa-cta` is two classes,
   `.buttonthree a` is one class and one element, so the pill takes it.

   Only the anchors that carry `.apa-cta` change. The second `.buttonone` on
   the page — ALL PHYSICIANS, further down — keeps its customizer blue.
   -------------------------------------------------------------------------- */

/* The container the theme wraps the button in is narrower than the button now
   is — 288px against 297 and 342 — so its `text-align: center` had nothing to
   work with: an inline box that does not fit starts at its left edge and
   overflows to the right, which left the two buttons off centre by 4px and
   27px and broke the symmetry of the band. Centring the container as a flex
   line splits the overflow evenly instead, and both buttons still sit well
   inside the copy block. */
.apa-split-row .vc_btn3-container {
  display: flex;
  justify-content: center;
}

/* and the button must not be squeezed to fit that container. As a flex item it
   shrinks by default, which crushed the wider label down to the container's
   288px — and since .apa-cta clips its overflow, the text was being cut off
   rather than merely cramped. */
.apa-split-row .vc_btn3-container > .apa-cta { flex-shrink: 0; }

/* Transitions off while the script measures. It resets a value, reads the
   layout back, and publishes the result — but transform here is transitioned,
   so the reset was still animating (and in a background tab, frozen outright)
   when it was read, and the measurement came back short. */
.apa-measuring,
.apa-measuring *,
.apa-measuring *::before,
.apa-measuring *::after {
  transition: none !important;
}

.vc_btn3.apa-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  width: auto;
  margin: 0;
  padding: 17px 38px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;

  background-color: var(--apa-red) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  box-shadow: 0 6px 18px rgba(var(--apa-red-rgb), .28);
  transition: background-color .3s ease,
              transform        .3s var(--apa-ease),
              box-shadow       .3s var(--apa-ease);
}

/* the sheen that sweeps across on hover */
.vc_btn3.apa-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
              transparent 0%,
              rgba(255, 255, 255, .24) 45%,
              transparent 72%);
  transform: translateX(-120%);
  transition: transform .7s var(--apa-ease);
  pointer-events: none;
}

.vc_btn3.apa-cta .vc_btn3-icon {
  position: relative;
  font-size: 1.05em;
  transition: transform .3s var(--apa-ease);
}

.vc_btn3.apa-cta:hover,
.vc_btn3.apa-cta:focus {
  background-color: var(--apa-red-deep) !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(var(--apa-red-rgb), .38);
}

.vc_btn3.apa-cta:hover::before { transform: translateX(120%); }

.vc_btn3.apa-cta:hover .vc_btn3-icon { transform: translateX(5px); }

.vc_btn3.apa-cta:active {
  transform: translateY(-1px) scale(.99);
  box-shadow: 0 4px 12px rgba(var(--apa-red-rgb), .30);
}

.vc_btn3.apa-cta:focus-visible {
  outline: 3px solid var(--apa-red-deep);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   2b · The checkerboard behind the contact section
   --------------------------------------------------------------------------
   The blue checkerboard used to be its own band, carrying the Psalm 127:3
   quote and sitting between Well Checks/Sick Visits and Immunizations/
   Prenatal — which split the four service panels into two unrelated halves.
   That row is gone, so the four now read as one block, and the pattern moves
   here, behind the whole "We're ready, let's talk" section and its map.

   Tiled, not covered. The old band stretched the image to fill it, so the
   squares grew and shrank with the viewport; here the tile is pinned to the
   size it rendered at in that band — 355px tall, the width following from the
   source's 2560x523 — and simply repeats to fill however tall the section is.
   The row's own `background-color: #4987c6 !important` stays underneath as the
   ground the pattern sits on, which is why only the image is set here.
   -------------------------------------------------------------------------- */

.vc_custom_1603465321532 {
  background-image: url('/wp-content/uploads/2020/10/APA_CheckerboardBlue_Pattern-scaled.jpg?id=529') !important;
  background-repeat: repeat !important;
  background-size: auto 355px !important;
  background-position: center top !important;
}

/* The form was built for a flat blue panel: the fields are white at 5% over a
   15% white hairline, with #c1c1c1 text. On the checkerboard that is not a
   faint field, it is no field at all — the pattern reads straight through the
   box and the typed answer is light grey on top of it.

   So the fields become what the request-type select already was: solid white,
   near-black text. That also makes them the only quiet rectangles in a busy
   section, which is where the eye should go anyway. The labels above them stay
   white — they sit on the pattern, not in a box. */
.vc_custom_1603465321532 input[type="text"],
.vc_custom_1603465321532 input[type="email"],
.vc_custom_1603465321532 input[type="tel"],
.vc_custom_1603465321532 input[type="number"],
.vc_custom_1603465321532 input[type="date"],
.vc_custom_1603465321532 select,
.vc_custom_1603465321532 textarea {
  background-color: #fff !important;
  color: #14213a !important;
  border: 1px solid rgba(9, 24, 41, .16) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(9, 24, 41, .14) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.vc_custom_1603465321532 input::placeholder,
.vc_custom_1603465321532 textarea::placeholder {
  color: #6b7789 !important;
  opacity: 1;
}

.vc_custom_1603465321532 input[type="text"]:focus,
.vc_custom_1603465321532 input[type="email"]:focus,
.vc_custom_1603465321532 input[type="tel"]:focus,
.vc_custom_1603465321532 select:focus,
.vc_custom_1603465321532 textarea:focus {
  border-color: #d5344b !important;
  box-shadow: 0 0 0 3px rgba(213, 52, 75, .28),
              0 2px 6px rgba(9, 24, 41, .14) !important;
  outline: none !important;
}

/* the map is the only square-cornered thing left in a section of 6px fields
   and pill buttons. Radius on the iframe as well as the wrapper: Chrome will
   clip an iframe to a parent's rounded corners, but not reliably, and giving
   the frame its own radius costs nothing. */
.vc_custom_1603465321532 .wpb_map_wraper {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(9, 24, 41, .22);
  isolation: isolate;
}

.vc_custom_1603465321532 .wpb_map_wraper iframe {
  display: block;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   2c · The drifting checkerboard behind the band buttons
   --------------------------------------------------------------------------
   The pink checkerboard behind COVID-19 / APPOINTMENTS / RESOURCES scrolls
   sideways for ever instead of sitting still.

   It lives on WPBakery's `.vc_parallax-inner`, which skrollr already moves
   vertically as you scroll — so the drift is done with background-position,
   which skrollr never touches, rather than with a transform that would fight
   it. `background-size: auto 100%` pins the tile to the inner's height, which
   is what `cover` was already resolving to (the artwork is proportionally
   wider than the band), so the squares stay exactly the size they were.

   The loop is seamless because it travels exactly one tile width and starts
   again — --apa-tile, published by the script from the artwork's real
   dimensions and re-published on resize. 80s per tile is about 26px a second:
   visible if you look, invisible if you are reading the buttons.
   -------------------------------------------------------------------------- */

/* The theme fades each doctor in when the row scrolls into view. That made
   sense for a static grid; it does not survive this change. Cards now arrive
   from the edge rather than by being scrolled to, and slick's clones are
   rebuilt when the carousel is reconfigured — after that reveal has already
   run — so a clone can sit at opacity 0 for ever and a doctor simply never
   appears. The marquee shows all of them, always. */
.thb-team-row .thb-carousel .thb-team-member.animation {
  opacity: 1 !important;
  transform: none !important;
}

@keyframes apa-pattern-drift {
  from { background-position-x: 0px; }
  to   { background-position-x: calc(-1 * var(--apa-tile, 2106px)); }
}

.apa-drift {
  background-size: auto 100% !important;
  background-repeat: repeat !important;
  animation: apa-pattern-drift 80s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .apa-drift { animation: none; }
}

/* --------------------------------------------------------------------------
   3 · The band buttons
   --------------------------------------------------------------------------
   COVID-19 / APPOINTMENTS / RESOURCES, the three white pills on the pink
   checkerboard — now the first thing under the hero, since the dated
   "Sunday Hours" banner that used to sit between them was removed.

   They follow the cursor. redesign.js writes five custom properties on
   pointermove: --apa-tx / --apa-ty (how far the pill leans), --apa-lx (how
   far the label leads it) and --apa-mx / --apa-my (where the glow centres).
   It writes finished pixel values, so the distances are defined once, in the
   script. Only `transform` and `opacity` read them, so tracking the cursor
   never asks the layout engine a question.

   Two things have to be taken off the theme first. Its 3D button presses on
   hover with `top: 3px`, which would stack with the transform press into a
   drop of eight; and it turns the label grey (#5e5e5e) on hover, throwing
   away the blue. Both rules run five classes deep
   (`.vc_btn3.vc_btn3-color-white.vc_btn3-style-3d.vc_btn3-size-lg:hover`),
   which is why the overrides below are !important rather than out-specified.
   -------------------------------------------------------------------------- */

.apa-band-cta {
  position: relative;
  top: 0 !important;              /* the theme's press, disarmed */
  overflow: hidden;               /* clips the glow to the pill */

  transform: translate3d(var(--apa-tx, 0px),
                         calc(var(--apa-ty, 0px) + var(--apa-press, 0px)),
                         0);
  transition: transform  .28s var(--apa-ease),
              box-shadow .28s var(--apa-ease),
              color      .28s ease;
  will-change: transform;
}

/* the glow that tracks the cursor across the face of the pill.
   Blue, not the section's red: it sits under blue type, and a red wash
   behind #4987c6 goes muddy long before it gets strong enough to see. */
.apa-band-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 150px at var(--apa-mx, 50%) var(--apa-my, 50%),
              rgba(73, 135, 198, .26),
              rgba(73, 135, 198, 0) 70%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.apa-band-cta:hover::before,
.apa-band-cta:focus-visible::before { opacity: 1; }

/* above the glow, and travelling a little further than the pill it rides on
   — the nearer thing moves more, which is what sells the depth */
.apa-band-cta .apa-band-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  transform: translate3d(var(--apa-lx, 0px), var(--apa-ly, 0px), 0);
  transition: transform .38s var(--apa-ease);
}

.apa-band-cta:hover,
.apa-band-cta:focus-visible {
  color: #2f6bae !important;      /* stays blue; the theme wanted grey */
  box-shadow: 0 7px 0 #dfe3ea,
              0 16px 28px rgba(24, 46, 74, .28) !important;
}

/* pressed: the pill drops into its own shadow */
.apa-band-cta:active {
  --apa-press: 5px;
  box-shadow: 0 2px 0 #dfe3ea,
              0 6px 12px rgba(24, 46, 74, .22) !important;
}

.apa-band-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4 · Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .apa-split-row > .apa-copy > .apa-ground,
  .apa-split-row > .apa-copy > .vc_column-inner,
  .apa-split-row .thb-iconbox .iconbox-image,
  .apa-split-row .apa-title,
  .apa-split-row .apa-line-in,
  .vc_btn3.apa-cta,
  .vc_btn3.apa-cta .vc_btn3-icon {
    transition: none;
  }

  /* the copy is always there, the cluster never travels */
  .apa-split-row .apa-line-in {
    opacity: 1;
    transform: none;
  }

  .apa-split-row .thb-iconbox .iconbox-image,
  .apa-split-row .apa-title {
    transform: none;
  }

  .vc_btn3.apa-cta::before { display: none; }

  .vc_btn3.apa-cta:hover,
  .vc_btn3.apa-cta:active { transform: none; }

  /* the pair holds its 50/50 — the resize is the whole interaction, so with
     motion off there is nothing left for it to do. The bands are already a
     fixed 50% each for everyone now, so only the horizontal pair needs
     pinning here. */
  .apa-duo > .apa-panel,
  .apa-duo:hover > .apa-panel,
  .apa-duo > .apa-panel:hover,
  .apa-duo:focus-within > .apa-panel,
  .apa-duo > .apa-panel:focus-within {
    flex-basis: 50%;
    transition: none;
  }

  /* redesign.js already declines to wire the cursor tracking here, so
     nothing ever writes --apa-tx. This is the belt to that braces: the
     pills keep the deeper shadow and the blue label, and hold still. */
  .apa-band-cta,
  .apa-band-cta .apa-band-label {
    transform: none;
    transition: none;
  }

  .apa-band-cta::before { display: none; }

  .apa-band-cta:active { --apa-press: 0px; }
}

/* --------------------------------------------------------------------------
   5 · The hero fits the first screen
   --------------------------------------------------------------------------
   The captured row is sized in viewport units — 16vh of padding above, 21vh
   below, around a 408px logo — so the taller the screen, the further down the
   call to action goes. It measured 885px from the top of the document at a
   778px viewport: below the fold on every normal laptop, and worse on a big
   monitor, which is the opposite of what viewport units are usually reached
   for.

   Capping the logo in vh with a px ceiling is what actually fixes it, because
   the logo is the tall part. With these numbers the button's bottom lands at
   roughly 585px on a 740px viewport and 635px on anything taller — above the
   fold at every height, and it stops growing once the screen is big enough
   that it does not need to.
   -------------------------------------------------------------------------- */

.apa-hero {
  /* Fill the screen the header leaves. 153px is the `.header-spacer` the theme
     puts above this row, so this is exactly the rest of the first viewport —
     the video background fills it, and the cluster is centred in it rather
     than sitting against the top. */
  min-height: calc(100vh - 153px);
  display: flex;
  align-items: center;
  padding-top: clamp(20px, 3vh, 48px) !important;
  padding-bottom: clamp(20px, 3vh, 48px) !important;
}

/* the row's single column has to take the width back once the row is a flex
   container, or it shrinks to its content */
.apa-hero > .wpb_column {
  flex: 1 1 auto;
  width: 100%;
}

/* The logo is the tall part, and capping it is what keeps the call to action
   above the fold: at these numbers the cluster is about 500px against the
   585px the shortest normal laptop leaves, so it fits without the hero having
   to be short. */
.apa-hero .vc_single_image-img {
  max-height: min(34vh, 340px);
  width: auto;
}

/* the line was sized for a row that was half this tall */
.apa-hero .thb-slidetype h3 {
  font-size: clamp(21px, 2.5vw, 36px);
  line-height: 1.24;
}