/*
 * CAAH conversion, acquisition-page, and accessibility styles.
 *
 * Kept in its own stylesheet rather than appended to style.css so the 4,178-line theme
 * stylesheet stays byte-identical to the copy verified against production, which keeps
 * the pending production PHP/asset diff readable.
 *
 * Everything here reuses the theme's existing custom properties, so dark mode, radii,
 * and colour follow the theme automatically.
 */

/* ----------------------------------------------------------------------- logo
 *
 * Four ~140 KB PNG nodes (desktop + mobile, light + dark) replaced by two responsive
 * <picture> elements serving WebP at 340w/680w. The pre-existing .light-mode-logo /
 * .dark-mode-logo display rules in style.css still do the theme switching; these rules
 * restore the sizing that used to key off .brand-logo-desktop / .brand-logo-mobile.
 */

.brand-logo-picture {
  line-height: 0;
}

.brand-logo-picture.light-mode-logo {
  display: block;
}

.brand-logo-picture.dark-mode-logo {
  display: none;
}

html.dark-mode .brand-logo-picture.light-mode-logo {
  display: none;
}

html.dark-mode .brand-logo-picture.dark-mode-logo {
  display: block;
}

.brand-logo-picture .brand-logo {
  display: block;
  height: 96px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 1150px) {
  .brand-logo-picture .brand-logo {
    height: 48px;
    border-radius: 8px;
  }
}

/* The primary nav gained Services and New Patients; keep each label on one line. */
.site-nav.desktop-only > a,
.site-nav.desktop-only .nav-dropdown-toggle {
  white-space: nowrap;
}

.mobile-menu-address {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- breadcrumbs */

.caah-breadcrumbs {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  font-size: 0.86rem;
}

.caah-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

.caah-breadcrumbs li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.55;
}

.caah-breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.caah-breadcrumbs a:hover,
.caah-breadcrumbs a:focus-visible {
  color: var(--ink);
  border-bottom-color: currentColor;
}

/* --------------------------------------------------------------- status line */

.caah-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  color: var(--ink);
  line-height: 1.6;
}

.caah-status-text {
  font-weight: 500;
}

.caah-status-notice {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.92rem;
}

.caah-cta-row {
  flex-wrap: wrap;
}

.caah-cta-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ------------------------------------------------------ sticky mobile actions */

.caah-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: none;
  gap: 2px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--cream);
  border-top: 1px solid rgba(31, 32, 39, 0.12);
  box-shadow: 0 -8px 24px rgba(31, 32, 39, 0.12);
}

.caah-actionbar-item {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 48px;
}

.caah-actionbar-item--primary {
  background: var(--primary);
  color: #fff;
}

.caah-actionbar-item:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

html.dark-mode .caah-actionbar {
  background: #1e1e1e;
  border-top-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
  .caah-actionbar {
    display: flex;
  }

  body.caah-has-actionbar {
    padding-bottom: 76px;
  }
}

/* ------------------------------------------------------------------- concierge */

.caah-concierge {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 940;
  max-width: min(360px, calc(100vw - 32px));
}

@media (max-width: 900px) {
  .caah-concierge {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

.caah-concierge-launch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(31, 32, 39, 0.12);
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(31, 32, 39, 0.16);
}

html.dark-mode .caah-concierge-launch,
html.dark-mode .caah-concierge-panel {
  background: #1e1e1e;
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ink);
}

.caah-concierge-panel {
  margin-top: 10px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--cream);
  border: 1px solid rgba(31, 32, 39, 0.12);
  box-shadow: var(--shadow);
}

.caah-concierge-title {
  margin: 0 0 10px;
  font-weight: 700;
}

.caah-concierge-intents {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.caah-concierge-intents a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(223, 57, 66, 0.08);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}

.caah-concierge-intents a:hover,
.caah-concierge-intents a:focus-visible {
  background: rgba(223, 57, 66, 0.16);
}

