@charset "UTF-8";
/* Theme Name: Norrköpings Skogsentreprenad
Author: RX2
Author URI: https://rx2.se
Description: Tema för Norrköpings Skogsentreprenad – skog, träd och transport. Byggt på RX2 Starter med ACF flexible-content blockarkitektur.
Version: 1.1.1
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: rx2
*/
/*
VARIABLER

Brytpunkter och SCSS-speglingar av designens tokens.

OBS: designen (nkpgskog-source) är skriven desktop-first med max-width-queries.
Vi behåller den riktningen rakt igenom temat i stället för att vända på den –
en halv omskrivning till mobile-first är den säkraste vägen till buggar.
Brytpunkterna nedan är exakt de som designen testats mot.
 */
/*
DESIGNTOKENS

Designsystemets tokens från nkpgskog-source/tokens/*.css, oförändrade till
värde och namn. De ligger kvar som CSS-variabler (inte bara SCSS) eftersom
designen refererar dem direkt och de ska gå att justera i devtools.

Sökvägarna i @font-face är relativa till style.css i temats rot.
 */
/* ---------- fonts ---------- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Black Ops One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/blackopsone-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Black Ops One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/blackopsone-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  /* ---------- färg ---------- */
  --kolsvart: #0D0D0D;
  --skogsrod: #C62828;
  --brutet-vit: #F6F5F2;
  --vit: #FFFFFF;
  --skogsgron: #2E4A38;
  --stalgra: #5E6366;
  --mossgron: #556B2F;
  --tallbark: #6D4C41;
  --sand: #D8C9AE;
  --grey-100: #F6F5F2;
  --grey-200: #E7E5E0;
  --grey-300: #D2D0CB;
  --grey-400: #A8A6A2;
  --grey-500: #5E6366;
  --grey-600: #3B3D3E;
  --grey-700: #232425;
  --grey-900: #0D0D0D;
  --red-700: #A81F1F;
  --red-600: #B32323;
  --red-500: #C62828;
  --red-050: #F7E4E4;
  /* semantiska alias */
  --text-strong: var(--kolsvart);
  --text-body: var(--grey-600);
  --text-muted: var(--stalgra);
  --text-on-dark: var(--vit);
  --text-on-red: var(--vit);
  --text-accent: var(--skogsrod);
  --surface-page: var(--brutet-vit);
  --surface-card: var(--vit);
  --surface-inverse: var(--kolsvart);
  --surface-accent: var(--skogsrod);
  --surface-sand: var(--sand);
  --surface-hero: var(--grey-200);
  --border-strong: var(--kolsvart);
  --border-subtle: var(--grey-300);
  --border-on-dark: rgba(255, 255, 255, .35);
  --action-primary-bg: var(--skogsrod);
  --action-primary-bg-hover: var(--red-600);
  --action-primary-bg-active: var(--red-700);
  --action-primary-fg: var(--vit);
  --action-secondary-fg: var(--kolsvart);
  --action-secondary-border: var(--kolsvart);
  --action-light-bg: var(--vit);
  --action-light-fg: var(--kolsvart);
  --graphic-silhouette: var(--grey-300);
  --graphic-woodgrain: var(--grey-300);
  /* ---------- typografi ---------- */
  --font-core: Figtree, Helvetica Neue, Arial, sans-serif;
  --font-stencil: Black Ops One, Figtree, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;
  --type-body-lg-size: 20px;
  --type-body-lg-line: 1.55;
  --type-body-size: 17px;
  --type-body-line: 1.6;
  --type-body-sm-size: 15px;
  --type-body-sm-line: 1.55;
  --type-eyebrow-size: 13px;
  --type-eyebrow-weight: 700;
  --type-eyebrow-tracking: .12em;
  --type-stencil-tracking: .02em;
  /* ---------- rum ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --space-10: 96px;
  --space-11: 128px;
  --gutter: 32px;
  --container-max: 1440px;
  --container-pad: 64px;
  /* ---------- ytor ---------- */
  /* Allt är fyrkantigt. Varumärket har inga rundade hörn någonstans. */
  --radius-none: 0px;
  --border-width-hairline: 1px;
  --border-width-strong: 2px;
  --border-width-heavy: 3px;
  --shadow-none: none;
  --rule-accent-width: 22px; /* det korta röda strecket före listpunkter */
  --rule-accent-height: 3px;
  --header-height: 100px;
  --header-height-compact: 76px;
  --overlay-scrim: rgba(13, 13, 13, .55);
  /* ---------- rörelse ---------- */
  --ease-standard: cubic-bezier(.2, 0, .2, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 320ms;
  --transition-action: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
  --transition-media: transform var(--duration-slow) var(--ease-standard);
  --hover-media-scale: 1.03;
}

