/* === style.css for vyklady.cz ===
   Core theme — imports Bootstrap, sets utility classes used by the template
*/

@import url('bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&display=swap');

/* ── Base ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ── Navbar positioning utilities ───────────────────────────────────────────── */
.position-absolute { position: absolute !important; }
.navbar.transparent  { background: transparent !important; }
.navbar-dark .nav-link { color: rgba(255,255,255,.85) !important; }
.navbar-dark .nav-link:hover { color: #fff !important; }

/* ── Spacing helpers (Bootstrap 5 pt-xx) — extra large ─────────────────────── */
.pt-18 { padding-top: 7rem !important; }
.pb-8  { padding-bottom: 3rem !important; }

/* ── Buttons (Bootstrap overrides) ─────────────────────────────────────────── */
.btn-white {
  background: #fff;
  color: #720c82;
  border: none;
  font-weight: 600;
}
.btn-white:hover { background: #f0e0f9; color: #4a0660; }

.btn-orange {
  background: #ff8c00;
  color: #fff;
  border: none;
  font-weight: 600;
}
.btn-orange:hover { background: #e07a00; color: #fff; }

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.bg-dark { background-color: #1a0a1e !important; }
.text-inverse { color: rgba(255,255,255,0.7); }

/* ── Utility: circle ────────────────────────────────────────────────────────── */
.circle { border-radius: 50%; }

/* ── Form controls ───────────────────────────────────────────────────────────── */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  opacity: .65;
  transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}

/* ── Responsive container padding fix ───────────────────────────────────────── */
@media (max-width: 576px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
}