/*
Theme Name: Hometown Health Centers
Theme URI: https://hometownhealthcenters.org
Author: Hometown Health Centers
Author URI: https://hometownhealthcenters.org
Description: Block theme for Hometown Health Centers — a community health center serving Schenectady, Amsterdam, and surrounding NY communities since 1972.
Version: 0.2.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hometown-health-centers
*/

/* ============================================================
   Foundations
   ============================================================ */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wp-site-blocks > * + * {
  margin-block-start: 0;
}

/* ============================================================
   Alignfull breakout from <wp:post-content>
   ============================================================

   WordPress's `is-layout-constrained` only lets `.alignfull` extend
   to its immediate parent's content edge. When `<wp:post-content>`
   is nested inside another constrained group (page.html,
   page-prose.html, page-section-hub.html all do this so they can
   carry padding-bottom that keeps a CTA band from touching the
   footer), an alignfull section inside post-content stops at the
   post-content's max-width — not the viewport.

   This is the canonical full-bleed technique: the alignfull child's
   left edge is shifted by `(viewport - parent) / 2` and its width
   is forced to 100vw. Centered-parent assumption holds because
   `.wp-block-post-content` is auto-margin-centered by core's
   constrained layout. The `min(100%, 100vw)` form prevents a
   horizontal scrollbar when the viewport has a vertical scrollbar
   that would otherwise make 100vw exceed 100%. */
.wp-block-post-content > .alignfull {
  width: 100vw;
  max-width: 100vw;
  /* !important is required because WP core's
     `.is-layout-constrained > .alignfull` rule sets the margins
     to auto/0 with high precedence; without it, our negative
     margin doesn't apply and the element overflows to the right. */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Avoid horizontal scrollbar when 100vw exceeds the document width
   on browsers that include the scrollbar in viewport units. */
html {
  overflow-x: hidden;
}

/* Visible gap between a colored last-of-template band and the blue
   footer. The page-* templates already handle this via their post-
   content wrapper; this rule covers the single-* and archive-*
   templates that put their CTA bands directly inside <main>. Without
   this, primary/deep bottom bands visually merge into the footer. */
main.wp-block-group:has(> .has-primary-background-color:last-child),
main.wp-block-group:has(> .has-deep-background-color:last-child) {
  padding-bottom: var(--wp--preset--spacing--40);
}

/* ============================================================
   Accessibility — keyboard focus visibility (WCAG 2.4.7)
   ============================================================ */

/* Baseline keyboard-focus ring. Mouse focus keeps the
   designed look (no ring); keyboard focus always shows.
   2px primary ring with 2px offset clears 3:1 against
   every band background in this theme.

   Selectors are spelled out (a, button, input, etc.) plus
   common WP core classes so this rule's specificity (0,1,1)
   beats core's `.wp-element-button:focus { outline: ... }`
   on the button block. Otherwise the bare `:focus-visible`
   selector loses to core and the buttons render no ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-search__input:focus-visible,
.wp-block-search__button:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* On primary/deep backgrounds, switch the ring to white
   so it has 4.7:1+ contrast against the background.

   .hero-band is included here because it sets its blue
   background via CSS (not via a `.has-primary-background-color`
   class), so the class-keyed selectors above wouldn't catch
   buttons inside it. Without this, the hero's filled and
   outline buttons render their focus ring in primary blue
   on a primary-blue band — invisible. */
.has-primary-background-color a:focus-visible,
.has-primary-background-color button:focus-visible,
.has-primary-background-color .wp-element-button:focus-visible,
.has-primary-background-color .wp-block-button__link:focus-visible,
.has-deep-background-color a:focus-visible,
.has-deep-background-color button:focus-visible,
.has-deep-background-color .wp-element-button:focus-visible,
.has-deep-background-color .wp-block-button__link:focus-visible,
.hero-band a:focus-visible,
.hero-band button:focus-visible,
.hero-band .wp-element-button:focus-visible,
.hero-band .wp-block-button__link:focus-visible,
.utility-bar a:focus-visible,
.utility-bar button:focus-visible,
.utility-bar input:focus-visible,
.main-nav-band a:focus-visible,
.main-nav-band button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.site-footer .wp-element-button:focus-visible {
  outline-color: var(--wp--preset--color--light);
}

/* Stretched-link cards — one focusable link per card, full card
   is the click target. The card's title link (or for quick-tile,
   the .quick-tile__cta link) carries a ::before pseudo-element
   that overlays the whole card. Card itself is position:relative.
   :has(a:focus-visible) puts the focus ring around the card.

   Trade-off: text inside the card is harder to select (drag-to-
   highlight will follow the link). Acceptable on these cards
   since they don't carry copy a user typically selects.

   Image is no longer a separate link — set isLink:false on
   wp:post-featured-image in the relevant patterns / inline copies. */
.service-card,
.location-card,
.provider-card,
.quick-tile {
  position: relative;
}

/* Stretched click target. The pseudo-element extends the link
   to cover the entire card. z-index keeps it below any nested
   interactive content (none today, but defensive). */
.service-card .wp-block-post-title a::before,
.location-card .wp-block-post-title a::before,
.provider-card .wp-block-post-title a::before,
.quick-tile .quick-tile__cta a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Move the card's focus ring from the title to the whole card. */
.service-card:has(a:focus-visible),
.location-card:has(a:focus-visible),
.provider-card:has(a:focus-visible),
.quick-tile:has(a:focus-visible) {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 4px;
}

/* On primary/deep backgrounds, switch the card's outer ring to white. */
.has-primary-background-color .service-card:has(a:focus-visible),
.has-deep-background-color .service-card:has(a:focus-visible),
.has-primary-background-color .location-card:has(a:focus-visible),
.has-deep-background-color .location-card:has(a:focus-visible),
.has-primary-background-color .provider-card:has(a:focus-visible),
.has-deep-background-color .provider-card:has(a:focus-visible) {
  outline-color: var(--wp--preset--color--light);
}

/* Suppress the inner link's own ring once the card carries it. */
.service-card .wp-block-post-title a:focus-visible,
.location-card .wp-block-post-title a:focus-visible,
.provider-card .wp-block-post-title a:focus-visible,
.quick-tile .quick-tile__cta a:focus-visible {
  outline: none;
}

/* Skip-link (WCAG 2.4.1 — Bypass Blocks). Hidden visually
   but reachable by Tab; on focus, slides into view at the
   top-left of the page as a high-contrast pill. */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--light);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  transform: translateY(-100%);
  transition: transform 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  /* No outline ring here — the pill itself appearing IS the focus
     indicator (high-contrast white-on-primary slid into view from
     off-screen). Adding outline-offset would also create a visible
     gap to page background at the pill's bottom edge. */
  outline: none;
}

/* ============================================================
   Header — utility bar + centered logo + nav
   ============================================================ */

.site-header-shell {
  position: relative;
  z-index: 50;
  border-bottom: 3px solid var(--wp--preset--color--accent);
}

