/* ==========================================================================
   Mönsterås Bilvård — designsystem
   Alla färger är UPPMÄTTA, inte påhittade:
     · logotypen (IMG_1769)  -> botten, blått, guld, krom
     · verkstadsbilden       -> hexljus, neonblå, vägg, golv
   ========================================================================== */

:root {
  /* --- uppmätt ur logotypen --- */
  --botten:      #04090D;  /* logotypens bakgrund */
  --blå-djup:    #143C59;  /* bilens karossida */
  --blå:         #195270;  /* bilens dager */
  --blå-ljus:    #2E6484;  /* snittet över hela bilen */
  --guld:        #A78B4E;  /* kronan */
  --guld-mörk:   #7C591F;  /* kronans skugga */
  --krom:        #CBD0D0;  /* skölden och ordbilden */

  /* --- uppmätt ur verkstadsbilden --- */
  --hexljus:     #EFF2F4;  /* taklamporna */
  --neon:        #1635B8;  /* skylten POLERING · REKOND · BILVÅRD */
  --vägg:        #222427;
  --golv:        #9D959B;

  /* --- härledda ytor --- */
  --yta:         #0A1119;
  --yta-2:       #101922;
  --linje:       #1C2833;
  --linje-stark: #2A3A48;

  /* --- text --- */
  --text:        #DFE5E9;
  --text-dämpad: #8E9AA5;
  --text-svag:   #63707C;

  /* --- typografi ---
     Archivo har en variabel breddaxel och ger logotypens breda,
     konstruerade versaler. Barlow bär brödtexten. */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --bröd:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  /* Tredje familjen bär BARA uppgifter: priser, mått, etiketter.
     Familjebytet säger "det här är data" utan fetstil eller färg. */
  --data:    "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* rot mot 1440 — samma vw-princip som Lackvakten */
  --r: clamp(14px, 1.111vw, 18px);

  /* --- mått --- */
  --marg:   clamp(20px, 5vw, 88px);
  --spalt:  clamp(28px, 3.5vw, 56px);
  --sektion: clamp(72px, 9vw, 148px);
  --maxbredd: 1560px;

  /* --- rörelse --- */
  --mjuk: 1.1s cubic-bezier(.14, 1, .34, 1);
  --snabb: .32s cubic-bezier(.22, .8, .3, 1);

  /* noll hörnradie överallt utom på reglagets handtag */
  --radie: 0;
}

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

html {
  background: var(--botten);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--botten);
  color: var(--text);
  font-family: var(--bröd);
  font-size: calc(var(--r) * 1.0);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }       /* annars slås aspect-ratio ut */

a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   Typografi
   OBS: versala Å Ä Ö kapas av overflow:hidden vid låg line-height.
   Varje maskad rubrik får därför luft upptill, se .avtack.
   -------------------------------------------------------------------------- */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0;
  text-transform: uppercase;
}

/* Undre gränsen är satt av det längsta obrytbara ordet på sajten —
   "personbilar" i fordon.html. Vid 2,4rem spränger det spalten på 320 px. */
h1, .h1 { font-size: clamp(2rem, 6.2vw, 5.6rem); }
h2, .h2 { font-size: clamp(1.9rem, 3.8vw, 3.4rem); }
h3, .h3 { font-size: clamp(1.15rem, 1.5vw, 1.5rem); letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.ingress {
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.5;
  color: var(--text);
  max-width: 44ch;
}

.brödtext { color: var(--text-dämpad); max-width: 58ch; }

/* gränssnittsgraden — en enda, 13px versalt */
.etikett {
  font-family: var(--bröd);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-svag);
  line-height: 1;
}
.etikett--guld { color: var(--guld); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.omslag {
  width: 100%;
  max-width: var(--maxbredd);
  margin-inline: auto;
  padding-inline: var(--marg);
}

.sektion { padding-block: var(--sektion); }

.rad {
  display: grid;
  gap: var(--spalt);
  grid-template-columns: repeat(12, 1fr);
}
/* min-width:0 — utan den vägrar rutnätsceller krympa under sitt innehålls
   minsta bredd, och ett långt ord trycker ut hela sidan i sidled. */
.rad > * { min-width: 0; }

@media (max-width: 860px) {
  .rad { grid-template-columns: 1fr; }
  .rad > * { grid-column: 1 / -1 !important; }
}

/* --------------------------------------------------------------------------
   Hexagon — verkstadens egen form, sparsamt använd
   -------------------------------------------------------------------------- */

.hex {
  width: 1em; height: 1.1em;
  flex: none;
  background: currentColor;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexlinje {
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--linje-stark) 12%, var(--linje-stark) 88%, transparent);
}

