/* South Florida Pole Vault Tour — shared page styles.
   Layout and colors live inline on each element, exactly as the approved design
   (sfpvtour/design/site-redesign.html) wrote them. This file holds only what
   inline styles cannot: fonts, base rules, hover/focus, and the phone layout. */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-800-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-800-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #F4F6F9; }
a { color: #0B2340; text-decoration: none; }
a:hover { color: #0A6E92; } /* the design's own hover rule; links with an inline color keep it */
a:focus-visible, button:focus-visible { outline: 3px solid #FFC93C; outline-offset: 3px; }
img { max-width: 100%; }

/* Points standings tabs (the design's selected / unselected pill buttons). */
.points-tab {
  font-family: Inter, sans-serif; font-size: 15px; font-weight: 600;
  padding: 12px 20px; min-height: 44px; border-radius: 999px;
  border: 1.5px solid #CBD5E1; background: #FFFFFF; color: #0B2340; cursor: pointer;
}
.points-tab[aria-selected="true"] { font-weight: 700; border-color: #0B2340; background: #0B2340; color: #FFFFFF; }

/* Menu button: only shown on narrow screens, and only when JavaScript runs. */
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .js .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255,255,255,0.4);
    border-radius: 999px; padding: 10px 16px; min-height: 44px;
    font: 600 15px/1 Inter, system-ui, sans-serif; cursor: pointer;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
  }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after { top: 6px; }
  .js .site-menu { display: none !important; }
  .js .site-header.is-open .site-menu {
    display: flex !important; flex-direction: column; align-items: stretch !important;
    flex-basis: 100%; gap: 0 !important; padding: 8px 0 12px;
  }
  .js .site-header.is-open .site-menu a { padding: 14px 0 !important; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
  .js .site-header.is-open .site-menu a[aria-current="page"] { border-bottom-color: #FFC93C !important; }
  .js .site-header.is-open .site-menu .nav-cta { margin-top: 14px; text-align: center; border-bottom: 0 !important; }
}

/* Phone layout. */
@media (max-width: 640px) {
  /* Media gallery: one photo per row (this rule is in the design file itself). */
  .tile { grid-column: auto !important; grid-row: span 2 !important; }
}

@media (max-width: 640px) {
  /* Home "Six divisions" cards: three across still fits a phone once padded less. */
  .division-grid > div { padding: 14px 12px !important; }
  .division-grid > div > p:first-child { font-size: 22px !important; }
  .division-grid > div > p + p { white-space: nowrap; font-size: 13px !important; }
  /* Points standings table: fit the phone instead of scrolling sideways inside the card. */
  .standings-table { min-width: 0 !important; }
  .standings-table th { padding-left: 12px !important; padding-right: 12px !important; width: auto !important; }
  .standings-table th:first-child { padding-left: 20px !important; }
  .standings-table th:last-child { padding-right: 20px !important; }
}