/* ===================================================================
   TCKSOFT.CO.UK — Global Design System
   Site-wide stylesheet. Reuse across all pages (news, downloads,
   forum, gallery, high scores) for a consistent look & feel.
   Import this single file: <link rel="stylesheet" href="/css/style.css">
   =================================================================== */

/* ---------- Fonts ---------- */
/* Add this in <head> before this stylesheet:
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
*/

/* ---------- Design Tokens ---------- */
:root{
  /* colors */
  --navy:#0d1b2a;
  --navy2:#152a41;
  --accent:#ff6b3d;
  --accent2:#00c9a7;
  --paper:#f7f8fb;
  --ink:#1b2430;
  --muted:#6b7688;
  --border:#e4e7ee;
  --white:#ffffff;

  /* radius / shadow */
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(20,30,50,.04);
  --shadow-md:0 10px 26px rgba(20,30,50,.09);
  --shadow-header:0 2px 14px rgba(0,0,0,.15);

  /* type */
  --font-heading:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;

  /* layout */
  --max-width:1180px;
  --gap:20px;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.brand,.hero h1{font-family:var(--font-heading); margin:0 0 .5em; color:var(--navy2);}
p{margin:0 0 1em;}
a{color:var(--navy2); text-decoration:none; transition:color .2s;}
a:hover{color:var(--accent);}
img{max-width:100%; display:inline-block;}
ul,ol{margin:0; padding:0;}
button, input, textarea, select{font-family:inherit;}

/* ---------- Layout helpers ---------- */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
}
.layout{
  max-width:var(--max-width); margin:0 auto; padding:36px 20px 60px;
  display:grid; grid-template-columns:230px 1fr 260px; gap:26px;
}
.layout.layout-2col{grid-template-columns:1fr 260px;}
.layout.layout-solo{grid-template-columns:1fr; max-width:860px;}
@media (max-width:1024px){
  .layout, .layout.layout-2col{grid-template-columns:1fr;}
}
.grid{display:grid; gap:var(--gap);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:700px){
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
}