/* Slim dark utility bar */
.utility-bar {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.utility-bar a {
  color: var(--wp--preset--color--light);
  text-decoration: none;
  transition: color 0.15s ease;
}

.utility-bar a:hover {
  color: var(--wp--preset--color--secondary);
  text-decoration: underline;
}

.utility-bar__services {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.utility-bar__right {
  gap: 1.25rem !important;
}

/* Language switcher — Polylang's polylang/language-switcher block emits
   <ul><li class="lang-item current-lang"><a>en</a></li><li class="lang-item"><a>es</a></li></ul>.
   The ul markup needs list-style/margin reset; current-lang gets the active treatment. */
.utility-bar__lang {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
}

.utility-bar__lang li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.utility-bar__lang li + li::before {
  content: "|";
  margin-right: 0.25rem;
  opacity: 0.45;
}

.utility-bar__lang a {
  display: inline-block;
  padding: 0 0.15rem;
  opacity: 0.65;
  color: inherit;
}

.utility-bar__lang .current-lang a,
.utility-bar__lang a.is-active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Inactive-language links use opacity: 0.65 above. The opacity also dims
   the keyboard focus outline (the outline is painted with the element's
   alpha), so the ring on the inactive language renders dim instead of
   bright white. Lift opacity to 1 on focus so both the text and the ring
   render at full white. */
.utility-bar__lang a:focus-visible {
  opacity: 1;
}

.utility-bar__portal a,
.utility-bar__phone a {
  display: inline-block;
  /* All-caps text has no descenders, so it sits high in its line box. With
     line-height:1 collapsing the box, the extra top padding (vs bottom)
     pushes the label down to optical centre; total vertical padding (1rem)
     keeps the ~30px height that matches the search box. */
  line-height: 1;
  padding: 0.55rem 0.85rem 0.45rem;
  border-radius: 2px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background-color 0.15s ease;
}

.utility-bar__portal a {
  background: var(--wp--preset--color--primary);
  border: 1.5px solid var(--wp--preset--color--primary);
}

/* The pill `:hover` rules below intentionally include `p.` in the
   selector. Without it the rule has the same specificity (0,3,1) as
   the generic `.has-deep-background-color a:not(.wp-block-button__link):hover`
   below, and the generic rule wins by source order — re-painting the
   pill text light blue and making the portal pill (light-blue bg) and
   phone pill (white bg) effectively invisible. Adding `p` bumps the
   element count to 2, beating the generic at (0,3,2) > (0,3,1). */
.utility-bar p.utility-bar__portal a:hover {
  background: var(--wp--preset--color--light);
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.utility-bar__phone a {
  background: var(--wp--preset--color--accent);
  border: 1.5px solid var(--wp--preset--color--accent);
}

.utility-bar p.utility-bar__phone a:hover {
  background: var(--wp--preset--color--light);
  color: var(--wp--preset--color--accent);
  text-decoration: none;
}

/* White centered logo band */
.logo-band__image img {
  max-height: 280px;
  width: auto;
  height: auto;
}

.logo-band__image,
.logo-band__image a {
  line-height: 0;
}

.logo-band__image a {
  display: inline-block;
}

/* Blue main nav band */
.main-nav-band a,
.main-nav-band .wp-block-navigation-item__content {
  color: var(--wp--preset--color--light) !important;
  text-decoration: none;
}

.main-nav-band .wp-block-navigation {
  width: 100%;
}

.main-nav-band .wp-block-navigation__container {
  gap: 0;
}

.main-nav-band .wp-block-navigation-item {
  border-right: 1px solid rgba(255,255,255,0.12);
}

.main-nav-band .wp-block-navigation-item:first-child {
  border-left: 1px solid rgba(255,255,255,0.12);
}

.main-nav-band .wp-block-navigation-item__content {
  padding: 0.85rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.15s ease;
}

.main-nav-band .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.main-nav-band .current-menu-item .wp-block-navigation-item__content {
  background: var(--wp--preset--color--deep);
}

/* ============================================================
   Hero
   ============================================================ */

.hero-band {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--light);
}

/* Hero band background is set above (.hero-band { background: primary;
   color: light }), so all hero text is light by design. The eyebrow
   needs an explicit light color too — its base font-size is small and
   it would otherwise inherit secondary blue from a legacy rule. White
   on primary blue clears 10.5:1 (well past 4.5:1 / WCAG AA Normal Text). */
.hero-band .hero-headline,
.hero-band .hero-supporting,
.hero-band .hero-eyebrow {
  color: var(--wp--preset--color--light);
}

.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--light);
}

.hero-headline {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
}

.hero-supporting {
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 56ch;
  opacity: 0.92;
}

.hero-anchor {
  margin: 0;
  border: 4px solid var(--wp--preset--color--secondary);
  background: var(--wp--preset--color--deep);
  overflow: hidden;
}

.hero-anchor img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   Quick action cards
   ============================================================ */

.quick-tiles .wp-block-column {
  background: var(--wp--preset--color--light);
  border: 1px solid var(--wp--preset--color--border);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.quick-tiles .wp-block-column:hover {
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 4px 16px -8px rgba(27, 63, 117, 0.25);
}

.quick-tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.25rem;
  height: 100%;
}

.quick-tile h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  color: var(--wp--preset--color--primary);
}

.quick-tile p {
  font-size: 0.95rem;
  color: var(--wp--preset--color--ink);
  margin: 0;
}

.quick-tile__cta {
  margin-top: auto;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quick-tile__cta a {
  color: var(--wp--preset--color--accent);
  text-decoration: none;
}

.quick-tile__cta a:hover {
  text-decoration: underline;
}

/* ============================================================
   Mission band
   ============================================================ */

.mission-band {
  background: var(--wp--preset--color--deep);
  color: var(--wp--preset--color--light);
}

.mission-band__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--secondary);
}

.mission-band__headline {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--wp--preset--color--light);
  max-width: 64ch;
  margin-inline: auto;
}

.mission-band__headline strong {
  font-weight: 700;
  color: var(--wp--preset--color--secondary);
}

/* ============================================================
   Section eyebrows / titles
   ============================================================ */

.section-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}

/* Eyebrow on dark band — primary or deep background.
   White at full opacity meets 4.5:1 with margin; existing
   letter-spacing + uppercase carries the visual hierarchy.
   (.hero-eyebrow handled separately by the .hero-band rules.) */
.has-primary-background-color .section-eyebrow,
.has-deep-background-color .section-eyebrow,
.has-primary-background-color .page-title-band__eyebrow,
.has-deep-background-color .page-title-band__eyebrow {
  color: var(--wp--preset--color--light);
}

.section-title {
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  color: var(--wp--preset--color--primary);
  max-width: 32ch;
}

.section-lead {
  font-size: 1rem;
  color: var(--wp--preset--color--ink);
  max-width: 60ch;
  line-height: 1.55;
}

.section-lead--wide {
  max-width: none;
}

/* Match the body paragraph in the Mission band to the constrained-layout timeline:
   same 720px content-size cap and same auto-centering within the right column so
   they share the same left edge and width. */
.section-lead--match-timeline {
  max-width: var(--wp--style--global--content-size, 720px);
  width: 100%;
  margin-inline: auto;
}