/*
MIXINS

Här samlas olika SCSS-funktioner som kan inkluderas i övriga filer med @include.
https://sass-lang.com/documentation/at-rules/mixin

*/
/* GENERAL
Reset, sidram, .container (designens .wrap) och .layout (designens .band).
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-core);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
}

/* Både ul och ol – annars behåller ol webbläsarens padding-inline-start: 40px.
   .entry-content återställer listmarkörerna för redaktörens WYSIWYG-innehåll. */
ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: var(--skogsrod);
  text-decoration: none;
  transition: var(--transition-action);
}
a:hover {
  color: var(--red-700);
}

:focus-visible {
  outline: 3px solid var(--skogsrod);
  outline-offset: 2px;
}

/* Sidram: sidfoten ska ligga i botten även på korta sidor */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main {
  flex: 1 0 auto;
  position: relative;
}

/* Innehållsbredd – designens .wrap */
.container {
  margin: 0 auto;
  max-width: var(--container-max);
  padding: 0 var(--container-pad);
  position: relative;
  width: 100%;
}
@media all and (max-width: 1300px) {
  .container {
    padding: 0 40px;
  }
}
@media all and (max-width: 560px) {
  .container {
    padding: 0 22px;
  }
}

.container--wide {
  max-width: 100%;
}

/* Blocksektion – designens .band */
.layout {
  padding: 112px 0;
}
@media all and (max-width: 1000px) {
  .layout {
    padding: 80px 0;
  }
}
@media all and (max-width: 560px) {
  .layout {
    padding: 56px 0;
  }
}

/* Block som går kant i kant och sköter sin egen luft */
.layout--flush {
  padding: 0;
}

/* Två block med samma färgtema efter varandra ska inte dubbla luften */
.layout-proof + .layout-proof,
.theme-svart + .theme-svart,
.theme-vit + .theme-vit,
.theme-sand + .theme-sand,
.theme-rod + .theme-rod {
  padding-top: 0;
}

.section-header {
  margin-bottom: 56px;
  max-width: 60ch;
}
@media all and (max-width: 1000px) {
  .section-header {
    margin-bottom: 40px;
  }
}

