/*
 * components.css
 *
 * Shared visual-component primitives used across multiple future
 * patterns. No homepage-section-specific styling lives here - that
 * belongs in the patterns themselves once built. Colors, font
 * families, base heading/link/button styling, spacing, and radius are
 * already established by theme.json and aliased in tokens.css; this
 * file only builds reusable classes on top of those tokens.
 */

/* Eyebrow */
/* Small uppercase label used above headlines. Default color is
   dark-teal, which is accessible on the light/white/surface sections;
   bright teal alone measures well under WCAG AA contrast on those
   backgrounds. The --on-dark modifier switches to bright teal for use
   on black/dark-teal sections, where it reads as the strongest, most
   intentional accent. */

.prvnt-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--prvnt-dark-teal);
}

.prvnt-eyebrow--on-dark {
  color: var(--prvnt-teal);
}

/* Display */
/* Oversized condensed headline treatment. Usable on a heading element
   or on any element (span/div) that needs hero-scale type without
   being a semantic h1. Color is intentionally inherited, since this
   class is used on both dark and light sections; wrap the section in
   one of the surface helpers below to set the correct base color. */

.prvnt-display {
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--display-xl);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: inherit;
}

/* Lede */
/* Intro / lead paragraph style, using the body-large scale. Slightly
   tighter line-height than base body copy suits a short intro
   statement better than long-form reading. Width is intentionally not
   constrained here; layout containers/patterns control reading width. */

.prvnt-lede {
  font-family: var(--font-body);
  font-size: var(--wp--preset--font-size--body-large);
  line-height: 1.5;
  color: inherit;
}

/* Buttons */
/* Shared structural base plus two variants. Primary matches the
   native WordPress button block styling from theme.json exactly
   (teal fill, black text) so both stay visually identical. Secondary
   is an outline treatment that uses currentColor for its border and
   text, so it automatically matches whatever section it is placed in
   without needing its own light/dark modifier. Focus styling is
   intentionally left to base.css and is not overridden here.
   min-height keeps the shared button primitive at a practical
   touch-target size. */

.prvnt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.prvnt-button--primary {
  background-color: var(--prvnt-teal);
  border-color: var(--prvnt-teal);
  color: var(--prvnt-black);
}

.prvnt-button--primary:hover {
  opacity: 0.85;
}

.prvnt-button--primary:active {
  opacity: 0.7;
}

.prvnt-button--secondary {
  background-color: transparent;
  border-color: currentColor;
  color: inherit;
}

.prvnt-button--secondary:hover {
  opacity: 0.75;
}

.prvnt-button--secondary:active {
  opacity: 0.6;
}

/* Section surface helpers */
/* Set background and base text color for the black / dark-teal /
   white section alternation called for in the approved design.
   theme.json compiles its global heading and link colors using
   WordPress's :where() selector, which carries zero specificity, so a
   single class-level override here reliably wins without extra
   specificity tricks. Only the dark surfaces need an explicit override: the
   light surfaces already match theme.json's own defaults. The link
   color override excludes .prvnt-button so PRVNT buttons keep their
   own primary/secondary coloring instead of the plain-link treatment. */

.prvnt-surface--black {
  background-color: var(--prvnt-black);
  color: var(--prvnt-white);
}

.prvnt-surface--black h1,
.prvnt-surface--black h2,
.prvnt-surface--black h3,
.prvnt-surface--black h4,
.prvnt-surface--black h5,
.prvnt-surface--black h6 {
  color: var(--prvnt-white);
}

.prvnt-surface--black a:not(.prvnt-button) {
  color: var(--prvnt-teal);
}

.prvnt-surface--dark-teal {
  background-color: var(--prvnt-dark-teal);
  color: var(--prvnt-white);
}

.prvnt-surface--dark-teal h1,
.prvnt-surface--dark-teal h2,
.prvnt-surface--dark-teal h3,
.prvnt-surface--dark-teal h4,
.prvnt-surface--dark-teal h5,
.prvnt-surface--dark-teal h6 {
  color: var(--prvnt-white);
}

.prvnt-surface--dark-teal a:not(.prvnt-button) {
  color: var(--prvnt-teal);
}

/* A pattern's Button block only carries the custom .prvnt-button /
   .prvnt-button--primary classes on its inner anchor (per the
   clickable-element convention used sitewide), not on every markup
   path WordPress may regenerate that anchor from. If those custom
   classes are ever absent, the rule above's :not(.prvnt-button)
   guard no longer excludes the button and sets bright teal text -
   invisible against this same teal button's own background. Target
   the anchor's two always-present native classes instead of the
   custom ones so black text is guaranteed on a dark-teal surface
   regardless of which classes survived, at higher specificity than
   the rule above so it always wins. */

.prvnt-surface--dark-teal .wp-block-button__link.wp-element-button {
  color: var(--prvnt-black);
}

/* The rule above assumed every button on a dark-teal surface was the
   teal-filled primary variant. The FAQ closing CTA is the first place
   a .prvnt-button--secondary (transparent background, currentColor
   border/text) appears on a dark-teal surface, and forcing it to
   black would make its black-on-dark-teal border and text nearly
   invisible. This selector is more specific (an extra class) than
   the rule above, so it reliably wins and restores the surface's own
   white text color for the secondary variant only; the primary
   variant is unaffected. */

.prvnt-surface--dark-teal .prvnt-button--secondary.wp-block-button__link.wp-element-button {
  color: inherit;
}

.prvnt-surface--white {
  background-color: var(--prvnt-white);
}

.prvnt-surface--tint {
  background-color: var(--prvnt-surface);
}

/* Media wrapper */
/* Consistent crop/fit and restrained corner radius for large treatment
   photography, shared across hero, feature, and therapy sections. */

.prvnt-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.prvnt-media::after {
  content: "";
  position: absolute;
  inset: var(--space-md);
  border: 1px solid var(--prvnt-teal);
  opacity: 0.35;
  pointer-events: none;
}

.prvnt-media img,
.prvnt-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Divider */
/* Thin rule for editorial section dividers. currentColor plus low
   opacity keeps it visible but restrained on both light and dark
   surfaces without needing a separate modifier. */

.prvnt-divider {
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
  margin-block: var(--space-md);
}

/* Homepage Shell */
/* Core's global styles apply the theme.json root blockGap as a
   margin between top-level template blocks (.wp-site-blocks > * + *),
   which adds an unwanted seam between the header, homepage main, and
   footer. These selectors are scoped to the homepage main element
   specifically so no other template's shell spacing is affected, and
   win on specificity alone (no !important needed) since each pairs a
   type selector with the .prvnt-home-main class against core's
   universal-selector rule. */

.wp-site-blocks > header + .prvnt-home-main,
.wp-site-blocks > header + .prvnt-page-main,
.wp-site-blocks > header + .prvnt-post-main,
.wp-site-blocks > header + .prvnt-archive-main,
.wp-site-blocks > header + .prvnt-index-main,
.wp-site-blocks > header + .prvnt-404-main {
  margin-block-start: 0;
}

.wp-site-blocks > .prvnt-home-main + footer,
.wp-site-blocks > .prvnt-page-main + footer,
.wp-site-blocks > .prvnt-post-main + footer,
.wp-site-blocks > .prvnt-archive-main + footer,
.wp-site-blocks > .prvnt-index-main + footer,
.wp-site-blocks > .prvnt-404-main + footer {
  margin-block-start: 0;
}

/* The same core blockGap margin also lands one level deeper, between
   .prvnt-page-hero and .prvnt-page-content inside .prvnt-page-main on
   every standard interior Page (page.html), showing as a white band
   between the black hero and the first content surface regardless of
   that surface's own color. Scoped to this exact hero-to-content
   adjacency only, so hero padding, section padding inside patterns,
   and every other template's shell spacing are untouched. */

.prvnt-page-main > .prvnt-page-hero + .prvnt-page-content {
  margin-block-start: 0;
}

/* Same blockGap margin, homepage: it shows as an empty band between
   every pair of top-level sections inside .prvnt-home-main (hero,
   credibility strip, and each pattern after it), each of which
   already supplies its own surface color and internal padding.
   Direct children only, so spacing inside the individual patterns is
   untouched. This also covers the earlier hero-to-credibility-strip
   adjacency. */

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

/* Same blockGap margin, About page: it shows as a white band between
   the major sibling sections of the About pattern (statement, detail,
   principles, why, local, CTA). Direct children of the pattern root
   only, so nested grids, cards, and the CTA buttons keep their own
   spacing. */

.prvnt-page-content__body > .prvnt-about-philosophy > * + * {
  margin-block-start: 0;
}

/* Site Header */
/* Several selectors below target WordPress core's own generated
   Navigation block classnames (wp-block-navigation-item__content,
   wp-block-navigation__responsive-container-open/close, is-menu-open)
   since that markup is fixed core block output with no PRVNT-authored
   equivalent to hook into instead. Link color and underline from
   theme.json's global link style are overridden here because nav
   items are UI labels, not editorial body links, and theme.json's
   dark-teal link color has poor contrast on this black header. The
   hairline bottom rule (::after, currentColor/opacity) gives the
   header a deliberate architectural edge; the Navigation and booking
   CTA are grouped in .prvnt-site-header__actions so the header reads
   as logo-left / actions-right rather than three evenly spaced
   items, and a short vertical rule separates the CTA from the nav so
   it feels integrated rather than a floating button. .prvnt-site-nav
   gets flex-shrink: 0 (matching the CTA, which already had it) plus
   a min-width floor: without it, the nav was the only flexible child
   under space pressure at narrow widths, so it could shrink enough
   for the protected, never-shrinking CTA to end up overlapping and
   visually hiding the responsive-container-open trigger instead of
   both sharing the row or wrapping cleanly. */

