/* 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); }

/* Blog article typography (2026-10-15). The theme only styled demo markup: no h2 rule (so h2 took the page-title
   size), grey 16px body, and <ol> items 1/2/last got checkmarks while the rest got nothing.
   Scoped to .details-body.article-body with an extra element to beat the theme's unlayered .details-body rules. */
article.details-body.article-body {
  --ab-text: color-mix(in oklab, var(--color-secondary) 82%, transparent);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ab-text);
}
.dark article.details-body.article-body { --ab-text: color-mix(in oklab, var(--color-accent) 82%, transparent); }
article.details-body.article-body > :first-child { margin-top: 0; }
article.details-body.article-body p,
article.details-body.article-body li {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ab-text);
  font-weight: 400;
}
@media (min-width: 48rem) {
  article.details-body.article-body,
  article.details-body.article-body p,
  article.details-body.article-body li { font-size: 1.125rem; }
}
article.details-body.article-body p { padding-bottom: 0; margin: 0 0 1.25rem; }
article.details-body.article-body h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 500;
  margin: 2.75rem 0 1rem;
  padding: 0;
}
@media (min-width: 48rem) { article.details-body.article-body h2 { font-size: 1.875rem; margin-top: 3.5rem; } }
article.details-body.article-body h3,
article.details-body.article-body h3:not(:first-child) {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 500;
  margin: 2rem 0 0.75rem;
}
@media (min-width: 48rem) { article.details-body.article-body h3 { font-size: 1.375rem; } }
article.details-body.article-body strong { color: var(--color-secondary); font-weight: 600; }
.dark article.details-body.article-body strong { color: var(--color-accent); }
article.details-body.article-body a { color: #E11D2A; text-decoration: underline; text-underline-offset: 3px; }
article.details-body.article-body a:hover { text-decoration-thickness: 2px; }

/* lists: real bullets / numbers, brand-red markers */
article.details-body.article-body ul,
article.details-body.article-body ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
article.details-body.article-body ul { list-style: disc; }
article.details-body.article-body ol { list-style: decimal; }
article.details-body.article-body ul > li,
article.details-body.article-body ol > li { margin: 0 0 0.6rem; padding-left: 0.25rem; font-weight: 400; }
article.details-body.article-body li::before,
article.details-body.article-body ol li:first-child::before,
article.details-body.article-body ol li:nth-child(2)::before,
article.details-body.article-body ol li:last-child::before { content: none; display: none; }
article.details-body.article-body li::marker { color: #E11D2A; font-weight: 600; }
article.details-body.article-body li > p { margin: 0; }

/* tables (scroll sideways on phones instead of overflowing) */
article.details-body.article-body table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.75rem;
  font-size: 1rem;
}
article.details-body.article-body th,
article.details-body.article-body td {
  border: 1px solid color-mix(in oklab, var(--color-secondary) 15%, transparent);
  padding: 0.6rem 0.9rem;
  text-align: left;
  vertical-align: top;
}
article.details-body.article-body th { background: color-mix(in oklab, var(--color-secondary) 6%, transparent); color: var(--color-secondary); font-weight: 600; }
.dark article.details-body.article-body th,
.dark article.details-body.article-body td { border-color: color-mix(in oklab, var(--color-accent) 20%, transparent); }
.dark article.details-body.article-body th { color: var(--color-accent); }
article.details-body.article-body blockquote {
  border-left: 3px solid #E11D2A;
  margin: 0 0 1.5rem;
  padding: 0.25rem 0 0.25rem 1.25rem;
  font-style: italic;
}