/* =========================================================
   LLS Skog & Maskintjänst, css/stil.css
   Minimalistisk, neutral, lugn. Mobile-first (375 px).
   ========================================================= */

/* ---------- Typsnitt (självhostade, inga externa resurser) ---------- */

@font-face {
  font-family: "Big Shoulders";
  src: url("../fonter/big-shoulders-v4-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Big Shoulders";
  src: url("../fonter/big-shoulders-v4-latin-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonter/work-sans-v24-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonter/work-sans-v24-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonter/ibm-plex-mono-v20-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variabler ---------- */

:root {
  --farg-vit: #FFFFFF;
  --farg-benvit: #F7F6F3;
  --farg-ljusgra: #E4E2DD;
  --farg-gran: #1F4A3D;        /* mörk grangrön, sparsam accent */
  --farg-salvia: #4F9A6E;      /* ENDA mättade färgen, bara ring-knappar */
  --farg-salvia-ljus: #5BA77B; /* hover, fortfarande AA mot knapptexten */
  --farg-knapptext: #0C1F17;   /* mörk text på salvia (kontrast ca 5:1) */
  --farg-text: #26312C;
  --farg-linje: #D8D5CE;
  --farg-fotnot: #CFDDD6;      /* ljus text på grangrön (kontrast ca 5:1) */

  --stil-rubrik: "Big Shoulders", Impact, "Arial Narrow", sans-serif;
  --stil-brod: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --stil-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ---------- Bas ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Sidan är enbart ljus; hindrar forcerat mörkläge (FB/Android auto-dark)
     från att invertera färgerna */
  color-scheme: light;
}

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

body {
  margin: 0;
  font-family: var(--stil-brod);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--farg-text);
  background: var(--farg-vit);
}

img {
  max-width: 100%;
  height: auto;
}

/* Ta bort 300 ms tap-delay på pekskärm, behåll panorering/zoom */
a {
  touch-action: manipulation;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

/* Fysiska egenskaper i stället för logiska (margin-inline m.fl.) genomgående:
   sidan är svenskspråkig (ingen RTL) och äldre webviews (FB/IG in-app på
   Chrome <87 / iOS <14.5) saknar stöd för logiska egenskaper. */
.omslag {
  max-width: 66rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Synligt tangentbordsfokus överallt */
:focus-visible {
  outline: 3px solid var(--farg-gran);
  outline-offset: 2px;
}

/* ---------- Hoppa till innehållet ---------- */

.hoppa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* :focus (inte :focus-visible) så skip-länken syns även i äldre webviews */
.hoppa:focus {
  position: fixed;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  padding: 0.9em 1.4em;
  background: var(--farg-gran);
  color: var(--farg-benvit);
  text-decoration: none;
  font-weight: 600;
  border-radius: 4px;
  outline-color: var(--farg-gran);
}

/* ---------- Ring-knappen (sidans enda mättade färg) ---------- */

.ring-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  min-width: 44px;
  padding: 0.75em 1.3em;
  background: var(--farg-salvia);
  color: var(--farg-knapptext);
  font-family: var(--stil-brod);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.ring-knapp:hover {
  background: var(--farg-salvia-ljus);
}

/* Nedtryckt: syns direkt vid tap på mobil (ingen hover där) */
.ring-knapp:active {
  background: #3F855D;
}

.ikon-lur {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Inline-varianten i "Ring för mer info"-raderna */
.ring-knapp--rad {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  vertical-align: middle;
}

/* ---------- Ikoner (enkla linje-SVG:er) ---------- */

.ikon {
  flex: none;
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--farg-gran);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ikon--hero {
  width: 36px;
  height: 36px;
}

.pil {
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Sidhuvud ---------- */

.sidhuvud {
  background: var(--farg-benvit);
  border-bottom: 1px solid var(--farg-linje);
}

.sidhuvud-inner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.logga {
  width: auto;
  height: 46px;
}

.sidhuvud-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.sidhuvud-namn {
  font-family: var(--stil-rubrik);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--farg-gran);
}

.sidhuvud-omrade {
  font-size: 0.85rem;
}

/* Ring-knappen i sidhuvudet visas först på bredare skärm;
   på mobil ersätts den av den fasta knappen i nederkant. */
.sidhuvud-ring {
  display: none;
  margin-left: auto;
}

/* ---------- Hero ---------- */

/* Fyller skärmen så toppen av Skogstjänster inte tjuvtittar under heron */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100lvh;
}

.hero-rubrik-band {
  background: var(--farg-vit);
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

h1 {
  font-family: var(--stil-rubrik);
  font-weight: 900;
  font-size: clamp(2.1rem, 8vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--farg-gran);
  max-width: 20ch;
}

.hero-plats {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.44em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--farg-gran);
}

/* Valen ligger sida vid sida på ALLA skärmbredder (Jonas 2026-07-05),
   precis som på desktop. Mobilen skalar ner rubrik/ikon/luft nedan;
   monotexterna hålls >=0.85rem (granskningsfynd F5). */
.hero-halvor {
  flex: 1 0 auto;
  display: grid;
  /* minmax(0,1fr) i stället för 1fr: annars vinner innehållets
     min-content och kolumnerna blir olika breda på smal skärm */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: 1px;
  background: var(--farg-linje);
  border-top: 1px solid var(--farg-linje);
}

.hero-halva {
  position: relative;
  display: flex;
  min-height: 280px;
  text-decoration: none;
  color: var(--farg-gran);
}

/* Neutral bakgrundsyta, byts enkelt mot drönarfoto/-video senare */
.hero-halva-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  overflow: hidden;
  transition: background-color 0.2s ease;
}

.hero-halva--skog .hero-halva-media {
  background: var(--farg-benvit);
}

.hero-halva--maskin .hero-halva-media {
  background: var(--farg-ljusgra);
}

.hero-halva--skog:hover .hero-halva-media {
  background: #F1F0EA;
}

.hero-halva--maskin:hover .hero-halva-media {
  background: #DDDAD3;
}

/* Nedtryckt: tap-feedback på mobil */
.hero-halva--skog:active .hero-halva-media {
  background: #ECEAE2;
}

.hero-halva--maskin:active .hero-halva-media {
  background: #D5D2CB;
}

/* Mobilbas: kompakt nog för en halv skärmbredd (ca 187px vid 375px);
   desktopvärdena återställs oförändrade i 720px-blocket. */
.hero-halva-innehall {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Vertikalt centrerat precis som på desktop (halvorna är höga
     eftersom heron fyller skärmen) */
  justify-content: center;
  gap: 0.7rem;
  text-align: left;
  padding: 1.5rem 1rem;
}

.hero-halva-topp {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* Mono-domänetikett, knyter hero-blocket till sektionsetiketten */
.hero-halva-tag {
  font-family: var(--stil-mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--farg-gran);
}

.hero-halva-rubrik {
  font-family: var(--stil-rubrik);
  font-weight: 900;
  font-size: clamp(1.3rem, 5.6vw, 1.9rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--farg-gran);
}

/* Mono-index: exakt scope i halvan (signatur).
   0.85rem är golvet (F5) — krymps INTE i den smala mobilkolumnen. */
.hero-halva-index {
  font-family: var(--stil-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--farg-text);
  max-width: 34ch;
}

.hero-halva-till {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  margin-top: 0.2rem;
  font-family: var(--stil-brod);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--farg-gran);
  text-underline-offset: 4px;
}

.hero-halva:hover .hero-halva-till,
.hero-halva:focus-visible .hero-halva-till {
  text-decoration: underline;
}

.hero-halva:focus-visible {
  outline-offset: -4px;
}

/* ---------- Sektioner ---------- */

.sektion {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.sektion--vit {
  background: var(--farg-vit);
}

.sektion--ljusgra {
  background: var(--farg-ljusgra);
}

main[id],
section[id] {
  scroll-margin-top: 1rem;
}

/* Mono-domänetikett över sektionsrubriken, samma system som hero-taggen */
.sektion-kicker {
  font-family: var(--stil-mono);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--farg-gran);
  margin-bottom: 0.55rem;
}

h2 {
  font-family: var(--stil-rubrik);
  font-weight: 900;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--farg-gran);
}

h2::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 3px;
  margin-top: 0.55rem;
  background: var(--farg-gran);
}

.sektion-intro {
  margin-top: 1.1rem;
  font-size: 1.05rem;
  max-width: 52ch;
}

/* ---------- Tjänstlistor ---------- */

.tjanstlista {
  list-style: none;
  padding: 0;
  margin-top: 1.75rem;
  max-width: 44rem;
}

/* Register-rad: ikon | namn+rad */
.tjanst {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.1rem;
  align-items: start;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
  border-top: 1px solid var(--farg-linje);
}

.tjanst:last-child {
  border-bottom: 1px solid var(--farg-linje);
}

h3 {
  font-family: var(--stil-rubrik);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--farg-gran);
  margin-bottom: 0.35rem;
}