.prvnt-site-header {
  background-color: var(--prvnt-black);
  color: var(--prvnt-white);
}

/* Sticky positioning lives on the outer template-part <header> rather
   than on .prvnt-site-header itself: <header>'s only in-flow child is
   .prvnt-site-header (the skip link is position: absolute via
   .sr-only, so it contributes no height), which made <header> exactly
   as tall as .prvnt-site-header and left the sticky element with no
   vertical range to hold within its own containing block - it
   unstuck at the same instant it would have started sticking.
   .wp-site-blocks > header's containing block is .wp-site-blocks
   itself (header + main + footer), which spans the full page height
   and gives the header real room to stay pinned while scrolling.
   .wp-site-blocks > header is unambiguous: exactly one <header> is
   ever rendered site-wide (every template shares this same part),
   and the direct-child combinator can't match a <header> nested
   deeper inside <main>. */

.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Keeps the sticky header below the WordPress admin bar (32px desktop,
   46px at its own ≤782px collapse breakpoint) instead of disappearing
   under it while logged in. Below the admin bar's own ≤600px
   breakpoint it switches from position: fixed to position: absolute
   and scrolls away with the page, so no offset is needed there. */

body.admin-bar .wp-site-blocks > header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .wp-site-blocks > header {
    top: 46px;
  }
}

@media (max-width: 600px) {
  body.admin-bar .wp-site-blocks > header {
    top: 0;
  }
}

.prvnt-site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  border-bottom: 1px solid currentColor;
  opacity: 0.12;
  transition: opacity 0.2s ease;
}

/* .is-scrolled is toggled by assets/js/interactions.js once the page
   scrolls past the very top. The header background is already fully
   opaque at rest (no transparent hero overlay to strengthen), so the
   only restrained delta on scroll is a firmer hairline edge. */

.prvnt-site-header.is-scrolled::after {
  opacity: 0.3;
}

/* Skip link */
/* Relies on the .sr-only / .sr-only-focusable utilities in base.css to
   stay off-screen but keyboard/screen-reader reachable at rest. This
   narrowly scoped class only adds the visible focused treatment so the
   link reads clearly against the black header instead of inheriting
   the surrounding header text color. */

.prvnt-skip-link:focus {
  background-color: var(--prvnt-black);
  color: var(--prvnt-white);
  padding: var(--space-xs) var(--space-sm);
}

.prvnt-site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

.prvnt-site-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}

.prvnt-site-nav {
  flex-shrink: 0;
  min-width: 44px;
}

.prvnt-site-header__cta {
  position: relative;
  flex-shrink: 0;
  margin: 0;
  padding-inline-start: var(--space-lg);
}

.prvnt-site-header__cta::before {
  content: "";
  position: absolute;
  inset-block: 22%;
  inset-inline-start: 0;
  border-inline-start: 1px solid currentColor;
  opacity: 0.2;
}

/* Text wordmark (0.12.13): the wp:site-logo block never had a real
   logo image configured and rendered as a blank slot, and the
   footer's wp:site-title block exposed the sandbox hostname. Both are
   replaced with the same plain-text "PRVNT" link, styled once here.
   The header now uses the logo image below instead, so this
   now styles only the footer's .prvnt-site-footer__title heading. flex-shrink: 0 matches the
   existing defensive pattern already used for .prvnt-site-nav/.cta so
   the wordmark can never be squeezed by the flexible nav under space
   pressure; padding-block keeps its clickable area close to the
   44px practical touch-target size despite being a plain text link. */

.prvnt-site-wordmark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding-block: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--prvnt-white);
  text-decoration: none;
  transition: color 0.2s ease;
}

.prvnt-site-wordmark:hover {
  color: var(--prvnt-teal);
}

/* Header horizontal logo: the bundled horizontal logo image
   is the header's only brand mark at every width; the text wordmark
   above is now footer-only. Desktop/tablet: the link is
   flex-shrink: 0 and the image has a fixed width so the logo cannot
   push or squeeze the nav/CTA group. At <=600px the logo is scaled
   down and allowed to shrink (within a floor) instead, and the row is
   kept on one line, so the logo sits beside the hamburger and CTA. */

.prvnt-site-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  padding: 0;
  background: none;
  border: 0;
}

.prvnt-site-logo-wordmark {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .prvnt-site-header__inner {
    flex-wrap: nowrap;
    gap: var(--space-sm);
  }

  /* The hamburger + CTA group keeps its natural width and never wraps
     internally; only the logo gives up space on narrow phones. Core's
     blockGap margin is reset (as on tablet) so the group centers on
     the same axis as the logo. */

  .prvnt-site-header__actions {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  .prvnt-site-header__inner > .prvnt-site-header__actions {
    margin-block-start: 0;
  }

  /* min-height keeps the home link a 44px touch target even though
     the scaled logo image itself is shorter. */

  .prvnt-site-logo-link {
    flex: 0 1 120px;
    min-width: 72px;
    min-height: 44px;
    justify-content: flex-start;
  }

  .prvnt-site-logo-wordmark {
    width: 100%;
  }
}

.prvnt-site-nav .wp-block-navigation-item__content {
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--nav);
  color: var(--prvnt-white);
  text-decoration: none;
  transition: color 0.2s ease;
}

.prvnt-site-nav .wp-block-navigation-item__content:hover {
  color: var(--prvnt-teal);
}

.prvnt-site-nav .wp-block-navigation__responsive-container-open,
.prvnt-site-nav .wp-block-navigation__responsive-container-close {
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--prvnt-white);
}

.prvnt-site-nav .wp-block-navigation__responsive-container-close {
  display: flex;
}

/* The nav collapses to the hamburger overlay below 1100px instead of
   core's own 600px "Mobile" breakpoint: the logo, full nav, and CTA
   need about 1014px to share one row, so 601-1099px used to wrap
   into a 184-239px tall sticky header. The open trigger shows at
   <=1099px and hides at >=1100px, and the full nav container is
   hidden while closed at <=1099px (this selector is one class more
   specific than core's own rule that shows it from 600px up). The
   overlay itself is position: fixed, so it opens the same way at any
   width. */

@media (max-width: 1099px) {
  .prvnt-site-nav .wp-block-navigation__responsive-container-open {
    display: flex;
  }

  .prvnt-site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }

  /* Open overlay side spacing: the menu content and the close button
     sat flush against the viewport edges (core's overlay has no side
     padding here). Both get a --space-md inset, raised to the device
     safe-area inset where that is larger (landscape notch/rounded
     corners). The Services submenu keeps its own indent, so it stays
     nested under Services relative to the new parent inset. */

  .prvnt-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-inline: max(var(--space-md), env(safe-area-inset-left)) max(var(--space-md), env(safe-area-inset-right));
  }

  .prvnt-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    top: max(var(--space-xs), env(safe-area-inset-top));
    right: max(var(--space-md), env(safe-area-inset-right));
  }
}

@media (min-width: 1100px) {
  .prvnt-site-nav .wp-block-navigation__responsive-container-open {
    display: none;
  }
}

/* Desktop Services submenu toggle: the chevron button is only about
   10x10px. On desktop it gets a 44x44 hit area that extends below,
   above and to the right of the chevron, so the visible chevron stays
   exactly where it is and the hit area never overlaps the Services
   link. Negative margins cancel the extra size so the nav's width,
   the header height and the submenu's position do not change (the
   next nav item paints over the last few pixels of the hit area). The
   svg is pinned to its original size because core sizes it to match
   the button. */

@media (min-width: 1100px) {
  .prvnt-site-nav .wp-block-navigation__submenu-icon {
    box-sizing: border-box;
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 44px;
    min-height: 44px;
    padding-top: calc((44px - 0.6em) / 2);
    margin-block: -10px;
    margin-inline-end: calc(0.6em - 44px);
  }

  .prvnt-site-nav .wp-block-navigation__submenu-icon svg {
    flex: none;
    width: 0.6em;
    height: 0.6em;
  }
}

/* Desktop Services submenu: core's 200px min-width wrapped
   "Supplements & Wellness Support" onto two lines. Keeping each label
   on one line lets the absolutely positioned submenu size to its
   longest item; its left/top anchor is unchanged. */

@media (min-width: 1100px) {
  .prvnt-site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    white-space: nowrap;
  }
}

/* Tablet only: core's blockGap margin on the actions group sits the
   hamburger and CTA below the logo's center once the header is one
   row. Not reset at <=600 or >=1100, where the approved layouts
   already account for it. */

@media (min-width: 601px) and (max-width: 1099px) {
  .prvnt-site-header__inner > .prvnt-site-header__actions {
    margin-block-start: 0;
  }
}

.prvnt-site-nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--prvnt-black);
}

/* Core's "no custom background" overlay rule is more specific than the
   one above (0,5,0 vs 0,3,0) and painted the open menu white under the
   white links. This matches core's selector plus one class so the
   PRVNT black wins. */

.prvnt-site-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  background-color: var(--prvnt-black);
}

.prvnt-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--prvnt-white);
}

.prvnt-site-nav .wp-block-navigation__submenu-container {
  background-color: var(--prvnt-dark-teal);
  border-top: 2px solid var(--prvnt-teal);
}

