/* plejeplan-icons.css — ikonsystem v2
 *
 * Tre ting aendrede sig i denne udgave, og de kom af maalinger, ikke af smag:
 *
 * 1. STOERRELSE. Ikonerne var 1em og arvede derfor hvad som helst, foraelderen
 *    havde af font-size. Maalt paa de rigtige sider gav det 18 forskellige
 *    ikonstoerrelser, fra 11,2 px til 48 px. Nu binder tre roller stoerrelsen
 *    til et interval, saa et ikon stadig foelger teksten, men ikke kan blive
 *    en fjerdedel eller det dobbelte af det, det burde.
 *
 * 2. LOD. Justeringen var vertical-align:-.17em, ét fast tal. Det passer ved
 *    én kombination af skrift og ikonstoerrelse og bliver skaevt ved andre.
 *    Nu regnes den ud fra skriftens egen x-hoejde, saa den holder, naar
 *    font-size skifter.
 *
 * 3. VAEGT OG ET LAG MERE. Stregen er haevet fra 1,8 til 2, og 74 af de 104
 *    symboler har faaet et fyldt accentlag i deres foerste lukkede form.
 *    Begge dele styres af --pp-stroke og --pp-fyld, som nedarves ind i det
 *    skyggetrae <use> bygger. Accenten er slaaet FRA som udgangspunkt og
 *    taendes kun i kort- og FAB-rollen, hvor der er plads til den.
 *
 * Alt bruger currentColor. Der staar ingen farve i selve symbolerne, saa dark
 * mode og temaskift virker af sig selv.
 */

:root{
  --pp-icon-naturfag:#0d766e;--pp-icon-naturfag-soft:#dff5f1;
  --pp-icon-vagten:#c56808;--pp-icon-vagten-soft:#fff0d7;
  --pp-icon-borger:#7042c1;--pp-icon-borger-soft:#f0e8ff;
  --pp-icon-laering:#4f46c8;--pp-icon-laering-soft:#e9e9ff;
  --pp-icon-klinisk:#078267;--pp-icon-klinisk-soft:#ddf5ed;
  --pp-icon-dokumentation:#0369a1;--pp-icon-dokumentation-soft:#e1f2fb;
  --pp-icon-medicin:#c82b36;--pp-icon-medicin-soft:#fee7e7;
  --pp-icon-opslag:#965009;--pp-icon-opslag-soft:#fff0db;
  --pp-icon-vaerktoejer:#2e75b6;--pp-icon-vaerktoejer-soft:#e8f2fb;

  /* De fire roller. Nedre graense holder ikonet laeseligt paa smaa skrifter,
     oevre graense forhindrer, at en stor overskrift goer ikonet til et skilt.
     Midterste vaerdi foelger teksten, saa et ikon stadig vokser med sin kontekst. */
  --pp-ikon-inline:clamp(.95rem,1.05em,1.3rem);   /* i en tekstlinje      */
  --pp-ikon-ui:clamp(1.05rem,1.15em,1.55rem);     /* knap, felt, listepunkt */
  --pp-ikon-kort:clamp(1.4rem,1.55em,1.75rem);    /* vaerktoejskort og FAB  */
  --pp-ikon-hero:clamp(2.4rem,2.8em,3rem);        /* sidens hovedbillede   */

  --pp-stroke:2;      /* arves ind i symbolet */
  --pp-fyld:0;        /* accentlagets fill-opacity, slaaet fra */
  --pp-tryk:44px;     /* mindste trykflade */
}

/* ── Grundform ───────────────────────────────────────────────────────────── */

.pp-icon{
  display:block;
  width:var(--pp-ikon-ui);
  height:var(--pp-ikon-ui);
  flex:none;              /* maa aldrig klemmes sammen i en flexraekke */
  flex-shrink:0;
  overflow:visible;
  color:inherit;
}
.pp-icon use{pointer-events:none}

/* ── Rolle 1: inline i en tekstlinje ─────────────────────────────────────── */
/* Lodret placering regnes ud fra skriftens x-hoejde, saa ikonets midte
   rammer teksten, uanset hvor stor skriften er. 1ex er selve x-hoejden. */

.pp-icon-inline{display:inline-block;
  width:var(--pp-ikon-inline);
  height:var(--pp-ikon-inline);
  vertical-align:middle;
}

.pp-iconified-leading>.pp-icon{
  display:inline-block;
  width:var(--pp-ikon-inline);
  height:var(--pp-ikon-inline);
  margin-right:.4em;
  vertical-align:middle;
}

/* Ikonet maa ikke goere linjen hoejere end teksten selv kraever. */
.pp-iconified-leading{line-height:inherit}

/* ── Rolle 2: alene i en knap eller et felt ──────────────────────────────── */

.pp-iconified-only>.pp-icon{
  width:var(--pp-ikon-ui);
  height:var(--pp-ikon-ui);
  margin:auto;
}

