/*
 * Shared density and hierarchy refinements.
 * This layer loads last so page-specific themes stay intact while supporting
 * navigation, cards, and long hubs become quieter and easier to scan.
 */

:root {
  --mf-density-line: rgba(247, 247, 244, 0.12);
  --mf-density-line-accent: rgba(244, 196, 48, 0.28);
  --mf-density-surface: rgba(6, 18, 14, 0.72);
  --mf-density-surface-quiet: rgba(8, 18, 15, 0.48);
  --mf-density-muted: rgba(247, 247, 244, 0.68);
}

/* Navigation is a routing tool, not a second content band. */
@media (min-width: 64.01rem) {
  html body .site-header .site-header__inner {
    width: min(calc(100% - 1.5rem), 100rem) !important;
    max-width: 100rem !important;
    min-height: 60px !important;
    gap: clamp(0.65rem, 1vw, 1rem) !important;
  }

  html body .site-header .site-brand {
    min-width: 11.5rem !important;
    gap: .65rem !important;
  }

  html body .site-header .site-brand__logo {
    width: 40px !important;
    height: 40px !important;
  }

  html body .site-header .site-brand__name {
    font-size: 1.05rem !important;
  }

  html body .site-header .site-brand__tag {
    color: rgba(247, 247, 244, .7) !important;
    font-size: 0.56rem !important;
    letter-spacing: .08em !important;
  }

  html body .site-header .site-nav__list {
    width: 100% !important;
    justify-content: center !important;
    gap: 0.16rem !important;
  }

  html body .site-header :is(.site-nav__link, .site-nav__toggle) {
    min-height: 44px !important;
    padding-inline: clamp(0.58rem, 0.75vw, 0.78rem) !important;
    border-color: transparent !important;
    border-radius: 3px !important;
    background: transparent !important;
    color: rgba(247, 247, 244, .82) !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
  }

  html body .site-header :is(.site-nav__link, .site-nav__toggle):is(:hover, :focus-visible),
  html body .site-header .site-nav__item.is-current > :is(.site-nav__link, .site-nav__toggle),
  html body .site-header .site-nav__link[aria-current="page"],
  html body .site-header .site-nav__toggle[aria-expanded="true"] {
    border-color: var(--mf-density-line-accent) !important;
    background: rgba(72, 168, 73, .1) !important;
    color: #f7f8f4 !important;
    box-shadow: inset 0 -2px 0 #f4c430 !important;
  }

  html body .site-header .site-header__actions {
    gap: 0.38rem !important;
  }

  html body .site-header .site-header__actions > :is(button, a) {
    min-height: 42px !important;
    padding: 0.56rem 0.72rem !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
  }

  html body .site-header .site-theme-toggle {
    width: auto !important;
    border-color: var(--mf-density-line) !important;
    background: transparent !important;
    color: rgba(247, 247, 244, .76) !important;
  }

  html body .site-header .site-header__search {
    gap: .42rem !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: rgba(247, 247, 244, .86) !important;
  }

  html body .site-header .site-header__search:is(:hover, :focus-visible) {
    border-color: var(--mf-density-line-accent) !important;
    background: rgba(244, 196, 48, .06) !important;
    color: #f7f8f4 !important;
  }

  html body .site-header .site-header__search kbd {
    display: inline-grid;
    place-items: center;
    min-width: 1.45rem;
    min-height: 1.45rem;
    padding: 0 .32rem;
    border: 1px solid rgba(247, 247, 244, .2);
    border-bottom-color: rgba(244, 196, 48, .48);
    border-radius: 3px;
    background: rgba(255, 255, 255, .04);
    color: rgba(247, 247, 244, .78);
    font: 800 .72rem/1 var(--font-ui, Arial, sans-serif);
    letter-spacing: 0;
  }

  html body .site-header .site-header__cta--media {
    border: 1px solid #f4c430 !important;
    border-radius: 3px !important;
  }

  html body .site-header .site-header__cta--contributor {
    border-color: rgba(247, 247, 244, .16) !important;
    color: rgba(247, 247, 244, .82) !important;
  }
}

/* Supporting cards recede; feature stories and active controls keep contrast. */
html body.mf-brand-v2 main#main-content :is(
  .mf-newsroom-today-card,
  .mf-newsroom-player-card,
  .mf-hub-proof-card,
  .mf-diaspora-desk__route,
  .stl-hub-college-card,
  .stl-pathway-card
) {
  border-color: var(--mf-density-line) !important;
  background-color: var(--mf-density-surface-quiet) !important;
  box-shadow: none !important;
}

html body.mf-brand-v2 main#main-content :is(
  .mf-newsroom-today-card,
  .mf-newsroom-player-card,
  .mf-hub-proof-card,
  .mf-diaspora-desk__route,
  .stl-hub-college-card,
  .stl-pathway-card
) :is(p, small) {
  color: var(--mf-density-muted) !important;
}

html body.mf-brand-v2 main#main-content :is(
  .mf-newsroom-today-card,
  .mf-newsroom-player-card,
  .mf-hub-proof-card,
  .mf-diaspora-desk__route
) :is(h3, strong) {
  font-size: clamp(0.88rem, 0.35vw + 0.8rem, 1.05rem) !important;
  line-height: 1.08 !important;
}

