/* Uniwear Concept 2: grundlaget (Settings > Scripts; stylesheetet "Uniwear Concept 2"). Styres i repo: kilden er denne fil,
   pushes med MCP cms_set_site_css med sourcePath "EasyDAL/Setup/SiteCss/uniwear/concept2.css".
   Plan: docs/superpowers/plans/2026-10-28-uniwear-concept2.md. Værdierne er handoff'ens (Tenants\530\Design\1 på Storage01A).
   Hører sammen med bundlen Uniwear2 (tema og fonte) og token-filen uniwear-concept2.json; den gamle Uniwear-bundles
   !important-knapper slår ellers knapperne her.
   Composer-elementer styles gennem hooks (composer.md, "Styling hooks"). --c-* findes kun på Composer-sider, så regler
   der også rammer header, kurv og produktside (knapper, fokus), bruger --uw-* herunder eller bundlens --color-*.
   Ret ikke indholdet med SQL. */

:root {
  --uw-ink: #141c2b;
  --uw-paper: #faf7f2;
  --uw-linen: #f2ece3;
  --uw-white: #ffffff;
  --uw-black: #000000;
  --uw-green: #0abf8b;
  --uw-green-ink: #08704f;
  --uw-sale: #a8502f;
  --uw-body-light: #3a4352;
  --uw-body: var(--uw-body-light);
  --uw-gutter: clamp(16px, 3.4vw, 48px);
  --uw-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Siden er papir, ikke layoutets bg-white. Brødteksten er 400 som i designet; app.css sætter 300 for alle sites. */
body {
  background-color: var(--uw-paper);
  color: var(--uw-ink);
  font-weight: 400;
}

/* Brødtekst ligger mellem fg og muted på lyse flader; på mørke er den fladens muted. Variablen sættes på hver flade,
   så et mørkt kort i en lys sektion får sin egen. */
.surface-default,
.surface-subtle,
.surface-muted {
  --uw-body: var(--uw-body-light);
}

.surface-inverse {
  --uw-body: var(--c-muted, var(--c-color-muted));
}

.surface-brand {
  --uw-body: var(--c-fg, var(--c-color-fg));
}

/* Sidebredde: 1360px inklusive den flydende margen (handoff'ens .k2-wrap). */
.c-section.container,
.c-section > .container {
  max-width: var(--c-container-xl);
  padding-inline: var(--uw-gutter);
}

/* ---- Typografi ---- */

.c-heading {
  font-family: var(--c-font-serif);
  font-weight: 300;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* Designet bryder overskrifter almindeligt, ikke i lige lange linjer (composer.css: balance). */
  text-wrap: pretty;
}

h1.c-heading {
  line-height: 0.95;
  letter-spacing: -0.035em;
}

h2.c-heading {
  line-height: 1;
  letter-spacing: -0.03em;
}

h3.c-heading {
  line-height: 1.02;
  letter-spacing: -0.02em;
}

h6.c-heading {
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.c-heading[data-family="sans"] {
  font-family: var(--c-font-sans);
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: 0;
  line-height: 1.2;
}

/* Ét ord i kursiv pr. overskrift; farven er overskriftens egen. */
.c-heading .c-accent {
  font-style: italic;
  color: inherit;
}

/* --c-color er nodens egen farve og vinder stadig. */
.c-text {
  line-height: 1.55;
  color: var(--c-color, var(--uw-body, inherit));
}

.c-text a {
  font-weight: 600;
  color: var(--c-fg, var(--c-color-fg));
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 0.2s;
}

.c-text a:hover {
  text-decoration-color: var(--uw-green);
}

/* The text is the surface's accent; outside a surface the dark green (handoff: --uw-color-accent-ink), not the token's
   bright green, which is only for the dot. */
.c-eyebrow {
  gap: 10px;
  font-size: var(--c-font-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--c-accent, var(--uw-green-ink));
}

.c-eyebrow[data-style="dot"]::before {
  width: 7px;
  height: 7px;
  background: var(--uw-green);
}

/* ---- Links og knapper ---- */

.c-link {
  gap: var(--c-space-2xs);
  min-height: 44px;
  font-weight: 600;
  color: var(--c-color, var(--c-fg, var(--c-color-fg)));
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 0.2s;
}

.c-link:hover {
  text-decoration-color: var(--uw-green);
}

/* Pil-linket: Lucides arrow-right i stedet for tegnet, og den glider 4px ved hover. */
.c-link[data-style="arrow"]::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'/%3E%3Cpath%20d='m12%205%207%207-7%207'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'/%3E%3Cpath%20d='m12%205%207%207-7%207'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c-link[data-style="arrow"]:hover::after {
  translate: 4px 0;
}

.btn-primary,
.btn-secondary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s, color 0.25s;
}

.btn-primary {
  background-color: var(--uw-ink);
  color: var(--uw-paper);
}

.btn-primary:hover {
  background-color: var(--uw-black);
  color: var(--uw-paper);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--uw-ink) 70%, transparent);
}

