/* Almas Städ – base styles. Tokens from tokens.json. */
:root {
  --as-svart: #0B0B0F;
  --as-vit: #FFFFFF;
  --as-bla: #1800AD;
  --as-bla-mork: #10007A;
  --as-bla-mjuk: #ECEAFB;
  --as-ljusgra: #F4F4F6;
  --as-morkgra: #61616A;
  --as-linje: #DADADF;
  --as-lila-dekor: #8F86FF;
  --as-ljuslila: #C9C3FF;
}

/* Self-hosted fonts */
@font-face {
  font-family: "Quicksand";
  src: url("/assets/fonts/Quicksand-Variable.woff2") format("woff2-variations"),
       url("/assets/fonts/Quicksand-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+2000-206F;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Variable.woff2") format("woff2-variations"),
       url("/assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+2000-206F;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: "Inter", "Segoe UI", system-ui, sans-serif; color: #0B0B0F; background: #FFFFFF; }
img, picture, video, svg { max-width: 100%; }
img { display: block; }
h1, h2, h3, h4, h5, h6 { font-family: "Quicksand", "Nunito", system-ui, sans-serif; }

/* Honeypot – belt + suspenders */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Prefers-reduced-motion: let motion.css handle it fully, but ensure animations respected */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Pictures as block for all image frames */
picture { display: block; }

/* Audit-tightened header heights (desktop ≤110, mobile ≤80) */
.as-site .as-r2__top { font-size: 12px; }
.as-site .as-r2__topin { min-height: 28px; }
.as-site .as-r2__in { min-height: 72px; }
@media (max-width: 900px) {
  .as-site .as-r2__in { min-height: 48px; }
  .as-site .as-r2__topin { min-height: 24px; }
}

/* Minimal rules for structural classes used in markup but not styled in components.css */
.as-m2s { position: relative; }
.as-k2__step { display: block; }
.as-hero { }

/* Expand container on very wide screens so content fills at 1920px */
@media (min-width: 1600px) {
  .as-site { --container: 1520px; --container-wide: 1680px; }
}

/* First-viewport CTA occlusion fix (≤900 px) — the fixed bokningsrad at the bottom of the viewport
   must never cover a hero CTA before the visitor has scrolled. The hero's text block grows past the
   viewport on narrow screens, which pushed the primary "Begär offert" button into the strip
   occupied by .as-bar (position:fixed; height ~56px + safe-area). We tighten the hero on mobile:
   smaller image frame, tighter padding, and reserve bottom space equal to the bokningsrad height
   so the CTAs settle well above it. The intentional bokningsrad stays visible unchanged. */
@media (max-width: 900px) {
  .as-site .as-h2s__fig { height: 220px; overflow: hidden; }
  .as-site .as-h2s__fig > img,
  .as-site .as-h2s__fig > picture img { width: 100%; height: 100%; object-fit: cover; }
  .as-site .as-h2s__txt { padding-block: 20px 24px; gap: 18px; }
  .as-site .as-h2s .as-h1 { font-size: clamp(32px, 7.5vw, 40px); }
  .as-site .as-h2s .as-lead { font-size: 16px; }
  .as-site .as-h2s { padding-bottom: 76px; }
}

/* Ortlistan i M2: när objekten är anchors, inte spans, ska de ändå se ut som ren text
   (ingen understrykning, ingen länkfärg). Hover-tändningen av kartan sker via as-komponenter.js. */
.as-site .as-m2__ort { text-decoration: none; color: #fff; }
.as-site .as-m2__ort:hover { color: #fff; }

/* Policy page — generated cookie section (consent kit) sits inside the policy column; style it to
   match surrounding typography without pulling in a separate stylesheet. */
.as-site .policy-cookies { margin: 0; padding: 0; }
.as-site .policy-cookies h2 { margin: 0 0 12px 0; font-size: clamp(24px, 2.4vw, 32px); font-family: "Quicksand", "Nunito", system-ui, sans-serif; }
.as-site .policy-cookies p { margin: 0 0 12px 0; }
.as-site .policy-cookies p:last-child { margin-bottom: 0; }

/* Guider (Körning 3) — prose, TOC, byline, CTA-ruta, källor, listor och tabeller i brödtexten.
   as-komponenter.css är oförändrad; all guide-specifik CSS ligger här. */
.as-site .as-guide { padding-block: 48px 72px; }
.as-site .as-guide__wrap { width: 100%; max-width: calc(var(--container) + 2*var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* Grid-layout: byline, toc och body samma vänsterkant; på desktop två kolumner, under 1100px en kolumn med ordning byline → toc → body. */
.as-site .as-guide__layout {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "byline"
    "toc"
    "body";
}
.as-site .as-guide__layout > * { min-width: 0; }
.as-site .as-guide__byline { grid-area: byline; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin: 0; font-size: 14px; color: #61616A; font-family: "Inter", sans-serif; max-width: 760px; width: 100%; }
.as-site .as-guide__byline b { color: #0B0B0F; font-weight: 600; }
.as-site .as-guide__byline span.sep { color: #B5B5BE; }
.as-site .as-guide__toc { grid-area: toc; margin: 0; padding: 20px 24px; background: #F4F4F6; border-radius: 14px; border-left: 3px solid #1800AD; max-width: 760px; width: 100%; box-sizing: border-box; overflow-wrap: anywhere; word-break: break-word; }
.as-site .as-guide__toc h2 { margin: 0 0 10px 0; font-size: 18px; font-family: "Quicksand", "Nunito", system-ui, sans-serif; font-weight: 700; color: #0B0B0F; }
.as-site .as-guide__toc ol { margin: 0; padding-left: 20px; }
.as-site .as-guide__toc li { margin: 4px 0; line-height: 1.5; overflow-wrap: anywhere; }
.as-site .as-guide__toc a { color: #1800AD; text-decoration: none; border-bottom: 1px solid rgba(24,0,173,.2); overflow-wrap: anywhere; }
.as-site .as-guide__toc a:hover { border-bottom-color: #1800AD; }
.as-site .as-guide__body { grid-area: body; max-width: 760px; width: 100%; margin: 0; font-family: "Inter", sans-serif; font-size: 18px; line-height: 1.7; color: #0B0B0F; }
.as-site .as-guide__body h2 { font-family: "Quicksand", "Nunito", system-ui, sans-serif; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; margin: 48px 0 16px 0; color: #0B0B0F; scroll-margin-top: 128px; }
.as-site .as-guide__body h2:first-child { margin-top: 0; }
.as-site .as-guide__body h3 { font-family: "Quicksand", "Nunito", system-ui, sans-serif; font-size: clamp(20px, 2vw, 24px); line-height: 1.3; margin: 32px 0 12px 0; color: #0B0B0F; }
.as-site .as-guide__body p { margin: 0 0 16px 0; }
.as-site .as-guide__body a { color: #1800AD; text-decoration: none; border-bottom: 1.5px solid rgba(24,0,173,.3); }
.as-site .as-guide__body a:hover { border-bottom-color: #1800AD; }
.as-site .as-guide__body strong { font-weight: 700; }
.as-site .as-guide__body ul { margin: 0 0 20px 0; padding-left: 24px; }
.as-site .as-guide__body ul li { margin: 6px 0; }
.as-site .as-guide__body ul.checklista { list-style: none; padding-left: 0; }
.as-site .as-guide__body ul.checklista li { position: relative; padding-left: 32px; margin: 10px 0; }
.as-site .as-guide__body ul.checklista li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 18px; height: 18px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%231800AD' d='M12 0 13.7 10.3 24 12 13.7 13.7 12 24 10.3 13.7 0 12 10.3 10.3Z'/></svg>") no-repeat center / contain; }
.as-site .as-guide__tablewrap { margin: 20px 0 24px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.as-site .as-guide__body table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.as-site .as-guide__body thead th { background: #0B0B0F; color: #fff; text-align: left; padding: 12px 14px; font-family: "Quicksand", sans-serif; font-weight: 600; }
.as-site .as-guide__body tbody td { padding: 12px 14px; border-bottom: 1px solid #DADADF; vertical-align: top; }
.as-site .as-guide__body tbody tr:nth-child(odd) td { background: #F4F4F6; }
.as-site .as-guide__body tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) {
  .as-site .as-guide__body table { min-width: 480px; }
}
.as-site .as-guide__cta { margin: 36px 0; padding: 28px 32px; background: #1800AD; color: #fff; border-radius: 18px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.as-site .as-guide__cta b { font-family: "Quicksand", sans-serif; font-size: clamp(20px, 2vw, 24px); font-weight: 700; }
.as-site .as-guide__cta .as-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.as-site .as-guide__cta .as-btn--vit { background: #fff; color: #1800AD; border: 1.5px solid #fff; }
.as-site .as-guide__cta .as-btn--vit:hover { background: transparent; color: #fff; }
.as-site .as-guide__cta .as-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.as-site .as-guide__cta .as-btn--ghost:hover { background: rgba(255,255,255,.1); }
.as-site .as-guide__src { margin: 32px 0 0 0; padding: 24px 28px; background: #F4F4F6; border-radius: 14px; max-width: 760px; width: 100%; }
.as-site .as-guide__src h2 { margin: 0 0 12px 0; font-size: 18px; font-family: "Quicksand", sans-serif; font-weight: 700; color: #0B0B0F; }
.as-site .as-guide__src .src-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #DADADF; }
.as-site .as-guide__src .src-row:last-child { border-bottom: 0; }
.as-site .as-guide__src .src-row a { color: #1800AD; text-decoration: none; border-bottom: 1.5px solid rgba(24,0,173,.3); flex: 1 1 auto; min-width: 0; word-break: break-word; }
.as-site .as-guide__src .src-row a:hover { border-bottom-color: #1800AD; }
.as-site .as-guide__src .src-row time { color: #61616A; font-size: 14px; font-variant-numeric: tabular-nums; }
/* Desktop: 280px toc-kolumn + 760px body-kolumn, toc sticky, byline över body i höger kolumn. */
@media (min-width: 1100px) {
  .as-site .as-guide__layout {
    grid-template-columns: 280px minmax(0, 760px);
    column-gap: 64px;
    row-gap: 16px;
    justify-content: start;
    grid-template-areas:
      "toc byline"
      "toc body";
  }
  .as-site .as-guide__toc {
    position: sticky;
    top: calc(100px + 24px);
    align-self: start;
  }
  .as-site .as-guide__src {
    margin-left: calc(280px + 64px);
  }
}
/* "Läs mer i guiden"-rad längst ned i prosa-sektionen på målsidorna */
.as-site .as-guide-link { width: 100%; max-width: calc(var(--container) + 2*var(--gutter)); margin: 32px auto 0 auto; padding-inline: var(--gutter); font-family: "Inter", sans-serif; font-size: 16px; }
.as-site .as-guide-link a { color: #1800AD; text-decoration: none; border-bottom: 1.5px solid rgba(24,0,173,.3); font-weight: 600; }
.as-site .as-guide-link a:hover { border-bottom-color: #1800AD; }
@media (max-width: 760px) {
  .as-site .as-guide { padding-block: 24px 48px; }
  .as-site .as-guide__body { font-size: 16px; }
  .as-site .as-guide__cta { flex-direction: column; align-items: flex-start; padding: 22px 24px; }
}