/* Mobile-first, no framework, no web fonts, no JS.
   No Google Fonts is deliberate: nothing leaves the visitor's browser to a third
   party, so the site needs no cookie banner and raises no GDPR transfer question.

   Dark mode is a zero-JS CSS toggle: a hidden checkbox in the header flips a set
   of theme tokens via body:has(#darkmode:checked). Single-page sites, so no
   cross-page persistence is needed and no localStorage/JS is required. Light is
   the default; the visitor opts into dark. --brand (hero background, buttons)
   stays fixed across themes; --accent (links/rules on the page background) is
   the token that has to change so text stays readable on a dark surface. */

:root {
  --card: #fff;
  --line: rgba(0,0,0,.12);
  --accent: var(--brand);
  --muted: rgba(0,0,0,.55);
}

/* Dark theme — opted into via the header toggle. */
body:has(#darkmode:checked) {
  --paper: #14171a;
  --ink: #e9ebee;
  --card: #1e2226;
  --line: rgba(255,255,255,.14);
  --accent: #7fb2ff;
  --muted: rgba(255,255,255,.6);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }

.bar {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
  align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.mark { font-weight: 700; letter-spacing: .01em; }
.bar nav { display: flex; gap: 1rem; }
.bar a { text-decoration: none; }
.bar a:hover, .bar a:focus { text-decoration: underline; }

/* Dark-mode toggle: the checkbox is visually hidden, the label is the button. */
.dm-input { position: absolute; opacity: 0; width: 0; height: 0; }
.dm-toggle {
  cursor: pointer; user-select: none;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .6rem; font-size: 1rem; line-height: 1;
  background: var(--paper);
}
.dm-toggle::before { content: "🌙 Mörkt"; font-size: .85rem; }
body:has(#darkmode:checked) .dm-toggle::before { content: "☀️ Ljust"; }
.dm-input:focus-visible + .dm-toggle { outline: 2px solid var(--accent); outline-offset: 2px; }

main > section { padding: 2.5rem 1.25rem; max-width: 44rem; margin: 0 auto; }

.hero {
  max-width: none; text-align: center;
  padding: 4rem 1.25rem;
  background: var(--brand); background-size: cover; background-position: center;
  color: #fff;
  position: relative;
}
.hero p { font-size: 1.15rem; margin: 0 0 1.5rem; }
.cta {
  display: inline-block; padding: .8rem 1.6rem;
  background: #fff; color: #171b1f;
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
}
.cta:hover, .cta:focus { filter: brightness(.93); }
.contact .cta { background: var(--brand); color: #fff; }
.hero-tel {
  display: block; margin-top: .9rem;
  color: #fff; font-size: 1.1rem; font-weight: 600;
  text-decoration: none; letter-spacing: .02em;
}
.hero-tel:hover, .hero-tel:focus { text-decoration: underline; }

/* Hero photo placeholder for spec sites: a faint diagonal weave over the brand
   colour plus a corner label, so it reads clearly as "your photo lands here"
   rather than a flat colour block — without faking a real photo. */
.hero--ph {
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 14px, rgba(255,255,255,0) 14px 28px);
}
.hero-phlabel {
  position: absolute; top: .8rem; right: .8rem;
  background: rgba(0,0,0,.38); color: #fff;
  font-size: .8rem; padding: .3rem .6rem; border-radius: 999px;
  letter-spacing: .02em;
}

.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.cards li {
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cards h3 { margin-bottom: .25em; }
.cards p { margin: 0; }
.price { font-weight: 600; margin-top: .5rem !important; color: var(--accent); }

.grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
.grid img { border-radius: var(--radius); object-fit: cover; aspect-ratio: 3/2; }

.ph {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--card); aspect-ratio: 3/2; color: var(--muted);
  font-size: .95rem; text-align: center; padding: .5rem;
}
.ph-note { margin-top: .9rem; }

.testimonials blockquote {
  margin: 0 0 1rem; padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent); background: var(--card);
  border-radius: var(--radius);
}
.testimonials blockquote p { margin: 0 0 .5rem; }
.testimonials cite { font-style: normal; font-weight: 600; opacity: .8; }

dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem; margin: 0 0 1.5rem; }
dt { font-weight: 600; }
dd { margin: 0; }

