:root{
    --bg:#0b0f14; --panel:#0f1621; --card:#121a27; --fg:#e8f0ff; --muted:#a8b3c7;
    --primary:#8dfc3c; --accent:#53a8ff; --tennis:#ffe74a; --pickle:#84ff6b;
    --ring:color-mix(in oklab, var(--primary) 30%, transparent);
    --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
  }
  [data-theme="light"]{
    --bg:#f7fbff; --panel:#fff; --card:#fff; --fg:#0b1020; --muted:#5a6b85;
    --primary:#2bd24f; --accent:#1f7cff; --tennis:#f5c400; --pickle:#21c05a;
    --ring:color-mix(in oklab, var(--primary) 30%, transparent);
  }
  
  *{ box-sizing:border-box }
  html{ scroll-behavior:smooth }
  body{
    margin:0; font-family:Inter,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--fg);
    background:
      radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
      radial-gradient(1000px 700px at 110% 10%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 60%),
      var(--bg);
  }
 /* unified container sizing + identical side padding everywhere */
.container{
    max-width:1100px;
    margin-inline:auto;
    padding-inline: clamp(16px, 4vw, 28px);
  }
  
  /* nav row: no extra left/right padding so it matches the container edge */
  .nav-inner{ padding:14px 0; }
  
  
  /* Nav */
  .nav{
    position:sticky; top:0; z-index:50;
    backdrop-filter:saturate(1.2) blur(8px);
    background:color-mix(in oklab, var(--bg) 60%, transparent);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
  .brand{ display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--fg) }
  .brand svg{ width:28px; height:28px }
  .brand span{ font-family:Outfit,Inter,sans-serif; font-weight:800; letter-spacing:.2px; font-size:20px }
  .nav-links{ display:flex; gap:18px; align-items:center }
  .nav-links a{ text-decoration:none; color:#fff; font-weight:600; padding:8px 12px; border-radius:999px; transition:.25s }
  .nav-links a:hover{ color:var(--fg); background:rgba(255,255,255,.06) }
  .cta{ background:linear-gradient(135deg,var(--accent),var(--primary)); color:#001; font-weight:800; padding:10px 14px; border-radius:999px; box-shadow:var(--shadow); text-decoration:none }
  .menu-btn{ display:none }
  
  @media (max-width:820px){
    .nav-links{ display:none }
    .menu-btn{ display:inline-flex; background:none; border:1px solid rgba(255,255,255,.18); padding:8px 10px; border-radius:10px; color:var(--fg) }
    .drawer{
      position:fixed; right:0; top:60px; background:var(--panel);
      border-left:1px solid rgba(255,255,255,.1);
      width:82%; max-width:360px; box-shadow:var(--shadow); padding:16px; display:none;
    }
    .drawer a{ display:block; padding:12px 10px; margin:6px 0; border-radius:10px; color:#fff; text-decoration:none; background:rgba(255,255,255,.04) }
  }
  
  /* Hero */
  .hero{ padding:64px 0 24px }
  .hero .grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center }
  @media (max-width:900px){ .hero .grid{ grid-template-columns:1fr } }
  .h1{ font-size:clamp(32px,4vw,56px); font-family:Outfit,Inter,sans-serif; line-height:1.05; letter-spacing:.2px; margin:0 0 16px }
  .lead{ font-size:clamp(16px,1.4vw,18px); color:var(--muted); margin-bottom:22px }
  .hero .cta-row{ display:flex; gap:12px; flex-wrap:wrap }
  .btn{
    border:1px solid rgba(255,255,255,.14); padding:12px 16px; border-radius:14px; color:var(--fg);
    text-decoration:none; font-weight:700; display:inline-flex; gap:10px; align-items:center; transition:.25s;
  }
  .btn:hover{ background:rgba(255,255,255,.06) }
  .card{
    background:linear-gradient(180deg,color-mix(in oklab,var(--panel) 92%,transparent), color-mix(in oklab,var(--panel) 98%,transparent));
    border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow)
  }
  .hero-visual{
    aspect-ratio:4/3; border-radius:var(--radius);
    background:
      radial-gradient(700px 300px at 80% 20%, rgba(255,231,74,.2), transparent),
      radial-gradient(800px 350px at 20% 80%, rgba(132,255,107,.18), transparent),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    display:grid; place-items:center; position:relative; overflow:hidden
  }
  .hero-visual svg{ width:70%; max-width:420px }
  .kicker{
    display:inline-block; padding:6px 10px; border-radius:999px; border:1px dashed rgba(255,255,255,.2);
    color:var(--muted); margin-bottom:10px; font-size:12px; letter-spacing:.4px; text-transform:uppercase
  }
  
  /* Sections */
  .section{ padding:63px 0 }
  .section h2{ font-family:Outfit,Inter,sans-serif; font-size:clamp(24px,2.6vw,36px); margin:0 0 14px }
  .section p.sub{ color:var(--muted); margin:0 0 24px }
  
  /* Chips / filters */
  .filters{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px }
  .chip{
    border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:#fff;
    padding:8px 12px; border-radius:999px; font-weight:700; cursor:pointer; transition:.3s;
  }
  .chip:hover{ background:rgba(255,255,255,.08) }
  .chip.active{ background:linear-gradient(135deg,var(--accent),var(--primary)); color:#001; border-color:transparent }
  
  /* Buttons (neutral baseline) */
  a.btn, button.btn{
    display:inline-flex; align-items:center; gap:.5rem; padding:10px 14px; border-radius:12px;
    border:1px solid #374151; background:#1f2937; color:#f0fdf4; font-weight:600;
    cursor:pointer; transition:transform .08s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
  }
  a.btn:hover, button.btn:hover{ background:#111827; transform:translateY(-1px) }
  
  /* Gradient utility */
  a.btn.btn-gradient, button.btn.btn-gradient, .chip.btn-gradient, .tabs button.btn-gradient{
    background:linear-gradient(135deg,var(--accent),var(--primary))!important; color:#fff!important; border-color:transparent!important;
  }
  a.btn.btn-gradient:hover, button.btn.btn-gradient:hover, .chip.btn-gradient:hover, .tabs button.btn-gradient:hover{ filter:brightness(1.05) }
  
  /* Cards grid (guides) */
  .grid-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
  @media (max-width:980px){ .grid-cards{ grid-template-columns:repeat(2,1fr) } }
  @media (max-width:640px){ .grid-cards{ grid-template-columns:1fr } }
  
  .guide-card{ padding:14px; display:flex; flex-direction:column; gap:12px }
  .thumb{
    aspect-ratio:16/9; border-radius:12px;
    background:linear-gradient(120deg, rgba(255,231,74,.3), rgba(83,168,255,.24)),
               radial-gradient(400px 180px at 70% 20%, rgba(132,255,107,.35), transparent);
    display:grid; place-items:center; overflow:hidden
  }
  .thumb svg{ width:36%; opacity:.9 }
  .thumb img{ width:100%; height:100%; object-fit:cover; border-radius:12px }
  
  .guide-meta{ color:var(--muted); font-size:13px }
  .search{ display:flex; gap:10px; margin-bottom:18px }
  .search input{ flex:1; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--fg) }
  .tag{ font-size:12px; padding:6px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:var(--muted) }
  
  /* Tabs (single, consolidated definition) */
  .tabs{
    display:inline-flex; gap:6px; padding:6px; margin-bottom:14px;
    border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.04);
  }
  .tabs button{
    appearance:none; border:1px solid #374151; background:#1f2937; color:#f0fdf4;
    padding:8px 12px; border-radius:999px; font-weight:700; cursor:pointer;
    transition:transform .08s ease, filter .15s ease, background .2s ease;
  }
  .tabs button:hover{ background:#111827; transform:translateY(-1px) }
  .tabs button[aria-selected="true"]{
    border-color:transparent; color:#001; background:linear-gradient(135deg,var(--accent),var(--primary)); filter:brightness(1.05);
  }
  
  /* Schedule table */
  .schedule{ overflow:auto }
  table{ width:100%; border-collapse:collapse }
  thead th{
    text-align:left; font-size:12px; color:var(--muted);
    border-bottom:1px solid rgba(255,255,255,.12); padding:8px 10px; letter-spacing:.3px; text-transform:uppercase;
  }
  tbody td{ padding:12px 10px; border-bottom:1px dashed rgba(255,255,255,.08) }
  
  /* Lessons */
  .lesson-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px }
  @media (max-width:960px){ .lesson-grid{ grid-template-columns:1fr } }
  
  .coach-list{
    /* Make Coach Mike span full width (no skinny columns) */
    display:grid; grid-template-columns:1fr; gap:12px;
  }
  .coach{
    display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
    width:100%;
  }
  .coach svg{ width:40px; height:40px }
  
  /* Forms */
  .form-row{ display:flex; gap:10px; flex-wrap:wrap }
  .form-row > *{ flex:1 }
  input, select{ width:100%; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--fg) }
  
  .times{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px }
  @media (max-width:640px){ .times{ grid-template-columns:repeat(2,1fr) } }
  .slot{ padding:10px 8px; text-align:center; border:1px solid rgba(255,255,255,.16); border-radius:10px; cursor:pointer; font-weight:700 }
  .slot[disabled]{ opacity:.5; pointer-events:none; text-decoration:line-through }
  .slot.booked{ background:rgba(255,255,255,.06); color:var(--muted); border-style:dashed }
  .success{ display:none; padding:12px 14px; border-radius:12px; background:rgba(132,255,107,.12); border:1px solid rgba(132,255,107,.3); color:#a6ffac; margin-top:8px }
  .list-bookings{ margin-top:12px }
  
  /* Footer */
  footer{ padding:40px 0; color:var(--muted); border-top:1px solid rgba(255,255,255,.08) }
  
  /* Modal */
  .modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; place-items:center; z-index:100 }
  .modal .dialog{ background:var(--panel); padding:18px; border-radius:14px; width:min(520px,92%); border:1px solid rgba(255,255,255,.12) }
  .modal .dialog h3{ margin:0 0 12px; font-family:Outfit,Inter,sans-serif }
  .modal .dialog .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px }
  .modal .dialog button{ border:1px solid rgba(255,255,255,.18); padding:10px 14px; border-radius:10px; background:transparent; color:var(--fg); font-weight:700 }
  .modal .dialog button.primary{ background:linear-gradient(135deg,var(--accent),var(--primary)); color:#001; border:0 }
  
  /* Misc */
  .theme-toggle{ border:1px solid rgba(255,255,255,.18); padding:8px 10px; border-radius:10px; background:transparent; color:var(--fg); margin-left:8px }
  small.note{ color:var(--muted) }
  a.inline{ color:var(--accent); text-decoration:underline dotted }
  
  /* Reveal / fade-in */
  .reveal{
    opacity:0; transform:translateY(24px); filter:blur(2px);
    transition:opacity .6s ease, transform .6s ease, filter .6s ease; will-change:opacity, transform;
  }
  .reveal.in-view{ opacity:1; transform:none; filter:none }
  .reveal-child{
    opacity:0; transform:translateY(12px); filter:blur(1px);
    transition:opacity .5s ease, transform .5s ease, filter .5s ease;
  }
  .reveal-child.in-view{ opacity:1; transform:none; filter:none }
  @media (prefers-reduced-motion:reduce){ .reveal, .reveal-child{ transition:none } }
  
  /* Drawer default (JS toggles) */
  .drawer{ display:none }
  
  /* Info modal links */
  #infoModal a{
    color:var(--accent); font-weight:600; text-decoration:none; border-bottom:1px solid var(--accent);
    transition:color .2s ease, border-color .2s ease;
  }
  #infoModal a:hover{ color:var(--primary); border-color:var(--primary) }
  
  /* Tournament carousel */
  .tour-carousel{
    position:relative; margin-top:20px; border-radius:12px; overflow:hidden;
    background:#0e141b; border:1px solid rgba(255,255,255,.06);
  }
  .tour-slides{ position:relative; width:100%; height:clamp(240px,38vw,500px) }
  .tour-slide{ position:absolute; inset:0; opacity:0; transform:scale(1.02); transition:opacity .5s ease, transform .5s ease }
  .tour-slide.is-active{ opacity:1; transform:scale(1) }
  .tour-slide img{ width:100%; height:100%; object-fit:cover; display:block }
  .tour-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); color:#fff;
    padding:6px 10px; border-radius:10px; font-size:22px; line-height:1; cursor:pointer;
    backdrop-filter:blur(4px);
  }
  .tour-nav:hover{ background:rgba(0,0,0,.5) }
  .tour-nav.prev{ left:10px }
  .tour-nav.next{ right:10px }
  .tour-dots{
    position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
    display:flex; gap:8px;
  }
  .tour-dots button{
    width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,.5);
    background:rgba(255,255,255,.15); cursor:pointer;
  }
  .tour-dots button[aria-selected="true"]{ border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--primary)) }
  
