/* Skellefteå Taxi — stilmall */

:root {
  --bla: #081888;
  --gul: #f8c63c;
  --text: #10121f;
  --text-dampad: #4a4d5e;
  --sektion: #f4f6fb;
  --gra: #eceef3;
  --linje: #dfe2ea;
  --vit: #fff;
  --rubrikfont: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --brodfont: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bredd: 1160px;
  --radie: 12px;
}

/* ---------- Grund ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--brodfont);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--vit);
  /* Sidfoten längst ner i fönstret på korta sidor, direkt efter innehållet på långa */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body > main {
  flex: 1 0 auto;
}

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

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-family: var(--rubrikfont);
  font-weight: 600;
  line-height: 1.1;
  color: var(--bla);
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.5rem; }

p {
  margin: 0 0 1em;
}

a {
  color: var(--bla);
}

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

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

.hoppa {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200; /* över det klistriga sidhuvudet och granskningsbannern */
  padding: 8px 16px;
  background: var(--bla);
  color: var(--vit);
}

.hoppa:focus {
  top: 8px;
}

.ram {
  max-width: var(--bredd);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.ram--smal {
  max-width: 780px;
}

@media (min-width: 700px) {
  .ram {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ---------- Ordmärke ---------- */

.ordmarke {
  display: inline-block;
  font-family: var(--rubrikfont);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--bla);
  text-decoration: none;
}

/* Blå/vit-rutig linje, 6 px */
.ordmarke::after {
  content: "";
  display: block;
  height: 6px;
  margin-top: 6px;
  background: repeating-conic-gradient(var(--bla) 0 25%, var(--vit) 0 50%) 0 0 / 6px 6px;
}

/* ---------- Knappar ---------- */

.telefonknapp {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1.1em;
  border-radius: 999px;
  background: var(--gul);
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.telefonknapp:hover {
  background: #f3b818;
}

.telefonknapp__ikon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

.telefonknapp--stor {
  padding: 0.8em 1.6em;
  font-size: 1.125rem;
}

.knapp {
  display: inline-block;
  padding: 0.75em 1.5em;
  border: 2px solid var(--bla);
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.knapp--fylld {
  background: var(--bla);
  color: var(--vit);
}

.knapp--fylld:hover {
  background: #0c22b0;
  border-color: #0c22b0;
}

.knapp--kontur {
  background: transparent;
  color: var(--bla);
}

.knapp--kontur:hover {
  background: var(--sektion);
}

/* ---------- Sidhuvud och meny ---------- */

/* Sidhuvudet (och granskningsbannern ovanför, i granskningsläget) följer med vid scroll.
   Ankarlänkar och "Hoppa till innehållet" landar under det. */
.toppfast {
  position: sticky;
  top: 0;
  z-index: 50;
}

html {
  scroll-padding-top: 96px;
}

html:has(.granskningslist) {
  scroll-padding-top: 176px;
}

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

.sidhuvud__rad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.sidhuvud .ordmarke {
  margin-right: auto;
}

.huvudmeny ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 0.4em uppe/nere: aktiva understrecket hamnar i höjd med rutiga strecket under namnet */
.huvudmeny a {
  display: block;
  padding: 0.4em 0.7em;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.huvudmeny a:hover {
  color: var(--bla);
}

.huvudmeny a[aria-current="page"] {
  color: var(--bla);
  box-shadow: inset 0 -3px 0 var(--bla);
}

.menyknapp {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--linje);
  border-radius: 8px;
  background: var(--vit);
  cursor: pointer;
}

.menyknapp__streck,
.menyknapp__streck::before,
.menyknapp__streck::after {
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  background: var(--bla);
}

.menyknapp__streck::before,
.menyknapp__streck::after {
  content: "";
  position: absolute;
  left: 0;
}

.menyknapp__streck::before { top: -6px; }
.menyknapp__streck::after { top: 6px; }

/* Bred skärm: namnets textmitt på samma linje som menyordens mitt och knappens mitt.
   Raden centrerar namnets ruta inklusive rutiga strecket, så texten flyttas ner motsvarande;
   knappen ligger annars 1 px under menytextens mitt. Uppmätt med webbfonterna. */
@media (min-width: 1050px) {
  .sidhuvud .ordmarke {
    position: relative;
    top: 4px;
  }

  .telefonknapp--sidhuvud {
    position: relative;
    top: -1px;
  }
}

/* Under 1050 px får meny och knapp inte plats på en rad (bryter vid 934 px med fem menyposter,
   1024 px med sex, plus rullningslist) – hamburgermenyn tar över */
@media (max-width: 1049px) {
  /* Utfälld meny högre än skärmen: sidhuvudet scrollar inuti sig självt */
  .toppfast {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Utan JS visas menyn alltid; då klistras inte sidhuvudet (det skulle täcka halva skärmen) */
  html:not(.js) .toppfast {
    position: static;
  }

  .sidhuvud__rad {
    gap: 12px;
  }

  .sidhuvud .ordmarke { order: 1; }
  .telefonknapp--sidhuvud { order: 2; }
  .menyknapp { order: 3; }

  .js .menyknapp {
    display: inline-flex;
  }

  .huvudmeny {
    order: 4;
    flex-basis: 100%;
  }

  .huvudmeny ul {
    flex-direction: column;
    gap: 0;
  }

  .huvudmeny li + li {
    border-top: 1px solid var(--linje);
  }

  .huvudmeny a {
    padding: 0.8em 0;
  }

  .huvudmeny a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--bla);
    padding-left: 12px;
  }

  .js .huvudmeny:not(.oppen) {
    display: none;
  }
}

@media (max-width: 419px) {
  .sidhuvud .ordmarke {
    font-size: 1.4rem;
  }

  .telefonknapp__nummer {
    display: none;
  }
}

/* ---------- Informationslist (tidsstyrda poster) ---------- */

.infolist {
  background: var(--gra);
  border-bottom: 1px solid var(--linje);
}

.infolist ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.infolist__post {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
}

.infolist__post + .infolist__post {
  border-top: 1px solid var(--linje);
}

.infolist__post p {
  margin: 0;
}

.infolist__ikon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--bla);
}

/* ---------- Block ---------- */

.block {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.block:not(.hero) + .block:not(.hero) {
  padding-top: 0;
}

.brodtext p:last-child {
  margin-bottom: 0;
}

/* Underrubrik i brödtext ("## " i texten). Font och färg ärvs från h2/h3. */
.brodtext__rubrik {
  margin: 1.25em 0 0.35em;
  font-size: 1.5rem;
}

.brodtext__rubrik:first-child {
  margin-top: 0;
}

.brodtext a[href^="tel:"] {
  white-space: nowrap;
}

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--sektion);
}

