/* =========================================================
   CTF page theme (simple / aesthetic) + NAV styling
   Path: assets/css/ctf.css
   Loaded by: layouts/ctf/list.html and layouts/ctf/single.html
   ========================================================= */

/* ---------- choose ONE palette by uncommenting it ---------- */

/* OCEAN (default) */
:root{
  --page-bg: linear-gradient(180deg, #0c1324 0%, #101827 55%, #0c1324 100%);
  --accent:  #4fa8ff;

  --panel-bg: rgba(255,255,255,.03);
  --border:   rgba(255,255,255,.12);
  --muted:    rgba(255,255,255,.70);
  --ring:     rgba(79,168,255,.35);

  --box-max-h: 42vh;

  --nav-link:       color-mix(in srgb, var(--accent) 72%, white);
  --nav-link-hover: color-mix(in srgb, var(--accent) 88%, white);
  --nav-bg-hover:   color-mix(in srgb, var(--accent) 18%, transparent);
}

/* GRAPE */
/*
:root{
  --page-bg: linear-gradient(180deg, #120e1e 0%, #1a1330 55%, #120e1e 100%);
  --accent:  #8b5cf6;
  --panel-bg: rgba(255,255,255,.03);
  --border:   rgba(255,255,255,.12);
  --muted:    rgba(255,255,255,.70);
  --ring:     rgba(139,92,246,.35);
  --box-max-h: 42vh;
  --nav-link:       color-mix(in srgb, var(--accent) 72%, white);
  --nav-link-hover: color-mix(in srgb, var(--accent) 88%, white);
  --nav-bg-hover:   color-mix(in srgb, var(--accent) 18%, transparent);
}
*/

/* EMERALD */
/*
:root{
  --page-bg: linear-gradient(180deg, #0c1a17 0%, #0f2a24 55%, #0c1a17 100%);
  --accent:  #34d399;
  --panel-bg: rgba(255,255,255,.03);
  --border:   rgba(255,255,255,.12);
  --muted:    rgba(255,255,255,.70);
  --ring:     rgba(52,211,153,.35);
  --box-max-h: 42vh;
  --nav-link:       color-mix(in srgb, var(--accent) 72%, white);
  --nav-link-hover: color-mix(in srgb, var(--accent) 88%, white);
  --nav-bg-hover:   color-mix(in srgb, var(--accent) 18%, transparent);
}
*/

/* AMBER */
/*
:root{
  --page-bg: linear-gradient(180deg, #1b1406 0%, #261a07 55%, #1b1406 100%);
  --accent:  #f59e0b;
  --panel-bg: rgba(255,255,255,.03);
  --border:   rgba(255,255,255,.12);
  --muted:    rgba(255,255,255,.70);
  --ring:     rgba(245,158,11,.35);
  --box-max-h: 42vh;
  --nav-link:       color-mix(in srgb, var(--accent) 72%, white);
  --nav-link-hover: color-mix(in srgb, var(--accent) 88%, white);
  --nav-bg-hover:   color-mix(in srgb, var(--accent) 18%, transparent);
}
*/

@media (prefers-color-scheme: light){
  :root{
    --panel-bg: rgba(0,0,0,.03);
    --border:   rgba(0,0,0,.12);
    --muted:    rgba(0,0,0,.62);
    --ring:     color-mix(in srgb, var(--accent) 40%, transparent);
  }
}

/* ---------- global background (these templates only) ---------- */
html, body { background: var(--page-bg) !important; }

/* ===================== NAV (theme-friendly) ===================== */
header.site-header, .header, .navbar, .site-nav{
  position: sticky; top: 0; z-index: 100; backdrop-filter: blur(4px);
}
header.site-header nav, .header nav, .navbar nav, .site-nav nav{
  display: flex; justify-content: center; gap: 2rem; align-items: center;
  padding: .6rem 1rem;
}
header.site-header nav a,
.header nav a,
.navbar nav a,
.site-nav nav a{
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .25rem .45rem; border-radius: .45rem;
  color: var(--nav-link); text-decoration: none; font-weight: 700;
  line-height: 1.2;
}
header.site-header nav a:hover,
header.site-header nav a:focus-visible,
.header nav a:hover,
.header nav a:focus-visible,
.navbar nav a:hover,
.navbar nav a:focus-visible,
.site-nav nav a:hover,
.site-nav nav a:focus-visible{
  background: var(--nav-bg-hover);
  color: var(--nav-link-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
  outline: none;
}

/* ===================== LIST PAGE ( /ctf/ ) ===================== */
.ctf.wrap{ max-width: 1100px; margin: 0 auto; padding: 1.25rem; }
.muted{ color: var(--muted); }

.ctf-hero, .ctf-hero *{ text-align: center; }
.intro, .intro h1, .intro h2, .intro h3{ text-align: center; }
.box-head{ display:flex; justify-content:center; align-items:center; gap:.55rem; text-align:center; }

.ctf-hero{ margin: 0 0 .75rem; }
.ctf-hero h1{ font-size: 2.25rem; line-height: 1.2; margin: 0 0 .15rem; }
.ctf-hero p{ margin: 0; }

.hr{ height:1px; background: var(--border); opacity:.55; max-width:720px; margin:.75rem auto 1rem; border-radius:2px; }

/* panel boxes */
.ctf-box{
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  outline: 2px solid var(--ring);
  outline-offset: -2px;
  padding: .85rem .95rem 1rem;
  margin: 1.4rem 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.box-head h2{ font-size: 1.35rem; margin: 0; }

/* count chip */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.15rem .5rem; font-size:.85rem; border-radius:999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  color: inherit;
}

/* independent scroll per section */
.scroll-box{
  max-height: var(--box-max-h);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  border-radius: .75rem;
}

/* table */
.ctf-table{ width: 100%; border-collapse: collapse; min-width: 520px; }
.ctf-table th, .ctf-table td{
  border: 1px solid var(--border);
  padding: .7rem .8rem; vertical-align: middle;
}
.ctf-table thead th{
  position: sticky; top: 0; z-index: 1;
  background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
  backdrop-filter: blur(2px);
  text-align: left; font-weight: 700;
}
.ctf-table tbody tr:nth-child(odd){ background: color-mix(in srgb, var(--panel-bg) 70%, transparent); }
.ctf-table tbody tr:hover{ background: color-mix(in srgb, var(--accent) 12%, transparent); transition: background .12s ease-out; }

/* clickable rows + accessible focus */
.rowclick{ cursor: pointer; }
.rowclick:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}
.rowlink{ text-decoration: none; font-weight: 700; color: inherit; }
.rowclick td:nth-child(2)::after{ content:" ↗"; opacity:.25; transition:.12s; margin-left:.35rem; }
.rowclick:hover td:nth-child(2)::after,
.rowclick:focus-visible td:nth-child(2)::after{ opacity:.6; }

/* filter input */
.table-tools{ display:flex; justify-content:flex-end; margin:.25rem 0 .5rem; }
.table-tools .filter{
  appearance:none; background: var(--panel-bg); color: inherit;
  border:1px solid var(--border); border-radius:.6rem; padding:.45rem .6rem;
  min-width: 200px;
}
.table-tools .filter:focus{
  outline:2px solid var(--accent); outline-offset:2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* helpers */
.clip{ overflow-wrap: anywhere; word-break: break-word; }
.nowrap{ white-space: nowrap; }

.intro img{ max-width: 100%; height: auto; border-radius: .4rem; }
.content pre, .content code{ overflow: auto; max-width: 100%; }

/* scrollbars (webkit) */
.scroll-box::-webkit-scrollbar{ width: 10px; height: 10px; }
.scroll-box::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 8px; }
.scroll-box::-webkit-scrollbar-thumb:hover{ background: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.scroll-box::-webkit-scrollbar-track{ background: transparent; }

/* responsive */
@media (max-width: 640px){
  :root{ --box-max-h: 52vh; }
  .ctf-table{ min-width: 420px; }
  .ctf-hero h1{ font-size: 1.9rem; }
}

/* ===================== SINGLE WRITE-UP PAGE ( /ctf/<event>/ ) ===================== */
.post.wrap{ max-width: 980px; margin: 0 auto; padding: 0 1rem; }
.post-header{ text-align: center; margin: 1rem 0 .5rem; }
.post-header h1{ margin: .25rem 0 0; }

.toc{
  max-width: 840px; margin: .5rem auto 1rem; padding: .75rem 1rem;
  border: 1px solid var(--border); border-radius: .8rem;
  background: rgba(255,255,255,.03); font-size: .95rem;
}
.toc ul{ margin: 0; padding-left: 1.1rem; }
.toc a{ color: var(--accent); text-decoration: none; }
.toc a:hover{ text-decoration: underline; }

/* remove unwanted gap after ToC */
.post .content{ margin-top: 0 !important; padding-top: 0 !important; }
.post .content > :first-child{ margin-top: 0 !important; }
.toc + .content h2:first-child{ margin-top: .5rem !important; }

/* rhythm + anchor offset */
.post .content h1,
.post .content h2,
.post .content h3{ margin-top: 1.2rem; margin-bottom: .5rem; }
.post .content *{ scroll-margin-top: 84px; }

/* code blocks */
.post .content pre{
  background: #0d1117; border: 1px solid var(--border);
  padding: .8rem 1rem; border-radius: 8px; overflow: auto;
}
.post .content code{
  background: rgba(255,255,255,.08); padding: 0 .25rem; border-radius: 4px;
}

/* footer back link */
.post-footer{ margin: 2rem 0 1rem; text-align: center; }
.post-footer a{ color: var(--accent); font-weight: 600; text-decoration: none; }
.post-footer a:hover{ color:#fff; text-decoration: underline; }

/* ====== Single write-up page polish ====== */
.post.wrap{
  max-width: 900px;
  margin: 0 auto;
  padding: 1.25rem;
}
.post-header{
  text-align: center;
  margin-bottom: 1.1rem;
}
.post-header .muted{ margin:.2rem 0; }

.content{
  line-height: 1.75;
  font-size: 1.05rem;
}

/* Headings & spacing */
.content h2{ margin-top: 2.1rem; }
.content h2:first-child{ margin-top: 0; }
.content h3{ margin-top: 1.4rem; }

/* Lists a bit tighter */
.content ul{ margin:.4rem 0 .9rem 1.4rem; }
.content li{ margin:.15rem 0; }

/* If the first section is "Event meta", make the following list look like a card */
.content h2:first-of-type + ul{
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: .8rem;
  padding: .75rem 1rem;
}

/* Subtle heading permalink (works with your heading render partial) */
.content h2 .hanchor,
.content h3 .hanchor{
  opacity: 0;
  margin-left: .4rem;
  text-decoration: none;
}
.content h2:hover .hanchor,
.content h3:hover .hanchor{ opacity: .6; }

/* Tag chips */
.tag{
  display:inline-block;
  padding:.12rem .5rem;
  border-radius:.6rem;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid var(--border);
  font-size:.85rem;
  line-height:1.2;
  margin-right:.3rem;
  white-space: nowrap;
}

/* ============ Single box (machine) hero ============ */
.machine .back-top { margin: .5rem 0 0; }

.machine .machine-header{
  text-align: center;
  margin: .6rem 0 1rem;
}

.machine .machine-header h1{
  margin: .1rem 0 0;
  letter-spacing: .2px;
}

.meta-row{
  display:flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  justify-content: center;
  align-items: center;
  margin: .6rem 0 .9rem;
}

/* Pills / chips */
.pill{
  display:inline-flex;
  align-items:center;
  padding:.18rem .6rem;
  border-radius:.7rem;
  font-weight:600;
  font-size:.9rem;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: inherit;
}

.pill.link{
  text-decoration:none;
  background: transparent;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.pill.link:hover{
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Difficulty colors */
.pill.diff-easy   { background: rgba(34,197,94,.15);  border-color: rgba(34,197,94,.35);  }
.pill.diff-medium { background: rgba(245,158,11,.15);  border-color: rgba(245,158,11,.35); }
.pill.diff-hard   { background: rgba(239,68,68,.15);   border-color: rgba(239,68,68,.35);  }
.pill.os          { background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.35);}

/* Tag chips (reused on platform list) */
.tag{
  display:inline-block;
  padding:.12rem .5rem;
  border-radius:.6rem;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid var(--border);
  font-size:.85rem;
  line-height:1.2;
  margin-right:.3rem;
  white-space: nowrap;
}

/* TL;DR card */
.tldr{
  max-width: 760px;
  margin: .6rem auto 0;
  text-align: left;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: .5rem;
  padding: .75rem 1rem;
}

/* Content rhythm */
.machine .content{
  margin-top: .6rem;
  line-height: 1.75;
  font-size: 1.05rem;
}

.machine .content h2{ margin-top: 2rem; }
.machine .content h3{ margin-top: 1.25rem; }

@media (max-width: 640px){
  .tldr{ margin: .75rem .5rem 0; }
  .machine .content{ padding: 0 .5rem; }
}