/* Cape Town Sport Council — brand tokens (logo palette: royal blue + red + steel + white) */
:root{
  --navy:#0c4594;
  --navy2:#1453a6;
  --ink:#08315f;
  --ocean:#2a6cb3;
  --ocean2:#5f97c9;
  --sky:#6ea7df;
  --sky-soft:#cfe3f6;
  --sky-tint:#eef5fc;
  --gold:#d22b2b;
  --gold-d:#b21f1f;
  --sand:#eef2f8;
  --paper:#ffffff;
  --line:#d6e0ee;
  --line2:#e7edf6;
  --muted:#5e7086;
  --muted2:#93a3b4;
  --text:#0c2f5e;
  --ok:#1f8a5b;
  --warn:#c98a1e;
  --pend:#2a6cb3;
  --radius:8px;
  --shadow:0 1px 2px rgba(12,69,148,.06),0 8px 24px rgba(12,69,148,.08);
  --shadow-lg:0 24px 60px rgba(8,49,95,.20);
  --maxw:1240px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'Archivo',system-ui,sans-serif;color:var(--text);
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at center, rgba(110,167,223,.11) 1px, transparent 1.5px) 0 0 / 24px 24px,
    var(--sand);}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

/* Home page ombre — subtle vertical blue→sand→blue wash, keeps the dot texture on top */
.home-bg{
  background:
    radial-gradient(circle at center, rgba(110,167,223,.10) 1px, transparent 1.5px) 0 0 / 24px 24px,
    linear-gradient(180deg,
      #e4eefb 0%,
      #eef4fb 14%,
      var(--sand) 40%,
      var(--sand) 60%,
      #eaf1fa 84%,
      #dfeaf7 100%);
}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;padding:12px 22px;
  border-radius:5px;white-space:nowrap;transition:.15s;letter-spacing:.01em;}
.btn-gold{background:var(--gold);color:#fff;}
.btn-gold:hover{background:var(--gold-d);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy2);}
.btn-ghost{border:1.5px solid var(--line);color:var(--navy);background:#fff;}
.btn-ghost:hover{border-color:var(--navy);}
.btn-outline-w{border:1.5px solid rgba(255,255,255,.35);color:#fff;}
.btn-outline-w:hover{border-color:#fff;}
.btn-sm{padding:8px 15px;font-size:13px;}
.btn-lg{padding:15px 28px;font-size:16px;}

/* chips / badges */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:30px;
  background:var(--sky-tint);border:1px solid var(--sky-soft);color:var(--navy);letter-spacing:.02em;}
.chip.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;padding:4px 9px;border-radius:4px;}
.badge-approved{background:#e6f4ec;color:var(--ok);}
.badge-pending{background:#e7f0f8;color:var(--pend);}
.badge-draft{background:#f1ede3;color:var(--muted);}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ocean);}
.eyebrow.gold{color:var(--gold-d);}
.eyebrow::before{content:'';width:30px;height:2px;background:currentColor;}

/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);}
.card-hover{transition:.18s;}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--sky);}

/* section heading */
.sech{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;
  border-bottom:2px solid transparent;padding-bottom:14px;
  border-image:linear-gradient(90deg,var(--navy) 0,var(--navy) 30%,var(--sky) 100%) 1;}
.sech h2{font-size:30px;font-weight:900;letter-spacing:-.02em;margin:0;}
.sech a,.sech .lnk{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ocean);}

/* table-mountain photo placeholder */
.photo{position:relative;overflow:hidden;background:linear-gradient(135deg,#2a6cb3,#0c4594 72%);}
.photo .grain{position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 9px);}
.photo .mtn{position:absolute;bottom:0;left:0;right:0;height:46%;
  background:linear-gradient(180deg,transparent,#08315f);
  clip-path:polygon(0 60%,18% 28%,34% 46%,52% 12%,72% 40%,88% 22%,100% 48%,100% 100%,0 100%);opacity:.72;}
.photo .ptag{position:absolute;bottom:12px;left:12px;background:rgba(6,25,42,.78);color:#bcd0de;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;padding:5px 10px;border-radius:3px;font-weight:700;}

/* forms */
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--navy);margin-bottom:7px;}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--navy);
  padding:12px 14px;border:1.5px solid var(--line);border-radius:6px;background:#fff;outline:none;transition:.15s;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ocean);box-shadow:0 0 0 3px rgba(21,100,160,.12);}
.field textarea{resize:vertical;min-height:90px;}
.field .hint{font-size:12px;color:var(--muted);margin-top:5px;}

/* scrollbar nicety */
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:var(--sky);border-radius:6px;border:3px solid var(--sand);}

.fade-in{animation:riseIn .4s ease both;}
@keyframes riseIn{from{transform:translateY(10px);}to{transform:none;}}
.stagger>*{animation:riseIn .45s ease both;}

/* light-blue textures */
.tx-topo{position:relative;isolation:isolate;}
.tx-topo>*{position:relative;z-index:1;}
.tx-topo::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(58deg, rgba(126,178,227,.10) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-58deg, rgba(126,178,227,.07) 0 1px, transparent 1px 38px);}
.tx-dots{position:relative;isolation:isolate;}
.tx-dots>*{position:relative;z-index:1;}
.tx-dots::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at center, rgba(126,178,227,.16) 1px, transparent 1.6px);
  background-size:22px 22px;}

/* Print only the Letter of Good Standing */
@media print {
  body.printing-letter * { visibility: hidden !important; }
  body.printing-letter #good-standing-letter,
  body.printing-letter #good-standing-letter * { visibility: visible !important; }
  body.printing-letter #good-standing-letter {
    position: fixed; left: 0; top: 0; width: 100%; padding: 48px 56px !important; box-shadow: none !important;
  }
}