.tjanst-text p {
  max-width: 46ch;
}

/* Siffror/specs i IBM Plex Mono, liten skala */
.spec {
  font-family: var(--stil-mono);
  font-size: 0.9em;
}

/* Sidnot under en tjänst (t.ex. tunna-specen under Gödselkörning) */
.tjanst-not {
  margin-top: 0.55rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--farg-linje);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--farg-text);
}

/* ---------- "Ring för mer info"-raderna ---------- */

.ring-rad {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--farg-linje);
  font-size: 1.05rem;
}

/* ---------- Sidfot ---------- */

.sidfot {
  background: var(--farg-gran);
  color: var(--farg-benvit);
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}

.sidfot-namn {
  font-family: var(--stil-rubrik);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sidfot-rad {
  margin-top: 0.4rem;
}

/* Telefonnumret som sidans viktigaste mätvärde */
.sidfot-tel-rad {
  margin-top: 1.4rem;
  line-height: 1.05;
}

.sidfot-tel-label {
  display: block;
  font-family: var(--stil-mono);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--farg-fotnot);
  margin-bottom: 0.45rem;
}

.sidfot a.sidfot-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.05em 0;
  margin: 0;
  font-family: var(--stil-rubrik);
  font-weight: 900;
  font-size: clamp(2rem, 7vw, 2.7rem);
  letter-spacing: 0.02em;
  color: var(--farg-benvit);
  text-decoration: none;
}

