/* assets/css/style.css
   CLEAR Marathon Cambodia
   Energetic light theme with controlled APOPO aligned accents
   Includes blurred hero background image runners.jpg
   Required image path: /assets/img/runners.jpg

   Fixes included
   Stable site wide background using a fixed body layer to prevent contrast bands when scrolling
   Hero blur locked at 1px on all breakpoints
   Mobile menu open selector supports navOpen on header or body
*/

/* =========================
   ROOT VARIABLES
========================= */
:root{
  --ink:#0b1220;
  --muted:rgba(15,23,42,0.72);
  --soft:rgba(15,23,42,0.58);

  --bgTop:#fbfcff;
  --bgMid:#eef4ff;
  --bgBot:#f8fbff;

  --white:rgba(255,255,255,0.92);
  --glass:rgba(255,255,255,0.78);
  --line:rgba(15,23,42,0.10);

  --orange:#ff7a00;
  --amber:#ffd400;
  --teal:#25d1c4;
  --blue:#5b8cff;
  --violet:#8b5cf6;

  --success:#22c55e;
  --info:#3b82f6;
  --warn:#f59e0b;
  --danger:#ef476f;

  --shadow1:0 14px 35px rgba(2,6,23,0.08);
  --shadow2:0 22px 70px rgba(2,6,23,0.10);
  --shadow3:0 28px 90px rgba(2,6,23,0.12);

  --rXL:26px;
  --rLG:22px;
  --rMD:16px;
  --rSM:12px;

  --max:1160px;

  --space1:8px;
  --space2:12px;
  --space3:16px;
  --space4:22px;
  --space5:30px;
  --space6:42px;
  --space7:58px;

  --font:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.2,.8,.2,1);

  --focusRing:0 0 0 4px rgba(91,140,255,0.26);
  --focusRingWarm:0 0 0 4px rgba(255,122,0,0.22);
}

/* =========================
   RESET AND BASE
========================= */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* One stable background layer for the whole site */
body{position:relative}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% 6%, rgba(255,122,0,0.18), rgba(255,122,0,0) 62%),
    radial-gradient(900px 600px at 92% 10%, rgba(37,209,196,0.16), rgba(37,209,196,0) 62%),
    radial-gradient(900px 600px at 76% 94%, rgba(91,140,255,0.12), rgba(91,140,255,0) 62%),
    radial-gradient(900px 600px at 18% 92%, rgba(139,92,246,0.08), rgba(139,92,246,0) 62%),
    linear-gradient(180deg, var(--bgTop) 0%, var(--bgMid) 55%, var(--bgBot) 100%);
}

a{color:inherit;text-decoration:none}
a:hover{opacity:0.96}
img{max-width:100%;height:auto;display:block}
p{margin:0}
ul,ol{margin:0;padding-left:18px}
::selection{background:rgba(255,212,0,0.35)}
*{scroll-margin-top:92px}

/* Focus */
:focus{outline:none}
:focus-visible{
  box-shadow:var(--focusRing);
  border-radius:14px;
}
a:focus-visible,
button:focus-visible{
  box-shadow:var(--focusRing);
}
.btn:focus-visible{
  box-shadow:var(--focusRingWarm);
}

/* =========================
   LAYOUT
========================= */
.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.section{
  padding:88px 0;
  position:relative;
}

.sectionTight{
  padding:62px 0;
  position:relative;
}

.grid{
  display:grid;
  gap:26px;
}

.grid2{
  grid-template-columns:1.12fr 0.88fr;
  align-items:start;
}

.grid3{
  grid-template-columns:repeat(3, 1fr);
}

.stack{display:grid;gap:var(--space3)}
.stackLG{display:grid;gap:var(--space5)}
.stackXL{display:grid;gap:var(--space6)}

/* =========================
   TYPOGRAPHY
========================= */
h1{
  margin:0;
  font-size:clamp(34px, 5vw, 62px);
  line-height:1.05;
  letter-spacing:-0.03em;
}