#tournaments{ padding-bottom:28px; }         /* less space after slideshow */
#lessons{ padding-top:38px; }                /* less space before Book a Lesson */

/* If you still want it tighter, drop to ~20px on those two */
@media (max-width:640px){
  .section{ padding:44px 0; }                /* tighter stacks on mobile */
  #lessons{ padding-bottom:20px; }           /* reduce gap before Community */
  #community{ padding-top:28px; }
}

/* (Optional) nudge the slideshow’s internal spacing a bit */
.tour-carousel{ margin-top:12px; }           /* was 20px */

.hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* show full image */
    object-position: center;
    background: none;    /* avoid background fill */
  }
  
  .brand-logo {
    width: 28px;       /* match your old svg size */
    height: 28px;
    display: block;
  }
  
/* Shift entire nav bar left to match hero margins */
/* Make the nav line up with the hero/container left edge */
.nav .container{
    /* stop centering this one container */
    width: 100%;
    max-width: none;
    margin: 0 !important;
  
    /* use the same side gutter as a centered 1100px/92% container */
    padding-left: max(calc((100vw - 1100px) / 2), 4vw);
    padding-right: max(calc((100vw - 1100px) / 2), 4vw);
  }
  
  
  .coach-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap:22px;
    margin-top:20px;
  }
  .coach-profile {
    display:grid;
    grid-template-columns: 1fr 3fr; /* photo gets more space */
    gap:16px;
    padding:16px;
    align-items:center; /* vertical centering */
  }
  .coach-media {
    display:flex;
    justify-content:center;   /* horizontal center if needed */
    align-items:center;       /* vertical center */
  }
  
  .coach-media img {
    width:100%;
    height:auto;
    max-height:340px;         /* increase size */
    object-fit:cover;
    border-radius:12px;
    display:block;
  }
  .coach-body{ display:flex; flex-direction:column; gap:12px; }
  .coach-name{ margin:0; font-family:Outfit, Inter, sans-serif; font-size:1.25rem; }
  .coach-sport{ color:var(--muted); font-weight:600; font-size:.95rem; }
  .coach-bio{ margin:0; color:var(--fg); }
  .coach-section h4{ margin:0 0 6px; font-size:1rem; color:var(--fg); }
  .coach-times{ margin:0; padding-left:18px; line-height:1.6; }
  .coach-contact{ display:flex; gap:10px; flex-wrap:wrap; }
  
  @media (max-width:700px){
    .coach-profile{ grid-template-columns:1fr; }
    .coach-media img{ max-height:180px; }
  }

  [data-theme="light"] .nav-links a {
    color: #0b1020;         /* dark text */
  }
  [data-theme="light"] .nav-links a:hover {
    background: rgba(0,0,0,.05);
    color: #0b1020;
  }
  [data-theme="light"] .cta {
    color: white;
  }

  [data-theme="light"] input, 