/* ============================================================
   Service cards
   ============================================================ */

.service-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.25rem;
  background: var(--wp--preset--color--light);
  border: 1px solid var(--wp--preset--color--border);
  border-top: 3px solid var(--wp--preset--color--secondary);
  height: 100%;
  transition: border-color 0.15s ease;
}

.service-card:hover {
  border-top-color: var(--wp--preset--color--accent);
}

.service-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  margin: 0;
}

.service-card p {
  font-size: 0.9375rem;
  color: var(--wp--preset--color--ink);
  margin: 0;
}

/* ============================================================
   Single-location: hero band
   ============================================================ */

.location-hero__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

.location-hero__details {
  padding-block: 0.5rem;
}

.location-hero__address {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--wp--preset--color--primary);
}

.location-hero__phone {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 700;
  color: var(--wp--preset--color--accent);
  line-height: 1;
  margin: 0 0 var(--wp--preset--spacing--30);
}

.location-hero__phone a {
  color: inherit;
  text-decoration: none;
}

.location-hero__phone a:hover {
  text-decoration: underline;
}

/* Single-location: hours band */
.location-hours-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.25rem;
  row-gap: 0.4rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--wp--preset--color--ink);
}

.location-hours-list dt {
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}

.location-hours-list dd {
  margin: 0;
}

.location-hours-list dd.is-closed {
  color: var(--wp--preset--color--muted);
}

.location-hours-empty {
  color: var(--wp--preset--color--muted);
  font-style: italic;
  margin: 0;
}

/* ============================================================
   Locations
   ============================================================ */

.location-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0;
  background: var(--wp--preset--color--light);
  border: 1px solid var(--wp--preset--color--border);
  height: 100%;
  overflow: hidden;
  /* Smooth the hover state below — keep it short so the cue feels
     responsive, not animated. */
  transition: border-color 120ms ease-out;
}

/* Hover affordance — the card is a single clickable region (the title
   <a> is stretched over the whole card via the ::before in §"Stretched
   click target"). The cursor flips to pointer on hover but that's not
   a strong enough cue on its own; bump the border to --primary and
   underline the title so the card visibly responds. Mirrors the
   established pattern on .quick-tile:hover and .service-card:hover. */
.location-card:hover {
  border-color: var(--wp--preset--color--primary);
}
.location-card:hover h3 a {
  text-decoration: underline;
}

/* Provider card — the card itself has no outer border (the visual
   frame is the inner .provider-card__photo container). On hover, both
   the photo border and the title link get the affordance; the
   transition is on the photo's border-color so the colour change
   feels intentional, not flashy. */
.provider-card__photo {
  transition: border-color 120ms ease-out;
}
.provider-card:hover .provider-card__photo {
  border-color: var(--wp--preset--color--primary);
}
.provider-card:hover .provider-card__name a {
  text-decoration: underline;
}

.location-card__image {
  margin: 0 0 1rem;
  overflow: hidden;
}

.location-card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

.location-card > h3,
.location-card > p {
  padding-inline: 1.25rem;
}

.location-card > p:last-child {
  padding-bottom: 1.25rem;
}

.location-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  margin: 0 0 0.25rem;
}

.location-card p {
  font-size: 0.9375rem;
  color: var(--wp--preset--color--ink);
  margin: 0;
  line-height: 1.5;
}

/* Single-location: providers band */
.location-providers-band {
  background: var(--wp--preset--color--surface);
}

.location-providers-grid {
  gap: var(--wp--preset--spacing--40) !important;
}

/* Single-location: parking notes (slot inside visit-info card) */
.location-parking-notes {
  margin: var(--wp--preset--spacing--30) 0 0;
  font-size: 0.9rem;
  color: var(--wp--preset--color--muted);
  font-style: italic;
  line-height: 1.5;
}

/* Single-location: map band */
.location-map-band {
  background: var(--wp--preset--color--surface);
}

.location-map {
  width: 100%;
  display: block;
}

.location-map iframe {
  display: block;
  width: 100%;
}

/* Single-location: gallery band */
.location-gallery-band:has(.location-gallery:empty),
.location-gallery-band:not(:has(.location-gallery)) {
  display: none;
}

.location-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--wp--preset--spacing--20);
}

.location-gallery__item {
  margin: 0;
}

.location-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

/* ============================================================
   Provider preview
   ============================================================ */

.provider-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: center;
}

.provider-card__photo {
  aspect-ratio: 4 / 5;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  margin: 0 auto;
  width: 100%;
  max-width: 220px;
  overflow: hidden;
}

.provider-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.provider-archive__section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--wp--preset--color--border);
}

/* Photo-less providers in archive cards: render a silhouette placeholder in
   place of the figure. It must match the rendered photo box exactly — the
   real <figure> photos fill the full grid-column width (WordPress's
   constrained-layout rule overrides .provider-card__photo's max-width for
   them), so the placeholder fills the column too: width:100%, no max-width,
   no auto-centering. */
.provider-card:not(:has(img))::before {
  content: '';
  display: block;
  aspect-ratio: 4 / 5;
  width: 100%;
  /* match the figure's margin-bottom so the name sits at the same offset */
  margin-bottom: var(--wp--preset--spacing--10);
  background:
    center/40% no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C8CDD3'><path d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/></svg>"),
    var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
}

.provider-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  margin: 0.5rem 0 0;
}

.provider-card__role {
  font-size: 0.875rem;
  color: var(--wp--preset--color--muted);
  margin: 0;
}

/* ============================================================
   Single-provider: hero + body
   ============================================================ */

/* Remove default link styling on post-terms eyebrow (linked taxonomy term inside title band) */
.page-title-band .wp-block-post-terms a {
  color: inherit;
  text-decoration: none;
}

.page-title-band .wp-block-post-terms a:hover {
  text-decoration: underline;
}


.provider-hero__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
}

/* Photo-less providers: column stays the same footprint with a subtle silhouette placeholder */
.provider-hero__photo-col:not(:has(img)) {
  aspect-ratio: 4 / 5;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  position: relative;
}

.provider-hero__photo-col:not(:has(img))::after {
  content: '';
  position: absolute;
  inset: 0;
  background: center/40% no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C8CDD3'><path d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/></svg>");
  opacity: 0.7;
}

.provider-hero__accepting {
  display: inline-block;
  margin: 0 0 var(--wp--preset--spacing--30);
}

.provider-body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--wp--preset--color--ink);
}

.provider-body p:empty {
  display: none;
}


/* ============================================================
   Trust band
   ============================================================ */

.trust-band {
  background: var(--wp--preset--color--deep);
  color: var(--wp--preset--color--light);
}

.trust-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
}

/* Big number is the first <p> in each .trust-stat (content comes from the
   Site Strings binding, so there's no <strong> wrapper at render time — the
   <strong> selector is kept as a fallback for the unbound editor markup). */
.trust-stat > p:first-child,
.trust-stat strong {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--wp--preset--color--secondary);
  line-height: 1;
}

.trust-stat p:nth-child(2),
.trust-stat span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--light);
}

