/* =====================================================================
   EnoGames — style.css
   Hand-written, framework-free CSS. Mobile-first. Modern browsers.
   No build step required. Edit the tokens in :root to re-theme the site.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand (indigo) */
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-200:#c7d2fe;
  --brand-300:#a5b4fc; --brand-400:#818cf8; --brand-500:#6366f1;
  --brand-600:#4f46e5; --brand-700:#4338ca; --brand-800:#3730a3; --brand-900:#312e81;
  --brand: var(--brand-600);

  /* Neutrals (slate) */
  --ink:#0f172a; --text:#334155; --muted:#64748b; --faint:#94a3b8;
  --line:#e2e8f0; --line-soft:#f1f5f9;
  --bg:#ffffff; --bg-soft:#f8fafc;

  /* Category accents */
  --c-emerald:#059669; --c-emerald-bg:#ecfdf5; --c-emerald-line:#a7f3d0;
  --c-amber:#b45309;   --c-amber-bg:#fffbeb;   --c-amber-line:#fde68a;
  --c-sky:#0284c7;     --c-sky-bg:#f0f9ff;     --c-sky-line:#bae6fd;

  /* Layout widths */
  --container:72rem;        /* 1152px  (homepage / header / footer) */
  --container-read:56rem;   /* 896px   (single article) */
  --container-narrow:48rem; /* 768px   (legal / static pages) */

  /* Radii */
  --radius:1rem;        /* rounded-2xl */
  --radius-md:.75rem;   /* rounded-xl  */
  --radius-sm:.5rem;
  --radius-pill:9999px;

  /* Shadows */
  --shadow-card:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-hover:0 12px 24px -8px rgba(15,23,42,.18), 0 4px 8px -4px rgba(15,23,42,.08);

  --header-h:4rem;
  --font:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
         Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul, ol { margin:0; padding:0; list-style:none; }
