/* Reset and typography: what an element looks like before a class is put on it, and two helpers
 * for text. The same rules as the other Kolekt applications (Epr Wizard's base.css). */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;              /* sticky footer without a fixed height anywhere */
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: var(--fs-300);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}

h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: 1.25; color: var(--c-navy); }
h1 { font-size: var(--fs-600); }
h2 { font-size: var(--fs-500); }
h3 { font-size: var(--fs-400); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--c-blue-dark); }
img { max-width: 100%; height: auto; }

/* The browser hides a [hidden] element with a rule of its own, and any display declaration of ours
 * (block as much as flex or grid) wins over that rule. This one wins back, for every element: a script
 * sets el.hidden and can rely on it. */
[hidden] { display: none !important; }

.muted { color: var(--color-text-muted); font-size: var(--fs-200); }
/* A paragraph whose container already supplies the space around it (a stack's gap, a card's
   padding): the paragraph's own margin would push it off. */
.flush { margin: 0; }
/* Not shown, still there: for what a program reads and a person does not (the user name a password
 * manager files a new password under). The hidden attribute would take it from that program too. */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}