/* ========================================================================
   zndr.dk — Theme CSS (dark-first)
   ------------------------------------------------------------------------
   Conventions
   - Variables in :root (dark defaults) + light-mode overrides
   - Base reset → Layout → Components (Search, Card, Chip, Footer, Logo)
   - Utilities (links, focus, pending) at the end
   ===================================================================== */

/* ===========================
   Theme variables (dark-first)
   =========================== */
:root{
  /* Palette */
  --bg:            #1a1b1e;   /* page background */
  --panel:         #2a2b32;   /* cards / inputs */
  --fg:            #e6e6e6;   /* primary text */
  --muted:         #9ca3af;   /* secondary text */
  --ring:          #3a3b45;   /* borders */
  --accent:        #10a37f;   /* brand green */
  --accent-strong: #059669;   /* green hover */
  --accent-alt:    #ef4444;   /* brand red */
  --shadow:        rgba(0,0,0,.5);

  /* Logo proportions (match favicon visual weight) */
  --logo-size:   36px;
  --logo-radius: 8px;
}

/* =================
   Base / Reset
   ================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell,
        "Noto Sans", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
}

/* Reserve scrollbar space so layout doesn't shift between pages */
html { scrollbar-gutter: stable both-edges; }

/* =================
   Layout
   ================= */
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.title{ font-weight: 700; letter-spacing: .2px; }
.subtitle{ color: var(--muted); font-size: .95rem; }

/* =================
   Search
   ================= */
.search{ width: 100%; margin: 18px 0 24px; }

.search input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--ring);
  background: var(--panel);
  color: var(--fg);
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}

.search input::placeholder{
  color: color-mix(in oklab, var(--muted) 85%, transparent);
}

.search input:focus{
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px rgba(16,163,127,.40),
    inset 0 1px 3px rgba(0,0,0,.6);
}

/* ==========================
   Grid + Cards
   ========================== */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.card{
  position: relative;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--ring);
  padding: 16px 14px 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.card:hover{
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow:
    0 0 12px rgba(16,163,127,.25),  /* subtle green glow */
    0 0  6px rgba(239,68,68,.20);   /* subtle red halo */
}

/* Titles & descriptions (no line clamp) */
.card h3{
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--fg);
}

.card p{
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
}

/* ==========================
   Chip (badge)
   - Default: green
   - LAN-only / away: red   (.is-lan applied in HTML; JS removes it at home)
   - Hidden until LAN check completes: .chip--pending
   ========================== */
.chip{
  position: absolute;
  top: 10px; right: 10px;
  font-size: .75rem;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-weight: 500;
  background: var(--accent); /* solid green */
  color: #fff;
}

.card.is-lan .chip{
  background: var(--accent-alt); /* solid red */
}

/* Hide chips until the LAN check decides (prevents color flash) */
.chip--pending { visibility: hidden; }

/* =================
   Footer
   ================= */
footer{
  margin-top: 36px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: .9rem;
}

.foot-links{ display: flex; gap: 12px; flex-wrap: wrap; }
.foot-links a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--ring);
}
.foot-links a:hover{
  color: var(--fg);
  border-bottom-color: var(--accent);
}

/* =================
   Links (general)
   ================= */
a{ color: var(--accent); }
a:hover{ color: var(--accent-strong); }

/* ==========================
   Keyboard focus (accessibility)
   ========================== */
:where(a, input).focus-visible,
:where(a, input):focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 10px;
}

/* =================
   Light mode
   ================= */
@media (prefers-color-scheme: light){
  :root{
    --bg:            #f7f7f8;
    --panel:         #ffffff;
    --fg:            #0f172a;
    --muted:         #4b5563;
    --ring:          #e5e7eb;
    --accent:        #10a37f;   /* keep brand green */
    --accent-strong: #0b8a6c;
    --shadow:        rgba(2,6,23,.12);
  }

  .search input{
    background: var(--panel);
    border: 1px solid var(--ring);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
  }
  .search input:focus{
    box-shadow:
      0 0 0 2px rgba(16,163,127,.3),
      inset 0 1px 2px rgba(0,0,0,.06);
  }

  .card{ background: var(--panel); border: 1px solid var(--ring); box-shadow: none; }
  .card:hover{ box-shadow: 0 4px 10px rgba(0,0,0,.10); }
}

/* ==========================
   Logo (matches favicon feel)
   ========================== */
.logo{
  --g1: var(--accent);
  --g2: var(--accent-alt);
  width:  var(--logo-size);
  height: var(--logo-size);
  border-radius: var(--logo-radius);
  background: linear-gradient(135deg, var(--g1), var(--g2));
  display: inline-grid;
  place-items: center;
  box-shadow:
    0 4px 12px rgba(16,163,127,.25),
    0 0  6px rgba(239,68,68,.15);
}

.logo-core{
  width: 100%;
  height: 100%;
  border-radius: calc(var(--logo-radius) - 2px);
  display: grid;
  place-items: center;
}

.logo-text{
  /* ~40% of box height (26/64 ≈ 0.406) to mirror the SVG badge */
  font-size: calc(var(--logo-size) * 0.406);
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 0.95;
  color: #fff;
  text-align: center;
}

/* ==========================
   Optional: reduced motion
   ========================== */
@media (prefers-reduced-motion: reduce){
  .card { transition: none; }
  .card:hover { transform: none; box-shadow: none; }
}

/* Narrow reading column for blog posts */
.post{
  max-width: 800px;      /* <= change to taste: 680–840px works well */
  margin: 2rem auto;     /* center it */
  padding: 1.25rem 1.25rem 2rem;
  background: var(--panel);
  border: 1px solid var(--ring);
  border-radius: 12px;
}

/* Scale images (and images inside links/picture/figure) to column width */
.post-body :where(img, a img, picture img, figure img){
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 12px auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Optional: figure captions */
.post-body figure{ margin: 1rem 0; text-align: center; }
.post-body figcaption{ color: var(--muted); font-size: .9rem; margin-top: .4rem; }

/* Mobile nicety: reduce padding on small screens */
@media (max-width: 640px){
  .post{ padding: 1rem; border-radius: 10px; }
}

/* Safe default so images never overflow */
.container :where(img, picture img, figure img){
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 12px auto;
}