/* wahsslabs.se – sajtens regler. Kräver tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 23px;
  font-weight: 400;
}

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink-muted); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.page { overflow-x: clip; }

/* Behållare */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Typografi */
.label { margin: 0; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.display { margin: 0; font-size: 72px; line-height: 76px; font-weight: 700; letter-spacing: -0.02em; }
.lead { margin: 0; max-width: 560px; font-size: 18px; line-height: 28px; }
.h2 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; }
.h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; }
.h3--step { font-size: 16px; line-height: 22px; }
.text { margin: 0; }

/* Sidhuvud */
.site-header { border-bottom: var(--rule-hair) solid var(--line); }
.site-header__inner { padding-top: var(--space-4); padding-bottom: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.site-header__logo { display: block; line-height: 0; padding: var(--space-2) 0; }
.site-header__logo img { height: 28px; width: auto; display: block; }

/* Logotyp och symbol: svart i ljust tema, vit i mörkt. Två bilder, en syns. */
.theme-dark-only { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-light-only { display: none !important; }
  :root:not([data-theme="light"]) .theme-dark-only { display: block !important; }
}
:root[data-theme="dark"] .theme-light-only { display: none !important; }
:root[data-theme="dark"] .theme-dark-only { display: block !important; }
.site-nav { display: flex; gap: var(--nav-gap); font-size: 15px; font-weight: 500; }
.site-nav a { text-decoration: none; padding: var(--link-pad-y) 0; }

/* Inledning */
.hero { padding-top: var(--hero-y); padding-bottom: var(--hero-y); }
.hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-3); align-items: end; }
.hero__text { display: flex; flex-direction: column; gap: var(--space-4); }
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-2); }
.hero__art { display: flex; justify-content: flex-end; }

/* Knappar */
.button { display: inline-flex; align-items: center; min-height: var(--button-h); padding: 0 var(--space-4); text-decoration: none; font-weight: 500; border-radius: var(--radius-none); }
.button--primary { background: var(--ink); color: var(--paper); border: var(--rule-hair) solid var(--ink); }
.button--primary:hover { background: var(--ink-muted); border-color: var(--ink-muted); color: var(--paper); }
.button--secondary { background: transparent; color: var(--ink); border: var(--rule-hair) solid var(--ink); }
.button--secondary:hover { background: var(--paper-alt); color: var(--ink); }

/* Avsnitt */
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--rule { border-top: var(--rule-hair) solid var(--line); }
.section--rule-strong { border-top: var(--rule-strong) solid var(--line-strong); }
.section--alt { background: var(--paper-alt); }
.section__head { margin-bottom: var(--space-5); }
.section__head .label, .label--head { margin-bottom: var(--space-1); }
.h2--spaced { margin-bottom: var(--space-5); }
.section__intro { margin: var(--space-3) 0 var(--space-5); max-width: 640px; }
.split { display: grid; grid-template-columns: 4fr 8fr; gap: var(--space-3); }
.split__aside { margin: 0; max-width: 620px; align-self: end; }

