/* Minimal accessibility helpers — Jiri Caha brand (dark theme, --ac:#F97316) */

/* ─── Skip link ──────────────────────────────────────────────────────────────
   Při Tab na klávesnici vyskočí viditelný odkaz "Přejít na obsah".
   Bez toho musí klávesnicový uživatel projet celý navbar pokaždé.
   left:-9999px ho schovává mimo viewport (display:none by ho skryl pro AT).
   ─────────────────────────────────────────────────────────────────────────── */
.skip-link {
  display: block;            /* position:absolute nefunguje spolehlivě na inline */
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: #14171f;       /* --bga */
  color: #F97316;            /* --ac */
  border: 2px solid #F97316;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .5);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;       /* text se nezalomí při vyskočení */
}
.skip-link:focus {           /* :focus (ne :focus-visible) — musí fungovat i pro screen readery na dotyku */
  left: 12px;
  top: 12px;
}

/* ─── Focus ring ─────────────────────────────────────────────────────────────
   :focus-visible zobrazí outline JEN při klávesnicové navigaci, ne při kliknutí.
   Výsledek: klávesnicový uživatel vidí, kde je; myšoví uživatelé nevidí ošklivý rámeček.
   ─────────────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #F97316;
  outline-offset: 2px;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────────
   Někteří uživatelé mají v OS zapnuté "Snížit pohyb" (vestibulární poruchy, epilepsie).
   prefers-reduced-motion to detekuje a vypne animace/scroll efekty.
   Třídy rv/rvl/rvr jsou Cahovy reveal animace z index.html/blog.html.
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* 0.01ms místo none: animation/transition proběhne okamžitě, ale JS transitionend event
     se stále vyvolá → carousel, skeleton a jiné JS listenery se nerozbijí. WCAG 2.3 doporučení. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Reveal animace (rv/rvl/rvr) fungují přes opacity+transform, ne transition → resetovat zvlášť */
  .rv, .rvl, .rvr, .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── Tap target ─────────────────────────────────────────────────────────────
   Apple + Google doporučují min. 44×44px klikatelnou plochu pro prsty.
   Třída .tap se přidává na malá tlačítka/ikonky kde Tailwind nestačí.
   ─────────────────────────────────────────────────────────────────────────── */
.tap {
  display: inline-flex;      /* <a> je inline — bez tohoto min-height nemá žádný efekt */
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 6px 10px;
  border-radius: 10px;
}

/* ─── Hero copy overlay (mobile) ─────────────────────────────────────────────
   Na malých obrazovkách hero foto překryje text — glassmorphism panel zajistí
   čitelnost. Dark theme verze (oproti BV světlé).
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .hero-copy {
    background: rgba(10, 12, 16, .75);           /* --bg s průhledností */
    border: 1px solid rgba(249, 115, 22, .25);   /* --ac s průhledností */
    border-radius: 24px;
    padding: 18px 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* ─── Form UI helpers ────────────────────────────────────────────────────────
   Stavové zprávy formuláře (send.php → success/error).
   Nezávislé na Tailwind build — fungují i bez purge.
   ─────────────────────────────────────────────────────────────────────────── */
.form-alert {
  border-radius: 14px;
  border: 1px solid rgba(139, 145, 160, .3);     /* --mu s průhledností */
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.35;
}

.form-alert--error {
  border-color: rgba(239, 68, 68, .4);
  background: rgba(239, 68, 68, .08);
  color: #fca5a5;                                /* red-300 — čitelná na tmavém bg */
}

.form-alert--success {
  border-color: rgba(249, 115, 22, .4);          /* --ac s průhledností */
  background: rgba(249, 115, 22, .08);
  color: #fdba74;                                /* orange-300 — čitelná na tmavém bg */
}

/* Inline chybový text pod polem */
.form-error-text {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: #fca5a5;                                /* red-300 */
}

/* Červený rámeček na chybném inputu */
.form-field-error {
  border-color: rgba(239, 68, 68, .6) !important;
  background: rgba(239, 68, 68, .05) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .2) !important;
}