/* ==================================================================
   Styly právních stránek — zásady ochrany údajů, cookies, obchodní
   podmínky.

   Samostatný soubor proto, že css/style.css se generuje z
   less/style.less při každém načtení úvodní stránky a ruční zásahy
   by se v něm přepsaly.

   Nadpisy, odkazy a dekorace používají značkovou růžovou webu
   @pink #ECB3A1 podle zadání. Běžný text je tmavší (#4A4A4A) —
   dlouhý právní dokument se v původní světle šedé #8F8F8F čte
   špatně a je to zbytečné riziko u textu, který musí být
   prokazatelně srozumitelný.

   Pozn.: #ECB3A1 má na bílé kontrast 1,82:1, což je pod normou
   WCAG AA (4,5:1) — viz bod D-01 auditu. Odkazy jsou proto vždy
   podtržené, aby se nepoznávaly jen podle odstínu.

   Vše je omezené třídou .legalPage, aby se to nedotklo blogu
   ani článků. Selektory jsou úmyslně "přespecifikované"
   (section.blogDetail.legalPage), protože pravidla webu mají
   specificitu 0-2-2 a nižší zápis by prohrál.

   Velikosti jsou v rem záměrně stejné jako zbytek webu: :root má
   font-size 62,5 % a pod 1400 px 52,5 %, takže 1rem je 10px, resp.
   8,4px. Pevné pixely by se s webem rozešly.
   ================================================================== */

.legalPage{
  --legal-accent:#ECB3A1;        /* značková růžová webu — nadpisy, odkazy     */
  --legal-accent-dark:#DE9077;   /* hover — tmavší odstín téže barvy           */
  --legal-accent-tint:#FBF1ED;   /* plocha pod názvy cookies                   */
  --legal-accent-line:#ECB3A1;   /* dekorativní linka a podtržení odkazů       */
  --legal-code:#6B5148;          /* text v názvech cookies — musí být čitelný  */
  --legal-sage:#5E7A56;          /* ztmavená šalvějová                  4,9:1 */
  --legal-sage-tint:#EFF3EC;     /* hlavička tabulky                           */
  --legal-sage-line:#DCE4D8;
  --legal-text:#4A4A4A;          /* běžný text                          8,9:1 */
  --legal-heading:#333333;       /* podnadpisy                         11,6:1 */
  --legal-rule:#E7E2DE;
}

/* ---------- titulek stránky ----------
   Články mají místo textového nadpisu ručně kreslené SVG a web proto
   schovává h1 span. Právní stránky žádné SVG nemají, takže potřebují
   plnohodnotný typografický titulek. */
section.blogDetail.legalPage .container h1{
  display:block;
  font:700 3.2rem/4.4rem 'Montserrat', sans-serif;
  color:var(--legal-accent);
  text-transform:uppercase;
  letter-spacing:4px;
  text-align:center;
  max-width:96rem;              /* stejná šířka jako obsah a tabulky */
  margin:0 auto 1.6rem;
}
section.blogDetail.legalPage .container h1 span{
  display:inline;
}

/* dekorativní linka pod titulkem, ve světlém odstínu značky */
section.blogDetail.legalPage .container h1::after{
  content:"";
  display:block;
  width:8rem;
  height:2px;
  margin:2rem auto 0;
  background:var(--legal-accent-line);
}

/* ---------- text ---------- */
section.blogDetail.legalPage .container .text{
  max-width:96rem;              /* stejná šířka jako tabulky, aby vše lícovalo */
  margin:auto;
}

section.blogDetail.legalPage .container .text p{
  font:400 2rem/3.2rem 'Montserrat', sans-serif;
  color:var(--legal-text);
  margin:0 0 1.6rem;
}

section.blogDetail.legalPage .container .text strong{
  color:var(--legal-heading);
  font-weight:700;
}

section.blogDetail.legalPage .container .text em{
  color:var(--legal-text);
}

/* ---------- nadpisy ---------- */
section.blogDetail.legalPage .container .text h3{
  font:700 2.2rem/3.2rem 'Montserrat', sans-serif;
  color:var(--legal-accent);
  letter-spacing:1px;           /* web má 3px, na dlouhých českých nadpisech to brzdí čtení */
  text-transform:none;
  max-width:none;
  margin:4.5rem 0 1.4rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--legal-rule);
}

section.blogDetail.legalPage .container .text h3:first-child{
  margin-top:0;
}

section.blogDetail.legalPage .container .text h4{
  font:700 2rem/3rem 'Montserrat', sans-serif;
  color:var(--legal-heading);
  letter-spacing:0;
  text-transform:none;
  margin:2.8rem 0 .8rem;
}

