/* Spoločné štýly pre samostatné stránky mimo React aplikácie:
   právne texty a stránka 404. */

@font-face{font-family:'Josefin Sans';src:url('/fonts/JosefinSans-Variable.woff2') format('woff2');font-weight:100 700;font-display:swap}

/* Svetlá stránka – pozri komentár v base.css. */
:root{
  color-scheme:light;
  --paper:#f5f5f2; --ink:#16181d; --ink-2:#3a3e45; --muted:#676c74;
  --rule:#dbdbdb; --rule-soft:#e8e8e4; --gold:#c7af00; --gold-text:#6e6000;
  --display:'Josefin Sans','Century Gothic',sans-serif;
  /* Právny text je systémovým písmom, nie Newsreaderom. Newsreader je serif
     s tenkými ťahmi, vhodný na editoriálny text v krátkych blokoch – tu ide
     o päťtisíc slov paragrafov, ktoré si človek číta preto, že musí. Tam je
     prvoradá čitateľnosť, nie hlas značky, a systémové písmo je to, ktoré má
     používateľ na svojom zariadení najlepšie vyladené. Josefin zostáva na
     nadpisoch a značke, kde nesie identitu. */
  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(1.25rem,5vw,4.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:2rem}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:1.0625rem;line-height:1.72;
  -webkit-font-smoothing:antialiased}
.shell{width:min(100% - (var(--gutter)*2),46rem);margin-inline:auto}

/* hlavička */
.lhead{padding-block:1.5rem;border-bottom:1px solid var(--rule)}
.lbrand{display:inline-flex;align-items:center;gap:.875rem;text-decoration:none;color:var(--ink)}
.lbrand svg{width:30px;height:auto;flex:none;overflow:visible}
.lbrand__text{display:grid;gap:.3rem}
.lbrand__word{font-family:var(--display);font-weight:400;font-size:1rem;
  letter-spacing:.34em;text-transform:uppercase;line-height:1}
.lbrand__claim{font-family:var(--display);font-size:.6875rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);line-height:1}

/* obsah */
main{padding-block:clamp(3rem,7vw,5.5rem) clamp(3rem,6vw,4.5rem)}
.eyebrow{display:flex;align-items:center;gap:.75rem;font-family:var(--display);
  font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-text);margin:0 0 1.25rem}
.eyebrow::before{content:'';width:2rem;height:1px;background:var(--gold);flex:none}
h1{font-family:var(--display);font-weight:200;font-size:clamp(2rem,1.6rem+1.9vw,3.25rem);
  line-height:1.04;letter-spacing:-.005em;margin:0;text-wrap:balance}
.lbody{margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--gold)}

.lbody h2{font-family:var(--display);font-weight:300;
  font-size:clamp(1.375rem,1.24rem+.6vw,1.75rem);line-height:1.2;
  margin:2.5rem 0 .875rem;text-wrap:balance}
.lbody h3,.lbody h4{font-family:var(--display);font-weight:400;font-size:1.125rem;
  letter-spacing:.01em;margin:2rem 0 .75rem;text-wrap:balance}
.lbody p{margin:0 0 1.1em;color:var(--ink-2);text-wrap:pretty}
.lbody strong{color:var(--ink);font-weight:600}
.lbody ul,.lbody ol{margin:0 0 1.4em;padding-left:1.25rem;color:var(--ink-2)}
.lbody li{margin-bottom:.5em}
.lbody li::marker{color:var(--gold)}
/* Kotvy z obsahu – cieľ je prázdny <a id>, nemá byť podčiarknutý. */
.lbody a:empty{background:none;padding:0}
/* Niektoré odkazy majú ako text celú URL adresu. Bez povoleného zalomenia
   by pretiekli okraj stránky. „clone" drží zlaté podčiarknutie na každom
   riadku, nielen na poslednom. */
.lbody a{color:inherit;text-decoration:none;
  background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/100% 1px;
  padding-bottom:2px;overflow-wrap:anywhere;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.lbody a:hover{background-image:linear-gradient(var(--gold-text),var(--gold-text))}

/* tabuľka (GDPR prehľad účelov) */
.lbody table{width:auto;min-width:100%;border-collapse:collapse;margin:0;
  font-size:.9375rem}
.lbody tr{border-bottom:1px solid var(--rule-soft)}
.lbody tr:first-child{border-bottom:1px solid var(--gold)}
.lbody td,.lbody th{padding:.75rem 1rem .75rem 0;vertical-align:top;
  text-align:left;color:var(--ink-2);min-width:12rem}
.lbody td p{margin:0 0 .4em}
.lbody td:last-child{padding-right:0}

/* pätička */
.lfoot{border-top:1px solid var(--rule);padding-block:2rem 3rem}
.lfoot__links{display:grid;gap:0;margin:0 0 1.5rem;padding:0;list-style:none;
  border-top:1px solid var(--rule)}
.lfoot__links a{display:flex;align-items:center;min-height:3rem;
  font-family:var(--display);font-size:.875rem;letter-spacing:.06em;
  text-decoration:none;color:var(--muted);border-bottom:1px solid var(--rule-soft);
  transition:color .3s ease,border-color .3s ease}
.lfoot__links a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.lfoot__note{font-family:var(--display);font-size:.875rem;letter-spacing:.06em;
  color:var(--muted);margin:0}

a:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media (min-width:48rem){
  .lfoot__links{display:flex;flex-wrap:wrap;gap:0 2rem;border-top:none}
  .lfoot__links a{min-height:0;border-bottom:1px solid transparent;padding-bottom:2px}
}

/* Na úzkych displejoch sa stĺpce zúžia tak, aby sa tabuľka zmestila.
   Rám je poistka pre prípad, že by obsah aj tak pretiekol – posunie sa
   potom samotná tabuľka, nie celá stránka. */
.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.6em}
@media (max-width:34rem){
  .lbody td,.lbody th{min-width:0;padding-right:.75rem}
}