/* Kostra webu: hlavicka, menu, paticka a uvodni strana.
 *
 * Obsah stranek dal stoji na Bootstrapu 4 (theme.css); tenhle soubor se nacita
 * az po nem a prepisuje jen to, co je tady. Barvy jsou z palety theme.css
 * (--light je pozadi stranky, --secondary oranzova, --dark hneda).
 */

:root {
  --brloh-karta: #FBF3E3;
  --brloh-karta-hlavicka: #F5DDBE;
  --brloh-okraj: #E8CBA4;
  --brloh-oranzova: var(--secondary);
  --brloh-text: #3B2A14;
  --brloh-text-tlumeny: #6B4A22;
  /* Oranzova z theme.css ma na bezovem pozadi kontrast pod 2:1, odkazy proto tmavsi. */
  --brloh-odkaz: #9A4612;
  --brloh-odkaz-hover: #6E300A;
}

/* theme.css ma pismo vahy 200, ktere je na bezove skoro nectitelne. */
body {
  color: var(--brloh-text);
  font-weight: 300;
}

a {
  color: var(--brloh-odkaz);
}

a:hover {
  color: var(--brloh-odkaz-hover);
}

/* --- Hlavicka ------------------------------------------------------------ */

.hlavicka {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.hlavicka-medved img {
  display: block;
  height: clamp(64px, 14vw, 170px);
  width: auto;
}

.hlavicka-nazev {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--brloh-oranzova);
  text-decoration: none;
  text-align: center;
  line-height: 1.05;
}

.hlavicka-nazev:hover {
  color: var(--brloh-oranzova);
  text-decoration: none;
}

/* Rozestup pismen misto mezer: zarovna se na stred a nelame se. Zaporny okraj
   vyrovna mezeru za poslednim pismenem. */
.hlavicka-brloh {
  font-size: clamp(2rem, 7.5vw, 7rem);
  font-weight: 400;
  letter-spacing: 0.35em;
  margin-right: -0.35em;
}

.hlavicka-podtitul {
  font-size: clamp(0.9rem, 2.4vw, 2rem);
  font-weight: 300;
  margin-top: 0.35em;
}

.hlavicka-plakat img {
  display: block;
  height: clamp(72px, 13vw, 150px);
  width: auto;
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(59, 42, 20, 0.25);
  transform: rotate(3deg);
}

/* --- Menu ---------------------------------------------------------------- */

.hlavni-menu {
  background: var(--brloh-oranzova);
}

.hlavni-menu .navbar-nav {
  flex-wrap: wrap;
  justify-content: center;
}

/* Selektory s .navbar-light, jinak je prebije sedivy text z theme.css. */
.hlavni-menu.navbar-light .navbar-nav .nav-link {
  color: var(--brloh-text);
  font-weight: 400;
  padding: 0.75rem 0.7rem;
}

.hlavni-menu.navbar-light .navbar-nav .nav-link:hover,
.hlavni-menu.navbar-light .navbar-nav .nav-link:focus {
  color: #000;
}

.hlavni-menu.navbar-light .navbar-nav .nav-link.aktivni {
  color: #000;
  font-weight: 700;
}

/* V radku menu je aktivni stranka podtrzena; v rozbalenem menu na mobilu by se
   cara tahla pres celou sirku, tam staci tucne pismo. */
@media (min-width: 992px) {
  .hlavni-menu.navbar-light .navbar-nav .nav-link.aktivni {
    font-weight: 400;
    box-shadow: inset 0 -3px 0 var(--brloh-text);
  }
}

.hlavni-menu .navbar-toggler {
  border: 0;
  margin: 0.25rem auto;
}

/* --- Paticka ------------------------------------------------------------- */

.paticka {
  max-width: 1140px;
  margin: 1.5rem auto 0;
  padding: 0.6rem 1rem;
  background: var(--brloh-oranzova);
  text-align: center;
}

/* --- Uvodni strana ------------------------------------------------------- */

.aktualita,
.terminy {
  background: var(--brloh-karta);
}

.aktualita {
  border-color: var(--brloh-okraj);
}

.aktualita .card-header {
  background: var(--brloh-karta-hlavicka);
  color: var(--brloh-text-tlumeny);
  border-bottom-color: var(--brloh-okraj);
}