/* Lys knap på mørke flader. */
.btn-secondary {
  background-color: var(--uw-paper);
  color: var(--uw-ink);
}

.btn-secondary:hover {
  background-color: var(--uw-white);
  color: var(--uw-ink);
}

.btn-outline {
  background-color: transparent;
  color: var(--uw-ink);
  box-shadow: inset 0 0 0 1.5px var(--uw-ink);
}

.btn-outline:hover {
  background-color: var(--uw-ink);
  color: var(--uw-paper);
}

:is(.btn-primary, .btn-secondary, .btn-outline) svg {
  transition: transform 0.25s;
}

:is(.btn-primary, .btn-secondary, .btn-outline):hover svg {
  transform: translateX(4px);
}

/* ---- Ikoner og fokus ---- */

/* Designet tegner ikoner med 1,6-1,8 i stregbredde; sitets indstilling kan kun være 1 eller 2. */
.c-icon svg {
  stroke-width: 1.7;
}

/* Den runde chip, der går igen overalt: 48px med et 22px ikon i 1,6. Fladen sætter mønstret. */
.c-icon[data-shape="circle"][data-size="md"] {
  --c-icon-size: 22px;
  padding: 13px;
}

.c-icon[data-shape="circle"] svg {
  stroke-width: 1.6;
}

/* Chippens ikon er fladens grønne accent; uden flade den mørke grønne. Nodens egen farve vinder. */
.c-icon[data-shape="circle"] {
  color: var(--c-color, var(--c-accent, var(--uw-green-ink)));
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent, var(--uw-green-ink));
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :is(.btn-primary, .btn-secondary, .btn-outline),
  :is(.btn-primary, .btn-secondary, .btn-outline) svg {
    transition: none;
  }

  :is(.btn-primary, .btn-secondary, .btn-outline):hover,
  :is(.btn-primary, .btn-secondary, .btn-outline):hover svg {
    transform: none;
  }
}

/* ---- Header ----
   Tilbud står i designets salgsfarve (handoff'ens .is-sale) i topmenuen, i mobilens chips og som hurtiglink i
   megamenuens afdelinger. Et menupunkt har ingen klasse fra CMS'en, så reglen kender siden på adressen: topmenuens
   eneste punkt med /tilbud (DEV's spejlkopi hedder /tilbud-1 indtil go-live) og afdelingernes link, der ender på
   /tilbud ("Alle tilbud" og de andre ender på -tilbud). */
.c2-head-nav > a[href*="/tilbud"],
.c2-head-chips > a[href*="/tilbud"],
.c2-mega :is(.c2-mega-a, .c2-mega-row)[href$="/tilbud"] {
  color: var(--uw-sale);
}

/* ---- Standard-designets ark ----
   "Uniwear design" (gruppe 7) er sitets ark til Standard. Det ligger før Concept 2's ark og gælder også her, mens
   Concept 2 er tjekket mod designet uden det. Reglerne herunder sætter det tilbage, gruppe 7 ellers ændrer på Concept 2's
   sider: kapitæler og spatiering på links og faner, knappernes farvesweep, 1px-streger i knappernes ikoner, 6px-hjørner
   på billeder, kurvskuffens titel, farven på p og vægten på fed. Gruppe 7 ligger uden for lag og slår derfor bundlens
   Tailwind-klasser; revert-layer giver dem tilbage. */

.c-link,
.c-tab {
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.c-tab {
  font-weight: 500;
}

.menu-dt-heading,
.drawer-title {
  font-family: revert-layer;
  font-size: revert-layer;
  font-weight: revert-layer;
}

.btn-primary,
.btn-to-checkout,
.btn-checkout-step,
.btn-add-to-cart,
:is(.btn-primary, .btn-to-checkout, .btn-checkout-step, .btn-add-to-cart):hover {
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  background-size: auto;
}

:is(.btn-primary, .btn-to-checkout, .btn-checkout-step, .btn-add-to-cart, .btn-secondary, .btn-pill, .btn-outline, .btn-link) svg {
  stroke-width: revert-layer;
}

.content img {
  border-radius: revert-layer;
}

p {
  color: revert-layer;
}

b,
strong {
  font-weight: revert-layer;
}