.hero__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Motivet (bilen) sitter oftast i nedre halvan — beskär mer uppifrån än nerifrån */
  object-position: 50% 70%;
}

/* Vit toning bakom textytan till vänster, klar bild till höger */
.hero--bild::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.75) 32%, rgba(255, 255, 255, 0) 58%);
}

.hero--bild .hero__ram {
  display: flex;
  align-items: center;
  min-height: clamp(420px, 42vw, 620px);
}

.hero__ram {
  position: relative;
  z-index: 2;
  padding-top: clamp(24px, 6vw, 56px);
  padding-bottom: clamp(24px, 6vw, 56px);
}

.hero__text {
  max-width: 640px;
}

.hero__rubrik {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
}

.hero__underrubrik {
  margin-bottom: 1.5em;
  font-size: 1.25rem;
  color: var(--bla);
}

/* Utan knapprad slutar textklumpen på underrubriken (eller rubriken) utan extra luft under */
.hero__text > :last-child {
  margin-bottom: 0;
}

.hero__knappar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Samma höjd som den gula knappen (som saknar kant) */
.hero__knappar .knapp {
  padding: calc(0.8em - 2px) 1.6em;
  font-size: 1.125rem;
}

/* Textplacering (innehall.laga). Standardläget mitten-vanster ger inga klasser.
   Lodrätt (hero--rad-*) verkar bara med bild, där ramen har minhöjd och är flex.
   I sidled (hero--kol-*) gäller bara från 700px; på mobil fyller textklumpen
   ändå nästan hela bredden och står vänsterställd oavsett laga. */
