/*
 * Sauna Finder landing page (page 92415). Loaded by outliyr-sauna-landing.php
 * on that page only; every rule is scoped under the `.sauna-finder-page`
 * body class that the same plugin adds. No `!important`, no global
 * selectors, and no colour literals: colours come from the canonical
 * theme-aware public tokens (outliyr-public-tokens-assets/tokens.css), which
 * flip automatically under :root[data-theme="dark"].
 *
 * Contrast (light theme, measured against the backgrounds Lighthouse
 * reported): --link #1834a1 on #c4dcfa 7.3:1, on #eef4fa 9.3:1, on #fafcfd
 * 10:1; --text-secondary #3f3f3f on #eef4fa 9.5:1, on #e6eff8 9.1:1.
 * Dark theme: --link #3da5ff / --text-secondary #aab3be on #0a0b0d..#1f232c,
 * all above 7:1.
 */

/* -- Contrast: re-point the olhp colour properties on the affected elements.
   The shared olhp sheet reads `color:var(--olhp-pri)` / `var(--olhp-muted)`
   (some with !important), so redefining the property on the element itself
   changes the resolved colour without fighting specificity. -------------- */

.sauna-finder-page .olhp .olhp-skicker {
  --olhp-pri: var(--link, #1834a1);
}

/* Hero kicker sits on the accent-soft pill; the link blue measured 4.44:1 in
   dark mode, so it uses the primary text token instead (light #111 / dark #e8ebf0). */
.sauna-finder-page .olhp .olhp-kicker {
  --olhp-pri: var(--text-primary, #111111);
}

.sauna-finder-page .olhp .olhp-lede {
  --olhp-muted: var(--text-secondary, #3f3f3f);
}

/* Methodology / in-card prose links and the ownership note link. The olhp
   sheet forces `color:var(--olhp-pri) !important` on `.olhp a`, so the
   custom property is re-pointed on the anchor itself (same pattern as the
   kicker fix); the plain `color` is a fallback for anchors outside .olhp. */
.sauna-finder-page .olhp .olhp-glass p a,
.sauna-finder-page .olhp .olhp-prose a,
.sauna-finder-page .olhp .olhp-lede a,
.sauna-finder-page .sauna-ownership a {
  --olhp-pri: var(--link, #1834a1);
  color: var(--link, #1834a1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sauna-finder-page .olhp .olhp-glass p a:hover,
.sauna-finder-page .olhp .olhp-prose a:hover,
.sauna-finder-page .olhp .olhp-lede a:hover,
.sauna-finder-page .sauna-ownership a:hover {
  --olhp-pri: var(--link-hover, #042192);
  color: var(--link-hover, #042192);
}

/* App facade primary CTA (the main "open the app" button). The facade's own
   sheet paints it accent-on-accent with color:#fff and no !important. Measured
   on the live page (CSSOM, /tmp/sauna-optimize-0905/cta-matching-rules.json):
   the winning rule in dark mode is the shared
   `:root[data-theme="dark"] .entry-content a { color:var(--link) !important }`,
   which makes text and background the same accent blue, so the CTA vanishes.
   A literal-!important upstream rule can only be beaten by !important at
   higher specificity; the upstream selectors carry no ID, so one rule scoped
   through the page's existing #sauna-assessment wrapper (the element around
   the app embed) wins for the base state and for the zero-ID hover/focus
   rules alike. --olhp-pri is re-pointed too so the homepage-v2 link rule
   agrees. On-accent token: #fff light / #0a0b0d dark. This is the only
   !important in the sheet. */
.sauna-finder-page #sauna-assessment .outliyr-app-facade-primary {
  --olhp-pri: var(--text-on-accent, #ffffff);
  color: var(--text-on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--text-on-accent, #ffffff) !important;
}

/* Facade secondary button: its own accent text measured 4.24:1 on the light
   surface; the link token clears 4.5:1 in both themes. */
.sauna-finder-page #sauna-assessment .outliyr-app-facade-btn {
  color: var(--link, #1834a1);
}

/* App facade note: the shared facade style dims it with opacity:.72, which
   is what drops it below 4.5:1. Full opacity + secondary text token. */
.sauna-finder-page .outliyr-app-facade .outliyr-app-facade-note {
  opacity: 1;
  color: var(--text-secondary, #3f3f3f);
}

/* -- Reusable layout: anchor jump-nav ----------------------------------- */

.sauna-finder-page .sauna-page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.sauna-finder-page .sauna-page-nav li {
  margin: 0;
  list-style: none;
}

.sauna-finder-page .sauna-page-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border-default, #cccccc);
  border-radius: 999px;
  --olhp-pri: var(--link, #1834a1);
  color: var(--link, #1834a1);
  background: var(--surface, #ffffff);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
}

.sauna-finder-page .sauna-page-nav a:hover {
  border-color: var(--border-strong, #bfbfbf);
  --olhp-pri: var(--link-hover, #042192);
  color: var(--link-hover, #042192);
}

.sauna-finder-page .sauna-page-nav a:focus-visible {
  outline: 2px solid var(--accent-primary, #1e73be);
  outline-offset: 3px;
}

/* -- Reusable layout: buying-question answer cards ---------------------- */

.sauna-finder-page .sauna-answer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .sauna-finder-page .sauna-answer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

.sauna-finder-page .sauna-answer-card {
  padding: 24px;
  border: 1px solid var(--border-default, #cccccc);
  border-radius: calc(var(--radius, 4px) * 3);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #111111);
}

.sauna-finder-page .sauna-answer-card > :first-child {
  margin-top: 0;
}

.sauna-finder-page .sauna-answer-card > :last-child {
  margin-bottom: 0;
}

.sauna-finder-page .sauna-answer-card h3 {
  margin: 0 0 12px;
  font-size: 1.125rem;
  line-height: 1.35;
}

.sauna-finder-page .sauna-answer-card p {
  margin: 0 0 12px;
  color: var(--text-secondary, #3f3f3f);
  line-height: 1.6;
}