/* ===========================================================================
   Vejledninger — commuteconnects.com
   ===========================================================================

   Et TILLÆG til site.css, ikke en erstatning. Tokens, header, footer, .container,
   .btn og typografien kommer derfra; her står kun det vejledningsafsnittet selv har.

   ALT er scopet under body.page-guides. Det er ikke pynt: site.css definerer allerede
   .section, .section-head, .steps, .meta og .eyebrow til marketingsiderne, og et
   uscopet ark ville ændre forsiden. Scopet gør reglerne herunder mere specifikke end
   site.css' egne, så de vinder her og ingen andre steder.

   Filen loades KUN på vejledningssider, så de 14 marketingsider henter ikke en byte
   mere end før — og site.css' ?v=75 behøver ikke bumpes.
   ========================================================================== */

/* ---------- Fælles ---------- */

.page-guides .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-guides .section {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-6) var(--gutter);
}

/* site.css' .section-head er en smal blok med bundmargen; her er den en linje med
   en valgfri henvisning skubbet ud til højre. */
.page-guides .section-head {
  max-width: none;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.page-guides .section-head h2 {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-guides .section-head .aside { margin-left: auto; font-size: var(--t-sm); }
.page-guides .section-head .aside a { text-decoration: none; }

.page-guides .btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--hairline-strong);
}
.page-guides .btn-ghost:hover { background: var(--surface-3); }

/* ---------- Hub ---------- */

/* Toppen af siden skal rydde headeren.
   site.css sætter .site-header til position:absolute i kortets øverste --header-h
   (§9.9), så den ligger OVEN PÅ det første element frem for at skubbe det ned. På
   marketingsiderne er det .page-intro der betaler med calc(--header-h + …) i sin
   padding-block; vejledningerne har ingen .page-intro, og uden de to regler herunder
   lander eyebrowen bogstaveligt talt oven i logoet. */
.page-guides .hub-hero { padding-block: calc(var(--header-h) + var(--s-6)) var(--s-6); }
.page-guides .hub-hero h1 {
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: var(--s-2);
  max-width: 20ch;
}
.page-guides .hub-hero h1 em { font-style: normal; color: var(--accent-text); }
.page-guides .hub-hero .lead {
  font-size: var(--t-lead);
  color: var(--fg-soft);
  max-width: 56ch;
  margin-top: var(--s-2);
}

/* Bredden er sat efter den længste placeholder, ikke omvendt: en placeholder der
   klippes midt i et eksempel er værre end ingen eksempler. Den fulde formulering står
   i det skjulte <label>, som skærmlæseren læser op. */
.page-guides .search {
  margin-top: var(--s-5);
  max-width: 38rem;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--surface-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  padding: 0.75rem var(--s-3);
}
.page-guides .search input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--fg);
  font: inherit;
}
.page-guides .search input::placeholder { color: var(--muted); }
.page-guides .search input:focus { outline: none; }
.page-guides .search:focus-within { border-color: var(--focus); }
.page-guides .search kbd {
  font: inherit;
  font-size: var(--t-xs);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
}
.page-guides .search-status {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--muted);
}
.page-guides .search-empty { color: var(--muted); font-size: var(--t-sm); }

/* Startsporet ER en rækkefølge — derfor nummereret. Kategorierne nedenfor er det ikke,
   og har hverken numre eller pile. Nummereringen bærer information, ikke dekoration. */
.page-guides .path {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-guides .path li {
  position: relative;
  /* 3.9rem og ikke 3.25rem: badgen er 1.75rem bred og starter ved --s-3, så 3.25rem
     efterlod fire pixel mellem tallet og overskriften. På et kort hvor de to står på
     samme linje læses det som ét ord. */
  padding: var(--s-3) var(--s-3) var(--s-3) 3.9rem;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.page-guides .path li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--brand-700);
  color: var(--brand-100);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.page-guides .path h3 { font-size: var(--t-sm); font-weight: 600; }
.page-guides .path h3 a { color: inherit; text-decoration: none; }
.page-guides .path h3 a:hover { color: var(--accent-text); }
.page-guides .path p { font-size: var(--t-xs); color: var(--muted); margin-top: 0.25rem; }
.page-guides .path .time {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-xs);
  color: var(--n-400);
}

.page-guides .cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.page-guides .cat {
  display: block;
  padding: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
}
.page-guides .cat:hover { background: var(--surface-3); border-color: var(--hairline-strong); }
.page-guides .cat .ico { display: block; margin-bottom: var(--s-2); }
.page-guides .cat h3 { font-size: var(--t-base); font-weight: 600; }
.page-guides .cat p { font-size: var(--t-sm); color: var(--muted); margin-top: 0.25rem; }
.page-guides .cat .count {
  display: inline-block;
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  color: var(--n-400);
  font-variant-numeric: tabular-nums;
}