/* --------------------------------------------------------------------------
   Knappar — en enda knapptyp, och den ringer
   -------------------------------------------------------------------------- */

.knapp {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 1.05em 1.7em;
  font-family: var(--bröd);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--botten);
  background: var(--hexljus);
  border: 1px solid var(--hexljus);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--snabb), background var(--snabb), border-color var(--snabb);
}
.knapp::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--guld);
  transform: translateY(101%);
  transition: transform var(--mjuk);
}
.knapp > * { position: relative; z-index: 1; }
.knapp:hover::after { transform: translateY(0); }
.knapp:hover { border-color: var(--guld); color: var(--botten); }

.knapp--linje {
  color: var(--text);
  background: transparent;
  border-color: var(--linje-stark);
}
.knapp--linje:hover { color: var(--botten); border-color: var(--guld); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--guld);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Sidhuvud — telefonnumret ligger här på varje sida
   -------------------------------------------------------------------------- */

.topp {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--botten) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linje);
}
.topp__inre {
  display: flex; align-items: center; gap: var(--spalt);
  min-height: 74px;
}
.topp__logga { display: flex; align-items: center; gap: .8em; margin-right: auto; }
.topp__logga img { width: 40px; height: 40px; object-fit: contain; }
.topp__namn {
  font-family: var(--display);
  font-weight: 700; font-stretch: 118%;
  font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--krom); line-height: 1.1;
}
.topp__namn span { display: block; font-size: 11px; letter-spacing: .28em; color: var(--text-svag); }

.meny { display: flex; gap: clamp(14px, 1.7vw, 28px); }
.meny a {
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dämpad); padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color var(--snabb), border-color var(--snabb);
}
.meny a:hover, .meny a[aria-current="page"] { color: var(--text); border-color: var(--guld); }

.topp__tel {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--display); font-weight: 700; font-stretch: 108%;
  font-size: 15px; letter-spacing: .02em; color: var(--krom);
  white-space: nowrap;
}
.topp__tel .hex { font-size: .55em; color: var(--guld); }

@media (max-width: 1080px) { .meny { display: none; } }

/* Sidnamnen är långa ("Utvändiga tvättar och paket"), och på en rad bredvid
   loggan och numret fick menyn bara plats på de bredaste skärmarna. Den får
   därför en egen rad under, över hela bredden. Under 1080 px är den dold som
   förut och sidfoten tar navigeringen. */
@media (min-width: 1081px) {
  .topp__inre { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-top: 14px; }
  .meny {
    order: 3;
    flex: 1 0 100%;
    justify-content: space-between;
    margin-top: 12px;
    padding-block: 4px 6px;
    border-top: 1px solid var(--linje);
  }
  .meny a { white-space: nowrap; padding-block: 10px 8px; }
}
@media (max-width: 560px)  { .topp__tel span { display: none; } }


/* --------------------------------------------------------------------------
   Mobil och surfplatta: menyknapp och telefonlur i sidhuvudet
   Under 1080 px ryms inte menyn i sidhuvudet. Den öppnas i stället som en
   helskärm från knappen med tre streck. Telefonlänken visar en riktig lur
   så att det syns vad den gör.
   -------------------------------------------------------------------------- */