h2{
  margin:0;
  font-size:clamp(26px, 3.2vw, 42px);
  line-height:1.12;
  letter-spacing:-0.02em;
}

h3{
  margin:0;
  font-size:18px;
  line-height:1.25;
  letter-spacing:-0.01em;
}

.lead{
  margin:0;
  margin-top:14px;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
  max-width:74ch;
}

.small{
  font-size:13px;
  line-height:1.65;
  color:var(--soft);
}

.mono{
  font-family:var(--mono);
  color:rgba(15,23,42,0.70);
  font-size:13px;
}

/* =========================
   HELPERS
========================= */
.hr{
  height:1px;
  background:var(--line);
  margin:16px 0;
}

.glowLine{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, rgba(0,0,0,0), rgba(255,122,0,0.45), rgba(255,212,0,0.45), rgba(37,209,196,0.35), rgba(91,140,255,0.28), rgba(0,0,0,0));
  opacity:0.85;
}

/* =========================
   KICKER
========================= */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.80);
  border:1px solid var(--line);
  color:rgba(15,23,42,0.72);
  font-size:12px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  box-shadow:0 10px 30px rgba(2,6,23,0.06);
}

.kickerDot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--amber), var(--orange));
  box-shadow:0 0 0 4px rgba(255,122,0,0.12);
}

/* =========================
   CARDS
========================= */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.74));
  border:1px solid var(--line);
  border-radius:var(--rLG);
  padding:22px;
  box-shadow:var(--shadow1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:relative;
  overflow:hidden;
  transition:transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.card:hover{
  box-shadow:0 18px 60px rgba(2,6,23,0.10);
  transform:translateY(-1px);
}

.cardSoft{
  background:rgba(255,255,255,0.72);
  box-shadow:0 12px 35px rgba(2,6,23,0.06);
}

.card::after{
  content:"";
  position:absolute;
  right:-120px;
  top:-140px;
  width:280px;
  height:280px;
  border-radius:999px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.70), rgba(255,255,255,0) 62%),
    linear-gradient(135deg, rgba(255,122,0,0.18), rgba(37,209,196,0.12), rgba(91,140,255,0.10));
  opacity:0.70;
  pointer-events:none;
}

.cardNoSheen::after{display:none}

/* =========================
   BUTTONS
========================= */
.btnRow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:18px;
  font-weight:900;
  letter-spacing:0.01em;
  cursor:pointer;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.88);
  color:var(--ink);
  transition:transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
  box-shadow:0 14px 35px rgba(2,6,23,0.06);
  will-change:transform;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 52px rgba(2,6,23,0.10);
}

.btn:active{
  transform:translateY(0px);
  box-shadow:0 12px 30px rgba(2,6,23,0.08);
}

.btnPrimary{
  border:0;
  color:#1a1408;
  background:linear-gradient(135deg, var(--amber), var(--orange));
  box-shadow:0 18px 55px rgba(255,122,0,0.22);
}

.btnPrimary:hover{
  box-shadow:0 26px 85px rgba(255,122,0,0.28);
}

.btnTeal{
  border:0;
  color:#061b1a;
  background:linear-gradient(135deg, rgba(37,209,196,1), rgba(37,209,196,0.72));
  box-shadow:0 18px 55px rgba(37,209,196,0.18);
}

.btnTeal:hover{
  box-shadow:0 26px 85px rgba(37,209,196,0.22);
}

.btnBlue{
  border:0;
  color:#061425;
  background:linear-gradient(135deg, rgba(91,140,255,1), rgba(91,140,255,0.72));
  box-shadow:0 18px 55px rgba(91,140,255,0.18);
}

.btnBlue:hover{
  box-shadow:0 26px 85px rgba(91,140,255,0.22);
}

@media (max-width:560px){
  .btn{width:100%}
  .btnRow{gap:10px}
}

/* =========================
   HEADER AND NAV
========================= */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(251,252,255,0.84);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}

.brandMark{
  width:42px;
  height:42px;
  border-radius:14px;
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,0.70), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, var(--amber), var(--orange));
  box-shadow:0 16px 50px rgba(255,122,0,0.18);
  border:1px solid rgba(255,255,255,0.75);
}

