/* ==========================================================================
   DigitalizaciaVPotravinarstve.sk — CLEVERSOFT
   CSS Design System (zdieľaný so cleversoft.cz — rovnaké farby/typografia)
   ========================================================================== */

:root {
  --color-primary:    #04318c;
  --color-dark:       #022873;
  --color-darkest:    #021f59;
  --color-grey:       #dedde4;
  --color-accent:     #F36F21;
  --color-white:      #ffffff;
  --color-text:       #1a1a2e;
  --color-text-light: #555577;

  --font-primary: 'Poppins', Verdana, sans-serif;

  --container-max: 1200px;
  --border-radius: 8px;
  --transition: 0.25s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  color: var(--color-text);
  background-color: var(--color-white);
}

img {
  max-width: 100%;
  height: auto;
}

/* --- Buttons ---
   Zámerne bez `display` — o to sa stará Tailwind utilita na mieste použitia
   (napr. "hidden lg:inline-flex btn--accent"). Keby sme display nastavili
   tu, prebilo by to "hidden" na mobile (rovnaká špecifickosť, neskorší zdroj). */
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-white);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.btn--accent:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* --- Dropdown & Accordion --- */
.rotate-icon {
  transition: transform 0.2s ease;
}

.rotate-icon.open {
  transform: rotate(180deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-body.open {
  max-height: 600px;
}

/* --- Focus styles (a11y, WCAG 2.1 AA) --- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Placeholder vizuál (kým nie sú k dispozícii reálne fotky/screenshoty) --- */
.visual-placeholder {
  background: linear-gradient(135deg, rgba(4, 49, 140, 0.06), rgba(243, 111, 33, 0.08));
  border: 1px dashed rgba(4, 49, 140, 0.25);
}

/* --- Typewriter kurzor --- */
@keyframes blink-caret {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.typewriter-cursor {
  animation: blink-caret 1s step-end infinite;
}

/* --- Jemné animácie, rešpektujú prefers-reduced-motion (bod 2 zadania) --- */
@media (prefers-reduced-motion: no-preference) {
  .fade-in-up {
    animation: fadeInUp 0.5s ease both;
  }

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .typewriter-cursor {
    animation: none;
  }
}