/* Hero */
/* Immersive full-bleed media hero (0.12.11): .prvnt-hero__media is no
   longer a flex sibling sharing the row with .prvnt-hero__content -
   it's an absolutely positioned layer (inset: 0) filling the entire
   .prvnt-hero box, with .prvnt-hero__inner/.content layered on top via
   position: relative + z-index. .prvnt-hero itself is the positioning
   context and a flex container that vertically centers .inner, with
   a height driven by min-height rather than a fixed height so real
   content can still grow it on unusually small/tall viewports. Mobile
   gets a shorter, "practical" height clamp so the hero doesn't force
   excessive scrolling on a short phone viewport; tablet/desktop
   (768px+) get the full ~80-90vh cinematic clamp. The former teal
   inset frame on the media plane is replaced by a readability
   scrim - a flat, fairly strong overlay on mobile (where the content
   column runs close to full width), and a left-to-right gradient on
   desktop (strongest where the copy sits, fading out toward the right
   two-thirds so the video itself doesn't read as muddy) - implemented
   as .prvnt-hero__media's own ::after so it sits between the media
   and the content without an extra markup layer. Exact PRVNT-black
   rgb(10, 10, 10) is used directly in the gradient/overlay (matching
   --prvnt-black's own hex value) since rgba() alpha stops can't
   reference a hex custom property directly. */

.prvnt-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 70vh, 640px);
}

@media (min-width: 768px) {
  .prvnt-hero {
    min-height: clamp(560px, 85vh, 900px);
  }
}

.prvnt-hero__media {
  position: absolute;
  inset: 0;
  background-color: var(--prvnt-dark-teal);
}

.prvnt-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.6);
  pointer-events: none;
}

@media (min-width: 768px) {
  .prvnt-hero__media::after {
    background: linear-gradient(
      to right,
      rgba(10, 10, 10, 0.72) 0%,
      rgba(10, 10, 10, 0.52) 32%,
      rgba(10, 10, 10, 0.18) 62%,
      rgba(10, 10, 10, 0.02) 100%
    );
  }
}

/* 0.12.12: the flat mobile scrim above sat over a visually busy part
   of the video. Below 768px only, swap it for the same left-to-right
   gradient idea used at desktop (calmer dark reading zone under the
   copy, more visible treatment action toward the right) instead of a
   single flat opacity. */

@media (max-width: 767px) {
  .prvnt-hero__media::after {
    background: linear-gradient(
      to right,
      rgba(10, 10, 10, 0.78) 0%,
      rgba(10, 10, 10, 0.62) 48%,
      rgba(10, 10, 10, 0.28) 100%
    );
  }
}

/* .prvnt-hero__inner is the second WordPress Group child of .prvnt-hero
   (.prvnt-hero__media is the first), so core's own blockGap styles
   apply an automatic margin-block-start to it as a * + * sibling -
   pushing the layered content down from the hero's top edge instead
   of it filling the full positioning context. Reset to 0 here. */

.prvnt-hero > .prvnt-hero__inner {
  margin-block-start: 0;
}

.prvnt-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--space-xl);
}

.prvnt-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 480px;
}

@media (min-width: 768px) {
  .prvnt-hero__content {
    max-width: 42%;
  }
}

.prvnt-hero__title::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-hero__cta {
  margin: 0;
}

/* The real hero video/poster are absolutely positioned to fill
   .prvnt-hero__media (itself inset: 0 against .prvnt-hero) - the
   same fill technique Cover's own background element uses
   internally. object-position favors the right two-thirds of the
   frame, where the readability scrim is lightest, so the treatment
   action stays visible rather than sitting hidden behind the
   left-side copy. The poster stays hidden by default and only the
   muted/looping video plays; under prefers-reduced-motion the video
   is hidden and the plain static poster image shows instead, so no
   visible motion is ever forced on a reduced-motion user even though
   the (now invisible) video keeps decoding in the background. The
   show/hide rules below are scoped as ".prvnt-hero__media
   .prvnt-hero__poster" rather than the bare class: the poster is
   itself an <img> inside .prvnt-media, so the shared ".prvnt-media
   img, .prvnt-media video" sizing rule above (one class + one type =
   higher specificity than a single class) would otherwise win and
   keep it visible regardless of this rule's source order. */

.prvnt-hero__video,
.prvnt-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

/* 0.12.12: shift the focal point farther right below 768px only, so
   the calmer left-side reading zone (see the mobile gradient above)
   sits over less visually busy footage. Desktop keeps 70% center. */

@media (max-width: 767px) {
  .prvnt-hero__video,
  .prvnt-hero__poster {
    object-position: 80% center;
  }
}

.prvnt-hero__media .prvnt-hero__poster {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .prvnt-hero__media .prvnt-hero__video {
    display: none;
  }

  .prvnt-hero__media .prvnt-hero__poster {
    display: block;
  }
}

/* Hero motion toggle: a small pause/play control for the background
   video. The button is a 44x44 transparent hit target in the hero's
   bottom-right corner; the visible treatment is a smaller dark,
   translucent circle with a thin white ring and a 14px white icon, so
   it stays secondary to the hero copy. It is absolutely positioned
   above the scrim (z-index 2, over .prvnt-hero__inner's 1), takes no
   space in the hero layout, and keeps the global :focus-visible ring
   (rounded to match). The hidden attribute needs an explicit rule
   because display here would otherwise override it; the script only
   removes it once motion is allowed, and reduced-motion users never
   see it (the video is paused and the poster shows instead). */

.prvnt-hero__motion-toggle {
  position: absolute;
  right: max(var(--space-md), env(safe-area-inset-right));
  bottom: var(--space-md);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--prvnt-white);
  cursor: pointer;
}

.prvnt-hero__motion-toggle[hidden] {
  display: none;
}

.prvnt-hero__motion-toggle::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.5);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.prvnt-hero__motion-toggle:hover::before {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(10, 10, 10, 0.72);
}

.prvnt-hero__motion-icon {
  position: relative;
  fill: currentColor;
}

.prvnt-hero__motion-icon-play,
.prvnt-hero__motion-toggle.is-paused .prvnt-hero__motion-icon-pause {
  display: none;
}

.prvnt-hero__motion-toggle.is-paused .prvnt-hero__motion-icon-play {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .prvnt-hero__motion-toggle {
    display: none;
  }
}

/* Credibility Strip */
/* Light editorial transition strip between the black hero and the
   future Explore PRVNT section. Three short labels laid out with
   intrinsic CSS Grid (auto-fit/minmax) so they stack on narrow
   viewports without a manual breakpoint. Each label carries its own
   short top rule (the same currentColor/opacity pseudo-element
   technique used throughout this file) rather than a card or pill,
   and left alignment reads as a structural index rather than a
   centered badge row. */

.prvnt-credibility-strip {
  background-color: var(--prvnt-white);
}

.prvnt-credibility-strip__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  padding-block: var(--space-lg);
}

.prvnt-credibility-strip__item {
  position: relative;
  margin: 0;
  padding-top: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--prvnt-dark-teal);
}

.prvnt-credibility-strip__item::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
}

/* Service Grid */
/* Explore PRVNT section, restyled as an aligned two-column index
   rather than a staggered card-ish grid: a shared top rule opens the
   list, each item gets its own bottom rule so rows align across both
   columns, and the second column additionally carries a vertical
   rule (border-inline-start) so the two columns read as a deliberate
   ruled table rather than independent floating items. The column
   count itself is switched explicitly at a single breakpoint (see
   below) rather than left to auto-fit/minmax, so the divider/padding
   treatment can never disagree with the actual resolved column
   count. nth-child(even) lands in the second column precisely
   because there are two columns and four items. */

.prvnt-service-grid__inner {
  padding-block: var(--section-space);
}

.prvnt-service-grid__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
  margin-bottom: var(--space-lg);
}

.prvnt-service-grid__items {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--prvnt-dark-teal);
}

.prvnt-service-grid__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--prvnt-dark-teal);
  transition: border-color 0.2s ease;
}

/* Core's blockGap margin lands on every item after the first, which
   is duplicate spacing here (the row structure and item padding
   already own it) and left the first item higher than its row
   neighbor. */

.prvnt-service-grid__items > .prvnt-service-grid__item {
  margin-block-start: 0;
}

/* The two-column switch and the second-column divider/padding share
   this exact breakpoint so they can never disagree - unlike the
   previous auto-fit/minmax approach, whose actual column count
   depended on the container's resolved width rather than the
   viewport, and could still be a single column at some tablet
   viewport widths above the old fixed 750px divider breakpoint.
   1100px clears the full ~768-1024px tablet range documented for
   the project with real margin, so single-column applies through all
   of mobile and tablet and two-column is reserved for genuine
   desktop widths. */

@media (min-width: 1100px) {
  .prvnt-service-grid__items {
    grid-template-columns: 1fr 1fr;
  }

  .prvnt-service-grid__item:nth-child(even) {
    padding-inline-start: var(--space-xl);
    border-inline-start: 1px solid var(--prvnt-dark-teal);
  }

  .prvnt-service-grid__item:nth-child(odd) {
    padding-inline-end: var(--space-xl);
  }
}

.prvnt-service-grid__item-number {
  flex-shrink: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--display-xl);
  line-height: 0.85;
  color: var(--prvnt-dark-teal);
  transition: color 0.2s ease;
}

.prvnt-service-grid__item-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.prvnt-service-grid__item-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--h-3);
}

