/*
 * MoFutbol Magazine Authority route system.
 * Shared visual language for the route families approved on 2026-07-21.
 */

html body.mf-magazine-authority {
  --ma-ink: #030806;
  --ma-surface: #07130d;
  --ma-surface-2: #0b1c14;
  --ma-surface-3: #10251a;
  --ma-text: #fffdf3;
  --ma-muted: #b8c7bd;
  --ma-gold: #f5c842;
  --ma-lime: #c7f13a;
  --ma-green: #2db84b;
  --ma-red: #e8302a;
  --ma-sky: #79c9ff;
  --ma-line: rgba(245, 200, 66, 0.22);
  --ma-line-strong: rgba(245, 200, 66, 0.42);
  --ma-card-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  --ma-radius: 0.9rem;
  color: var(--ma-text) !important;
  background:
    radial-gradient(circle at 82% 6%, rgba(45, 184, 75, 0.08), transparent 31rem),
    linear-gradient(180deg, #050a07 0%, var(--ma-ink) 100%) !important;
}

html body.mf-magazine-authority main#main-content {
  min-width: 0;
  overflow: clip;
  color: var(--ma-text);
  background: transparent !important;
}

html body.mf-magazine-authority :where(.site-container, .stl-container, .mf-core-container, .mf-diaspora-container, .mf-youth-container) {
  width: min(calc(100% - clamp(2rem, 5vw, 4.5rem)), 80rem) !important;
  max-width: 80rem !important;
  margin-inline: auto !important;
}

html body.mf-magazine-authority :where(h1, h2, h3, h4) {
  color: var(--ma-text);
  text-wrap: balance;
}

html body.mf-magazine-authority :where(p, li, dd) {
  color: var(--ma-muted);
  font-size: max(0.96rem, 15px);
  line-height: 1.58;
}

html body.mf-magazine-authority :where(.stl-eyebrow, .mf-core-kicker, .mf-daily-meta, .mf-board-top span, .section-label, .mf-route-label) {
  color: var(--ma-gold) !important;
  font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
  font-size: max(0.68rem, 11px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

html body.mf-magazine-authority :where(
  .stl-pro-hero,
  .stl-city-hero,
  .mf-youth-hero,
  .mf-diaspora-hero,
  .mf-africa-hero,
  .mf-core-hero,
  .mf-afcon-hero,
  .mf-v20-lane-hero,
  .mf-contributor-hero,
  .mf-editorial-hero
) {
  position: relative !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-block: clamp(1.5rem, 3.4vw, 3rem) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ma-line) !important;
  background-color: #06110b !important;
  background-blend-mode: multiply, normal !important;
  isolation: isolate;
}

html body.mf-magazine-authority.stl-pro-page .stl-pro-hero {
  background:
    linear-gradient(90deg, rgba(3, 8, 6, 0.98) 0%, rgba(3, 8, 6, 0.9) 48%, rgba(3, 8, 6, 0.48) 100%),
    url("/assets/img/us-soccer/city2-matchday-official.jpg") center right / cover no-repeat !important;
}

html body.mf-magazine-authority :where(
  .stl-pro-hero,
  .stl-city-hero,
  .mf-youth-hero,
  .mf-diaspora-hero,
  .mf-africa-hero,
  .mf-core-hero,
  .mf-afcon-hero,
  .mf-v20-lane-hero,
  .mf-contributor-hero,
  .mf-editorial-hero
)::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 3px;
  background: linear-gradient(90deg, var(--ma-red), var(--ma-gold), var(--ma-lime), var(--ma-green));
}

html body.mf-magazine-authority :where(
  .stl-pro-hero h1,
  .stl-city-hero h1,
  .mf-youth-hero h1,
  .mf-diaspora-hero h1,
  .mf-africa-hero h1,
  .mf-core-hero h1,
  .mf-afcon-hero h1,
  .mf-v20-lane-hero h1,
  .mf-contributor-hero h1,
  .mf-editorial-hero h1
) {
  max-width: 17ch !important;
  margin: 0 !important;
  font-family: var(--font-heading, "Outfit", system-ui, sans-serif) !important;
  font-size: clamp(2.35rem, 5vw, 4.6rem) !important;
  font-weight: 800 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.045em !important;
  text-transform: none !important;
}

html body.mf-magazine-authority :where(
  .stl-pro-hero p,
  .stl-city-hero p,
  .mf-youth-hero p,
  .mf-diaspora-hero p,
  .mf-africa-hero p,
  .mf-core-hero p,
  .mf-afcon-hero p,
  .mf-v20-lane-hero p,
  .mf-contributor-hero p,
  .mf-editorial-hero p
) {
  max-width: 62ch !important;
  margin-block: 0.8rem 0 !important;
  color: #d6e0d8 !important;
  font-size: max(1rem, 16px) !important;
  line-height: 1.55 !important;
}

