/* ============================================================
   FUNctional Sports — Design System
   Brand: teal #00A6B4 · orange #F58426 · Montserrat
   ============================================================ */

:root {
  /* Brand */
  --teal:        #00A6B4;
  --teal-600:    #008A96;
  --teal-700:    #00727C;
  --teal-050:    #E6F6F8;
  --teal-100:    #CBEDF0;
  --orange:      #F58426;
  --orange-600:  #E0701A;
  --orange-050:  #FEF1E6;
  --navy:        #0F3B45;   /* deep teal-navy for headings */
  --ink:         #16313A;
  --body:        #2B3D44;
  --muted:       #7B8A90;

  /* Surfaces */
  --bg:          #FBFCFD;
  --surface:     #FFFFFF;
  --surface-2:   #F2F5F6;
  --line:        #E4EAEC;
  --line-strong: #D2DBDE;

  /* Status */
  --success:     #2E9E6B;
  --success-bg:  #E7F6EF;
  --warning:     #D9822B;
  --warning-bg:  #FCF1E4;
  --danger:      #D8503C;
  --danger-bg:   #FBEBE8;
  --info:        var(--teal);
  --info-bg:     var(--teal-050);

  /* Type */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Radius & shadow */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-sm: 0 1px 2px rgba(15,59,69,.06), 0 1px 3px rgba(15,59,69,.05);
  --shadow:    0 4px 16px rgba(15,59,69,.08);
  --shadow-md: 0 12px 32px rgba(15,59,69,.12);
  --shadow-lg: 0 24px 60px rgba(15,59,69,.16);

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --nav-h: 104px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  font-size: 18px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--teal); }

h1, h2, h3, h4, h5 { color: var(--navy); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
h1 { font-size: clamp(2.6rem, 5.2vw, 4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
p  { color: var(--body); }
.lede { font-size: 1.25rem; color: var(--body); }

/* Layout helpers */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 9vw, 110px); }
.section-sm { padding-block: clamp(40px, 6vw, 70px); }
.center { text-align: center; }
.grid { display: grid; gap: 28px; }
@media (min-width: 720px){ .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} }
.flex { display: flex; gap: 16px; }
.between { justify-content: space-between; align-items: center; }
.wrap { flex-wrap: wrap; }
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:40px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:40px}

/* Eyebrow / section heading */
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; font-weight: 700; color: var(--orange);
  margin-bottom: 12px;
}
.section-head { max-width: 640px; margin: 0 auto clamp(36px,5vw,56px); text-align: center; }
.section-head p { margin-top: 14px; font-size: 1.08rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-weight: 700; font-size: .98rem;
  padding: 14px 26px; border-radius: 100px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  line-height: 1; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(245,132,38,.28); }
