/* =========================================================================
   janačkova.info — členská nástěnka SVJ
   Aesthetic: "úřední editorial" — důvěryhodný, klidný, čitelný i pro seniory.
   Fraunces (display serif) + Source Sans 3 (body). Mobile-first. WCAG AA.
   ========================================================================= */

:root {
  --barva: #1f4e5f;                 /* primární (přepisuje inline z nastaveni) */
  --barva-tmava: #163a47;
  --barva-svetla: #2c6678;
  --akcent: #b5612f;                /* jantar/terakota pro "důležité" */
  --akcent-svetly: #f4e7dc;
  --papir: #f5f1e9;                 /* teplá papírová plocha */
  --papir-tmavsi: #ece6da;
  --karta: #fffdf8;                 /* plocha karet */
  --ink: #20262a;                   /* hlavní text */
  --ink-tlumeny: #5b6066;           /* sekundární text */
  --linka: #e0d9cb;                 /* jemné linky */
  --linka-silna: #c9c0ad;
  --ok: #2e6b4f;
  --chyba: #a12f2f;
  --stin: 0 1px 2px rgba(32,38,42,.06), 0 6px 18px rgba(32,38,42,.07);
  --stin-jemny: 0 1px 2px rgba(32,38,42,.05);
  --r: 14px;
  --r-mala: 9px;
  --sirka: 64rem;
  --pismo-display: "Fraunces", Georgia, "Times New Roman", serif;
  --pismo-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }   /* 18px base — čitelnost */

body {
  margin: 0;
  font-family: var(--pismo-text);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--papir);
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(31,78,95,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(181,97,47,.05), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Layout ---------- */
.obal { width: 100%; max-width: var(--sirka); margin-inline: auto; padding-inline: 1.1rem; }
main.obal { padding-block: 1.4rem 3rem; display: flex; flex-direction: column; gap: 1.2rem; }

/* ---------- Typografie ---------- */
h1, h2, h3 { font-family: var(--pismo-display); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.4rem; color: var(--barva-tmava); margin-bottom: .7rem; }
h3 { font-size: 1.12rem; color: var(--ink); margin: 1.1rem 0 .5rem; }
p { margin: 0 0 .65rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--barva-svetla); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--barva-tmava); }
strong { font-weight: 600; }

/* ---------- Hlavička ---------- */
.hlavicka {
  background: linear-gradient(160deg, var(--barva-svetla), var(--barva-tmava));
  color: #fdfcf8;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
}
.hlavicka-obal { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding-block: 1rem; }
.monogram {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-family: var(--pismo-display); font-weight: 600; font-size: .95rem; letter-spacing: .02em;
  color: #fdfcf8;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px;
}
.hlavicka-text { flex: 1 1 14rem; min-width: 0; }
.hlavicka h1 { color: #fff; }
.adresa { margin: .15rem 0 0; font-size: .82rem; color: rgba(255,255,255,.82); }
.hlavni-nav { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.hlavni-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: .25rem .8rem;
  color: #fdfcf8; text-decoration: none; font-weight: 600; font-size: .92rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
}
.hlavni-nav a:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ---------- Karty ---------- */
.karta {
  background: var(--karta);
  border: 1px solid var(--linka);
  border-radius: var(--r);
  padding: 1.2rem 1.15rem;
  box-shadow: var(--stin);
}
.karta-login { border-top: 3px solid var(--barva); }
.podtitul { color: var(--ink-tlumeny); margin-bottom: 1rem; }
.prazdne { color: var(--ink-tlumeny); font-style: italic; }

/* ---------- Aktuality ---------- */
.aktualita { padding: .9rem 0; border-top: 1px solid var(--linka); }
.aktualita:first-of-type { border-top: 0; padding-top: .2rem; }
.aktualita h3 { margin: .2rem 0 .35rem; }
.aktualita .meta { font-size: .82rem; color: var(--ink-tlumeny); margin-bottom: .15rem; }
.stitek {
  display: inline-block; padding: .05rem .5rem; border-radius: 999px;
  background: var(--papir-tmavsi); color: var(--ink); font-weight: 600; font-size: .76rem;
}
.aktualita.dulezite {
  background: var(--akcent-svetly);
  border: 1px solid #e7cdb6; border-left: 4px solid var(--akcent);
  border-radius: var(--r-mala); padding: .9rem 1rem; margin-block: .55rem;
}
.aktualita.dulezite:first-of-type { padding-top: .9rem; }
.znak-dulezite { color: var(--akcent); }

/* ---------- Události ---------- */
.udalosti { list-style: none; margin: 0; padding: 0; }
.udalosti li { padding: .65rem 0; border-top: 1px solid var(--linka); }
.udalosti li:first-child { border-top: 0; }
.udalosti .popis { color: var(--ink-tlumeny); font-size: .92rem; }

/* ---------- Dokumenty ---------- */
.dokumenty { list-style: none; margin: 0; padding: 0; }
.dokumenty li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 0; border-top: 1px solid var(--linka); }
.dokumenty li:first-child { border-top: 0; }
.dokumenty a { min-height: 32px; display: inline-flex; align-items: center; font-weight: 600; }
.kat {
  flex: 0 0 auto; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--barva-tmava); background: var(--papir-tmavsi); padding: .12rem .55rem; border-radius: 6px;
}

