/* ============================================================
   SKIN: CASUAL — skin-casual.css
   Mint green base, vivid green + amber accents. Bright, friendly, sporty.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;0,800;1,700;1,800&display=swap');

:root {
  --color-bg:                 #D4EDE0;
  --color-bg-dark:            #0D1F15;
  --color-bg-card:            #F2FAF6;
  --color-bg-card-hover:      #e8f6ef;
  --color-border:             rgba(22,163,74,0.2);
  --color-accent:             #16A34A;
  --color-accent-bg:          rgba(22,163,74,0.12);
  --color-gold:               #F59E0B;
  --color-gold-dark:          #d97706;
  --color-text:               #0D1F15;
  --color-text-muted:         rgba(13,31,21,0.6);
  --color-text-on-dark:       #ffffff;
  --color-text-muted-on-dark: rgba(255,255,255,0.75);
  --color-text-faint-on-dark: rgba(255,255,255,0.4);
  --color-cancelled:          rgb(185,60,60);
  --color-cancelled-bg:       rgba(185,60,60,0.1);
  --font-display:             'Plus Jakarta Sans', sans-serif;
  --font-body:                'Plus Jakarta Sans', sans-serif;
}

body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }

/* Topbar */
.topbar { background: var(--color-gold); }
.topbar::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 0; }
.topbar-item { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-bg-dark); }
.topbar-dot { width: 6px; height: 6px; background: var(--color-bg-dark); border-radius: 50%; opacity: 0.35; }

/* Hero */
.hero { background: var(--color-bg-dark); }
.hero-bg {
  background:
    linear-gradient(160deg, rgba(13,31,21,0.88) 0%, rgba(13,31,21,0.5) 50%, rgba(13,31,21,0.88) 100%),
    url('/images/flag_header.jpg') center/cover no-repeat;
}

.hero-tag { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--color-border); border: 1px solid var(--color-border); color: var(--color-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.35rem 0.85rem; border-radius: 100px; margin-bottom: 1.5rem; width: fit-content; }

.eyebrow { color: var(--color-accent); }
.heading { font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 800; color: var(--color-text); }
.heading em { font-style: italic; color: var(--color-gold); }
.hero-title { font-family: var(--font-display); font-size: clamp(3.5rem, 12vw, 8rem); line-height: 0.95; font-weight: 800; color: var(--color-text-on-dark); margin-bottom: 1.25rem; }
.hero-title em { font-style: italic; color: var(--color-gold); }
.hero-sub { font-size: 1.05rem; color: var(--color-text-muted-on-dark); max-width: 400px; margin-bottom: 2.25rem; }
.body-text { color: var(--color-text-muted); }

/* Vibe strip */
.vibe-strip { background: var(--color-bg-card); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.vibe-item { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-accent); border-right: 1px solid var(--color-border); }
.vibe-item:last-child { border-right: none; }

/* Cards */
.card-grid--flush { background: var(--color-border); border: 1px solid var(--color-border); border-radius: 12px; }
.card { background: var(--color-bg-card); border-radius: 0; }
.card:hover { background: var(--color-bg-card-hover); border-color: var(--color-accent); }
.card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.4rem; }
.card p { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.55; }

/* Info block */
.info-block { background: var(--color-bg-dark); border: 1px solid var(--color-border); }
.info-header { background: var(--color-gold); }
.info-header-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-bg-dark); }
.info-cell { border-right: 1px solid var(--color-border); }
.info-cell:last-child { border-right: none; }
.cell-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(110,231,160,0.6); margin-bottom: 0.35rem; }
.cell-val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--color-text-on-dark); line-height: 1; }
.cell-sub { font-size: 0.8rem; color: var(--color-text-faint-on-dark); margin-top: 0.2rem; }

/* Buttons */
.btn-primary { background: var(--color-gold); color: var(--color-bg-dark); font-family: var(--font-display); font-size: 1rem; font-weight: 700; border-radius: 100px; }
.btn-primary:hover { background: var(--color-gold-dark); color: var(--color-text-on-dark); }
.btn-secondary { border: 1px solid var(--color-gold); color: var(--color-gold); font-family: var(--font-display); border-radius: 100px; }
.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Join */
.join .heading { font-size: clamp(2rem, 5vw, 3.2rem); }
.join p { color: var(--color-text-muted); margin-bottom: 2rem; }
.contact-note { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 1rem; }
.contact-note a { color: var(--color-gold); }

/* Footer */
footer { border-top: 1px solid var(--color-border); color: var(--color-text-muted); }

/* Divider */
.rule { border-color: var(--color-border); }

/* Practices block */
.practices-block { background: var(--color-bg-card); border: 1px solid var(--color-border); }
.practices-header { background: var(--color-bg-dark); border-bottom: 1px solid var(--color-border); }
.practices-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(110,231,160,0.6); }
.practice-row { border-bottom: 1px solid var(--color-border); }
.practice-row:last-child { border-bottom: none; }
.practice-row--cancelled { opacity: 0.6; }
.practice-date { color: var(--color-text); font-family: var(--font-display); }
.practice-time { color: var(--color-text-muted); }
.status-pill--ok { background: var(--color-accent-bg); color: var(--color-accent); }
.status-pill--cancelled { background: var(--color-cancelled-bg); color: var(--color-cancelled); }