/* ============================================================
   REHABSEEK — IGNE UX Framework stylesheet
   Rewritten clean in this pass to remove duplicate/conflicting
   rules inherited from the original WordPress theme merge —
   those duplicates were the root cause of the mobile nav toggle
   bug (a later media query set `.rs-nav { display: none }` with
   no corresponding `.rs-nav-open` override anywhere in the file).
   One rule per selector, organized top to bottom by page order.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --rs-primary: #176AA8;
  --rs-primary-dark: #102D52;
  --rs-primary-light: #EAF4FC;
  --rs-primary-border: #B8D8F2; /* light-blue border tint, e.g. the "For Providers" button outline */
  --rs-secondary: #F59E0B;
  --rs-secondary-dark: #D97706;
  --rs-accent: #102D52;
  --rs-accent-light: #0B2442;
  --rs-white: #FFFFFF;
  --rs-gray-50: #F7FAFC;
  --rs-gray-100: #F1F5F9;
  --rs-gray-200: #DBE5EE;
  --rs-gray-300: #CBD5E1;
  --rs-gray-400: #94A3B8;
  --rs-gray-500: #5D7088;
  --rs-gray-600: #475569;
  --rs-gray-700: #334155;
  --rs-gray-800: #1E293B;
  --rs-gray-900: #0F172A;
  --rs-danger: #D83F48;
  --rs-danger-dark: #BD3039;
  --rs-success: #059669;
  --rs-warning: #EA580C;
  --rs-info: #2563EB;
  --rs-radius-sm: 4px;
  --rs-radius-md: 8px;
  --rs-radius-lg: 12px;
  --rs-radius-xl: 16px;
  --rs-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --rs-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --rs-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --rs-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --rs-transition: all 0.2s ease-in-out;
  /* Serif is deliberately NOT the global heading font — it's reserved for
     the logo and hero-style H1s (.rs-hero, .rs-page-hero), matching how
     restrained the reference design itself is with it (only the wordmark
     and the hero headline use it; feature titles, nav links, and section
     titles all stay sans-serif). Applying it to every h1-h6 sitewide would
     put a heavy serif on things like FAQ headers and legal-page subheads
     that the reference design never does. */
  --rs-font-serif: 'Libre Baskerville', Georgia, serif;
  --rs-font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rs-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rs-header-h: 72px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--rs-font-body);
  color: var(--rs-gray-800);
  background-color: var(--rs-gray-50);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rs-font-heading);
  font-weight: 700;
  color: var(--rs-gray-900);
  line-height: 1.25;
}

a { color: var(--rs-primary); transition: var(--rs-transition); }
a:hover { color: var(--rs-primary-dark); }

/* ---------- Crisis bar ---------- */
.rs-crisis-bar {
  background: linear-gradient(135deg, var(--rs-danger) 0%, var(--rs-danger-dark) 100%);
  color: var(--rs-white);
  padding: 10px 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  z-index: 1002;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.rs-crisis-bar a { color: var(--rs-white); text-decoration: underline; font-weight: 700; }
.rs-crisis-bar a:hover { color: #FECACA; }
.rs-crisis-sep { opacity: .5; }

/* ---------- Header ---------- */
.rs-header {
  background: var(--rs-white);
  box-shadow: var(--rs-shadow-sm);
  position: sticky;
  top: 0;
  /* This creates a new stacking context (position != static + explicit
     z-index), which traps .rs-nav's own z-index (nested inside .rs-header)
     from ever competing directly against .rs-nav-scrim (a sibling, outside
     .rs-header). If this value changes, re-check the scrim's z-index
     comment below — the scrim only needs to lose against THIS number, not
     .rs-nav's internal one, or every mobile nav tap silently stops working. */
  z-index: 1000;
  /* Defensive, not a root-cause fix: if a hide rule ever fails to apply for
     any reason this stylesheet can't account for (a caching layer serving
     stale CSS, a deploy that hasn't landed yet, etc.), this guarantees the
     visible symptom is "hidden overflow" rather than "desktop-sized buttons
     visibly bleeding off the right edge of a mobile screen." It masks the
     symptom, not the cause — if this is ever actually doing something, that
     means a hide rule above it failed and needs investigating directly,
     not just left relying on this safety net. */
  overflow-x: hidden;
}
.rs-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--rs-header-h);
}

.rs-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rs-font-serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.5px;
  color: var(--rs-accent);
  text-decoration: none;
  flex-shrink: 0;
}
.rs-logo i { color: var(--rs-primary); }
.rs-logo .rs-logo-seek { color: var(--rs-primary); }
.rs-logo-footer { color: var(--rs-white); }
.rs-logo-footer .rs-logo-seek { color: var(--rs-primary-border); }

