/* ============================================================
   MML — Mobile Responsiveness Improvements
   Task: 2026-08-03 — Sprint
   Applied fixes based on full CSS audit

   CRITICAL FIXES:
   1. iOS input auto-zoom (font-size < 16px)
   2. Mobile nav landscape overflow
   3. About.css floating icon collision
   4. Playoff bracket tablet squeezing
   5. Roster max-height clipping

   ENHANCEMENTS:
   6. Standings table: hide GF/GA on small mobile
   7. Schedule: team name threshold 900→640px
   8. Home: results card mobile scaling
   9. Global touch target improvements
   ============================================================ */


/* ============================================================
   1. iOS AUTO-ZOOM FIX — All form inputs must be >= 16px
   Applied globally so it covers contact.html + future forms
   ============================================================ */
input, select, textarea {
  font-size: 1rem; /* min 16px prevents iOS Safari auto-zoom */
}

@media (max-width: 480px) {
  input, select, textarea {
    font-size: 1rem; /* maintain — do NOT drop below 1rem */
  }
}


/* ============================================================
   2. MOBILE NAV — Landscape overflow & scrollability
   ============================================================ */
.mobile-nav {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2xl) var(--space-lg);
  justify-content: flex-start; /* allow scroll, not centred clip */
  padding-top: calc(70px + var(--space-2xl)); /* clear fixed navbar */
}

/* Landscape phones: shrink font to prevent overflow */
@media (max-height: 560px) and (orientation: landscape) {
  .mobile-nav a {
    font-size: 1.35rem;
    min-height: 36px;
    padding: 0.3rem var(--space-md);
  }
  .mobile-nav-links {
    gap: var(--space-md);
  }
}


/* ============================================================
   3. SCHEDULE — Mobile team layout: logo-aligned grid
      ─────────────────────────────────────────────────────────
      Key insight: to keep logos aligned between HOME and AWAY,
      both rows must have IDENTICAL widths. We set width:100%
      + max-width on .game-team so each row is the same fixed
      size, then margin:0 auto centres it. Inside, CSS Grid
      locks col1=logo(40px) and col2=pictogram(48px), so logos
      always start at the same x-position regardless of name.
   ============================================================ */