/* ---------- Utility bar ---------- */
.utility-bar{
  background:var(--navy);
  color:#cfd8e3;
  font-size:.8rem;
  padding:6px 0;
}
.utility-bar .wrap{
  max-width:var(--max-width); margin:0 auto; padding:0 20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.utility-bar a{color:#cfd8e3;}
.utility-bar a:hover{color:var(--accent2);}

/* ---------- Header / Navigation ---------- */
header.site-header{
  background:var(--navy2);
  position:sticky; top:0; z-index:50;
  box-shadow:var(--shadow-header);
}
.nav-wrap{
  max-width:var(--max-width); margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.brand{
  color:#fff; font-weight:700; font-size:1.35rem; letter-spacing:.5px;
  display:flex; align-items:center; gap:8px;
}
.brand::before{
  content:"";
  width:12px; height:12px; border-radius:3px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:inline-block;
}
.menuBar{display:flex; gap:6px; flex-wrap:wrap;}
.menuButton{
  color:#dfe6f0; font-weight:500; font-size:.92rem;
  padding:9px 14px; border-radius:10px; transition:.2s;
}
.menuButton:hover{background:rgba(255,255,255,.08); color:#fff;}
.menuButton.active{background:rgba(255,255,255,.12); color:#fff;}

/* mobile nav toggle (optional, hook up with JS) */
.menuToggle{display:none; background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer;}
@media (max-width:768px){
  .menuToggle{display:block;}
  .menuBar{display:none; width:100%; flex-direction:column;}
  .menuBar.open{display:flex;}
}

/* ---------- Hero ---------- */
.hero{
  background:radial-gradient(circle at 20% 20%, rgba(255,107,61,.18), transparent 45%),
             radial-gradient(circle at 80% 0%, rgba(0,201,167,.18), transparent 45%),
             var(--navy);
  color:#fff; padding:56px 20px 64px; text-align:center;
}
.hero h1{color:#fff; font-size:2.4rem; margin:0 0 8px;}
.hero p{color:#b9c3d3; max-width:560px; margin:0 auto; font-size:1.02rem;}
.hero .divider{
  width:56px; height:4px; margin:18px auto; border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}
.hero.hero-sm{padding:36px 20px 44px;}
.hero.hero-sm h1{font-size:1.8rem;}

/* ---------- Panels (sidebar boxes, generic containers) ---------- */
.panel{
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px;
  box-shadow:var(--shadow-sm);
}
.panel + .panel{margin-top:20px;}
.panel h3{
  margin:0 0 12px; font-size:.95rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--navy2);
  border-bottom:2px solid var(--accent2); padding-bottom:8px;
}
.panel-flush{padding:0; overflow:hidden;}
.panel-flush .panel-body{padding:18px;}

/* ---------- Stat lines / small text ---------- */
.stat-line{font-size:.88rem; color:var(--muted); margin-bottom:6px;}
.stat-line b{color:var(--ink);}
.smalltext{font-size:.85rem; color:var(--muted);}
.donate-note{font-size:.88rem; color:var(--muted); text-align:center;}

/* ---------- Gallery thumbnails ---------- */
.gallery-thumb{text-align:center;}
.gallery-thumb img{border-radius:10px; margin-bottom:8px; border:1px solid var(--border);}
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px;}
.gallery-grid .gallery-thumb img{width:100%; aspect-ratio:1/1; object-fit:cover;}

/* ---------- Callout / notice box ---------- */
.callout{
  background:linear-gradient(120deg,#fff4ee,#eafbf6);
  border:1px solid var(--border); border-radius:14px;
  padding:16px 20px; margin-bottom:26px; font-size:.98rem; color:#3a4353;
}
.callout strong{color:var(--accent);}
.callout.callout-info{background:linear-gradient(120deg,#eef6ff,#eafbf6);}
.callout.callout-warn{background:linear-gradient(120deg,#fff7e6,#fff0ee);}

/* ---------- Content / news / post cards ---------- */
.site-tag{font-weight:600; color:var(--navy2); font-size:1.05rem; margin-bottom:20px;}

.card, .news-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px 22px; margin-bottom:20px;
  transition:.2s box-shadow, .2s transform;
  position:relative; overflow:hidden;
}
.card:hover, .news-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card::before, .news-card::before{
  content:""; position:absolute; top:0; left:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
}
.news-head, .card-head{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.news-head img, .card-head img{width:28px; height:28px; border-radius:8px;}
.news-head a, .card-head a{font-size:1.12rem; font-weight:700; color:var(--navy2); font-family:var(--font-heading);}
.news-body, .card-body{color:#454e5c; font-size:.97rem;}
.news-meta, .card-meta{
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--border);
  display:flex; justify-content:flex-end; align-items:center; gap:14px;
  font-size:.82rem; color:var(--muted); flex-wrap:wrap;
}
.news-meta a, .card-meta a{display:inline-flex; align-items:center; gap:5px; color:var(--muted);}
.news-meta a:hover, .card-meta a:hover{color:var(--accent);}
.news-meta img, .card-meta img{width:15px; height:15px; vertical-align:middle;}

/* download / high-score item variant */
.item-card{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 18px; margin-bottom:12px; transition:.2s box-shadow, .2s transform;
}
.item-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.item-card .item-info{display:flex; align-items:center; gap:12px;}
.item-card .item-info img{width:32px; height:32px; border-radius:8px;}
.item-card .item-title{font-weight:700; color:var(--navy2); font-family:var(--font-heading);}
.item-card .item-sub{font-size:.85rem; color:var(--muted);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:10px; font-weight:600; font-size:.92rem;
  border:1px solid transparent; cursor:pointer; transition:.2s;
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:#e85a2c; color:#fff;}
.btn-secondary{background:var(--navy2); color:#fff;}
.btn-secondary:hover{background:var(--navy); color:#fff;}
.btn-outline{background:transparent; border-color:var(--border); color:var(--navy2);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}
.btn-small{padding:6px 14px; font-size:.82rem;}

/* ---------- Forms ---------- */
.form-group{margin-bottom:14px;}
.form-group label{display:block; font-size:.85rem; font-weight:600; color:var(--navy2); margin-bottom:6px;}
input[type=text], input[type=email], input[type=password], input[type=search], textarea, select{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:#fbfcfe; font-size:.92rem; color:var(--ink); transition:.2s;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--accent2); box-shadow:0 0 0 3px rgba(0,201,167,.15);
}
input[type=checkbox], input[type=radio]{accent-color:var(--accent);}

/* ---------- Poll ---------- */
.poll-question{font-weight:700; color:var(--navy2); text-align:center; margin-bottom:14px;}
.poll-option{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border:1px solid var(--border); border-radius:8px;
  margin-bottom:8px; font-size:.9rem; background:#fbfcfe;
}
.poll-option:hover{border-color:var(--accent2);}
.poll-meta{text-align:center; font-size:.82rem; color:var(--muted); margin-top:10px;}

/* ---------- RSS ---------- */
.rss-row{display:flex; justify-content:center; gap:10px; margin-top:10px;}
.rss-row img{width:32px;}

/* ---------- Category grid ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px;}
@media (max-width:700px){.cat-grid{grid-template-columns:1fr;}}
.cat-box{border:1px solid var(--border); border-radius:var(--radius); padding:14px; background:#fbfcfe;}
.cat-box .cat-title{
  display:flex; align-items:center; gap:8px; font-weight:700; color:var(--navy2);
  padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--border);
}
.cat-box .cat-title img{width:22px; height:22px;}
.cat-box ul{list-style:none;}
.cat-box ul li{padding:4px 0; font-size:.92rem;}
.cat-box ul li::before{content:"› "; color:var(--accent); font-weight:700;}

/* ---------- Tables (forum, high scores, downloads listings) ---------- */
table.data-table{
  width:100%; border-collapse:collapse; background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
table.data-table th, table.data-table td{
  padding:12px 14px; text-align:left; font-size:.9rem; border-bottom:1px solid var(--border);
}
table.data-table th{
  background:var(--navy2); color:#fff; font-family:var(--font-heading); font-weight:600;
  text-transform:uppercase; font-size:.78rem; letter-spacing:.04em;
}
table.data-table tr:last-child td{border-bottom:none;}
table.data-table tr:hover td{background:#fbfcfe;}
table.data-table tr:nth-child(even) td{background:#fafbfd;}

/* rank badges, e.g. high scores */
.rank-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; font-weight:700; font-size:.8rem;
  background:var(--paper); color:var(--navy2); border:1px solid var(--border);
}
.rank-badge.rank-1{background:linear-gradient(135deg,#ffd76a,#ffb020); color:#5a3d00; border:none;}
.rank-badge.rank-2{background:linear-gradient(135deg,#d9dee6,#b7bfca); color:#333; border:none;}
.rank-badge.rank-3{background:linear-gradient(135deg,#f0b088,#d98c5f); color:#3a2416; border:none;}

/* ---------- Pagination ---------- */
.pagination{display:flex; justify-content:center; gap:8px; margin:30px 0; flex-wrap:wrap;}
.pagination a, .pagination span{
  padding:8px 14px; border-radius:8px; font-size:.88rem; border:1px solid var(--border);
  background:var(--white); color:var(--navy2);
}
.pagination span.nextprev_current{
  background:var(--navy2); color:#fff; border-color:var(--navy2); text-decoration:none;
}
.pagination a:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- Badges / tags ---------- */
.badge{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
  font-size:.75rem; font-weight:600; background:var(--paper); color:var(--navy2); border:1px solid var(--border);
}
.badge-accent{background:rgba(255,107,61,.12); color:var(--accent); border-color:transparent;}
.badge-teal{background:rgba(0,201,167,.12); color:#02907a; border-color:transparent;}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{font-size:.85rem; color:var(--muted); margin-bottom:18px;}
.breadcrumbs a{color:var(--muted);}
.breadcrumbs a:hover{color:var(--accent);}
.breadcrumbs .sep{margin:0 6px; color:var(--border);}

/* ---------- Forum thread list ---------- */
.thread-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.thread-row:last-child{border-bottom:none;}
.thread-row:hover{background:#fbfcfe;}
.thread-title{font-weight:600; color:var(--navy2); font-family:var(--font-heading);}
.thread-meta{font-size:.82rem; color:var(--muted);}

/* ---------- Footer ---------- */
footer{
  background:var(--navy); color:#aab5c4; text-align:center;
  padding:22px 20px; font-size:.85rem;
}
footer a{color:#dfe6f0;}
footer a:hover{color:var(--accent2);}

.render-time{text-align:center; color:var(--muted); font-size:.75rem; padding:10px;}

/* ---------- Scrollbar polish (optional, non-critical) ---------- */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--paper);}
::-webkit-scrollbar-thumb{background:#c7ccd6; border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}

/* ---------- Print ---------- */
@media print{
  header.site-header, .utility-bar, footer, .pagination, .btn{display:none !important;}
  body{background:#fff;}
  .panel, .card, .news-card{box-shadow:none; border:1px solid #ccc;}
}