/* ============================================================
   Anbud Direkt — designsystemets grund
   Delas av index.html och undersidorna. Här ligger bara det som
   är gemensamt: typsnitt, färger, typografi, knappar, nav,
   skymningssektionen och footern. Sidspecifik layout bor kvar i
   respektive sidas <style>.
   ============================================================ */

@font-face {
  font-family: "Erode";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/erode-variable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Erode";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/erode-variable-italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/switzer-variable.woff2") format("woff2-variations");
}

:root {
  --palladian: #EEE9DF;
  --palladian-deep: #E6DFD1;
  --oatmeal: #C9C1B1;
  --blue: #2C3B4D;
  --abyssal: #1B2632;
  --flame: #FFB162;
  --truffle: #A35139;
  --ink: #212D3B;
  --ink-soft: #4A5666;
  --serif: "Erode", Georgia, serif;
  --sans: "Switzer", -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
section[id], header[id] { scroll-margin-top: 5.5rem; }

body {
  font-family: var(--sans);
  background: var(--palladian);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--flame); color: var(--abyssal); }

/* ---- grain overlay ---- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 9s steps(6) infinite;
}
@keyframes grainShift {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-2%,1%); }
  40% { transform: translate(1%,-2%); }
  60% { transform: translate(-1%,2%); }
  80% { transform: translate(2%,1%); }
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -0.015em; color: var(--ink); }
h1 { font-size: clamp(2.6rem, 5.7vw, 4.85rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.05rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.25; }
.em-i { font-style: italic; font-weight: 400; }
.em-flame { color: var(--truffle); font-style: italic; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--truffle);
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: var(--truffle); border-radius: 2px;
  display: inline-block;
}

.lede { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.6; color: var(--ink-soft); max-width: 38em; }

p { color: var(--ink-soft); max-width: 62ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  padding: 1rem 1.75rem;
  border-radius: 100px;
  text-decoration: none;
  border: none; cursor: pointer;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-out), background 0.25s;
  will-change: transform;
}
.btn .arr { transition: transform 0.35s var(--ease-spring); display: inline-flex; }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--abyssal); color: var(--palladian); box-shadow: 0 1px 2px rgba(27,38,50,0.2); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px rgba(27,38,50,0.45); }
.btn-flame { background: var(--flame); color: var(--abyssal); }
.btn-flame:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px rgba(255,177,98,0.6); }
/* Sekundärknappen. Den var tidigare bara färgad text med en linje under, utan
   ram, bakgrund och rundning, och lästes därför inte som en knapp alls: två
   granskare frågade oberoende av varandra varför den inte var en knapp som den
   intill. Den egna bakgrunden gör dessutom att texten står mot en känd yta i
   stället för mot ett foto, vilket var den andra halvan av problemet. */
.btn-ghost {
  background: rgba(238, 233, 223, 0.92);
  color: var(--ink);
  border: 1px solid var(--oatmeal);
  padding: 1rem 1.75rem;
  border-radius: 100px;
}
.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--truffle);
  box-shadow: 0 10px 28px -8px rgba(27,38,50,0.25);
}

/* ---------- Nav ----------
   Regeln är knuten till #nav och inte till elementet nav: sidorna har fler
   nav-element (brödsmulor, stigen), och de ska inte fästas i överkanten. */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), padding 0.4s var(--ease-out);
  padding: 1.4rem 0;
}
#nav.scrolled {
  background: rgba(238, 233, 223, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(201,193,177,0.5);
  padding: 0.85rem 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
/* Logotypen ligger som symbol i assets/logo.svg och ärver färg via
   currentColor — skifferblå på papper, gräddvit på natt. Aldrig tvåfärgad. */
.brand svg { width: 34px; height: 34px; color: var(--blue); }
.brand-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 2.2rem; list-style: none; }
.nav-links a:not(.btn) {
  text-decoration: none; color: var(--ink-soft); font-size: 0.9375rem; font-weight: 500;
  transition: color 0.2s; position: relative;
}
.nav-links a:not(.btn):hover { color: var(--ink); }
/* Aktuell sida markeras med samma streck som .eyebrow använder. En artikel
   markerar sin sektion med aria-current="location" och får samma streck. */
.nav-links a[aria-current] { color: var(--ink); }
.nav-links a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1.5px; background: var(--truffle);
}
.nav-links .btn { padding: 0.65rem 1.3rem; font-size: 0.9rem; }
.nav-toggle { display: none; }