.prvnt-service-grid__item-link {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--prvnt-dark-teal);
}

.prvnt-service-grid__item-link a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.prvnt-service-grid__item-link a:hover {
  color: var(--prvnt-teal);
}

/* Restrained row-level feedback on top of the link's own hover above:
   the numeral and the item's hairline border pick up the same teal
   accent so the row reads as "in focus" without implying the whole
   row is clickable (no cursor change, no fill, no shadow). :hover is
   gated to hover-capable pointers; :focus-within is not, since
   keyboard focus must always be visible regardless of input type. */

@media (hover: hover) {
  .prvnt-service-grid__item:hover {
    border-color: var(--prvnt-teal);
  }

  .prvnt-service-grid__item:hover .prvnt-service-grid__item-number {
    color: var(--prvnt-teal);
  }
}

.prvnt-service-grid__item:focus-within {
  border-color: var(--prvnt-teal);
}

.prvnt-service-grid__item:focus-within .prvnt-service-grid__item-number {
  color: var(--prvnt-teal);
}

/* Editorial Split / Brand Philosophy */
/* Homepage manifesto moment. Asymmetric media/content composition
   using Flexbox with wrap rather than an even auto-fit Grid, while
   each side's flex-basis stays wrapped in min(100%, Npx) so both
   collapse to a mobile-safe full-width stack. The ratio favors
   .content (1.15) over .media (1) - the reverse of the Hero/Feature
   Section pattern elsewhere - because .title now carries the
   .prvnt-display treatment (the same oversized display-xl scale as
   the Hero H1), so the statement itself needs to be the section's
   dominant element with the real anatomy photo reading as meaningful
   support rather than the visual lead. padding-block is intentionally
   larger than the shared --section-space rhythm other sections use,
   for the additional controlled negative space a manifesto moment
   calls for. Source order still puts media before content, so the
   photo sits on the left, matching the alternating left/right pattern
   used across the homepage's split sections. */

.prvnt-editorial-split__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xl);
  padding-block: calc(var(--section-space) + var(--space-xl));
}

.prvnt-editorial-split__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1.15 1 min(100%, 460px);
  max-width: var(--container-reading);
}

.prvnt-editorial-split__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-editorial-split__media {
  flex: 1 1 min(100%, 420px);
  min-height: clamp(320px, 52vw, 520px);
  background-color: var(--prvnt-black);
}

/* Feature Section / Chiropractic, Performance + Recovery, Shockwave,
   Red Light */
/* Shared Flexbox base across all four feature spreads keeps one
   consistent system. These --chiropractic/--performance/--shockwave/
   --red-light modifier classes are shared with each service's
   interior detail page, so any ratio/media override that should only
   apply on the homepage lives in a separate, homepage-only class
   instead (.prvnt-home-shockwave, .prvnt-home-red-light, below) -
   never here - so the detail pages stay untouched:
   - Chiropractic: top-aligns instead of centering (kept, applies to
     both homepage and detail identically); otherwise uses the shared
     base ratio - Chiropractic Care's own detail page uses its own
     dedicated CSS Grid system (.prvnt-service-chiropractic-care__grid
     below) and ignores these flex properties entirely, so this stays
     safe to tune for the homepage's needs without a separate class.
   - Performance + Recovery: media dominates further and the text
     column narrows, so the image plane feels closer to full-bleed
     with a caption-like content column. Applies to both homepage and
     detail (unchanged in this pass).
   - Shockwave: the shared media frame's inset is asymmetric (wider on
     the leading edge) instead of even on all sides, and the portrait
     treatment photo is cropped to a 4:5 frame, capped at 600px tall,
     so it cannot run far taller than the text column or dominate the
     stacked tablet layout. Applies to both homepage and
     detail.
   - Red Light: top-aligns instead of centering (kept, applies to both
     homepage and detail identically). */

.prvnt-feature-section__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xl);
  padding-block: var(--section-space);
}

.prvnt-feature-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1 1 min(100%, 420px);
  max-width: var(--container-reading);
}

.prvnt-feature-section__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-feature-section__media {
  flex: 1.15 1 min(100%, 480px);
  min-height: clamp(320px, 52vw, 520px);
  background-color: var(--prvnt-dark-teal);
}

.prvnt-feature-section--chiropractic .prvnt-feature-section__inner {
  align-items: flex-start;
}

.prvnt-feature-section--performance .prvnt-feature-section__media {
  flex: 1.4 1 min(100%, 520px);
  min-height: clamp(360px, 58vw, 600px);
}

.prvnt-feature-section--performance .prvnt-feature-section__content {
  flex: 0.85 1 min(100%, 360px);
}

.prvnt-feature-section--shockwave .prvnt-feature-section__media::after {
  inset-block: var(--space-md);
  inset-inline: var(--space-2xl) var(--space-md);
}

.prvnt-feature-section--shockwave .prvnt-feature-section__media {
  margin: 0;
}

.prvnt-feature-section--shockwave .prvnt-feature-section__media img {
  aspect-ratio: 4 / 5;
  max-height: 600px;
  object-position: center 40%;
}

.prvnt-feature-section--red-light .prvnt-feature-section__inner {
  align-items: flex-start;
}

/* Homepage Feature Section Overrides */
/* Scoped to a class unique to each homepage pattern (not shared with
   the corresponding interior service-detail page), so these
   homepage-only compositional changes can never leak onto a detail
   page that reuses the same --shockwave/--red-light modifier and
   .prvnt-feature-section__content/__media classes. */

.prvnt-home-shockwave .prvnt-feature-section__content {
  flex: 0.9 1 min(100%, 380px);
}

.prvnt-home-red-light .prvnt-feature-section__media {
  flex: 1.3 1 min(100%, 520px);
  min-height: clamp(360px, 54vw, 600px);
}

.prvnt-home-red-light .prvnt-feature-section__content {
  flex: 0.9 1 min(100%, 380px);
}

/* First Visit */
/* Tint surface closing conversion moment before the Footer. The
   intro (title + booking CTA) and the three-step sequence now share
   one asymmetric Flexbox layout - the same min(100%, Npx) technique
   used sitewide - instead of a stacked title-above-equal-columns
   composition, so the section reads as one composed spread. Steps
   use an intrinsic Grid with a mobile-safe track minimum
   (min(100%, 240px)) so three steps cannot overflow the ~390px
   mobile container, and the number uses the same display-xl scale as
   the Services index numerals for one consistent "large numeral"
   signature across the page. */

.prvnt-first-visit__inner {
  padding-block: var(--section-space);
}

.prvnt-first-visit__layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-xl);
}

.prvnt-first-visit__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1 1 min(100%, 360px);
}

.prvnt-first-visit__cta {
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

.prvnt-first-visit__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-lg);
  flex: 2 1 min(100%, 480px);
}

.prvnt-first-visit__step {
  padding-block: var(--space-md);
  border-top: 1px solid var(--prvnt-dark-teal);
}

.prvnt-first-visit__number {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--display-xl);
  line-height: 0.85;
  color: var(--prvnt-dark-teal);
}

.prvnt-first-visit__label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Site Footer */
/* Black surface; .prvnt-site-footer__title now wraps a
   .prvnt-site-wordmark link (0.12.13, replacing the dynamic
   wp:site-title block, which exposed the sandbox hostname) rather
   than rendering its own text, so its heading-color override from
   .prvnt-surface--black is irrelevant here - the wordmark sets its
   own explicit white color instead. Top area uses a mobile-safe
   intrinsic Grid
   (min(100%, 320px)) so the brand, contact, and connect columns
   settle into up to three columns on wide screens and stack cleanly
   on the ~390px mobile target. The contact/connect columns each
   carry a thin inset-inline-start rule (currentColor/opacity
   pseudo-element, the same technique used throughout this file) so
   the three-column split reads as a deliberate editorial rhythm
   rather than three unrelated blocks; it still reads fine as a
   left-edge accent when those columns stack on mobile. Plain links
   (phone, social) already pick up teal from the existing
   .prvnt-surface--black a:not(.prvnt-button) rule, so no separate
   link-color rule is needed here. Navigation uses overlayMenu:never
   (set in footer.html) and is allowed to wrap here rather than
   collapsing into a hamburger/overlay. */

.prvnt-site-footer__inner {
  padding-block: var(--space-2xl);
}

.prvnt-site-footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
  gap: var(--space-xl);
}

.prvnt-site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.prvnt-site-footer__title {
  margin: 0;
}

.prvnt-site-footer__tagline {
  margin: 0;
  max-width: var(--container-reading);
}

.prvnt-site-footer__nav .wp-block-navigation__container {
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.prvnt-site-footer__nav .wp-block-navigation-item__content {
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--nav);
  color: var(--prvnt-white);
  text-decoration: none;
  transition: color 0.2s ease;
}

.prvnt-site-footer__nav .wp-block-navigation-item__content:hover {
  color: var(--prvnt-teal);
}

.prvnt-site-footer__contact,
.prvnt-site-footer__connect,
.prvnt-site-footer__linkgroup {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-inline-start: var(--space-lg);
}

.prvnt-site-footer__contact::before,
.prvnt-site-footer__connect::before,
.prvnt-site-footer__linkgroup::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-inline-start: 1px solid currentColor;
  opacity: 0.15;
}

.prvnt-site-footer__eyebrow,
.prvnt-site-footer__address {
  margin: 0;
}

.prvnt-site-footer__phone {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--body-large);
}

.prvnt-site-footer__booking {
  margin-top: var(--space-xs);
}