/* ---------- odkazy ----------
   Ve značkové barvě, ale ztmavené a vždy podtržené, aby se nepoznávaly
   jen podle odstínu. */
section.blogDetail.legalPage .container .text a{
  color:var(--legal-accent);
  text-decoration:underline;
  text-decoration-color:var(--legal-accent-line);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .15s ease, text-decoration-color .15s ease;
}
section.blogDetail.legalPage .container .text a:hover,
section.blogDetail.legalPage .container .text a:focus-visible{
  color:var(--legal-accent-dark);
  text-decoration-color:var(--legal-accent-dark);
}
section.blogDetail.legalPage .container .text a:focus-visible{
  outline:2px solid var(--legal-accent);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- seznamy ---------- */
section.blogDetail.legalPage .container .text ul{
  list-style:none;
  margin:1.2rem 0 1.8rem;
  padding:0;
}
section.blogDetail.legalPage .container .text ul li{
  position:relative;
  font:400 2rem/3.2rem 'Montserrat', sans-serif;
  color:var(--legal-text);
  padding-left:2.6rem;
  margin-bottom:.8rem;
}
/* odrážka ve značkové barvě */
section.blogDetail.legalPage .container .text ul li::before{
  content:"";
  position:absolute;
  left:.4rem;
  top:1.3rem;
  width:.8rem;
  height:.8rem;
  border-radius:50%;
  background:var(--legal-accent-line);
}

/* ---------- tabulka cookies ---------- */
section.blogDetail.legalPage .cookieTable{
  overflow-x:auto;
  margin:1.8rem 0 2.8rem;
  border:1px solid var(--legal-sage-line);
  border-radius:4px;
  -webkit-overflow-scrolling:touch;
}
section.blogDetail.legalPage .cookieTable table{
  border-collapse:collapse;
  width:100%;
  min-width:62rem;
  font-family:'Montserrat', sans-serif;
}
section.blogDetail.legalPage .cookieTable th,
section.blogDetail.legalPage .cookieTable td{
  text-align:left;
  padding:1.2rem 1.6rem;
  border-bottom:1px solid var(--legal-sage-line);
  vertical-align:top;
  font-size:1.7rem;
  line-height:2.6rem;
  color:var(--legal-text);
}
section.blogDetail.legalPage .cookieTable th{
  background:var(--legal-sage-tint);
  color:var(--legal-sage);
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:1.4rem;
  line-height:2.2rem;
}
section.blogDetail.legalPage .cookieTable tbody tr:last-child td{
  border-bottom:none;
}
section.blogDetail.legalPage .cookieTable tbody tr:nth-child(even) td{
  background:#FBFCFA;
}

/* ---------- názvy cookies a technické výrazy ---------- */
section.blogDetail.legalPage .container .text code,
section.blogDetail.legalPage .cookieTable code{
  font-family:'Montserrat', sans-serif;
  font-size:1.7rem;
  font-weight:500;
  background:var(--legal-accent-tint);
  color:var(--legal-code);
  padding:.2rem .7rem;
  border-radius:3px;
  word-break:break-word;
}

/* ---------- responzivita ---------- */
@media (max-width:959px){
  section.blogDetail.legalPage .container .text{
    max-width:100%;
  }
}
@media (max-width:639px){
  section.blogDetail.legalPage .container h1{
    font-size:2.8rem;
    line-height:3.8rem;
    letter-spacing:3px;
  }
  section.blogDetail.legalPage .container .text p,
  section.blogDetail.legalPage .container .text ul li{
    font-size:2rem;
    line-height:3.2rem;
  }
  section.blogDetail.legalPage .container .text h3{
    font-size:2.1rem;
    line-height:3.1rem;
    margin-top:3.6rem;
  }
  section.blogDetail.legalPage .container .text h4{
    font-size:2rem;
  }
}
@media (max-width:479px){
  section.blogDetail.legalPage .container h1{
    font-size:2.5rem;
    line-height:3.4rem;
    letter-spacing:2px;
  }
}

/* ---------- tisk ----------
   Právní dokumenty si lidé tisknou a ukládají do PDF. */
@media print{
  section.blogDetail.legalPage .container .text{max-width:none}
  section.blogDetail.legalPage .container .text a{color:#000;text-decoration:underline}
  section.blogDetail.legalPage .container .text a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:1.2rem;
    color:#555;
  }
  section.blogDetail.legalPage .cookieTable{overflow:visible}
  section.blogDetail.legalPage .container .text h3{break-after:avoid}
  section.blogDetail.legalPage .container .text h4{break-after:avoid}
}