/* ============================================================================
   PackReport — shared site chrome (header + footer)
   SINGLE SOURCE OF TRUTH. Injected into every static subpage by apply-chrome.py.
   Fully namespaced under .prc-* so it is isolated from each page's legacy CSS.
   Colours come from the per-page design tokens, so it is automatically
   theme-aware (light / dark / system). Values ported 1:1 from the forside.
   To change site chrome: edit this file + the partials in apply-chrome.py,
   then run `python apply-chrome.py`.
   ============================================================================ */

.prc,
.prc *{ box-sizing:border-box }
.prc a{ text-decoration:none }
.prc svg{ display:block }

/* shared inner width (matches .wrap: 1120 / 24) */
.prc-bar,
.prc-finner{ max-width:1120px; margin:0 auto; padding:0 24px }

/* ============================== HEADER ============================== */
header.prc-header{
  position:sticky; top:0; z-index:60;
  background:rgba(244,243,238,.86);              /* light --bg @86% */
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) header.prc-header{ background:rgba(12,17,14,.82) }
}
:root[data-theme="dark"] header.prc-header{ background:rgba(12,17,14,.82) }

.prc-header .prc-bar{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:1rem }
.prc-brand{ display:flex; align-items:center; gap:.65rem; flex:none }
.prc-mark{ width:34px; height:34px; display:block; flex:none }
.prc-word{ font-family:var(--sans); font-weight:800; letter-spacing:-.03em; font-size:1.12rem; line-height:1; color:var(--ink) }
.prc-word small{ display:block; font-family:var(--mono); font-weight:400; font-size:.56rem; letter-spacing:.26em; color:var(--dim); text-transform:uppercase; margin-top:3px }

.prc-nav{ display:flex; align-items:center; gap:1.6rem }
.prc-navlink{ font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); padding:.35rem 0; border-bottom:1px solid transparent }
.prc-navlink:hover{ color:var(--ink); border-bottom-color:var(--accent) }
.prc-navlink[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent) }
/* Skjules ved 920px, ikke 760px. MÅLT: headeren rummer alle links ned til
   præcis 900px og løber over ved 880px. Mellem 761 og 875px gav det op til
   108px vandret overløb, hvor "Kom i gang" lå helt uden for skærmen (bl.a.
   iPad i portrait, 768px). 920 i stedet for 900 giver plads til en scrollbar
   på ~15px, så brækpunktet ikke ligger på selve kanten. */
@media (max-width:920px){ .prc-navlink{ display:none } }

.prc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border-radius:1px; font-weight:700; letter-spacing:-.01em; padding:.5rem 1rem; font-size:.86rem; border:1px solid transparent; white-space:nowrap; transition:transform .14s ease, filter .14s ease, border-color .14s ease }
.prc-btn-primary{ background:var(--accent); color:var(--on-accent); box-shadow:var(--glow) }
.prc-btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.06) }
.prc-btn-ghost{ border-color:var(--hair-strong); color:var(--ink); font-family:var(--mono); font-weight:500; letter-spacing:.04em }
.prc-btn-ghost:hover{ border-color:var(--accent); color:var(--accent-ink) }
/* "Log ind" blev tidligere SKJULT under 520px. Da der ikke findes nogen
   burgermenu, og login heller ikke står i footeren, havde en betalende kunde
   dermed ingen vej ind fra en telefon. Nu vises den i en kompakt udgave. */
@media (max-width:520px){ .prc-btn-ghost{ padding:.5rem .62rem; font-size:.78rem; letter-spacing:.02em } }
/* Under ca. 470px stak headeren ud over skaermen paa alle 9 undersider:
   maalt 470px indhold i et 375px viewport, altsaa 95px vandret overloeb, hvor
   "Kom i gang"-knappen laa helt uden for kanten. Det ramte enhver telefon
   (360/375/390/412/430) paa alt undtagen forsiden, som klarer den, fordi
   React-headeren lader brandet krympe. Pladsbehovet var brand 160 + nav 268 +
   padding 48 + gap 16 = 493px. Vi henter pladsen samme sted som forsiden:
   mindre kantmargin, taettere nav, og et brand der maa krympe. WCAG 1.4.10. */
@media (max-width:500px){
  .prc-bar{ padding:0 14px }
  .prc-header .prc-bar{ gap:.6rem }
  .prc-nav{ gap:.55rem }
  .prc-brand{ flex:0 1 auto; min-width:0 }
  .prc-word{ font-size:1rem; min-width:0 }
  .prc-word small{ display:none }
  .prc-btn-primary{ padding:.5rem .7rem; font-size:.78rem; white-space:nowrap }
}

.prc-toggle{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--hair); border-radius:1px; color:var(--mut); background:none; cursor:pointer; flex:none }
.prc-toggle:hover{ border-color:var(--accent); color:var(--accent-ink) }
.prc-toggle .ic-sun{ display:none }
.prc-toggle .ic-moon{ display:inline }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .prc-toggle .ic-sun{ display:inline }
  :root:not([data-theme="light"]) .prc-toggle .ic-moon{ display:none }
}
:root[data-theme="dark"] .prc-toggle .ic-sun{ display:inline }
:root[data-theme="dark"] .prc-toggle .ic-moon{ display:none }

/* ============================== TRI-BAR ============================== */
.prc-tribar{ display:flex; height:3px; width:100%; overflow:hidden }
.prc-tribar i{ display:block; height:100% }
.prc-tribar .t-pap{ background:var(--pap); flex:0 0 61.2% }
.prc-tribar .t-plast{ background:var(--plast); flex:0 0 27.6% }
.prc-tribar .t-trae{ background:var(--trae); flex:0 0 11.2% }

/* ============================== FOOTER ============================== */
footer.prc-footer{ border-top:1px solid var(--hair) }
.prc-fgrid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:2rem; padding:3rem 0 2.4rem }
@media (max-width:820px){ .prc-fgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px){ .prc-fgrid{ grid-template-columns:minmax(0,1fr) } }
.prc-ftag{ color:var(--dim); font-size:.85rem; max-width:26ch; margin-top:.9rem }
.prc-fbrand .prc-tribar{ max-width:180px; margin-top:1rem }
.prc-fcol h3{ margin:0 0 .9rem; font-family:var(--mono); font-size:.64rem; line-height:1.65; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); font-weight:400 }
.prc-fcol a{ display:block; font-family:var(--mono); font-size:.8rem; color:var(--mut); padding:.3rem 0 }
.prc-fcol a:hover{ color:var(--accent-ink) }
.prc-fcol a[aria-current="page"]{ color:var(--ink) }
.prc-fcol a.prc-klaro{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.5rem; padding:0; font-size:.66rem; color:var(--dim) }
.prc-fcol a.prc-klaro:hover{ color:var(--accent-ink) }
.prc-trust{ display:block; margin-top:.6rem; font-size:.66rem; line-height:1.5; color:var(--dim) }
.prc-fdivider{ margin:0 }
.prc-fbottom{ border-top:1px solid var(--hair); padding:1.1rem 0 2.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:var(--dim) }