html body.mf-magazine-authority :where(.stl-section, .mf-youth-section, .mf-core-section, .mf-world-section) {
  margin: 0 !important;
  padding-block: clamp(1.45rem, 3.2vw, 2.8rem) !important;
  border: 0 !important;
  border-top: 1px solid rgba(245, 200, 66, 0.12) !important;
  background: transparent !important;
}

html body.mf-magazine-authority :where(.stl-section--alt, .mf-core-section--tint) {
  background:
    linear-gradient(100deg, rgba(45, 184, 75, 0.045), transparent 46%),
    rgba(255, 255, 255, 0.012) !important;
}

html body.mf-magazine-authority :where(.stl-heading, .stl-subheading, .mf-core-section h2, .mf-youth-section h2, .mf-diaspora-page h2, .mf-afcon-page h2) {
  margin: 0 !important;
  color: var(--ma-text) !important;
  font-family: var(--font-heading, "Outfit", system-ui, sans-serif) !important;
  font-size: clamp(1.65rem, 3vw, 2.75rem) !important;
  font-weight: 750 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
}

html body.mf-magazine-authority :where(
  article,
  .mf-info-card,
  .mf-route-card,
  .mf-surface-card,
  .mf-media-card,
  .mf-official-source-card,
  .mf-core-card,
  .mf-youth-card,
  .mf-diaspora-card,
  .stl-pro-card
) {
  border-color: var(--ma-line) !important;
  border-radius: var(--ma-radius) !important;
}

html body.mf-magazine-authority main#main-content :where(
  .mf-info-card,
  .mf-route-card,
  .mf-surface-card,
  .mf-media-card,
  .mf-official-source-card,
  .mf-core-card,
  .mf-youth-card,
  .mf-diaspora-card,
  .stl-pro-card,
  .stl-pro-hero__panel,
  .mf-editorial-hero__panel
) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 54%),
    rgba(7, 19, 13, 0.94) !important;
  box-shadow: var(--ma-card-shadow) !important;
}

html body.mf-magazine-authority main#main-content :where(
  .mf-info-card,
  .mf-route-card,
  .mf-surface-card,
  .mf-media-card,
  .mf-official-source-card,
  .mf-core-card,
  .mf-youth-card,
  .mf-diaspora-card,
  .stl-pro-card
):hover {
  border-color: var(--ma-line-strong) !important;
  transform: translateY(-2px);
}

html body.mf-magazine-authority main#main-content :where(a, button, input, select, textarea, summary) {
  scroll-margin-top: 7rem;
}

html body.mf-magazine-authority main#main-content :where(a, button, summary) {
  min-height: 44px;
}

html body.mf-magazine-authority main#main-content :where(.stl-btn, .btn, .site-button, .mf-core-button, .mf-v20-button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0.7rem 1rem !important;
  border-radius: 0.7rem !important;
  font-size: max(0.88rem, 14px) !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
}

html body.mf-magazine-authority main#main-content :where(.stl-btn--primary, .btn-primary, .site-button--primary, .mf-core-button--primary) {
  border-color: transparent !important;
  background: linear-gradient(115deg, var(--ma-gold), var(--ma-lime) 66%, #62dc98) !important;
  color: #061009 !important;
  box-shadow: 0 12px 28px rgba(199, 241, 58, 0.12) !important;
}

html body.mf-magazine-authority main#main-content :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ma-lime) !important;
  outline-offset: 3px !important;
}

html body.mf-magazine-authority main#main-content :where(input, select, textarea) {
  min-height: 44px !important;
  border: 1px solid var(--ma-line) !important;
  border-radius: 0.65rem !important;
  background: rgba(2, 10, 7, 0.9) !important;
  color: var(--ma-text) !important;
  font-size: 1rem !important;
}

html body.mf-magazine-authority main#main-content :where(img, video, iframe) {
  max-width: 100%;
}

html body.mf-magazine-authority main#main-content :where(.mf-media-card img, .mf-core-card img, .mf-diaspora-card img, .mf-official-source-card img) {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--ma-radius) - 0.2rem);
}

/* Core editorial/company pages: wider feature column with a useful rail. */
html body.mf-magazine-authority.mf-core-page .mf-core-hero__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.55fr) !important;
  gap: clamp(1rem, 3vw, 2.5rem) !important;
  align-items: end !important;
}