.caah-concierge-note {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.caah-concierge-note--small {
  font-size: 0.78rem;
}

/* ------------------------------------------------- cherry floating estimator */
/*
 * The Cherry estimator is injected at runtime by files.withcherry.com (see the
 * CHERRY WIDGET block in footer.php) and ships hashed CSS-module class names of
 * the form floatingEstimator-<part>-<hash>. The hash changes between vendor
 * releases, so match on the stable prefix with [class*="..."]. The vendor
 * stylesheet is injected into <head> after this file at equal specificity, so
 * the overrides need !important to win the cascade.
 *
 * Three corrections, all below the desktop breakpoint:
 *
 *   1. The vendor pins the pill 32px from the bottom of the viewport at
 *      z-index 9999. At <=900px .caah-actionbar occupies the bottom 72px at
 *      z-index 950, so the pill sat on top of the Call and Directions targets
 *      and swallowed those taps. Lift it onto the concierge row instead.
 *
 *   2. The vendor locks the pill to width: 240px from 768px down while both
 *      lines inside it keep white-space: nowrap. The subtext renders 268px wide,
 *      so it spilled 28px past the pill's rounded edge. Let the pill size to its
 *      own content, bounded by the viewport.
 *
 *   3. The vendor only drops to its compact pill -- icon plus title, 32px tall,
 *      no subtext -- at <=480px. CAAH switches to that minimized form from
 *      700px down, so the declarations the vendor applies at <=480px are lifted
 *      to <=700px here. Below 480px the vendor's own rules take over unchanged.
 *
 * The open calculator is deliberately left alone: it is a modal surface and is
 * meant to cover the action bar.
 */

@media (max-width: 900px) {
  [class*="floatingEstimator-floatingContainer-"] {
    bottom: calc(var(--custom-floating-estimator-offset-y, 0px) + 84px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 768px) {
  [class*="floatingEstimator-floatingButton-"] {
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    overflow: hidden;
  }

  [class*="floatingEstimator-buttonContent-"],
  [class*="floatingEstimator-buttonTextContainer-"] {
    min-width: 0;
  }

  /* Safety net: if the pill ever hits its max-width, the nowrap lines truncate
     inside the bubble rather than spilling out of it again. */
  [class*="floatingEstimator-buttonText-"],
  [class*="floatingEstimator-buttonSubtext-"] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Minimized pill from 700px down. Same treatment the vendor ships at <=480px:
   the subtext is dropped whole (its desktop/mobile value-prop spans live inside
   it), and the pill shrinks to a 32px-tall icon-plus-title chip. */
@media (max-width: 700px) {
  [class*="floatingEstimator-floatingButton-"] {
    height: 32px !important;
    padding: 4px 8px 4px 4px !important;
  }

  [class*="floatingEstimator-buttonSubtext-"] {
    display: none !important;
  }
}

/* Below ~370px the row cannot hold both: the concierge launcher runs to 205px and
   the minimized pill (139px + 16px inset) starts at 100vw - 155px, so at 320px
   they overlap by 40px and the pill covers the launcher. Move the concierge up a
   row instead of the pill. Its panel is anchored by the container's bottom edge
   and grows upward, so raising the launcher keeps the open panel clear of the
   pill too. */
@media (max-width: 369px) {
  .caah-concierge {
    bottom: calc(136px + env(safe-area-inset-bottom));
  }
}


/* ------------------------------------------------------------------ NAP card */

.caah-nap-card .caah-hours-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.caah-nap-status {
  margin: 0 0 12px;
}

.caah-nap-address,
.caah-nap-phone {
  margin: 0 0 8px;
}

.caah-nap-phone a {
  font-weight: 700;
  color: var(--ink);
}

/* ------------------------------------------------------------------------ FAQ */

.caah-faq-list {
  display: grid;
  gap: 12px;
}

.caah-faq-item {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(31, 32, 39, 0.1);
  padding: 16px 20px;
}

html.dark-mode .caah-faq-item {
  background: #1e1e1e;
  border-color: rgba(255, 255, 255, 0.12);
}

.caah-faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
}

.caah-faq-item summary::-webkit-details-marker {
  display: none;
}

.caah-faq-item summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  opacity: 0.6;
}

.caah-faq-item[open] summary::after {
  content: "\2013";
}

.caah-faq-answer {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.7;
}

.caah-faq-answer p {
  margin: 0 0 10px;
}

/* ---------------------------------------------------------------- lead form */

.caah-lead-section {
  scroll-margin-top: 96px;
}

.caah-lead-shell {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 16px 30px rgba(31, 32, 39, 0.08);
}

html.dark-mode .caah-lead-shell {
  background: #1e1e1e;
}

@media (min-width: 900px) {
  .caah-lead-shell {
    grid-template-columns: minmax(240px, 0.8fr) 1.2fr;
    align-items: start;
  }
}

.caah-lead-privacy,
.caah-lead-alt {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.caah-lead-urgent {
  color: var(--primary);
}

.caah-textlink {
  color: var(--primary);
  font-weight: 700;
}

.caah-field-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .caah-field-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.caah-field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.caah-field label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}

.caah-field input,
.caah-field select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(31, 32, 39, 0.22);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

html.dark-mode .caah-field input,
html.dark-mode .caah-field select {
  background: #121212;
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--ink);
}

.caah-field input:focus-visible,
.caah-field select:focus-visible,
.caah-lead-form button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.caah-consent {
  margin-top: 16px;
}

.caah-consent label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}

.caah-consent input {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  flex: none;
}

.caah-submit {
  margin: 18px 0 0;
}

.caah-submit .btn {
  width: 100%;
}

@media (min-width: 620px) {
  .caah-submit .btn {
    width: auto;
  }
}

.caah-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.caah-lead-success,
.caah-lead-error {
  border-radius: var(--radius-md);
  padding: 18px 20px;
  line-height: 1.6;
}

