/* ADKOM Games — global shell styles for the self-hosted site.
   The per-page content in pages/*.html is self-contained and scoped under .adk;
   this file only styles the chrome around it (body, header/nav, footer) and
   replaces what custom-css/site.css used to force on top of Squarespace. */

:root{
  --bg:#171b24; --panel:#1f2430; --panel2:#252b3a; --line:#323a4d;
  --ink:#d6dae3; --dim:#8b93a7; --kw:#569cd6; --str:#ce9178; --com:#6a9955;
  --mono:'Cascadia Code',Consolas,'SF Mono',Menlo,monospace;
  --sans:'Segoe UI',system-ui,-apple-system,sans-serif;
  --content:1080px;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.6;
  -webkit-text-size-adjust:100%;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:var(--kw); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,label:focus-visible{outline:2px solid var(--kw); outline-offset:2px}
img{max-width:100%; height:auto}

.wrap{width:100%; max-width:var(--content); margin:0 auto; padding:0 clamp(12px,3vw,24px)}

.skip{position:absolute; left:-9999px; top:0; background:var(--panel); color:var(--ink);
  padding:10px 16px; border:1px solid var(--line); border-radius:0 0 6px 0; z-index:10}
.skip:focus{left:0}

/* ---- header / nav ---- */
.site-header{background:var(--bg); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5}
.site-header .wrap{display:flex; align-items:center; gap:28px; min-height:60px; flex-wrap:wrap}
.logo{font-family:var(--mono); font-weight:700; font-size:1.05rem; color:var(--ink); letter-spacing:.01em}
.logo:hover{text-decoration:none}
.logo span{color:var(--kw)}
.site-nav{display:flex; gap:clamp(14px,2.4vw,24px); margin-left:auto; font-size:.92rem; flex-wrap:wrap}
.site-nav a{color:var(--dim); font-family:var(--mono); font-size:.85rem; padding:4px 0}
.site-nav a:hover{color:var(--ink); text-decoration:none}
.site-nav a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--kw)}

/* hamburger — only used below the breakpoint */
.navtoggle-input{display:none}
.navtoggle{display:none; margin-left:auto; cursor:pointer; padding:8px; gap:5px; flex-direction:column}
.navtoggle span{display:block; width:22px; height:2px; background:var(--ink)}

@media (max-width:640px){
  .navtoggle{display:flex}
  .site-nav{display:none; width:100%; flex-direction:column; gap:0; margin:0 0 8px}
  .site-nav a{padding:10px 2px; border-top:1px solid var(--line); font-size:.95rem}
  .navtoggle-input:checked ~ .site-nav{display:flex}
}

/* ---- main ---- */
/* .wrap sets the horizontal padding; main only adds the vertical rhythm.
   (Specificity: main.wrap means the .wrap padding shorthand would otherwise
   zero out any vertical padding declared on the bare `main` selector.) */
main.wrap{flex:1 0 auto; padding-top:clamp(20px,3.5vw,40px); padding-bottom:clamp(28px,4vw,52px)}
main > .adk{margin:0 auto}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--line); background:var(--bg); color:var(--dim); padding:36px 0 44px; overflow-x:hidden}
.site-footer h2{font-family:var(--mono); font-size:clamp(1.3rem,4.5vw,2.6rem); color:var(--dim);
  margin:0 0 18px; letter-spacing:.06em; white-space:nowrap}
.site-footer .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px}
.site-footer h4{font-family:var(--mono); font-size:clamp(.85rem,2.2vw,1.1rem); color:var(--ink);
  margin:0 0 4px; letter-spacing:.1em; white-space:nowrap}
.site-footer p{margin:0; font-size:clamp(.7rem,1.4vw,.95rem); white-space:nowrap}
.site-footer p a{color:var(--kw); white-space:nowrap}
.site-footer .legal{margin-top:24px; color:var(--dim); opacity:.8; white-space:normal}

/* ---- 404 ---- */
.notfound{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:48px clamp(16px,4vw,48px); text-align:left}
.notfound .eyebrow{font-family:var(--mono); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--com)}
.notfound h1{font-size:clamp(1.6rem,3.5vw,2.2rem); margin:.2em 0}
.notfound p{color:var(--dim); max-width:70ch}
.notfound .btn{font-family:var(--mono); font-size:.9rem; padding:10px 20px; border-radius:6px;
  border:1px solid var(--line); color:var(--ink); background:var(--panel2); display:inline-block; margin-top:18px}
.notfound .btn:hover{text-decoration:none; border-color:var(--kw)}