/* ---------- Desktop nav (dropdowns) ---------- */
.rs-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: center;
}
.rs-nav > a {
  color: var(--rs-gray-700);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}
.rs-nav > a:hover { color: var(--rs-primary-dark); }
.rs-nav > a:active,
.rs-nav-item > a:active { background: var(--rs-gray-50); }
.rs-nav-item { position: relative; }
.rs-nav-item > a {
  color: var(--rs-gray-700);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.rs-nav-active { color: var(--rs-primary-dark) !important; position: relative; }
.rs-nav-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--rs-primary);
  border-radius: 2px;
}
.rs-caret { font-size: 11px; }
.rs-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--rs-white);
  box-shadow: var(--rs-shadow-lg);
  border-radius: var(--rs-radius-md);
  padding: 10px;
  min-width: 220px;
  display: none;
  flex-direction: column;
  z-index: 1001;
}
.rs-nav-item:hover .rs-nav-dropdown,
.rs-nav-item:focus-within .rs-nav-dropdown { display: flex; }
.rs-nav-dropdown a {
  padding: 8px 12px;
  border-radius: var(--rs-radius-sm);
  color: var(--rs-gray-700);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.rs-nav-dropdown a:hover { background: var(--rs-gray-50); color: var(--rs-primary-dark); }

/* Icons/arrows only make sense in the mobile flat-list layout — hidden by
   default (desktop dropdown stays text-only, as it always has), shown
   inside the mobile media query below. */
.rs-nav-row-icon, .rs-nav-row-arrow { display: none; }
/* These new mobile-panel-only blocks (For Providers, Call 988) must never
   appear in the desktop horizontal nav row — they're direct children of
   .rs-nav, so without this they'd render as extra top-level nav items. */
.rs-nav-mobile-provider, .rs-nav-mobile-crisis { display: none; }
/* On desktop these two classes are just the existing nav-item/nav-link
   look — the "section label" / "standalone row" treatment is mobile-only,
   added inside the mobile media query below. */
.rs-nav-section-label, .rs-nav-standalone-row { color: var(--rs-gray-700); text-decoration: none; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 4px; }
/* Guides/Trust use a <span> for their section label (not a link — there's
   nothing for it to navigate to, the real link is the single item inside),
   while Find Treatment/Learn use <a> for theirs (real dropdown triggers on
   desktop). Targeting the element type keeps these two separate: hiding
   the span never touches the anchor-based labels. */
span.rs-nav-section-label { display: none; }
.rs-nav-mobile-group, .rs-nav-mobile-group-content {
  /* On desktop this wrapper (and its inner content wrapper) need to
     disappear from the layout entirely, not just visually hide, so the
     real link inside renders exactly as it did before this change — a
     plain top-level nav link, not nested inside two extra div layers
     that would otherwise need their own flex/sizing rules to stay
     invisible structurally. display:contents does exactly that. */
  display: contents;
}

.rs-mobile-header-actions { display: none; align-items: center; gap: 6px; }
.rs-mobile-provider-btn {
  min-height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rs-primary-border);
  border-radius: var(--rs-radius-sm);
  background: #F9FCFF;
  color: var(--rs-primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.rs-header-cta { display: inline-flex; flex-shrink: 0; }
.rs-search-toggle {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--rs-accent);
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}
.rs-search-toggle:hover { color: var(--rs-primary-dark); }

/* Positioned as a sibling of .rs-header (see the HTML comment where this
   panel is inserted), so its z-index only needs to beat .rs-header's own
   z-index (1000) to render above page content — same lesson as the scrim
   fix above. Using 1010 here, comfortably above .rs-header (1000) and
   below the mobile nav's own internal stacking (which only matters while
   the nav is separately open — the two panels aren't designed to be open
   at the same time, but this ordering means if they ever were, the nav
   would still win, which is the safer default). */
.rs-search-panel {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--rs-white);
  box-shadow: var(--rs-shadow-lg);
  z-index: 1010;
  border-bottom: 1px solid var(--rs-gray-200);
}
.rs-search-panel-open { display: block; }
.rs-search-panel-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 20px;
}
.rs-search-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--rs-primary);
  border-radius: var(--rs-radius-md);
  padding: 10px 14px;
}
.rs-search-input-row i.fa-magnifying-glass { color: var(--rs-gray-400); font-size: 16px; }
.rs-search-input-row input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  background: transparent;
}
#rs-search-close {
  background: none;
  border: none;
  color: var(--rs-gray-400);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
}
#rs-search-close:hover { color: var(--rs-gray-700); }
.rs-search-results {
  margin-top: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.rs-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  text-decoration: none;
  border-radius: var(--rs-radius-sm);
  color: inherit;
}
.rs-search-result:hover,
.rs-search-result:focus {
  background: var(--rs-gray-50);
  outline: none;
}
.rs-search-result-type {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rs-primary-dark);
  background: #ECFDF5;
  padding: 3px 8px;
  border-radius: 999px;
  min-width: 76px;
  text-align: center;
}
.rs-search-result-main { display: flex; flex-direction: column; min-width: 0; }
.rs-search-result-title { font-weight: 600; color: var(--rs-gray-900); font-size: 14px; }
.rs-search-result-sub { font-size: 12px; color: var(--rs-gray-500); }
.rs-search-empty { margin-top: 12px; font-size: 14px; color: var(--rs-gray-500); }