.caah-lead-success {
  background: rgba(47, 141, 122, 0.12);
  color: var(--ink);
}

.caah-lead-error {
  background: rgba(223, 57, 66, 0.12);
  color: var(--ink);
}

/* --------------------------------------------------------- emergency notice */

.caah-emergency {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  border-radius: var(--radius-md);
  border: 2px solid var(--primary);
  background: rgba(223, 57, 66, 0.08);
  padding: 18px 22px;
  color: var(--ink);
  line-height: 1.65;
}

.caah-emergency strong {
  display: block;
  margin-bottom: 6px;
}

/* --------------------------------------------------------- steps and lists */

.caah-steps {
  counter-reset: caah-step;
  display: grid;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.caah-steps li {
  position: relative;
  padding-left: 52px;
  line-height: 1.7;
  color: var(--muted);
}

.caah-steps li strong {
  display: block;
  color: var(--ink);
  margin-bottom: 4px;
}

.caah-steps li::before {
  counter-increment: caah-step;
  content: counter(caah-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.caah-checklist {
  margin: 0;
  padding: 0 0 0 20px;
  color: var(--muted);
  line-height: 1.8;
}

.caah-two-col {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .caah-two-col {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
  }
}

.caah-cta-band-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------- media */

/* caah_image() wraps in <picture> once AVIF/WebP derivatives exist, so the wrapper has
   to inherit the sizing the bare <img> used to get. */
.hero-bg-image picture,
.carousel-item picture,
.caah-media-figure picture {
  display: block;
  width: 100%;
  height: 100%;
}

.caah-hero-media img,
.caah-media-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.caah-media-figure figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.86rem;
}

/* The 404 photo is a friendly aside, not a hero: cap it so it cannot fill the viewport
   on a wide screen and push the recovery links below the fold. */
.caah-404-figure {
  max-width: 720px;
  margin-inline: auto;
}

.caah-404-figure figcaption {
  text-align: center;
}

.caah-video {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

/* ---------------------------------------------------------------- promotions */

.caah-offer-past {
  opacity: 0.92;
}

.caah-offer-ended {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(31, 28, 26, 0.1);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.82rem;
}

.caah-offer-empty {
  color: var(--muted);
  line-height: 1.7;
}

/* --------------------------------------------------------------- LP template */

body.caah-lp {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.caah-lp h1,
body.caah-lp h2,
body.caah-lp h3,
body.caah-lp .section-head h2 {
  font-family: Georgia, "Times New Roman", serif;
}

body.caah-lp .site-main {
  gap: 48px;
}

body.caah-lp .reveal {
  opacity: 1 !important;
  transform: none !important;
}

.caah-lp-hero {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  padding: 24px 0 0;
}

@media (min-width: 900px) {
  .caah-lp-hero {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }
}

.caah-lp-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.92rem;
}

.caah-lp-proof li {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(31, 32, 39, 0.06);
}

html.dark-mode .caah-lp-proof li {
  background: rgba(255, 255, 255, 0.08);
}

.caah-lp-footer {
  max-width: var(--max-width);
  margin: 0 auto 40px;
  width: 100%;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.7;
  border-top: 1px solid rgba(31, 32, 39, 0.12);
  padding-top: 18px;
}

/* -------------------------------------------------------------- misc a11y */

.caah-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--primary);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) 0;
}

.caah-skip-link:focus {
  left: 0;
}

.caah-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .caah-actionbar,
  .caah-concierge-panel,
  .btn {
    transition: none !important;
  }

  .caah-hero-loop {
    display: none !important;
  }

  .caah-hero-loop-poster {
    display: block !important;
  }
}

.caah-hero-loop-poster {
  display: none;
}

/* ------------------------------------------------- dark mode: light hero card */
/* The .page-hero card deliberately keeps its light gradient in dark mode
   (style.css sets its h1/.lead/.eyebrow back to dark text). The status line,
   pills, and the lp-proof meta row inherit the GLOBAL dark-mode colors
   (white/#ccc text, white-tinted pill backgrounds), which is unreadable on the
   light card. Scope them back to their light-theme colors inside the hero. */
html.dark-mode .page-hero .caah-status,
html.dark-mode .page-hero .caah-status-text {
  color: #1f1c1a;
}

html.dark-mode .page-hero .caah-status-notice {
  color: #5d5b62;
}

html.dark-mode .page-hero .pill {
  /* literal light-theme --secondary: the var itself flips light in dark mode */
  color: #C52029 !important;
}

html.dark-mode .page-hero .pill.warning {
  color: #b37700 !important;
  background: rgba(240, 181, 106, 0.2);
}

html.dark-mode .page-hero .pill.closed {
  color: #5d5b62 !important;
  background: rgba(31, 28, 26, 0.1);
}

html.dark-mode .page-hero .caah-lp-proof {
  color: #5d5b62;
}

html.dark-mode .page-hero .caah-lp-proof li {
  background: rgba(31, 32, 39, 0.06);
}