h1, h2, h3, h4 { margin:0; color:var(--ink); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
p { margin:0; }
button { font:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:.375rem; }

/* ---------- Layout helpers ---------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:1rem; }
@media (min-width:640px)  { .container { padding-inline:1.5rem; } }
@media (min-width:1024px) { .container { padding-inline:2rem; } }

.eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); }
.muted { color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Header / nav ---------- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); }
.header-actions { display:flex; align-items:center; gap:.75rem; }

.brand { display:inline-flex; align-items:center; gap:.55rem; font-size:1.25rem; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.brand .logo { height:2rem; width:auto; }
.brand .accent { color:var(--brand); }

.primary-nav { display:none; }
.primary-nav ul { display:flex; align-items:center; gap:2rem; }
.nav-link { font-size:.875rem; font-weight:500; color:var(--muted); transition:color .15s; }
.nav-link:hover { color:var(--brand); }
.nav-link.is-active { color:var(--ink); }
@media (min-width:768px) { .primary-nav { display:block; } }

.menu-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; border:0; background:transparent;
  color:var(--muted); border-radius:var(--radius-sm);
}
.menu-btn:hover { background:var(--line-soft); }
.menu-btn svg { width:1.5rem; height:1.5rem; }
.menu-btn[aria-expanded="true"] .icon-open { display:none; }
.menu-btn[aria-expanded="true"] .icon-close { display:block; }
.icon-close { display:none; }

/* ---------- Search button + overlay ---------- */
.search-btn { display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border:0; background:transparent; color:var(--muted); border-radius:var(--radius-sm); transition:color .15s, background .15s; }
.search-btn:hover { background:var(--line-soft); color:var(--brand); }
.search-btn svg { width:1.25rem; height:1.25rem; }

.search-overlay { position:fixed; inset:0; z-index:100; display:flex; justify-content:center; align-items:flex-start; }
.search-overlay[hidden] { display:none; }
.search-overlay__backdrop { position:absolute; inset:0; background:rgba(15,23,42,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.search-overlay__panel { position:relative; width:calc(100% - 2rem); max-width:42rem; margin-top:12vh; background:var(--bg); border-radius:var(--radius-md); box-shadow:var(--shadow-hover); overflow:hidden; }
.search-overlay__bar { display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; border-bottom:1px solid var(--line); }
.search-overlay__icon { width:1.25rem; height:1.25rem; color:var(--faint); flex-shrink:0; }
.search-overlay__input { flex:1 1 auto; border:0; outline:0; font:inherit; font-size:1.125rem; color:var(--ink); background:transparent; min-width:0; }
.search-overlay__input::placeholder { color:var(--faint); }
.search-overlay__close { flex-shrink:0; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:1rem; line-height:1; width:2rem; height:2rem; border-radius:var(--radius-sm); transition:color .15s, border-color .15s; cursor:pointer; }
.search-overlay__close:hover { border-color:var(--brand); color:var(--brand); }
.search-overlay__results { max-height:60vh; overflow:auto; padding:.5rem; }
.search-result { display:block; padding:.7rem .85rem; border-radius:var(--radius-sm); text-decoration:none; }
.search-result:hover, .search-result:focus-visible { background:var(--brand-50); }
.search-result__title { font-weight:600; color:var(--ink); font-size:.95rem; }
.search-result__desc { color:var(--muted); font-size:.8rem; margin-top:.15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-result__url { color:var(--brand); font-size:.7rem; margin-top:.2rem; }
.search-overlay__empty { padding:1.5rem; text-align:center; color:var(--faint); font-size:.9rem; }
@media (max-width:640px) {
  .search-overlay__panel { margin-top:0; max-width:100%; width:100%; min-height:100vh; border-radius:0; }
  .search-overlay__results { max-height:calc(100vh - 4.5rem); }
}

.mobile-nav { display:none; padding-bottom:1rem; }
.mobile-nav.is-open { display:block; }
.mobile-nav ul { display:flex; flex-direction:column; gap:.25rem; }
.mobile-nav a { display:block; padding:.5rem .75rem; border-radius:var(--radius-sm); font-size:.875rem; font-weight:500; color:var(--text); }
.mobile-nav a:hover { background:var(--line-soft); }
.mobile-nav a.is-active { color:var(--ink); background:var(--line-soft); }
@media (min-width:768px) { .menu-btn { display:none; } }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.875rem; font-weight:600; padding:.625rem 1.25rem;
  border-radius:var(--radius-pill); border:1px solid transparent; transition:all .15s;
}
.btn--primary { background:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(79,70,229,.3); }
.btn--primary:hover { background:var(--brand-700); }
.btn--ghost { background:#fff; color:var(--text); border-color:var(--line); }
.btn--ghost:hover { border-color:var(--brand); color:var(--brand); }
.btn[aria-disabled="true"], .btn:disabled { color:var(--faint); border-color:var(--line-soft); cursor:not-allowed; pointer-events:none; opacity:.6; }

/* ---------- Hero ---------- */
.hero { padding-block:3rem 2.5rem; }
@media (min-width:640px) { .hero { padding-block:4rem 3rem; } }
.hero h1 { margin-top:.75rem; font-size:1.875rem; }
@media (min-width:640px) { .hero h1 { font-size:2.25rem; } }
.hero p { margin-top:1rem; max-width:42rem; color:var(--muted); }

/* ---------- Featured card ---------- */
.featured { display:block; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; transition:box-shadow .25s, transform .25s; }
.featured:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.featured__media { overflow:hidden; aspect-ratio:16/9; }
.featured__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.featured:hover .featured__media img { transform:scale(1.05); }
.featured__body { padding:1.5rem; }
.featured__title { margin-top:.75rem; font-size:1.5rem; }
.featured__title span { background-image:linear-gradient(var(--brand), var(--brand)); background-size:0% 2px; background-repeat:no-repeat; background-position:left bottom; transition:background-size .3s; padding-bottom:2px; }
.featured:hover .featured__title span { background-size:100% 2px; }
.featured__excerpt { margin-top:.75rem; color:var(--muted); font-size:.875rem; line-height:1.6; }
.featured__cta { margin-top:1rem; color:var(--brand); font-weight:600; font-size:.875rem; }
@media (min-width:768px) {
  .featured { display:grid; grid-template-columns:1fr 1fr; }
  .featured__media { aspect-ratio:auto; }
  .featured__media img { height:100%; min-height:14rem; }
  .featured__body { padding:2rem; display:flex; flex-direction:column; justify-content:center; }
}

/* ---------- Section heading ---------- */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:1rem; }
.section-head h2 { font-size:1.125rem; }
.section-head .muted { font-size:.875rem; color:var(--faint); }

/* ---------- Post grid + cards ---------- */
.post-grid { display:grid; gap:1.5rem; padding-block:2rem; }
@media (min-width:640px)  { .post-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .post-grid { grid-template-columns:repeat(3,1fr); gap:2rem; } }

.card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; transition:box-shadow .25s, transform .25s; }
.card:hover { box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.card__media { display:block; overflow:hidden; }
.card__media img { aspect-ratio:16/9; width:100%; object-fit:cover; transition:transform .5s; }
.card:hover .card__media img { transform:scale(1.05); }
.card__body { display:flex; flex-direction:column; flex:1 1 auto; padding:1.25rem; }
.card__title { margin-top:.75rem; font-size:1.125rem; line-height:1.35; }
.card__title a { display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .15s; }
.card__title a:hover { color:var(--brand); }
.card__excerpt { margin-top:.5rem; color:var(--muted); font-size:.875rem; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card__meta { margin-top:1rem; display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--faint); }
.card__meta .author { font-weight:500; color:var(--muted); }

/* Homepage pagination — cards fade/slide in when revealed */
@keyframes cardIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.post-grid .card.is-visible { animation:cardIn .3s ease both; }
@media (prefers-reduced-motion:reduce) { .post-grid .card.is-visible { animation:none; } }

/* ---------- Badge ---------- */
.badge { display:inline-flex; align-items:center; align-self:flex-start; border:1px solid var(--brand-200); background:var(--brand-50); color:var(--brand-700); font-size:.75rem; font-weight:600; padding:.25rem .75rem; border-radius:var(--radius-pill); }
.badge--emerald { border-color:var(--c-emerald-line); background:var(--c-emerald-bg); color:var(--c-emerald); }
.badge--amber   { border-color:var(--c-amber-line);   background:var(--c-amber-bg);   color:var(--c-amber); }
.badge--sky     { border-color:var(--c-sky-line);     background:var(--c-sky-bg);     color:var(--c-sky); }

/* ---------- Pagination ---------- */
.pagination { display:flex; align-items:center; justify-content:center; gap:1rem; padding-block:1rem; }
.page-info { font-size:.875rem; color:var(--muted); }
.page-info b { color:var(--ink); font-weight:700; }

/* ---------- Footer ---------- */
.site-footer { margin-top:4rem; border-top:1px solid var(--line); background:var(--bg-soft); }
.footer-inner { padding-block:3rem; display:flex; flex-direction:column; align-items:center; gap:2rem; }
@media (min-width:768px) { .footer-inner { flex-direction:row; align-items:flex-start; justify-content:space-between; } }
.footer-brand { max-width:24rem; text-align:center; }
@media (min-width:768px) { .footer-brand { text-align:left; } }
.footer-brand p { margin-top:.75rem; color:var(--muted); font-size:.875rem; line-height:1.6; }

.social { display:flex; align-items:center; gap:.75rem; }
.social__link { display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border:1px solid var(--line); background:#fff; border-radius:50%; color:var(--muted); transition:all .15s; }
.social__link:hover { border-color:var(--brand); color:var(--brand); }
.social__link svg { width:1rem; height:1rem; }

.footer-bottom { margin-top:2.5rem; border-top:1px solid var(--line); padding-top:1.5rem; }
.policy-list { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem 1.25rem; font-size:.75rem; font-weight:500; color:var(--muted); }
@media (min-width:768px) { .policy-list { justify-content:flex-start; } }
.policy-list a:hover { color:var(--brand); }
.policy-list .dot { color:var(--line); }
.copyright { margin-top:1rem; text-align:center; font-size:.75rem; color:var(--faint); }
@media (min-width:768px) { .copyright { text-align:left; } }

/* ---------- Article (single post) ---------- */
.article { padding-block:2.5rem; }
@media (min-width:640px) { .article { padding-block:3.5rem; } }
.article__container { max-width:var(--container-read); margin-inline:auto; padding-inline:1rem; }
@media (min-width:640px) { .article__container { padding-inline:1.5rem; } }

.breadcrumb { margin-bottom:1.5rem; font-size:.875rem; color:var(--faint); }
.breadcrumb ol { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.breadcrumb a:hover { color:var(--brand); }
.breadcrumb [aria-current="page"] { color:var(--muted); max-width:16rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.article__header { margin-bottom:2rem; }
.article__title { margin-top:1rem; font-size:1.875rem; line-height:1.2; }
@media (min-width:640px) { .article__title { font-size:2.25rem; } }
.article__subtitle { margin-top:.75rem; font-size:1.125rem; font-weight:500; color:var(--muted); }
.article__meta { margin-top:1.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; font-size:.875rem; color:var(--muted); }
.avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--brand-100); color:var(--brand-700); font-weight:700; }
.author-chip { display:inline-flex; align-items:center; gap:.5rem; }
.author-chip .avatar { width:2.25rem; height:2.25rem; font-size:.75rem; }
.author-chip .name { font-weight:500; color:var(--text); }
.article__meta .sep { color:var(--line); }

.featured-image { overflow:hidden; border-radius:var(--radius); }
.featured-image img { aspect-ratio:16/9; width:100%; object-fit:cover; }
.featured-image figcaption { margin-top:.5rem; text-align:center; font-size:.75rem; color:var(--faint); }

/* ---------- Prose (article body + legal pages) ---------- */
.prose { margin-top:2.5rem; font-size:1.125rem; line-height:1.75; color:var(--text); }
.prose > * + * { margin-top:1.25rem; }
.prose .lead { font-size:1.2rem; color:var(--muted); }
.prose strong { color:var(--ink); font-weight:700; }
.prose em { font-style:italic; }
.prose a { color:var(--brand); }
.prose a:hover { text-decoration:underline; }
.prose h2 { font-size:1.5rem; margin-top:2.5rem; padding-bottom:.6rem; position:relative; scroll-margin-top:6rem; }
.prose h2::after { content:""; position:absolute; left:0; bottom:0; width:3rem; height:3px; border-radius:var(--radius-pill); background:var(--brand); }
.prose h3 { font-size:1.2rem; color:var(--ink); margin-top:1.75rem; }
.prose ul { list-style:disc; padding-left:1.4rem; }
.prose ol { list-style:decimal; padding-left:1.4rem; }
.prose li { margin-top:.5rem; }
.prose li::marker { color:var(--brand-500); }

/* Tables in article body (AdSense-readable, responsive) */
.prose table { width:100%; border-collapse:collapse; font-size:.95rem; }
.prose th, .prose td { border:1px solid var(--line); padding:.55rem .75rem; text-align:left; vertical-align:top; }
.prose th { background:var(--bg-soft); font-weight:700; color:var(--ink); }
.prose tbody tr:nth-child(even) { background:var(--line-soft); }
.table-scroll { overflow-x:auto; margin:1.5rem 0; }
.table-scroll table { margin:0; }
.prose blockquote { margin:1.75rem 0; border-left:4px solid var(--brand-500); background:var(--brand-50); padding:1rem 1.5rem; color:var(--text); font-weight:500; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }

/* ---------- Ad slot (reserves height -> no CLS) ---------- */
.ad-slot { display:flex; align-items:center; justify-content:center; min-height:120px; margin-block:2rem; border:1px dashed var(--line); border-radius:var(--radius-md); background:var(--bg-soft); }
.ad-slot__label { font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

/* ---------- Tags ---------- */
.tags { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.tags__label { font-size:.875rem; color:var(--faint); }
.tag { background:var(--line-soft); color:var(--muted); font-size:.75rem; font-weight:500; padding:.25rem .75rem; border-radius:var(--radius-pill); transition:all .15s; }
.tag:hover { background:var(--brand-50); color:var(--brand-700); }

/* ---------- Author bio ---------- */
.author-bio { display:flex; flex-direction:column; gap:1rem; margin-top:2rem; padding:1.5rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-soft); }
@media (min-width:640px) { .author-bio { flex-direction:row; align-items:center; } }
.author-bio .avatar { width:3.5rem; height:3.5rem; font-size:1.125rem; flex-shrink:0; }
.author-bio__name { font-weight:700; color:var(--ink); }
.author-bio__desc { margin-top:.25rem; font-size:.875rem; color:var(--muted); line-height:1.6; }

/* ---------- Prev / next nav ---------- */
.post-nav { display:grid; gap:1rem; margin-top:2.5rem; }
@media (min-width:640px) { .post-nav { grid-template-columns:1fr 1fr; } }
.post-nav__link { display:block; padding:1rem; border:1px solid var(--line); border-radius:var(--radius-md); transition:all .15s; }
.post-nav__link:hover { border-color:var(--brand-300); box-shadow:var(--shadow-card); }
.post-nav__label { font-size:.75rem; font-weight:600; color:var(--brand); }
.post-nav__link--next { text-align:right; }
.post-nav__title { margin-top:.3rem; font-weight:600; color:var(--text); font-size:.9rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-nav__link:hover .post-nav__title { color:var(--brand); }

/* ---------- Legal / static pages ---------- */
.page { padding-block:3rem; }
@media (min-width:640px) { .page { padding-block:4rem; } }
.page__container { max-width:var(--container-narrow); margin-inline:auto; padding-inline:1rem; }
@media (min-width:640px) { .page__container { padding-inline:1.5rem; } }
.page__header { margin-bottom:2.5rem; border-bottom:1px solid var(--line); padding-bottom:1.5rem; }
.page__title { margin-top:.5rem; font-size:1.875rem; }
@media (min-width:640px) { .page__title { font-size:2.25rem; } }
.page__subtitle { margin-top:.75rem; font-size:1.125rem; color:var(--muted); }
.updated { margin-top:2rem; font-size:.875rem; color:var(--faint); }
.page .prose { font-size:1.0625rem; }

/* table of contents */
.toc { margin-bottom:2.5rem; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-soft); padding:1.25rem; font-size:.875rem; }
.toc__title { margin-bottom:.5rem; font-weight:700; color:var(--ink); }
.toc ul { display:grid; grid-template-columns:1fr; gap:.25rem; }
@media (min-width:640px) { .toc ul { grid-template-columns:1fr 1fr; } }
.toc a { color:var(--brand); }
.toc a:hover { text-decoration:underline; }

/* ---------- Contact ---------- */
.contact-grid { display:grid; gap:2.5rem; }
@media (min-width:640px) { .contact-grid { grid-template-columns:2fr 3fr; } }
.contact-block h2 { font-size:1rem; margin-bottom:1rem; }
.contact-block ul { display:flex; flex-direction:column; gap:1rem; font-size:.875rem; }
.contact-block .label { color:var(--faint); }
.contact-block .email { display:inline-block; font-weight:500; color:var(--brand); }
.contact-block .email:hover { text-decoration:underline; }
.contact-block .social { margin-top:1.5rem; }

.form { display:flex; flex-direction:column; gap:1rem; }
.field { display:block; }
.label { display:block; font-size:.875rem; font-weight:500; color:var(--text); margin-bottom:.375rem; }
.input, .textarea { display:block; width:100%; border:1px solid var(--line); background:#fff; border-radius:var(--radius-sm); padding:.625rem .875rem; font:inherit; font-size:.875rem; color:var(--ink); transition:border-color .15s; }
.input:focus, .textarea:focus { outline:none; border-color:var(--brand-500); }
.textarea { resize:vertical; min-height:7rem; }
.form .hint { font-size:.75rem; color:var(--faint); }