/* ==========================================================================
   MTC Tennis — Base Styles
   Phase 1A: Conservative foundation. No visual changes to the live site.

   IMPORTANT: This file must NOT override any existing styles from
   styles.css, index.html inline CSS, or Bootstrap. All definitions here
   are either new utilities (unused by current markup) or defensive resets
   that match existing computed values.
   ========================================================================== */

/* ── Box Sizing ───────────────────────────────────────────────────────────
   Bootstrap already applies this via *, *::before, *::after.
   Defining it here as a safety net — it will not change computed styles
   because Bootstrap's rule is identical.
   ─────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── Visually Hidden ──────────────────────────────────────────────────────
   Utility for screen-reader-only content. Already used in index.html
   (defined in the inline critical CSS). This is a future-proof definition
   for use in other pages / new markup.
   ─────────────────────────────────────────────────────────────────────── */
.visually-hidden:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Focus Visible ────────────────────────────────────────────────────────
   Namespaced focus utility for future use. Does not override the existing
   a:focus, button:focus, input:focus rules in styles.css.
   ─────────────────────────────────────────────────────────────────────── */
.mtc-focus-ring:focus-visible {
  outline: 2px solid var(--color-accent, #00a8cc);
  outline-offset: 2px;
}

/* ── Skip Link (namespaced) ───────────────────────────────────────────────
   The existing .skip-link is defined in styles.css and index.html critical
   CSS. This namespaced version is for future pages that adopt the new
   design system directly.
   ─────────────────────────────────────────────────────────────────────── */
.mtc-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary, #0f3057);
  color: var(--color-text-on-dark, #ffffff);
  padding: var(--space-2, 0.5rem);
  z-index: var(--z-skip-link, 9999);
  transition: top var(--transition-slow, 0.3s ease);
  text-decoration: none;
  font-weight: var(--font-medium, 500);
}

.mtc-skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-white, #ffffff);
}

/* ==========================================================================
   Phase 2 TODOs — body and heading base styles
   These are intentionally commented out. They will be activated in Phase 2
   when sections are migrated to the new design system one at a time.

   body {
     font-family: var(--font-family);
     font-weight: var(--font-light);
     line-height: var(--leading-relaxed);
     color: var(--color-text);
     margin: 0;
     padding: 0;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

   h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-family);
     color: var(--color-primary);
     font-weight: var(--font-semibold);
     line-height: var(--leading-tight);
     margin-top: 0;
   }
   ========================================================================== */