/* =========================================================
   Timmy's Swimming – custom layer (theme, footer, PanAm, mobile)
   ========================================================= */
:root {
  --ts-navy: #0A2540;
  --ts-blue: #0284C7;
  --ts-amber: #F59E0B;
  --ts-page: #ffffff;
  --ts-surface: #ffffff;
  --ts-surface-2: #f8fafc;
  --ts-text: #0A2540;
  --ts-body: #4b5563;
  --ts-muted: #6b7280;
  --ts-border: #e5e7eb;
  --ts-chip: #eff6ff;
  color-scheme: light;
}
html.dark {
  --ts-page: #0b1626;
  --ts-surface: #102238;
  --ts-surface-2: #0d1c2f;
  --ts-text: #e6eef8;
  --ts-body: #b4c2d3;
  --ts-muted: #8fa1b6;
  --ts-border: #1f3854;
  --ts-chip: #13304d;
  color-scheme: dark;
}
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 120px; }
body { overflow-x: hidden; }

/* ---------- Theme toggle ---------- */
.ts-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 9999px; cursor: pointer;
  border: 1px solid var(--ts-border); background: var(--ts-surface); color: var(--ts-text);
  transition: background .2s, color .2s, transform .2s;
}
.ts-theme-toggle:hover { transform: scale(1.05); color: var(--ts-blue); }
.ts-theme-toggle svg { width: 20px; height: 20px; }
.ts-theme-toggle .ts-sun { display: none; }
html.dark .ts-theme-toggle .ts-sun { display: block; }
html.dark .ts-theme-toggle .ts-moon { display: none; }

/* =========================================================
   DARK MODE overrides for the compiled Tailwind classes
   ========================================================= */
