/*
 * Shared production density layer.
 *
 * This runs after route styles and establishes one restrained public type
 * hierarchy. Individual cards and data controls retain their local scales.
 */

:root {
  --mf-global-ticker-height: 64px;
  --mf-page-title-size: clamp(1.75rem, 2.35vw, 2.35rem);
  --mf-section-title-size: clamp(1.02rem, 1.25vw, 1.34rem);
  --mf-compact-hero-padding: clamp(1.15rem, 2.3vw, 2rem);
}

/* Reserve the full public chrome before the deferred shared header mounts. */
html [data-site-header]:empty {
  min-height: calc(var(--mf-global-header-height, 54px) + var(--mf-global-ticker-height, 64px)) !important;
}

/* Page titles remain decisive without turning every route into a billboard. */
html:root body:is(.mf-brand-v2, .mf-shell-unified) main#main-content :is(
  h1,
  .mf-unified-hero-title,
  .mf-core-title,
  .stl-heading,
  .vd-title
) {
  font-size: var(--mf-page-title-size) !important;
  letter-spacing: 0 !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

/* These selectors cover actual section titles while leaving compact card,
 * table, map, and utility labels at their designed local sizes. */
html:root body:is(.mf-brand-v2, .mf-shell-unified) main#main-content :is(
  .vd-heading,
  .stl-section-header-row .stl-subheading,
  .mf-newsroom-masthead h2,
  .mf-v22-section-heading h2,
  .mf-v22-section-head h2,
  .mf-player-hub-static--diaspora h2,
  .mf-diaspora-command__heading h2,
  .mf-diaspora-intelligence__heading h2
) {
  font-size: var(--mf-section-title-size) !important;
  font-family: var(--font-ui, var(--font-body)) !important;
  font-weight: 850 !important;
  letter-spacing: .015em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  text-wrap: balance;
}

/* Final pass for older public sections that still ship local Bebas overrides.
 * Keep hero headlines and card headlines alone; section heads should read like
 * a professional editorial interface instead of a second billboard. */
html:root body:is(.mf-brand-v2, .mf-shell-unified) main#main-content > :is(section, article):not([class*="hero"]) :is(
  h2,
  .stl-subheading,
  .mf-home-watch-row__head h2,
  .mf-newsroom-head--stories h2,
  .site-newsletter-shell__title
):not(article h2):not(.mf-v22-media-card h2):not(.mf-newsroom-story h2):not(.mf-newsroom-player-card h2) {
  font-family: var(--font-ui, var(--font-body)) !important;
  font-size: var(--mf-section-title-size) !important;
  font-weight: 850 !important;
  letter-spacing: .015em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  text-wrap: balance;
}

html:root body.mf-player-tracker-golden main[data-player-tracker-golden] :is(
  .mf-ptg-feature-copy h2,
  .mf-ptg-map-head h2,
  .mf-ptg-map-results h2,
  .mf-ptg-profile-head h2,
  .mf-ptg-drawer-empty h2
) {
  font-family: var(--ptg-body, var(--font-ui, var(--font-body))) !important;
  font-size: clamp(.95rem, 1.15vw, 1.18rem) !important;
  font-weight: 850 !important;
  letter-spacing: .01em !important;
  line-height: 1.16 !important;
  text-transform: none !important;
  text-wrap: balance;
}

@media (max-width: 47.99rem) {
  :root {
    --mf-global-ticker-height: 60px;
    --mf-page-title-size: clamp(1.65rem, 7vw, 2.1rem);
    --mf-section-title-size: clamp(1rem, 4.7vw, 1.22rem);
  }
}

/* Footer links are compact visually, but their interactive boxes must remain
 * large enough for keyboard, touch, and switch-input users on desktop too. */
@media (min-width: 48rem) {
  html:root body .site-footer .site-socials > a {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  html:root body .site-footer .site-footer__nav a,
  html:root body .site-footer .site-footer__bottom a {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding-block: 0.35rem !important;
  }
}

html:root body.mf-player-tracker-golden main[data-player-tracker-golden] :where(
  button,
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select
) {
  box-sizing: border-box;
  min-width: 44px !important;
  min-height: 44px !important;
}

html:root body.mf-player-tracker-golden main[data-player-tracker-golden] :where(
  .mf-ptg-filterbar a,
  .mf-ptg-map-actions a,
  .mf-ptg-map-results-head a,
  .mf-ptg-section-head a,
  .mf-ptg-profile-actions a,
  .mf-ptg-rail a
) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Public routes keep their own subject-matter content, but share one compact
 * reading frame. The runtime applies this class only outside internal tools. */
html body.mf-shell-unified {
  --mf-shell-gutter: clamp(1rem, 2.5vw, 2rem);
  --mf-shell-page-max: 88rem;
  --mf-shell-section-space: clamp(1.1rem, 2.1vw, 2rem);
  background: #050b08;
  color: var(--mf-editorial-copy, #eaf0e6);
}

html body.mf-shell-unified main#main-content {
  min-width: 0;
  background: #050b08;
}

html body.mf-shell-unified main#main-content > :is(section, article) {
  min-width: 0;
  scroll-margin-top: calc(var(--mf-global-header-height, 54px) + 1rem);
}

