/*
 * theme.css — the Nairobi Maps brand as a DaisyUI theme, shared by every page.
 *
 * WHY THIS EXISTS
 * Six pages load DaisyUI's full stylesheet and almost none of them used it:
 * every button, card and badge was re-typed in each page's inline <style>,
 * in the brand green each page happened to remember. DaisyUI's components
 * are coloured through CSS variables, so stating the brand ONCE here, as
 * those variables, makes `btn-primary`, `card`, `badge`, `tabs`, `input`,
 * `alert`, `collapse` and the rest come out in Nairobi Maps' colours on
 * every page with no per-page CSS at all.
 *
 * Load it AFTER daisyui's full.min.css, which defines the same variables.
 *
 * The values are OKLCH components, the form DaisyUI 4 expects ("L C H",
 * no oklch() wrapper). Each one is the brand hex it came from, converted:
 *   primary    #228b22  forest green — every primary action on the site
 *   secondary  #1a3c34  deep green   — headers, footers
 *   accent     #2c8a78  teal         — links and highlights (mint in dark)
 */

:root,
[data-theme='light'] {
  color-scheme: light;
  --p: 55.78% 0.1688 142.89;     /* #228b22 */
  --pc: 100% 0 0;
  --s: 32.78% 0.0425 176.18;     /* #1a3c34 */
  --sc: 100% 0 0;
  --a: 57.40% 0.0912 177.52;     /* #2c8a78 */
  --ac: 100% 0 0;
  --n: 27.81% 0.0296 256.85;     /* #1f2937 */
  --nc: 96.70% 0.0029 264.54;
  --b1: 100% 0 0;                /* cards */
  --b2: 97.33% 0.0041 157.18;    /* #f4f7f5, the page */
  --b3: 93.26% 0.0108 158.84;    /* #e3ebe6, borders and wells */
  --bc: 27.81% 0.0296 256.85;    /* #1f2937 */
  --in: 60.89% 0.1109 221.72;    /* #0891b2 */
  --inc: 100% 0 0;
  --su: 62.71% 0.1699 149.21;    /* #16a34a */
  --suc: 100% 0 0;
  --wa: 76.86% 0.1647 70.08;     /* #f59e0b */
  --wac: 20% 0.05 70;
  --er: 57.71% 0.2152 27.33;     /* #dc2626 */
  --erc: 100% 0 0;
  --rounded-box: 1rem;
  --rounded-btn: 0.625rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.97;
  --border-btn: 1px;
  --tab-border: 2px;
  --tab-radius: 0.5rem;
}

[data-theme='dark'] {
  color-scheme: dark;
  --p: 72.27% 0.1920 149.58;     /* #22c55e — forest green is too dark to read on slate */
  --pc: 26.64% 0.0628 152.93;    /* #052e16 */
  --s: 32.78% 0.0425 176.18;     /* #1a3c34 */
  --sc: 92.76% 0.0058 264.53;
  --a: 84.52% 0.1299 164.98;     /* #6ee7b7 mint */
  --ac: 26.64% 0.0628 152.93;
  --n: 37.17% 0.0392 257.29;     /* #334155 */
  --nc: 92.76% 0.0058 264.53;
  --b1: 27.95% 0.0368 260.03;    /* #1e293b, cards */
  --b2: 20.77% 0.0398 265.75;    /* #0f172a, the page */
  --b3: 18.02% 0.0325 266.62;    /* #0b1120 */
  --bc: 92.76% 0.0058 264.53;    /* #e5e7eb */
  --in: 60.89% 0.1109 221.72;
  --inc: 100% 0 0;
  --su: 72.27% 0.1920 149.58;
  --suc: 26.64% 0.0628 152.93;
  --wa: 76.86% 0.1647 70.08;
  --wac: 20% 0.05 70;
  --er: 63.7% 0.208 25.3;        /* #ef4444: #dc2626 is too dark on slate */
  --erc: 100% 0 0;
  --rounded-box: 1rem;
  --rounded-btn: 0.625rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.97;
  --border-btn: 1px;
  --tab-border: 2px;
  --tab-radius: 0.5rem;
}

/* ── Site-wide behaviour ──────────────────────────────────────────────── */

/* A visible focus ring for keyboard users on every page. Several pages
   removed the browser's outline with `outline: none` and put nothing back,
   which leaves a keyboard user unable to see where they are. :focus-visible
   keeps it off for mouse clicks. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

::selection {
  background: oklch(var(--p) / 0.25);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Shared page chrome (the standalone pages) ────────────────────────── */

/* The sticky footer is right on a desktop — the links stay in reach — and
   wrong on a phone, where it is 80-100 px of a 700 px screen permanently
   covering whatever is being read. On phones it goes back into the flow. */
@media (max-width: 640px) {
  html body footer.site-foot {
    position: static;
  }
}

/* A card that lifts under the pointer: the one hover affordance the
   standalone pages share. Opt-in, so nothing moves that did not before. */
.nm-lift {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
  .nm-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px -12px rgba(15, 23, 42, 0.28);
  }
}

/* On a tablet or a short laptop screen the sticky footer is the same fault
   as on a phone — 80-100 px always over the page (at 1024 x 768 it covered
   the pricing cards' buttons). It stays sticky only where there is room. */
@media (max-width: 1024px), (max-height: 800px) {
  html body footer.site-foot {
    position: static;
  }
}

/* Touch screens: every control on these pages at least 32 px where a
   finger meets it. The header links were 20 px tall, the theme switch 18,
   the footer's icons 18 (WCAG 2.2 asks 24). Hit area grows, not type. */
@media (pointer: coarse) {
  nav[data-auth-nav] a,
  nav[data-auth-nav] button,
  .auth-foot a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }
  #btnTheme,
  #btnPrintTerms,
  .site-foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
  }
}

/* The guide and data links in the standalone pages' footer (a row of plain
   links a crawler follows to the zoning, ward and data pages). */
.site-foot-guides { margin-top: 6px; line-height: 2; }