/*
Theme Name:  Kairos
Theme URI:   https://time.techspindra.com
Description: A fast, minimal, editorial date & time calculator theme
             for time.techspindra.com. Warm cream palette, DM Sans
             typography, orange-red accent. Built for programmatic SEO.
Version:     2.0.0
Author:      TechSpindra
Author URI:  https://techspindra.com
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kairos
Tags:        minimal, fast, calculator, date, time, editorial
*/


/* ============================================================
   1. DESIGN TOKENS
   Single source of truth for all colours, type, spacing.
   Change a value here — it updates everywhere.
============================================================ */
:root {

  /* ── Backgrounds ──────────────────────────────────────── */
  --bg:            #faf8f4;   /* warm off-white page bg      */
  --surface:       #ffffff;   /* card surface                */
  --surface-2:     #f3f0ea;   /* inner card / input bg       */
  --surface-3:     #e8e4db;   /* hover state bg              */

  /* ── Borders ──────────────────────────────────────────── */
  --border:        #e0dbd2;   /* default card/input border   */
  --border-strong: #ccc7bc;   /* focus / hover emphasis      */

  /* ── Text ─────────────────────────────────────────────── */
  --text:          #1a1714;   /* near-black warm             */
  --text-2:        #4a4540;   /* body / secondary            */
  --muted:         #8a8178;   /* captions / labels           */

  /* ── Accent — Orange-Red ──────────────────────────────── */
  --accent:        #e85d26;
  --accent-h:      #cf4f1e;   /* hover  (10% darker)         */
  --accent-d:      #b84318;   /* active (20% darker)         */
  --accent-soft:   #fdf0eb;   /* very light tint             */
  --accent-border: #f5c4ae;   /* light border on tint bg     */
  --accent-text:   #8b2a0a;   /* text on light-tinted bg     */

  /* ── Answer card (accent bg) ──────────────────────────── */
  --ans-bg:        #e85d26;
  --ans-text:      #ffffff;
  --ans-sub:       rgba(255, 255, 255, 0.72);

  /* ── Navigation ───────────────────────────────────────── */
  --nav-bg:        #ffffff;
  --nav-border:    #e0dbd2;

  /* ── Typography ───────────────────────────────────────── */
  --font:      'DM Sans', system-ui, -apple-system, 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', 'Fira Code', 'Cascadia Code',
               'Courier New', monospace;

  /* ── Type scale ───────────────────────────────────────── */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */
  --text-4xl:  2.25rem;    /*  36px */

  /* ── Font weights ─────────────────────────────────────── */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;

  /* ── Border radius ────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 100px;

  /* ── Transitions ──────────────────────────────────────── */
  --tr: 0.15s ease;
}


/* ============================================================
   2. RESET & BASE
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: var(--fw-normal);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

ul, ol { list-style: none; }

button { font-family: var(--font); cursor: pointer; }

input, select, textarea { font-family: var(--font); }

/* DM Mono for number-heavy elements */
.mono { font-family: var(--font-mono); }


/* ============================================================
   3. LAYOUT
============================================================ */
.wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-main { min-height: 60vh; }


/* ============================================================
   4. SKIP TO CONTENT — Accessibility
============================================================ */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 20px;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  transition: top 0.15s;
}

.skip-to-content:focus {
  top: 0;
  outline: 3px solid var(--accent-h);
  outline-offset: 2px;
}


/* ============================================================
   5. SITE HEADER
============================================================ */
.site-header {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  position: sticky;
  top: 0;
  z-index: 200;
  transition: border-bottom-color var(--tr);
}

.site-header.is-scrolled {
  border-bottom-color: var(--border-strong);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 16px;
}

/* ── Logo ─────────────────────────────────────────────────── */
.site-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo:hover { text-decoration: none; }

.site-logo img {
  height: 30px;
  width: auto;
  display: block;
}

.logo-mark {
  width: 30px;
  height: 30px;
  background: var(--accent);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--tr);
}

.logo-mark svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.site-logo:hover .logo-mark { background: var(--accent-h); }

.logo-text {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1;
}

/* ── Primary nav ──────────────────────────────────────────── */
.primary-nav {
  display: flex;
  align-items: center;
}

.primary-nav .nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  padding: 5px 11px;
  border-radius: var(--r-sm);
  transition: background var(--tr), color var(--tr);
  white-space: nowrap;
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