.rs-nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--rs-accent);
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}

/* ---------- Mobile slide-in menu panel ----------
   This is the piece that was missing entirely before: the toggle
   button added a class, but no rule ever made the panel visible. */
@media (max-width: 900px) {
  .rs-nav {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 85vw);
    background: var(--rs-white);
    box-shadow: var(--rs-shadow-xl);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 24px 20px;
    z-index: 1050;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .rs-nav.rs-nav-open {
    display: flex;
    transform: translateX(0);
  }
  .rs-nav-dropdown {
    position: static;
    box-shadow: none;
    min-width: 0;
    padding: 0;
  }
  /* No accordion on mobile at all — this is the actual fix for the whole
     class of bugs that lived here before (CSS specificity ties, then a
     stacking-context trap). The reference design's own mobile menu never
     expands/collapses either: section labels sit above their items, and
     every item is always visible. Removing the toggle removes the bug
     surface, not just this one instance of it. */
  .rs-nav-dropdown { display: flex !important; flex-direction: column; }
  .rs-nav-section-label {
    padding: 15px 4px 9px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: none !important;
    width: 100%;
  }
  .rs-nav-section-label .rs-caret { display: none; } /* nothing left to expand/collapse */
  .rs-nav-mobile-group, .rs-nav-mobile-group-content { display: block; }
  span.rs-nav-section-label { display: block; }
  .rs-nav-dropdown a,
  .rs-nav-standalone-row {
    min-height: 48px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--rs-gray-100);
    font-size: 15px;
    font-weight: 500;
    color: var(--rs-accent);
    width: 100%;
  }
  .rs-nav-row-icon { display: inline-block; width: 20px; text-align: center; color: var(--rs-primary); font-size: 16px; flex-shrink: 0; }
  .rs-nav-row-arrow { display: inline-block; margin-left: auto; color: var(--rs-gray-400); font-size: 13px; flex-shrink: 0; }
  .rs-nav-mobile-provider {
    display: block;
    margin-top: 10px;
    border-top: 1px solid var(--rs-gray-200);
    border-bottom: 1px solid var(--rs-gray-200);
    background: var(--rs-primary-light);
  }
  .rs-nav-mobile-provider a {
    min-height: 64px;
    padding: 10px 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--rs-primary-dark);
    font-weight: 700;
    font-size: 15px;
  }
  .rs-nav-mobile-provider-text { display: flex; flex-direction: column; gap: 2px; }
  .rs-nav-mobile-provider-title { font-weight: 700; font-size: 15px; }
  .rs-nav-mobile-provider-subtitle { font-weight: 500; font-size: 12px; color: var(--rs-primary); opacity: 0.85; }
  .rs-nav-mobile-provider .rs-nav-row-icon { color: var(--rs-primary-dark); }
  .rs-nav-mobile-crisis { display: block; padding: 16px 4px 4px; }
  .rs-nav-mobile-crisis .rs-btn-urgent { min-height: 50px; font-size: 16px; }
  .rs-nav-mobile-crisis p { margin-top: 8px; text-align: center; color: var(--rs-gray-500); font-size: 12px; }
  .rs-nav-toggle { display: inline-flex; }
  .rs-search-toggle { display: none; } /* mobile primary row is logo, For Providers, hamburger only — search lives on desktop for now */
  .rs-mobile-header-actions { display: flex; }
  .rs-header-cta { display: none; }
}
.rs-nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  /* Must stay below .rs-header's z-index (1000), not .rs-nav's (1050).
     .rs-header has position:sticky + an explicit z-index, which creates
     its own stacking context — everything nested inside it, including
     .rs-nav, only ever competes for stacking WITHIN that context. .rs-nav's
     own z-index of 1050 never "escapes" to compete against this scrim
     directly, since the scrim is a sibling of .rs-header, not a descendant.
     What actually decides the visible order is .rs-header's z-index vs.
     this scrim's — so this has to stay under 1000, or the scrim renders
     on top of the entire header (nav panel included) and silently
     swallows every tap meant for the menu underneath it. Confirmed this
     was live and broken before this fix: a z-index of 1040 here (above
     .rs-header's 1000) meant every nav item appeared unresponsive,
     because taps were being caught by this overlay, not the links. */
  z-index: 990;
}
.rs-nav-scrim.rs-nav-scrim-open { display: block; }

