/* Srdcem pro Hlízov — design tokeny odvozené z oficiálního volebního letáku */

:root {
  --navy: #22498A;
  --navy-ink: #1C3B70;
  --red: #ED2230;
  --green: #55A739;
  --green-light: #66BC3E;
  --sky: #B1E0F7;
  --sky-mist: #DEF2FC;
  --white: #FFFFFF;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--white);
  color: var(--navy-ink);
}

.font-display {
  font-family: "Poppins", "Segoe UI", sans-serif;
}

.font-body {
  font-family: "Poppins", "Segoe UI", sans-serif;
}

.font-hand {
  font-family: "Caveat", cursive;
}

/* Diagonální "V" předěl mezi sekcemi — motiv přímo z letáku */
.diag-divider {
  position: relative;
  height: 56px;
  overflow: hidden;
}

.diag-divider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 60px;
  background: var(--diag-to, #fff);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

@media (min-width: 768px) {
  .diag-divider {
    height: 84px;
  }
  .diag-divider::after {
    height: 90px;
  }
}

/* Prstenec fotky kandidáta */
.candidate-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--sky);
  padding: 8px;
  box-sizing: border-box;
}

.candidate-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.candidate-card {
  width: 150px;
}

@media (min-width: 640px) {
  .candidate-card {
    width: 190px;
  }
}

.candidate-card:hover .candidate-photo {
  background: var(--green-light);
  transition: background-color 0.2s ease;
}

.candidate-photo {
  transition: background-color 0.2s ease;
}

/* Číslo na hlasovacím lístku */
.ballot-number {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(28, 59, 112, 0.35);
}

/* Přesahující jmenovka pod fotkou */
.name-pill {
  margin-top: -18px;
  position: relative;
  z-index: 1;
}

/* Citační karta — linkovaný papír, mírné natočení */
.quote-card {
  background-image: repeating-linear-gradient(
    #ffffff 0 26px,
    #e3eef7 26px 27px
  );
  border-radius: 4px 18px 18px 4px;
  transform: rotate(-1deg);
  box-shadow: 0 10px 24px -12px rgba(28, 59, 112, 0.35);
}

/* Odznak lokality (Hlízov / Mladý Hlízov) */
.badge-green {
  background: var(--green);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.8125rem;
  display: inline-block;
}

.priority-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.priority-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px rgba(28, 59, 112, 0.45);
}

#mobile-menu[hidden],
#candidate-modal[hidden] {
  display: none !important;
}

/* Rozbalovací dopis */
.letter-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--navy-ink);
  user-select: none;
}

.letter-summary::-webkit-details-marker {
  display: none;
}

.letter-summary-icon {
  transition: transform 0.2s ease;
}

.letter-details[open] .letter-summary-icon {
  transform: rotate(180deg);
}

.letter-details[open] .letter-summary {
  border-bottom: 1px solid rgba(28, 59, 112, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .priority-card,
  .candidate-photo {
    transition: none;
  }
}