[data-theme="light"] select {
  background: #f4f7fa;             /* light gray background instead of white */
  border: 1px solid rgba(0,0,0,.08); 
  color: #0b1020;
}

[data-theme="light"] .card,
[data-theme="light"] .guide-card {
  background: #fafbfc;  /* off-white */
  border: 1px solid rgba(0,0,0,.06);
}

[data-theme="light"] .card {
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

[data-theme="light"] thead th {
  border-bottom: 1px solid rgba(0,0,0,.08);
  color: #444; /* darker text for readability */
}
[data-theme="light"] tbody td {
  border-bottom: 1px dashed rgba(0,0,0,.05);
}

[data-theme="light"] body {
  background: #f7f9fc;
}

#signupModal .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;              /* space between inputs horizontally */
  margin-bottom: 14px;    /* extra vertical space between rows */
}

/* Signup modal spacing */
#signupModal .dialog{
  padding: 22px;
  display: flex;
  flex-direction: column;
  row-gap: 16px;          /* space between title, rows, note, actions */
}

#signupModal .form-row{
  display: grid;          /* replace flex with grid for real row spacing */
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;       /* space between the two inputs in a row */
  row-gap: 10px;          /* vertical space between wrapped inputs */
  margin: 0;              /* kill any inherited margins */
}

