/* ltx-global.css
   Global typography overrides — applies across all pages.
   Loaded early in document_head.hbs, after lotus base styles.
   ------------------------------------------------------------------ */

/* ── Font rules ───────────────────────────────────────────────────── */
/* Aeonik: all headings + body text                                    */
/* Miriam Libre: buttons, labels, nav links only                       */

/* ── Global body text ─────────────────────────────────────────────── */
/* Aeonik 400, fluid 15–16px. Does NOT apply to elements with their   */
/* own explicit font-size (buttons, labels, inputs, etc.)              */
body {
  font-size: clamp(15px, 1.5vw + 13px, 16px);
  font-weight: 400;
  line-height: 1.7;
}

/* ── Tier 1 — Homepage, product pages, videos page ───────────────── */

/* H1: homepage hero, product page hero, videos page title */
.lt-hero-unit__title,
.ltx-pp__hero-heading,
.ltx-vp__title {
  font-family: 'Aeonik', sans-serif;
  font-size: clamp(32px, 3.5vw + 18px, 56px);
  font-weight: 400;
  line-height: 1.2;
}

/* H2: product page sections, homepage carousels, support widget */
.ltx-pp__section-heading,
.ltx-vc__heading,
.ltx-carousel-title,
.ltx-support-widget__title {
  font-family: 'Aeonik', sans-serif;
  font-size: clamp(28px, 3vw + 17px, 44px);
  font-weight: 400;
  line-height: 1.2;
}

/* ── Tier 2 — Category and section pages ─────────────────────────── */

/* H1: category name, section name */
.lt-category-tree-item__title {
  font-family: 'Aeonik', sans-serif;
  font-size: clamp(28px, 3vw + 19px, 48px);
  font-weight: 400;
  line-height: 1.2;
}

/* H2: section card titles */
.lt-card-section-title {
  font-family: 'Aeonik', sans-serif;
  font-size: clamp(20px, 0.5vw + 19px, 22px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.05px;
}

/* Description text: category/section description */
.lt-category-description {
  font-family: 'Aeonik', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.5px;
  color: #FDFDFE;
}

/* Article links within section cards */
.lt-card.lt-card--section .lt-article-list > * + * {
  margin-top: 14px;
}

.lt-card--section .lt-article-list-item {
  line-height: 1.5;
}

.lt-card--section .lt-article-list-item__link {
  line-height: 17px !important;
  font-size: clamp(15px, 1.5vw + 13px, 16px);
  font-weight: 300;
  letter-spacing: 0.5px;
  color: #FDFDFE;
}

/* ── Section page — fix underline on wrapped article titles ──────── */
/* background-image underline draws across full element width on wrap; */
/* text-decoration follows each line correctly instead.                */
.lt-section-article-row__title {
  background-image: none !important;
  background-size: 0 !important;
  transition: none !important;
  text-decoration: none;
  text-underline-offset: 3px;
}

.lt-section-article-row__link:hover .lt-section-article-row__title,
.lt-section-article-row__link:focus .lt-section-article-row__title,
.lt-section-article-row__link:active .lt-section-article-row__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Section page — article list single column ────────────────────── */
.lt-section-article-rows {
  grid-template-columns: 1fr;
  max-width: 800px;
}

/* H1: error pages (404, unauthorised, etc.) */
.lt-error-page__heading {
  font-family: 'Aeonik', sans-serif;
  font-size: clamp(28px, 2vw + 22px, 40px);
  font-weight: 400;
  line-height: 1.2;
}

/* ── Search page — generative answers width constraint ────────────── */
.ltx-generative-wrap {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Button font sizes — clamp to 14px on mobile ─────────────────── */
@media (max-width: 767px) {
  .ltx-pp__btn,
  .ltx-pp__btn-secondary,
  .ltx-support-widget__btn-label {
    font-size: 14px;
  }
}