.site-footer a {
  color: var(--wp--preset--color--light);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer a:hover {
  color: var(--wp--preset--color--secondary);
  text-decoration: underline;
}

/* Filled buttons in the footer follow the universal invert rule (white bg
   + accent-green text), but the `.site-footer a:hover` rule above has
   higher specificity than the global button-hover rule and would repaint
   the text secondary blue. Re-assert accent-green and suppress the
   inline-link underline so the button reads as a button, not a link. */
.site-footer .wp-block-button__link:hover {
  color: var(--wp--preset--color--accent);
  text-decoration: none;
}

.site-footer h4 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--secondary);
  margin: 0 0 0.75rem;
}

.site-footer .wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.9375rem;
}

.site-footer .wp-block-social-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  gap: 0.4rem;
}

.site-footer .wp-block-social-links .wp-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.12);
  transition: background-color 0.15s ease;
}

.site-footer .wp-block-social-links .wp-social-link:hover {
  background-color: var(--wp--preset--color--accent);
}

.site-footer .wp-block-social-links .wp-social-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--wp--preset--color--light);
  text-decoration: none;
}

.site-footer .wp-block-social-links .wp-social-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.site-footer__mission {
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.9;
}

.footer-creditline {
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.8125rem;
  opacity: 0.7;
  text-align: center;
}

/* ============================================================
   Page sections (content pages)
   ============================================================ */

/* Headings on dark sections inherit the light text color */
.has-light-color .section-title,
.has-light-color .wp-block-heading,
.hero-band .section-title,
.hero-band .wp-block-heading,
.mission-band .section-title,
.mission-band .wp-block-heading,
.trust-band .section-title,
.trust-band .wp-block-heading {
  color: inherit;
}


/* ----------------------------------------------------------------------
 * Page-content classes (used in DB-stored Page records, not in templates)
 * ----------------------------------------------------------------------
 * The selectors in this file from .page-section onward through ~line 1810
 * (.printable-form section starts at 1847) target classes that live in the
 * post_content of Page records — not in the .html template files. A naive
 * grep across templates/ + parts/ + patterns/ + inc/ will miss these.
 *
 * Verified usage (DB query 2026-05-07):
 *   .page-section ..... 17 pages including about-hhc, patient-resources,
 *                       patient-portal, careers, contact, accessibility,
 *                       sitemap, privacy-policy, accepted-insurances,
 *                       compliance-governance, etc.
 *   .timeline ......... about-hhc
 *   .forms-list ....... forms (Forms and Documents page)
 *   .callout-box ...... compliance-governance, privacy-policy
 *   .info-card ........ patient-information (section hub)
 *   .feature-list ..... patient-portal
 *   .careers-quote .... careers
 *   .leader-card ...... senior-leadership
 *   .leadership-portrait--ceo ..... senior-leadership
 *
 * Do not delete these blocks without first checking page content via:
 *   studio wp post list --post_type=page --format=ids \
 *     | xargs -n1 studio wp post get --field=post_content | grep <class>
 * ---------------------------------------------------------------------- */
.page-section .section-eyebrow,
.page-section .section-title {
  text-align: inherit;
}

.page-section .section-title {
  max-width: none;
}

.page-section .section-title.has-text-align-center,
.page-section .section-eyebrow.has-text-align-center {
  text-align: center;
}

.page-section--intro .section-title,
.page-section--cta .section-title {
  margin-bottom: 1rem;
}

/* Timeline (used on About page) */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.timeline__entry {
  display: grid !important;
  grid-template-columns: 100px 1fr;
  gap: 1.5rem;
  align-items: baseline;
  /* `is-layout-constrained` from the block markup caps max-width at
     the theme's content-size (720px) and auto-centers it inside the
     parent column. We need the entry to fill the column so the year
     cell sits flush at the column's left edge — explicit overrides. */
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.timeline__entry:last-child {
  border-bottom: 0;
}

.timeline__year {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--wp--preset--color--accent);
  letter-spacing: 0.02em;
  /* `is-layout-constrained` parent's `> *` rule sets margin-inline:
     auto on direct children — that auto-centers the year text inside
     its 100px grid cell. Force the text to start at the cell's left
     edge so it aligns with the Mission paragraph above it. */
  margin: 0 !important;
  width: 100%;
  text-align: left;
}

.timeline__detail {
  font-size: 1rem;
  color: var(--wp--preset--color--ink);
  line-height: 1.55;
  margin: 0;
  width: 100%;
}

/* About HHC: align the Mission body paragraph with the timeline
   year column's left edge (so the body text starts where "1972",
   "1985", etc. start). The right wp-block-column has a small inner
   margin on flow content; setting `margin-left: 0` snaps the
   paragraph to the column's content edge — same x as the year cells.

   Scoped to About HHC's page-id-5 (EN) and page-id-215 (ES Polylang
   sibling). */
body.page-id-5 .section-lead,
body.page-id-215 .section-lead {
  margin-left: 0;
}

/* Forms list (Patient Resources) */
.forms-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
}

.forms-list li {
  background: var(--wp--preset--color--light);
  border: 1px solid var(--wp--preset--color--border);
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
}

.forms-list li a {
  color: var(--wp--preset--color--primary);
  font-weight: 600;
  text-decoration: none;
}

.forms-list li a:hover {
  color: var(--wp--preset--color--deep);
  text-decoration: underline;
}

/* Callout box (Good Faith Estimate, etc.) */
.callout-box {
  background: var(--wp--preset--color--surface);
  border-left: 4px solid var(--wp--preset--color--accent);
  padding: 1.25rem 1.5rem;
  margin-block: 1.5rem;
}

.callout-box h3 {
  margin-top: 0;
  font-size: 1rem;
  color: var(--wp--preset--color--primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.callout-box p {
  margin-bottom: 0;
  font-size: 0.9375rem;
}

/* ============================================================
   Page title section (page.html)
   ============================================================ */

.page-title-band {
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.page-title-band .wp-block-post-title {
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.2;
  color: var(--wp--preset--color--primary);
}

.page-title-band__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}

/* ============================================================
   Equal-height card columns
   ============================================================ */

.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}

.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ============================================================
   Button refinements
   ============================================================ */

.wp-block-button__link {
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Filled buttons (i.e., not outline) carry a border in their fill color
   so that on hover, when bg flips to white, the button still has a
   defined edge against light page backgrounds. The resting border is
   the same color as the fill, so it's visually invisible until hover. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  border: 1.5px solid var(--wp--preset--color--accent);
}

/* Single hover law: every button inverts. Filled buttons swap bg/text
   (white bg + fill-color text); outline buttons get bg filled with
   border color (handled by their own more-specific rules below). */
.wp-block-button__link:hover {
  background-color: var(--wp--preset--color--light);
  color: var(--wp--preset--color--accent);
}

/* Color-classed filled buttons. WordPress emits `.has-X-background-color`
   and `.has-X-color` rules with `!important`, so the generic hover above
   loses to them whenever a button has explicit color classes (set via
   the editor's color picker). The footer "Become a patient" is the
   canonical case. Match the !important to win, and dispatch text color
   by the button's fill class. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-accent-background-color:hover {
  background-color: var(--wp--preset--color--light) !important;
  color: var(--wp--preset--color--accent) !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-primary-background-color:hover {
  background-color: var(--wp--preset--color--light) !important;
  color: var(--wp--preset--color--primary) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--light);
  border: 2px solid var(--wp--preset--color--light);
}

/* Outline buttons on dark bands (hero / primary / deep): white text +
   white border, transparent fill. The `background: transparent` here is
   load-bearing — the `main ...` outline rule below sets a primary fill
   for the light-bg case (the All News / All Providers etc. flip), and
   without re-asserting transparent here, dark-bg outline buttons (the
   hero "Find a location") would inherit that primary fill and visually
   merge with the primary-blue band. */
.hero-band .wp-block-button.is-style-outline .wp-block-button__link,
.has-primary-background-color .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--light);
  border-color: var(--wp--preset--color--light);
}