/* ---------- Navets undermeny ----------
   Föräldern är en knapp och inte en länk. En rad som både navigerar och fäller
   ut är tvetydig, och på pekskärm finns ingen hover som kan skilja de två
   avsikterna: första tryckningen skulle antingen lämna sidan eller kännas
   trasig. Länkarna i panelen bär navigeringen, knappen bara utfällningen.

   Panelen döljs med visibility och inte bara opacity, så länkarna faller ur
   tabbordningen när den är stängd. Annars kan tangentbordsfokus hamna på en
   länk som ingen ser. */
.has-sub { position: relative; }
.sub-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  position: relative;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 0.9375rem; font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.2s;
}
.has-sub:hover > .sub-toggle,
.sub-toggle[aria-expanded="true"] { color: var(--ink); }
.sub-toggle .chev { width: 9px; height: 9px; transition: transform 0.25s var(--ease-out); }
.has-sub:hover > .sub-toggle .chev,
.sub-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Föräldern bär samma streck som en aktuell toppnivålänk när någon av
   undersidorna är den man står på. Utan det tappar navet var man är. */
.has-sub:has(a[aria-current]) > .sub-toggle { color: var(--ink); }
.has-sub:has(a[aria-current]) > .sub-toggle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1.5px; background: var(--truffle);
}