.topp__lur { display: none; }
.topp__menyknapp { display: none; }
.meny__ring { display: none; }

@media (max-width: 1080px) {
  .topp__inre { gap: 6px; }
  .topp__logga { margin-right: auto; }

  .topp__tel { gap: .5em; min-height: 44px; padding-inline: 8px; }
  .topp__tel .hex { display: none; }
  .topp__lur { display: block; width: 22px; height: 22px; color: var(--guld); flex: none; }

  .topp__menyknapp {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 46px; height: 46px; padding: 0 11px; margin-right: -11px;
    background: none; border: 0; cursor: pointer;
  }
  .topp__menyknapp span {
    display: block; height: 2px; border-radius: 1px; background: var(--krom);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  }
  .meny-oppen .topp__menyknapp span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .meny-oppen .topp__menyknapp span:nth-child(2) { opacity: 0; }
  .meny-oppen .topp__menyknapp span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* backdrop-filter gör sidhuvudet till referens för position: fixed, så
     menyn hade fastnat inne i sidhuvudets 75 px. Stäng av den när menyn är öppen. */
  .meny-oppen .topp { backdrop-filter: none; background: var(--botten); }
  .meny-oppen { overflow: hidden; }

  .meny-oppen .meny {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; inset: 0; z-index: -1;
    padding: 96px var(--marg) 32px;
    background: var(--botten);
    overflow-y: auto;
  }
  .meny-oppen .meny a {
    font-family: var(--display); font-weight: 700; font-stretch: 112%;
    font-size: clamp(1.25rem, 5.4vw, 1.6rem); letter-spacing: .02em;
    color: var(--text);
    padding-block: 18px; border-bottom: 1px solid var(--linje);
  }
  .meny-oppen .meny a[aria-current="page"] { color: var(--guld); border-color: var(--linje); }
  .meny-oppen .meny__ring {
    display: inline-flex; align-self: flex-start; margin-top: 28px;
    padding: 16px 22px !important; border: 0 !important;
    background: var(--hexljus); color: var(--botten) !important;
    font-family: var(--bröd) !important; font-size: 14px !important; font-weight: 700;
    letter-spacing: .16em !important; text-transform: uppercase;
  }
}

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

.fot { border-top: 1px solid var(--linje); padding-block: clamp(48px, 6vw, 80px) 40px; }
.fot__rutnät {
  display: grid; gap: var(--spalt);
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
@media (max-width: 860px) { .fot__rutnät { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fot__rutnät { grid-template-columns: 1fr; } }
.fot h4 { font: inherit; margin: 0 0 1.1em; }
.fot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.fot a { color: var(--text-dämpad); transition: color var(--snabb); }
.fot a:hover { color: var(--text); }
.fot__botten {
  margin-top: clamp(40px, 5vw, 68px); padding-top: 24px;
  border-top: 1px solid var(--linje);
  display: flex; flex-wrap: wrap; gap: 1em 2em; justify-content: space-between;
}

/* --------------------------------------------------------------------------
   Avtäckning — rubriker som stiger fram.
   Masken behöver luft upptill, annars kapas Å Ä Ö.
   -------------------------------------------------------------------------- */

.avtack { overflow: hidden; padding-top: .16em; margin-top: -.16em; }
.avtack > * {
  display: block;
  transform: translateY(105%);
  transition: transform 1.15s cubic-bezier(.14, 1, .34, 1);
}
.syns .avtack > * { transform: translateY(0); }

.tona { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.14,1,.34,1); }
.syns .tona, .tona.syns { opacity: 1; transform: none; }

/* Hopp till #ankare ska landa under det fasta sidhuvudet, inte bakom det */
html { scroll-padding-top: 96px; }
@media (min-width: 1081px) { html { scroll-padding-top: 138px; } }