@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

/* =====================================================================
   "Terminal / Fabrik" — sitets visuelle tema. Space Mono overalt, helt
   hvid baggrund, skarpe kanter, terracotta accent, dæmpede billeder
   (halv mætning). Lægges oven på main.css og aktiveres site-wide via
   body.theme-a (sat server-side i layout.php).
   ===================================================================== */

/* — Baggrund: helt hvid — */
body.theme-a { background: #ffffff; }
.theme-a { --c-bg: #ffffff; --c-bg-alt: #ffffff; --c-card: #ffffff; }
body.theme-a .site-header { background: rgba(255,255,255,.9); }

.theme-a main { font-family: 'Space Mono', ui-monospace, monospace; word-spacing: -0.26em; }

/* — Header + footer i Space Mono (efter ønske) — */
body.theme-a .site-header,
body.theme-a .site-footer {
  font-family: 'Space Mono', ui-monospace, monospace;
  word-spacing: -0.26em;
  letter-spacing: -0.03em;
}
/* — Footer-kolonneoverskrifter (Produkt, Ydelser, Virksomhed) i fed — */
body.theme-a .site-footer__heading { font-weight: 700; }

/* — Logo i tema-A: den mono-SVG (logo-mono.svg) vises, standard-SVG skjules — */
.site-header__logo-mono { display: none; }
body.theme-a .site-header__logo-img { display: none; }
body.theme-a .site-header__logo-mono { display: block; height: 32px; width: auto; }

/* — Signup-popup: kun RAMMEN kan styles herfra (formular-indholdet ligger i en
     cross-origin iframe og skal tilpasses på platformen, se note til Allan) — */
body.theme-a .signup-modal__box { border-radius: 0; }
body.theme-a .signup-modal__close {
  border-radius: 0;
  font-family: 'Space Mono', ui-monospace, monospace;
  border-color: var(--c-ink);
}

/* — Overskrifter: bold + stramme — */
.theme-a main .hero__headline,
.theme-a main .section-heading__title,
.theme-a main .usecase__title,
.theme-a main .step__title,
.theme-a main .card__title,
.theme-a main .pricing-card__name,
.theme-a main .final-cta__title { font-weight: 700; letter-spacing: -0.02em; word-spacing: -0.4em; }
.theme-a main .hero__headline { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.14; }

/* — Hero-eksperiment: 35% større billede + tekst rykket ned så den overlapper
     billedets nederste venstre hjørne (kun desktop; mobil stables som normalt) — */
@media (min-width: 761px) {
  .theme-a .hero__inner { position: relative; align-items: start; }
  .theme-a .hero__visual { position: relative; z-index: 1; }
  .theme-a .hero__visual img { transform: scale(1.35); transform-origin: top right; }
  .theme-a .hero__text { position: relative; z-index: 2; margin-top: 5rem; }
  .theme-a .hero { padding-bottom: var(--space-7); }
  /* Underteksten holdes smal, så den ikke løber ind i billedets mørke midte
     (overskriften må gerne overlappe det fadede hjørne). */
  .theme-a .hero__subhead,
  .theme-a .hero__note { max-width: 24.5em; }
}

/* — Hero-billeder (forside + undersider): blød fade på ALLE 4 sider — */
.theme-a .hero__visual img,
.theme-a .page-hero__visual img {
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}

/* — Samme lag-greb på undersidernes hero (.page-hero), kun desktop — */
@media (min-width: 761px) {
  /* Ens start-højde på alle hero-billeder = samme som forsiden (space-6 top). */
  .theme-a .section:has(.page-hero),
  .theme-a .service-hero:has(.page-hero) { padding-top: var(--space-6); }
  /* Bund-margen skalerer med bredden, så det skalerede billede aldrig kolliderer
     med indholdet under hero'en (overflowet vokser med skærmbredden). */
  .theme-a .page-hero { position: relative; align-items: start; margin-bottom: calc(8vw + 2rem); }
  /* Står hero'en alene i sin sektion (siderne med nummererede sektioner
     nedenunder), er den store margen overflødig: sektions-padding'en
     giver rigeligt luft til det skalerede billedes overløb. */
  .theme-a .page-hero:last-child { margin-bottom: 0; }
  .theme-a .page-hero__visual { position: relative; z-index: 1; }
  .theme-a .page-hero__visual img { transform: scale(1.32); transform-origin: top right; }
  .theme-a .page-hero__text { position: relative; z-index: 2; margin-top: 3.5rem; }
  .theme-a .page-hero__intro { max-width: 24.5em; }

  /* Kontakt: hold hero i samme højde selv når "← Tilbage"-linket vises — linket
     tages ud af flowet og lægges i luften over hero'en (der er rigelig plads). */
  .theme-a .contact-page .container { position: relative; }
  .theme-a .contact-page .back-link { position: absolute; left: 0; top: calc(-1 * var(--space-4)); margin: 0; }
}
.theme-a main .section-heading__title { letter-spacing: -0.03em; }

/* — Brødtekst: strammere tegnafstand + tættere linjer (mere behagelig mono) — */
.theme-a main p,
.theme-a main li,
.theme-a main .hero__subhead,
.theme-a main .section-heading__intro { letter-spacing: -0.0475em; line-height: 1.55; }
.theme-a main .card__body,
.theme-a main .usecase__body,
.theme-a main .step__body { font-size: 0.94em; }

/* — Skarpe kanter + flade flader — */
.theme-a main .card,
.theme-a main .usecase,
.theme-a main .pricing-card,
.theme-a main .btn,
.theme-a main img,
.theme-a main .step__num,
.theme-a main .usecase__icon,
.theme-a main .card__icon,
.theme-a main .pricing-card__badge {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.theme-a main .card,
.theme-a main .pricing-card { border: 1px solid var(--c-ink); background: var(--c-bg); }
.theme-a main .pricing-card--featured { border-width: 2px; }
/* Dæmpede farver: halv mætning som fælles "LUT" over alle billeder —
   varmen bevares, men terracotta-accenten forbliver sidens mest mættede */
.theme-a main img { border: 1px solid var(--c-ink); filter: grayscale(.55) contrast(1.02); }

/* — Rens ikon-boksene: ingen grå fyld på hvid (kun selve ikonet) — */
.theme-a main .usecase__icon,
.theme-a main .card__icon { background: transparent !important; }

/* — Emoji-ikoner (ydelses-kort) dæmpes som billederne — */
.theme-a main .card__icon { filter: grayscale(.55) contrast(1.02); }

/* — Pris-sektionens undertekst venstrestilles som alt andet — */
.theme-a main .pricing-more { text-align: left; }

/* — Knapper — */
.theme-a main .btn { font-weight: 700; letter-spacing: 0; }
.theme-a main .btn--ghost { border-color: var(--c-ink); }

/* — Venstrestillede sektions-overskrifter + hårfine sektions-linjer.
     Titlen må fylde hele bredden; kun introteksten holdes på læsbar mål — */
.theme-a main .section { border-top: 1px solid var(--c-line); }
.theme-a main .section-heading { text-align: left; max-width: none; margin-inline: 0; }
.theme-a main .section-heading__intro { max-width: 64ch; }

/* — Accent pushet: terracotta som bærende accent — */
.theme-a main a:not(.btn),
.theme-a main .card__more,
.theme-a main .link-arrow { color: var(--c-accent-warm); }
.theme-a main .step__num { border: 1px solid var(--c-accent-warm); background: transparent; color: var(--c-accent-warm); }
.theme-a main .pricing-card__badge { text-transform: uppercase; letter-spacing: .08em; }

/* — Nummereret "blueprint"-chip over hver sektions-overskrift — */
.theme-a main { counter-reset: fabsec; }
.theme-a main .section-heading { counter-increment: fabsec; }
.theme-a main .section-heading__title::before {
  content: counter(fabsec, decimal-leading-zero);
  display: block;
  width: fit-content;
  background: var(--c-accent-warm);
  color: var(--c-on-primary);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  padding: .24rem .6rem;
  margin-bottom: .9rem;
}