/* ── Hamburger ────────────────────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--tr);
}

.nav-toggle:hover { background: var(--surface-2); }

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile drawer ────────────────────────────────────────── */
.mobile-nav {
  display: none;
  background: var(--nav-bg);
  border-top: 1px solid var(--nav-border);
  padding: 12px 20px;
}

.mobile-nav.open { display: block; }

.mobile-nav .nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav a {
  display: block;
  font-size: var(--text-base);
  color: var(--text-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  transition: color var(--tr);
}

.mobile-nav li:last-child a { border-bottom: none; }
.mobile-nav a:hover { color: var(--accent); text-decoration: none; }


/* ============================================================
   6. BREADCRUMB
============================================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--muted);
  padding: 14px 0 0;
}

.breadcrumb a {
  color: var(--muted);
  transition: color var(--tr);
}

.breadcrumb a:hover {
  color: var(--accent);
  text-decoration: none;
}

.breadcrumb-sep { font-size: 11px; }
.breadcrumb-current { color: var(--text-2); }


/* ============================================================
   7. PAGE HERO
============================================================ */
.page-hero {
  padding: 18px 0 20px;
}

.page-title {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.6px;
  line-height: 1.2;
  color: var(--text);
}

.hero-sub {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 5px;
}

.hero-sub strong {
  color: var(--text-2);
  font-weight: var(--fw-medium);
}


/* ============================================================
   8. CARD — Generic white card container
============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 14px;
}

.card-title {
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 14px;
}


/* ============================================================
   9. ANSWER CARD
   The most prominent element — shows the computed result.
   Uses accent colour background. DM Mono for the date/time.
============================================================ */
.answer-card {
  background: var(--ans-bg);
  border-radius: var(--r-xl);
  padding: 26px 28px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.answer-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ans-sub);
  margin-bottom: 6px;
}

/* DM Mono for the date — feels precise and data-like */
.answer-date {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.5px;
  color: var(--ans-text);
  line-height: 1.1;
}

.answer-meta {
  font-size: var(--text-sm);
  color: var(--ans-sub);
  margin-top: 5px;
}

.answer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ans-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: var(--ans-text);
  transition: background var(--tr);
  font-family: var(--font);
}

.ans-btn:hover { background: rgba(255, 255, 255, 0.30); }

.ans-btn.is-copied {
  background: rgba(255, 255, 255, 0.35);
  cursor: default;
}


/* ============================================================
   10. CALCULATOR WIDGET
============================================================ */
.calc-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* DM Mono for number input — feels precise */
.calc-input {
  width: 80px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
  background: var(--surface-2);
  outline: none;
  transition: border-color var(--tr);
  -moz-appearance: textfield;
}

.calc-input::-webkit-inner-spin-button,
.calc-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.calc-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.calc-select {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface-2);
  outline: none;
  cursor: pointer;
  transition: border-color var(--tr);
}

.calc-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.calc-btn {
  padding: 9px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: background var(--tr);
  white-space: nowrap;
}

.calc-btn:hover  { background: var(--accent-h); }
.calc-btn:active { background: var(--accent-d); }

.calc-result {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: none;
  line-height: 1.6;
}

.calc-result.visible { display: block; }

.calc-result strong {
  color: var(--accent);
  font-weight: var(--fw-semi);
}


/* ============================================================
   11. RELATIVE DATES TABLE
============================================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th {
  text-align: left;
  padding: 7px 11px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: middle;
}

.data-table td:first-child {
  font-weight: var(--fw-medium);
  color: var(--text);
  white-space: nowrap;
}

.data-table tr:last-child td { border-bottom: none; }

/* Today / current row */
.data-table tr.row-today td { background: var(--accent-soft); }
.data-table tr.row-today td:first-child { color: var(--accent); }

/* "View →" links */
.data-table td a {
  font-size: var(--text-xs);
  color: var(--accent);
  white-space: nowrap;
}

/* "TODAY" / "THIS" badge */
.row-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  padding: 1px 5px;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  margin-left: 5px;
  vertical-align: middle;
  text-transform: uppercase;
}


/* ============================================================
   12. UNIT CONVERSION GRID
   DM Mono for the numbers — precise, data-tool feel.
============================================================ */
.conv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 9px;
}

