/* ============================================
   XBOX WIRE INSPIRED THEME — for GeneratePress
   ============================================ */

:root {
  --paper:      #EBEBEB;
  --paper-pure: #F5F3EE;
  --ink:        #14150F;
  --ink-2:      #46483E;
  --ink-3:      #86887C;
  --rule:       #C9C9C9;
  --rule-soft:  #D9D9D9;

  --accent:       #008746;
  --accent-light: #32AA60;
  --accent-glow:  rgba(0,135,70,0.22);

  --sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Consolas", "SFMono-Regular", ui-monospace, monospace;
}

/* ---- base ---- */
body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent-light); }
::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.entry-title { font-size: clamp(28px, 3.4vw, 48px); }
.single .entry-title { font-size: clamp(32px, 4.5vw, 64px); }

/* ---- header ---- */
.site-header,
.main-navigation {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}

.main-navigation .main-nav ul li a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.main-navigation .main-nav ul li a:hover { color: var(--accent); }

.site-logo img { height: 32px; }

/* ---- meta / labels (category, date, read time) ---- */
.entry-meta, .entry-meta a,
.cat-links, .cat-links a,
.posted-on, .byline {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cat-links a {
  color: var(--ink);
}

/* ---- pill-style category badges ---- */
.cat-links a {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  margin-right: 6px;
  transition: background .25s, color .25s, border-color .25s;
}

.cat-links a:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ---- buttons everywhere (pill shape, mono, uppercase) ---- */
.button, button, input[type="submit"],
.wp-block-button__link,
.gb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff !important;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background .25s, color .25s, transform .2s;
}

.button:hover, button:hover, input[type="submit"]:hover,
.wp-block-button__link:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ---- search field ---- */
.search-field, input[type="search"] {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 12px 18px;
  background: #fff;
  color: var(--ink);
}

/* ---- post cards / archive grid ---- */
article.post, .post {
  background: var(--paper-pure);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .3s ease;
}

.post .post-image img,
.post-thumbnail img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  transition: transform .8s cubic-bezier(.22,.61,.16,1);
}

.post:hover .post-thumbnail img { transform: scale(1.05); }

/* ---- content area ---- */
.entry-content {
  color: var(--ink-2);
  font-size: clamp(16px, 1.05vw, 19px);
  line-height: 1.6;
}

.entry-content a { border-bottom: 1px solid var(--accent-glow); }

/* ---- pagination ---- */
.pagination a, .page-numbers {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 14px;
}

.pagination a:hover, .page-numbers.current {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ---- footer ---- */
.site-footer, footer.site-footer {
  background: var(--ink);
  color: var(--ink-3);
}

.site-footer .widget-title { color: #fff; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---- horizontal rule / dividers ---- */
hr { border: 0; border-top: 1px solid var(--rule); }
.cat-filters {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 0;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.cat-filter-list { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cat-filter {
  display: inline-flex;
  align-items: center;
  padding: 9px 17px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.cat-filter.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cat-filter:hover { border-color: var(--ink); }
.cat-filters {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 0;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.cat-filter-list { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cat-filter {
  display: inline-flex;
  align-items: center;
  padding: 9px 17px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.cat-filter.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cat-filter:hover { border-color: var(--ink); }