/* ===== Reset / Základ ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --brand-blue: #2a56b1;
  --brand-red: #ff4040;
  --brand-dark: #111827;

  --text-main: #16163f;
  --bg-soft: #f3f3f3;
}

html, body {
  font-family: "Avenir", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-main);
  line-height: 1.8;
  letter-spacing: 0.5px;
  word-spacing: 1px;
  scroll-behavior: smooth;
  background: #fff;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.card.card-plain {
  box-shadow: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}

/* ===== Zabránění posouvání stránky během načítání ===== */
.no-scroll { overflow: hidden; }

/* =====================================================================
Načítání (loader-window)
===================================================================== */
.loading-window {
  position: fixed;
  inset: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-logo { width: 74px; height: auto; }
.loading-title { font-size: 24px; color: #000; margin-top: 10px; }

.loading-spinner {
  margin-top: 20px;
  width: 40px;
  height: 40px;
  border: 4px solid #000;
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.fade-out { opacity: 0; transition: opacity 1s ease; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@media (max-width: 768px) {
  .loading-logo { width: 60px; height: 60px; }
  .loading-title { font-size: 20px; }
  .loading-spinner { width: 32px; height: 32px; margin-top: 15px; }
}
@media (max-width: 480px) {
  .loading-logo { width: 50px; height: 50px; }
  .loading-title { font-size: 18px; }
  .loading-spinner { width: 28px; height: 28px; margin-top: 10px; }
}

/* =====================================================================
Tlačítka
===================================================================== */
.btn-cta-pill {
  background-color: var(--brand-red);
  color: #fff;
  border: 2px solid var(--text-main);
  border-radius: 50px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 800;
  transition: border-color 0.2s ease, transform 0.12s ease;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.btn-cta-pill:hover {
  border-color: var(--brand-red);
  background-color: #0b0f18;
  color: #fff;
}

.btn-cta-pill:active { transform: translateY(0); }

.btn-cta-pill-lg {
  padding: 14px 40px;
  font-size: 18px;
}

/* =====================================================================
Branding navigace (navbar)
===================================================================== */
.brand-logo {
  width: 100px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

.brand-name {
  font-size: 22px;
  font-weight: 800;
  color: #000;
}

/* =====================================================================
Jedna postranní / offcanvas navigace (funguje pro mobil i desktop)
HTML předpokládá offcanvas id="siteNav"
===================================================================== */
#siteNav {
  width: 100vw;
  max-width: 100vw;
  background-color: var(--bg-soft);
}

/* Desktop: ne na celou obrazovku, klasický postranní panel */
@media (min-width: 992px) {
  #siteNav {
    width: 420px;
    max-width: 420px;
  }
}

/* Vzhled menu seznamu (váš „slider“ styl, ale v offcanvasu) */
.mobile-nav-list {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-nav-link {
  font-size: 24px;
  text-decoration: none;
  color: #1a1a1a;
  font-weight: 800;
  letter-spacing: 1.5px;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.mobile-nav-link:hover { color: var(--brand-blue); }

/* Vyladění typografie pro desktop (stejné HTML, jiná velikost) */
@media (min-width: 992px) {
  .mobile-nav-link {
    font-size: 18px;
    letter-spacing: 1px;
  }
}

/* =====================================================================
Hero sekce (Obrázek na pozadí + gradient + text se stínem)
===================================================================== */
.hero-section {
  position: relative;
  padding: 110px 0;
  min-height: 520px;
  display: flex;
  align-items: center;
  background: #0b0f18;
  overflow: hidden;
}

/* Hero obrázek pro desktop */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,15,24,.88), rgba(11,15,24,.55)),
    url("../images/desktop-hero-image.png") center/cover no-repeat;
}

/* Hero obrázek pro mobil */
@media (max-width: 991.98px) {
  .hero-section::before {
    background:
      linear-gradient(90deg, rgba(11,15,24,.88), rgba(11,15,24,.55)),
      url("../images/mobile-hero-image.png") center/cover no-repeat;
  }
}

.hero-section .container { position: relative; z-index: 1; }

.hero-title {
  color: #fff;
  font-weight: 900;
  line-height: 1.12;
  text-shadow: 3px 3px 3px #171717;
  font-size: clamp(34px, 4.2vw, 56px);
  margin: 0;
}

.hero-subtitle {
  color: rgba(255,255,255,.88);
  margin-top: 14px;
  font-size: clamp(20px, 2vw, 22px);
  text-shadow: 2px 2px 2px #171717;
}

.text-muted {
  font-size: 17px !important;
}

/* =====================================================================
Nadpisy sekcí (jednoduše)
===================================================================== */
.section-title { font-weight: 900; }
.section-text { font-size: 22px !important; }

/* =====================================================================
Úpravy carouselu (ovládání viditelné na světlém pozadí)
===================================================================== */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

/* =====================================================================
Patička
===================================================================== */
.footer {
  background-color: var(--brand-dark);
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Použil jste .footer-container; teď má v HTML navíc i Bootstrap .container */
.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.footer-link {
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-link:hover { color: var(--brand-red); }

.footer-address-block {
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: left;
}

.footer-address-block p { color: #fff; margin: 0; }

.footer-logo { width: 74px; height: auto; }
.footer-company-name { font-size: 16px; color: #ffffff; margin: 0; }

@media (max-width: 768px) {
  .footer-link, .footer-company-name { font-size: 14px; }
  .footer-address-block p { font-size: 14px; }
  .footer-logo { width: 60px; height: auto; }
}
@media (max-width: 480px) {
  .footer-link, .footer-company-name { font-size: 12px; }
  .footer-address-block p { font-size: 12px; }
  .footer-logo { width: 50px; height: auto; }
}

/* =====================================================================
Animovaná šipka
===================================================================== */
.down-arrow{
  display: inline-block;
  text-decoration: none;
  transition: transform .15s ease;
}

.down-arrow:hover{ transform: translateY(-2px); }
.down-arrow:active{ transform: translateY(0); }

.down-arrow-svg{
  width: 250px;
  height: 203px;
  display: block;

  /* Stín, který kopíruje tvar trojúhelníku */
  filter: drop-shadow(0 18px 50px rgba(0,0,0,.10));
}

/* Dokonale rovnoměrná tloušťka čáry */
.tri-frame{
  fill: #fff;
  stroke: rgba(22,22,63,.14);
  stroke-width: 2.8;
  stroke-linejoin: round;

  /* Klíčové pro zachování tloušťky čáry při změně velikosti */
  vector-effect: non-scaling-stroke;
}

.down-arrow:hover .tri-frame{
  stroke: rgba(255,64,64,.70);
  filter: none;
}

/* Pulzující obrys */
.tri-pulse{
  fill: none;
  stroke: rgba(255,64,64,.22);
  stroke-width: 2.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;

  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: triPulse 1.6s infinite;
}

@keyframes triPulse{
  0%   { transform: scale(.92); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: scale(1.14); opacity: 0; }
}

/* Velké šipky (chevrony) */
.chev{
  fill: none;
  stroke: var(--brand-red);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chev-1{
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: chevBounce 1.05s infinite ease-in-out;
}

.chev-2{
  opacity: .35;
  transform-box: fill-box;
  transform-origin: center;
  animation: chevTrail 1.05s infinite ease-in-out;
}

@keyframes chevBounce{
  0%,100% { transform: translateY(-4px); }
  50%     { transform: translateY(16px); }
}

@keyframes chevTrail{
  0%,100% { transform: translateY(-18px); opacity: .10; }
  50%     { transform: translateY(-2px);  opacity: .45; }
}



























/* =========================
   Form styling (Bootstrap-friendly)
   ========================= */

/* Labels */
.form-label{
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: .35rem;
}

/* Inputs */
.form-control{
  background: #fff;
  border: 2px solid rgba(22,22,63,.14);
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 16px;
}

.form-control::placeholder{
  color: rgba(22,22,63,.45);
}

/* Focus state */
.form-control:focus{
  border-color: rgba(255,64,64,.70);
  box-shadow: 0 0 0 .20rem rgba(255,64,64,.12);
}

/* Optional: make the form card feel more “premium” */
.contact-section .card{
  background: #fff;
}

/* Make the submit look consistent when used as <button class="btn-cta-pill"> */
button.btn-cta-pill{
  border: 2px solid var(--text-main);
}

/* Small spacing polish inside the form */
.contact-form .row.g-3{ margin-top: 0; }