/* Inline links inside dark-background bands need to be readable.
   Default theme link color is primary blue, which becomes invisible on
   `deep` (navy) or `primary` (blue) backgrounds. Force light instead. */
.has-deep-background-color a:not(.wp-block-button__link),
.has-primary-background-color a:not(.wp-block-button__link),
.hero-band a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--light);
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.has-deep-background-color a:not(.wp-block-button__link):hover,
.has-primary-background-color a:not(.wp-block-button__link):hover {
  color: var(--wp--preset--color--secondary);
  text-decoration-color: currentColor;
}

.has-deep-background-color .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--light);
  border-color: var(--wp--preset--color--light);
}

.hero-band .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-primary-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-deep-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--light);
  color: var(--wp--preset--color--primary);
}

/* Light-bg "outline" buttons render as FILLED navy (not transparent).
   On a white page, a transparent + thin-blue-border outline reads as
   a faint frame; promoting it to a filled navy button gives it the
   visual presence of a real CTA. The `.is-style-outline` class is kept
   in the markup as a Utility-secondary marker and to inherit the
   shared outline-style border treatment, but visually these are now
   filled buttons that invert on hover (matching every other filled
   button in the system). Dark-bg outline rules above explicitly
   re-assert `background: transparent` to prevent this fill from
   leaking into the hero "Find a location" button. */
main .wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--light);
  border-color: var(--wp--preset--color--primary);
}

main .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--light);
  color: var(--wp--preset--color--primary);
}

/* ============================================================
   Service detail (single-service.html)
   ============================================================ */

.service-hero {
  background: var(--wp--preset--color--surface);
}

.service-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
}

.service-hero__badge {
  display: inline-block;
  /* All-caps optical centering for Source Sans 3 at font-size 0.8rem,
     line-height:1: caps occupy 0–9.6px of the 12.8px line-box (cap top
     at ~1.15px, baseline at 9.6px), so cap optical center sits at
     ~5.4px while line-box geometric center is 6.4px — caps are ~1px
     above line-box center. Compensating asymmetry: padding-top −
     padding-bottom = ~2px (10px top, 8px bottom) lands caps on the
     pill's outer center. Earlier 0.65/0.45 (3.2px) overshot and read
     as slightly low; current 0.625/0.5 (2px) is the corrected value. */
  padding: 0.625rem 0.75rem 0.5rem;
  line-height: 1;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.service-hero__badge--accepting {
  /* Solid filled-green pill with white text. White on accent
     (#2E7D32) clears 4.77:1 — passes WCAG AA. A tinted background
     was tried earlier but the small 9.6pt text + axe's
     "weight 600 ≠ bold" interpretation kept it at 4.49:1, just
     short of 4.5:1. The solid fill also gives "Accepting" more
     visual emphasis as the positive-status badge. */
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--light);
  border: 1px solid var(--wp--preset--color--accent);
}

/* Provider detail status pill — same size and treatment as the
   service-hero pill so the visual rhythm is consistent across CPT
   detail pages. White text on solid color (accent #2E7D32 ≈ 4.77:1;
   red #C62828 ≈ 5.94:1) — both clear WCAG AA 4.5:1. */
.provider-status-badge {
  display: inline-block;
  /* All-caps optical centering — see `.service-hero__badge` above for
     the full Source Sans 3 cap/line-box derivation. ~2px padding-top
     vs padding-bottom asymmetry (10px / 8px) lands caps on the pill's
     outer center; earlier 3.2px asymmetry overshot. */
  padding: 0.625rem 0.75rem 0.5rem;
  line-height: 1;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wp--preset--color--light);
}
.provider-status-badge--accepting {
  background: var(--wp--preset--color--accent);
}
.provider-status-badge--not-accepting {
  background: #C62828;
}

.service-hero__badge--coming-soon {
  background: rgba(11, 64, 130, 0.08);
  color: var(--wp--preset--color--primary);
  border: 1px solid rgba(11, 64, 130, 0.25);
}

/* What we offer — bulleted procedures list */
.service-procedures {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem 1.5rem;
}

.service-procedures__item {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.5;
}

.service-procedures__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
}

.service-procedures__name {
  display: block;
  color: var(--wp--preset--color--primary);
  font-weight: 700;
}

.service-procedures__description {
  display: block;
  color: var(--wp--preset--color--ink);
  font-size: 0.95rem;
  margin-top: 0.15rem;
}

/* What to expect — 3-step journey */
.service-journey {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: journey;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.service-journey__step {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--wp--preset--color--light);
  border: 1px solid var(--wp--preset--color--border, #e5e7eb);
  border-radius: 6px;
}

.service-journey__index {
  position: absolute;
  top: -1rem;
  left: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--light);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}

.service-journey__title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}

.service-journey__description {
  margin: 0;
  font-size: 0.95rem;
  color: var(--wp--preset--color--ink);
  line-height: 1.5;
}

/* Where to find us — uses .location-card grid scoped via Query Loop */
.service-locations-band,
.service-providers-band {
  background: var(--wp--preset--color--surface);
}

.service-locations-grid,
.service-providers-grid {
  gap: var(--wp--preset--spacing--40) !important;
}

/* Insurance & cost */
.service-insurance-band {
  background: var(--wp--preset--color--surface);
}

.service-insurance {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.4rem 1.5rem;
}

.service-insurance__plan {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.5;
  font-size: 0.95rem;
}

.service-insurance__plan::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--accent);
  font-weight: 700;
}

/* FAQ — native <details> accordion */
.service-faq {
  display: grid;
  gap: 0.5rem;
}