/* Homepage newsroom: live scan first, then an editorial lane with a compact player rail. */
@media (min-width: 70rem) {
  html body.mf-system-home .mf-newsroom-home {
    padding-block: clamp(1.25rem, 2vw, 1.8rem) !important;
  }

  html body.mf-system-home .mf-newsroom-home > .mf-v22-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }

  html body.mf-system-home .mf-newsroom-home > .mf-v22-container > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html body.mf-system-home .mf-newsroom-today-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html body.mf-system-home .mf-newsroom-today-card {
    min-height: 6.6rem !important;
    padding: 0.68rem !important;
  }

  html body.mf-system-home .mf-newsroom-today-card > :is(span, strong, small) {
    max-width: 88% !important;
  }

  html body.mf-system-home .mf-newsroom-story-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body.mf-system-home .mf-newsroom-story > a > img {
    aspect-ratio: 16 / 6.75 !important;
  }

  html body.mf-system-home .mf-newsroom-story h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  html body.mf-system-home .mf-newsroom-story p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html body.mf-system-home .mf-newsroom-player-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }

  html body.mf-system-home .mf-newsroom-player-grid > .mf-newsroom-player-card:nth-child(n + 4) {
    display: none !important;
  }

  html body.mf-system-home .mf-newsroom-player-card {
    display: grid !important;
    grid-template-columns: 6.4rem minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto 1fr !important;
    column-gap: 0.7rem !important;
    min-height: 6.15rem !important;
    padding: 0.48rem !important;
  }

  html body.mf-system-home .mf-newsroom-player-card__media,
  html body.mf-system-home .mf-newsroom-player-card__origin {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 5.1rem !important;
  }

  html body.mf-system-home .mf-newsroom-player-card__media img,
  html body.mf-system-home .mf-newsroom-player-card__origin {
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  html body.mf-system-home .mf-newsroom-player-card > :is(span, h3, p, a:not(.mf-newsroom-player-card__media)) {
    grid-column: 2 !important;
    margin-block: 0 !important;
  }

  html body.mf-system-home .mf-newsroom-player-card > span {
    margin-top: 0.1rem !important;
  }

  html body.mf-system-home .mf-newsroom-player-card > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.75rem !important;
  }

  html body.mf-system-home .mf-newsroom-player-card > a:not(.mf-newsroom-player-card__media) {
    align-self: end !important;
    min-height: 28px !important;
    font-size: 0.72rem !important;
  }

  html body.mf-system-home .mf-newsroom-head--stories {
    margin-top: clamp(0.9rem, 1.5vw, 1.25rem) !important;
  }

  html body.mf-system-home .mf-newsroom-head--stories h2 {
    font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
  }
}

/* The tabbed Diaspora desk supersedes the old stacked overview modules. */
html body.mf-diaspora-overview-page main#main-content > :is(
  .mf-da-command,
  .mf-da-daily,
  .mf-di-command,
  .mf-diaspora-fix-content,
  .stl-section
) {
  display: none !important;
}

html body.mf-diaspora-overview-page main#main-content > .mf-progressive-section {
  display: none !important;
}

html body.mf-diaspora-overview-page .mf-diaspora-desk__route-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body.mf-diaspora-overview-page .mf-diaspora-desk__route {
  min-height: 10.5rem !important;
}

/* STL hub: college and pathway guidance share a desktop editorial row. */
@media (min-width: 70.01rem) {
  html body.stl-soccer-hub-page main#main-content > #tier-college {
    grid-column: 2 / span 6 !important;
    grid-row: auto !important;
    order: 4 !important;
    padding-right: clamp(0.25rem, 0.7vw, 0.65rem) !important;
  }

  html body.stl-soccer-hub-page main#main-content > #tier-pathway {
    grid-column: 8 / -2 !important;
    grid-row: auto !important;
    order: 4 !important;
    padding-left: clamp(0.7rem, 1.35vw, 1.2rem) !important;
    border-left: 1px solid var(--mf-density-line) !important;
  }

  html body.stl-soccer-hub-page main#main-content > #tier-pathway::before {
    left: clamp(0.7rem, 1.35vw, 1.2rem) !important;
  }

  html body.stl-soccer-hub-page #stl-hub-college .stl-hub-college-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.stl-soccer-hub-page #stl-hub-pathways .stl-pathway-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.stl-soccer-hub-page #stl-hub-pathways :is(.stl-pathway-cards, .stl-pathway-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 69.99rem) {
  html body.mf-diaspora-overview-page .mf-diaspora-desk__route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 47.5rem) {
  html body.mf-diaspora-overview-page .mf-diaspora-desk__route-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.mf-diaspora-overview-page .mf-diaspora-desk__route {
    min-height: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .site-header :is(.site-nav__link, .site-nav__toggle),
  html body.mf-system-home .mf-newsroom-player-card__media img {
    transition: none !important;
  }
}

/* STL hub compact cards must remain the final density treatment after nav hydration. */
@media (min-width: 47.5625rem) {
  html:root body.mf-system-stl.mf-stl-premium.stl-soccer-hub-page main#main-content#main-content .stl-hub-youth-actions a,
  html:root body.mf-system-stl.mf-stl-premium.stl-soccer-hub-page main#main-content#main-content .stl-hs-next__actions a {
    min-height: 2rem !important;
  }
}

@media (min-width: 80rem) {
  html body.mf-stl-premium.stl-soccer-hub-page #stl-news-feed .stl-news-feed-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}