/* ============================================================
   98-staszak-theme — Staszak client build: lighter theme.
   Client revision 2026-10-22 ("the site is so dark").

   The template's near-black "ink" acts are re-skinned here rather
   than in the section files: each formerly dark section redefines
   the ink tokens locally, so every var(--ink*) / var(--text-on-ink*)
   inside it resolves to light values. Hard-coded whites are patched
   per section below. Booking and the footer stay a solid surface,
   but in the logo blue instead of near-black, so the page still
   has two anchored "bookends". Every selector is scoped to its
   section root.
   ============================================================ */

:root {
  --sky-tint: hsl(var(--accent-h) 55% 96%);
  --sky-soft: hsl(var(--accent-h) 50% 92%);
  --line-light: hsl(var(--accent-h) 30% 40% / 0.16);
}

/* ---------- Shared: light versions of the former ink sections ---------- */
.sec-00-inthero,
.sec-06-journey,
.sec-07-results,
.sec-10-testimonials,
.sec-55-cond-treatment {
  --ink: var(--white);
  --ink-2: var(--white);
  --ink-3: var(--bone);
  --text-on-ink: var(--text-on-bone);
  --text-on-ink-dim: var(--text-on-bone-dim);
}
.sec-00-inthero.on-ink :is(h1, h2, h3, h4),
.sec-06-journey.on-ink :is(h1, h2, h3, h4),
.sec-07-results.on-ink :is(h1, h2, h3, h4),
.sec-10-testimonials.on-ink :is(h1, h2, h3, h4),
.sec-55-cond-treatment.on-ink :is(h1, h2, h3, h4) {
  color: var(--text-on-bone);
}
.sec-00-inthero.on-ink .eyebrow,
.sec-06-journey.on-ink .eyebrow,
.sec-07-results.on-ink .eyebrow,
.sec-10-testimonials.on-ink .eyebrow,
.sec-55-cond-treatment.on-ink .eyebrow { color: var(--accent); }
.sec-00-inthero.on-ink .eyebrow::before,
.sec-06-journey.on-ink .eyebrow::before,
.sec-07-results.on-ink .eyebrow::before,
.sec-10-testimonials.on-ink .eyebrow::before,
.sec-55-cond-treatment.on-ink .eyebrow::before { background: var(--accent); }
.sec-00-inthero.on-ink :focus-visible,
.sec-06-journey.on-ink :focus-visible,
.sec-07-results.on-ink :focus-visible,
.sec-10-testimonials.on-ink :focus-visible,
.sec-55-cond-treatment.on-ink :focus-visible { outline-color: var(--accent); }
.sec-06-journey .ghost-num,
.sec-07-results .ghost-num,
.sec-10-testimonials .ghost-num,
.sec-55-cond-treatment .ghost-num { -webkit-text-stroke-color: hsl(var(--accent-h) 40% 35% / 0.18); }

/* ---------- 01 Nav: white bar, full-color logo ---------- */
.sec-01-nav {
  --ink: var(--white);
  --ink-2: var(--white);
  --text-on-ink: var(--text-on-bone);
  --text-on-ink-dim: hsl(200 14% 30%);
}
.sec-01-nav .sec-01-nav__bar {
  background: hsl(0 0% 100% / 0.94);
  border-bottom: 1px solid var(--line-ink);
}
html.is-scrolled .sec-01-nav .sec-01-nav__bar {
  background: hsl(0 0% 100% / 0.97);
  border-bottom-color: var(--line-ink);
  box-shadow: var(--shadow-soft);
}
.sec-01-nav .sec-01-nav__dropdown { border: 1px solid var(--line-ink); box-shadow: var(--shadow-lift); }
.sec-01-nav .sec-01-nav__dropdown-link:hover,
.sec-01-nav .sec-01-nav__dropdown-link:focus-visible {
  background: var(--sky-tint);
  color: var(--accent-strong);
}
.sec-01-nav .sec-01-nav__dropdown-link--all { border-top-color: var(--line-ink); color: var(--accent); }
.sec-01-nav .sec-01-nav__overlay-expand {
  background: var(--sky-tint);
  border-color: var(--line-light);
}
.sec-01-nav .sec-01-nav__overlay-sub-inner a { border-left-color: var(--line-light); }
.sec-01-nav .sec-01-nav__pay,
.sec-01-nav .sec-01-nav__overlay-pay {
  color: var(--accent-strong);
  border-color: hsl(var(--accent-h) 40% 35% / 0.4);
}
.sec-01-nav .sec-01-nav__pay:hover,
.sec-01-nav .sec-01-nav__overlay-pay:hover { background: var(--sky-tint); }
.sec-01-nav :focus-visible { outline-color: var(--accent); }

