/* plejeplan-brand.css — brandmærket og dets to pladser
 *
 * Mærket erstatter emoji-stetoskopet 🩺 i navigationen og i heroens kicker.
 * Emojien var platformafhængig: den tegnes af styresystemet, den har sin egen
 * baseline, sin egen farve og sin egen bredde, og den kan ikke følge temaet.
 *
 * Mærket her arver farven fra sin forælder (currentColor), så det virker i
 * navigationens hvide tekst og i kickerens lyseblå uden en eneste farveregel.
 *
 * Lodret placering bruger vertical-align:middle, samme valg som Codex traf for
 * ikonsystemet efter krydsreviewet. Det er robust ved skriftskift; mærket er
 * desuden centreret i sit eget 24-gitter, så middle rammer rigtigt.
 */

:root{
  --pp-brand-streg:2.3;    /* nedarves ind i symbolets skyggetræ */
  --pp-brand-nav:22px;     /* navigationen */
  --pp-brand-kicker:18px;  /* heroens kicker. 15 px var for lidt: spiralen
                              forsvandt, og mærket blev til en prik i en ring. */

  /* De to farver i mastermærket. Marineblå er husets grundfarve, kølig teal
     er sporet. På lys bund er sporet det farvede og mennesket det mørke;
     hensigten er, at blikket lander på mennesket, ikke på vejen derhen. */
  --pp-brand-spor-lys:#0f766e;
  --pp-brand-menneske-lys:#1F3864;
  --pp-brand-spor-moerk:#5ec8bd;
  --pp-brand-menneske-moerk:#ffffff;
}

.pp-brand{
  display:inline-block;
  width:var(--pp-brand-nav);
  height:var(--pp-brand-nav);
  flex:none;
  vertical-align:middle;
  color:inherit;
  overflow:visible;
}
.pp-brand use{pointer-events:none}

/* Navigationen. Mærket må aldrig klemmes af den lange titel ved siden af. */
.nav-logo .pp-brand{
  width:var(--pp-brand-nav);
  height:var(--pp-brand-nav);
  margin-right:8px;
}

/* Heroens kicker. Mindre mærke, og lidt tungere streg, fordi en lys streg på
   mørk bund ser tyndere ud, end den er. */
.hero-kicker .pp-brand{
  width:var(--pp-brand-kicker);
  height:var(--pp-brand-kicker);
  --pp-brand-streg:2.5;
}

/* ── De to præsentationer ────────────────────────────────────────────────
 * Ensfarvet er standarden: uden en eneste regel arver mærket sin farve fra
 * forælderen gennem currentColor. Det er den, navigationen bruger, og det er
 * derfor mærket virker i hvid tekst på marineblå uden at vide noget om den.
 *
 * Mastervarianten sætter de to farver eksplicit. Den hører til, hvor mærket
 * er et billede og ikke et tegn i en tekstlinje: hero, app-flise, delebillede.
 */
.pp-brand-master{
  --pp-brand-spor:var(--pp-brand-spor-lys);
  --pp-brand-menneske:var(--pp-brand-menneske-lys);
}
/* På mørk bund byttes rollerne: et mørkt menneske forsvinder. */
.pp-brand-master.paa-moerk,
[data-tema="moerk"] .pp-brand-master{
  --pp-brand-spor:var(--pp-brand-spor-moerk);
  --pp-brand-menneske:var(--pp-brand-menneske-moerk);
}
@media (prefers-color-scheme:dark){
  .pp-brand-master:not(.paa-lys){
    --pp-brand-spor:var(--pp-brand-spor-moerk);
    --pp-brand-menneske:var(--pp-brand-menneske-moerk);
  }
}
/* App-flisen har sin egen ramme og skal ikke krympe med teksten. */
.pp-brand-app{width:64px;height:64px;display:inline-block;vertical-align:middle}

/* 320-430 px: navigationen har lidt plads. Mærket krymper med, men ikke under
   20 px, som er den størrelse, formen er efterprøvet ved. */
@media (max-width:520px){
  :root{--pp-brand-nav:20px}
}

/* Mørk tilstand: lys streg på mørk bund virker optisk kraftigere, så den
   tyndes en anelse. Samme greb som i ikonsystemet. */
@media (prefers-color-scheme:dark){
  :root{--pp-brand-streg:2.15}
}

/* Høj kontrast og tvungne farver: stregen hæves, så formen holder. */
@media (prefers-contrast:more){
  :root{--pp-brand-streg:2.6}
}
@media (forced-colors:active){
  .pp-brand{--pp-brand-streg:2.6}
}