.hero--rad-uppe .hero__text {
  align-self: flex-start;
}

.hero--rad-nere .hero__text {
  align-self: flex-end;
}

/* Uppe/nere: sektionens block-padding på den sidan flyttas in i ramens minhöjd,
   så att heron behåller sin totala höjd men klumpen hamnar 24px från bildkanten. */
.hero--bild.hero--rad-uppe {
  padding-top: 0;
}

.hero--bild.hero--rad-nere {
  padding-bottom: 0;
}

.hero--bild.hero--rad-uppe .hero__ram,
.hero--bild.hero--rad-nere .hero__ram {
  min-height: calc(clamp(420px, 42vw, 620px) + clamp(40px, 6vw, 72px));
}

.hero--bild.hero--rad-uppe .hero__ram {
  padding-top: 24px;
}

.hero--bild.hero--rad-nere .hero__ram {
  padding-bottom: 24px;
}

@media (min-width: 700px) {
  .hero--kol-mitten .hero__text {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .hero--kol-hoger .hero__text {
    margin-left: auto;
    text-align: right;
  }

  .hero--kol-mitten .hero__knappar {
    justify-content: center;
  }

  .hero--kol-hoger .hero__knappar {
    justify-content: flex-end;
  }

  /* Toningen följer textklumpen så att texten alltid ligger på ljus botten */
  .hero--bild.hero--kol-mitten::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.8) 28%, rgba(255, 255, 255, 0.8) 72%, rgba(255, 255, 255, 0) 92%);
  }

  .hero--bild.hero--kol-hoger::before {
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.75) 32%, rgba(255, 255, 255, 0) 58%);
  }
}

/* Textbakgrund platta (innehall.textbakgrund): ingen toning, textklumpen med knapparna på en
   ljus platta. Står efter toningsreglerna ovan så att content: none tar bort både grundtoningen,
   mobilslöjan och kolumngradienterna. Plattan följer laga som textklumpen i övrigt. */
.hero--platta::before {
  content: none;
}

.hero--bild.hero--platta .hero__text {
  padding: 24px;
  border-radius: var(--radie);
  background: rgba(255, 255, 255, 0.9);
}

@media (min-width: 700px) {
  .hero--bild.hero--platta .hero__text {
    padding: 32px 36px;
  }
}

/* Staplad hero under 900 px: där täcker texten 70–100 % av bildens bredd och toningen/plattan
   bleker ut bilden. Texten står då på vitt överst och bilden visas i full färg under (samma
   bildelement, bara omplacerat). Gäller båda textbakgrunderna; laga styr bara bildens beskärning.
   Står sist bland herostilarna så att den vinner över laga- och platta-reglerna ovan. */
@media (max-width: 899px) {
  .hero--bild,
  .hero--bild.hero--rad-uppe,
  .hero--bild.hero--rad-nere {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
    background: var(--vit);
  }

  .hero--bild::before {
    content: none;
  }

  .hero--bild .hero__fond {
    position: static;
    order: 2;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 70vh;
    object-position: var(--hero-bildlage, 50% 50%);
  }

  .hero--bild .hero__ram,
  .hero--bild.hero--rad-uppe .hero__ram,
  .hero--bild.hero--rad-nere .hero__ram {
    display: block;
    width: 100%;
    min-height: 0;
    padding-top: clamp(40px, 6vw, 56px);
    padding-bottom: 32px;
  }

  .hero--bild .hero__text,
  .hero--bild.hero--platta .hero__text {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    text-align: left;
  }

  .hero--bild .hero__knappar {
    justify-content: flex-start;
  }
}