/* Katalogets liste skal skimmes, ikke vejes — derfor rækker, ikke kort. */
.page-guides .popular { border-top: 1px solid var(--border); }
.page-guides .popular ul { padding: 0; margin: 0; }
.page-guides .popular li { list-style: none; border-bottom: 1px solid var(--border); }
.page-guides .popular a {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 0.875rem 0;
  text-decoration: none;
  color: var(--fg);
}
.page-guides .popular a:hover { color: var(--accent-text); }
.page-guides .popular .cat-tag {
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--muted);
  white-space: nowrap;
}

.page-guides .ask {
  max-width: var(--container);
  margin: var(--s-4) auto var(--s-8);
  padding: var(--s-5) var(--gutter);
}
.page-guides .ask-inner {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.page-guides .ask h2 { font-size: var(--t-lead); font-weight: 600; }
.page-guides .ask p { color: var(--muted); font-size: var(--t-sm); margin-top: 0.25rem; }
.page-guides .ask .btn { margin-left: auto; }

/* ---------- Artikel ---------- */

.page-guides .doc {
  /* Samme headerrydning som .hub-hero ovenfor — her rammer den både brødteksten,
     sidenavigationen og indholdsfortegnelsen, fordi alle tre er børn af griddet. */
  padding-block: calc(var(--header-h) + var(--s-5)) var(--s-8);
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 13rem;
  gap: var(--s-5);
  align-items: start;
}

.page-guides .docnav { font-size: var(--t-sm); position: sticky; top: var(--s-3); }
.page-guides .docnav h4 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 var(--s-1);
}
.page-guides .docnav h4 a { color: inherit; text-decoration: none; }
.page-guides .docnav h4 a:hover { color: var(--fg-soft); }
.page-guides .docnav ul { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.page-guides .docnav a { display: block; padding: 0.3rem 0; color: var(--fg-soft); text-decoration: none; }
.page-guides .docnav a:hover { color: var(--fg); }
.page-guides .docnav a[aria-current] {
  color: var(--accent-text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--brand-500);
  padding-left: var(--s-2);
  margin-left: calc(-1 * var(--s-2));
}

.page-guides .crumbs { font-size: var(--t-xs); color: var(--muted); margin: 0; }
.page-guides .crumbs a { text-decoration: none; }
.page-guides article h1 {
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: var(--s-2);
  max-width: 24ch;
}
.page-guides .meta {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  color: var(--muted);
}
.page-guides .pill {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
}

.page-guides .guide-body > p { margin-top: var(--s-3); max-width: 65ch; color: var(--fg-soft); }
.page-guides .guide-body h2 {
  font-size: var(--t-lead);
  font-weight: 600;
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  scroll-margin-top: var(--s-3);
}
.page-guides .guide-body h3 { font-size: var(--t-base); font-weight: 600; margin-top: var(--s-3); }
.page-guides .guide-body > ul { margin-top: var(--s-3); max-width: 65ch; color: var(--fg-soft); padding-left: 1.25rem; }
.page-guides .guide-body > ul li { margin-top: var(--s-1); }
.page-guides .guide-body a { color: var(--link); }

.page-guides .guide-body .steps {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 0;
  counter-reset: s;
}
.page-guides .guide-body .steps > li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.page-guides .guide-body .steps > li::before {
  counter-increment: s;
  content: counter(s);
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--brand-700);
  color: var(--accent-text);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.page-guides .guide-body .steps h3 { font-size: var(--t-base); font-weight: 600; margin-top: 0; }
.page-guides .guide-body .steps p { font-size: var(--t-sm); color: var(--muted); margin-top: 0.25rem; }

.page-guides .callout {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--radius);
  background: var(--surface-2);
  border-left: 3px solid var(--brand-500);
  font-size: var(--t-sm);
  color: var(--fg-soft);
  max-width: 65ch;
}
.page-guides .callout strong { color: var(--fg); }

/* ---------- «Fandt du ikke svaret?» ----------
   Erstatter den tidligere .helpful-linje. Blokken er bevidst en KASSE og ikke en linje
   med en knap: den skal kunne ses af den der er kørt fast, uden at ligne endnu et
   navigationselement man scroller forbi. Formularen er ægte HTML — ingen JS krævet —
   så felterne er stylet direkte og ikke gennem en komponentklasse der ikke findes. */
