/*
  Rám aplikácie. Farebná paleta aj prepínanie svetlej/tmavej schémy sú v `gate-ui.css`
  (vrstva Gate.Ui) — tu sa už len používajú, aby bol zdroj farieb jediný.
*/

/*
  Písmo je zámerne systémové: cieľové stanice v Sociálnej poisťovni bežia na Windows, kde je
  Segoe UI Variable Text zhodné s tým, čo kreslí FluentUI vo svojich web komponentoch. Vlastný
  font by musel prísť ako ďalšia závislosť (licencia, SBOM) a rám by sa rozišiel s komponentmi.
*/
html, body {
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/*
  Plocha stránky sa berie z Fluent tokenov, takže sa v tmavej schéme prekreslí spolu
  s komponentmi. Bez toho by ostal biely podklad pod tmavými kartami a text stránky
  (biely v tmavej schéme) by na ňom zmizol.
*/
body {
    /* Predvolený 8 px okraj prehliadača by okolo celej aplikácie (sidebar, login panel,
       100dvh plochy) kreslil svetlý rám a pridával zvislý presah — rám appky ho nuluje. */
    margin: 0;
    background-color: var(--neutral-layer-1, #fbfbfb);
    color: var(--neutral-foreground-rest, #1a1a1a);
    font-size: .875rem;
    line-height: 1.5;
}

/*
  Na úzkej obrazovke prekrýva horných ~56 px okna lišta aplikácie (sticky `.sidebar`
  v MainLayout.razor.css). Bez odsadenia posunu by prvok, na ktorý stránka skočí — kotva,
  prechod na prvé chybné pole formulára — skončil presne pod ňou a používateľ by ho nenašiel.
*/
@media (max-width: 640.98px) {
    html {
        scroll-padding-top: calc(var(--gate-nav-bar-h, 3.5rem) + env(safe-area-inset-top, 0px));
    }
}

a {
    color: var(--gate-link, #006bb7);
}

.content {
    padding-top: 1.1rem;
    /*
      Vodorovné odsadenie sa na úzkej obrazovke nemá odkiaľ vziať: pravidlo v MainLayout.razor.css
      platí až od 641 px. Bez tohto riadku sa text na mobile dotýka okraja displeja.
    */
    padding-inline: 1rem;
}

/* ── typografická hierarchia ─────────────────────────────────────────────── */

.content h1 {
    margin: 0 0 1.1rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    /* Dlhé slovenské nadpisy registrov sa lámu na vyrovnané riadky, nie na jedno visiace slovo. */
    text-wrap: balance;
}

.content h2 {
    margin: 1.5rem 0 .75rem;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
}

.content h3 {
    margin: 1.25rem 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Nadpis na začiatku karty odsadzuje už vnútorný okraj karty — druhý raz by ho odtlačil od hrany. */
.content .gate-card__body > h1:first-child,
.content .gate-card__body > h2:first-child,
.content .gate-card__body > h3:first-child {
    margin-top: 0;
}

h1:focus {
    outline: none;
}