/* ==========================================================================
   ARKANA SPORTS — GLOBAL STYLESHEET
   Industrial manufacturing design system.
   Design tokens live here as CSS variables — change once, cascade everywhere.
   ========================================================================== */

:root{
  /* Colors */
  --primary:#A63D2E;        /* oxide rust — industrial accent, not neon */
  --hover:#C24A37;
  --bg-dark:#201E1A;        /* graphite, not pure black */
  --card-dark:#2A2721;
  --border:#3C382F;
  --bg-light:#F3EFE6;       /* warm bone */
  --card-light:#EAE4D6;
  --border-light:#DCD4C2;
  --text:#F4F1E9;
  --text-secondary:#B6AC9A;
  --text-dark:#201E1A;
  --text-dark-secondary:#5C5648;
  --steel:#5B6663;          /* secondary structural tone */

  /* Layout */
  --container-width:1320px;
  --grid-gap:30px;
  --card-radius:6px;
  --section-padding:80px;
  --section-padding-tablet:60px;
  --section-padding-mobile:44px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-dark);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
ul{list-style:none;}

h1,h2,h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:0.01em;text-transform:uppercase;}

.container{
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Section base ---------- */
.section{
  position:relative;
  padding:var(--section-padding) 0;
  overflow:hidden;
}
.section--dark{background:var(--bg-dark);color:var(--text);}
.section--light{background:var(--bg-light);color:var(--text-dark);}
.section--light .section-desc{color:var(--text-dark-secondary);}

.section-label{
  font-size:13px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:18px;
  font-family:'Inter',sans-serif;
}
.section-heading{
  font-size:56px;
  line-height:1.08;
  margin-bottom:24px;
}
.section--dark .section-heading{color:var(--text);}
.section--light .section-heading{color:var(--text-dark);}

.section-desc{
  font-size:18px;
  font-weight:400;
  line-height:1.8;
  color:var(--text-secondary);
  max-width:640px;
}

@media(max-width:1024px){
  .section{padding:var(--section-padding-tablet) 0;}
  .section-heading{font-size:44px;}
}
@media(max-width:767px){
  .section{padding:var(--section-padding-mobile) 0;}
  .section-heading{font-size:clamp(30px,9vw,38px);}
  .section-desc{font-size:16px;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.02em;
  border-radius:4px;
  border:none;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-primary{
  background:var(--primary);
  color:#fff;
  padding:16px 32px;
}
.btn-primary:hover{background:var(--hover);}
.btn-secondary{
  background:transparent;
  color:#fff;
  border:2px solid var(--steel);
  padding:14px 30px;
}
.btn-secondary:hover{border-color:var(--primary);}
.section--light .btn-secondary{color:var(--text-dark);border-color:var(--border-light);}
.section--light .btn-secondary:hover{border-color:var(--primary);}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:rgba(32,30,26,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px;
}
.site-logo{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:24px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#fff;
}
.site-logo span{color:var(--primary);}
.site-nav ul{display:flex;gap:36px;}
.site-nav a{
  font-size:14px;
  font-weight:500;
  color:var(--text-secondary);
  transition:color .25s ease;
}
.site-nav a:hover{color:#fff;}
.nav-cta{display:flex;align-items:center;}
.nav-cta .btn{padding:12px 24px;font-size:14px;}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;}
.nav-toggle span{width:24px;height:2px;background:#fff;display:block;}

@media(max-width:900px){
  .site-nav{position:fixed;top:84px;left:0;right:0;background:var(--bg-dark);border-bottom:1px solid var(--border);flex-direction:column;padding:20px 24px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;}
  .site-nav.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
  .site-nav ul{flex-direction:column;gap:18px;}
  .nav-toggle{display:flex;}
}

/* ---------- Breadcrumb (category pages) ---------- */
.breadcrumb-nav{background:var(--bg-light);padding:110px 0 16px;}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--text-dark-secondary);}
.breadcrumb li:not(:last-child)::after{content:'/';margin-left:8px;color:var(--border-light);}
.breadcrumb a{color:var(--text-dark-secondary);transition:color .2s ease;}
.breadcrumb a:hover{color:var(--primary);}
.breadcrumb li:last-child{color:var(--text-dark);font-weight:600;}

/* ---------- Placeholder note (dev use only) ---------- */
.section-placeholder-note{
  display:inline-block;
  margin-top:24px;
  padding:8px 16px;
  border:1px dashed var(--border);
  border-radius:8px;
  font-size:13px;
  color:var(--text-secondary);
}

/* ---------- Image placeholder (until real photography is supplied) ---------- */
.img-placeholder{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:repeating-linear-gradient(135deg, var(--card-dark), var(--card-dark) 10px, #262319 10px, #262319 20px);
  border:1px solid var(--border);
  color:var(--text-secondary);
  text-align:center;
  min-height:180px;
}
.section--light .img-placeholder{background:repeating-linear-gradient(135deg, var(--card-light), var(--card-light) 10px, #E2DAC6 10px, #E2DAC6 20px);border-color:var(--border-light);color:var(--text-dark-secondary);}
.img-placeholder-label{font-size:12px;font-weight:600;letter-spacing:0.5px;padding:10px 16px;max-width:220px;line-height:1.5;}

/* ---------- Video panel (self-hosted <video>, placeholder until real footage lands) ---------- */
.video-panel{position:relative;}
.video-panel-frame{
  position:relative;
  aspect-ratio:16/10;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--border);
}
.video-panel-frame video{width:100%;height:100%;object-fit:cover;display:block;}
.video-play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;
  background:rgba(166,61,46,.92);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,background .2s ease;
}
.video-play-btn:hover{background:var(--primary);transform:translate(-50%,-50%) scale(1.06);}
.video-play-btn svg{width:24px;height:24px;margin-left:3px;}
.video-play-ring{position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(166,61,46,.4);pointer-events:none;}
.video-panel-caption{
  position:absolute;left:20px;bottom:20px;
  background:rgba(32,30,26,0.85);border:1px solid var(--border);border-left:3px solid var(--primary);
  padding:10px 16px;font-size:12px;font-weight:600;letter-spacing:.03em;color:#fff;
}
.video-panel-note{margin-top:14px;font-size:12px;color:var(--text-secondary);}
.section--light .video-panel-note{color:var(--text-dark-secondary);}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--bg-dark);
  border-top:1px solid var(--border);
  padding:70px 0 30px;
}
.footer-bottom{
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--border);
  font-size:13px;
  color:var(--text-secondary);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}