.prvnt-site-footer__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.prvnt-site-footer__social-link {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prvnt-site-footer__bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--prvnt-white);
}

.prvnt-site-footer__service-area {
  margin: 0;
  max-width: var(--container-reading);
}

/* Footer touch targets. The footer text links are 18-25px tall, which
   is too small to tap reliably. On touch-sized widths each one gets a
   44px-tall hit area via min-height (still plain text links, no
   backgrounds or borders), and the row/stack gaps that used to
   separate them are dropped so the columns don't grow much taller. */

@media (max-width: 1099px), (pointer: coarse) {
  .prvnt-site-footer__nav .wp-block-navigation-item__content,
  .prvnt-site-footer__phone a,
  .prvnt-site-footer__social-link a,
  .prvnt-site-footer .prvnt-site-wordmark {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .prvnt-site-footer__nav .wp-block-navigation__container {
    row-gap: 0;
  }

  .prvnt-site-footer__social {
    gap: 0;
  }
}

/* Interior Page */
/* Default template shell for standard Pages (Services, New Patients,
   Insurance, About, FAQ, Contact, and future service pages). Mirrors
   the homepage's black/white editorial rhythm: a black title region
   using the same Teko display treatment as the homepage hero, then a
   white content region that keeps native Post Content at a
   controlled reading width inside the wider .prvnt-container gutter.
   The title picks up the same decorative teal accent rule used
   before Hero/section headlines sitewide, and the hero region gets a
   hairline bottom edge (matching .prvnt-site-header) so the shell
   itself reads as premium before any inserted pattern even loads.
   Post Title and Post Content are dynamic core blocks, so no
   additional markup-specific hacks are needed for common Gutenberg
   content to render correctly. */

.prvnt-page-hero {
  position: relative;
  padding-block: var(--section-space);
}

/* Services, Chiropractic Care, Red Light Therapy, Recovery /
   Performance, Supplements & Wellness Support, New Patients, About,
   FAQ, and Contact pages only: the shared Interior
   Page hero's full section-space padding reads as excessive for a
   page-title-only hero with no lede/CTA. Scoped via :has() to each
   pattern's own class so no other Page using this same shared hero
   is affected; all nine use the same tightened value so every
   refined interior hero feels consistent with the others. */

.prvnt-page-main:has(.prvnt-services-hub) .prvnt-page-hero,
.prvnt-page-main:has(.prvnt-service-chiropractic-care) .prvnt-page-hero,
.prvnt-page-main:has(.prvnt-service-red-light-therapy) .prvnt-page-hero,
.prvnt-page-main:has(.prvnt-service-recovery-performance) .prvnt-page-hero,
.prvnt-page-main:has(.prvnt-service-supplements-wellness) .prvnt-page-hero,
.prvnt-page-main:has(.prvnt-new-patients-first-visit) .prvnt-page-hero,
.prvnt-page-main:has(.prvnt-about-philosophy) .prvnt-page-hero,
.prvnt-page-main:has(.prvnt-faq-foundation) .prvnt-page-hero,
.prvnt-page-main:has(.prvnt-contact-foundation) .prvnt-page-hero,
.prvnt-page-main:has(.prvnt-page-intro) .prvnt-page-hero {
  padding-block: var(--space-xl);
}

.prvnt-page-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  border-bottom: 1px solid currentColor;
  opacity: 0.12;
}

.prvnt-page-hero__title {
  margin: 0;
}

.prvnt-page-hero__title::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

/* Post Content sits directly on the full-width .prvnt-page-content
   surface (no intervening .prvnt-container/max-width wrapper) so an
   inserted PRVNT interior pattern - which already brings its own
   surface, .prvnt-container, and section padding, exactly like a
   homepage pattern - can render edge-to-edge instead of being capped
   at reading width with a duplicate outer padding band. The section
   padding lives once on .prvnt-page-content__body itself (not on
   every child) so ordinary Page prose keeps natural block flow
   instead of a section-sized gap after every paragraph/heading/
   image; the :has() rules below zero that shared padding whenever a
   self-contained interior pattern is present, since the pattern
   supplies its own vertical rhythm. Each direct child still gets its
   own reading-width/gutter treatment, with the named pattern roots
   opted out so they can render full-width. */

.prvnt-page-content__body {
  padding-block: var(--section-space);
}

.prvnt-page-content__body:has(> .prvnt-services-hub),
.prvnt-page-content__body:has(> .prvnt-services-cta),
.prvnt-page-content__body:has(> .prvnt-new-patients-first-visit),
.prvnt-page-content__body:has(> .prvnt-insurance-overview),
.prvnt-page-content__body:has(> .prvnt-about-philosophy),
.prvnt-page-content__body:has(> .prvnt-faq-foundation),
.prvnt-page-content__body:has(> .prvnt-faq-cta),
.prvnt-page-content__body:has(> .prvnt-contact-foundation),
.prvnt-page-content__body:has(> .prvnt-service-chiropractic-care),
.prvnt-page-content__body:has(> .prvnt-chiropractic-cta),
.prvnt-page-content__body:has(> .prvnt-service-shockwave-therapy),
.prvnt-page-content__body:has(> .prvnt-service-red-light-therapy),
.prvnt-page-content__body:has(> .prvnt-service-recovery-performance),
.prvnt-page-content__body:has(> .prvnt-service-supplements-wellness),
.prvnt-page-content__body:has(> .prvnt-page-intro) {
  padding-block: 0;
}

.prvnt-page-content__body > * {
  max-width: var(--container-reading);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prvnt-page-content__body > .prvnt-services-hub,
.prvnt-page-content__body > .prvnt-services-cta,
.prvnt-page-content__body > .prvnt-new-patients-first-visit,
.prvnt-page-content__body > .prvnt-insurance-overview,
.prvnt-page-content__body > .prvnt-about-philosophy,
.prvnt-page-content__body > .prvnt-faq-foundation,
.prvnt-page-content__body > .prvnt-faq-cta,
.prvnt-page-content__body > .prvnt-contact-foundation,
.prvnt-page-content__body > .prvnt-service-chiropractic-care,
.prvnt-page-content__body > .prvnt-chiropractic-cta,
.prvnt-page-content__body > .prvnt-service-shockwave-therapy,
.prvnt-page-content__body > .prvnt-service-red-light-therapy,
.prvnt-page-content__body > .prvnt-service-recovery-performance,
.prvnt-page-content__body > .prvnt-service-supplements-wellness,
.prvnt-page-content__body > .prvnt-page-intro {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Single Post */
/* Editorial single-post shell for PRVNT Resources/Blog posts, using
   the same black/white rhythm as the Interior Page template above.
   Post Title, Post Date, Post Featured Image, and Post Content are
   all dynamic core blocks; the hero and content inner Groups each
   hold two stacked children, so the gap lives on the inner Group
   itself rather than an extra wrapper. */

.prvnt-post-hero {
  padding-block: var(--section-space);
}

.prvnt-post-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.prvnt-post-hero__title {
  margin: 0;
}

.prvnt-post-hero__date {
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--prvnt-teal);
}

.prvnt-post-content {
  padding-block: var(--section-space);
}

.prvnt-post-content__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: var(--container-reading);
  margin-inline: auto;
}

.prvnt-post-content__featured img {
  display: block;
  width: 100%;
  height: auto;
}

/* Archive / Resources Listing */
/* Editorial archive/listing shell for PRVNT Resources/Blog, using the
   same black/white rhythm as the Page and Single Post templates. The
   grid and pagination rules below target WordPress core's own
   generated Query classnames (wp-block-post-template,
   wp-block-query-pagination), since that markup is fixed core block
   output with no PRVNT-authored equivalent to hook into instead - the
   same approach already used for the Navigation block in the Site
   Header section. Both are scoped under .prvnt-archive-listing so
   they only affect this archive template and not any future Query
   usage elsewhere in the theme. Post Featured Image renders no markup
   at all when a post has no featured image, so the image sizing rule
   below never produces an empty box on posts without one. */

.prvnt-archive-hero {
  padding-block: var(--section-space);
}

.prvnt-archive-hero__title {
  margin: 0;
}

.prvnt-archive-listing {
  padding-block: var(--section-space);
}

.prvnt-archive-listing .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--space-lg);
}

.prvnt-archive-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
}

.prvnt-archive-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
}

.prvnt-archive-card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.prvnt-archive-card__date {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--prvnt-dark-teal);
}

.prvnt-archive-card__title {
  margin: 0;
}

.prvnt-archive-listing .wp-block-query-pagination {
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-family: var(--font-ui);
}

/* 404 / Not Found */
/* A single restrained black panel, not a marketing page: title, one
   sentence, and one route home, reusing the existing display/lede/
   button primitives rather than duplicating their styling. */

.prvnt-404 {
  padding-block: var(--section-space);
}

.prvnt-404__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: var(--container-reading);
}

.prvnt-404__title,
.prvnt-404__lede {
  margin: 0;
}

/* 404 viewport finish */
/* On a short 404 page the site shell can end before the viewport
   bottom, leaving bare white background below the Footer. Scoped to
   WordPress's own error404 body class so no other template's shell
   is affected: the shell becomes a min-height column so it always
   reaches at least the viewport, and prvnt-404-main is allowed to
   grow into any remaining space, painted black so that growth reads
   as a seamless continuation of the 404 panel rather than a gap. */

body.error404 .wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.error404 .prvnt-404-main {
  flex: 1 0 auto;
  background-color: var(--prvnt-black);
}

