/*
Theme Name: CCX Starter Theme
Theme URI: https://example.com/
Author: You
Author URI: https://example.com/
Description: Minimal starter theme with templates for home, taxonomy, single, search, page-series and 404. Includes a reusable post card template part.
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ccx
Tags: custom-menu, featured-images, translation-ready
*/

:root{
  --ccx-bg:#0b0b0d;
  --ccx-surface:#111116;
  --ccx-border:#242432;
  --ccx-text:#e9e9ef;
  --ccx-muted:#a7a7b4;
  --ccx-link:#7ab7ff;
  --ccx-max:1400px;
  --ccx-radius:14px;
  --ccx-gap:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--ccx-bg);
  color:var(--ccx-text);
  line-height:1.5;
}

a{ color:var(--ccx-link); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width: min(100%, var(--ccx-max));
  margin-inline:auto;
  padding: 18px 14px;
}

.site-header{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  border-bottom: 1px solid var(--ccx-border);
}
.header-row{
  display:flex;
  gap: var(--ccx-gap);
  align-items:center;
  justify-content:space-between;
}
.brand a{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--ccx-text);
  font-weight:700;
}
.brand img{ height:34px; width:auto; border-radius:8px; }
.nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.nav a{ color:var(--ccx-text); opacity:.9; }
.nav a:hover{ opacity:1; }

.search-form{
  display:flex;
  gap:10px;
  align-items:center;
}
.search-form input[type="search"]{
  width: min(320px, 56vw);
  background: var(--ccx-surface);
  border:1px solid var(--ccx-border);
  color:var(--ccx-text);
  padding:10px 12px;
  border-radius: 999px;
  outline:none;
}
.search-form button{
  background: var(--ccx-surface);
  border:1px solid var(--ccx-border);
  color:var(--ccx-text);
  padding:10px 12px;
  border-radius: 999px;
  cursor:pointer;
}
.search-form button:hover{ filter:brightness(1.06); }

.main-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--ccx-gap);
}

.cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ccx-gap);
}

@media (max-width: 1100px){ .cards{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px){ .cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .cards{ grid-template-columns: 1fr; } }

.card{
  background: var(--ccx-surface);
  border: 1px solid var(--ccx-border);
  border-radius: var(--ccx-radius);
  overflow:hidden;
  min-height: 100%;
  display:flex;
  flex-direction:column;
}
.card-thumb{
  position:relative;
  aspect-ratio: 5/7;
  background: #0f0f14;
}
.card-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card-body{
  padding: 12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.card-title{
  margin:0;
  font-size: 15px;
  line-height:1.3;
}
.card-title a{ color:var(--ccx-text); }
.meta{
  font-size: 12px;
  color: var(--ccx-muted);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pill-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  border:1px solid var(--ccx-border);
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
  color:var(--ccx-muted);
  background: rgba(255,255,255,0.02);
}

.section{
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--ccx-border);
  border-radius: var(--ccx-radius);
  padding: 14px;
}
.section h1,.section h2,.section h3{ margin: 0 0 10px; }
.section p{ margin: 0 0 10px; }

.single-title{
  margin: 0 0 8px;
  font-size: 26px;
  line-height:1.2;
}
.single-content img{ max-width:100%; height:auto; }
.single-tax{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 12px;
}
.single-tax .label{
  color: var(--ccx-muted);
  font-size: 12px;
  margin-right: 6px;
}

.pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin: 16px 0 4px;
}
.pagination a, .pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 36px;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid var(--ccx-border);
  background: var(--ccx-surface);
  color: var(--ccx-text);
  font-size: 13px;
}
.pagination .current{
  filter: brightness(1.12);
}

.site-footer{
  margin-top: 28px;
  border-top: 1px solid var(--ccx-border);
  color: var(--ccx-muted);
}

.term-index{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.term-index a{
  padding: 6px 10px;
  border: 1px solid var(--ccx-border);
  border-radius: 999px;
  background: var(--ccx-surface);
  color: var(--ccx-text);
  font-size: 13px;
}

.term-groups{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ccx-gap);
}
@media (max-width: 920px){ .term-groups{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .term-groups{ grid-template-columns: 1fr; } }
.term-group h2{
  font-size: 16px;
  margin-bottom: 8px;
}
.term-group ul{ margin:0; padding-left: 18px; }
.term-group li{ margin: 6px 0; }