/* ---------- Mobile horizontal tab strip ----------
   The new persistent, always-visible mobile nav — a horizontally
   scrollable strip of pills, styled after the flagship-site header
   pattern (icon + label, active underline, momentum scroll). Sits
   below the main header on small screens only. */
.rs-tabbar {
  display: none;
  background: var(--rs-white);
  border-bottom: 1px solid var(--rs-gray-200);
  position: sticky;
  top: 0;
  z-index: 999;
}
.rs-tabbar-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 12px;
  scrollbar-width: none;
}
.rs-tabbar-scroll::-webkit-scrollbar { display: none; }
.rs-tabbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--rs-gray-100);
  color: var(--rs-gray-700);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.rs-tabbar-link i { color: var(--rs-primary); font-size: 12px; }
.rs-tabbar-link.rs-tabbar-active {
  background: var(--rs-primary);
  color: var(--rs-white);
}
.rs-tabbar-link.rs-tabbar-active i { color: var(--rs-white); }

@media (max-width: 900px) {
  .rs-tabbar { display: block; }
}

/* ---------- Buttons ---------- */
.rs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--rs-radius-lg);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: var(--rs-transition);
}
.rs-btn-primary {
  background: linear-gradient(135deg, var(--rs-primary), var(--rs-primary-dark));
  color: var(--rs-white);
}
.rs-btn-primary:hover { filter: brightness(1.05); color: var(--rs-white); }
.rs-btn-provider {
  background: #F9FCFF;
  color: var(--rs-primary);
  border: 1px solid var(--rs-primary-border);
}
.rs-btn-provider:hover { background: var(--rs-primary-light); border-color: #91C2E7; color: var(--rs-primary); }
.rs-btn-secondary {
  background: var(--rs-gray-100);
  color: var(--rs-gray-700);
}
.rs-btn-secondary:hover { background: var(--rs-gray-200); color: var(--rs-gray-800); }
.rs-btn-urgent {
  background: var(--rs-danger);
  color: var(--rs-white);
}
.rs-btn-urgent:hover { background: var(--rs-danger-dark); color: var(--rs-white); }
.rs-btn-block { width: 100%; justify-content: center; margin-top: 12px; }

/* ---------- Hero / trust bar ---------- */
.rs-hero { text-align: center; }
.rs-hero h1 { font-family: var(--rs-font-serif); }
.rs-trust-bar { background: var(--rs-white); }
.rs-trust-grid { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; }

/* ---------- Page hero (content pages: guides, legal, trust, contact, FAQ) ----------
   Same centered visual language as .rs-hero for site-wide consistency, but on a
   quieter tinted background rather than the homepage's own treatment, since these
   are secondary pages, not the front door. */
.rs-page-hero {
  background: var(--rs-gray-50);
  border-bottom: 1px solid var(--rs-gray-200);
  padding: 48px 24px;
  text-align: center;
}
.rs-page-hero h1 { margin: 0 0 12px; font-size: 2rem; font-family: var(--rs-font-serif); }
.rs-page-hero p { margin: 0 auto; max-width: 640px; font-size: 16px; color: var(--rs-gray-600); line-height: 1.6; }
.rs-page-hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---------- State grid / tiles ---------- */
.rs-state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.rs-state-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--rs-white);
  border: 1px solid var(--rs-gray-200);
  border-radius: var(--rs-radius-md);
  color: var(--rs-gray-700);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.15s ease;
}
.rs-state-tile:hover {
  border-color: var(--rs-primary);
  color: var(--rs-primary-dark);
  box-shadow: var(--rs-shadow-md);
  transform: translateY(-2px);
}
.rs-state-tile i { color: var(--rs-primary); }

/* ---------- Center cards / badges ---------- */
.rs-center-card {
  background: var(--rs-white);
  border: 1px solid var(--rs-gray-200);
  border-radius: var(--rs-radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}
.rs-center-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-right: 6px;
}
.rs-badge-accredited { background: #DBEAFE; color: var(--rs-info); }
.rs-badge-detox { background: #FEF3C7; color: var(--rs-secondary-dark); }

.rs-card-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.rs-compare-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--rs-gray-600); cursor: pointer; }
.rs-compare-check input { cursor: pointer; }