.brandText{
  display:flex;
  flex-direction:column;
  line-height:1.06;
}

.brandTextStrong{
  font-size:14px;
  font-weight:950;
  letter-spacing:0.06em;
}

.brandTextSmall{
  font-size:12px;
  color:rgba(15,23,42,0.68);
}

.navLinks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}

.navLinks a{
  font-size:13px;
  font-weight:850;
  color:rgba(15,23,42,0.70);
  padding:9px 10px;
  border-radius:14px;
  border:1px solid transparent;
  transition:background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease), color 180ms var(--ease);
}

.navLinks a:hover{
  color:var(--ink);
  background:rgba(255,255,255,0.82);
  border-color:rgba(15,23,42,0.10);
  transform:translateY(-1px);
}

.navLinks a.isActive{
  color:var(--ink);
  background:rgba(255,255,255,0.90);
  border-color:rgba(255,122,0,0.20);
  box-shadow:0 10px 30px rgba(255,122,0,0.10);
}

.navToggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.88);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 35px rgba(2,6,23,0.06);
}

/* optional hamburger bars if you use <button class="navToggle"><span></span></button> */
.navToggle span{
  display:block;
  width:18px;
  height:2px;
  background:rgba(15,23,42,0.70);
  border-radius:999px;
  box-shadow:0 6px 0 rgba(15,23,42,0.70), 0 -6px 0 rgba(15,23,42,0.70);
}

.mobileMenu{
  display:none;
  padding-bottom:14px;
}

.mobileMenuGrid{
  display:grid;
  gap:10px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

.mobileLink{
  display:block;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,0.88);
  border:1px solid rgba(15,23,42,0.10);
  box-shadow:0 14px 35px rgba(2,6,23,0.06);
  font-weight:900;
  color:var(--ink);
  transition:transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

.mobileLink:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 52px rgba(2,6,23,0.10);
}

/* Support navOpen added on header OR body */
.header.navOpen .mobileMenu{display:block}
.navOpen .mobileMenu{display:block}

@media (max-width:980px){
  .container{width:calc(100% - 28px)}
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .section{padding:74px 0}
  .sectionTight{padding:54px 0}
  .navLinks{display:none}
  .navToggle{display:flex}
}

/* =========================
   HERO
========================= */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:98px 0 68px 0;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-5%;
  background-image:url("/assets/img/runners.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(1px) saturate(1.02);
  opacity:0.32;
  transform:scale(1.04);
  z-index:0;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(251,252,255,0.35) 0%,
      rgba(251,252,255,0.55) 60%,
      rgba(251,252,255,0.70) 100%
    );
  z-index:1;
}

.hero .container{
  position:relative;
  z-index:2;
}

.heroWrap{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:26px;
  align-items:center;
}

@media (max-width:980px){
  .hero{padding:78px 0 52px 0}
  .heroWrap{grid-template-columns:1fr}
}

/* =========================
   HERO PANEL
========================= */
.heroPanel{
  background:
    radial-gradient(220px 220px at 85% 0%, rgba(255,122,0,0.18), rgba(255,122,0,0) 60%),
    radial-gradient(260px 260px at 100% 35%, rgba(37,209,196,0.16), rgba(37,209,196,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.74));
  border:1px solid var(--line);
  border-radius:var(--rLG);
  padding:22px;
  box-shadow:var(--shadow2);
  position:relative;
  overflow:hidden;
  transition:transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.heroPanel:hover{
  box-shadow:var(--shadow3);
  transform:translateY(-1px);
}

/* =========================
   STATS
========================= */
.statGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}

@media (max-width:560px){
  .statGrid{grid-template-columns:1fr}
}

.stat{
  padding:14px;
  border-radius:18px;
  background:rgba(15,23,42,0.03);
  border:1px solid rgba(15,23,42,0.08);
  position:relative;
  overflow:hidden;
}