/* Services Hub */
/* Interior-page pattern for the planned /services/ hub, brought up to
   the homepage Services index standard: each item is now a two-
   column Grid (large numeral anchor beside a stacked title/link body)
   with explicit grid placement, so no pattern-markup change was
   needed even though the item's DOM order is still number, title,
   link. The numeral uses the same display-xl scale and accessible
   dark-teal foreground as the homepage index (teal-on-white numerals
   fail contrast); the wider 480px intrinsic track keeps this grid
   feeling distinct from the homepage's denser 400px one. */

.prvnt-services-hub__inner {
  padding-block: var(--section-space);
}

.prvnt-services-hub__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
  margin-bottom: var(--space-lg);
}

.prvnt-services-hub__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-services-hub__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: var(--space-xl);
}

.prvnt-services-hub__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  align-items: start;
  padding-block: var(--space-md);
}

.prvnt-services-hub__item::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.prvnt-services-hub__item-number {
  grid-column: 1;
  grid-row: 1 / 4;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--display-xl);
  line-height: 0.85;
  color: var(--prvnt-dark-teal);
  transition: color 0.2s ease;
}

.prvnt-services-hub__item-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--wp--preset--font-size--h-2);
}

.prvnt-services-hub__item-descriptor {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  max-width: 46ch;
  line-height: 1.4;
}

.prvnt-services-hub__item-link {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.prvnt-services-hub__item-link a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.prvnt-services-hub__item-link a:hover {
  color: var(--prvnt-teal);
}

/* Restrained row-level feedback, matching the homepage Explore PRVNT
   interaction: the numeral and hairline pick up the teal accent
   without implying the whole row is clickable (no cursor change, no
   fill, no shadow, no transform). :hover is gated to hover-capable
   pointers; :focus-within is not, since keyboard focus must always be
   visible regardless of input type. The link's own :hover above is
   unchanged. */

@media (hover: hover) {
  .prvnt-services-hub__item:hover::before {
    border-color: var(--prvnt-teal);
    opacity: 0.6;
  }

  .prvnt-services-hub__item:hover .prvnt-services-hub__item-number {
    color: var(--prvnt-teal);
  }
}

.prvnt-services-hub__item:focus-within::before {
  border-color: var(--prvnt-teal);
  opacity: 0.6;
}

.prvnt-services-hub__item:focus-within .prvnt-services-hub__item-number {
  color: var(--prvnt-teal);
}

/* Services Closing CTA */
/* Simple editorial CTA appended after the Services list, immediately
   before the Footer on the Services page only. Reuses the same
   title-accent-bar and lede/button conventions as First Visit and the
   other interior patterns; no image, icon, card, or gradient. */

.prvnt-services-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
  padding-block: var(--section-space);
}

.prvnt-services-cta__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-services-cta__cta {
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

/* New Patients First Visit */
/* Interior-page pattern for the planned /new-patients/ page: a more
   spacious, editorial take than the homepage's compact
   .prvnt-first-visit strip. A dark-teal surface (rather than the
   homepage's light tint) opens with an intro/portrait composition,
   then the First Visit step sequence and the Imaging section each
   run full-width beneath it as their own stages, rather than the
   steps being squeezed into a side-by-side split with the intro (the
   0.12.0 layout, corrected in 0.12.1 because it read as a sidebar
   instead of the main onboarding flow). Steps use a subtle
   currentColor/opacity divider (as on .prvnt-archive-card and
   .prvnt-services-hub__item) rather than the homepage's solid
   dark-teal border-top. A compact real PRVNT portrait sits inside the
   intro column, sized as a modest supporting visual. */

.prvnt-new-patients-first-visit__inner {
  padding-block: var(--section-space);
}

.prvnt-new-patients-first-visit__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
}

.prvnt-new-patients-first-visit__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-new-patients-first-visit__cta {
  margin: 0;
}

.prvnt-new-patients-first-visit__portrait {
  margin: var(--space-md) 0 0;
  max-width: 220px;
  aspect-ratio: 3 / 4;
}

/* The step sequence now runs the full PRVNT container width (a
   sibling of .intro rather than sharing a split with it), so it has
   room for three readable columns well before 1200px - 900px is
   reused from the same "three narrower columns need less room than
   two wider ones" reasoning already applied to the Chiropractic Care
   grid's collapse point. Steps are a single stacked column below
   that breakpoint (including mobile) and become a deliberate
   three-column editorial row above it, using a fixed breakpoint
   rather than an auto-fit track so the divider rule below can never
   disagree with the actual column count (same reasoning as
   .prvnt-service-grid__items' fixed 1100px breakpoint). Below 900px
   each stacked step keeps its own top hairline/padding (set on
   .step below) so stacked items still get a separator between them.
   At 900px+ that per-step top hairline/padding is replaced with one
   shared hairline and one shared padding-top on the row itself, so
   all three numbers/titles/descriptors start from the exact same
   value instead of three independently-computed ones. The base
   .step / .step::before rules must appear BEFORE the 900px+ media
   query below: both sides share equal specificity, so with the base
   rules first, the media query's padding-top: 0 and content: none
   correctly win at desktop width instead of being silently
   overridden by a later same-specificity base rule. */

.prvnt-new-patients-first-visit__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-block-start: var(--space-2xl);
}

/* .step is a WordPress Group, so core's own blockGap styles apply
   margin-block-start to it as a * + * sibling - the second and third
   steps received this automatic top margin while the first did not,
   pushing 01 out of alignment with 02/03 even after the 0.12.3
   cascade-order fix. The grid's own gap already provides the spacing
   between steps, so this margin is pure duplication and is reset to
   zero here. */

.prvnt-new-patients-first-visit__steps > .prvnt-new-patients-first-visit__step {
  margin-block-start: 0;
}

.prvnt-new-patients-first-visit__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md);
}

.prvnt-new-patients-first-visit__step::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
}

@media (min-width: 900px) {
  .prvnt-new-patients-first-visit__steps {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    position: relative;
    padding-top: var(--space-md);
  }

  .prvnt-new-patients-first-visit__steps::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    border-top: 1px solid currentColor;
    opacity: 0.15;
  }

  .prvnt-new-patients-first-visit__step {
    padding-top: 0;
  }

  .prvnt-new-patients-first-visit__step::before {
    content: none;
  }

  .prvnt-new-patients-first-visit__step:not(:first-child) {
    padding-inline-start: var(--space-lg);
  }

  .prvnt-new-patients-first-visit__step:not(:first-child)::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-inline-start: 1px solid currentColor;
    opacity: 0.15;
  }
}

.prvnt-new-patients-first-visit__number {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--display-xl);
  line-height: 0.85;
  color: var(--prvnt-teal);
}

.prvnt-new-patients-first-visit__step-title {
  margin: 0;
  letter-spacing: 0.02em;
}

.prvnt-new-patients-first-visit__step-descriptor {
  margin: 0;
}

.prvnt-new-patients-first-visit__imaging {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-lg);
}

.prvnt-new-patients-first-visit__imaging::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
}

/* Reviews */
/* Homepage social-proof section between Red Light Therapy and First
   Visit: a tint surface matching Trustindex's light card style, with
   the same intro/accent-bar treatment used by other interior
   sections (see .prvnt-insurance-overview__title::before). The
   widget itself is left unstyled beyond width/spacing so the
   Trustindex-generated markup and its Google attribution render as
   the plugin intends. */

.prvnt-reviews__inner {
  padding-block: var(--section-space);
}

.prvnt-reviews__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
  margin-bottom: var(--space-xl);
}

.prvnt-reviews__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-reviews__widget {
  width: 100%;
}

/* Insurance Overview */
/* Interior-page pattern for the planned /insurance/ page: a soft-gray
   tint surface with two editorial information blocks separated by a
   thin currentColor/opacity divider rather than card boxes, using the
   same intrinsic auto-fit technique already established elsewhere in
   this file so the layout stays mobile-safe without breakpoints. */

.prvnt-insurance-overview__inner {
  padding-block: var(--section-space);
}

.prvnt-insurance-overview__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
  margin-bottom: var(--space-xl);
}

.prvnt-insurance-overview__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-insurance-overview__blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: var(--space-xl);
}

.prvnt-insurance-overview__block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md);
}

/* Core's blockGap margin lands on every block after the first, which
   sat the first block higher than the rest of its row. The grid's own
   gap already spaces the blocks. */

.prvnt-insurance-overview__blocks > .prvnt-insurance-overview__block {
  margin-block-start: 0;
}

.prvnt-insurance-overview__block::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
}

.prvnt-insurance-overview__block-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--h-3);
}

.prvnt-insurance-overview__block-text {
  margin: 0;
}

/* About Philosophy */
/* Interior-page pattern for the /about/ page: a black brand-statement
   opens the page, then a white image/approach detail (the same
   asymmetric min(100%, Npx) Flexbox technique used throughout this
   file), a tint three-principle row, a dark-teal "why PRVNT" section,
   a quiet white local statement, and a dark-teal closing CTA - six
   full-width stages in a deliberate black/white/tint/dark-teal
   rhythm, each its own top-level child of .prvnt-about-philosophy so
   no new entries are needed in the shared .prvnt-page-content__body
   full-width opt-out lists (only the single outer wrapper class is
   registered there). */

.prvnt-about-philosophy__statement-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: var(--container-reading);
  padding-block: var(--section-space);
}

