/* ─────────────────────────────────────────────────────────────────────────
   vecl.in — every page on the site.

   Lifted out of index.html when the site grew past one page. There is still no
   build step: the pages are hand-written HTML and this is a plain stylesheet,
   so the folder drops onto Cloudflare Pages or Netlify unchanged. What it buys
   is one place to change the palette instead of seven.
   ───────────────────────────────────────────────────────────────────────── */

/* Elite "Club Prestige" palette, shared with the app so the journey from
   this page into book.elitecricketacademy.com.au does not change clothes
   halfway through. */
:root {
  --maroon:#7c1d2b; --maroon-dark:#5e1220; --gold:#c9a227; --gold-deep:#8a6317;
  --ink:#23161a; --muted:#6d5c60; --line:#e7dcd5; --bg:#f7f4ef; --surface:#fff;
  --surface-warm:#f5ece4; --surface-gold:#fbf5e5;
  --radius:12px; --radius-lg:18px;
  --shadow-sm:0 2px 10px rgba(64,14,24,.06);
  --shadow-md:0 10px 30px rgba(64,14,24,.10);
  --font:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --wrap:1080px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--maroon); }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 22px; }
h1, h2, h3 { line-height:1.2; letter-spacing:-.01em; margin:0; }
h1 { font-size:clamp(32px, 6vw, 52px); font-weight:800; }
h2 { font-size:clamp(24px, 4vw, 34px); font-weight:750; }
h3 { font-size:19px; font-weight:700; }
p { margin:0 0 16px; }
.lede { font-size:clamp(17px, 2.2vw, 20px); color:var(--muted); }
.eyebrow { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); background:var(--surface-gold); border-radius:999px; padding:6px 14px; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:var(--radius); padding:15px 26px; font:inherit; font-size:17px; font-weight:700; cursor:pointer; text-decoration:none; transition:transform .06s, box-shadow .15s, background .15s; }
.btn-primary { background:var(--maroon); color:#fff; box-shadow:0 4px 16px rgba(94,18,32,.28); }
.btn-primary:hover { background:var(--maroon-dark); box-shadow:0 8px 24px rgba(94,18,32,.34); }
.btn-primary:active { transform:translateY(1px); }
.btn-ghost { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5); }
.btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.btn-outline { background:var(--surface); color:var(--ink); border:1.5px solid var(--line); }
.btn-outline:hover { border-color:var(--gold); background:var(--surface-gold); }