.subnav {
  list-style: none;
  position: absolute; top: calc(100% + 0.9rem); left: -0.6rem;
  min-width: 13.5rem;
  background: var(--palladian);
  border: 1px solid var(--oatmeal);
  border-radius: 14px;
  padding: 0.45rem;
  box-shadow: 0 22px 44px -22px rgba(27,38,50,0.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
}
/* Brygga över luftspalten, så musen inte tappar menyn på vägen ner. */
.subnav::before {
  content: ""; position: absolute; left: 0; right: 0; top: -0.9rem; height: 0.9rem;
}
.has-sub:hover > .subnav,
.sub-toggle[aria-expanded="true"] + .subnav {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-links .subnav a:not(.btn) {
  display: block; padding: 0.6rem 0.8rem; border-radius: 9px;
  color: var(--ink-soft);
  transition: background 0.2s, color 0.2s;
}
.nav-links .subnav a:not(.btn):hover { background: var(--palladian-deep); color: var(--ink); }
.nav-links .subnav a[aria-current] { background: var(--palladian-deep); color: var(--ink); font-weight: 600; }
/* Strecket hör till toppnivån. I panelen markerar bakgrunden i stället. */
.nav-links .subnav a[aria-current]::after { display: none; }

/* ---------- Språkväljaren ----------
   Byggd som en till .has-sub, så klick, Escape, fokus och mobilbeteende faller
   ut av samma kod i site.js. Tre saker skiljer den från Om oss-menyn:

   1. Den står efter knappen och är därför sidans sista nav-post. Panelen
      högerställs, annars skulle den växa ut över skärmkanten.
   2. Jordgloben säger vad menyn gör innan man läser koden i den. Den behöver
      egen storlek: utan den ärver svg:n chevronens nio pixlar och blir en
      suddig prick.
   3. Språknamnen står på sitt eget språk (Svenska, English, Dansk, Norsk),
      eftersom den som söker sitt språk letar efter ordet han känner igen,
      inte efter översättningen av det. */
.nav-links .lang { margin-left: -0.9rem; }
.lang .sub-toggle { gap: 0.32rem; letter-spacing: 0.04em; }
.lang .globe { width: 14px; height: 14px; flex: none; opacity: 0.85; }
.has-sub.lang:hover > .sub-toggle .globe,
.lang .sub-toggle[aria-expanded="true"] .globe { opacity: 1; }
.lang .subnav { left: auto; right: -0.6rem; min-width: 9.5rem; }

@media (max-width: 960px) {
  .nav-links .lang { margin-left: 0; }
  .lang .subnav { right: auto; }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ---------- Section base ---------- */
section.block { padding: clamp(7rem, 12vw, 11rem) 0; }

/* ---------- Stigen: lodrät vägvisare i vänsterspalten ----------
   Samma grepp som stigen i "Så arbetar vi": en punkt per anhalt, en linje som
   fylls medan man rullar och den anhalt man befinner sig vid markerad. Används
   av medarbetarsidan (en punkt per person) och artiklarna (en per mellanrubrik).
   Sidan som använder railen ansvarar för spalten den ligger i; railen kräver
   bredd och visas därför först från 1000 px. */
.rail { display: none; }

@media (min-width: 1000px) {
  .rail {
    display: block;
    position: sticky; top: 8.5rem;
    align-self: start;
    padding-left: 0.15rem;
  }
  .rail-line { position: absolute; left: 4.5px; top: 21px; bottom: 21px; width: 1.5px; }
  .rail-line .track { position: absolute; inset: 0; background: var(--oatmeal); opacity: 0.6; }
  .rail-line .fill {
    position: absolute; top: 0; left: 0; right: 0;
    height: 0%; background: var(--truffle);
    transition: height 0.15s linear;
  }
  .rail ul { list-style: none; position: relative; z-index: 1; }
  .rail a {
    display: flex; align-items: flex-start; gap: 0.95rem;
    padding: 0.6rem 0;
    font-size: 0.9375rem; line-height: 1.4; color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.25s;
  }
  .rail .dot {
    flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
    margin-top: 0.32em;
    background: var(--palladian);
    border: 1.5px solid var(--oatmeal);
    transition: background 0.4s var(--ease-out), border-color 0.4s, transform 0.45s var(--ease-spring), box-shadow 0.4s var(--ease-out);
  }
  .rail li.passed .dot { background: var(--truffle); border-color: var(--truffle); }
  .rail li.current .dot {
    background: var(--flame); border-color: var(--abyssal);
    transform: scale(1.4);
    box-shadow: 0 0 0 5px rgba(255,177,98,0.22);
  }
  .rail li.current a { color: var(--ink); font-weight: 600; }
  .rail a:hover { color: var(--ink); }
  .rail a:hover .dot { border-color: var(--truffle); }
}

/* ---------- FAQ ----------
   Dragspelet används på startsidan och på /vad-vi-gor/. Det låg först inline
   i startsidans mall, vilket gjorde att samma markup på en annan sida
   renderade som en jättelik plusknapp med alla svar öppna. Mönster hör
   hemma i de delade filerna. Beteendet ligger i site.js. */
  .faq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
  .faq-grid > div:first-child { position: sticky; top: 7rem; }
  .faq-grid h2 { margin-bottom: 1.25rem; }
  .faq-item { border-top: 1px solid var(--oatmeal); }
  .faq-item:last-child { border-bottom: 1px solid var(--oatmeal); }
  .faq-q {
    width: 100%; background: none; border: none; cursor: pointer;
    font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; color: var(--ink);
    text-align: left; padding: 1.5rem 0;
    display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
    transition: color 0.2s;
  }
  .faq-q:hover { color: var(--truffle); }
  .faq-q .icon {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    border: 1.5px solid var(--oatmeal);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.45s var(--ease-spring), background 0.3s, border-color 0.3s;
  }
  .faq-q .icon svg { width: 12px; height: 12px; }
  .faq-item.open .faq-q .icon { transform: rotate(45deg); background: var(--abyssal); border-color: var(--abyssal); }
  .faq-item.open .faq-q .icon svg path { stroke: var(--flame); }
  .faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height 0.5s var(--ease-out);
  }
  .faq-a p { padding-bottom: 1.6rem; font-size: 0.9875rem; max-width: 58ch; }

@media (max-width: 960px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid > div:first-child { position: static; }
}

/* ---------- Finstilt på mörk botten ---------- */
/* Stödtexten i de mörka avsluten har en enda behandling. Tidigare fanns tre
   storlekar och fyra opaciteter för samma sorts text, vilket remissen räknade
   till som spretighet: sex rader bar sju stilkombinationer. */
.micro { font-size: 0.9375rem; color: rgba(238,233,223,0.72); margin-top: 1.75rem; }
.micro a { color: var(--flame); text-decoration: none; border-bottom: 1px solid rgba(255,177,98,0.4); }

/* ---------- Final CTA (skymning — pendang till gryningsheron) ----------
   Skymningsfotot är mörkt redan i överkant, så det kan inte självt bära
   övergången från papper som mellanbilden gör. I stället tonar sektionens
   egen bakgrund ner till natt först, och fotot stiger fram ur mörkret. */
.final {
  /* Skymningsrampen och bildmasken mäts båda mot denna, så mörkret alltid
     hunnit falla exakt när innehållet börjar — oavsett skärmhöjd. */
  --dusk-fall: clamp(16rem, 30vw, 27rem);
  color: var(--palladian);
  position: relative; overflow: hidden;
  padding: var(--dusk-fall) 0 clamp(8rem, 14vw, 13rem);
  background: linear-gradient(
    to bottom,
    var(--palladian) 0,
    #E2DACC calc(var(--dusk-fall) * 0.22),
    #B4B1A8 calc(var(--dusk-fall) * 0.46),
    #7C828E calc(var(--dusk-fall) * 0.68),
    #454F5D calc(var(--dusk-fall) * 0.86),
    var(--abyssal) var(--dusk-fall)
  );
}
.final-media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  /* Fotot hålls osynligt genom rampens ljusa del och är helt framme strax
     efter att natten fallit — det stiger fram ur mörkret. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--dusk-fall) * 0.5),
    rgba(0,0,0,0.4) calc(var(--dusk-fall) * 0.78),
    rgba(0,0,0,0.85) var(--dusk-fall),
    #000 calc(var(--dusk-fall) + 7rem));
  mask-image: linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--dusk-fall) * 0.5),
    rgba(0,0,0,0.4) calc(var(--dusk-fall) * 0.78),
    rgba(0,0,0,0.85) var(--dusk-fall),
    #000 calc(var(--dusk-fall) + 7rem));
}
.final-media img {
  position: absolute; left: 0; top: -6%;
  width: 100%; height: 112%;
  object-fit: cover; object-position: center 40%;
  will-change: transform;
}
/* Scrim ligger som eget lager ovanför bilden, utanför den maskade boxen. */
.final::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, var(--abyssal) 0%, rgba(27,38,50,0.4) 12%, rgba(27,38,50,0) 30%),
    radial-gradient(ellipse 90% 62% at 50% 58%, rgba(27,38,50,0.45), rgba(27,38,50,0.15) 60%, rgba(27,38,50,0) 80%);
}
.final-inner { position: relative; z-index: 2; text-align: center; max-width: 680px; margin: 0 auto; }
/* Ingen egen opacitet här: .micro och .contact-alt bär samma behandling
   överallt, vilket var hela poängen med att slå ihop dem. */
