/* ==========================================================================
   WEBBMAKARN — 04 COMPONENTS
   Knappar, kort, fält, navigation. Alla träffytor ≥ 24×24 px (WCAG 2.5.8),
   alla gränser ≥ 3:1 (WCAG 1.4.11).
   ========================================================================== */

/* -- Huvud --------------------------------------------------------------- */
.huvud {
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb,var(--botten) 88%,transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--snabb) var(--kurva);
}
.huvud.kant { border-bottom-color:var(--regel); }
.huvud-inre {
  min-height:var(--huvud); display:flex; align-items:center; gap:var(--r-4);
  max-width:var(--behallare); margin-inline:auto; padding-inline:var(--kant);
}

.marke { display:flex; align-items:baseline; gap:.55rem; margin-right:auto; }
.marke-ord {
  font-family:var(--f-display); font-weight:600; font-size:1.25rem;
  letter-spacing:-.03em; color:var(--text); line-height:1;
}
.marke-punkt { width:5px; height:5px; background:var(--accent); align-self:center; }

.nav { display:flex; align-items:center; gap:var(--r-3); }
.nav a {
  font-size:var(--t-liten); color:var(--text-3);
  padding:.6rem .1rem; min-height:24px; display:inline-flex; align-items:center;
  position:relative; white-space:nowrap; transition:color var(--snabb) var(--kurva);
}
.nav a::after {
  content:""; position:absolute; inset:auto 0 .4rem 0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--medel) var(--kurva);
}
.nav a:hover { color:var(--text); }
.nav a:hover::after { transform:scaleX(1); }
.nav a[aria-current="page"] { color:var(--text); }
.nav a[aria-current="page"]::after { transform:scaleX(1); background:var(--accent); height:2px; }

.meny-knapp {
  display:none; background:none; border:1px solid var(--regel-stark);
  width:46px; height:46px; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.meny-knapp span { display:block; width:17px; height:1.5px; background:var(--text);
  transition:transform var(--medel) var(--kurva),opacity var(--snabb); }
.meny-knapp[aria-expanded="true"] span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
.meny-knapp[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.meny-knapp[aria-expanded="true"] span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }

@media (max-width:980px) {
  .meny-knapp { display:flex; }
  .nav {
    position:fixed; inset:var(--huvud) 0 auto 0; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--botten); border-bottom:1px solid var(--regel);
    padding:0 var(--kant) var(--r-4);
    max-height:calc(100dvh - var(--huvud)); overflow-y:auto;
  }
  .nav.oppen { display:flex; }
  .nav a { padding:1.15rem 0; border-bottom:1px solid var(--regel);
           font-family:var(--f-display); font-size:1.5rem; font-weight:600;
           letter-spacing:-.028em; color:var(--text); min-height:56px; }
  .nav a::after { display:none; }
  .nav .knapp { margin-top:var(--r-4); justify-content:center; border-bottom:0;
                font-family:var(--f-text); font-size:var(--t-liten); }
}

/* -- Knappar ------------------------------------------------------------- */
.knapp {
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--f-text); font-weight:600; font-size:var(--t-liten);
  line-height:1.2; letter-spacing:.01em;
  padding:15px 28px; min-height:48px; border-radius:var(--radie);
  background:var(--text); color:var(--botten); border:1px solid var(--text);
  cursor:pointer; text-decoration:none;
  transition:background var(--snabb) var(--kurva),
             border-color var(--snabb) var(--kurva),
             color var(--snabb) var(--kurva);
}
.knapp:hover { background:var(--accent); border-color:var(--accent); color:var(--vit); }
.knapp-stor  { padding:18px 34px; font-size:1rem; min-height:56px; }
.knapp-liten { padding:10px 18px; font-size:.875rem; min-height:40px; }
.knapp-linje { background:transparent; color:var(--text); border-color:var(--regel-stark); }
.knapp-linje:hover { background:transparent; border-color:var(--text); color:var(--text); }
.knapp-accent { background:var(--accent); border-color:var(--accent); color:var(--vit); }
.knapp-accent:hover { background:var(--accent-mork); border-color:var(--accent-mork); }
.knapp:disabled { opacity:.4; cursor:not-allowed; }