/* header */
header { position:sticky; top:0; z-index:20; background:rgba(124,29,43,.97); backdrop-filter:blur(8px); color:#fff; }
.navbar { display:flex; align-items:center; gap:18px; padding:12px 0; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff; margin-right:auto; }
.brand img { height:42px; width:auto; background:#fff; border-radius:9px; padding:4px 6px; }
.brand b { font-size:17px; font-weight:800; letter-spacing:.02em; display:block; }
.brand span { font-size:11.5px; color:#f0d6b8; letter-spacing:.06em; text-transform:uppercase; }
nav.links { display:flex; gap:20px; }
nav.links a { color:#f5e3d4; text-decoration:none; font-size:15px; font-weight:600; }
nav.links a:hover { color:#fff; }
/* The page you are on, so a seven-page site does not feel like seven sites. */
nav.links a[aria-current="page"] { color:#fff; box-shadow:inset 0 -2px 0 var(--gold); }
.navcta { padding:10px 18px; font-size:15px; }

/* Tamil / English. Sits beside the register button rather than in the menu:
   a parent who cannot read the page cannot find a control hidden behind a
   word they cannot read. */
.langtoggle {
  display:inline-flex; align-items:stretch; margin-left:10px; padding:0; cursor:pointer;
  background:transparent; border:1.5px solid rgba(255,255,255,.45); border-radius:9px;
  overflow:hidden; font:inherit; line-height:1;
}
.langtoggle:hover { border-color:#fff; }
.langtoggle:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.langtoggle .lg {
  padding:9px 11px; font-size:13px; font-weight:700; color:#f0d6b8;
  display:flex; align-items:center; transition:background .12s, color .12s;
}
.langtoggle .lg.on { background:var(--gold); color:#3a2a06; }

/* The menu button only exists on small screens. Until the site grew past one
   page the nav simply vanished below 880px and that was fine — you scrolled.
   With real pages behind it, a phone with no menu is a phone that cannot reach
   the clubs, the policies or the news. */
.navtoggle {
  display:none; background:transparent; border:1px solid rgba(255,255,255,.35);
  color:#fff; border-radius:10px; padding:8px 11px; font:inherit; font-size:14px;
  font-weight:700; cursor:pointer; align-items:center; gap:8px;
}
.navtoggle:hover { border-color:rgba(255,255,255,.7); }
.navtoggle .bars { display:block; width:16px; height:2px; background:#fff; position:relative; }
.navtoggle .bars::before,
.navtoggle .bars::after { content:''; position:absolute; left:0; width:16px; height:2px; background:#fff; }
.navtoggle .bars::before { top:-5px; }
.navtoggle .bars::after { top:5px; }

@media (max-width:520px) { .langtoggle .lg { padding:8px 9px; font-size:12px; } .navcta { padding:9px 13px; font-size:14px; } }
@media (max-width:880px) {
  .navtoggle { display:inline-flex; }
  .navbar { flex-wrap:wrap; gap:12px; }
  .brand img { height:36px; }
  .navcta { padding:9px 14px; font-size:14px; }
  nav.links {
    display:none; order:3; flex-basis:100%; flex-direction:column; gap:0;
    border-top:1px solid rgba(255,255,255,.18); margin-top:4px; padding-bottom:6px;
  }
  nav.links.open { display:flex; }
  nav.links a { padding:13px 2px; border-bottom:1px solid rgba(255,255,255,.10); font-size:16px; }
  nav.links a[aria-current="page"] { box-shadow:inset 3px 0 0 var(--gold); padding-left:10px; }
}

/* hero */
.hero { position:relative; color:#fff; background:linear-gradient(150deg, #7c1d2b 0%, #5e1220 62%, #45101a 100%); overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0; background:url('hero.jpg') center/cover no-repeat; opacity:.16; mix-blend-mode:luminosity; }
.hero .wrap { position:relative; z-index:1; padding-top:64px; padding-bottom:64px; }
.hero h1 { max-width:16ch; }
.hero p { max-width:56ch; color:#f2ddd0; font-size:clamp(17px, 2.2vw, 20px); }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.hero .note { margin:18px 0 0; font-size:14.5px; color:#e2c3ae; }
.flags { display:flex; align-items:center; gap:10px; margin-bottom:18px; font-size:14px; color:#f0d6b8; font-weight:600; }

/* generic sections */
section { padding:64px 0; }
section.tint { background:var(--surface-warm); }
.sechead { max-width:62ch; margin-bottom:34px; }
.sechead h2 { margin-bottom:12px; }
.sechead p { color:var(--muted); margin:0; }

.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); }
.card h3 { margin-bottom:8px; }
.card p { color:var(--muted); font-size:15.5px; margin:0; }
.card .ico { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#f7efe6,#efe3d6); color:var(--maroon); margin-bottom:14px; }
.card .ico svg { width:22px; height:22px; }

/* season panel — the one block that changes every season */
.season { background:var(--surface); border:2px solid var(--gold); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-md); }
.season .row { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.season h2 { margin-bottom:10px; }
.facts { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); margin:22px 0; }
.facts div { background:var(--surface); padding:16px 18px; }
.facts dt { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:4px; }
.facts dd { margin:0; font-size:16px; font-weight:600; }

/* steps */
.steps { counter-reset:step; display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.step { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); position:relative; }
.step::before { counter-increment:step; content:counter(step); display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--maroon); color:#fff; font-weight:800; font-size:16px; margin-bottom:14px; }
.step h3 { margin-bottom:6px; }
.step p { color:var(--muted); font-size:15.5px; margin:0; }

/* panel of selectors */
.people { display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.person { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; }
.person b { display:block; font-size:17px; }
.person em { display:block; font-style:normal; color:var(--gold-deep); font-size:13.5px; font-weight:700; margin:2px 0 10px; }
.person p { color:var(--muted); font-size:15px; margin:0; }

/* faq */
details { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:10px; }
details[open] { border-color:var(--gold); }
summary { cursor:pointer; font-weight:700; font-size:16.5px; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center; }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; color:var(--gold-deep); font-size:24px; font-weight:400; line-height:1; }
details[open] summary::after { content:'\2212'; }
details p { margin:12px 0 0; color:var(--muted); font-size:15.5px; }

/* closing call to action */
.final { background:linear-gradient(150deg, #7c1d2b, #5e1220); color:#fff; text-align:center; }
.final h2 { margin-bottom:12px; }
.final p { color:#f2ddd0; max-width:52ch; margin:0 auto 26px; }

/* contact + footer */
.contact { display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.contact a { font-weight:650; }
footer { background:#3a0e17; color:#e6cdbb; padding:40px 0; font-size:14.5px; }
footer .cols { display:flex; gap:24px; justify-content:space-between; flex-wrap:wrap; align-items:flex-start; }
footer a { color:#f4dfc9; }
footer .fine { margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); color:#c4a493; font-size:13px; }
#galleryGrid figure { margin:0; }
#galleryGrid img { width:100%; height:220px; object-fit:cover; border-radius:var(--radius-lg); display:block; box-shadow:var(--shadow-sm); }
#galleryGrid figcaption { font-size:13.5px; color:var(--muted); margin-top:7px; line-height:1.4; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:12px; top:12px; z-index:50; background:#fff; padding:10px 16px; border-radius:8px; }

/* ── interior pages ───────────────────────────────────────────────────────
   The landing page opens on a hero. Every other page opens on this: a maroon
   band with the page title, so you always know which page you landed on. */
.pagehead { background:linear-gradient(150deg, #7c1d2b 0%, #5e1220 70%, #45101a 100%); color:#fff; }
.pagehead .wrap { padding-top:52px; padding-bottom:52px; }
.pagehead h1 { max-width:20ch; margin-bottom:10px; }
.pagehead p { max-width:60ch; color:#f2ddd0; font-size:clamp(16px, 2vw, 18.5px); margin:0; }
.pagehead .eyebrow { background:rgba(255,255,255,.14); color:#ffe9c7; }

/* A trail back to the top of the site. Ten words of orientation for anyone who
   arrived on an interior page from a search result. */
.crumb { font-size:14px; color:#e2c3ae; margin-bottom:14px; }
.crumb a { color:#f5e3d4; }

/* Definition rows used by the league and policy pages: a term and its answer,
   readable on a phone without becoming a table. */
.deflist { display:grid; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
.deflist > div { display:grid; grid-template-columns:minmax(150px, 240px) 1fr; gap:18px; padding:16px 20px; border-top:1px solid var(--line); }
.deflist > div:first-child { border-top:0; }
.deflist dt { font-weight:700; margin:0; }
.deflist dd { margin:0; color:var(--muted); }
@media (max-width:620px) { .deflist > div { grid-template-columns:1fr; gap:4px; } }

/* A club, on the clubs page. Two are named and two are not, and the ones that
   are not must not look like a loading failure. */
.club { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:24px; box-shadow:var(--shadow-sm); }
.club.tbc { background:repeating-linear-gradient(135deg, #fbf7f2, #fbf7f2 10px, #f6efe7 10px, #f6efe7 20px); border-style:dashed; }
.club h3 { margin-bottom:6px; }
.club .where { font-size:14px; color:var(--muted); font-weight:600; }

/* News posts. Staff write plain text in the app; it renders here escaped, with
   line breaks preserved and nothing else interpreted. */
.post { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:26px; box-shadow:var(--shadow-sm); margin-bottom:18px; }
.post h3 { margin-bottom:4px; }
.post .when { font-size:13.5px; color:var(--muted); font-weight:600; letter-spacing:.02em; }
.post .body { white-space:pre-wrap; margin:14px 0 0; }

/* Sponsors, and the empty state that replaces them until there are any. */
.sponsor { display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:20px 22px; box-shadow:var(--shadow-sm); }
.sponsor img { max-height:56px; width:auto; }
.sponsor b { display:block; }
.sponsor span { font-size:14px; color:var(--muted); }

/* Used wherever a page has nothing to show yet and says so plainly, rather
   than showing an empty frame or a dead link. */
.emptynote { border:1px dashed var(--line); border-radius:var(--radius-lg); background:var(--surface-gold); padding:24px 26px; }
.emptynote p:last-child { margin-bottom:0; }

/* The landing page is long, and the header nav now points at other pages
   rather than at its sections. This strip keeps the sections one tap away.
   It scrolls sideways on a phone rather than wrapping into three rows. */
.pagenav { background:var(--surface-warm); border-bottom:1px solid var(--line); }
.pagenav .wrap { display:flex; gap:20px; overflow-x:auto; padding-top:12px; padding-bottom:12px; -webkit-overflow-scrolling:touch; }
.pagenav a { white-space:nowrap; font-size:14.5px; font-weight:600; color:var(--muted); text-decoration:none; }
.pagenav a:hover { color:var(--maroon); }

/* Photos. Each one links to the file itself, which is the whole of what a
   lightbox does, so the only thing needed here is for it to look clickable. */
#galleryGrid a, #photosGrid a { display:block; }
#photosGrid figure { margin:0; }
#photosGrid img { width:100%; height:220px; object-fit:cover; border-radius:var(--radius-lg); display:block; box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .12s ease; }
#photosGrid a:hover img, #galleryGrid a:hover img { transform:scale(1.012); box-shadow:var(--shadow-md); }
#photosGrid figcaption { font-size:13.5px; color:var(--muted); margin-top:7px; line-height:1.4; }