/* Surfplatta: lägre bild så att heron inte blir onödigt hög strax under brytpunkten */
@media (min-width: 600px) and (max-width: 899px) {
  .hero--bild .hero__fond {
    aspect-ratio: 16 / 10;
  }
}

/* Bild */

.bild__figur {
  margin-top: 0;
  margin-bottom: 0;
}

.bild__figur img {
  width: 100%;
  border-radius: var(--radie);
}

.bild__text {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--text-dampad);
}

/* Bild + text */

.bild-text__ram {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.bild-text__ram--utan-bild {
  grid-template-columns: 1fr;
  max-width: 780px;
}

.bild-text--hoger .bild-text__bild {
  order: 2;
}

.bild-text__bild img {
  width: 100%;
  border-radius: var(--radie);
}

@media (max-width: 899px) {
  .bild-text__ram {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .bild-text--hoger .bild-text__bild {
    order: 0;
  }
}

/* Kortrad */

.kortrad__lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 899px) {
  .kortrad__lista {
    grid-auto-flow: row;
  }
}

.kort {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border: 1px solid transparent;
  border-radius: var(--radie);
  background: var(--sektion);
  color: var(--text);
  text-decoration: none;
}

a.kort:hover {
  border-color: var(--bla);
}

.kort__ikon {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  color: var(--bla);
}

.kort__rubrik {
  margin-bottom: 0.35em;
}

.kort__text {
  margin: 0;
}

.kort__mer {
  margin-top: auto;
  padding-top: 16px;
  color: var(--bla);
  font-weight: 600;
}

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

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

.sidfot a {
  color: var(--vit);
}

/* Två block: namn + beskrivning till vänster, kontakt mot högra kanten (så brett det behöver) */
.sidfot__kolumner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 40px;
}

.sidfot .ordmarke {
  color: var(--vit);
}

.sidfot__beskrivning {
  max-width: 34ch;
  margin-top: 16px;
}

.sidfot__rubrik {
  font-size: 1.375rem;
  color: var(--vit);
}

/* Kontaktblocket: benämning och värde på samma rad, värdena i en gemensam vänsterkant */
.sidfot__kontakt {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 6px 20px;
  margin: 0;
}

.sidfot__kontakt dt {
  opacity: 0.75;
}

.sidfot__kontakt dd {
  margin: 0;
  white-space: nowrap;
}

.sidfot__kontakt a {
  text-decoration: none;
}

.sidfot__kontakt a:hover,
.sidfot__kontakt a:focus-visible {
  text-decoration: underline;
}

/* Bred skärm: namnet står på samma baslinje som rubriken Kontakt, och beskrivningen börjar
   i höjd med första kontaktraden. Beskrivningens luft under strecket (margin-top) och
   rubrikens luft under sig (margin-bottom) är ökade lika mycket. */
@media (min-width: 800px) {
  .sidfot__kolumner {
    align-items: baseline;
  }

  .sidfot__beskrivning {
    margin-top: 9px;
  }

  .sidfot__rubrik {
    margin-bottom: calc(0.5em + 10px);
  }
}

.sidfot__copy {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.875rem;
}

/* Nedre raden: delarna bryts aldrig inuti, bara mellan varandra */
.sidfot__copy span {
  white-space: nowrap;
}

@media (max-width: 799px) {
  .sidfot__kolumner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Mycket smal skärm: värdet under benämningen när de inte ryms bredvid varandra */
@media (max-width: 359px) {
  .sidfot__kontakt {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .sidfot__kontakt dd + dt {
    margin-top: 8px;
  }
}

/* ---------- Granskningsläge ---------- */

/* Avsiktligt utanför sajtens färgskala så att fönstret aldrig förväxlas med den publika sajten */
.granskningslist {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 16px;
  padding: 10px 16px;
  background: #c2185b;
  color: #fff;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.granskningslist a {
  color: #fff;
  font-weight: 600;
}