/* ---------- 02 Home hero: logo-blue wash instead of near-black ---------- */
.sec-02-hero .sec-02-hero__photo img { filter: grayscale(1) brightness(0.95) contrast(1.02); }
.sec-02-hero .sec-02-hero__tint {
  background: linear-gradient(160deg, hsl(var(--accent-h) 65% 45% / 0.9), hsl(var(--accent-h) 55% 32% / 0.9));
}
.sec-02-hero .sec-02-hero__scrim {
  background:
    linear-gradient(100deg, hsl(var(--accent-h) 62% 22% / 0.86) 0%, hsl(var(--accent-h) 60% 26% / 0.62) 34%, hsl(var(--accent-h) 50% 32% / 0.2) 62%, hsl(var(--accent-h) 50% 32% / 0.06) 100%),
    linear-gradient(0deg, hsl(var(--accent-h) 60% 20% / 0.5) 0%, hsl(var(--accent-h) 55% 24% / 0.12) 32%, transparent 62%);
}
.sec-02-hero .sec-02-hero__rotator,
.sec-02-hero .sec-02-hero__line--rotator { color: hsl(var(--accent-h) 85% 82%); }

/* ---------- 00 Interior heroes (all pages): pale logo-blue wash ---------- */
.sec-00-inthero.on-ink {
  background:
    radial-gradient(70% 90% at 100% 0%, hsl(var(--accent-h) 60% 88% / 0.8), transparent 60%),
    linear-gradient(160deg, hsl(var(--accent-h) 55% 94%) 0%, hsl(var(--accent-h) 45% 97%) 60%, var(--bone) 100%);
}
.sec-00-inthero .sec-00-inthero__crumbs [aria-current] { color: var(--accent); }
.sec-00-inthero .sec-00-inthero__chip {
  border-color: hsl(var(--accent-h) 50% 40% / 0.25);
  background: hsl(0 0% 100% / 0.7);
}
.sec-00-inthero .btn--ghost:hover { background: var(--sky-tint); }

/* ---------- 06 Journey: pale blue band, white phase cards ---------- */
.sec-06-journey.on-ink { background: linear-gradient(180deg, var(--sky-tint) 0%, var(--sky-soft) 100%); }
.sec-06-journey .sec-06-journey__rail { background: var(--line-light); }
.sec-06-journey .sec-06-journey__dot { border-color: var(--line-light); box-shadow: var(--shadow-soft); }
.sec-06-journey .sec-06-journey__name { color: var(--accent); }
.sec-06-journey .sec-06-journey__promise,
.sec-06-journey .sec-06-journey__cta-btn { color: var(--text-on-bone); }
.sec-06-journey .btn--ghost:hover { background: hsl(0 0% 100% / 0.7); }
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .sec-06-journey .sec-06-journey__phase { border-color: var(--line-light); box-shadow: var(--shadow-soft); }
  .sec-06-journey .sec-06-journey__line { background: linear-gradient(to bottom, var(--accent), var(--line-light)); }
}