/* ---------- Sticky compare bar ----------
   Hidden by default; JS toggles .rs-compare-bar-open once 1+ centers are
   selected. z-index only needs to beat .rs-header's (1000, see the header
   z-index comment) since this is a sibling of .rs-header, same stacking-
   context lesson from the mobile nav fixes earlier in this project. */
.rs-compare-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--rs-accent);
  color: var(--rs-white);
  z-index: 1011;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
}
.rs-compare-bar-open { display: block; }
.rs-compare-bar-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.rs-compare-bar-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.rs-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 5px 6px 5px 12px;
  font-size: 13px;
}
.rs-compare-chip-remove { background: none; border: none; color: var(--rs-white); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; opacity: 0.8; }
.rs-compare-chip-remove:hover { opacity: 1; }
.rs-compare-bar-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ---------- Comparison table ---------- */
.rs-compare-table-wrap { overflow-x: auto; }
.rs-compare-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.rs-compare-table th, .rs-compare-table td { padding: 14px 16px; border-bottom: 1px solid var(--rs-gray-200); text-align: left; vertical-align: top; font-size: 14px; }
.rs-compare-table thead th { font-size: 16px; border-bottom: 2px solid var(--rs-gray-300); }
.rs-compare-row-label { font-weight: 700; color: var(--rs-gray-600); white-space: nowrap; width: 160px; }

/* ---------- Forms ---------- */
.rs-form { display: flex; flex-direction: column; gap: 6px; }
.rs-form label { font-size: 13px; font-weight: 700; color: var(--rs-gray-700); margin-top: 8px; }
.rs-form input[type="text"],
.rs-form input[type="email"],
.rs-form input[type="tel"],
.rs-form select,
.rs-form textarea {
  padding: 12px 14px;
  border: 1px solid var(--rs-gray-300);
  border-radius: var(--rs-radius-md);
  font-size: 15px;
  font-family: inherit;
}
.rs-form input:focus, .rs-form select:focus, .rs-form textarea:focus {
  outline: 2px solid var(--rs-primary-light);
  border-color: var(--rs-primary);
}
.rs-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.rs-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 400; color: var(--rs-gray-600); line-height: 1.5; }
.rs-checkbox input { margin-top: 3px; }
.rs-form-inline { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.rs-form-inline input { flex: 1; min-width: 220px; }
.rs-form-note { font-size: 12px; color: var(--rs-gray-500); margin-top: 8px; }
.rs-lead-form { background: var(--rs-white); border-radius: var(--rs-radius-lg); padding: 24px; border: 1px solid var(--rs-gray-200); }

/* ---------- Ad units ---------- */
.rs-ad-unit { margin: 32px 0; text-align: center; }
.rs-ad-label { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--rs-gray-400); margin-bottom: 6px; }

/* ---------- Footer ----------
   Redesigned this pass after the PetCareHall / TaxRefundSeed
   reference screenshots: icon-badge logo lockup, a real newsletter
   signup embedded in the footer, and a cookie-notice bar. */
