/* ============================================================
   Rustnuts SMC — shared site styles
   Extracted from index.html, shop.html, resources.html and
   coming-soon.html: custom properties, base typography, header/
   nav (incl. mobile hamburger), footer and the base .btn class.
   Page-specific styles (hero, product grid, resource cards, etc.)
   stay in each page's own <style> block.
   ============================================================ */

:root{
  --red:#8C1C24;
  --red-bright:#B92632;
  --red-text:#F2666F; /* AA on ink, steel and footer surfaces; --red-bright stays for fills and borders */
  --bone-mute:#96928a;
  --ink:#111010;
  --bone:#F4F1EA;
  --bone-dim:#d8d3c7;
  --steel:#2a2a2c;
  --stencil:"Saira Stencil One","Arial Black","Helvetica Neue",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  font-family:"Helvetica Neue",Arial,sans-serif;
  color:var(--bone);
  line-height:1.6;
}
.display{
  font-family:var(--stencil);
  font-weight:400;
  letter-spacing:0.01em;
  text-transform:uppercase;
  line-height:0.96;
}

/* texture overlay */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.04;
  background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 6px);
  mix-blend-mode:overlay;
}

header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:rgba(17,16,16,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
header .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
header .brand img{height:42px;width:auto;display:block}
header .brand span{
  font-family:var(--stencil);
  font-weight:400;letter-spacing:0.06em;font-size:1.15rem;color:var(--bone);
}
nav a{
  color:var(--bone-dim);text-decoration:none;margin-left:26px;
  font-size:0.82rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:700;
  transition:color .2s;
}
nav a:hover{color:var(--red-text)}
.nav-links{display:none}
@media(min-width:780px){.nav-links{display:block}}

.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:44px;height:44px;background:transparent;
  border:1px solid rgba(255,255,255,0.25);border-radius:4px;cursor:pointer;flex:none;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--bone);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:780px){.nav-toggle{display:none}}

.nav-mobile{
  display:none;position:fixed;top:70px;left:0;right:0;z-index:49;
  background:rgba(17,16,16,0.97);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  flex-direction:column;padding:10px 28px 20px;
}
.nav-mobile.open{display:flex}
.nav-mobile a{
  color:var(--bone-dim);text-decoration:none;padding:14px 0;
  font-size:0.95rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav-mobile a:last-child{border-bottom:none}
.nav-mobile a:hover,.nav-mobile a:focus{color:var(--red-text)}
@media(min-width:780px){.nav-mobile{display:none!important}}

.btn{
  display:inline-block;padding:15px 30px;font-weight:800;
  text-transform:uppercase;letter-spacing:0.08em;font-size:0.85rem;
  text-decoration:none;border-radius:3px;transition:transform .15s, background .2s;
}

footer{
  background:#0c0b0b;padding:40px 28px;text-align:center;
  color:var(--bone-mute);font-size:0.82rem;position:relative;z-index:2;
}
footer .motto{
  font-family:var(--stencil);text-transform:uppercase;letter-spacing:0.12em;
  color:var(--red-text);font-size:1.1rem;margin-bottom:14px;
}
footer strong{color:var(--bone-dim)}
footer a{color:var(--bone-dim);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:var(--red-text)}

/* keyboard focus: one visible ring across every interactive element */
:focus-visible{outline:3px solid var(--bone);outline-offset:3px;border-radius:2px}
::selection{background:var(--red);color:#fff}

/* reduced motion: keep state changes, drop the movement */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .reveal{transform:none!important}
}