/*
 * Dahls frontend typography.
 *
 * This is the final typography layer (theme.yml priority 1060):
 * - GT Walsheim for semantic headings and title/heading components.
 * - DM Sans for body copy, navigation, controls and ordinary UI text.
 *
 * Icon fonts are explicitly preserved because several modules render icons via
 * pseudo-elements whose glyphs depend on their original font family.
 */

:root {
  --dahls-font-heading: "GT Walsheim", system-ui, sans-serif;
  --dahls-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mh-font-heading: var(--dahls-font-heading);
  --mh-font-body: var(--dahls-font-body);
  --bs-body-font-family: var(--dahls-font-body);
  --bs-font-sans-serif: var(--dahls-font-body);
}

html body,
html body input,
html body select,
html body textarea,
html body button,
html body option {
  font-family: var(--dahls-font-body) !important;
}

/* Semantic headings plus the title conventions used by the theme and modules. */
html body[class] h1,
html body[class] h2,
html body[class] h3,
html body[class] h4,
html body[class] h5,
html body[class] h6,
html body[class] .h1,
html body[class] .h2,
html body[class] .h3,
html body[class] .h4,
html body[class] .h5,
html body[class] .h6,
html body[class] [class*="title" i],
html body[class] [class*="heading" i],
html body[class] [class*="headline" i],
html body[class] .ft-mark {
  font-family: var(--dahls-font-heading) !important;
}

/* Keep linked/wrapped title text in the same family as its title container. */
html body[class] h1 :is(a, span, strong, em, small),
html body[class] h2 :is(a, span, strong, em, small),
html body[class] h3 :is(a, span, strong, em, small),
html body[class] h4 :is(a, span, strong, em, small),
html body[class] h5 :is(a, span, strong, em, small),
html body[class] h6 :is(a, span, strong, em, small),
html body[class] [class*="title" i] :is(a, span, strong, em, small),
html body[class] [class*="heading" i] :is(a, span, strong, em, small),
html body[class] [class*="headline" i] :is(a, span, strong, em, small),
html body[class] .ft-mark :is(a, span, strong, em, small) {
  font-family: var(--dahls-font-heading) !important;
}

/* Decorative homepage USP labels are supporting text, not headings. */
html body .htile__usp {
  font-family: var(--dahls-font-body) !important;
}

/* The cart stylesheet declares this title as body copy with higher specificity. */
html body#cart .cart-container h1,
html body#cart .cart-container h1.h1 {
  font-family: var(--dahls-font-heading) !important;
}

/* Preserve icon glyphs after the global text rules above. */
html body .material-icons,
html body .material-icons-outlined,
html body .material-icons-round,
html body .material-icons-sharp,
html body .material-icons-two-tone {
  font-family: "Material Icons" !important;
}

html body :is(.ph, [class^="ph-"], [class*=" ph-"]) {
  font-family: "Phosphor" !important;
}

html body :is(.fa, .fas, .far, .fal, .fab, [class^="fa-"], [class*=" fa-"]) {
  font-family: "FontAwesome" !important;
}

html body :is(.icon, [class^="icon-"], [class*=" icon-"]) {
  font-family: "icon" !important;
}