.aktualita-pripnuta {
  background: #FFF9EE;
  border: 2px solid var(--brloh-oranzova);
}

.aktualita-pripnuta .card-header {
  background: var(--brloh-oranzova);
  color: var(--brloh-text);
  border-bottom: 0;
}

.terminy {
  border-color: var(--brloh-oranzova);
}

.terminy .card-header {
  background: var(--brloh-oranzova);
}

.terminy .list-group-item {
  background: transparent;
  border-color: var(--brloh-okraj);
}

.termin-registrace {
  color: var(--brloh-odkaz);
}

/* Vedle aktualit zarovnat s prvni kartou, ne s nadpisem "Aktuality". */
@media (min-width: 992px) {
  .terminy {
    margin-top: 3.6rem;
  }
}

/* Tlacitka kol v terminech: oranzovy obrys z theme.css je na kremove skoro neviditelny. */
.terminy .btn-outline-secondary {
  color: var(--brloh-odkaz);
  border-color: var(--brloh-oranzova);
}

/* --- Poradi --------------------------------------------------------------- */

/* Tabulka ma pri 51 ulohach kolem 1150 px; container Bootstrapu (1110 px) by
   uz treti kolo usekl, proto si stranka bere o kousek vic. Na uzsich displejich
   roluje jen tabulka, poradi a nazev tymu zustavaji na miste. */
.poradi {
  --ctverec: 14px;
  --vyreseno: #2F6B4A;
  --spatne: #C2622D;
  --vycerpano: #E2A57A;
  --nezkouseno: #E9DCC3;
  --postup: #FCE7C6;
  --muj: #F2CF66;
  max-width: 1240px;
  margin: 0 calc((100% - min(1240px, 100vw - 2rem)) / 2);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.poradi h1 {
  margin: 0;
  font-weight: 400;
}

.poradi-zahlavi {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.poradi-etapy,
.poradi-prepinac {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: #EBDFC6;
  border: 1px solid #D8C6A4;
  border-radius: 10px;
}

.poradi-etapy a,
.poradi-etapy span,
.poradi-prepinac a {
  padding: 0.55rem 1rem;
  border-radius: 7px;
  color: var(--dark);
  text-decoration: none;
}

.poradi-etapy a:hover,
.poradi-prepinac a:hover {
  background: var(--brloh-karta-hlavicka);
  color: var(--dark);
}

.poradi-etapy [aria-current],
.poradi-prepinac [aria-current],
.poradi-etapy [aria-current]:hover,
.poradi-prepinac [aria-current]:hover {
  background: var(--dark);
  color: var(--brloh-karta);
  font-weight: 600;
}

.poradi-etapy [aria-disabled] {
  color: #9C8B6B;
  cursor: not-allowed;
}

.poradi-popis {
  margin: 0;
  max-width: 780px;
}

.poradi-filtry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--brloh-karta);
  border: 1px solid var(--brloh-okraj);
  border-radius: 12px;
}

.poradi-filtry select,
.poradi-filtry input[type="search"] {
  height: 44px;
  padding: 0 0.9rem;
  border: 1px solid #D8C6A4;
  border-radius: 8px;
  background: #FFF9EE;
  color: var(--brloh-text);
  font: inherit;
}

.poradi-kraj {
  margin: 0;
}

.poradi-hledat {
  flex: 1 1 220px;
  margin: 0;
}

.poradi-hledat input {
  width: 100%;
}

.poradi-jen-postup {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  min-height: 44px;
  cursor: pointer;
}

.poradi-jen-postup input {
  width: 18px;
  height: 18px;
  accent-color: var(--dark);
}

.poradi-muj-odkaz {
  margin-left: auto;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  background: var(--muj);
  color: var(--brloh-text);
  font-weight: 600;
}

.poradi-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--brloh-text-tlumeny);
}

.poradi-legenda li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.poradi-sekce {
  margin: 0.5rem 0 0;
  font-size: 1.4rem;
  font-weight: 500;
}

.poradi-tabulka {
  overflow-x: auto;
  background: var(--brloh-karta);
  border: 1px solid var(--brloh-okraj);
  border-radius: 12px;
}

.poradi-tabulka table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}

.poradi-tabulka th,
.poradi-tabulka td {
  padding: 0.5rem 0.6rem;
  vertical-align: middle;
  background: var(--brloh-karta);
  border-bottom: 1px solid var(--brloh-okraj);
}