.sidfot a.sidfot-tel:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sidfot a {
  display: inline-block;
  padding: 0.65em 0.2em;
  margin: -0.5em -0.1em;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sidfot :focus-visible {
  outline-color: var(--farg-benvit);
}

.sidfot-platshallare {
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--farg-fotnot);
}

.sidfot-juridik {
  margin-top: 1.2rem;
  font-size: 0.9rem;
}

/* Säkrar 44px klickyta (hård regel 8) — generella .sidfot a ger bara ~42px */
.sidfot-juridik a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- Undersida: integritetspolicy ----------
   Dokumentlayout i sajtens register: BS-rubriker med h2-strecket,
   Work Sans-brödtext i smal mätbredd, mono för datumraden. */

.juridik {
  max-width: 44rem;
}

.juridik-uppdaterad {
  margin-top: 1.1rem;
  font-family: var(--stil-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farg-text);
}

.juridik h2 {
  margin-top: 2.75rem;
  font-size: 1.35rem;
}

.juridik p,
.juridik ul {
  margin-top: 0.9rem;
  max-width: 62ch;
}

.juridik ul {
  padding-left: 1.15rem;
}

.juridik li {
  margin-top: 0.4rem;
}

.juridik li::marker {
  color: var(--farg-gran);
}

/* Länkar i policytexten (globala a-element är annars ostilade) */
.juridik a {
  color: var(--farg-gran);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Fast ring-knapp i nederkant (mobil) ---------- */

.ring-fast {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--farg-benvit);
  border-top: 1px solid var(--farg-linje);
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
}

.ring-fast .ring-knapp {
  width: 100%;
  min-height: 52px;
  font-size: 1.05rem;
}

/* Ge plats för den fasta knappen så sidfoten inte skyms */
.sidfot {
  padding-bottom: 8rem;
}

/* ---------- Scroll-reveal (enda animationen)
   Innehållet döljs BARA när JS lagt .js-reveal på <html>,
   och bara när användaren inte begärt reducerad rörelse. ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  }

  .js-reveal .reveal--syns {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   Uppskalning
   ========================================================= */

@media (min-width: 720px) {
  .omslag {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Diskret fast sidhuvud så Ring-knappen alltid är nåbar på desktop */
  .sidhuvud {
    position: sticky;
    top: 0;
    z-index: 40;
  }

  .sidhuvud-ring {
    display: inline-flex;
  }

  main[id],
  section[id] {
    scroll-margin-top: 5.5rem;
  }

  .hero-rubrik-band {
    padding-top: 3.5rem;
    padding-bottom: 3rem;
    text-align: center;
  }

  h1 {
    margin-left: auto;
    margin-right: auto;
  }

  /* Sida-vid-sida gäller redan från mobilbasen; här återställs bara
     de ursprungliga desktopstorlekarna. */
  .hero-halva {
    min-height: 380px;
  }

  .ikon--hero {
    width: 48px;
    height: 48px;
  }

  .hero-halva-rubrik {
    font-size: clamp(1.9rem, 5vw, 2.5rem);
  }

  .hero-halva-index {
    line-height: 1.75;
  }

  .hero-halva-till {
    font-size: 0.95rem;
  }

  /* Panelerna är full-bredd, men innehållet riktas in mot sidans
     centrerade kolumn (samma gutter som .omslag, 66rem) så hero
     ramar in samma band som sektionerna nedanför. */
  .hero-halva--skog .hero-halva-innehall {
    padding-left: max(2rem, calc((100vw - 66rem) / 2 + 2rem));
  }

  .hero-halva--maskin .hero-halva-innehall {
    padding-right: max(2rem, calc((100vw - 66rem) / 2 + 2rem));
  }

  /* Desktop: ursprunglig luft/gap återställd (centreringen ärvs från basen) */
  .hero-halva-innehall {
    gap: 0.85rem;
    padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  }

  .ring-fast {
    display: none;
  }

  .sidfot {
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 900px) {
  .sektion {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .tjanstlista {
    margin-top: 2.25rem;
  }

  .tjanst {
    padding-top: 1.7rem;
    padding-bottom: 1.7rem;
    column-gap: 1.4rem;
  }

  .hero-halva {
    min-height: 440px;
  }

  .logga {
    height: 52px;
  }
}