.page-guides .feedback {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  max-width: 65ch;
}
.page-guides .feedback h2 {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-guides .feedback-lead {
  margin-top: 0.4rem;
  font-size: var(--t-sm);
  color: var(--fg-soft);
}
.page-guides .feedback-form {
  margin-top: var(--s-3);
  display: grid;
  gap: 0.35rem;
}
.page-guides .feedback-form label {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.page-guides .feedback-form label + input,
.page-guides .feedback-form label + textarea { margin-bottom: 0.35rem; }
.page-guides .feedback-form textarea,
.page-guides .feedback-form input[type='email'] {
  width: 100%;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--fg);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.8rem;
}
.page-guides .feedback-form textarea { resize: vertical; min-height: 6rem; }
.page-guides .feedback-form textarea:focus-visible,
.page-guides .feedback-form input[type='email']:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
  border-color: var(--brand-500);
}
.page-guides .feedback-form ::placeholder { color: var(--muted); }
.page-guides .feedback-hint {
  font-size: var(--t-xs);
  color: var(--muted);
}
.page-guides .feedback-actions {
  margin-top: var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
/* Mailvejen er sidestillet, ikke gemt: den lander hos et menneske frem for i et
   samlebånd, og for nogle henvendelser er dét den rigtige kanal. */
.page-guides .feedback-mail { font-size: var(--t-sm); color: var(--fg-soft); }

/* ---------- Kvitteringssiderne ---------- */
.page-guides .notice { max-width: 60ch; }
.page-guides .notice h1 {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-guides .notice p { margin-top: var(--s-2); color: var(--fg-soft); }
.page-guides .notice-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.page-guides .guide-pager {
  margin-top: var(--s-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.page-guides .pager-link {
  display: block;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  text-decoration: none;
  color: var(--fg);
}
.page-guides .pager-link:hover { background: var(--surface-3); border-color: var(--hairline-strong); }
.page-guides .pager-next { text-align: right; }
.page-guides .pager-label {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.page-guides .pager-title { display: block; font-size: var(--t-sm); font-weight: 600; margin-top: 0.2rem; }

.page-guides .toc { font-size: var(--t-sm); position: sticky; top: var(--s-3); }
.page-guides .toc h4 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 var(--s-1);
}
.page-guides .toc ul { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--border); }
.page-guides .toc a { display: block; padding: 0.3rem var(--s-2); color: var(--muted); text-decoration: none; }
.page-guides .toc a:hover { color: var(--fg); }
.page-guides .toc a[aria-current] { color: var(--fg); box-shadow: inset 2px 0 0 var(--brand-500); }

/* ---------- Smallere skærme ---------- */

/* Under 48rem pakker site.css headeren om på to rækker: ordmærket øverst, sprogpillen
   og menuknappen på en linje for sig. --header-h måler kun den første række, så
   headerrydningen længere oppe rækker ikke — eyebrowen lander oven i menuknappen.
   Målt på 390 px: headerens underkant ligger ~4rem under --header-h.
   Marketingsiderne slipper udenom fordi .page-intro også er skubbet ned af kortets
   --frame-inset; vejledningerne har ikke det kort. */
@media (max-width: 47.99rem) {
  .page-guides .hub-hero { padding-block-start: calc(var(--header-h) + 4rem + var(--s-4)); }
  .page-guides .doc { padding-block-start: calc(var(--header-h) + 4rem + var(--s-3)); }
}

@media (max-width: 60rem) {
  .page-guides .path,
  .page-guides .cats { grid-template-columns: repeat(2, 1fr); }
  .page-guides .doc { grid-template-columns: minmax(0, 1fr); }
  .page-guides .docnav,
  .page-guides .toc { position: static; }
  /* Sidemenuen gentager oversigten; på ét spor er den støj før indholdet. Pageren og
     krummestien bærer navigationen i stedet. */
  .page-guides .docnav { display: none; }
}
@media (max-width: 40rem) {
  .page-guides .path,
  .page-guides .cats { grid-template-columns: minmax(0, 1fr); }
  .page-guides .guide-pager { grid-template-columns: minmax(0, 1fr); }
  .page-guides .pager-next { text-align: left; }
}

/* ---------- Sektionsside ---------- */

.page-guides .section-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-2);
}
.page-guides .section-eyebrow .ico { display: inline-flex; }

/* To spor frem for fire: en sektion har typisk 2-4 vejledninger, og fire spor ville
   efterlade tomme kolonner i de fleste af dem. Numrene bliver stående — rækkefølgen
   inden i en sektion er den, vejledningerne er skrevet til at læses i. */
.page-guides .path--section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-guides .path--section h3 { font-size: var(--t-base); }
.page-guides .path--section p { font-size: var(--t-sm); }