.conv-item {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 13px 15px;
}

.conv-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.3px;
  color: var(--text);
  line-height: 1.2;
}

.conv-label {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 3px;
}


/* ============================================================
   13. ABOUT THIS DATE GRID
   DM Mono for the values.
============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 9px;
}

.about-item {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 11px 15px;
}

.about-item-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.about-item-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  margin-top: 3px;
}


/* ============================================================
   14. CONTENT / EXPLANATION SECTION
============================================================ */
.entry-content p {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--text-2);
  margin-bottom: 12px;
}

.entry-content p:last-child { margin-bottom: 0; }

.entry-content h2 {
  font-size: var(--text-lg);
  font-weight: var(--fw-semi);
  color: var(--text);
  margin: 20px 0 8px;
  letter-spacing: -0.2px;
}

.entry-content h3 {
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  color: var(--text);
  margin: 16px 0 6px;
}

.entry-content ul,
.entry-content ol {
  padding-left: 20px;
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.7;
}

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content strong {
  color: var(--text);
  font-weight: var(--fw-semi);
}

.entry-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ============================================================
   15. FAQ ACCORDION
============================================================ */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 13px 0;
  text-align: left;
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  line-height: 1.4;
}

.faq-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 15px;
  color: var(--muted);
  font-weight: var(--fw-normal);
  transition: background var(--tr), color var(--tr), transform 0.2s;
  line-height: 1;
  user-select: none;
}

.faq-item.is-open .faq-icon {
  background: var(--accent-soft);
  color: var(--accent);
  transform: rotate(45deg);
}

.faq-answer {
  font-size: var(--text-sm);
  line-height: 1.72;
  color: var(--text-2);
  padding-bottom: 13px;
  display: none;
}

.faq-item.is-open .faq-answer { display: block; }
.faq-answer strong { color: var(--text); font-weight: var(--fw-semi); }


/* ============================================================
   16. PILL / TAG LINKS
============================================================ */
.pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid var(--accent-border);
  transition: background var(--tr), color var(--tr), border-color var(--tr);
  text-decoration: none;
}

.pill:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  text-decoration: none;
}

.pill.pill-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: var(--fw-semi);
}

.pill.pill-muted {
  background: var(--surface-2);
  color: var(--text-2);
  border-color: var(--border);
}

.pill.pill-muted:hover {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--border-strong);
}


/* ============================================================
   17. BUTTONS — Generic
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  border: none;
  transition: background var(--tr), color var(--tr);
  text-decoration: none;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-h); text-decoration: none; }

.btn-ghost {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  background: var(--surface-3);
  color: var(--text);
  text-decoration: none;
}


/* ============================================================
   18. HUB / CATEGORY PAGE — Card grid
============================================================ */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.hub-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: block;
  text-decoration: none;
  transition: border-color var(--tr), box-shadow var(--tr);
}

.hub-card:hover {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
  text-decoration: none;
}

.hub-card-num {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: -0.4px;
  line-height: 1;
  margin-bottom: 4px;
}

.hub-card-label {
  font-size: var(--text-sm);
  color: var(--text-2);
}


/* ============================================================
   19. PAGE TEMPLATE — page.php
============================================================ */
.page-article { padding-bottom: 32px; }

/* wp_link_pages() */
.page-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: var(--text-sm);
}

.page-links-label { color: var(--muted); font-weight: var(--fw-medium); }

.page-links-item a,
.page-links-item {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  transition: background var(--tr), color var(--tr);
  text-decoration: none;
}

.page-links-item a:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}


/* ============================================================
   20. POST LIST — index.php
============================================================ */
.post-item.card { margin-bottom: 14px; }

.post-item-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semi);
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin-bottom: 6px;
}

.post-item-title a {
  color: var(--text);
  transition: color var(--tr);
}

.post-item-title a:hover {
  color: var(--accent);
  text-decoration: none;
}

.post-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 10px;
}

.post-item-sep { user-select: none; }

.post-item-excerpt {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-2);
  margin-bottom: 12px;
}

.post-item-excerpt p { margin: 0; }

.post-item-more {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--accent);
  transition: color var(--tr);
}

.post-item-more:hover {
  color: var(--accent-h);
  text-decoration: none;
}

