@charset "utf-8";
/* ==========================================================================
   VÄGEN VIDARE — process och resurser

   Sidan har två läsare med olika behov:

   1. Någon som orienterar sig innan hen gör något alls
   2. Någon som just fått besked att ingen partner kunde ta emot

   Den andra läsaren är den som betyder mest. Hen kom hit efter ett nej och
   behöver konkreta saker att göra själv — inte tröst. Därför ligger stegen
   först och resurserna direkt efter, inte tvärtom.
   ========================================================================== */

.guide { background: var(--ivory-warm); }

.guide__header {
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--ivory-edge);
}
.guide__brand {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.guide__inner {
  max-width: 78ch;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.guide__intro { padding-block: clamp(2.5rem, 7vh, 4rem) 0; }
.guide__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy-800);
  max-width: 20ch;
  text-wrap: balance;
}
.guide__lead {
  margin: 0;
  max-width: 58ch;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-on-light-soft);
}

/* --------------------------------------------------------------------------
   RUTA FÖR DEN SOM FICK NEJ
   Visas överst för den som kommer via mejlet vid utebliven match.
   -------------------------------------------------------------------------- */
.callout {
  margin: 2rem 0 0;
  padding: 1.35rem 1.5rem;
  background: var(--gold-wash);
  border: 1px solid #E8DCC2;
  border-radius: var(--radius);
  color: #6B5426;
  line-height: 1.6;
}
.callout p { margin: 0 0 0.75rem; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: #4F3D19; }

/* --------------------------------------------------------------------------
   STEGEN

   Vertikal linje som binder ihop stegen. Det är en process, och att se att
   steg tre kommer efter steg två är hela poängen — många tror att man går
   direkt till advokat.
   -------------------------------------------------------------------------- */
.stages {
  margin: clamp(2.5rem, 7vh, 4rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
  position: relative;
}

.stage {
  position: relative;
  padding: 0 0 2.25rem 3.5rem;
  counter-increment: stage;
}
/* Linjen mellan stegen. Sista steget har ingen linje nedåt. */
.stage:not(:last-child)::before {
  content: '';
  position: absolute;
  inset-inline-start: 1.1rem;
  top: 2.4rem;
  bottom: 0;
  width: 1px;
  background: var(--ivory-edge);
}
.stage::after {
  content: counter(stage);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ivory-edge);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--step-0);
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

.stage__title {
  margin: 0.25rem 0 0.5rem;
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--navy-800);
  line-height: 1.35;
}

/* Markering för det som faktiskt är ett lagkrav, inte ett råd. Skillnaden
   spelar roll — man kan hoppa över ett råd. */
.stage__required {
  display: inline-block;
  margin-inline-start: 0.6rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--navy-800);
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.stage__optional {
  display: inline-block;
  margin-inline-start: 0.6rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--ivory-dim);
  color: var(--text-on-light-mute);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 500;
  vertical-align: middle;
}

.stage__body {
  margin: 0 0 0.9rem;
  color: var(--text-on-light-soft);
  line-height: 1.65;
}
.stage__body:last-child { margin-bottom: 0; }
.stage__body strong { color: var(--navy-800); font-weight: 500; }
.stage__body a { color: var(--navy-600); text-underline-offset: 3px; }

.stage__facts {
  margin: 0.9rem 0 0;
  padding: 0.9rem 1.15rem;
  background: #fff;
  border: 1px solid var(--ivory-edge);
  border-radius: var(--radius-sm);
  list-style: none;
  display: grid;
  gap: 0.55rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-on-light-soft);
}
.stage__facts li { display: flex; gap: 0.65rem; }
.stage__facts li::before {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  margin-top: 0.6rem;
  border-radius: 50%;
  background: var(--gold);
}
.stage__facts strong { color: var(--navy-800); font-weight: 500; }

/* --------------------------------------------------------------------------
   SÄKERHETSUNDANTAG
   Måste synas i flödet, inte gömmas i en fotnot. Den som behöver det
   behöver det tidigt.
   -------------------------------------------------------------------------- */
.safety {
  margin: 1rem 0 0;
  padding: 1.15rem 1.35rem;
  background: #fff;
  border: 1px solid var(--ivory-edge);
  border-inline-start: 3px solid var(--navy-600);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-on-light-soft);
}
.safety strong { color: var(--navy-800); }
.safety p { margin: 0 0 0.6rem; }
.safety p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   RESURSER
   -------------------------------------------------------------------------- */
.resources {
  margin-top: clamp(3rem, 8vh, 4.5rem);
  padding-top: clamp(2.5rem, 6vh, 3.5rem);
  border-top: 1px solid var(--ivory-edge);
}
.resources__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  color: var(--navy-800);
  line-height: 1.25;
}
.resources__lead {
  margin: 0 0 2rem;
  max-width: 56ch;
  color: var(--text-on-light-soft);
  line-height: 1.6;
}

.resource-group { margin-bottom: 2.5rem; }
.resource-group__heading {
  margin: 0 0 1rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-light-mute);
}

.resource-list { display: grid; gap: 0.85rem; }

.resource {
  display: block;
  padding: 1.15rem 1.35rem;
  background: #fff;
  border: 1px solid var(--ivory-edge);
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
a.resource:hover { border-color: var(--mist); box-shadow: var(--shadow-md); }

.resource__name {
  display: block;
  font-weight: 500;
  color: var(--navy-800);
  margin-bottom: 0.3rem;
  line-height: 1.35;
}
.resource__contact {
  display: block;
  font-size: var(--step--1);
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.resource__what {
  display: block;
  font-size: var(--step--1);
  color: var(--text-on-light-soft);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   KÄLLOR
   -------------------------------------------------------------------------- */
.guide__sources {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ivory-edge);
}
.guide__sources h2 {
  margin: 0 0 0.85rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-light-mute);
}
.guide__sources ul {
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-on-light-soft);
}
.guide__sources a { color: var(--navy-600); text-underline-offset: 3px; }
.guide__meta {
  margin: 1.15rem 0 0;
  font-size: var(--step--2);
  color: var(--text-on-light-mute);
  line-height: 1.55;
}

.guide__cta {
  margin: clamp(3rem, 8vh, 4.5rem) 0 0;
  padding: 2rem;
  background: var(--ivory-dim);
  border-radius: var(--radius);
  text-align: center;
}
.guide__cta p {
  margin: 0 0 1.5rem;
  color: var(--text-on-light-soft);
  line-height: 1.6;
}

.guide__footer {
  margin-top: clamp(3rem, 8vh, 4.5rem);
  border-top: 1px solid var(--ivory-edge);
  padding-block: 1.75rem;
  font-size: var(--step--1);
  color: var(--text-on-light-mute);
}
.guide__footer .guide__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
}
.guide__footer a { color: var(--navy-600); text-underline-offset: 3px; }

@media (max-width: 640px) {
  .stage { padding-inline-start: 2.9rem; }
  .stage::after { width: 1.9rem; height: 1.9rem; font-size: var(--step--1); }
  .stage:not(:last-child)::before { inset-inline-start: 0.95rem; top: 2.1rem; }
}