.rs-footer {
  background: var(--rs-accent);
  color: var(--rs-gray-300);
  padding: 0 0 0;
}
.rs-footer-trustbar {
  background: var(--rs-accent-light); /* darker navy than the footer body below —
                           same two-tone relationship as before, now built from
                           the site's actual brand tokens instead of a neutral
                           gray-900 body plus an unrelated hardcoded hex, so the
                           footer genuinely matches the new header palette rather
                           than just also being dark */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rs-footer-trustbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: center;
}
.rs-footer-trustbar-inner a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--rs-gray-300);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.rs-footer-trustbar-inner a i { font-size: 12px; opacity: 0.85; }
.rs-footer-trustbar-inner a:hover { color: var(--rs-secondary); }
.rs-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 56px 24px 40px;
}
.rs-footer-brand-block { display: flex; flex-direction: column; gap: 16px; }
.rs-footer-logo-row { display: flex; align-items: center; gap: 12px; }
.rs-footer-logo-badge {
  width: 40px;
  height: 40px;
  border-radius: var(--rs-radius-md);
  background: linear-gradient(135deg, var(--rs-primary), var(--rs-primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rs-white);
  font-size: 18px;
  flex-shrink: 0;
}
.rs-footer-tagline { font-size: 14px; line-height: 1.6; color: var(--rs-gray-400); margin: 0; }
.rs-social { display: flex; gap: 10px; flex-wrap: wrap; }
.rs-social a {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: var(--rs-gray-800);
  border-radius: 50%;
  color: var(--rs-gray-300);
  text-decoration: none;
}
.rs-social a:hover { background: var(--rs-primary); color: var(--rs-white); }

.rs-footer-col h4 {
  color: var(--rs-white);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 16px;
}
.rs-footer-col a {
  display: block;
  color: var(--rs-gray-400);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 10px;
}
.rs-footer-col a:hover { color: var(--rs-primary-light); }

.rs-footer-newsletter {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 0;
  border-top: 1px solid var(--rs-gray-800);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.rs-footer-newsletter-copy h4 { color: var(--rs-white); margin: 0 0 4px; font-size: 15px; }
.rs-footer-newsletter-copy p { margin: 0; font-size: 13px; color: var(--rs-gray-400); }
.rs-footer-newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-footer-newsletter-form input {
  padding: 11px 14px;
  border-radius: var(--rs-radius-md);
  border: 1px solid var(--rs-gray-700);
  background: var(--rs-gray-800);
  color: var(--rs-white);
  font-size: 14px;
  min-width: 220px;
}
.rs-footer-newsletter-form input::placeholder { color: var(--rs-gray-500); }
.rs-footer-newsletter-form button {
  padding: 11px 20px;
  border-radius: var(--rs-radius-md);
  border: none;
  background: linear-gradient(135deg, var(--rs-primary), var(--rs-primary-dark));
  color: var(--rs-white);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.rs-footer-bottom {
  border-top: 1px solid var(--rs-gray-800);
  padding: 28px 24px 32px;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
  color: var(--rs-gray-500);
}
.rs-footer-bottom p { margin: 0 0 18px; line-height: 1.6; }
.rs-footer-legal-row { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: center; }
.rs-footer-legal-row a { color: var(--rs-gray-400); text-decoration: none; font-size: 12px; padding: 4px 0; }
.rs-footer-legal-row a:hover { color: var(--rs-primary-light); }

@media (max-width: 1100px) { .rs-footer-inner { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px) { .rs-footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .rs-footer-inner { grid-template-columns: 1fr; } }

/* ---------- Cookie notice bar ---------- */
.rs-cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--rs-gray-900);
  color: var(--rs-gray-300);
  border-top: 2px solid var(--rs-secondary);
  padding: 16px 24px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  z-index: 1100;
  font-size: 13px;
}
.rs-cookie-bar.rs-cookie-bar-visible { display: flex; }
.rs-cookie-bar a { color: var(--rs-secondary); }
.rs-cookie-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rs-cookie-bar-actions button {
  padding: 10px 18px;
  border-radius: var(--rs-radius-md);
  border: 1px solid var(--rs-gray-700);
  background: transparent;
  color: var(--rs-gray-200);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.rs-cookie-bar-actions button.rs-cookie-accept {
  background: linear-gradient(135deg, var(--rs-secondary), var(--rs-secondary-dark));
  border-color: transparent;
  color: var(--rs-white);
}

/* ---------- Legal / guide / sitemap content pages ---------- */
.rs-legal, .rs-guide-content {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 24px;
  line-height: 1.7;
  color: var(--rs-gray-700);
}
.rs-legal h1, .rs-guide-content h1 { color: var(--rs-accent); margin-bottom: 8px; }
.rs-legal h2, .rs-guide-content h2 { color: var(--rs-accent); margin-top: 32px; }
.rs-legal ul, .rs-guide-content ul { padding-left: 22px; }

.rs-sitemap-list { max-width: 820px; margin: 0 auto; padding: 48px 24px; }
.rs-sitemap-list h2 { margin-top: 28px; color: var(--rs-primary-dark); }
.rs-sitemap-list ul { list-style: none; padding: 0; }
.rs-sitemap-list li { padding: 6px 0; border-bottom: 1px solid var(--rs-gray-100); }
.rs-sitemap-list a { color: var(--rs-gray-700); text-decoration: none; }
.rs-sitemap-list a:hover { color: var(--rs-primary-dark); text-decoration: underline; }

.rs-pending-notice {
  background: var(--rs-gray-50);
  border: 1px dashed var(--rs-gray-300);
  border-radius: var(--rs-radius-lg);
  padding: 24px;
  text-align: center;
  color: var(--rs-gray-600);
}

/* ---------- PAA tools: duration explainer + comparison checklist ---------- */
.rs-duration-tool { display: flex; flex-direction: column; gap: 0; }
.rs-duration-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: var(--rs-white);
  border: 1px solid var(--rs-gray-200);
  border-left: 4px solid var(--rs-primary);
  border-radius: var(--rs-radius-md);
  margin-bottom: 10px;
}
.rs-duration-step strong { color: var(--rs-primary-dark); font-size: 15px; }
.rs-duration-step span { color: var(--rs-gray-600); font-size: 14px; }

/* ---------- FAQ accordion (native details/summary, schema-backed) ---------- */
.rs-faq-list { margin: 16px 0; }
.rs-faq-item {
  background: var(--rs-white);
  border: 1px solid var(--rs-gray-200);
  border-radius: var(--rs-radius-md);
  padding: 4px 18px;
  margin-bottom: 10px;
}
.rs-faq-item summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 700;
  font-family: var(--rs-font-heading);
  color: var(--rs-gray-900);
  font-size: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.rs-faq-item summary::-webkit-details-marker { display: none; }
.rs-faq-item summary::after {
  content: '+';
  font-size: 20px;
  color: var(--rs-primary);
  flex-shrink: 0;
}
.rs-faq-item[open] summary::after { content: '−'; }
.rs-faq-item p { margin: 0 0 16px; color: var(--rs-gray-600); font-size: 14px; line-height: 1.6; }

/* ---------- Responsive: general breakpoints ---------- */
@media (max-width: 768px) {
  .rs-hero { padding: 48px 20px !important; }
  .rs-hero h1 { font-size: 1.75rem !important; }
}

@media print {
  .rs-header, .rs-tabbar, .rs-footer, .rs-crisis-bar, .rs-ad-unit, .rs-lead-form, .rs-cookie-bar, .rs-nav-scrim { display: none !important; }
}

.rs-fade-in { animation: fadeIn 0.6s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }


/* ========== FAQ Engine (base, portable across IGNE properties) ========== */
/* ==========================================================================
   FAQ Engine — canonical CSS (v2)
   Uses CSS custom properties with fallback values, so this works dropped
   into a site with zero design tokens, but automatically inherits a
   site's real --color-accent / --radius / --font-mono / --space-* if
   those are already defined (as they are on IGNE properties).
   Scoped under .faq-hub so it can't collide with anything else on a page.
   ========================================================================== */

.faq-hub {
  --faq-accent:  var(--color-accent, #1d7f8c);
  --faq-text:    var(--color-text, #1a1a1a);
  --faq-muted:   var(--color-muted, #667085);
  --faq-border:  var(--color-border, #e2e8f0);
  --faq-bg-subtle: var(--color-bg-subtle, #f8fafc);
  --faq-radius:  var(--radius, 10px);
  --faq-radius-lg: var(--radius-lg, 14px);
  --faq-font-mono: var(--font-mono, ui-monospace, monospace);
  --faq-space-4: var(--space-4, 2.5rem);
  max-width: 860px; margin: 0 auto; padding: 2rem 1rem 3rem;
}

.faq-hub__intro { text-align: center; margin-bottom: 2rem; }
.faq-hub__intro h1 { color: var(--faq-accent); margin: 0 0 0.5rem; }
.faq-hub__subtitle { color: var(--faq-muted); max-width: 640px; margin: 0 auto; }

.faq-controls {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.faq-search {
  /* Hidden, not removed from the DOM: faq-engine.js does
     `if (!document.getElementById('faqSearch')) return;` as an early exit
     for "this isn't a FAQ page" — deleting the element outright would also
     silently disable Expand All / Collapse All and the scroll-spy jump nav,
     which have nothing to do with search. The sitewide search bar now
     covers FAQ content too (see generate_search_index.py), so this
     page-specific one is redundant, not needed for functionality. */
  display: none;
  flex: 1 1 280px; padding: 0.65rem 1rem; border: 1px solid var(--faq-border);
  border-radius: var(--faq-radius); font-size: 0.95rem;
}
.faq-controls__toggle { display: flex; gap: 0.5rem; flex-shrink: 0; }
.faq-controls__btn {
  font-size: 0.85rem; font-weight: 600; padding: 0.5rem 0.9rem;
  border: 1px solid var(--faq-border); border-radius: var(--faq-radius);
  background: #fff; cursor: pointer; color: var(--faq-text);
}
.faq-controls__btn:hover { border-color: var(--faq-accent); color: var(--faq-accent); }

.faq-hub .faq-jumpnav {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 0 0 var(--faq-space-4);
  padding: 1rem; background: var(--faq-bg-subtle);
  border: 1px solid var(--faq-border); border-radius: var(--faq-radius-lg);
}
.faq-hub .faq-jumpnav a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 600; color: var(--faq-text);
  padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--faq-border); background: #fff;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.faq-hub .faq-jumpnav a:hover { border-color: var(--faq-accent); color: var(--faq-accent); }
.faq-hub .faq-jumpnav a.is-active { background: var(--faq-accent); color: #fff; border-color: var(--faq-accent); }
.faq-hub .faq-jumpnav a.is-active .faq-jumpnav__count { background: rgba(255,255,255,0.25); color: #fff; }
.faq-jumpnav__count {
  font-size: 0.7rem; font-weight: 700; background: var(--faq-bg-subtle);
  color: var(--faq-muted); border-radius: 999px; padding: 0.1rem 0.4rem;
}

.faq-hub .faq-category { scroll-margin-top: 100px; margin-top: var(--faq-space-4); }
.faq-hub .faq-category:first-of-type { margin-top: 0; }
.faq-category__title {
  font-size: 1.1rem; font-weight: 700; color: var(--faq-text);
  margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--faq-border);
}

.faq-hub .faq-item {
  border: 1px solid var(--faq-border); border-radius: var(--faq-radius);
  margin-bottom: 0.75rem; background: #fff; overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.faq-hub .faq-item:hover { box-shadow: 0 6px 20px -12px rgba(15,23,42,0.15); }
.faq-hub .faq-item[open] { border-color: var(--faq-accent); }

.faq-hub .faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; cursor: pointer; font-weight: 600;
  color: var(--faq-text); list-style: none; font-size: 0.98rem;
}
.faq-hub .faq-item summary::-webkit-details-marker { display: none; }

.faq-hub .faq-item .faq-item__chevron {
  flex-shrink: 0; width: 18px; height: 18px; color: var(--faq-accent);
  transition: transform 0.2s ease;
}
.faq-hub .faq-item[open] .faq-item__chevron { transform: rotate(180deg); }

.faq-hub .faq-item__body { padding: 0 1.25rem 1.1rem; color: var(--faq-muted); font-size: 0.95rem; }
.faq-hub .faq-item__cta { font-weight: 600; color: var(--faq-accent); }

.faq-empty { text-align: center; color: var(--faq-muted); padding: 2rem 0; }

.faq-hub__cta {
  margin-top: var(--faq-space-4); text-align: center; padding: 2rem 1.5rem;
  background: var(--faq-bg-subtle); border: 1px solid var(--faq-border);
  border-radius: var(--faq-radius-lg);
}
.faq-hub__cta h2 { margin: 0 0 0.5rem; color: var(--faq-accent); }
.faq-hub__cta p { color: var(--faq-muted); max-width: 520px; margin: 0 auto 1.25rem; }

@media (max-width: 640px) {
  .faq-controls { flex-direction: column; align-items: stretch; }
  .faq-hub .faq-jumpnav { padding: 0.75rem; gap: 0.4rem; }
  .faq-hub .faq-jumpnav a { font-size: 0.8rem; padding: 0.4rem 0.75rem; }
}


/* ========== FAQ Engine — RehabSeek token bridge ========== */
/* ==========================================================================
   FAQ Engine — RehabSeek token bridge
   Append to style.css (keeps the site's one-stylesheet-request pattern —
   bump the ?v= cache-buster on style.css when this goes in).

   The canonical faq-engine.css falls back to generic --color-accent /
   --radius names if nothing overrides them. RehabSeek uses a different
   naming convention (--rs-primary, --rs-gray-*), so this file is the
   entire adapter needed on the CSS side: map RS tokens onto the engine's
   --faq-* variables, nothing else to override.
   ========================================================================== */

.faq-hub {
  --faq-accent:    var(--rs-primary);
  --faq-text:      var(--rs-gray-900);
  --faq-muted:     var(--rs-gray-600);
  --faq-border:    var(--rs-gray-200);
  --faq-bg-subtle: var(--rs-gray-50);
  --faq-radius:    var(--rs-radius-md);
  --faq-radius-lg: var(--rs-radius-lg);
  --faq-space-4:   2.5rem;
  font-family: var(--rs-font-body, 'Source Sans Pro', sans-serif); /* fixed: real token is --rs-font-body, not --rs-body-font */
}

.faq-hub .faq-item[open] { border-color: var(--rs-primary); }

/* RehabSeek's existing accordion (.rs-faq-item, used elsewhere on the site)
   uses a +/- text marker instead of an SVG chevron. Left as-is here since
   the SVG chevron is a real improvement, not a regression — but noting the
   inconsistency in case visual parity with the existing per-page FAQ blocks
   matters more than the upgrade once you see it live. */