.btn-primary:hover { background: var(--orange-600); color:#fff; box-shadow: 0 10px 26px rgba(245,132,38,.36); transform: translateY(-2px); }
.btn-secondary { background: var(--teal); color: #fff; box-shadow: 0 8px 20px rgba(0,166,180,.24); }
.btn-secondary:hover { background: var(--teal-600); color:#fff; transform: translateY(-2px); }
.btn-tertiary { background: #fff; color: var(--teal-700); border-color: var(--line-strong); }
.btn-tertiary:hover { border-color: var(--teal); color: var(--teal); }
.btn-ghost { background: transparent; color: var(--navy); padding-inline: 8px; }
.btn-ghost:hover { color: var(--teal); }
.btn-lg { padding: 17px 34px; font-size: 1.05rem; }
.btn-sm { padding: 10px 18px; font-size: .86rem; }
.btn-block { width: 100%; }
.btn-link { color: var(--navy); font-weight: 700; display:inline-flex; align-items:center; gap:6px; }
.btn-link:hover{ color: var(--teal); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-pad-lg { padding: 36px; }

/* Program cards: equal-height flex columns so the divider, meta row,
   and Register button align across cards regardless of description length */
.program-card { display: flex; flex-direction: column; }
.program-card .divider { margin-top: auto; }

/* Feature icon tile */
.feature-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--teal-050); color: var(--teal); margin-bottom: 18px;
}
.feature-icon svg { width: 28px; height: 28px; }
.feature-icon.orange { background: var(--orange-050); color: var(--orange); }

/* ---------- Pills / badges ---------- */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700;
  padding:5px 12px; border-radius:100px; background:var(--teal-050); color:var(--teal-700); }
.pill.orange{ background:var(--orange-050); color:var(--orange-600); }
/* Trust chips (About story): no fill, dark text, teal icon accent */
.trust-chip{ display:inline-flex; align-items:center; gap:8px; font-size:.92rem; font-weight:700;
  padding:6px 2px; background:none; color:var(--navy); }
.trust-chip svg{ color:var(--teal); flex:none; }
.trust-chip + .trust-chip{ margin-left:4px; }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700;
  padding:4px 10px; border-radius:8px; text-transform:capitalize; }
.badge.pending{ background:var(--warning-bg); color:var(--warning); }
.badge.confirmed,.badge.active,.badge.enrolled,.badge.completed,.badge.paid,.badge.attended{ background:var(--success-bg); color:var(--success); }
.badge.cancelled,.badge.no_show,.badge.archived,.badge.failed{ background:var(--danger-bg); color:var(--danger); }
.badge.reviewed,.badge.scheduled{ background:var(--info-bg); color:var(--teal-700); }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display:block; font-weight:700; color:var(--navy); font-size:.9rem; margin-bottom:7px; }
.field .hint { font-size:.8rem; color:var(--muted); margin-top:5px; }
.input, .select, .textarea {
  width:100%; font-family:var(--font); font-size:1rem; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line-strong); border-radius:var(--r-sm);
  background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 4px var(--teal-050); }
.textarea{ min-height:120px; resize:vertical; }
.field-row{ display:grid; gap:18px; }
@media(min-width:600px){ .field-row.cols-2{grid-template-columns:1fr 1fr} .field-row.cols-3{grid-template-columns:1fr 1fr 1fr} }
.check { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); cursor:pointer; transition:.15s; }
.check:hover{ border-color:var(--teal-100); background:var(--teal-050); }
.check input{ margin-top:3px; accent-color:var(--teal); }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
table.data{ width:100%; border-collapse:collapse; font-size:.92rem; }
table.data th{ text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface-2); }
table.data td{ padding:14px 16px; border-bottom:1px solid var(--line); color:var(--ink); }
table.data tr:last-child td{ border-bottom:none; }
table.data tr:hover td{ background:var(--teal-050); }

/* ---------- Alerts ---------- */
.alert{ padding:14px 18px; border-radius:var(--r-sm); font-size:.92rem; font-weight:600; margin-bottom:18px;
  display:flex; gap:10px; align-items:flex-start; }
.alert.success{ background:var(--success-bg); color:var(--success); }
.alert.error{ background:var(--danger-bg); color:var(--danger); }
.alert.info{ background:var(--info-bg); color:var(--teal-700); }
.alert.warning{ background:var(--warning-bg); color:var(--warning); }

/* ---------- Stats ---------- */
.stat{ }
.stat .num{ font-size:2rem; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.stat .label{ font-size:.85rem; color:var(--muted); font-weight:600; }

/* ---------- Utilities ---------- */
.text-muted{ color:var(--muted); }
.text-orange{ color:var(--orange); }
.text-teal{ color:var(--teal); }
.hidden{ display:none !important; }
.divider{ height:1px; background:var(--line); border:none; margin:24px 0; }
.skeleton{ background:linear-gradient(90deg,var(--surface-2) 25%,#e9eef0 50%,var(--surface-2) 75%);
  background-size:200% 100%; animation:sk 1.3s infinite; border-radius:var(--r-sm); }
@keyframes sk{ to{ background-position:-200% 0 } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* Focus visibility */
:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; border-radius:4px; }