.service-faq__item {
  border: 1px solid var(--wp--preset--color--border, #e5e7eb);
  border-radius: 6px;
  background: var(--wp--preset--color--light);
}

.service-faq__item[open] {
  border-color: var(--wp--preset--color--primary);
}

.service-faq__question {
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.service-faq__question::-webkit-details-marker {
  display: none;
}

.service-faq__question::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--wp--preset--color--accent);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.service-faq__item[open] .service-faq__question::after {
  content: "−";
}

.service-faq__answer {
  padding: 0 1.25rem 1rem;
  color: var(--wp--preset--color--ink);
  line-height: 1.6;
}

.service-faq__answer p:first-child {
  margin-top: 0;
}

.service-faq__answer p:last-child {
  margin-bottom: 0;
}

/* Related services — uses .service-card grid */
.service-related-band {
  background: var(--wp--preset--color--surface);
}

.service-related-grid {
  gap: var(--wp--preset--spacing--40) !important;
}

/* Single-location: services-at-this-location chips */
.location-services-band {
  background: var(--wp--preset--color--surface);
}

.location-services-grid {
  gap: var(--wp--preset--spacing--30) !important;
}

/* Hide service detail bands when their backing content is empty */
.service-procedures-band:not(:has(.service-procedures)) {
  display: none;
}

.service-journey-band:not(:has(.service-journey)) {
  display: none;
}

.service-faq-band:not(:has(.service-faq)) {
  display: none;
}

.service-providers-band:not(:has(.service-providers-grid .provider-card)) {
  display: none;
}

.service-locations-band:not(:has(.service-locations-grid .location-card)) {
  display: none;
}

.service-related-band:not(:has(.service-related-grid .service-card)) {
  display: none;
}

.location-services-band:not(:has(.location-services-grid .service-card)) {
  display: none;
}

.provider-services-band:not(:has(.provider-services-grid .service-card)) {
  display: none;
}

/* ============================================================
   Info cards (Patient Information hub)
   ============================================================ */

/* Doubled selector specificity beats WordPress's `.has-global-padding` rule
   (which zeroes inline padding when theme.json sets root padding to 0). */
.wp-block-group.info-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-top: 3px solid var(--wp--preset--color--accent);
  padding: 1.5rem 1.5rem 1.25rem;
  height: 100%;
}

.info-card .section-eyebrow {
  margin: 0 0 0.5rem;
}

.info-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}

.info-card h3 a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.info-card h3 a:hover {
  text-decoration: underline;
}

.info-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--wp--preset--color--ink);
}

.info-card__link {
  font-weight: 600;
  font-size: 0.9375rem;
}

.info-card__link a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.info-card__link a:hover {
  text-decoration: underline;
}

/* ============================================================
   Feature list (Patient Portal "What you can do")
   ============================================================ */

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.feature-list li:last-child {
  border-bottom: 0;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.875rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--wp--preset--color--accent);
  border-bottom: 2px solid var(--wp--preset--color--accent);
  transform: rotate(-45deg);
}

/* ============================================================
   Careers quote band
   ============================================================ */

.careers-quote {
  border-left: 3px solid var(--wp--preset--color--accent);
  padding: 0 0 0 1.25rem;
  margin: 0;
  font-style: normal;
}

.careers-quote p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   Forms list — switch from sentence to link styling
   ============================================================ */

.forms-list li a {
  color: var(--wp--preset--color--primary);
}

/* ============================================================
   Section hub variant of page title band
   ============================================================ */

.page-title-band--hub {
  text-align: center;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.page-title-band--hub .wp-block-post-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
}

.section-hub-band {
  background: var(--wp--preset--color--light);
}

.section-hub-grid-band .info-card {
  height: 100%;
}

/* Leadership cards (Senior Leadership page) */
.wp-block-group.leader-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.5rem;
}

/* Photos: identical 4:5 aspect on every card regardless of source dimensions.
   Negate WP's image margins and any size-large max-width constraints. */
.leader-card .leader-card__photo,
.leader-card figure.wp-block-image.leader-card__photo {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 0 1.25rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  background: var(--wp--preset--color--surface);
}

.leader-card .leader-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  margin: 0;
}

.leader-card .section-eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--muted);
}

.leader-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
  color: var(--wp--preset--color--primary);
}

/* CEO portrait in the message intro band — locked to same 4:5 frame as cards. */
.leadership-portrait--ceo {
  max-width: 320px;
  margin: 0 0 1.5rem;
}

.leadership-portrait--ceo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 4px;
}

/* ============================================================
   Search — utility-bar input + results page
   ============================================================ */

.utility-bar__search {
  margin: 0;
  flex: 0 0 auto;
}

.utility-bar__search .wp-block-search__inside-wrapper {
  background: rgba(255, 255, 255, 0.08);
  /* WCAG 1.4.11: form input border must be ≥3:1 vs adjacent background.
     Was rgba(255,255,255,0.18) → 1.75:1 against the deep primary band.
     Bumping to 0.5 alpha lifts the composited border to ~3.6:1. */
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  padding: 0;
  height: 30px;
}

.utility-bar__search .wp-block-search__input {
  background: transparent;
  border: 0;
  color: var(--wp--preset--color--light);
  font-size: 0.78rem;
  /* The browser vertically centers the input's em box, which leaves the
     empty descender band at the bottom — the (descender-free) placeholder
     then floats high. A hair of extra top padding pulls it back to center. */
  padding: 0.15rem 0.6rem 0;
  width: 9rem;
  min-width: 0;
}

.utility-bar__search .wp-block-search__input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.utility-bar__search .wp-block-search__input:focus:not(:focus-visible) {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
}
.utility-bar__search .wp-block-search__input:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.utility-bar__search .wp-block-search__button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--wp--preset--color--light);
  padding: 0 0.55rem;
  cursor: pointer;
}

.utility-bar__search .wp-block-search__button:hover {
  background: var(--wp--preset--color--accent);
}

.utility-bar__search .wp-block-search__button svg {
  display: block;
  fill: currentColor;
  width: 14px;
  height: 14px;
}

.search-refine-band .wp-block-search {
  margin: 0;
}

/* Live-region announcing search result count (WCAG 4.1.3).
   Visible text — sits between the refine input and the results. */
.search-results-count {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) 0;
  font-size: 0.95rem;
  color: var(--wp--preset--color--muted);
}

.search-refine-band .wp-block-search__inside-wrapper {
  /* WCAG 1.4.11: form input border must be ≥3:1 vs adjacent background.
     The general --border (#DDE3E8) is decorative-grade (1.29:1 against
     white) — fine on cards because hover/focus state and content cues
     identify them, but a search field with no other visual cue needs
     #6B7280 (gray-500) → 5.12:1 against white. */
  border: 1px solid #6B7280;
  border-radius: 3px;
  background: var(--wp--preset--color--light);
}

.search-refine-band .wp-block-search__input {
  border: 0;
  padding: 0.6rem 0.85rem;
  font-size: 1rem;
  background: transparent;
}

.search-refine-band .wp-block-search__button {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--light);
  border: 0;
  padding: 0 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.search-refine-band .wp-block-search__button:hover {
  background: var(--wp--preset--color--accent);
}

