/* 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; }
}