/* No results */
.no-results { text-align: center; padding: 32px 24px; }
.no-results-title {
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  color: var(--text);
  margin-bottom: 6px;
}
.no-results-sub { font-size: var(--text-sm); color: var(--muted); }
.no-results .pill-grid { justify-content: center; margin-top: 16px; }


/* ============================================================
   21. PAGINATION
============================================================ */
.pagination-wrap { margin: 8px 0 24px; }

.page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.page-numbers a,
.page-numbers span {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background var(--tr), color var(--tr), border-color var(--tr);
  text-decoration: none;
}

.page-numbers a:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

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

.page-numbers .dots {
  border: none;
  background: none;
  color: var(--muted);
  padding: 6px 4px;
}


/* ============================================================
   22. 404 PAGE
============================================================ */
.error-404 {
  text-align: center;
  padding: 64px 20px 48px;
}

.error-404-code {
  font-family: var(--font-mono);
  font-size: 96px;
  font-weight: var(--fw-bold);
  color: var(--surface-3);
  letter-spacing: -6px;
  line-height: 1;
  margin-bottom: 20px;
  user-select: none;
}

.error-404-title {
  font-size: var(--text-xl);
  font-weight: var(--fw-semi);
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.25px;
}

.error-404-message {
  font-size: var(--text-base);
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 24px;
  line-height: 1.65;
}

.error-404-message strong {
  color: var(--text-2);
  font-weight: var(--fw-medium);
}

.error-404-nav { margin-bottom: 8px; }


/* ============================================================
   23. SITE FOOTER
============================================================ */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 48px;
  background: var(--surface);
}

/* Top row: brand + nav */
.footer-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 20px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Smaller logo mark in footer */
.site-footer .logo-mark {
  width: 24px;
  height: 24px;
  border-radius: 5px;
}

.site-footer .logo-mark svg { width: 13px; height: 13px; }
.site-footer .logo-text { font-size: var(--text-base); }

.footer-tagline {
  font-size: var(--text-xs);
  color: var(--muted);
  max-width: 220px;
  line-height: 1.5;
  margin-top: 2px;
}

/* Footer nav */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 2px;
}

.footer-nav li { list-style: none; }

.footer-nav a {
  font-size: var(--text-sm);
  color: var(--muted);
  transition: color var(--tr);
  white-space: nowrap;
}

.footer-nav a:hover {
  color: var(--text);
  text-decoration: none;
}

/* Bottom bar */
.footer-bottom { border-top: 1px solid var(--border); }

.footer-bottom-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-copy { font-size: var(--text-xs); color: var(--muted); }

.footer-legal { display: flex; gap: 12px; }

.footer-legal a {
  font-size: var(--text-xs);
  color: var(--muted);
  transition: color var(--tr);
}

.footer-legal a:hover { color: var(--text); text-decoration: none; }


/* ============================================================
   24. UTILITY CLASSES
============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.text-muted   { color: var(--muted); }
.text-accent  { color: var(--accent); }
.text-mono    { font-family: var(--font-mono); }
.fw-medium    { font-weight: var(--fw-medium); }
.fw-semi      { font-weight: var(--fw-semi); }
.fw-bold      { font-weight: var(--fw-bold); }

.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }


/* ============================================================
   25. RESPONSIVE
============================================================ */

/* Tablet — hide desktop nav, show hamburger */
@media (max-width: 768px) {
  .primary-nav { display: none; }
  .nav-toggle  { display: flex; }
}

/* Mobile */
@media (max-width: 580px) {
  .page-title   { font-size: var(--text-2xl); }
  .answer-card  { padding: 20px; }
  .answer-date  { font-size: var(--text-3xl); }
  .card         { padding: 16px 18px; }
  .conv-grid    { grid-template-columns: repeat(2, 1fr); }
  .about-grid   { grid-template-columns: repeat(2, 1fr); }
  .hub-grid     { grid-template-columns: repeat(2, 1fr); }

  /* Hide the 3rd table column on narrow screens */
  .data-table th:nth-child(3),
  .data-table td:nth-child(3) { display: none; }

  .footer-inner        { flex-direction: column; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* Very small */
@media (max-width: 380px) {
  .wrap       { padding: 0 14px; }
  .page-title { font-size: var(--text-xl); }
  .answer-date{ font-size: var(--text-2xl); }
  .ans-btn    { font-size: 11px; padding: 7px 11px; }
}