@import url('/sportsfoundry/assets/brand/brand-tokens.css');
@import url('/sportsfoundry/assets/ambient-foundation.css');
@import url('/sportsfoundry/assets/ambient-data-language.css');
@import url('/sportsfoundry/assets/typography-hierarchy.css');
@import url('/sportsfoundry/assets/photography-system.css');
@import url('/sportsfoundry/assets/navigation-utility-shell.css');
@import url('/sportsfoundry/assets/coverage-presentation.css');
@import url('/sportsfoundry/assets/d11c-product-presentation.css');
@import url('/sportsfoundry/assets/d11c-review-fixes.css');
@import url('/sportsfoundry/assets/d11c-route-consistency.css');
@import url('/sportsfoundry/assets/d11d-owner-identity-shell.css');
@import url('/sportsfoundry/assets/d11f-final-polish.css');
@import url('/sportsfoundry/assets/d11f2-console-support-polish.css');
@import url('/sportsfoundry/assets/d11e-interaction-response.css');

:root {
  --bg: var(--foundry-graphite);
  --text: var(--foundry-light);
  --accent: var(--foundry-sports);
  --accent-strong: var(--foundry-sports-highlight);
}

.brand {
  min-width: 260px;
}

.brand-logo {
  display: block;
  width: 260px;
  height: auto;
  max-height: 60px;
}

.site-header .nav {
  min-height: 80px;
}

.owner-shell .split > * {
  min-width: 0;
}

.owner-shell .controls {
  min-width: 0;
}

.owner-shell .controls .field {
  flex: 1 1 210px;
  min-width: 0;
}

.owner-shell .controls .field input,
.owner-shell .controls .field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1020px) {
  .brand {
    min-width: 242px;
  }

  .brand-logo {
    width: 242px;
    max-height: 56px;
  }

  .site-header .nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
  }

  .site-header .nav-right {
    display: contents;
  }

  /* These ordering rules belong to the legacy/Owner .nav layout only.
     E4 customer topbars use .sf-topbar-inner and must preserve DOM order:
     brand on the left, utilities on the right. */
  .site-header .nav .brand {
    order: 1;
  }

  .site-header .nav .auth-state {
    order: 2;
    margin-left: auto;
    align-self: center;
  }

  .site-header .nav-links {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
  }
}

@media (max-width: 900px) {
  .owner-shell .split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .brand {
    min-width: 224px;
  }

  .brand-logo {
    width: 224px;
    max-height: 52px;
  }
}