/* GlamRoom type system — the one place that sets heading typography.
 *
 * One family (Onest) and five roles. Every heading on every page takes the size, weight,
 * leading and tracking of its role from here, so a page title is always larger than the
 * section titles below it and no surface invents its own weight. This file loads after
 * every other stylesheet (and closes every CSS bundle); its selectors repeat the component
 * selectors under `html body`, so they win without !important.
 *
 *   page     H1 of a page                  300   the largest size on the page
 *   section  H2 that opens a section       300
 *   sub      heading inside a section      300   prose, groups, panels
 *   title    card and item names           450
 *   label    small labels over content     500   sentence case, no letter-spacing
 *
 * The home banner keeps its own size for its composition but uses the page role's weight
 * and tracking.
 *
 * Headings balance their lines and never hyphenate on their own: the browser breaks at any
 * syllable ("wei-che", "Gesichtsbehand-lungen"), and balancing makes it do so where the word
 * would have fitted. A compound wider than its column carries a soft hyphen at its seam
 * (glamroom_heading_text() in inc/i18n.php); break-word is only the last resort.
 */
:root {
  --type-page: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --type-section: clamp(1.75rem, 1.2rem + 1.9vw, 3rem);
  --type-sub: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --type-title: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --type-label: 0.8125rem;
  --type-family: "Onest", system-ui, sans-serif;
}

/* page */
html body :is(
  .careers-intro h1,
  .page-banner h1,
  .page-banner--slim h1,
  .journal-index-header h1,
  .journal-article-header h1,
  .legal-document-header h1,
  .shop-product-summary h1,
  .shop-page .commerce-intro h1,
  .shop-page .content-page > h1,
  .shop-page .checkout-page-main > h1,
  .shop-page .content-page-inner > h1,
  .content-page h1,
  .content-page .wp-block-query-title,
  .service-detail h1
) {
  font-family: var(--type-family);
  font-size: var(--type-page);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
}
html body .story-hero h1 {
  font-weight: 300;
  letter-spacing: -0.035em;
  hyphens: manual;
}

/* section */
html body :is(
  .careers-studio h2,
  .careers-openings h2,
  .services-heading h2,
  .work-gallery-intro h2,
  .studio-tour-heading h2,
  .team-heading h2,
  .repeat-heading h2,
  .journal-section-heading h2,
  .gift-copy h2,
  .catalog-source-title,
  .catalog-empty h3,
  .service-landing-gallery h2,
  .service-landing-related h2,
  .choice-intro .choice-title,
  .academy-section-heading h2,
  .academy-formats h2,
  .academy-certainties h2,
  .academy-inquiry h2,
  .shop-category-overview-heading h2,
  .shop-product-content > h2,
  .commerce-empty h2,
  .service-detail-section h2,
  .service-detail-pricing-copy h2,
  .service-related h2,
  .service-review-copy h2,
  .service-detail-gallery h2,
  .instagram-journal-heading h2
) {
  font-family: var(--type-family);
  font-size: var(--type-section);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
}

/* sub */
html body :is(
  .catalog-group-heading h2,
  .journal-body h2,
  .legal-copy h2,
  .shop-prose h2,
  .shop-prose h3,
  .shop-service-return h2,
  .shop-results-heading h2,
  .repeat-panel h3,
  .hair-care-heading h2,
  .hair-care-heading h3,
  .academy-path h3,
  .academy-format-list dt,
  .academy-certainties strong,
  .hair-picker-title,
  .shop-category-overview-title,
  .shop-product h3,
  .team-proof h3,
  .services-menu-title,
  .content-page .wp-block-post-title,
  .social-name
) {
  font-family: var(--type-family);
  font-size: var(--type-sub);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
}

/* title: weight and tracking everywhere; size where the heading names a card */
html body :is(
  .journal-card h2,
  .journal-card h3,
  .journal-body h3,
  .journal-next h2,
  .journal-fact h3,
  .choice-service h3,
  .choice-help h3,
  .service-guide h3,
  .catalog-pricing-note h3,
  .catalog-empty-colour h4,
  .catalog-service-name,
  .hair-picker-result h3,
  .hair-picker-price h4,
  .hair-care-name,
  .services-menu-card-title,
  .service-choice-title,
  .home-story .services .service-name,
  .hero-direction-name,
  .studio-zone-name,
  .photo-toolbar h2,
  .shop-page .wc-block-components-title,
  .shop-page .wc-block-cart__totals-title,
  .shop-page .wc-block-components-checkout-step__title,
  .shop-page .wc-block-components-order-summary-item__description h3,
  .shop-page .wc-block-components-checkout-order-summary__title
) {
  font-family: var(--type-family);
  font-weight: 450;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  hyphens: manual;
  overflow-wrap: break-word;
}
html body :is(
  .journal-card h2,
  .journal-card h3,
  .journal-body h3,
  .journal-next h2,
  .journal-fact h3,
  .choice-help h3,
  .service-guide h3,
  .hair-picker-result h3,
  .service-choice-title,
  .studio-zone-name
) {
  font-size: var(--type-title);
  line-height: 1.3;
}

/* label: small text over content, never spaced capitals */
html body :is(
  .page-banner-eyebrow,
  .shop-eyebrow,
  .shop-product-category,
  .shop-category-overview-status,
  .services-menu-kicker,
  .mobile-menu-label,
  .story-hero-eyebrow,
  .hair-care-kicker,
  .work-gallery-kicker,
  .footer-heading,
  .site-footer .footer-heading
) {
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* breadcrumbs: one size, colour and rhythm on every page that has them */
html body :is(
  .journal-breadcrumb,
  .academy-breadcrumb,
  .legal-breadcrumb,
  .service-breadcrumb ol,
  .service-landing-breadcrumb,
  .shop-breadcrumb
) {
  min-height: 3rem;
  align-items: center;
  gap: 0.25rem 0.6rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}
html body :is(.journal-breadcrumb, .service-landing-breadcrumb) { padding-block: 0.5rem; }
html body :is(
  .journal-breadcrumb a,
  .academy-breadcrumb a,
  .legal-breadcrumb a,
  .service-breadcrumb a,
  .service-landing-breadcrumb a,
  .shop-breadcrumb a
) {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--graphite);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
}
html body :is(
  .journal-breadcrumb a,
  .academy-breadcrumb a,
  .legal-breadcrumb a,
  .service-breadcrumb a,
  .service-landing-breadcrumb a,
  .shop-breadcrumb a
):hover { color: var(--gold-text); text-decoration-color: currentColor; }

/* Line breaks. Running text avoids a one-word last line. Names and links in narrow columns break at a
 * seam (inc/typography.php puts a soft hyphen there) or, for an unknown word, at the edge, never
 * through automatic hyphenation. A legal citation like 6(1)(f) stays in one piece. */
html body :is(p, li, dd, figcaption, blockquote, summary) { text-wrap: pretty; }
html body :is(.service-name, .catalog-service-name, .shop-categories a, .services-menu-list a, .mobile-menu a, .footer-groups a) { hyphens: manual; overflow-wrap: break-word; }
.no-break { white-space: nowrap; }
/* Emphasis and table heads use the weight set (the browser default for strong and th is 700). */
html body :is(strong, b) { font-weight: 600; }
html body th { font-weight: 500; }
/* Cyrillic runs about 15% wider than Latin at the same size: a Russian page title steps down so that
   "Франкфурте" stays whole in the 360-460px column of a laptop banner. */
html:lang(ru) body :is(.page-banner h1, .page-banner--slim h1) { font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.6rem); }