.sektion-mork .knapp { background:var(--mork-text); color:var(--mork); border-color:var(--mork-text); }
.sektion-mork .knapp:hover { background:var(--mork-accent); border-color:var(--mork-accent); color:var(--mork); }
.sektion-mork .knapp-linje { background:transparent; color:var(--mork-text); border-color:var(--mork-linje-stark); }
.sektion-mork .knapp-linje:hover { border-color:var(--mork-text); background:transparent; }

/* Pillänk */
.pil {
  display:inline-flex; align-items:center; gap:.5rem; min-height:24px;
  font-weight:600; font-size:var(--t-liten); color:var(--text);
  border-bottom:1px solid var(--regel-stark); padding-bottom:3px;
  transition:border-color var(--snabb) var(--kurva),color var(--snabb) var(--kurva);
}
.pil::after { content:"↗"; font-size:.9em; transition:transform var(--snabb) var(--kurva); }
.pil:hover { color:var(--accent); border-color:var(--accent); }
.pil:hover::after { transform:translate(2px,-2px); }
.pil-ner::after { content:"→"; }
.pil-ner:hover::after { transform:translateX(3px); }
.sektion-mork .pil { color:var(--mork-text); border-color:var(--mork-linje-stark); }
.sektion-mork .pil:hover { color:var(--mork-accent); border-color:var(--mork-accent); }

/* -- Tjänsteblock -------------------------------------------------------- */
.tjanst {
  display:grid; gap:var(--r-2); align-content:start;
  padding-top:var(--r-3); border-top:1px solid var(--text);
}
.tjanst .nummer { margin-bottom:var(--r-1); }
.tjanst h3 { max-width:14ch; }
.tjanst p { font-size:var(--t-liten); max-width:30ch; }
.tjanst ul { display:grid; gap:.4rem; margin-top:var(--r-1); }
.tjanst li { font-size:var(--t-liten); color:var(--text-4); }

/* -- Projektkort --------------------------------------------------------- */
.projektkort { display:grid; gap:var(--r-3); }
.projektbild {
  aspect-ratio:16/11; background:var(--yta); overflow:hidden;
  border:1px solid var(--regel); position:relative;
}
.projektbild > * {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--lugn) var(--kurva);
}
.projektkort:hover .projektbild > * { transform:scale(1.025); }
.projektkort .meta { display:flex; gap:var(--r-2); flex-wrap:wrap; align-items:baseline; }
.projektkort h3 { transition:color var(--snabb) var(--kurva); }
.projektkort:hover h3 { color:var(--accent); }
.taggar { display:flex; gap:.45rem; flex-wrap:wrap; }
.tagg {
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.06em;
  color:var(--text-4); border:1px solid var(--regel); padding:.28rem .55rem;
  text-transform:uppercase;
}

/* -- Modul- och arkitekturkort ------------------------------------------- */
.modul {
  border:1px solid var(--mork-linje); padding:var(--r-4);
  display:grid; gap:var(--r-2); align-content:start;
  transition:border-color var(--medel) var(--kurva);
}
.modul:hover { border-color:var(--mork-accent); }
.modul .nummer { color:var(--mork-accent); }
.modul h3 { font-size:var(--t-h3); }
.modul p { font-size:var(--t-liten); }

/* -- Stacklista ---------------------------------------------------------- */
.stackrad {
  display:grid; grid-template-columns:180px minmax(0,1fr);
  gap:var(--r-3); padding-block:var(--r-3);
  border-top:1px solid var(--regel);
}
.stackrad:last-child { border-bottom:1px solid var(--regel); }
.stackrad dt { font-family:var(--f-display); font-weight:600; font-size:1.05rem;
               letter-spacing:-.012em; color:var(--text); }
.stackrad dd { margin:0; color:var(--text-3); font-size:var(--t-liten); }
@media (max-width:620px) { .stackrad { grid-template-columns:1fr; gap:var(--r-1); } }