.prvnt-about-philosophy__title::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-about-philosophy__detail-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-xl);
  padding-block: var(--section-space);
}

.prvnt-about-philosophy__media {
  flex: 1 1 min(100%, 360px);
  min-height: clamp(320px, 42vw, 480px);
}

.prvnt-about-philosophy__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1.2 1 min(100%, 420px);
  max-width: var(--container-reading);
}

.prvnt-about-philosophy__content-title::before,
.prvnt-about-philosophy__why-title::before,
.prvnt-about-philosophy__cta-title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-about-philosophy__body {
  margin: 0;
}

/* Three Principles */
/* Same corrected technique used by the New Patients First Visit
   steps: base .principle / .principle::before rules are declared
   before the 900px+ media query (equal specificity, so source order
   must put the override second or it silently loses), and the
   principle's own WordPress-Group blockGap margin is reset since the
   grid's gap already supplies the spacing between principles. */

.prvnt-about-philosophy__principles-inner {
  padding-block: var(--section-space);
}

.prvnt-about-philosophy__principles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.prvnt-about-philosophy__principles-grid > .prvnt-about-philosophy__principle {
  margin-block-start: 0;
}

.prvnt-about-philosophy__principle {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md);
}

.prvnt-about-philosophy__principle::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
}

@media (min-width: 900px) {
  .prvnt-about-philosophy__principles-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    position: relative;
    padding-top: var(--space-md);
  }

  .prvnt-about-philosophy__principles-grid::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    border-top: 1px solid currentColor;
    opacity: 0.15;
  }

  .prvnt-about-philosophy__principle {
    padding-top: 0;
  }

  .prvnt-about-philosophy__principle::before {
    content: none;
  }

  .prvnt-about-philosophy__principle:not(:first-child) {
    padding-inline-start: var(--space-lg);
  }

  .prvnt-about-philosophy__principle:not(:first-child)::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-inline-start: 1px solid currentColor;
    opacity: 0.15;
  }
}

.prvnt-about-philosophy__principle-label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--prvnt-dark-teal);
}

.prvnt-about-philosophy__principle-text {
  margin: 0;
}

/* Why PRVNT / Local Statement / Closing CTA */
/* Three simple single-column stages sharing the same
   intro-block shape already used elsewhere (flex column, gap,
   reading-width cap, section-space padding). */

.prvnt-about-philosophy__why-inner,
.prvnt-about-philosophy__local-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
  padding-block: var(--section-space);
}

.prvnt-about-philosophy__cta-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
  padding-block: var(--section-space);
}

.prvnt-about-philosophy__cta-buttons {
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

/* FAQ Foundation */
/* Interior-page pattern for the /faq/ page, built on the native core
   Details block so disclosure is keyboard-operable with no
   JavaScript - .prvnt-faq-foundation__item stays the real, native
   <details>/<summary> element throughout; only its visual presentation
   is styled here. The native disclosure triangle is swapped for a
   restrained "+" indicator that rotates to a "×" when open (CSS only,
   via ::after and the details element's own [open] attribute - no
   script, no custom accordion logic), since the browser-default
   triangle varies in size/style across browsers and reads as less
   deliberate than the rest of the PRVNT system. Each item still gets
   the same short currentColor/opacity top rule used throughout this
   file rather than a card boundary, and the answer paragraph gets an
   explicit top margin instead of relying on the browser's own
   default <p> spacing. */

.prvnt-faq-foundation__inner {
  padding-block: var(--section-space);
}

.prvnt-faq-foundation__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
  margin-bottom: var(--space-xl);
}

.prvnt-faq-foundation__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-faq-foundation__list {
  display: flex;
  flex-direction: column;
  max-width: var(--container-reading);
}

.prvnt-faq-foundation__item {
  position: relative;
  padding-block: var(--space-md);
}

.prvnt-faq-foundation__item::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
}

.prvnt-faq-foundation__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  list-style: none;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
}

.prvnt-faq-foundation__item summary::-webkit-details-marker {
  display: none;
}

.prvnt-faq-foundation__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 600;
  line-height: 1;
  color: var(--prvnt-dark-teal);
  transition: transform 0.2s ease;
}

.prvnt-faq-foundation__item[open] summary::after {
  transform: rotate(45deg);
}

.prvnt-faq-foundation__item p {
  margin: var(--space-sm) 0 0;
  max-width: var(--container-reading);
}

/* FAQ Closing CTA */
/* Simple editorial CTA appended after the FAQ list, immediately
   before the Footer. Reuses the same title-accent-bar and
   lede/button conventions as the other closing CTAs (Services,
   Chiropractic Care, About); the two-button row is the first use of
   .prvnt-button--secondary on a dark-teal surface, which needed the
   color-inherit fix above. */

.prvnt-faq-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
  padding-block: var(--section-space);
}

.prvnt-faq-cta__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-faq-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

/* Page Intro */
/* Shared black editorial intro band for the New Patients, Insurance,
   and FAQ pages, matching the black intro Contact and About open
   with: a teal eyebrow label, an expressive display headline with the
   short teal accent bar above it, and the page's own supporting lede,
   directly under the black page-title hero. It is a top-level block
   of the page content (registered in the full-width opt-out lists
   above), so the blockGap margin that would otherwise show as a white
   band between it and the next section is reset here. */

.prvnt-page-content__body > .prvnt-page-intro + * {
  margin-block-start: 0;
}

.prvnt-page-intro__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
  padding-block: var(--section-space);
}

.prvnt-page-intro__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

/* Contact Foundation */
/* Interior-page pattern for the /contact/ page: a stacked black-intro
   / white-detail composition (the same technique as
   .prvnt-about-philosophy). The white detail region pairs a real
   PRVNT media plane with the LOCATION/HOURS/BOOKING blocks (stacked
   in .prvnt-contact-foundation__blocks) using the same asymmetric
   Flexbox technique used elsewhere in this file, each block keeping
   its own subtle currentColor/opacity top rule rather than a card
   boundary. Media and blocks now share an equal flex-grow (rather
   than blocks outweighing media 1.4:1) so the authentic waiting-room
   photo carries real visual weight instead of reading as a sidebar
   next to a directory-style text column. */

.prvnt-contact-foundation__intro-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
  padding-block: var(--section-space);
}

.prvnt-contact-foundation__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-contact-foundation__detail-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-xl);
  padding-block: var(--section-space);
}

/* Fixed 4:3 aspect-ratio (rather than min-height alone) gives this
   wrapper a real, deterministic box: min-height only sets a floor
   the actual <img> doesn't reliably fill, which let the shared
   .prvnt-media::after decorative frame (sized to the wrapper) extend
   below the rendered photo. aspect-ratio on the wrapper itself gives
   height:100% on .prvnt-media img something definite to resolve
   against, so the photo and the frame now terminate at the same
   edge. Contact-only - the shared .prvnt-media system and every
   other page using it are untouched. */

.prvnt-contact-foundation__media {
  flex: 1 1 min(100%, 420px);
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.prvnt-contact-foundation__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  flex: 1 1 min(100%, 420px);
}

.prvnt-contact-foundation__block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md);
}

.prvnt-contact-foundation__block::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
}

.prvnt-contact-foundation__block--booking {
  gap: var(--space-sm);
}

.prvnt-contact-foundation__block-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--h-2);
}

.prvnt-contact-foundation__block-text {
  margin: 0;
}

/* LOCATION actions: restrained text links (same uppercase-label
   convention as .prvnt-services-hub__item-link) rather than full
   buttons, per the "visually restrained" requirement. */

.prvnt-contact-foundation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}

.prvnt-contact-foundation__action {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.prvnt-contact-foundation__action a {
  text-decoration: none;
  color: var(--prvnt-dark-teal);
  transition: color 0.2s ease;
}

.prvnt-contact-foundation__action a:hover {
  color: var(--prvnt-teal);
}

/* HOURS: each native List Item becomes a day/left, time/right row
   (day and time are separate inline spans in the pattern source, but
   the day/time text itself is unchanged from before) so the block
   reads as a deliberate schedule rather than a plain bulleted list.
   Below 480px the row stacks (day above time) instead of forcing a
   long time range onto the same line as the day, so neither the type
   needs to shrink nor the row can overflow. */

.prvnt-contact-foundation__hours {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  font-size: var(--wp--preset--font-size--body-large);
}

.prvnt-contact-foundation__hours-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  padding-block: var(--space-xs);
}

.prvnt-contact-foundation__hours-row:not(:first-child) {
  padding-top: var(--space-sm);
}

.prvnt-contact-foundation__hours-row:not(:first-child)::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.12;
}

