/* THEME "Norr" – stram skandinavisk/editoriell karaktär. Ren CSS ovanpå
   style.css. Systemfonter – ingen extern font behövs. */
:root {
  /* Temat sätter BAS-färgerna. De semantiska (--sea, --sand …) härleds i
     style.css och byts i mörkt läge — sätter temat dem direkt går mörkt
     läge förlorat för just det temat. */
  --sand-base: #f4f3ef;      /* kund-slot "Bakgrund": kritvit-varmgrå */
  --paper-base: #ffffff;
  --ink-base: #181a1b;
  --ink-2-base: #5a5d60;
  --sea-base: #2e5d4e;       /* kund-slot "Accent": gran */
  --sea-deep-base: #1c3a31;  /* kund-slot "Mörk" */
  --sun-base: #b0532e;       /* kund-slot "Varm": rost */
  --rule-base: #dcdbd5;
  --shadow: none;
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  line-height: 1.65;
}
h1, h2, h3 { font-family: inherit; font-weight: 800; letter-spacing: -0.03em; }

/* Masthead: vit, hård linjal */
/* Härlett ur --paper, inte hårdkodat vitt: --paper byts i mörkt läge,
   ett hexvärde gör det inte. Med vit masthead och ljus navtext blev
   menyn oläslig så fort besökaren hade mörkt läge. */
.masthead { background: color-mix(in srgb, var(--paper) 93%, transparent); border-bottom: 1px solid var(--ink); }
.brand .mark { border-radius: 0; background: var(--ink); font-family: inherit; font-weight: 800; }
nav a { text-transform: uppercase; font-size: .78rem; letter-spacing: .1em; font-weight: 600; }
/* Menyknappen och panelen på smal skärm: kantiga som resten av temat. */
.menu-toggle { border-radius: 4px; border-color: var(--ink); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.theme-toggle { border-radius: 4px; }
.site-menu:popover-open { border-bottom-color: var(--ink); }
.site-menu:popover-open nav a { font-size: .9rem; }
.site-menu:popover-open .langs a { border-radius: 2px; }

/* Hero: ljus, enorm ink-typografi, rostfärgad markör */
.hero {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 5.5rem 0 4.5rem;
}
.hero .eyebrow {
  color: var(--sun-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .18em;
}
.hero h1 { font-size: clamp(2.8rem, 7.5vw, 5rem); }
.hero h1::after {
  content: ""; display: block; width: 4.5rem; height: .38rem;
  background: var(--sun); margin-top: 1.4rem;
}
.hero .lede { color: var(--ink-2); }
/* Knappen är bläck med papperstext, och de två byter plats i mörkt läge:
   ljus knapp med mörk text. Med vit text blev den vitt på ljust. Hovern
   (--sea-deep-fill, ytornas tak och golv i style.css) är mörk i ljust
   läge och ljus i mörkt, så samma text fungerar där. --sea-deep rakt av
   hade inget tak, och "Mörk" går att sätta till vad som helst i admin.
   Spökknappen fylls med bläck vid hover i stället för att ärva
   hoverfärgen: bläcktext på den mörka hoverfärgen syntes inte. */
.cta { border-radius: 4px; background: var(--ink); color: var(--paper); box-shadow: none; font-weight: 700; }
.cta:hover { transform: none; background: var(--sea-deep-fill); }
.cta.ghost { border: 1px solid var(--ink); color: var(--ink); }
.cta.ghost:hover { background: var(--ink); color: var(--paper); }

/* Rubriker/kluster */
.section-head h2 { color: var(--ink); }
.prose h2, .prose h3, .contact h2, .unlock h2 { color: var(--ink); }
.prose a { color: var(--sea-text); text-decoration-thickness: 2px; }
.cluster-title { color: var(--ink-2); font-size: .85rem; letter-spacing: .16em; }
.cluster-title::before { width: 2.4rem; background: var(--sun); }

/* Kort: platta, kantlinje i stället för skugga */
.cards article {
  border-radius: 2px; border: 1px solid var(--rule);
  box-shadow: none;
}
.cards article:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.pin {
  border-radius: 2px; background: transparent;
  border: 1px solid var(--sea); color: var(--sea-text);
}

/* Checklista: kantiga boxar. Avbockad är rutan en yta i sajtens färg,
   --sea-fill, med papperstext som bock (style.css). */
.checklist li::before { border-radius: 2px; border-color: var(--ink); }
.checklist li.checked::before { background: var(--sea-fill); border-color: var(--sea-fill); }

/* Galleri: rå bildkant, platt bildtextbalk */
.gallery figure { border-radius: 2px; border: none; background: transparent; }
.gallery figcaption {
  background: rgba(24, 26, 27, .78);
  padding: .5rem .7rem;
}
.lightbox { background: rgba(20, 21, 22, .95); }
.lightbox img { border-radius: 0; }

/* Kalender */
.calendar-embed iframe { border-radius: 2px; }

/* Kontakt/upplåsning */
.contact input, .contact textarea, .unlock input { border-radius: 4px; border-color: #c7c6c0; }
.contact button, .unlock button { border-radius: 4px; }

/* Footer */
footer { border-top: 2px solid var(--ink); }
/* Sociala kanaler: kantiga som knapparna. */
.social a { border-radius: 4px; }

/* Foto-hero: slöjan är sidans egen bakgrund, inte vitt.
   Fotot blir en diskret ton bakom typografin i BÅDA lägena. Med vit
   slöja och ljus herotext låg rubriken nästan osynlig på en ljus yta
   mitt i en mörk sida.

   Smal skärm: fotot står som ett eget band överst (style.css), och
   texten under det på papperet, precis som i heron utan foto. Förut låg
   texten på slöjan där också. På en telefon täcker den nästan hela
   heron, så fotot syntes knappt, och där det syntes gav det överraden
   2,1:1 och ingressen 3,5:1.

   Bred skärm: textspalten till vänster ligger på nästan helt papper
   (--hero-veil-col, se style.css), och fotot växer fram mot höger, som
   en bild bredvid en spalt i en tidning. Förut gav fotot genom den
   tunna överkanten av slöjan överraden ned till 1,8:1 och ingressen
   3,4:1.

   Överraden är rost på papper, genom textfärgernas tak (--sun-text,
   style.css): på rent papper minst 4,5:1 vilken färg kunden än valt,
   men inte mer. Allt foto som skymtar igenom tar av den. På foto-heron
   dras den därför en femtedel mot bläcket: mörkare i ljust läge, ljusare
   i mörkt, och fortfarande rost. Uppmätt minst 6,0:1 i ljust läge och
   8,3:1 i mörkt med temats färger. */
:root {
  --hero-veil-top: color-mix(in srgb, var(--paper) 55%, transparent);
  --hero-veil-bottom: color-mix(in srgb, var(--paper) 94%, transparent);
  --hero-veil-col: color-mix(in srgb, var(--paper) 88%, transparent);
  --hero-band: var(--paper);
}
@media (min-width: 48.01rem) {
  .hero.has-photo .eyebrow { color: color-mix(in oklab, var(--sun-text) 80%, var(--ink)); }
}