.final-inner h2, .final-inner p { text-shadow: 0 1px 22px rgba(27,38,50,0.55); }
.final h2 { color: var(--palladian); font-size: clamp(2.25rem, 4.6vw, 3.75rem); margin-bottom: 1.5rem; }
.final p { color: rgba(238,233,223,0.72); margin: 0 auto 2.5rem; }
.final .micro { margin-top: 1.5rem; }
.contact-alt { margin-top: 3rem; font-size: 0.9375rem; color: rgba(238,233,223,0.72); }
.contact-alt a { color: var(--palladian); text-decoration: none; border-bottom: 1px solid rgba(238,233,223,0.35); transition: border-color 0.2s, color 0.2s; }
.contact-alt a:hover { color: var(--flame); border-color: var(--flame); }

/* ---------- Footer ----------
   Regeln är knuten till body > footer av samma skäl som navregeln sitter på
   #nav: footer är ett giltigt element inne i artiklar och citat, och ett
   citats källhänvisning ska inte bli en svart platta. */
body > footer {
  background: var(--abyssal); color: rgba(238,233,223,0.55);
  border-top: 1px solid rgba(238,233,223,0.1);
  padding: 3rem 0;
  font-size: 0.875rem;
}
.foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 0.6rem; color: var(--palladian); }
.foot-brand svg { width: 26px; height: 26px; color: var(--palladian); }
.foot-brand span { font-family: var(--serif); font-size: 1.05rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; list-style: none; }
.foot-links a { color: rgba(238,233,223,0.55); text-decoration: none; transition: color 0.2s; }
.foot-links a:hover { color: var(--palladian); }

/* ---------- Responsive: nav fälls till hamburgare ---------- */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--abyssal); border: none; cursor: pointer;
  }
  .nav-links.openm {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start;
    background: var(--palladian); padding: 1.5rem clamp(1.25rem,4vw,3rem) 2rem;
    box-shadow: 0 24px 40px -20px rgba(27,38,50,0.25);
    gap: 1.25rem;
  }
  .nav-links a[aria-current]::after { display: none; }

  /* Undermenyn på mobil: ingen svävande panel, utan en indragen grupp i
     listan. Den ligger utfälld från start, för innehållet är redan gömt
     bakom hamburgaren och att gömma det en gång till kostar en tryckning
     utan att ge något tillbaka. Knappen fäller ihop den för den som vill. */
  .has-sub { width: 100%; }
  .subnav {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    min-width: 0;
    background: none; border: none; border-radius: 0; box-shadow: none;
    border-left: 1px solid var(--oatmeal);
    margin: 0.9rem 0 0 0.1rem;
    padding: 0 0 0 1.05rem;
    display: grid; gap: 0.95rem;
  }
  .subnav::before { display: none; }
  .sub-toggle[aria-expanded="false"] + .subnav { display: none; }
  .nav-links .subnav a:not(.btn) { padding: 0; border-radius: 0; }
  .nav-links .subnav a[aria-current] { background: none; }
  .has-sub:has(a[aria-current]) > .sub-toggle::after { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .stone { opacity: 1; }
}