.search-results-band .wp-block-query > .wp-block-post-template {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-result {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.search-result:last-child {
  border-bottom: 0;
}

.search-result__type {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  border-radius: 2px;
}

.search-result .wp-block-post-title a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.search-result .wp-block-post-title a:hover {
  text-decoration: underline;
}

.search-results-band .wp-block-query-pagination a,
.search-results-band .wp-block-query-pagination span {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  padding: 0.4rem 0.7rem;
}

/* ============================================================
   Printable forms (HTML versions of legacy PDFs)
   ============================================================
   The selectors below (.printable-form, .form-blank, .form-row,
   .form-grid, .form-check, .form-signature-row, .form-disclosure,
   .form-privacy-note, .form-print-button, .form-clear-button) target
   classes used in Page post_content for the 5 printable forms:
     records-release, consent-to-disclose, adult-registration,
     pediatric-registration, health-care-proxy.
   functions.php registers the print/clear button JS handlers.
   Do not delete without verifying via DB query (see top of file).
   ============================================================ */

/* Wrapping container — paper-like card on screen, full bleed in print. */
.printable-form {
  background: #fff;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 4px;
  padding: 2rem 1.75rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.printable-form h1 {
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 0.5rem;
  color: var(--wp--preset--color--primary);
}

.printable-form h2 {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--ink);
}

.printable-form h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 1rem 0 0.5rem;
  color: var(--wp--preset--color--ink);
}

.printable-form p {
  margin: 0.5rem 0;
  line-height: 1.55;
}

/* Fillable text fields styled to look like blanks for handwriting.
   The same selectors handle real <input>/<textarea> AND legacy decorative <span>s. */
.form-blank,
input.form-blank,
textarea.form-blank {
  display: inline-block;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--ink);
  background: transparent;
  font: inherit;
  color: var(--wp--preset--color--ink);
  padding: 0 0.25rem;
  min-width: 8rem;
  height: 1.4em;
  vertical-align: bottom;
  margin: 0 0.25rem;
  border-radius: 0;
}

input.form-blank,
textarea.form-blank {
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

input.form-blank:focus,
textarea.form-blank:focus {
  background: rgba(135, 184, 224, 0.18);
  border-bottom-color: var(--wp--preset--color--accent);
  border-bottom-width: 2px;
}

textarea.form-blank {
  height: 1.6em;
  min-height: 1.6em;
  resize: vertical;
  vertical-align: top;
  width: 100%;
  font-family: inherit;
  line-height: 1.4;
}

.form-blank--xs { min-width: 3rem; }
.form-blank--sm { min-width: 5rem; }
.form-blank--md { min-width: 12rem; }
.form-blank--lg { min-width: 20rem; }
.form-blank--full {
  display: block;
  width: 100%;
  min-width: 100%;
  margin: 0.4rem 0;
}

/* Field labels paired with blanks. */
.form-row {
  margin: 0.6rem 0;
  line-height: 2;
}

.form-row label,
.form-row .form-label {
  font-weight: 600;
  margin-right: 0.25rem;
}

/* Two- or three-column field rows. */
.form-grid {
  display: grid;
  gap: 0.6rem 1.25rem;
  margin: 0.6rem 0;
}

.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

/* ============================================================
   Responsive — narrow viewports (≤600px)
   Mobile-only adjustments. Desktop rendering is unchanged.
   See design-guide.md §"Responsive behavior" for the rationale.
   ============================================================ */
@media (max-width: 600px) {
  /* Form grids collapse to a single column. */
  .form-grid--2,
  .form-grid--3 { grid-template-columns: 1fr; }

  /* Utility bar — drop the long tagline + search input on mobile so the
     EN/ES + PATIENT PORTAL + phone CTAs fit a single line without horizontal
     overflow. (The right-side group has is-nowrap on desktop, which would
     otherwise push these CTAs off-screen.) Search returns when the mobile
     menu is wired up — see design-guide.md "Still to build". */
  .utility-bar__services,
  .utility-bar__search { display: none; }
  .utility-bar__right.is-nowrap {
    flex-wrap: wrap !important;
    gap: 0.5rem 0.75rem !important;
  }
  .utility-bar__portal a,
  .utility-bar__phone a {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
  }

  /* Logo band — halve the cap so the brand image doesn't eat the viewport. */
  .logo-band__image img { max-height: 140px; }

  /* Provider photos — archive + single-service service-providers-band use
     post-featured-image directly (not the .provider-card__photo wrapper that
     caps at 220px elsewhere). Cap them here too, otherwise each photo
     stretches to full column width (~360px) and the page becomes endless scroll.
     The photo-less placeholder (::before) must track the same cap so a card
     with no photo stays the same size as its neighbours. */
  .provider-card .wp-block-post-featured-image,
  .provider-card:not(:has(img))::before {
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
  }
  .provider-card { gap: 0.4rem; }

  /* Restore h2/h3 hierarchy. The .section-title clamp floors at 1.4rem and
     the theme h3 is 1.375rem, so at narrow widths the two flatten to the same
     size and h3s with short copy actually look bigger than their parent h2.
     Bump h2 up; pull nested-column h3s (the Patient Resources / Privacy &
     records pattern) down. Card h3s have their own size rules and are
     unaffected because this selector requires nested .wp-block-columns. */
  .section-title { font-size: 1.625rem; }
  .wp-block-columns .wp-block-columns > .wp-block-column > h3 { font-size: 1.125rem; }

  /* Footer — stacked columns hit the edge with no breathing room. */
  .site-footer { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* === audit 2026-05-07: mobile column-stack additions === */

  /* Footer 4-column → stacked. The block uses inline flex-basis:25% which
     overrides the WP default stacking, so we have to force it back. */
  .site-footer .wp-block-columns { flex-direction: column; gap: var(--wp--preset--spacing--30); }
  .site-footer .wp-block-column { flex-basis: 100% !important; width: 100% !important; }

  /* Hero band: image and text sit side-by-side via a 2-column block.
     Stack the columns and put the image first (above) so the H1 isn't pushed
     below the fold on a 360px viewport. */
  .hero-band .wp-block-columns { flex-direction: column-reverse; gap: var(--wp--preset--spacing--30); }
  .hero-band .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
  .hero-band { padding-top: var(--wp--preset--spacing--30) !important; padding-bottom: var(--wp--preset--spacing--30) !important; }

  /* "Our Care" / generic columns blocks elsewhere on front-page.html and
     single-* templates — stack column blocks that use percentage flex-basis. */
  .wp-block-columns:not(.are-vertically-aligned-top):not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }

  /* Quick-tiles 4-up → 2-up (4-up is unreadable, 1-up scrolls forever). */
  .quick-tiles { grid-template-columns: repeat(2, 1fr) !important; gap: var(--wp--preset--spacing--20) !important; }

  /* Trust band stat columns — drop to 1 column for legibility. */
  .trust-band .wp-block-columns { flex-direction: column; gap: var(--wp--preset--spacing--30); }
  .trust-band .wp-block-column { flex-basis: 100% !important; }

  /* Provider grids — archive page and single-location's provider list.
     Default desktop: 4-up. Mobile: 2-up keeps cards >150px wide. */
  .location-providers-grid,
  .provider-archive__grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--wp--preset--spacing--20) !important; }

  /* Utility-bar touch target compliance. The existing rule above shrinks to
     0.7rem font / 0.3rem padding (≈22px tall) which fails WCAG 2.5.5 (44px).
     Override with min-height + larger padding while keeping the type subtle. */
  .utility-bar__portal a,
  .utility-bar__phone a {
    padding: 0.55rem 0.75rem !important;
    font-size: 0.78rem !important;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /* Main nav fallback — if WordPress's overlayMenu="mobile" attribute on the
     navigation block isn't honored (older core, custom nav block plugin), the
     5 nav items wrap to multiple lines instead of overflowing. Better than
     horizontal scroll. The hamburger is the primary path. */
  .main-nav-band .wp-block-navigation__container { flex-wrap: wrap; justify-content: center; }
  .main-nav-band .wp-block-navigation-item { border-right: none !important; }

  /* === end audit 2026-05-07 === */
}