/* ---------- 07 Numbers: white-to-tint band, blue figures ---------- */
.sec-07-results.on-ink { background: linear-gradient(180deg, var(--sky-soft) 0%, var(--sky-tint) 100%); }
.sec-07-results .sec-07-results__value { color: var(--accent); text-shadow: none; }
.sec-07-results .sec-07-results__divider { border-top-color: var(--line-light); }
.sec-07-results .sec-07-results__dot { color: hsl(200 20% 40% / 0.5); }

/* ---------- 10 Testimonials: pale blue-gray ---------- */
.sec-10-testimonials.on-ink { background: linear-gradient(180deg, #eef3f7 0%, #e5edf3 100%); }
.sec-10-testimonials .sec-10-testimonials__glyph,
.sec-10-testimonials .sec-10-testimonials__lockup-link { color: var(--accent); }
.sec-10-testimonials .sec-10-testimonials__arrow { border-color: var(--line-light); background: var(--white); }
.sec-10-testimonials .sec-10-testimonials__arrow:hover { background: var(--sky-tint); }
.sec-10-testimonials .sec-10-testimonials__dot { background: var(--line-light); }

/* ---------- 55 Condition treatment phases: pale blue band like the home journey ---------- */
.sec-55-cond-treatment.on-ink { background: linear-gradient(180deg, var(--sky-tint) 0%, var(--sky-soft) 100%); }
.sec-55-cond-treatment .sec-55-cond-treatment__card { border-color: var(--line-light); box-shadow: var(--shadow-soft); }
.sec-55-cond-treatment .sec-55-cond-treatment__name { color: var(--accent); }

/* ---------- 12 Booking: logo blue instead of near-black ---------- */
.sec-12-booking.on-ink {
  background: linear-gradient(150deg, hsl(var(--accent-h) 58% 34%) 0%, hsl(var(--accent-h) 60% 28%) 100%);
  --text-on-ink-dim: hsl(var(--accent-h) 45% 88%);
}
.sec-12-booking .sec-12-booking__panel {
  background: linear-gradient(160deg, hsl(var(--accent-h) 60% 20% / 0.55), hsl(var(--accent-h) 60% 17% / 0.55));
  border-color: hsl(0 0% 100% / 0.16);
}
.sec-12-booking .sec-12-booking__input::placeholder { color: hsl(var(--accent-h) 30% 78%); }
.sec-12-booking.on-ink .eyebrow { color: hsl(var(--accent-h) 85% 85%); }
.sec-12-booking.on-ink .eyebrow::before { background: hsl(var(--accent-h) 85% 85%); }

/* ---------- 14 Footer: deep logo blue ---------- */
.sec-14-footer {
  background: linear-gradient(160deg, hsl(var(--accent-h) 60% 24%) 0%, hsl(var(--accent-h) 62% 20%) 100%);
  --text-on-ink-dim: hsl(var(--accent-h) 35% 86%);
}
.sec-14-footer .sec-14-footer__cta { background: hsl(var(--accent-h) 60% 16% / 0.55); }

/* ---------- 17 Mobile bar: white call button to match the white nav ---------- */
.sec-17-mobilebar .sec-17-mobilebar__call {
  background: hsl(0 0% 100% / 0.95);
  color: var(--text-on-bone);
  border-top: 1px solid var(--line-ink);
}

/* ---------- Contrast on the blue surfaces (hero, booking, footer) ---------- */
.sec-02-hero .sec-02-hero__eyebrow { color: hsl(var(--accent-h) 85% 85%); }
.sec-02-hero .sec-02-hero__eyebrow::before { background: hsl(var(--accent-h) 85% 85%); }
/* Logo-blue buttons disappear on a logo-blue section: lift them a step (white text stays >=4.5:1). */
.sec-12-booking .btn--solid,
.sec-14-footer .btn--solid { background: hsl(var(--accent-h) 62% 45%); }
.sec-12-booking .btn--solid:hover,
.sec-14-footer .btn--solid:hover { background: hsl(var(--accent-h) 62% 40%); }