/* ---------- Kontakty ---------- */
.kontakty-vybor { list-style: none; margin: 0; padding: 0; }
.kontakty-vybor li { padding: .4rem 0; border-top: 1px solid var(--linka); }
.kontakty-vybor li:first-child { border-top: 0; }

/* ---------- FAQ ---------- */
.faq-polozka { border-top: 1px solid var(--linka); padding: .2rem 0; }
.faq-polozka:first-of-type { border-top: 0; }
.faq-polozka summary {
  cursor: pointer; padding: .6rem 0; font-weight: 600; color: var(--barva-tmava);
  list-style: none; min-height: 44px; display: flex; align-items: center; gap: .5rem;
}
.faq-polozka summary::before { content: "+"; font-family: var(--pismo-display); color: var(--akcent); font-size: 1.2rem; line-height: 1; }
.faq-polozka[open] summary::before { content: "–"; }
.faq-polozka summary::-webkit-details-marker { display: none; }
.faq-polozka p { padding: 0 0 .8rem 1.4rem; color: var(--ink-tlumeny); }

/* ---------- Linky (havárie) ---------- */
.linky { list-style: none; margin: 0; padding: 0; }
.linky li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .65rem 0; border-top: 1px solid var(--linka); }
.linky li:first-child { border-top: 0; }
.linka-tel { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chybi { color: var(--ink-tlumeny); font-style: italic; font-size: .85rem; }
.upozorneni {
  background: var(--akcent-svetly); border: 1px solid #e7cdb6; border-radius: var(--r-mala);
  padding: .6rem .8rem; color: #6e3e1c; font-weight: 600; font-size: .92rem;
}

/* ---------- Finance ---------- */
.finance { border-top: 3px solid var(--barva); }
.finance-datum { color: var(--ink-tlumeny); font-size: .85rem; margin-top: -.35rem; margin-bottom: .9rem; }
.finance-mrizka { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.finance-polozka {
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--papir); border: 1px solid var(--linka); border-radius: var(--r-mala); padding: .85rem .95rem;
}
.finance-popis { font-size: .82rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-tlumeny); }
.finance-castka { font-family: var(--pismo-display); font-size: 1.5rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.finance-vynos { font-size: .82rem; color: var(--ok); font-weight: 600; }
.finance-soucet { background: var(--barva); border-color: var(--barva-tmava); }
.finance-soucet .finance-popis { color: rgba(255,255,255,.78); }
.finance-soucet .finance-castka { color: #fff; }

/* ---------- Formuláře ---------- */
.form { display: flex; flex-direction: column; gap: .85rem; max-width: 34rem; }
.form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .95rem; color: var(--ink); }
.form label.radek { flex-direction: row; align-items: center; gap: .55rem; font-weight: 600; }
.form input[type=text], .form input[type=email], .form input[type=password],
.form input[type=date], .form input[type=time], .form input[type=color], .form select, .form textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--linka-silna); border-radius: var(--r-mala);
  padding: .6rem .7rem; min-height: 44px; width: 100%;
}
.form input[type=color] { padding: .25rem; height: 44px; }
.form input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--barva); }
.form textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--barva); box-shadow: 0 0 0 3px rgba(31,78,95,.18); }
.form fieldset { border: 1px solid var(--linka); border-radius: var(--r-mala); padding: .9rem; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.form fieldset legend { font-weight: 700; color: var(--barva-tmava); padding: 0 .4rem; }
.napoveda { font-size: .82rem; color: var(--ink-tlumeny); font-weight: 400; }
.form-akce { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* ---------- Tlačítka & odkazové akce ---------- */
button, .tlacitko {
  font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .6rem 1.3rem;
  color: #fdfcf8; background: var(--barva); border: 1px solid var(--barva-tmava); border-radius: 999px;
  text-decoration: none; transition: background .15s ease, transform .05s ease;
}
button:hover, .tlacitko:hover { background: var(--barva-tmava); color: #fff; }
button:active, .tlacitko:active { transform: translateY(1px); }
.tlacitko-zrusit {
  background: transparent; color: var(--ink-tlumeny); border-color: var(--linka-silna);
  min-height: 46px; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 600; display: inline-flex; align-items: center; text-decoration: none;
}
.tlacitko-zrusit:hover { background: var(--papir-tmavsi); color: var(--ink); }

/* hlášky */
.chyba { background: #fbecec; border: 1px solid #e7c3c3; color: var(--chyba); padding: .6rem .8rem; border-radius: var(--r-mala); font-weight: 600; }
.info { background: #e9f3ec; border: 1px solid #c2ddca; color: var(--ok); padding: .6rem .8rem; border-radius: var(--r-mala); font-weight: 600; }

/* ---------- Administrace ---------- */
body.admin { background-image: none; background-color: var(--papir); }
.admin-hlavicka { background: var(--barva-tmava); color: #fdfcf8; }
.admin-hlavicka-obal { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding-block: .7rem; }
.admin-logo { font-family: var(--pismo-display); font-size: 1.1rem; }
.admin-nav-prepinac {
  margin-left: auto; min-height: 40px; padding: .35rem .9rem; font-size: .9rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 8px; color: #fff;
}
.admin-nav { display: none; flex: 1 0 100%; flex-direction: column; gap: .15rem; margin-top: .5rem; }
.admin-nav.otevreno { display: flex; }
.admin-nav a {
  color: #f3efe7; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .6rem .7rem; min-height: 44px; display: flex; align-items: center;
  border-radius: 8px; border: 1px solid transparent;
}
.admin-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }

.stav-aktivni { color: var(--ok); font-weight: 700; }
.stav-vyprsel { color: var(--chyba); font-weight: 700; }
.akce input[type=date] { padding: .35rem .4rem; min-height: 38px; border: 1px solid var(--linka-silna); border-radius: 7px; font-family: inherit; font-size: .9rem; }

.prehled-cisla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.prehled-cisla li { background: var(--papir); border: 1px solid var(--linka); border-radius: var(--r-mala); padding: .7rem .8rem; }
.prehled-cisla strong { font-family: var(--pismo-display); font-size: 1.25rem; display: block; }

.pridat-blok { border: 1px solid var(--linka); border-radius: var(--r-mala); padding: .3rem .8rem; margin-bottom: 1rem; }
.pridat-blok summary { cursor: pointer; font-weight: 600; color: var(--barva-tmava); min-height: 44px; display: flex; align-items: center; }
.pridat-blok .form { margin: .6rem 0 1rem; }

/* ---------- Seznamy / tabulky (mobile-first = karty) ---------- */
.seznam-obal { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.seznam { width: 100%; border-collapse: collapse; }
.seznam thead { display: none; }                  /* na mobilu skryté, místo nadpisů data-label */
.seznam tr { display: block; background: var(--papir); border: 1px solid var(--linka); border-radius: var(--r-mala); padding: .6rem .75rem; margin-bottom: .6rem; }
.seznam td { display: block; padding: .2rem 0; border: 0; }
.seznam td[data-label]::before {
  content: attr(data-label) ": "; font-weight: 700; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--ink-tlumeny); display: block;
}
.seznam .seznam-nazev { font-weight: 600; }
.seznam .akce { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: .4rem; padding-top: .5rem; border-top: 1px dashed var(--linka); }
.vstup-tabulka td { padding: .25rem 0; }
.vstup-tabulka input { width: 100%; }
.inline-form { display: inline; margin: 0; }

/* odkazové akce v tabulkách (větší tap cíl) */
.akce a, .link, .link-smaz {
  background: none; border: 0; padding: .35rem .1rem; min-height: 40px; display: inline-flex; align-items: center;
  font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.akce a, .link { color: var(--barva-svetla); }
.link-smaz { color: var(--chyba); }
.akce a:hover, .link:hover { color: var(--barva-tmava); }
.link-smaz:hover { color: #7e2222; }
.odkaz-dolu { margin-top: 1rem; }

/* ---------- Výběrová řízení ---------- */
.rizeni-seznam { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.rizeni-polozka { border: 1px solid var(--linka); border-radius: var(--r-mala); padding: 1rem; background: var(--papir); }
.rizeni-hlava { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.rizeni-hlava h2, .rizeni-hlava h3 { margin: 0; }
.rizeni-termin { color: var(--ink-tlumeny); font-size: .92rem; }
.rizeni-detail .rizeni-popis { white-space: normal; }
.zpet { display: inline-block; margin-bottom: .4rem; font-weight: 600; }
.rizeni-galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.rizeni-galerie img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--r-mala); border: 1px solid var(--linka); display: block; background: #fff; }
.admin-galerie figure { margin: 0; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
@media (min-width: 600px) {
  .rizeni-galerie { grid-template-columns: repeat(3, 1fr); }
  .rizeni-galerie img { height: 180px; }
}

/* ---------- Patička ---------- */
.paticka { border-top: 1px solid var(--linka); background: var(--papir-tmavsi); color: var(--ink-tlumeny); }
.paticka .obal { padding-block: 1.2rem; }
.paticka p { font-size: .85rem; margin: 0; }

/* ---------- Přístupnost ---------- */
:focus-visible { outline: 3px solid var(--barva-svetla); outline-offset: 2px; border-radius: 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =========================================================================
   Breakpointy (mobile-first → nahoru)
   ========================================================================= */
@media (min-width: 600px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.55rem; }
  .obal { padding-inline: 1.5rem; }
  main.obal { padding-block: 2rem 4rem; gap: 1.5rem; }
  .karta { padding: 1.6rem 1.5rem; }
  .hlavni-nav { flex: 0 0 auto; margin-top: 0; margin-left: auto; }
  .finance-mrizka { grid-template-columns: repeat(3, 1fr); }
  .prehled-cisla { grid-template-columns: repeat(3, 1fr); }

  /* tabulky zpět do mřížky */
  .seznam thead { display: table-header-group; }
  .seznam thead th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-tlumeny); padding: .4rem .6rem; border-bottom: 2px solid var(--linka-silna); }
  .seznam tr { display: table-row; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .seznam tr + tr td { border-top: 1px solid var(--linka); }
  .seznam td { display: table-cell; padding: .55rem .6rem; vertical-align: top; }
  .seznam td[data-label]::before { display: none; }
  .seznam .akce { display: table-cell; border-top: 1px solid var(--linka); margin: 0; padding-top: .55rem; gap: .9rem; white-space: nowrap; }
  .vstup-tabulka td { padding: .3rem .4rem; }
}

@media (min-width: 820px) {
  /* admin navigace jako řádek, přepínač skrytý */
  .admin-nav-prepinac { display: none; }
  .admin-nav { display: flex; flex-flow: row wrap; flex: 1 1 auto; gap: .15rem; margin-top: 0; margin-left: .5rem; }
  .admin-nav a { font-size: .88rem; padding: .45rem .6rem; min-height: 40px; }
}

@media (min-width: 960px) {
  h1 { font-size: 1.85rem; }
  .monogram { width: 54px; height: 54px; font-size: 1.05rem; }
}