/* Kort */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.card { border-top: var(--rule-strong) solid var(--line-strong); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.card--more { gap: var(--space-3); }

/* Steg */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.step { border-top: var(--rule-hair) solid var(--line); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.step__num { font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.section__outro { margin: var(--space-5) 0 0; max-width: 720px; }

/* Om */
.about__body { display: flex; flex-direction: column; gap: var(--space-3); max-width: 680px; }

/* Textlänk */
.text-link { font-weight: 500; align-self: flex-start; padding: var(--link-pad-y) 0; }

/* Projektlista */
.project-list { list-style: none; margin: 0; padding: 0; }
.project-list li { border-top: var(--rule-hair) solid var(--line); padding: var(--link-pad-y) 0; display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.project-list li:last-child { border-bottom: var(--rule-hair) solid var(--line); }
.project-list strong { font-weight: 500; }

/* Kontakt */
.contact { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.contact__item { display: flex; flex-direction: column; gap: var(--space-1); }
.contact__value { font-size: 22px; line-height: 28px; font-weight: 500; }

/* Sidfot */
.site-footer { border-top: var(--rule-hair) solid var(--line); }
.site-footer__inner { padding-top: var(--space-4); padding-bottom: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: 12px; line-height: 17px; color: var(--ink-muted); }
.site-footer__inner img { height: 20px; width: 20px; display: block; }
/* Texten tar raden och bryts mellan grupperna, så att symbolen står kvar till höger på smal skärm. */
.site-footer__inner > span { flex: 1 1 0; min-width: 0; }
.site-footer__inner img { flex-shrink: 0; }
.site-footer__group { white-space: nowrap; }

/* Mönstret och animationen */
.pattern { width: 100%; max-width: 440px; height: auto; display: block; overflow: visible; position: relative; z-index: 2; pointer-events: none; }
.pattern__bg { fill: var(--paper); }
.pattern__grid { fill: none; stroke: var(--pattern-grid); stroke-width: 2; }
.pattern__block { fill: var(--accent); }

@keyframes wl-a{0%{transform:translate(-960px,-480px)}12%{transform:translate(-600px,-240px)}24%{transform:translate(-240px,240px)}36%{transform:translate(-480px,120px)}48%{transform:translate(240px,0)}60%{transform:translate(120px,-120px)}70%{transform:translate(-120px,0)}80%,100%{transform:translate(0,0)}}
@keyframes wl-b{0%{transform:translate(720px,-600px)}12%{transform:translate(360px,360px)}24%{transform:translate(-360px,480px)}36%{transform:translate(-720px,-120px)}48%{transform:translate(-240px,-240px)}60%{transform:translate(120px,0)}72%{transform:translate(-120px,0)}84%,100%{transform:translate(0,0)}}
@keyframes wl-c{0%{transform:translate(-1200px,240px)}12%{transform:translate(-720px,-360px)}24%{transform:translate(120px,-240px)}36%{transform:translate(240px,360px)}48%{transform:translate(-360px,240px)}60%{transform:translate(0,-120px)}72%{transform:translate(-120px,0)}80%{transform:translate(120px,0)}86%,100%{transform:translate(0,0)}}
@keyframes wl-d{0%{transform:translate(240px,-720px)}12%{transform:translate(-480px,-120px)}24%{transform:translate(-840px,360px)}36%{transform:translate(-360px,-360px)}48%{transform:translate(-120px,120px)}60%{transform:translate(-240px,0)}68%{transform:translate(120px,0)}76%,100%{transform:translate(0,0)}}
@keyframes wl-e{0%{transform:translate(-480px,720px)}12%{transform:translate(-960px,0)}24%{transform:translate(-600px,-360px)}36%{transform:translate(0,240px)}48%{transform:translate(-240px,0)}60%{transform:translate(-480px,-120px)}72%{transform:translate(120px,-120px)}82%,100%{transform:translate(0,0)}}
@keyframes wl-f{0%{transform:translate(-840px,-720px)}12%{transform:translate(-240px,480px)}24%{transform:translate(240px,120px)}36%{transform:translate(-600px,240px)}48%{transform:translate(-120px,-360px)}60%{transform:translate(120px,120px)}72%{transform:translate(0,-240px)}84%{transform:translate(0,-120px)}90%,100%{transform:translate(0,0)}}
@keyframes wl-g{0%{transform:translate(600px,600px)}12%{transform:translate(-120px,-480px)}24%{transform:translate(-960px,-240px)}36%{transform:translate(-240px,480px)}48%{transform:translate(-600px,0)}60%{transform:translate(240px,-120px)}72%{transform:translate(-120px,-120px)}84%{transform:translate(0,-240px)}94%,100%{transform:translate(0,0)}}
@keyframes wl-h{0%{transform:translate(-360px,-840px)}12%{transform:translate(-840px,240px)}24%{transform:translate(-120px,600px)}36%{transform:translate(-720px,-240px)}48%{transform:translate(0,240px)}60%{transform:translate(-360px,120px)}72%{transform:translate(0,-120px)}88%,100%{transform:translate(0,0)}}
@keyframes wl-i{0%{transform:translate(-1080px,-360px)}12%{transform:translate(120px,-240px)}24%{transform:translate(-480px,600px)}36%{transform:translate(-120px,-480px)}48%{transform:translate(-840px,120px)}60%{transform:translate(-120px,0)}72%{transform:translate(0,-240px)}82%{transform:translate(-120px,0)}92%,100%{transform:translate(0,0)}}
@keyframes wl-land{0%{transform:translate(0,-480px);opacity:0}1%{transform:translate(0,-480px);opacity:1}12%{transform:translate(0,-360px)}24%{transform:translate(0,-240px)}36%{transform:translate(0,-120px)}48%{transform:translate(0,0)}58%{transform:translate(0,-4px)}68%{transform:translate(1.5px,0)}78%{transform:translate(-1.5px,-1px)}88%{transform:translate(0.5px,0)}100%{transform:translate(0,0)}}

.pattern__piece { animation-duration: 4s; animation-timing-function: steps(3, end); animation-fill-mode: both; }
.pattern__piece--a { animation-name: wl-a; animation-delay: 0s; }
.pattern__piece--b { animation-name: wl-b; animation-delay: 0.125s; }
.pattern__piece--c { animation-name: wl-c; animation-delay: 0.25s; }
.pattern__piece--d { animation-name: wl-d; animation-delay: 0.06s; }
.pattern__piece--e { animation-name: wl-e; animation-delay: 0.19s; }
.pattern__piece--f { animation-name: wl-f; animation-delay: 0.31s; }
.pattern__piece--g { animation-name: wl-g; animation-delay: 0.375s; }
.pattern__piece--h { animation-name: wl-h; animation-delay: 0.09s; }
.pattern__piece--i { animation-name: wl-i; animation-delay: 0.22s; }
.pattern__block { animation: wl-land 0.85s steps(1, end) 4.15s both; }

@media (prefers-reduced-motion: reduce) {
  .pattern__piece, .pattern__block { animation: none; }
}

/* Surfplatta: fyra steg blir två */
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); }
}

/* Mobil: allt staplas */
@media (max-width: 860px) {
  .hero__grid, .split, .cards, .cards--two, .steps { grid-template-columns: 1fr; }
  .split { gap: var(--space-4); }
  .cards { gap: var(--space-5); }
  .site-nav { display: none; }
  .display { font-size: 40px; line-height: 44px; }
  .hero { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  /* Inga knappar i hero, så att mönstret och animationen syns när sidan laddas; Erbjudande och Kontakt ligger nedanför */
  .hero__actions { display: none; }
  .section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}

/* Telefon: smalare marginal */
@media (max-width: 480px) {
  .container { padding-left: var(--space-3); padding-right: var(--space-3); }
  .lead { font-size: 16px; line-height: 25px; }
  .contact__value { font-size: 18px; line-height: 24px; }
}

/* Skip-länk: första fokuserbara elementet, syns bara vid tangentbordsfokus (portfolio-dod.md §1). Inte i prototypen – se design/CODE-TO-DESIGN.md. */
.skip-link { position: absolute; left: var(--space-3); top: var(--space-3); z-index: 10; padding: var(--space-2) var(--space-3); background: var(--ink); color: var(--paper); font-weight: 500; text-decoration: none; transform: translateY(-200%); }
.skip-link:hover { color: var(--paper); }
.skip-link:focus-visible { transform: none; outline: 2px solid var(--ink); outline-offset: 2px; }