/* WEMMS TYPOGRAPHY CONSISTENCY V4 — UI ONLY */
/* Oswald: headings/actions. Schueler SuperXP: descriptions/body text. */
:root {
  --wm-display: "WEMMS Oswald", Oswald, "Arial Narrow", Arial, sans-serif;
  --wm-body: "WEMMS Schueler SuperXP", "Schueler SuperXP", Arial, sans-serif;
}

@media screen {
  /* Action links must have the SAME face as buttons everywhere.
     Avoid album/print surfaces: preserve template geometry and labels. */
  html body :is(
    button, [role="button"], input[type="submit"], input[type="button"],
    a.btn, a.primary, a.button-primary, a.nav-action, a.header-cta,
    a.add-btn, a.outline, a.text-button, a.download-button,
    a[class*="button"], a[class*="btn"], a[class*="action"],
    .wm-v4 .wm-nav a, .site-header nav a, .header nav a,
    .nav a, .topnav a, .hero-actions a, .last-buttons a,
    .footer a.btn, .ending-content a
  ):not(.page *):not(.print-page *):not(.collage-sheet *):not(.sheet *) {
    font-family: var(--wm-display) !important;
    font-weight: 600 !important;
    font-style: normal;
    letter-spacing: .012em;
    font-synthesis: none;
  }

  /* Inherited text inside buttons must not switch back to Schueler. */
  html body :is(
    .hero-actions a, .last-buttons a, .nav-action,
    .button-primary, .wm-v4 .wm-nav a, button
  ):not(.page *):not(.print-page *):not(.collage-sheet *)
  :is(span, strong, small, em) {
    font-family: inherit !important;
    font-style: inherit !important;
  }

  /* Two buttons in the maket hero previously had different sizes/faces. */
  html body .hero-actions > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 44px;
    max-width: 100%;
    padding: 13px 21px;
    border-radius: 999px;
    font-family: var(--wm-display) !important;
    font-size: 14px !important;
    line-height: 1.25;
    font-weight: 600 !important;
    white-space: normal;
    text-align: center;
  }

  /* Put secondary explanatory copy below the CTA pair. */
  html body .hero-actions > .hero-sub {
    flex-basis: 100%;
    margin-top: 0;
    font-family: var(--wm-body) !important;
  }

  /* Headings must fit inside their containers without clipping/overflow. */
  html body :is(
    .hero h1, .intro h1, .ending h2, .last h2,
    .section h2, .editor-intro h2, .request h2
  ) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
  }
  html body :is(.hero-copy, .ending-content, .ending-content > *, .last > *) {
    min-width: 0;
  }

  /* Editorial notes are supplementary, not a third font family. */
  html body :is(.handwritten, .handnote, .paper-note) {
    font-family: var(--wm-body) !important;
    font-style: italic;
  }
}

@media screen and (max-width: 760px) {
  html body .hero-actions { gap: 12px; }
  html body .hero-actions > a {
    flex: 1 1 185px;
    min-width: 0;
    white-space: normal;
  }
  html body .ending-content { flex-wrap: wrap; }
  html body .ending h2 { font-size: clamp(30px, 7vw, 44px); }
}

@media screen and (max-width: 390px) {
  html body .hero-actions > a { flex-basis: 100%; width: 100%; }
  html body .ending h2 { font-size: clamp(28px, 8vw, 36px); }
}

/* BEGIN WEMMS UI REGISTER V5 */
/* Convention: normal case for navigation and calls to action, uppercase
   only for section overlines.  Never touch the printable album canvas. */