.stat::after{
  content:"";
  position:absolute;
  left:-60px;
  top:-80px;
  width:160px;
  height:160px;
  border-radius:999px;
  background:radial-gradient(circle at 40% 40%, rgba(255,212,0,0.22), rgba(255,212,0,0) 62%);
  opacity:0.8;
  pointer-events:none;
}

.statStrong{
  display:block;
  font-weight:950;
  color:var(--ink);
  letter-spacing:-0.01em;
}

.statSmall{
  display:block;
  margin-top:6px;
  color:rgba(15,23,42,0.70);
  font-size:13px;
  line-height:1.55;
}

/* =========================
   TILES
========================= */
.tiles{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:22px;
}

@media (max-width:980px){
  .tiles{grid-template-columns:1fr}
}

.tile{
  padding:18px;
  border-radius:var(--rLG);
  background:
    radial-gradient(180px 180px at 15% 0%, rgba(255,212,0,0.16), rgba(255,212,0,0) 65%),
    radial-gradient(220px 220px at 95% 15%, rgba(37,209,196,0.14), rgba(37,209,196,0) 65%),
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.70));
  border:1px solid var(--line);
  box-shadow:0 14px 35px rgba(2,6,23,0.06);
  transition:transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.tile:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 55px rgba(2,6,23,0.10);
}

.tileText{
  margin-top:10px;
  color:rgba(15,23,42,0.74);
  font-size:14px;
  line-height:1.65;
}

/* =========================
   TABLES
========================= */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:var(--rLG);
  overflow:hidden;
  border:1px solid rgba(15,23,42,0.10);
  background:rgba(255,255,255,0.88);
  box-shadow:0 14px 35px rgba(2,6,23,0.06);
}

.table th,
.table td{
  text-align:left;
  padding:14px;
  border-bottom:1px solid rgba(15,23,42,0.08);
  vertical-align:top;
}

.table th{
  font-size:12px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:rgba(15,23,42,0.65);
  background:rgba(15,23,42,0.03);
}

.table tr:last-child td{border-bottom:0}

@media (max-width:560px){
  .table{display:block;overflow-x:auto;white-space:nowrap}
}

/* =========================
   ALERTS AND CALLOUTS
========================= */
.alert{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,0.10);
  background:rgba(255,255,255,0.88);
  color:rgba(15,23,42,0.78);
  box-shadow:0 14px 35px rgba(2,6,23,0.06);
}

.alertInfo{
  border-color:rgba(59,130,246,0.22);
  background:linear-gradient(180deg, rgba(59,130,246,0.10), rgba(255,255,255,0.76));
}

.alertGood{
  border-color:rgba(34,197,94,0.22);
  background:linear-gradient(180deg, rgba(34,197,94,0.10), rgba(255,255,255,0.76));
}

.alertWarm{
  border-color:rgba(245,158,11,0.22);
  background:linear-gradient(180deg, rgba(245,158,11,0.10), rgba(255,255,255,0.76));
}

.calloutRow{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:14px;
}

@media (max-width:980px){
  .calloutRow{grid-template-columns:1fr}
}

/* =========================
   FOOTER
========================= */
.footer{
  padding:72px 0;
  border-top:1px solid var(--line);
  background:
    radial-gradient(700px 380px at 20% 0%, rgba(255,122,0,0.10), rgba(255,122,0,0) 62%),
    radial-gradient(700px 380px at 90% 0%, rgba(37,209,196,0.10), rgba(37,209,196,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.46));
}

.footerGrid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:24px;
}

@media (max-width:980px){
  .footerGrid{grid-template-columns:1fr}
}

/* =========================
   REDUCED MOTION
========================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.card,.tile,.heroPanel,.navLinks a,.mobileLink{
    transition:none !important;
    transform:none !important;
  }
}

/* =========================
   PRINT
========================= */
@media print{
  body{background:#ffffff;color:#111111}
  .header,.btn,.navToggle,.mobileMenu{display:none !important}
  .card,.heroPanel,.tile{box-shadow:none;border:1px solid #dddddd;background:#ffffff}
}