/* SEO fixes 2026-10-14: page titles became <h1> but keep the theme's h2 sizing.
   Inside @layer base so Tailwind utilities (xl:text-heading-1, font-medium...) still win. */
@layer base {
  h1.as-h2 {
    font-size: var(--text-heading-5);
    line-height: var(--tw-leading, var(--text-heading-5--line-height));
    font-weight: inherit;
  }
  @media (min-width: 40rem) {
    h1.as-h2 {
      font-size: var(--text-heading-4);
      line-height: var(--tw-leading, var(--text-heading-4--line-height));
    }
  }
  @media (min-width: 48rem) {
    h1.as-h2 {
      font-size: var(--text-heading-3);
      line-height: var(--tw-leading, var(--text-heading-3--line-height));
    }
  }
  @media (min-width: 80rem) {
    h1.as-h2 {
      font-size: var(--text-heading-2);
      line-height: var(--tw-leading, var(--text-heading-2--line-height));
    }
  }
}

/* Former <h3> sub-headings promoted to <h2> (so the outline goes H1 → H2), keeping h3 sizing. */
@layer base {
  h2.as-h3 {
    font-size: var(--text-heading-5);
    line-height: var(--tw-leading, var(--text-heading-5--line-height));
  }
  @media (min-width: 40rem) {
    h2.as-h3 {
      font-size: var(--text-heading-5);
      line-height: var(--tw-leading, var(--text-heading-5--line-height));
    }
  }
  @media (min-width: 48rem) {
    h2.as-h3 {
      font-size: var(--text-heading-4);
      line-height: var(--tw-leading, var(--text-heading-4--line-height));
    }
  }
  @media (min-width: 80rem) {
    h2.as-h3 {
      font-size: var(--text-heading-3);
      line-height: var(--tw-leading, var(--text-heading-3--line-height));
    }
  }
}

/* Same as main.css rules for ".terms-conditions-body h3" / ".details-body h3" (unlayered there too). */
.terms-conditions-body h2.as-h3 {
  margin-top: calc(var(--spacing) * 10);
  margin-bottom: calc(var(--spacing) * 3);
  font-size: var(--text-heading-5);
  line-height: var(--tw-leading, var(--text-heading-5--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}
.details-body h2.as-h3 {
  margin-bottom: calc(var(--spacing) * 3);
  font-size: var(--text-heading-5);
  line-height: var(--tw-leading, var(--text-heading-5--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}
.details-body h2.as-h3:not(:first-child) {
  margin-top: calc(var(--spacing) * 7);
}
@media (min-width: 48rem) {
  .terms-conditions-body h2.as-h3 {
    font-size: var(--text-heading-4);
    line-height: var(--tw-leading, var(--text-heading-4--line-height));
    margin-top: 70px;
  }
  .details-body h2.as-h3 {
    font-size: var(--text-heading-4);
    line-height: var(--tw-leading, var(--text-heading-4--line-height));
  }
}
@media (min-width: 64rem) {
  .details-body h2.as-h3:not(:first-child) {
    margin-top: 70px;
  }
}

/* Headings re-levelled for a clean outline keep their original look. Class beats element selectors. */
@layer base {
  .as-h4 {
    font-size: var(--text-heading-4);
    line-height: var(--tw-leading, var(--text-heading-4--line-height));
  }
  .as-h5 {
    font-size: var(--text-heading-5);
    line-height: var(--tw-leading, var(--text-heading-5--line-height));
  }
  .as-h6 {
    font-size: var(--text-heading-6);
    line-height: var(--tw-leading, var(--text-heading-6--line-height));
  }
}

/* Service / team pages (2026-10-14) — helpers not present in the compiled Tailwind build */
.services-details-content .svc-faq-a { padding-bottom: 0; }
.svc-related { text-decoration: underline; text-underline-offset: 4px; }
.svc-related:hover { color: var(--color-primary-500); }
a:hover > .svc-sib { color: var(--color-secondary); }
.dark a:hover > .svc-sib { color: var(--color-accent); }