html body.mf-shell-unified main#main-content > :is(section, article) > :is(
  .stl-container,
  .container,
  .mf-container,
  .mf-core-container,
  .mf-v22-container,
  .mf-di-shell
) {
  width: min(calc(100% - var(--mf-shell-gutter)), var(--mf-shell-page-max)) !important;
  min-width: 0;
  margin-inline: auto;
}

html body.mf-shell-unified main#main-content > :is(section, article):not([class*="hero"]):not([class*="__hero"]) {
  padding-block: var(--mf-shell-section-space);
}

/* Public routes use one compact masthead rhythm. Page-specific artwork and
 * content stay intact while oversized empty space is removed. */
html body.mf-shell-unified main#main-content > :is(
  .mf-v22-hero,
  .stl-city-hero,
  .vd-hero,
  .mf-diaspora-hero,
  .mf-afcon-hero,
  .mf-policy-hero,
  .mf-player-tracker-hero,
  .mf-unified-hero
) {
  min-height: 0 !important;
  padding-block: var(--mf-compact-hero-padding) !important;
}

html body.mf-shell-unified main#main-content > :is(
  .mf-v22-hero,
  .stl-city-hero,
  .vd-hero,
  .mf-diaspora-hero,
  .mf-afcon-hero,
  .mf-policy-hero,
  .mf-player-tracker-hero,
  .mf-unified-hero
) :is(h1, .stl-heading, .vd-title, .mf-unified-hero-title) {
  margin-block: 0.25rem 0.5rem !important;
}

html body.mf-shell-unified main#main-content > :is(section, article) > :is(header, .stl-container, .container, .mf-container, .mf-core-container, .mf-v22-container, .mf-di-shell) > :is(h2, h3) {
  letter-spacing: 0 !important;
  text-wrap: balance;
}

html body.mf-shell-unified main#main-content :is(
  .stl-btn,
  .mf-v22-button,
  .mf-unified-button,
  .mf-core-button,
  .mf-player-hub-static__contribute a
) {
  min-height: 2.55rem;
  border-radius: 3px !important;
  letter-spacing: 0 !important;
}

html:root body.mf-shell-unified.mf-system-stl main#main-content#main-content :is(
  a[href],
  button,
  input,
  select,
  textarea
) {
  box-sizing: border-box;
  min-height: 44px !important;
}

html body.mf-shell-unified main#main-content :is(img, video, iframe) {
  max-width: 100%;
}

@media (max-width: 47.99rem) {
  html body.mf-shell-unified {
    --mf-shell-gutter: 1rem;
    --mf-shell-section-space: 1rem;
  }

  html body.mf-shell-unified main#main-content > :is(section, article) > :is(
    .stl-container,
    .container,
    .mf-container,
    .mf-core-container,
    .mf-v22-container,
    .mf-di-shell
  ) {
    width: calc(100% - var(--mf-shell-gutter)) !important;
  }

  /* Keep compact text links compact while giving actual mobile controls a
   * consistent, usable hit area after all route-specific density rules. */
  html:root body.mf-shell-unified main#main-content#main-content :where(
    button,
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    summary,
    [role="button"],
    .site-button,
    .stl-btn,
    .mf-v22-button,
    .mf-unified-button,
    .mf-core-button,
    .site-header__cta,
    .mf-player-hub-static__contribute a,
    .mf-article-share__button
  ) {
    box-sizing: border-box;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  html:root body.mf-submit-page.mf-shell-unified main#main-content > section#submit-form .btn[type="submit"] {
    min-height: 44px !important;
  }

  html:root body.mf-shell-unified summary,
  html:root body.mf-shell-unified .mf-article-share--inline .mf-article-share__button.mf-article-share__button {
    box-sizing: border-box;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  html:root body.mf-shell-unified :where(
    .site-theme-toggle,
    .site-socials a,
    .mf-polish-back-top
  ) {
    box-sizing: border-box;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }
}