footer {
  padding: 2rem 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  text-align: center;
}
footer p { margin: .25rem 0; }
.small { color: var(--muted); }

@media (min-width: 40rem) {
  h1 { font-size: 2.6rem; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================================================
   THEME LAYER — per-industry looks, chosen by the `theme` field
   in content.json (e.g. "theme": "daycare"). No field  =  the
   default look above (navy — builders, general trades). A theme
   class sits on <body>, so it overrides the inline :root palette
   purely by CSS specificity; nothing in the build pipeline changes.
   A theme is only ever CSS + an inline-SVG motif: no photos, no
   invented content, no JS, no web fonts — the honesty rules hold.

   Available themes (pick with factory/THEMES.md — bucket on the JOB, not the
   word; every palette below is axe-verified AA on all its surfaces):
     (none)     navy, square-ish        builders, general contractors, roofing
     daycare    sage-green + amber, rounded, paw motif    pet & child care
     wood       walnut + timber, square, grain motif      carpentry, joinery, floors
     tradeblue  clean blue + amber, square, blueprint     electrician, plumber, HVAC
     fresh      charcoal + rose, rounded, fine dots       salon, barber, beauty, nails
     appetite   paprika-red + warm, soft, steam motif     restaurant, café, bakery
     retail     near-black + berry, hairline diagonal     shop, boutique, studio
   Add a theme = add one block below. That is the entire system.
   ============================================================ */

/* --- daycare: warm, friendly, rounded ----------------------- */
.theme-daycare {
  --brand: #2f7d5b;                 /* sage-green hero + buttons */
  --ink: #2b2723;                   /* warm near-black text */
  --paper: #faf7f1;                 /* warm cream page */
  --card: #fff;
  --line: rgba(47,125,91,.16);
  --accent: #9c5715;                /* amber — links, prices (AA ≥4.5 on cream/white, axe-verified) */
  --muted: rgba(43,39,35,.72);
  --radius: 18px;                   /* rounder reads friendlier */
}
.theme-daycare .cards li { box-shadow: 0 2px 12px rgba(47,125,91,.07); }
.theme-daycare .cta { border-radius: 999px; }   /* pill = softer */
/* daycare hero: a soft paw-print motif over the green, replacing
   the generic diagonal weave. Decoration, not a claimed photo —
   the "Er bild här" label still invites the client's own image. */
.theme-daycare .hero--ph {
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><g fill='rgba(255,255,255,0.10)'><ellipse cx='36' cy='45' rx='12' ry='9.5'/><ellipse cx='20' cy='29' rx='5' ry='6'/><ellipse cx='30' cy='22' rx='5' ry='6'/><ellipse cx='42' cy='22' rx='5' ry='6'/><ellipse cx='52' cy='29' rx='5' ry='6'/></g></svg>");
  background-size: 72px 72px;
}
body.theme-daycare:has(#darkmode:checked) { --accent: #e0a24e; --paper: #16130f; --card: #1f1a14; }

/* --- wood: carpenters / joinery ----------------------------- */
.theme-wood {
  --brand: #6b4a2b;                 /* walnut hero */
  --ink: #241c14;
  --paper: #f6f1ea;                 /* light-oak page */
  --card: #fff;
  --line: rgba(107,74,43,.18);
  --accent: #9a5b23;                /* warm timber accent (AA 4.80 on oak, axe-verified) */
  --muted: rgba(36,28,20,.72);
  --radius: 6px;                    /* squarer reads crafted, solid */
}
.theme-wood .hero--ph {
  background-image:
    repeating-linear-gradient(92deg, rgba(255,255,255,.05) 0 3px, rgba(0,0,0,.06) 3px 6px, rgba(255,255,255,0) 6px 22px);
}
body.theme-wood:has(#darkmode:checked) { --accent: #cf9256; --paper: #14100c; --card: #1d160f; }

/* --- tradeblue: electricians, plumbers, HVAC ---------------- */
.theme-tradeblue {
  --brand: #12467a;                 /* clean electric blue */
  --ink: #1c2530;
  --paper: #f5f8fc;                 /* cool near-white */
  --card: #fff;
  --line: rgba(18,70,122,.16);
  --accent: #9a5b12;                /* amber — reads "safety", AA on paper */
  --muted: rgba(28,37,48,.72);
  --radius: 6px;                    /* square = solid, technical */
}
/* blueprint grid: thin white ruling over the blue. Decoration, not a claim. */
.theme-tradeblue .hero--ph {
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M40 0H0V40' fill='none' stroke='rgba(255,255,255,0.11)' stroke-width='1'/></svg>");
  background-size: 40px 40px;
}
body.theme-tradeblue:has(#darkmode:checked) { --accent: #e0a24e; --paper: #101720; --card: #18212c; }

/* --- fresh: salons, barbers, beauty, nails ------------------ */
.theme-fresh {
  --brand: #33313a;                 /* soft charcoal — elegant, unisex */
  --ink: #2a2830;
  --paper: #faf7f8;                 /* barely-warm white */
  --card: #fff;
  --line: rgba(51,49,58,.14);
  --accent: #9c4666;                /* rose — links, prices, AA on paper */
  --muted: rgba(42,40,48,.72);
  --radius: 14px;                   /* rounded reads calm, cared-for */
}
.theme-fresh .cta { border-radius: 999px; }
/* fine dot field over the charcoal — quiet texture, not a photo. */
.theme-fresh .hero--ph {
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle cx='4' cy='4' r='1.4' fill='rgba(255,255,255,0.14)'/></svg>");
  background-size: 28px 28px;
}
body.theme-fresh:has(#darkmode:checked) { --accent: #e59ab4; --paper: #16141a; --card: #201d25; }

/* --- appetite: restaurants, cafés, bakeries ----------------- */
.theme-appetite {
  --brand: #a3341f;                 /* warm paprika-red */
  --ink: #2b211c;
  --paper: #fbf6ee;                 /* warm cream */
  --card: #fff;
  --line: rgba(163,52,31,.16);
  --accent: #a85410;                /* toasted amber — links, prices */
  --muted: rgba(43,33,28,.72);
  --radius: 10px;                   /* soft, inviting */
}
/* soft rising "steam" arcs over the red — appetite cue, decorative. */
.theme-appetite .hero--ph {
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='2'><path d='M15 50c6-8-6-14 0-22'/><path d='M30 50c6-8-6-14 0-22'/><path d='M45 50c6-8-6-14 0-22'/></g></svg>");
  background-size: 60px 60px;
}
body.theme-appetite:has(#darkmode:checked) { --accent: #e6923a; --paper: #17110d; --card: #211812; }

/* --- retail: shops, boutiques, studios ---------------------- */
.theme-retail {
  --brand: #2b2b30;                 /* confident near-black */
  --ink: #26262b;
  --paper: #faf9f7;                 /* clean warm white */
  --card: #fff;
  --line: rgba(43,43,48,.14);
  --accent: #8a2f52;                /* berry — one confident accent */
  --muted: rgba(38,38,43,.72);
  --radius: 8px;
}
/* hairline diagonal — a whisper of texture, gallery-clean otherwise. */
.theme-retail .hero--ph {
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1px, rgba(255,255,255,0) 1px 14px);
}
body.theme-retail:has(#darkmode:checked) { --accent: #e08aab; --paper: #131316; --card: #1d1d21; }