/* Studuji ve Zlíně — site-specific styles on top of Tailwind UTB DNA. */

html { scroll-behavior: smooth; }

/* High-contrast focus ring for senior users (WCAG AAA). */
:focus-visible {
  outline: 3px solid #E37222;
  outline-offset: 2px;
}

/* Filter chips on /kurzy + /pobocky. */
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.1rem;
  border: 2px solid #BECDD2;
  border-radius: 999px;
  font-weight: 500;
  color: #272D39;
  cursor: pointer;
  user-select: none;
  background: #fff;
  transition: all 120ms ease;
  min-height: 48px;
  font-size: 1.0625rem;
}
.filter-chip:hover {
  border-color: #B25D12;
  background: #FFF8F1;
}
.filter-chip:has(input:checked) {
  background: #E37222;
  color: #fff;
  border-color: #E37222;
}

/* Hidden card class used by JS filter. */
.course-card.is-hidden { display: none; }

/* Line clamp utilities (Tailwind CDN doesn't include line-clamp by default). */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* UTB signature design language: asymmetric large bottom-left radius on hero. */
.hero-asym {
  border-radius: 0 0 0 60px;
  overflow: hidden;
}

/* Long-text body — comfortable for older eyes. */
.prose { color: #272D39; max-width: 65ch; }
.prose h2 { color: #E37222; font-family: 'Libre Baskerville', Georgia, serif; font-weight: 700; font-size: 1.625rem; margin: 1.5rem 0 0.75rem; line-height: 1.25; }
.prose h3 { color: #B25D12; font-family: 'Source Sans 3', Arial, sans-serif; font-weight: 700; font-size: 1.25rem; margin: 1.25rem 0 0.5rem; }
.prose p, .prose li { font-size: 1.125rem; line-height: 1.7; }
.prose p { margin-bottom: 0.85rem; }
.prose a { color: #B25D12; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #D73800; text-decoration-thickness: 2px; }
.prose ul { padding-left: 1.5rem; list-style: disc; margin: 0.5rem 0 1rem; }
.prose ol { padding-left: 1.5rem; list-style: decimal; margin: 0.5rem 0 1rem; }
.prose li { margin-bottom: 0.35rem; }
.prose strong { color: #272D39; font-weight: 700; }
.prose em { font-style: italic; color: #555; }
.prose blockquote {
  border-left: 4px solid #E37222;
  padding-left: 1rem;
  margin: 1rem 0;
  color: #555;
  font-style: italic;
}

/* Hide native details marker (we provide our own ▸/▾). */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Buttons — UTB convention: sharp corners, 48 px tap target. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.4rem;
  background: #E37222;
  color: #fff;
  font-weight: 600;
  font-size: 1.0625rem;
  min-height: 48px;
  border: 2px solid #E37222;
  transition: all 120ms ease;
}
.btn-primary:hover { background: #D73800; border-color: #D73800; }
.btn-primary:focus-visible { outline-color: #272D39; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.4rem;
  background: transparent;
  color: #B25D12;
  font-weight: 600;
  font-size: 1.0625rem;
  min-height: 48px;
  border: 2px solid #B25D12;
  transition: all 120ms ease;
}
.btn-secondary:hover { background: #FFF8F1; }

.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.4rem;
  background: #272D39;
  color: #fff;
  font-weight: 600;
  font-size: 1.0625rem;
  min-height: 48px;
  border: 2px solid #272D39;
}
.btn-dark:hover { background: #46505A; }

/* Danger buttons — SAME geometry as .btn-* (padding / font / min-height / border)
   so every button in a row lines up to an identical height. */
.btn-danger,
.btn-danger-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.4rem;
  font-weight: 600;
  font-size: 1.0625rem;
  min-height: 48px;
  border: 2px solid #dc2626;   /* red-600 */
  transition: all 120ms ease;
}
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; } /* red-700 */
.btn-danger-outline { background: transparent; color: #b91c1c; }
.btn-danger-outline:hover { background: #fef2f2; }                 /* red-50 */

/* Highlight the signup card you jumped to from "Zobrazit přihlášku". */
.signup-card:target { box-shadow: 0 0 0 3px #E37222; border-color: #E37222; }

/* "Already registered" state applied by JS to a course's sign-up CTA. */
.is-registered {
  background: #047857 !important;      /* emerald-700 */
  border-color: #047857 !important;
  color: #fff !important;
}
.is-registered:hover {
  background: #065f46 !important;      /* emerald-800 */
  border-color: #065f46 !important;
}
/* Small "✓ Přihlášen" marker on a course card, revealed by JS. */
.registered-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #d1fae5;                  /* emerald-100 */
  color: #065f46;                       /* emerald-800 */
  border: 1px solid #6ee7b7;            /* emerald-300 */
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Card */
.card {
  background: #fff;
  border: 1px solid #BECDD2;
  transition: all 150ms ease;
}
.card:hover {
  border-color: #E37222;
  box-shadow: 0 6px 24px rgba(231, 114, 34, 0.12);
}

/* Section spacing */
section { scroll-margin-top: 5rem; }

/* ── Accent category (special "NOVINKA" course area) ────────────────────── */
/* A distinct violet/purple accent so it stands out from the UTB orange system. */
.filter-chip.is-accent:has(input:checked) {
  background: #6d28d9;   /* violet-700 */
  border-color: #6d28d9;
  color: #fff;
}
.filter-chip.is-accent {
  border-color: #a78bfa; /* violet-400 */
  color: #5b21b6;        /* violet-800 */
  background: #f5f3ff;   /* violet-50 */
}
.filter-chip.is-accent:hover {
  border-color: #6d28d9;
  background: #ede9fe;
}

/* Home-page category tile in accent style */
.cat-tile-accent {
  background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%) !important;
  border-color: #6d28d9 !important;
  color: #fff !important;
}
.cat-tile-accent h3 { color: #fff !important; }
.cat-tile-accent p { color: #ddd6fe !important; }
.cat-tile-accent .cat-badge {
  background: #fff !important;
  color: #6d28d9 !important;
}
.cat-tile-accent svg { color: #ede9fe !important; }

/* Course card ribbon for accent course */
.course-card.is-accent {
  border-color: #a78bfa;
  box-shadow: 0 0 0 2px #ede9fe;
}
.course-card.is-accent:hover {
  border-color: #6d28d9;
  box-shadow: 0 6px 24px rgba(109, 40, 217, 0.18);
}
.ribbon-novinka {
  position: absolute;
  top: 12px;
  left: -2px;
  background: #6d28d9;
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 5px 12px 5px 10px;
  text-transform: uppercase;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}