@media (max-width: 640px){
  #signupModal .form-row{
    grid-template-columns: 1fr;  /* stack on mobile */
  }
}

#signupModal input{
  padding: 12px 14px;     /* slightly taller boxes */
  border-radius: 12px;
}

/* loading row */
#scheduleBody td[colspan] { text-align: center; color: var(--muted); }

/* spinner */
.spinner{
  display:inline-block; width:1rem; height:1rem; border-radius:50%;
  border:2px solid var(--muted); border-top-color:var(--accent);
  animation:spin .8s linear infinite; margin-right:.5rem; vertical-align:middle;
}
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--muted); }
}

/* Nav brand logo – force size even if a global img rule exists */
img.brand-logo{
  inline-size:28px !important;
  block-size:28px !important;
  display:block;
  object-fit:contain;
  flex:0 0 28px;
}

/* Hero image should fill the visual card */
.hero-visual { position: relative; overflow: hidden; }
.hero-img,
.hero-visual img{
  width:100%;
  height:100%;
  object-fit:cover;           /* was contain; use cover so no empty backdrop shows */
  object-position:center 35%; /* lift subject slightly; tune to taste */
  display:block;
}

/* Fix for guide thumbnails on mobile */
.thumb{
  position:relative;
  aspect-ratio:16 / 9;
  border-radius:12px;
  overflow:hidden;
  background:#0e141b; /* neutral dark fallback, no green */
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;           /* always fill box */
  object-position:center 25%; /* lift subject a bit */
  display:block;
}