/* Trykfladen skal vaere 44 px, ogsaa naar motivet er mindre. Gaelder kun
   elementer, man rent faktisk kan trykke paa. */
a.pp-iconified-only,button.pp-iconified-only,
[role="button"].pp-iconified-only{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--pp-tryk);min-height:var(--pp-tryk);
}

/* ── Rolle 3: fremhaevet vaerktoejskort og FAB ───────────────────────────────── */
/* Her er der plads til baade vaegt og accentlag. Motivet er 22-28 px. */

.hero-icon>.pp-icon,.section-icon>.pp-icon,.index-icon>.pp-icon,
.tool-icon>.pp-icon,.sektor-icon>.pp-icon,.feat-icon>.pp-icon,
.demo-result-icon>.pp-icon,.fab-main-icon>.pp-icon,
.problem-card .icon>.pp-icon,.trust-card>.pp-icon,.tier-card>.pp-icon{
  width:var(--pp-ikon-kort);
  height:var(--pp-ikon-kort);
  --pp-stroke:2.1;
  --pp-fyld:.14;
}

/* ── Rolle 3b: hero ──────────────────────────────────────────────────────── */
/* Hero-ikonet er ikke en knap, men sidens hovedbillede. Foerste udgave af den
   her fil klemte det ned til 28 px sammen med kortene, og saa blev det MINDRE
   end foer, selv om hele opgaven var at goere ikonerne tydeligere. Maalt paa
   problemsiden: 48 px foer, 28 px efter. Det er en egen rolle. */
.hero-icon>.pp-icon{
  width:var(--pp-ikon-hero);
  height:var(--pp-ikon-hero);
  --pp-stroke:2.2;
  --pp-fyld:.18;
}

/* ── Farve ───────────────────────────────────────────────────────────────── */
/* Farven kommer fra en semantisk token paa foraelderen, aldrig fra symbolet. */

.pp-tool-naturfag{--pp-tool:var(--pp-icon-naturfag);--pp-tool-soft:var(--pp-icon-naturfag-soft)}
.pp-tool-vagten{--pp-tool:var(--pp-icon-vagten);--pp-tool-soft:var(--pp-icon-vagten-soft)}
.pp-tool-borger{--pp-tool:var(--pp-icon-borger);--pp-tool-soft:var(--pp-icon-borger-soft)}
.pp-tool-laering{--pp-tool:var(--pp-icon-laering);--pp-tool-soft:var(--pp-icon-laering-soft)}
.pp-tool-klinisk{--pp-tool:var(--pp-icon-klinisk);--pp-tool-soft:var(--pp-icon-klinisk-soft)}
.pp-tool-dokumentation{--pp-tool:var(--pp-icon-dokumentation);--pp-tool-soft:var(--pp-icon-dokumentation-soft)}
.pp-tool-medicin{--pp-tool:var(--pp-icon-medicin);--pp-tool-soft:var(--pp-icon-medicin-soft)}
.pp-tool-opslag{--pp-tool:var(--pp-icon-opslag);--pp-tool-soft:var(--pp-icon-opslag-soft)}
.pp-tool-vaerktoejer{--pp-tool:var(--pp-icon-vaerktoejer);--pp-tool-soft:var(--pp-icon-vaerktoejer-soft)}
[class*="pp-tool-"]>.pp-icon{color:var(--pp-tool,currentColor)}

.hero-icon.pp-iconified-only,.section-icon.pp-iconified-only,.index-icon.pp-iconified-only{
  color:var(--accent,var(--blue,#2e75b6))
}

/* ── Moerk tilstand ──────────────────────────────────────────────────────── */
/* Et fyldt lag paa .14 forsvinder paa moerk bund. Det haeves lidt, og stregen
   tyndes en anelse, fordi lys streg paa moerk bund optisk virker kraftigere. */

@media (prefers-color-scheme:dark){
  :root{--pp-stroke:1.9}
  .hero-icon>.pp-icon,.section-icon>.pp-icon,.index-icon>.pp-icon,
  .tool-icon>.pp-icon,.sektor-icon>.pp-icon,.feat-icon>.pp-icon,
  .demo-result-icon>.pp-icon,.fab-main-icon>.pp-icon,
  .problem-card .icon>.pp-icon{--pp-fyld:.2}
}

/* ── Hoej kontrast og reduceret bevaegelse ───────────────────────────────── */
/* Ved hoej kontrast er et svagt fyld stoej. Det slukkes, og stregen haeves. */

@media (prefers-contrast:more){
  :root{--pp-stroke:2.4}
  .pp-icon{--pp-fyld:0}
}
@media (forced-colors:active){
  .pp-icon{--pp-fyld:0;--pp-stroke:2.2}
}
@media (prefers-reduced-motion:reduce){
  .pp-icon{transition:none!important;animation:none!important}
}