.poradi-tabulka thead th {
  background: var(--brloh-karta-hlavicka);
  color: var(--brloh-text-tlumeny);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
}

.poradi-tabulka tr.postupuje td {
  background: var(--postup);
}

.poradi-tabulka tr.muj-tym td {
  background: var(--muj);
  border-top: 2px solid var(--dark);
  border-bottom: 2px solid var(--dark);
}

.poradi-tabulka tbody tr:not(.muj-tym):not(.hranice):hover td {
  background: #FFF4DF;
}

.poradi-tabulka .sloupec-poradi {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 3.25rem;
  min-width: 3.25rem;
  font-weight: 600;
  color: var(--brloh-text-tlumeny);
}

.poradi-tabulka .sloupec-tym {
  position: sticky;
  left: 3.25rem;
  z-index: 1;
  min-width: 190px;
  max-width: 230px;
  box-shadow: inset -1px 0 0 var(--brloh-okraj);
}

.tym-nazev {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tym-nazev > span:first-child {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tym-skola {
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--brloh-text-tlumeny);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.stitek {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--dark);
  color: var(--brloh-karta);
  font-size: 0.7rem;
  font-weight: 600;
}

.stitek-muj {
  background: var(--brloh-text);
}

.poradi-tabulka .sloupec-body {
  text-align: right;
  white-space: nowrap;
}

.poradi-tabulka .body {
  font-size: 1.1rem;
  font-weight: 600;
}

.poradi-tabulka .body-spatne {
  font-size: 0.7rem;
  color: var(--brloh-odkaz);
}

.poradi-tabulka .cas {
  color: var(--brloh-text-tlumeny);
}

.kolo-nazev {
  margin-bottom: 4px;
  font-size: 0.8rem;
  color: var(--brloh-text);
}

.kolo-souhrn {
  margin-top: 3px;
  font-size: 0.7rem;
  color: var(--brloh-text-tlumeny);
}

.ctverce {
  display: flex;
  gap: 2px;
}

.ctverec,
.ctverec-cislo {
  flex: none;
  width: var(--ctverec);
  height: var(--ctverec);
  line-height: var(--ctverec);
  text-align: center;
}

.ctverec-cislo {
  font-size: 8px;
  font-weight: 500;
  color: #8A765A;
  cursor: help;
}

.ctverec {
  box-sizing: border-box;
  border-radius: 3px;
  background: var(--nezkouseno);
  font-size: 9px;
  font-weight: 700;
}

.ctverec.vyreseno {
  background: var(--vyreseno);
  color: #fff;
}

.ctverec.spatne {
  background: #FFF9EE;
  border: 1.5px solid var(--spatne);
  color: var(--brloh-odkaz);
  line-height: calc(var(--ctverec) - 3px);
}

.ctverec.vycerpano {
  background: var(--vycerpano);
  color: #5A2608;
}

.poradi-tabulka tr.hranice td {
  padding: 2px 1rem;
  border-bottom: 2px dashed var(--brloh-odkaz);
  color: var(--brloh-odkaz);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Na telefonu by sloupec s tymem zabral pul obrazovky, ctverecky by nebylo videt. */
@media (max-width: 575px) {
  .poradi-tabulka .sloupec-poradi {
    width: 2.5rem;
    min-width: 2.5rem;
  }

  .poradi-tabulka .sloupec-tym {
    left: 2.5rem;
    min-width: 140px;
    max-width: 150px;
  }

  /* Postup uz rika podbarveni radku, stitek by na telefonu snedl nazev tymu. */
  .stitek:not(.stitek-muj) {
    display: none;
  }

  .poradi-tabulka th,
  .poradi-tabulka td {
    padding: 0.5rem;
  }

  .poradi-muj-odkaz {
    margin-left: 0;
  }

  .poradi-etapy,
  .poradi-prepinac {
    display: grid;
    flex: 1 1 100%;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .poradi-etapy a,
  .poradi-etapy span,
  .poradi-prepinac a {
    padding: 0.55rem 0.25rem;
    font-size: 0.9rem;
    text-align: center;
  }

  .poradi-kraj,
  .poradi-kraj select {
    width: 100%;
  }
}