/* Checkboxes — clickable real inputs paired with their label text.
   Also handles legacy decorative <span class="form-check"> with ::before pseudo box. */
.form-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.15rem 1rem 0.15rem 0;
  font-weight: 400;
  cursor: pointer;
  vertical-align: baseline;
}

label.form-check {
  user-select: none;
}

/* Pseudo-box for legacy <span class="form-check"> with no real input inside. */
.form-check:not(:has(input))::before {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  border: 1.5px solid var(--wp--preset--color--ink);
  border-radius: 1px;
  flex-shrink: 0;
}

/* Real checkbox input — fully restyled. */
input.form-check-input {
  appearance: none;
  -webkit-appearance: none;
  width: 0.95em;
  height: 0.95em;
  border: 1.5px solid var(--wp--preset--color--ink);
  border-radius: 1px;
  background: transparent;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  vertical-align: middle;
  font: inherit;
  outline: none;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}

input.form-check-input:hover {
  border-color: var(--wp--preset--color--accent);
}

input.form-check-input:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

input.form-check-input:checked {
  background: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--ink);
}

input.form-check-input:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  line-height: 1;
  color: var(--wp--preset--color--light);
  font-weight: 700;
}

/* Signature row at the bottom of a form. */
.form-signature-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem 1.5rem;
  margin: 1.5rem 0 0.5rem;
  align-items: end;
}

.form-signature-row > div {
  border-bottom: 1px solid var(--wp--preset--color--ink);
  padding-bottom: 0.25rem;
  min-height: 2.5rem;
}

.form-signature-row > div + .form-signature-caption {
  border-bottom: 0;
}

.form-signature-row .caption {
  display: block;
  font-size: 0.85rem;
  color: var(--wp--preset--color--muted);
  margin-top: 0.25rem;
  border-top: 1px solid var(--wp--preset--color--ink);
  padding-top: 0.25rem;
}

/* Bordered note / disclosure paragraph (legal copy in fine print). */
.form-disclosure {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  padding: 0.85rem 1rem;
  margin: 1rem 0;
}

/* Action row above each form (Print + Clear) — visible on screen, hidden in print. */
.form-print-button-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.form-print-button,
.form-clear-button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 0;
  border-radius: 3px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.form-print-button {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--light);
  border: 1.5px solid var(--wp--preset--color--primary);
}

.form-print-button:hover,
.form-print-button:focus:not(:focus-visible) {
  background: var(--wp--preset--color--light);
  color: var(--wp--preset--color--primary);
  outline: none;
}
.form-print-button:focus-visible {
  background: var(--wp--preset--color--light);
  color: var(--wp--preset--color--primary);
}

.form-print-button::before {
  content: "🖨";
  margin-right: 0.4rem;
}

/* Clear Form is a Utility filled button matching Print Form: same
   resting fill (navy), same hover (invert to white + navy text). Both
   actions sit side-by-side and follow identical "filled-on-white +
   invert" behavior. */
.form-clear-button {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--light);
  border: 1.5px solid var(--wp--preset--color--primary);
}

.form-clear-button:hover,
.form-clear-button:focus:not(:focus-visible) {
  background: var(--wp--preset--color--light);
  color: var(--wp--preset--color--primary);
  outline: none;
}
.form-clear-button:focus-visible {
  background: var(--wp--preset--color--light);
  color: var(--wp--preset--color--primary);
}

/* Privacy note above the form. */
.form-privacy-note {
  font-size: 0.85rem;
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--surface);
  border-left: 3px solid var(--wp--preset--color--secondary);
  padding: 0.6rem 0.85rem;
  margin: 0 0 1rem;
  line-height: 1.5;
}

/* Print rules — hide site chrome, optimize layout for paper.
   The form (`<article class="printable-form">`) carries its own H1 + "Hometown
   Health Centers" subtitle, so we hide everything else on the page and let the
   form be the sole printed content. The CSS-classes-listed approach is more
   reliable across Chrome/Safari/Firefox than `body * { visibility: hidden }`,
   which has flexbox-printing quirks. */
@media print {
  /* Hide every band of site chrome + editorial bands that aren't the form. */
  .site-header-shell,
  .site-header,
  .utility-bar,
  .logo-band,
  .main-nav-band,
  .site-footer,
  .page-title-band,
  .page-title-band__eyebrow,
  .form-print-button-row,
  [class*="cta-band"],
  [class*="page-section--cta"],
  .page-section--intro,
  .wp-block-polylang-language-switcher,
  [class^="pll-"],
  [class*=" pll-"],
  #wpadminbar,
  .skip-link {
    display: none !important;
  }

  /* Reset colors for ink-on-paper. */
  html, body {
    color: #000 !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  main,
  .wp-site-blocks,
  .wp-block-post-content,
  .printable-form {
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: auto !important;
  }

  .printable-form {
    font-size: 10.5pt;
    line-height: 1.4;
  }

  .printable-form h1 {
    font-size: 14pt;
    margin-top: 0;
  }

  .printable-form h2 {
    font-size: 11pt;
    margin-top: 0.75rem;
    border-bottom-color: #000;
    page-break-after: avoid;
  }

  .printable-form h3 {
    font-size: 10pt;
    page-break-after: avoid;
  }

  .form-blank,
  input.form-blank,
  textarea.form-blank {
    border-bottom: 1px solid #000 !important;
    background: transparent !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide the focus highlight on the focused field when printing. */
  input.form-blank:focus,
  textarea.form-blank:focus {
    background: transparent !important;
    border-bottom-color: #000 !important;
    border-bottom-width: 1px !important;
  }

  /* Make checked checkboxes print as filled black squares. */
  input.form-check-input {
    border-color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  input.form-check-input:checked {
    background: #000 !important;
  }

  input.form-check-input:checked::after {
    color: #fff !important;
  }

  .form-privacy-note {
    display: none !important;
  }

  .form-disclosure {
    border-color: #000;
    background: transparent;
    padding: 0.6rem 0.75rem;
  }

  /* Keep semantic clusters together across page breaks. */
  .form-signature-row,
  .form-row,
  .form-grid {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Don't orphan a section heading at the bottom of a page. */
  .printable-form h2,
  .printable-form h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Don't break inside a checkbox group or disclosure block. */
  .form-disclosure,
  .form-check-group,
  .form-checkboxes {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Letter-size margins. */
  @page {
    size: letter;
    margin: 0.5in 0.6in;
  }

  /* Force colored CTA bands and the related-section gap to disappear cleanly. */
  .wp-block-group.alignfull {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}