@media (max-width: 900px) {

  /* ── Force the matchup to stack columns ── */
  .schedule-game-card .game-matchup {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-xs);
  }

  /* ── Grid container for each team row ── */
  .schedule-game-card .game-team {
    display: grid !important;
    /* Fixed cols: logo | pictogram | name fills remaining */
    grid-template-columns: 40px 48px 1fr !important;
    align-items: center;
    gap: 6px;
    /* SAME width for both HOME and AWAY → logos align */
    width: 100% !important;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    /* Override flex properties from schedule.css */
    justify-content: unset !important;
    flex-direction: unset !important;
  }

  /* ── HOME: DOM is [name, silhouette, logo] → reorder to [logo, silhouette, name] ── */
  .schedule-game-card .game-team.team-home .team-logo        { order: 1; }
  .schedule-game-card .game-team.team-home .jersey-silhouette { order: 2; }
  .schedule-game-card .game-team.team-home .team-info        { order: 3; }

  /* ── AWAY: DOM is [logo, silhouette, name] — already correct ── */
  .schedule-game-card .game-team.team-away .team-logo        { order: 1; }
  .schedule-game-card .game-team.team-away .jersey-silhouette { order: 2; }
  .schedule-game-card .game-team.team-away .team-info        { order: 3; }

  /* ── Name: left-aligned inside its 1fr column ── */
  .schedule-game-card .game-team .team-info {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .schedule-game-card .game-team .team-name,
  .schedule-game-card .game-team .team-code {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================================
   3b. SCHEDULE — Team name threshold: 900px → 640px
       (Tablets 641–900px show full team name)
   ============================================================ */
@media (min-width: 641px) and (max-width: 900px) {
  .schedule-game-card .game-team .team-name {
    display: block !important;
    font-size: 0.95rem;
  }
  .schedule-game-card .game-team .team-code {
    display: none !important;
  }
}

/* True mobile (≤640): keep team code only, larger than before */
@media (max-width: 640px) {
  .schedule-game-card .game-team .team-name {
    display: none;
  }
  .schedule-game-card .game-team .team-code {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-pearl-bright);
    letter-spacing: 0.08em;
  }

  /* Tighten card padding further */
  .schedule-game-card {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
  }

  /* Score center more compact */
  .schedule-game-card .game-score {
    font-size: 1.35rem;
  }
  .schedule-game-card .game-score-center {
    min-width: 60px;
  }

  /* Status badge — shrink */
  .game-status-badge {
    font-size: 0.6rem;
    padding: 0.2rem 0.5rem;
  }

  /* Pictogram / jersey silhouette scale down */
  .jersey-silhouette img {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Very small screens */
@media (max-width: 380px) {
  .schedule-game-card .game-score {
    font-size: 1.1rem;
  }
  .schedule-game-card .game-team .team-code {
    font-size: 0.82rem;
  }
}


/* ============================================================
   4. PLAYOFF BRACKET — Stack at 1024px (not 768px)
   ============================================================ */
@media (max-width: 1024px) {
  .bracket-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-md);
  }

  /* Hide all connector lines */
  .bracket-col-prelim .bracket-match-wrapper::after,
  .bracket-col-semi .bracket-match-wrapper::before,
  .bracket-col-semi .bracket-match-wrapper::after,
  .bracket-col-final .bracket-match-wrapper::before,
  .bracket-col-prelim::after,
  .bracket-col-semi::after {
    display: none !important;
  }

  /* Show flow arrows for each column transition */
  .bracket-column + .bracket-column::before {
    content: '▼ NEXT ROUND';
    display: block;
    text-align: center;
    color: rgba(74, 111, 165, 0.4);
    font-family: var(--font-heading);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-xs);
  }

  .bracket-placements {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   5. STANDINGS TABLE — Hide GF/GA on small mobile
      (PTS becomes immediately visible without scrolling)
   ============================================================ */
@media (max-width: 480px) {
  /* Hide GF (col 7) and GA (col 8) — keep GP W D L GD PTS */
  .standings-table th:nth-child(7),
  .standings-table td:nth-child(7),
  .standings-table th:nth-child(8),
  .standings-table td:nth-child(8) {
    display: none;
  }

  /* Also hide W, D, L on ultra-small — show GP and PTS */
  /* keeping this commented out — GD is still useful */

  /* Reduce min-width so it nearly fits a 375px screen */
  .standings-table {
    min-width: 480px;
  }

  /* Add scroll hint shadow on right edge */
  .standings-table-wrapper {
    position: relative;
  }
  .standings-table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    background: linear-gradient(to left, rgba(5,5,8,0.6), transparent);
    pointer-events: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  /* Player stats table: hide PIM on ultra-small */
  .standings-table#player-stats-table th:nth-child(9),
  .standings-table#player-stats-table td:nth-child(9) {
    display: none;
  }
}


/* ============================================================
   6. HOME PAGE — Results & team cards mobile fixes
   ============================================================ */
@media (max-width: 640px) {
  .result-matchup {
    gap: var(--space-xs);
  }
  .result-team-logo {
    width: 36px !important;
    height: 36px !important;
  }
  .result-team-name {
    font-size: 0.75rem;
  }
  .score-num {
    font-size: 1.5rem;
  }
  .score-sep {
    font-size: 1.2rem;
  }

  /* Ensure hero CTA buttons stack and are touch-friendly */
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
  }
  .hero-cta-group .btn-primary,
  .hero-cta-group .btn-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
    min-height: 48px;
  }
}


/* ============================================================
   7. ABOUT PAGE — Floating icon collision fix
   ============================================================ */
@media (max-width: 640px) {
  /* Increase gap so floating icons don't collide with card above */
  .format-stages {
    gap: 3.5rem !important;
    margin-top: 3rem;
  }
  .format-card {
    padding-top: 55px !important;
  }
  .format-icon {
    top: -38px !important;
    width: 76px !important;
    height: 76px !important;
  }
  .format-icon img {
    height: 76px !important;
  }
}

@media (max-width: 480px) {
  .rules-grid {
    gap: 3.5rem !important;
  }
  .rule-item {
    padding-top: 55px !important;
  }
  .rule-icon {
    top: -30px !important;
    width: 60px !important;
    height: 60px !important;
  }
  .rule-icon img {
    width: 60px !important;
    height: 60px !important;
  }
}


/* ============================================================
   8. TEAMS PAGE — Roster max-height expansion
   ============================================================ */
.team-showcase-card.roster-open .team-roster {
  max-height: 1400px; /* was 600px — now accommodates 20+ players */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .team-roster {
    max-height: 480px;
  }
  .team-showcase-card.roster-open .team-roster {
    max-height: 1200px;
  }
}


/* ============================================================
   9. GLOBAL TOUCH TARGETS & USABILITY
   ============================================================ */

/* Ensure all interactive elements meet 44px minimum tap target */
@media (max-width: 768px) {
  .tab-btn,
  .nav-hamburger,
  button {
    min-height: 44px;
  }

  /* Section titles: reduce letter-spacing on mobile for readability */
  .section-label {
    letter-spacing: 0.15em;
  }

  /* Ensure container padding is comfortable */
  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* Page hero subtitle: clamp to readable size */
  .page-hero .hero-subtitle {
    font-size: 0.9rem;
  }
}

/* Smoother scrolling on iOS */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Prevent horizontal overflow on body */
body {
  overflow-x: hidden;
}