html.dark body, html.dark .bg-background { background-color: var(--ts-page); }
html.dark .bg-white { background-color: var(--ts-surface); }
html.dark .bg-slate-50, html.dark .bg-gray-50, html.dark .hover\:bg-gray-50:hover { background-color: var(--ts-surface-2); }
html.dark .bg-slate-100, html.dark .hover\:bg-gray-100:hover { background-color: #15293f; }
html.dark .bg-blue-50, html.dark .bg-blue-50\/70, html.dark .bg-sky-100, html.dark .bg-blue-100,
html.dark .hover\:bg-blue-100:hover { background-color: var(--ts-chip); }
html.dark .bg-amber-50, html.dark .hover\:bg-amber-100:hover { background-color: #2a2414; }
html.dark .bg-rose-50 { background-color: #2b1620; }
html.dark .bg-purple-50 { background-color: #221a36; }
html.dark .bg-emerald-50, html.dark .bg-emerald-100 { background-color: #10291f; }
html.dark .bg-cyan-50 { background-color: #0f2a33; }
html.dark .data-\[state\=open\]\:bg-blue-50\/20[data-state=open] { background-color: rgba(2,132,199,.08); }

/* gradients built from light tints */
html.dark .from-blue-50, html.dark .from-sky-50, html.dark .from-amber-50 { --tw-gradient-from: var(--ts-surface-2); }
html.dark .via-blue-50 { --tw-gradient-via: var(--ts-surface-2); }
html.dark .to-white, html.dark .to-sky-50, html.dark .to-orange-50 { --tw-gradient-to: var(--ts-page); }

/* text */
html.dark .text-\[\#0A2540\], html.dark .text-gray-900, html.dark .text-foreground { color: var(--ts-text); }
html.dark .text-gray-800, html.dark .text-gray-700 { color: #d3dce7; }
html.dark .text-gray-600 { color: var(--ts-body); }
html.dark .text-gray-500, html.dark .text-muted-foreground { color: var(--ts-muted); }
html.dark .text-\[\#0284C7\] { color: #38bdf8; }
html.dark .hover\:text-\[\#0A2540\]:hover { color: #fff; }
html.dark .text-rose-600 { color: #fb7185; }
html.dark .text-purple-600 { color: #c084fc; }
html.dark .text-emerald-600 { color: #34d399; }
html.dark .text-cyan-600 { color: #22d3ee; }
/* keep dark text on amber/yellow buttons */
html.dark .bg-\[\#F59E0B\].text-\[\#0A2540\], html.dark .bg-\[\#F59E0B\] .text-\[\#0A2540\] { color: #0A2540; }

/* borders */
html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300,
html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-sky-300,
html.dark .border-blue-200, html.dark .divide-gray-100 > * { border-color: var(--ts-border); }
html.dark .border-amber-300, html.dark .border-amber-300\/60 { border-color: #5c4614; }
html.dark header.bg-white { background-color: #0d1c2f; border-bottom: 1px solid var(--ts-border); }

/* forms */
html.dark input, html.dark select, html.dark textarea {
  background-color: #0d1c2f; color: var(--ts-text); border-color: var(--ts-border);
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #6f839a; }
html.dark img { filter: none; }

/* =========================================================
   NEW SECTIONS (PanAm team, fundraiser, gallery posters)
   ========================================================= */
.ts-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .ts-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .ts-wrap { padding: 0 2rem; } }
.ts-eyebrow {
  display: inline-block; padding: .35rem .9rem; border-radius: 9999px; font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; background: var(--ts-chip); color: var(--ts-blue);
}
html.dark .ts-eyebrow { color: #7dd3fc; }
.ts-h2 { font-family: Outfit, sans-serif; font-weight: 900; color: var(--ts-text); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; margin: .75rem 0 .75rem; }
.ts-lead { color: var(--ts-body); font-size: 1rem; line-height: 1.7; max-width: 44rem; }
.ts-section { padding: 4.5rem 0; background: var(--ts-page); }
.ts-section.alt { background: var(--ts-surface-2); }

/* poster cards */
.ts-poster { display: block; position: relative; border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--ts-border);
  background: var(--ts-surface); box-shadow: 0 1px 2px rgba(10,37,64,.06); transition: transform .25s, box-shadow .25s; cursor: zoom-in; padding: 0; width: 100%; text-align: left; }
.ts-poster:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10,37,64,.14); }
.ts-poster img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.ts-poster-body { padding: 1rem 1.1rem 1.2rem; }
.ts-poster-name { font-family: Outfit, sans-serif; font-weight: 800; color: var(--ts-text); font-size: 1.1rem; }
.ts-poster-club { font-size: .75rem; font-weight: 700; color: var(--ts-blue); text-transform: uppercase; letter-spacing: .06em; margin-top: .1rem; }
html.dark .ts-poster-club { color: #38bdf8; }
.ts-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.ts-chip { font-size: .7rem; font-weight: 700; padding: .25rem .6rem; border-radius: 9999px; background: var(--ts-chip); color: var(--ts-text); }
.ts-poster-badge { position: absolute; top: .75rem; left: .75rem; background: rgba(10,37,64,.85); color: #fff; font-size: .7rem; font-weight: 700; padding: .3rem .7rem; border-radius: 9999px; }

.ts-grid-2 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.ts-grid-athletes { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.ts-grid-gallery { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .ts-grid-2 { grid-template-columns: 1fr 1fr; }
  .ts-grid-athletes, .ts-grid-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ts-grid-athletes { grid-template-columns: repeat(3, 1fr); }
  .ts-grid-gallery { grid-template-columns: repeat(4, 1fr); }
}

.ts-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 1.75rem 0 2.25rem; }
@media (min-width: 768px) { .ts-stats { grid-template-columns: repeat(4, 1fr); } }
.ts-stat { background: var(--ts-surface); border: 1px solid var(--ts-border); border-radius: 1rem; padding: 1rem; text-align: center; }
.ts-stat b { display: block; font-family: Outfit, sans-serif; font-size: 2rem; font-weight: 900; color: #dc2626; line-height: 1; }
html.dark .ts-stat b { color: #f87171; }
.ts-stat span { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ts-muted); margin-top: .35rem; }

/* fundraiser */
.ts-fund { border-radius: 1.75rem; overflow: hidden; display: grid; grid-template-columns: 1fr; background: linear-gradient(135deg, #0A2540 0%, #0c3a63 100%); color: #fff; box-shadow: 0 20px 40px rgba(10,37,64,.18); }
@media (min-width: 900px) { .ts-fund { grid-template-columns: 5fr 7fr; } }
.ts-fund-img { background: #fff; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; cursor: zoom-in; }
.ts-fund-img img { width: 100%; height: 100%; max-height: 640px; object-fit: cover; object-position: top; display: block; }
.ts-fund-body { padding: 2rem 1.5rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
@media (min-width: 640px) { .ts-fund-body { padding: 2.75rem; } }
.ts-fund-kicker { color: #fdba74; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.ts-fund h2, .ts-fund h3 { font-family: Outfit, sans-serif; font-weight: 900; font-size: clamp(1.9rem, 4.5vw, 2.9rem); line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.ts-fund h2 em, .ts-fund h3 em { font-style: normal; color: #fb923c; }
.ts-fund p { color: #cfe0f2; line-height: 1.7; margin: 0; }
.ts-price { display: inline-flex; align-items: baseline; gap: .5rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 1rem; padding: .7rem 1.1rem; width: fit-content; }
.ts-price b { font-family: Outfit, sans-serif; font-size: 2.2rem; font-weight: 900; color: #fff; line-height: 1; }
.ts-price span { font-size: .8rem; color: #cfe0f2; font-weight: 600; }
.ts-perks { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .25rem 0; padding: 0; list-style: none; }
.ts-perks li { font-size: .85rem; color: #e5eef8; display: flex; gap: .5rem; align-items: flex-start; }
.ts-perks li::before { content: "✓"; color: #fb923c; font-weight: 900; }
.ts-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.5rem; border-radius: 9999px; font-weight: 800; font-size: .9rem; transition: transform .15s, background .2s; text-decoration: none; }
.ts-btn:hover { transform: translateY(-1px); }
.ts-btn svg { width: 18px; height: 18px; }
.ts-btn-orange { background: #f97316; color: #fff; }
.ts-btn-orange:hover { background: #fb923c; }
.ts-btn-amber { background: var(--ts-amber); color: #0A2540; }
.ts-btn-amber:hover { background: #fbbf24; }
.ts-btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.ts-btn-ghost:hover { background: rgba(255,255,255,.18); }
.ts-btn-blue { background: var(--ts-blue); color: #fff; }
.ts-btn-blue:hover { background: #0369a1; }
.ts-btn-wa { background: #25D366; color: #06331a; }
.ts-btn-wa:hover { background: #3ee27a; }

/* lightbox */
.ts-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(4,12,22,.92); display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity .2s; }
.ts-lightbox.open { opacity: 1; pointer-events: auto; }
.ts-lightbox img { max-width: min(100%, 900px); max-height: 88vh; border-radius: .75rem; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ts-lightbox button { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 9999px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); cursor: pointer; font-size: 1.4rem; line-height: 1; }
.ts-lightbox figcaption { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: #cbd5e1; font-size: .85rem; padding: 0 1rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.ts-footer { background: #07182b; color: #b9c7d8; font-size: .9rem; }
.ts-footer a { color: inherit; text-decoration: none; transition: color .15s; }
.ts-footer a:hover { color: var(--ts-amber); }
.ts-footer-cta { background: linear-gradient(90deg, #0284C7, #0A2540); }
.ts-footer-cta .ts-wrap { display: flex; flex-direction: column; gap: 1.25rem; align-items: center; justify-content: space-between; padding-top: 2.25rem; padding-bottom: 2.25rem; text-align: center; }
@media (min-width: 768px) { .ts-footer-cta .ts-wrap { flex-direction: row; text-align: left; } }
.ts-footer-cta h2 { font-family: Outfit, sans-serif; color: #fff; font-weight: 900; font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0; line-height: 1.15; }
.ts-footer-cta p { color: #d6e8f7; margin: .35rem 0 0; }
.ts-footer-main { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-top: 3.5rem; padding-bottom: 3rem; }
@media (min-width: 640px) { .ts-footer-main { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ts-footer-main { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.ts-footer h3 { color: #fff; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 1.1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ts-amber); display: inline-block; }
.ts-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ts-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.ts-brand img { width: 56px; height: 56px; border-radius: 9999px; object-fit: cover; background: #fff; padding: 2px; }
.ts-brand b { display: block; color: #fff; font-family: Outfit, sans-serif; font-size: 1.35rem; font-weight: 900; line-height: 1; }
.ts-brand small { display: block; color: var(--ts-amber); font-size: .72rem; font-weight: 800; letter-spacing: .14em; margin-top: .2rem; }
.ts-footer .ts-tag { color: #93c5fd; font-style: italic; font-weight: 700; font-size: .8rem; margin-top: .75rem; }
.ts-social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.ts-social a { width: 40px; height: 40px; border-radius: 9999px; background: #12304f; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ts-social a:hover { background: var(--ts-blue); color: #fff; }
.ts-social svg { width: 18px; height: 18px; }
.ts-contact li { display: flex; gap: .65rem; align-items: flex-start; }
.ts-contact svg { width: 18px; height: 18px; flex: none; color: var(--ts-amber); margin-top: 2px; }
.ts-hours { margin-top: 1.1rem; background: #0c2340; border: 1px solid #16365a; border-radius: .9rem; padding: .9rem 1rem; font-size: .8rem; }
.ts-hours div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.ts-hours div + div { border-top: 1px solid #16365a; }
.ts-hours span:first-child { color: #fff; font-weight: 700; }
.ts-footer-bottom { border-top: 1px solid #16365a; }
.ts-footer-bottom .ts-wrap { display: flex; flex-direction: column; gap: .9rem; align-items: center; justify-content: space-between; padding-top: 1.4rem; padding-bottom: 1.6rem; font-size: .78rem; color: #8ea3bb; text-align: center; }
@media (min-width: 768px) { .ts-footer-bottom .ts-wrap { flex-direction: row; text-align: left; } }
.ts-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.ts-top-btn { white-space: nowrap; background: #12304f; color: #fff; border: 0; border-radius: 9999px; padding: .5rem 1rem; font-weight: 700; font-size: .78rem; cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; }
.ts-top-btn:hover { background: var(--ts-blue); }

/* =========================================================
   MOBILE: center text & elements (< 640px)
   ========================================================= */
@media (max-width: 639.98px) {
  main, .ts-footer { text-align: center; }
  main :is(h1, h2, h3, h4, h5, p, blockquote, li, label, span, .ts-lead) { text-align: center; }
  main [class*="max-w-"], .ts-lead { margin-left: auto; margin-right: auto; }
  main .flex:not(.justify-between):not(form .flex) { justify-content: center; }
  main .flex-col, main .space-y-4, main .space-y-6 { align-items: center; }
  main .items-start { align-items: center; }
  main li.flex, main .flex.items-start { justify-content: center; }
  main .inline-flex, main a, main button { justify-content: center; }
  main .grid > * { text-align: center; }
  main img.rounded-full, main .mx-auto { margin-left: auto; margin-right: auto; }
  main .ts-poster, .ts-poster-body { text-align: center; }
  .ts-chips, .ts-btns, .ts-social { justify-content: center; }
  .ts-price { margin: 0 auto; }
  .ts-perks { grid-template-columns: 1fr; justify-items: center; }
  .ts-fund-body { align-items: center; text-align: center; }
  .ts-footer h3 { display: inline-block; }
  .ts-footer ul { justify-items: center; }
  .ts-contact li { justify-content: center; text-align: left; }
  .ts-hours { text-align: left; }
  .ts-brand { justify-content: center; }
  /* form controls: keep typing area readable */
  main input, main textarea, main select { text-align: left; }
  main form .grid > * { text-align: left; }
  main form label { text-align: left; display: block; }
  /* FAQ rows: centred question with chevron beneath */
  main [data-orientation="vertical"] > div > h3 button { flex-direction: column; gap: .35rem; text-align: center; }
  /* tighter section spacing on phones */
  main section.py-20 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .ts-section { padding: 3.25rem 0; }
  main h1 { word-break: break-word; }
  header .h-20 { height: 4.5rem; }
  header .w-14.h-14 { width: 3rem; height: 3rem; }
}
.ts-top-btn svg { width: 14px; height: 14px; }
@media (max-width: 639.98px) { [id] { scroll-margin-top: 175px; } }