.prvnt-contact-foundation__hours-day {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.prvnt-contact-foundation__hours-time {
  text-align: right;
  color: var(--prvnt-body);
}

@media (max-width: 480px) {
  .prvnt-contact-foundation__hours-row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .prvnt-contact-foundation__hours-time {
    text-align: left;
  }
}

.prvnt-contact-foundation__booking {
  margin: 0;
}

/* Homepage mobile art direction */
/* A single consolidated ~480px breakpoint (matching the ~390px
   mobile target with a little buffer) rather than scattered
   per-section breakpoints, tightening spacing/scale on a few
   homepage components that otherwise inherit desktop-proportioned
   values reasonably but not ideally at narrow widths. Everything
   else on the homepage already collapses correctly through the
   existing intrinsic min(100%, Npx)/auto-fit techniques and needs no
   override here. */

@media (max-width: 480px) {
  .prvnt-site-header__actions {
    gap: var(--space-sm);
  }

  .prvnt-site-header__cta {
    padding-inline-start: var(--space-sm);
  }

  .prvnt-credibility-strip__inner {
    gap: var(--space-sm);
  }

  .prvnt-service-grid__item-number {
    font-size: var(--wp--preset--font-size--h-1);
  }

  .prvnt-site-footer__contact,
  .prvnt-site-footer__connect {
    padding-inline-start: var(--space-sm);
  }
}

/* Smallest phones: tighten the three header gaps one step so the
   horizontal logo keeps a readable width beside the hamburger and
   CTA on one row. */

@media (max-width: 375px) {
  .prvnt-site-header__inner,
  .prvnt-site-header__actions {
    gap: var(--space-xs);
  }

  .prvnt-site-header__cta {
    padding-inline-start: var(--space-xs);
  }
}

/* Service Detail */
/* Shared primitives for the service-detail patterns (Chiropractic
   Care, Shockwave Therapy, Red Light Therapy, Recovery /
   Performance, Supplements & Wellness Support). Each
   pattern otherwise reuses the existing .prvnt-feature-section
   system directly - the same shared class/eyebrow/title/media
   structure and modifiers already used by the homepage's four
   feature spreads - so surface, composition, and media-frame
   treatment come for free with no new layout CSS. CTA spacing, the
   "Explore all services" back-link, the affiliate-disclosure
   caption, and the conservative H3 sub-section heading (Flexion-
   Distraction, Cupping, Digital X-Ray Referrals) each needed a small
   shared rule of their own. Chiropractic Care is the one exception:
   its own "Chiropractic Care Detail" block below gives it a
   dedicated multi-section grid instead of the single
   .prvnt-feature-section__content column the other five still use. */

.prvnt-service-detail__cta {
  margin: 0;
}

.prvnt-service-detail__back-link {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.prvnt-service-detail__back-link a {
  text-decoration: none;
}

/* Standalone text-link touch targets. These text links (Contact
   actions and phone, the "Learn more" links on the homepage and
   Services page, and the service-detail "Explore all services" link)
   are only 18-21px tall. On touch-sized widths each gets a 44px-tall
   hit area via min-height; they stay plain text links with their
   existing typography and colors. */

@media (max-width: 1099px), (pointer: coarse) {
  .prvnt-contact-foundation__block-text a,
  .prvnt-contact-foundation__action a,
  .prvnt-service-grid__item-link a,
  .prvnt-services-hub__item-link a,
  .prvnt-service-detail__back-link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.prvnt-service-detail__disclosure {
  margin: 0;
  max-width: var(--container-reading);
  font-size: var(--wp--preset--font-size--label);
  opacity: 0.75;
}

.prvnt-service-detail__subheading {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 600;
}

/* Chiropractic Care Detail */
/* Restructures this one service-detail pattern's single content
   column into four independently-orderable editorial sections
   (intro, an individual approach, technique spotlight, cta) plus the
   media, placed directly as CSS Grid items inside
   .prvnt-feature-section__inner - no .prvnt-feature-section__content
   wrapper here - so the image can move earlier in the mobile reading
   order via grid-template-areas alone, with no duplicated markup.
   Everything is scoped through the
   .prvnt-service-chiropractic-care__grid/__section/__media modifiers
   so the shared .prvnt-feature-section/--chiropractic rules used by
   the homepage's Chiropractic Feature section (and the other five
   service-detail patterns, which still use the single-column
   .prvnt-feature-section__content) are completely untouched. The
   container selector combines both classes so it reliably wins over
   the higher-specificity .prvnt-feature-section--chiropractic
   .prvnt-feature-section__inner rule regardless of source order. */

.prvnt-feature-section__inner.prvnt-service-chiropractic-care__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas:
    "intro     media"
    "approach  media"
    "technique media"
    "cta       media";
  align-items: start;
  column-gap: var(--space-xl);
  row-gap: 0;
}

.prvnt-service-chiropractic-care__section--intro {
  grid-area: intro;
}

.prvnt-service-chiropractic-care__media {
  grid-area: media;
}

.prvnt-service-chiropractic-care__section--approach {
  grid-area: approach;
}

.prvnt-service-chiropractic-care__section--technique {
  grid-area: technique;
}

.prvnt-service-chiropractic-care__section--cta {
  grid-area: cta;
}

.prvnt-service-chiropractic-care__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Each section after the intro gets its own hairline top rule plus
   real spacing above it, so the column reads as a sequence of
   distinct editorial moments rather than one continuous article -
   no cards, no background fills, no icons. */

.prvnt-service-chiropractic-care__section--approach,
.prvnt-service-chiropractic-care__section--technique,
.prvnt-service-chiropractic-care__section--cta {
  position: relative;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
}

.prvnt-service-chiropractic-care__section--approach::before,
.prvnt-service-chiropractic-care__section--technique::before,
.prvnt-service-chiropractic-care__section--cta::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
}

/* Below ~900px the two-column grid collapses to a single column and
   grid-template-areas reorders the image to appear right after the
   intro section, per the approved mobile reading order - the same
   image element, repositioned with no markup duplication. 900px
   approximates where the old flex-basis system (420px content + 380px
   media + gap) would have wrapped on its own. */

@media (max-width: 900px) {
  .prvnt-feature-section__inner.prvnt-service-chiropractic-care__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "media"
      "approach"
      "technique"
      "cta";
  }
}

/* Chiropractic Care Closing CTA */
/* Simple editorial CTA appended after the two-column section,
   immediately before the Footer on the Chiropractic Care page only.
   Reuses the same title-accent-bar and lede/button conventions as the
   Services closing CTA and First Visit; no image, icon, card, or
   gradient. */

.prvnt-chiropractic-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-reading);
  padding-block: var(--section-space);
}

.prvnt-chiropractic-cta__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: var(--space-sm);
  background-color: var(--prvnt-teal);
}

.prvnt-chiropractic-cta__cta {
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

/* Red Light Therapy Detail */
/* Light editorial polish only - the image-first flex layout, the
   dark-teal surface, and .prvnt-feature-section__content's own
   column/gap stay exactly as shared with the homepage Red Light
   section and every other service-detail pattern. The only change is
   grouping the existing copy into named sections
   (.prvnt-service-red-light-therapy__section) scoped to this pattern
   alone, so a hairline rule can mark three separate editorial moments
   instead of one continuous paragraph run. padding-top (not
   margin-top) is used deliberately: .prvnt-feature-section__content
   already supplies a gap between these sections, so adding padding
   on top of that gap (rather than a second margin) avoids doubling
   the shared spacing value. */

.prvnt-service-red-light-therapy__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.prvnt-service-red-light-therapy__section--experience,
.prvnt-service-red-light-therapy__section--location,
.prvnt-service-red-light-therapy__section--cta {
  position: relative;
  padding-top: var(--space-md);
}

.prvnt-service-red-light-therapy__section--experience::before,
.prvnt-service-red-light-therapy__section--location::before,
.prvnt-service-red-light-therapy__section--cta::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
}

/* Recovery / Performance Detail */
/* Same light editorial polish as Red Light Therapy - the image-first
   flex layout, black surface, and .prvnt-feature-section__content's
   own column/gap stay exactly as shared with the homepage
   Performance + Recovery section and every other service-detail
   pattern. The only change is grouping the existing copy into named
   sections (.prvnt-service-recovery-performance__section) scoped to
   this pattern alone, so a hairline rule can mark four separate
   editorial moments instead of one continuous text stack.
   padding-top (not margin-top) is used deliberately, for the same
   reason as Red Light Therapy: .prvnt-feature-section__content
   already supplies a gap between these sections, so adding padding
   on top of that gap avoids doubling the shared spacing value. */

.prvnt-service-recovery-performance__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.prvnt-service-recovery-performance__section--individualized,
.prvnt-service-recovery-performance__section--modality,
.prvnt-service-recovery-performance__section--location,
.prvnt-service-recovery-performance__section--cta {
  position: relative;
  padding-top: var(--space-md);
}

.prvnt-service-recovery-performance__section--individualized::before,
.prvnt-service-recovery-performance__section--modality::before,
.prvnt-service-recovery-performance__section--location::before,
.prvnt-service-recovery-performance__section--cta::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
}

/* Supplements & Wellness Support Detail */
/* The pattern's previous empty Cover placeholder has been removed
   from the markup entirely (no media element at all now), so the
   remaining single .prvnt-feature-section__content flex child is
   centered within .prvnt-feature-section__inner instead of hugging
   the row's start edge, so the text-only composition reads as
   deliberate rather than like a missing asset. The editorial-section
   grouping and hairline treatment mirror Red Light Therapy and
   Recovery / Performance; the CTA section deliberately gets
   no internal divider between the button and the referral disclosure
   so the two stay visually associated. padding-top (not margin-top)
   avoids doubling .prvnt-feature-section__content's own gap. */

.prvnt-service-supplements-wellness .prvnt-feature-section__inner {
  justify-content: center;
}

.prvnt-service-supplements-wellness__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.prvnt-service-supplements-wellness__section--general,
.prvnt-service-supplements-wellness__section--access,
.prvnt-service-supplements-wellness__section--cta {
  position: relative;
  padding-top: var(--space-md);
}

.prvnt-service-supplements-wellness__section--general::before,
.prvnt-service-supplements-wellness__section--access::before,
.prvnt-service-supplements-wellness__section--cta::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid currentColor;
  opacity: 0.15;
}