/* gulspejder_test — base: fonte, grundtypografi og designsystemets kernekomponenter
   (Button, IconButton, Icon, Overline, Logo, Liljestreg) som CSS-klasser.
   Kilde: designsystemets components/bundle.css og core/*.jsx. Alle værdier er tokens fra
   tokens.css eller de variabler, bundle.css selv definerer nedenfor. */

/* ---- Webfonte (designsystemets egne filer, latin-subset, OFL) ---- */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url("../Fonts/Archivo-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("../Fonts/InstrumentSans-italic.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("../Fonts/InstrumentSans-normal.woff2") format("woff2")}

/* ---- Værdier som tokens.json ikke deklarerer (fra bundle.css) ---- */
:root{
  --display-stretch:72%;
  --fs-display-xl:clamp(44px,11vw,88px);
  --fs-display-l:clamp(36px,8vw,64px);
  --fs-h1:clamp(32px,6.5vw,48px);
  --fs-h2:clamp(26px,5vw,36px);
  --fs-h3:22px;
  --fs-h4:18px;
  --fs-lead:19px;
  --fs-body:17px;
  --fs-small:15px;
  --fs-caption:13px;
  --fs-overline:12px;
  --lh-tight:0.95;
  --lh-heading:1.08;
  --lh-body:1.55;
  --lh-ui:1.25;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-black:850;
  --tracking-display:-0.01em;
  --tracking-overline:0.12em;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.6,0,.2,1);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:360ms;
  --photo-protect:linear-gradient(180deg,rgba(20,38,27,0) 35%,rgba(20,38,27,.82) 100%);
}

/* ---- Grundelementer (bundle.css) — lægger sig oven på Bootstrap ---- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:var(--fw-black);line-height:var(--lh-heading);letter-spacing:var(--tracking-display);color:var(--text-strong);margin:0 0 .5em;text-wrap:balance}
h1,.h1{font-size:var(--fs-h1)}
h2,.h2{font-size:var(--fs-h2)}
h3,.h3{font-size:var(--fs-h3)}
h4,.h4{font-size:var(--fs-h4)}
p{text-wrap:pretty}
a{color:var(--text-link);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

/* ---- Hjælpere ---- */
.gs-wrap{width:100%;max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter-mobile);box-sizing:border-box}
@media (min-width:768px){.gs-wrap{padding:0 var(--gutter-desktop)}}

.gs-skiplink{position:absolute;left:12px;top:-100px;z-index:100;padding:12px 18px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font-weight:var(--fw-semibold);text-decoration:none}
.gs-skiplink:focus{top:12px}

.gs-display{font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:var(--fw-black);line-height:.94;letter-spacing:var(--tracking-display);text-transform:uppercase}

.gs-overline{display:block;font-size:var(--fs-overline);font-weight:var(--fw-bold);line-height:var(--lh-ui);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--brand);margin-bottom:8px}
.gs-overline--onDark{color:var(--yellow-300)}

/* ---- Icon (Lucide-sprite) ---- */
.gs-icon{display:inline-block;flex-shrink:0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- Button (core/Button.jsx): pille, 2px kant, størrelser s/m/l, fem varianter ---- */
.gs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;height:48px;padding:0 22px;border-radius:var(--radius-pill);border:var(--border-w-strong) solid var(--brand);background:var(--brand);color:var(--on-brand);font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:16px;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.gs-btn:hover{background:var(--brand-hover);color:var(--on-brand)}
.gs-btn:active{transform:scale(.97)}
.gs-btn .gs-icon{width:19px;height:19px}
.gs-btn--s{height:40px;padding:0 16px;font-size:15px}
.gs-btn--s .gs-icon{width:18px;height:18px}
.gs-btn--l{height:56px;padding:0 28px;font-size:17px}
.gs-btn--l .gs-icon{width:20px;height:20px}
.gs-btn--full{display:flex;width:100%}
.gs-btn--secondary,.gs-btn--secondary:hover{color:var(--text-strong);border-color:var(--border-strong)}
.gs-btn--secondary{background:transparent}
.gs-btn--secondary:hover{background:var(--surface-sunken)}
.gs-btn--accent,.gs-btn--accent:hover{color:var(--on-accent);border-color:var(--accent)}
.gs-btn--accent{background:var(--accent)}
.gs-btn--accent:hover{background:var(--yellow-300)}
.gs-btn--ghost,.gs-btn--ghost:hover{color:var(--text-link);border-color:transparent}
.gs-btn--ghost{background:transparent}
.gs-btn--ghost:hover{background:var(--brand-tint)}
.gs-btn--inverse,.gs-btn--inverse:hover{color:var(--text-strong);border-color:#fff}
.gs-btn--inverse{background:#fff}
.gs-btn--inverse:hover{background:var(--paper-100)}
/* Hero-heroens sekundære link: hvid outline på foto (Main.dc.html) */
.gs-btn--onphoto,.gs-btn--onphoto:hover{color:#fff;border:var(--border-w) solid rgba(255,255,255,.6)}
.gs-btn--onphoto{background:transparent}
.gs-btn--onphoto:hover{background:rgba(255,255,255,.12)}

/* ---- IconButton (core/IconButton.jsx) ---- */
.gs-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-strong);cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
.gs-iconbtn:hover{background:var(--surface-sunken)}
.gs-iconbtn--inverse{background:rgba(255,255,255,.16);color:#fff}
.gs-iconbtn--inverse:hover{background:rgba(255,255,255,.28)}

/* ---- Logo og Liljestreg (brand-assets) ---- */
.gs-liljestreg{position:absolute;display:block;background:url("../Images/liljestreg-halv.png") left top/contain no-repeat;aspect-ratio:336/806;pointer-events:none}