html body.mf-magazine-authority.mf-core-page :where(.mf-core-grid, .mf-core-card-grid) {
  gap: clamp(0.8rem, 1.7vw, 1.25rem) !important;
}

/* Player and diaspora authority pages: remove the tall blue-panel treatment. */
html body.mf-magazine-authority :where(
  .mf-diaspora-fix-content,
  .mf-da-command,
  .mf-da-daily,
  .mf-tracker-official-board,
  .mf-tracker-player-media,
  .mf-diaspora-board,
  .mf-afcon-board,
  .mf-afcon-dashboard-section
) {
  border-color: var(--ma-line) !important;
  background: transparent !important;
}

html body.mf-magazine-authority :where(.mf-diaspora-grid, .mf-tracker-grid, .mf-official-source-grid, .mf-media-grid) {
  gap: clamp(0.75rem, 1.6vw, 1.2rem) !important;
}

/* Club, league, youth and U.S. pathway pages. */
html body.mf-magazine-authority :where(.stl-pro-hero__grid, .mf-v20-lane-hero__grid, .mf-youth-hero__grid, .mf-editorial-hero__grid) {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr) !important;
  gap: clamp(1rem, 3vw, 2.5rem) !important;
  align-items: center !important;
}

html body.mf-magazine-authority :where(.mf-route-grid, .mf-contact-grid, .mf-core-grid, .mf-official-source-grid) {
  gap: clamp(0.85rem, 1.8vw, 1.35rem) !important;
}

/* Contributor entry keeps the portal action visible in the first viewport. */
html body.mf-magazine-authority.mf-contributor-page .mf-contributor-hero {
  min-height: min(34rem, calc(100vh - 7rem)) !important;
}

html body.mf-magazine-authority.mf-contributor-page .mf-contributor-hero__grid {
  width: min(calc(100% - clamp(2rem, 5vw, 4.5rem)), 80rem) !important;
  max-width: 80rem !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr) !important;
  gap: clamp(1rem, 3vw, 2.5rem) !important;
  align-items: center !important;
}

@media (max-width: 62rem) {
  html body.mf-magazine-authority :where(
    .stl-pro-hero__grid,
    .mf-v20-lane-hero__grid,
    .mf-youth-hero__grid,
    .mf-editorial-hero__grid,
    .mf-core-hero__grid,
    .mf-contributor-hero__grid
  ) {
    grid-template-columns: 1fr !important;
  }

  html body.mf-magazine-authority :where(
    .stl-pro-hero h1,
    .stl-city-hero h1,
    .mf-youth-hero h1,
    .mf-diaspora-hero h1,
    .mf-africa-hero h1,
    .mf-core-hero h1,
    .mf-afcon-hero h1,
    .mf-v20-lane-hero h1,
    .mf-contributor-hero h1,
    .mf-editorial-hero h1
  ) {
    max-width: 21ch !important;
    font-size: clamp(2.15rem, 8vw, 3.6rem) !important;
  }
}

@media (max-width: 48rem) {
  html body.mf-magazine-authority.mf-contributor-page .mf-contributor-hero__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.mf-magazine-authority :where(.site-container, .stl-container, .mf-core-container, .mf-diaspora-container, .mf-youth-container) {
    width: min(calc(100% - 1.5rem), 80rem) !important;
  }

  html body.mf-magazine-authority :where(
    .stl-pro-hero,
    .stl-city-hero,
    .mf-youth-hero,
    .mf-diaspora-hero,
    .mf-africa-hero,
    .mf-core-hero,
    .mf-afcon-hero,
    .mf-v20-lane-hero,
    .mf-contributor-hero,
    .mf-editorial-hero
  ) {
    padding-block: 1.25rem 1.5rem !important;
  }

  html body.mf-magazine-authority :where(
    .stl-pro-hero h1,
    .stl-city-hero h1,
    .mf-youth-hero h1,
    .mf-diaspora-hero h1,
    .mf-africa-hero h1,
    .mf-core-hero h1,
    .mf-afcon-hero h1,
    .mf-v20-lane-hero h1,
    .mf-contributor-hero h1,
    .mf-editorial-hero h1
  ) {
    font-size: clamp(2rem, 11vw, 3rem) !important;
    line-height: 1 !important;
  }

  html body.mf-magazine-authority :where(.mf-route-grid, .mf-contact-grid, .mf-core-grid, .mf-official-source-grid, .mf-media-grid) {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.mf-magazine-authority *,
  html body.mf-magazine-authority *::before,
  html body.mf-magazine-authority *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}