/* Hjälpklasser */
.stack {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
@media all and (max-width: 560px) {
  .row .button {
    width: 100%;
  }
}

.alignleft,
.alignright {
  height: auto;
  max-width: 47%;
}

.alignnone {
  float: none;
}

.alignright {
  float: right;
  margin: 0 0 1.5rem 1.5rem;
}

.alignleft {
  float: left;
  margin: 0 1.5rem 1.5rem 0;
}

.aligncenter {
  display: block;
  margin: 1.5rem auto;
}

.visually-hidden,
.screen-reader-text {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-link {
  background: var(--kolsvart);
  color: var(--vit);
  left: 8px;
  padding: 12px 20px;
  position: absolute;
  top: -100px;
  z-index: 200;
}
.skip-link:focus {
  color: var(--vit);
  top: 8px;
}

/* Inträdesanimation – sätts av rx2.Reveal.
   Gäller bara när <html> har .js (sätts i wp_head), annars vore innehållet
   osynligt för besökare utan JavaScript. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-standard), transform 0.5s var(--ease-standard);
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* TYPOGRAFI
Typskala, rubriker, brödtext och knappbas.

Rubrikklasserna heter fortfarande .heading--<storlek> (det är namnen col-heading.php
och heading_size-fältet använder). Storlekarna är designens skala:
  display    = .h-display    primary = .h1
  secondary  = .h2           tertiary = .h3
 */
body,
input,
button,
select,
textarea {
  font-family: var(--font-core);
}

.heading, .entry-content h3, .entry-content h2 {
  color: var(--text-strong);
  text-wrap: balance;
}

.heading--display {
  font-size: clamp(40px, 5.6vw, 86px);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.025em;
  line-height: 0.98;
}

.heading--primary {
  font-size: clamp(34px, 4vw, 56px);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.heading--secondary, .entry-content h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.heading--tertiary, .entry-content h3 {
  font-size: 22px;
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.heading--quaternary {
  font-size: 18px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.005em;
  line-height: 1.25;
}

/* Rubrik med den svarta topplinjen (samma motiv som .step och .stat) */
.heading--rule {
  border-top: var(--border-width-heavy) solid var(--border-strong);
  padding-top: 20px;
  width: 100%;
}

/* Överrubrik – enda stället versalspärrning används */
.eyebrow {
  color: var(--text-accent);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* Ingress */
.preamble,
.lead {
  color: var(--text-body);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
  max-width: 52ch;
}

.preamble p {
  margin-bottom: 1em;
}
.preamble p:last-child {
  margin-bottom: 0;
}

.small {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
}

.muted {
  color: var(--text-muted);
}

.stencil {
  font-family: var(--font-stencil);
  letter-spacing: var(--type-stencil-tracking);
}

.figcap {
  color: var(--text-muted);
  font-size: 13px;
  padding-top: 10px;
}

/* WYSIWYG-innehåll */
.entry-content p, .entry-content li {
  line-height: 1.6;
}
.entry-content p, .entry-content ul, .entry-content ol {
  margin-bottom: 1.5em;
}
.entry-content > :last-child {
  margin-bottom: 0;
}
.entry-content li {
  margin-bottom: 0.5rem;
}
.entry-content ul, .entry-content ol {
  list-style: revert;
  padding-left: 1.5em;
}
.entry-content h2 {
  margin-bottom: 0.5em;
}
.entry-content h3 {
  margin-bottom: 0.5em;
}
.entry-content a {
  text-decoration: underline;
}

/* Knappbas – varianterna ligger i _color-themes.scss */
.button {
  align-items: center;
  border: var(--border-width-strong) solid transparent;
  border-radius: var(--radius-none);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--weight-bold);
  gap: 12px;
  justify-content: center;
  line-height: normal;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  transition: var(--transition-action);
}
.button[disabled] {
  cursor: not-allowed;
  opacity: 0.4;
}

.button--small {
  font-size: 15px;
  padding: 12px 24px;
}

.button--large {
  font-size: 19px;
  padding: 20px 40px;
}

@media all and (max-width: 560px) {
  .button {
    width: 100%;
  }
}
/* FÄRGTEMAN
Parar ihop med ACF-fältet color_theme (theme-<färg>) och knappvarianterna
(button--<färg>). Värden som slutar på " is-inverted" ger två klasser på
sektionen – theme-<färg> och is-inverted – vilket vänder textfärgerna.

Valen definieras i inc/acf-filters.php. Lägger du till ett tema måste det in
på båda ställena.
 */
.theme-brutet-vit {
  background-color: var(--surface-page);
}

.theme-vit {
  background-color: var(--vit);
}

.theme-sand {
  background-color: var(--surface-sand);
  color: var(--text-strong);
}

.theme-svart {
  background-color: var(--surface-inverse);
}

.theme-rod {
  background-color: var(--surface-accent);
}

/* Omvänd text på mörk botten */
.is-inverted {
  color: rgba(255, 255, 255, 0.82);
}
.is-inverted .heading, .is-inverted .entry-content h2, .entry-content .is-inverted h2, .is-inverted .entry-content h3, .entry-content .is-inverted h3,
.is-inverted .heading--display,
.is-inverted .heading--primary,
.is-inverted .heading--secondary,
.is-inverted .heading--tertiary,
.is-inverted .heading--quaternary {
  color: var(--vit);
}
.is-inverted .preamble,
.is-inverted .lead,
.is-inverted p {
  color: rgba(255, 255, 255, 0.82);
}
.is-inverted .muted {
  color: rgba(255, 255, 255, 0.6);
}
.is-inverted a {
  color: var(--vit);
}
.is-inverted .heading--rule {
  border-top-color: var(--vit);
}
.is-inverted .entry-content a {
  color: var(--vit);
}

/* På röd botten är eyebrown vit, inte röd */
.theme-rod .eyebrow,
.is-inverted .eyebrow {
  color: var(--vit);
  opacity: 0.75;
}

.theme-rod .eyebrow {
  opacity: 0.85;
}

/* ---------- knappvarianter ---------- */
.button--primary {
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
}
.button--primary:hover {
  background: var(--action-primary-bg-hover);
  color: var(--action-primary-fg);
}
.button--primary:active {
  background: var(--action-primary-bg-active);
}

.button--secondary {
  background: transparent;
  border-color: var(--action-secondary-border);
  color: var(--action-secondary-fg);
}
.button--secondary:hover {
  background: var(--kolsvart);
  color: var(--vit);
}

.button--light {
  background: var(--action-light-bg);
  color: var(--action-light-fg);
}
.button--light:hover {
  background: var(--grey-200);
  color: var(--action-light-fg);
}

.button--outline-light {
  background: transparent;
  border-color: var(--vit);
  color: var(--vit);
}
.button--outline-light:hover {
  background: var(--vit);
  color: var(--kolsvart);
}

/* Färgrutorna i ACF:s radioknappar (se acf_add_unique_class_to_radio_values) */
.color-theme {
  align-items: center;
  display: inline-flex;
  gap: 0.5em;
}
.color-theme::before {
  border: 1px solid rgba(0, 0, 0, 0.25);
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
}

.color-theme--brutet-vit::before {
  background: #F6F5F2;
}

.color-theme--vit::before {
  background: #FFFFFF;
}

.color-theme--sand::before {
  background: #D8C9AE;
}

.color-theme--svart::before {
  background: #0D0D0D;
}

.color-theme--rod::before {
  background: #C62828;
}

.color-theme--primary::before {
  background: #C62828;
}

.color-theme--secondary::before {
  background: transparent;
  border-color: #0D0D0D;
  border-width: 2px;
}

.color-theme--light::before {
  background: #FFFFFF;
}

.color-theme--outline-light::before {
  background: linear-gradient(135deg, #3B3D3E 50%, #FFFFFF 50%);
}

/* SIDFOT
Matchar footer.php: mörk sidfot med logotyp, tre länkkolumner och kontaktuppgifter.
Kolumnerna kommer från ACF-optionssidan "Sidfot".
 */
.site-footer {
  background: var(--kolsvart);
  color: var(--text-on-dark);
  flex-shrink: 0;
  padding: 88px 0 32px;
}
@media all and (max-width: 1000px) {
  .site-footer {
    padding-top: 64px;
  }
}
.site-footer a {
  color: var(--vit);
  opacity: 0.82;
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--vit);
  opacity: 1;
}
.site-footer p {
  color: rgba(255, 255, 255, 0.82);
}

.site-footer__grid {
  display: grid;
  gap: 48px;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
@media all and (max-width: 1180px) {
  .site-footer__grid {
    gap: 40px;
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}
@media all and (max-width: 720px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media all and (max-width: 560px) {
  .site-footer__grid {
    gap: 36px;
    grid-template-columns: 1fr;
  }
}

@media all and (max-width: 1180px) {
  .site-footer__logo {
    grid-column: 1/-1;
  }
}
.site-footer__logo img {
  height: 130px;
  width: auto;
}
@media all and (max-width: 1180px) {
  .site-footer__logo img {
    height: 110px;
  }
}

/* För logotypfiler som är mörka i original */
.site-footer__logo--invert img {
  filter: brightness(0) invert(1);
}

.site-footer__heading {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--weight-bold);
  letter-spacing: var(--type-eyebrow-tracking);
  margin: 0 0 16px;
  text-transform: uppercase;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.site-footer__phone {
  font-family: var(--font-stencil);
  font-size: 20px;
  letter-spacing: var(--type-stencil-tracking);
}

.site-footer__meta {
  font-size: var(--type-body-sm-size);
  opacity: 0.7;
}

.site-footer__text {
  margin-bottom: 1.5rem;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--grey-400);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 24px;
  justify-content: space-between;
  margin-top: 64px;
  padding-top: 24px;
}
@media all and (max-width: 1000px) {
  .site-footer__bottom {
    margin-top: 48px;
  }
}

/* HUVUDMENY (GLOBAL)
Matchar header.php: röd sticky header med logotyp, meny och offertknapp.
Mobilmenyn öppnas/stängs av rx2.Nav (toggleklass: global-nav--open).

BEM-namnen är temats egna (.global-nav), designens .site-header-regler är
översatta hit rakt av.
 */
.global-nav {
  background: var(--skogsrod);
  left: 0;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 60;
}

.global-nav__container {
  align-items: center;
  display: flex;
  gap: 32px;
  height: var(--header-height);
  justify-content: space-between;
}
@media all and (max-width: 1180px) {
  .global-nav__container {
    height: var(--header-height-compact);
  }
}

.global-nav__logo {
  align-items: center;
  color: var(--vit);
  display: flex;
  flex: 0 1 auto;
  font-size: 1.25rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.01em;
  min-width: 0;
  text-decoration: none;
}
.global-nav__logo:hover {
  color: var(--vit);
}
.global-nav__logo img {
  height: 44px;
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  width: auto;
}
@media all and (max-width: 1180px) {
  .global-nav__logo img {
    height: 36px;
  }
}

/* För logotypfiler som är mörka i original – gör dem vita på det röda fältet */
.global-nav__logo--invert img {
  filter: invert(1);
}

.global-nav__toggle {
  background: none;
  border: 0;
  cursor: pointer;
  display: none;
  margin-left: auto;
  padding: 10px;
}
@media all and (max-width: 1180px) {
  .global-nav__toggle {
    display: block;
  }
}

.global-nav__toggle-bar {
  background: var(--vit);
  display: block;
  height: 3px;
  position: relative;
  transition: background var(--duration-base) var(--ease-standard);
  width: 26px;
}
.global-nav__toggle-bar::before, .global-nav__toggle-bar::after {
  background: var(--vit);
  content: "";
  display: block;
  height: 3px;
  left: 0;
  position: absolute;
  transition: transform var(--duration-base) var(--ease-standard);
  width: 100%;
}
.global-nav__toggle-bar::before {
  top: -8px;
}
.global-nav__toggle-bar::after {
  top: 8px;
}

.global-nav--open .global-nav__toggle-bar {
  background: transparent;
}
.global-nav--open .global-nav__toggle-bar::before {
  transform: translateY(8px) rotate(45deg);
}
.global-nav--open .global-nav__toggle-bar::after {
  transform: translateY(-8px) rotate(-45deg);
}

.global-nav__nav {
  /* Menyn och offertknappen ligger på samma rad på desktop */
  align-items: center;
  display: flex;
  gap: 36px;
}
@media all and (max-width: 1300px) {
  .global-nav__nav {
    gap: 26px;
  }
}
@media all and (max-width: 1180px) {
  .global-nav__nav {
    background: var(--skogsrod);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    display: none;
    left: 0;
    max-height: calc(100vh - var(--header-height-compact));
    overflow-y: auto;
    padding: 8px 40px 28px;
    position: absolute;
    top: 100%;
    width: 100%;
  }
}
@media all and (max-width: 1180px) and (max-width: 560px) {
  .global-nav__nav {
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media all and (max-width: 1180px) {
  .global-nav--open .global-nav__nav {
    display: block;
  }
}

@media all and (max-width: 1180px) {
  .global-nav__menu-wrap {
    display: block;
  }
}

.global-nav__menu {
  align-items: center;
  display: flex;
  gap: 36px;
  list-style: none;
}
@media all and (max-width: 1300px) {
  .global-nav__menu {
    gap: 26px;
  }
}
@media all and (max-width: 1180px) {
  .global-nav__menu {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }
}
.global-nav__menu a {
  color: var(--vit);
  display: block;
  font-size: 17px;
  opacity: 0.92;
  text-decoration: none;
  transition: var(--transition-action);
}
@media all and (max-width: 1300px) {
  .global-nav__menu a {
    font-size: 16px;
  }
}
@media all and (max-width: 1180px) {
  .global-nav__menu a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 19px;
    padding: 14px 0;
  }
}
.global-nav__menu a:hover {
  color: var(--vit);
  opacity: 1;
}
.global-nav__menu .current-menu-item > a,
.global-nav__menu .current_page_item > a,
.global-nav__menu [aria-current=page] {
  font-weight: var(--weight-bold);
  opacity: 1;
}

/* Offertknappen sist i menyraden */
.global-nav__cta {
  flex: 0 0 auto;
}
@media all and (max-width: 1180px) {
  .global-nav__cta {
    margin-top: 20px;
  }
}
.global-nav__cta .button {
  opacity: 1;
}
@media all and (max-width: 1180px) {
  .global-nav__cta .button {
    width: 100%;
  }
}

/* HERO
Matchar part-hero.php: tvådelat rutnät med textspalt och mediaruta.
Mediarutan tar både bild och film (.hero__media video stylas likadant som img).
 */
.hero {
  background: var(--kolsvart);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 640px;
}
@media all and (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

.hero__copy {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: center;
  /* Vänsterkanten följer .container även när hero går kant i kant */
  padding: 96px 64px 96px max(64px, (100vw - var(--container-max)) / 2 + var(--container-pad));
}
@media all and (max-width: 1300px) {
  .hero__copy {
    padding: 88px 40px;
  }
}
@media all and (max-width: 560px) {
  .hero__copy {
    padding-left: 22px;
    padding-right: 22px;
  }
}
.hero__copy .heading, .hero__copy .entry-content h2, .entry-content .hero__copy h2, .hero__copy .entry-content h3, .entry-content .hero__copy h3 {
  color: var(--vit);
}
.hero__copy p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 42ch;
}
.hero__copy .eyebrow {
  color: var(--vit);
  margin-bottom: 0;
  opacity: 0.75;
}

.hero__media {
  background: var(--grey-700);
  overflow: hidden;
  position: relative;
}
@media all and (max-width: 1000px) {
  .hero__media {
    height: 360px;
    order: -1;
  }
}
.hero__media img,
.hero__media video {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

/* Kompakt variant för undersidor */
.hero--compact {
  min-height: 420px;
}
.hero--compact .hero__copy {
  padding-bottom: 72px;
  padding-top: 72px;
}
@media all and (max-width: 1000px) {
  .hero--compact {
    min-height: 0;
  }
}

/* Hero utan media – textspalten går över hela bredden */
.hero--text-only {
  grid-template-columns: 1fr;
}
.hero--text-only .hero__copy {
  max-width: var(--container-max);
  padding-right: max(64px, (100vw - var(--container-max)) / 2 + var(--container-pad));
}

/* Dold hero: sidan börjar direkt med första blocket, men behöver en h1 */
.hero--hidden {
  padding-top: 0;
}

/* KOLUMNLAYOUTER (cols_2 / cols_3)
Stylar .cols-griden och samtliga kolumninnehållstyper. Kolumntyperna har
medvetet ingen egen SCSS-fil – de bor allihop här (se CLAUDE.md § 5).

Innehållstyper: heading, body_text, image, buttons, features, cta,
icon_row, contact_details.
 */
.cols {
  display: grid;
  gap: 32px;
}

.cols--2 {
  align-items: center;
  gap: 80px;
  grid-template-columns: 1fr 1fr;
}
@media all and (max-width: 1180px) {
  .cols--2 {
    gap: 48px;
  }
}
@media all and (max-width: 1000px) {
  .cols--2 {
    gap: 40px;
    grid-template-columns: 1fr;
  }
}

.cols--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media all and (max-width: 1000px) {
  .cols--3 {
    grid-template-columns: 1fr;
  }
}

/* Vertikal justering – ACF-fältet column_align */
.cols--top {
  align-items: start;
}

.cols__column > * + * {
  margin-top: 24px;
}

.cols__column-content--heading + .cols__column-content--body_text {
  margin-top: 16px;
}

/* ---------- heading ---------- */
.cols__heading {
  margin-bottom: 0;
}

/* ---------- image ---------- */
.cols__column-content--image img {
  height: auto;
  width: 100%;
}

.cols__figure {
  margin: 0;
}

/* Fast höjd + beskärning används av bildgallerier (om-sidan) */
.cols__figure--cropped img {
  height: 260px;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

/* ---------- buttons ---------- */
.button-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
}
@media all and (max-width: 560px) {
  .button-list {
    width: 100%;
  }
}

@media all and (max-width: 560px) {
  .button-list__item {
    flex: 0 0 100%;
  }
}

/* ---------- features ---------- */
.features {
  list-style: none;
  width: 100%;
}

.features__item {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  padding: 12px 0;
}
.features__item::before {
  background: var(--skogsrod);
  content: "";
  flex: 0 0 auto;
  height: var(--rule-accent-height);
  margin-top: 11px;
  width: var(--rule-accent-width);
}
.features__item b {
  color: var(--text-strong);
  font-weight: var(--weight-bold);
}

.is-inverted .features__item b,
.theme-rod .features__item b {
  color: var(--vit);
}

/* Variant med beskrivningstext under varje punkt */
.features--desc .features__item {
  flex-direction: column;
  gap: 6px;
}
.features--desc .features__item::before {
  margin-top: 0;
}

.features__desc {
  margin: 0;
}

/* ---------- cta-panel ---------- */
.cta {
  background: var(--skogsrod);
  color: var(--vit);
  padding: 56px;
}
@media all and (max-width: 1000px) {
  .cta {
    padding: 36px;
  }
}
@media all and (max-width: 560px) {
  .cta {
    padding: 28px;
  }
}
.cta .heading, .cta .entry-content h2, .entry-content .cta h2, .cta .entry-content h3, .entry-content .cta h3 {
  color: var(--vit);
  max-width: 16ch;
}
.cta p {
  color: var(--vit);
  margin: 20px 0 32px;
  max-width: 40ch;
}
.cta .eyebrow {
  color: var(--vit);
  opacity: 0.85;
}

/* ---------- ikonrad ---------- */
.icon-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  list-style: none;
}
@media all and (max-width: 560px) {
  .icon-row {
    gap: 24px;
  }
}

.icon-row__item img {
  height: 52px;
  width: auto;
}
@media all and (max-width: 560px) {
  .icon-row__item img {
    height: 42px;
  }
}

.icon-row--inverted .icon-row__item img {
  filter: invert(1);
}

/* ---------- kontaktuppgifter ---------- */
.contact-details__phone,
.contact-details__email {
  display: block;
  font-family: var(--font-stencil);
  letter-spacing: var(--type-stencil-tracking);
}

.contact-details__phone {
  font-size: 34px;
  margin-top: 16px;
}
@media all and (max-width: 560px) {
  .contact-details__phone {
    font-size: 26px;
  }
}

.contact-details__email {
  font-size: 22px;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
@media all and (max-width: 560px) {
  .contact-details__email {
    font-size: 18px;
  }
}

.contact-details a {
  color: var(--text-strong);
}
.contact-details a:hover {
  color: var(--skogsrod);
}

.is-inverted .contact-details a {
  color: var(--vit);
}

/* TRYGGHETSRAD (proof)
Smal rad med fyra ikonpunkter. Ligger kant i kant och sköter sin egen luft,
därför får sektionen .layout--flush och padding sätts här.
 */
.proof__inner {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  padding: 36px 0;
}
@media all and (max-width: 1000px) {
  .proof__inner {
    gap: 20px;
    grid-template-columns: 1fr 1fr;
  }
}
@media all and (max-width: 560px) {
  .proof__inner {
    grid-template-columns: 1fr;
  }
}

.proof__item {
  align-items: center;
  display: flex;
  gap: 16px;
}

.proof__icon {
  flex: 0 0 auto;
  height: 38px;
  width: auto;
}

/* Ikoner som är mörka i original blir vita på röd/svart botten */
.proof--invert .proof__icon {
  filter: invert(1);
}

.proof__text {
  font-size: 16px;
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

/* TJÄNSTEKORT (cards)
Rutnät av kort: bild överst, röd kropp med rubrik, text och "Läs mer".
Hela kortet är klickbart när en länk är satt.
 */
.cards {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
}
@media all and (max-width: 1000px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

.cards--2 {
  grid-template-columns: repeat(2, 1fr);
}
@media all and (max-width: 1000px) {
  .cards--2 {
    grid-template-columns: 1fr;
  }
}

.cards--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media all and (max-width: 1180px) {
  .cards--4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media all and (max-width: 720px) {
  .cards--4 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--vit);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-none);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card__media {
  aspect-ratio: 16/10;
  background: var(--grey-300);
  overflow: hidden;
}
.card__media img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: var(--transition-media);
  width: 100%;
}

.card:hover .card__media img {
  transform: scale(var(--hover-media-scale));
}

.card__body {
  background: var(--skogsrod);
  color: var(--vit);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 28px 28px 32px;
}
.card__body .heading, .card__body .entry-content h2, .entry-content .card__body h2, .card__body .entry-content h3, .entry-content .card__body h3 {
  color: var(--vit);
}
.card__body p {
  color: var(--vit);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

.card__more {
  color: var(--vit);
  display: inline-flex;
  font-weight: var(--weight-bold);
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}
.card__more::after {
  content: "→";
  transition: transform var(--duration-base) var(--ease-standard);
}

.card:hover .card__more {
  color: var(--vit);
}
.card:hover .card__more::after {
  transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
  .card:hover .card__media img,
  .card:hover .card__more::after {
    transform: none;
  }
}
/* PROCESSTEG (steps)
Numrerade steg med svart topplinje. Antalet kolumner styrs av
modifieraren .steps--<antal> som layout-steps.php sätter utifrån radantalet.
 */
.steps {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
}
@media all and (max-width: 1000px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.steps--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media all and (max-width: 1180px) {
  .steps--4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media all and (max-width: 720px) {
  .steps--4 {
    grid-template-columns: 1fr;
  }
}

.steps--2 {
  grid-template-columns: repeat(2, 1fr);
}
@media all and (max-width: 1000px) {
  .steps--2 {
    grid-template-columns: 1fr;
  }
}

.step {
  border-top: var(--border-width-heavy) solid var(--kolsvart);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
}

.is-inverted .step,
.theme-rod .step {
  border-top-color: var(--vit);
}

.step__no {
  color: var(--skogsrod);
  font-family: var(--font-stencil);
  font-size: 34px;
  letter-spacing: var(--type-stencil-tracking);
  line-height: 1;
}

.is-inverted .step__no,
.theme-rod .step__no {
  color: var(--vit);
}

.step__text {
  margin: 0;
}

/* NYCKELTAL (stats)
Rad med siffror: värde + beskrivning, med röd topplinje.
 */
.stats {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}
@media all and (max-width: 1180px) {
  .stats {
    grid-template-columns: 1fr 1fr;
  }
}
@media all and (max-width: 720px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

.stats--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media all and (max-width: 1000px) {
  .stats--3 {
    grid-template-columns: 1fr;
  }
}

.stats__item {
  border-top: var(--border-width-heavy) solid var(--skogsrod);
  padding-top: 20px;
}

.stats__value {
  color: var(--text-strong);
  display: block;
  font-size: 52px;
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
  line-height: 1;
}
@media all and (max-width: 560px) {
  .stats__value {
    font-size: 42px;
  }
}

.is-inverted .stats__value,
.theme-rod .stats__value {
  color: var(--vit);
}

.stats__desc {
  color: var(--text-muted);
  display: block;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  margin-top: 8px;
}

/* BILDBAND (mediaband)
Helbreddsbild som andningspaus mellan textblock. Ligger kant i kant,
sektionen får .layout--flush.
 */
.mediaband {
  background: var(--kolsvart);
  height: 440px;
  overflow: hidden;
  position: relative;
}
@media all and (max-width: 1000px) {
  .mediaband {
    height: 300px;
  }
}
@media all and (max-width: 560px) {
  .mediaband {
    height: 220px;
  }
}
.mediaband img,
.mediaband video {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.mediaband__caption {
  background: var(--overlay-scrim);
  bottom: 0;
  color: var(--vit);
  font-size: 13px;
  left: 0;
  padding: 10px 22px;
  position: absolute;
}

/* OFFERTFORMULÄR (kolumntypen form)
Matchar col-form.php. Formuläret postar till admin-post och fungerar utan
JavaScript; rx2.Form lägger på klientvalidering och bildbilagor ovanpå.
 */
.form {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
@media all and (max-width: 1000px) {
  .form {
    grid-template-columns: 1fr;
  }
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form__field--full {
  grid-column: 1/-1;
}

.form__label {
  color: var(--text-strong);
  font-size: var(--type-body-sm-size);
  font-weight: var(--weight-bold);
}

.form__required {
  color: var(--skogsrod);
}

.form__input,
.form__select,
.form__textarea {
  background: var(--vit);
  border: var(--border-width-strong) solid var(--kolsvart);
  border-radius: var(--radius-none);
  color: var(--text-strong);
  font-family: inherit;
  font-size: 17px;
  padding: 14px 16px;
  width: 100%;
}
.form__input::-moz-placeholder, .form__select::-moz-placeholder, .form__textarea::-moz-placeholder {
  color: var(--grey-400);
}
.form__input::placeholder,
.form__select::placeholder,
.form__textarea::placeholder {
  color: var(--grey-400);
}

.form__textarea {
  min-height: 150px;
  resize: vertical;
}

.form__error {
  color: var(--red-600);
  display: none;
  font-size: 14px;
  font-weight: var(--weight-bold);
}

.form__field.is-invalid .form__input,
.form__field.is-invalid .form__select,
.form__field.is-invalid .form__textarea {
  border-color: var(--red-600);
}
.form__field.is-invalid .form__error {
  display: block;
}

/* Dra-och-släpp-yta för bilagor. Utan JS är den en vanlig filväljare. */
.form__drop {
  background: var(--vit);
  border: var(--border-width-strong) dashed var(--grey-400);
  cursor: pointer;
  padding: 24px;
  text-align: center;
  transition: var(--transition-action);
}
.form__drop:hover, .form__drop.is-over {
  background: var(--grey-100);
  border-color: var(--kolsvart);
}
.form__drop p {
  margin: 0;
}

/* Filinputen döljs bara när JS tagit över ytan */
.form__drop.is-enhanced input[type=file] {
  display: none;
}

.form__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 14px;
}
.form__thumbs:empty {
  padding-top: 0;
}

.form__thumb {
  margin: 0;
  position: relative;
  width: 88px;
}
.form__thumb img {
  height: 66px;
  -o-object-fit: cover;
  object-fit: cover;
  width: 88px;
}

.form__thumb-remove {
  background: var(--kolsvart);
  border: 0;
  color: var(--vit);
  cursor: pointer;
  font-size: 13px;
  height: 22px;
  line-height: 1;
  position: absolute;
  right: 0;
  top: 0;
  width: 22px;
}

.form__note {
  color: var(--text-muted);
  font-size: 14px;
  grid-column: 1/-1;
}

/* Cloudflare Turnstile-widgeten. Iframen har egen fast storlek – vi ser bara
   till att den får plats och inte spränger spalten på små skärmar. */
.form__turnstile {
  min-height: 65px;
  overflow: hidden;
}

/* Honeypot – ska aldrig synas eller nås med tangentbord */
.form__hp {
  height: 1px;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.form__success {
  background: var(--vit);
  border-top: 6px solid var(--skogsrod);
  padding: 56px;
}
@media all and (max-width: 560px) {
  .form__success {
    padding: 28px;
  }
}
.form__success .preamble {
  margin: 20px 0 28px;
}

.form__message {
  border-left: 6px solid var(--red-600);
  background: var(--red-050);
  color: var(--grey-700);
  grid-column: 1/-1;
  padding: 16px 20px;
}/*# sourceMappingURL=style.css.map */