/* Tec-Ni-Chat 2026 look. Loaded after main.css on every page (header.php) and on the home page. */
:root{
  --club-text:#eef5f2; --club-muted:#9fb3ab; --club-teal:#20c997; --club-teal-hi:#3ddbaa;
  --club-panel:rgba(10,20,17,.9); --club-line:#2c3d38; --club-red:#e0523f; --club-ink:#04251c;
  --font-heading:'Big Shoulders Stencil',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --color-highlight:var(--club-teal); --color-accent:#8fe6cc; --color-muted:var(--club-muted);
  --color-surface-border:var(--club-line); --radius-lg:10px; --header-height:60px;
}
body{
  font-family:var(--font-body); color:var(--club-text); line-height:1.65;
  background:linear-gradient(rgba(8,9,10,.78),rgba(8,9,10,.86)),url('/images/backgrounds/background01.png') center/cover fixed #0d0f10;
}
::selection{background:var(--club-teal);color:#000}
:focus-visible{outline:2px solid var(--club-teal-hi);outline-offset:3px;border-radius:3px}
html{scrollbar-color:var(--club-teal) #111}
.page-wrap{overflow:visible;overflow-x:clip}
.club-wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}

/* Header */
.club-header{position:sticky;top:0;z-index:20;background:rgba(10,11,12,.94);border-bottom:1px solid var(--club-line)}
.club-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:60px}
.club-brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-heading);font-weight:800;font-size:1.6rem;letter-spacing:.04em;color:var(--club-text);text-decoration:none}
.club-brand:hover{color:var(--club-text)}
.club-icon{width:34px;height:34px;flex:none}
.club-nav ul{list-style:none;display:flex;gap:.25rem;align-items:center;flex-wrap:wrap;margin:0;padding:0}
.club-nav li{margin:0}
.club-nav a{display:block;padding:.7rem .9rem;color:var(--club-text);text-decoration:none;border-radius:6px;font-weight:500}
.club-nav a:hover{background:rgba(255,255,255,.08);color:var(--club-text)}
.club-nav a.pay{border:1px solid var(--club-teal);color:var(--club-teal)}
.club-nav a.join{background:var(--club-teal);color:#111;font-weight:600}
.club-nav a.join:hover{background:var(--club-teal-hi);color:#111}
.club-nav details{position:relative}
.club-nav summary{list-style:none;cursor:pointer;padding:.7rem .9rem;color:var(--club-text);font-weight:500;border-radius:6px}
.club-nav summary::-webkit-details-marker{display:none}
.club-nav summary:hover{background:rgba(255,255,255,.08)}
.club-nav details ul{position:absolute;right:0;top:100%;min-width:220px;background:#0a0b0c;border:1px solid var(--club-line);border-radius:8px;padding:.4rem;display:block;z-index:30}
.club-nav details ul a{padding:.65rem .8rem}
@media(max-width:820px){
  .club-bar{flex-wrap:wrap;padding:.4rem 1.25rem}
  .club-nav ul{gap:0}
  .club-nav details ul{position:static;border:0;padding:0 0 0 .5rem;background:transparent}
}

/* Inner pages: panels, headings, links, buttons */
.content-container,.content-box,.div_main,.fb_box,.page-hero{background:var(--club-panel);border-color:var(--club-line);border-radius:10px}
h1,h2,h3{font-family:var(--font-heading);text-wrap:balance}
h1{font-weight:800;letter-spacing:.02em}
h2{font-weight:800;letter-spacing:.02em}
h3{font-weight:600;letter-spacing:.02em}
.div_main a,.content-box a{text-underline-offset:.2em;text-decoration-thickness:1px}
.div_main a:hover,.content-box a:hover{text-decoration:underline}
button,.btn,input[type="submit"]{background:var(--club-teal);color:var(--club-ink);font-weight:600;min-height:44px;transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s}
button:hover,.btn:hover,input[type="submit"]:hover{background:var(--club-teal-hi);color:var(--club-ink);transform:translateY(-1px)}
.nav-flash{animation:none}
@media(prefers-reduced-motion:no-preference){.nav-flash{animation:pulse 2s ease-in-out 3}}