/* -- Steglista ----------------------------------------------------------- */
.steg { counter-reset:s; display:grid; }
.steg li {
  counter-increment:s; position:relative;
  padding:var(--r-4) 0 var(--r-4) 5rem;
  border-top:1px solid var(--regel);
  display:grid; gap:.4rem;
}
.steg li:last-child { border-bottom:1px solid var(--regel); }
.steg li::before {
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:var(--r-4);
  font-family:var(--f-mono); font-size:var(--t-mikro); letter-spacing:.1em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.steg h4 { font-size:1.15rem; font-family:var(--f-display); letter-spacing:-.014em; }
.steg p  { font-size:var(--t-liten); }
@media (max-width:620px) { .steg li { padding-left:3.2rem; } }

/* -- Punktlista ---------------------------------------------------------- */
.punkter { display:grid; gap:.75rem; max-width:var(--matt); }
.punkter li { position:relative; padding-left:1.6rem; color:var(--text-3); }
.punkter li::before {
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:1px; background:var(--accent);
}

/* -- Formulär ------------------------------------------------------------ */
.formular { display:grid; gap:var(--r-3); max-width:34rem; }
.falt { display:grid; gap:.5rem; }
.falt label {
  font-size:var(--t-mikro); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-4);
}
.falt input,.falt textarea,.falt select {
  font-family:var(--f-text); font-size:var(--t-brod); color:var(--text);
  background:transparent; border:0; border-bottom:1px solid var(--regel-stark);
  padding:.85rem 0; width:100%; min-height:48px; border-radius:0;
  transition:border-color var(--snabb) var(--kurva);
}
.falt textarea { resize:vertical; min-height:8rem; }
.falt input:focus,.falt textarea:focus,.falt select:focus {
  outline:none; border-bottom-color:var(--accent); border-bottom-width:2px;
}
.falt input:focus-visible,.falt textarea:focus-visible {
  outline:3px solid var(--accent); outline-offset:4px;
}
.falt input::placeholder,.falt textarea::placeholder { color:var(--text-4); }
.falt [aria-invalid="true"] { border-bottom-color:#B3261E; border-bottom-width:2px; }

.honung { position:absolute; left:-9999px; width:1px; height:1px;
          overflow:hidden; opacity:0; pointer-events:none; }
.felruta {
  border-left:3px solid #B3261E; background:rgba(179,38,30,.06);
  padding:var(--r-2) var(--r-3); font-size:var(--t-liten); color:var(--text);
}
.felruta strong { display:block; margin-bottom:.15rem; }

/* -- Samtyckesruta för tredjepartsinbäddning ----------------------------- */
.samtycke {
  border:1px solid var(--regel); padding:var(--r-4);
  display:grid; gap:var(--r-2); justify-items:start; background:var(--yta);
}
.samtycke h3 { font-size:var(--t-h3); }
.samtycke p { font-size:var(--t-liten); }

/* -- Sidfot -------------------------------------------------------------- */
.sidfot { border-top:1px solid var(--regel); padding-block:var(--r-7) var(--r-4); }
.sidfot h4 {
  font-size:var(--t-mikro); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-4); margin-bottom:var(--r-2);
}
.sidfot ul { display:grid; gap:.1rem; }
.sidfot li { display:flex; }
.sidfot a {
  color:var(--text-3); font-size:var(--t-liten);
  padding:.35rem 0; min-height:24px; display:inline-flex; align-items:center;
  transition:color var(--snabb) var(--kurva);
}
.sidfot a:hover { color:var(--text); }
.sidfot-slut {
  border-top:1px solid var(--regel); margin-top:var(--r-6); padding-top:var(--r-3);
  display:flex; justify-content:space-between; gap:var(--r-3); flex-wrap:wrap;
  font-size:.8125rem; color:var(--text-4);
}

/* -- Dokumentsidor (policy, redogörelse) --------------------------------- */
.dokument { max-width:40rem; display:grid; gap:var(--r-3); }
.dokument h2 { margin-top:var(--r-5); font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem); }
.dokument h3 { margin-top:var(--r-2); }
.dokument p,.dokument li,.dokument dd { color:var(--text-3); }
.dokument ul,.dokument ol { padding-left:1.3rem; display:grid; gap:.5rem; list-style:disc; }
.dokument dl { display:grid; gap:var(--r-2); }
.dokument dt { font-weight:600; color:var(--text); }
.dokument dd { margin:0; }