@media screen {
  /* Common font for every interactive UI control across WEMMS. */
  html body :is(
    button, [role="button"], input[type="button"], input[type="submit"],
    .btn, .primary, .button-primary, .nav-action, .header-cta,
    .copy-brief, .add-btn, .outline, .text-button, .download-button,
    .wm-v4 .wm-nav a, .wm-v4 .wm-nav button,
    .wm-v4 .wm-mobile-nav a, .wm-v4 .wm-mobile-nav button,
    .wm-v4 .wm-menu a, .wm-v4 .wm-menu button,
    .site-header nav a, .header nav a, .topnav a,
    .hero-actions a, .last-buttons a, .ending-content a
  ):not(.page *):not(.print-page *):not(.template-page *):not(.spread *):not(.sheet *):not(.collage-sheet *):not(.slot *) {
    font-family: "WEMMS Oswald", Oswald, "Arial Narrow", Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-synthesis: none;
    font-variant-caps: normal !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
    line-height: 1.25 !important;
  }

  /* All menu items (including the active item) have IDENTICAL typography.
     CTA buttons are separated below so their 600 weight is consistent. */
  html body :is(
    .wm-v4 .wm-nav a, .wm-v4 .wm-nav button,
    .wm-v4 .wm-mobile-nav a, .wm-v4 .wm-mobile-nav button,
    .wm-v4 .wm-menu a, .wm-v4 .wm-menu button,
    .site-header nav a, .header nav a, .topnav a
  ):not(.page *):not(.print-page *):not(.spread *) {
    font-family: "WEMMS Oswald", Oswald, "Arial Narrow", Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-variant-caps: normal !important;
    text-transform: none !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    letter-spacing: .01em !important;
  }

  /* CTA inside any kind of header uses the SAME text styling on all sites. */
  html body :is(
    .wm-v4 .wm-nav a[class*="action"], .wm-v4 .wm-nav a[class*="cta"],
    .wm-v4 .wm-nav a[class*="button"], .wm-v4 .wm-nav a[class*="btn"],
    .wm-v4 .wm-nav button,
    .site-header .nav-action, .site-header .button-primary,
    .header .header-cta, .topnav .nav-action,
    header .nav-action, header .header-cta, header .button-primary
  ):not(.page *):not(.print-page *):not(.spread *) {
    font-family: "WEMMS Oswald", Oswald, "Arial Narrow", Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
  }

  /* If the label is nested in a span/strong/em, inherit its control's font. */
  html body :is(
    .wm-v4 .wm-nav a, .wm-v4 .wm-nav button,
    .wm-v4 .wm-mobile-nav a, .wm-v4 .wm-mobile-nav button,
    .site-header nav a, .header nav a,
    .hero-actions a, .nav-action, .header-cta,
    .button-primary, .btn, .primary
  ):not(.page *):not(.print-page *):not(.spread *)
  :is(span, strong, em, small) {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    text-transform: none !important;
    letter-spacing: inherit !important;
  }

  /* Titles in running text must not acquire forced all-caps from old CSS. */
  html body :is(h1,h2,h3,h4,h5,h6):not(.page *):not(.print-page *):not(.template-page *):not(.spread *):not(.sheet *):not(.collage-sheet *) {
    text-transform: none !important;
    font-variant-caps: normal !important;
  }

  /* Small semantic section overlines remain uppercase everywhere. */
  html body :is(.kicker, .eyebrow, .side-label, .chapter-name):not(.page *):not(.print-page *):not(.spread *) {
    font-family: "WEMMS Oswald", Oswald, "Arial Narrow", Arial, sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    font-variant-caps: normal !important;
    letter-spacing: .12em !important;
  }
}
@media screen and (max-width: 760px) {
  html body :is(
    .wm-v4 .wm-nav a, .wm-v4 .wm-nav button,
    .wm-v4 .wm-mobile-nav a, .wm-v4 .wm-mobile-nav button,
    .wm-v4 .wm-menu a, .wm-v4 .wm-menu button,
    .site-header nav a, .header nav a, .topnav a,
    .wm-v4 .wm-nav a[class*="action"],
    .site-header .nav-action, .header .header-cta
  ) { font-size: 12px !important; }
}
/* END WEMMS UI REGISTER V5 */