/* Pictonica - Custom Styles */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Mobile menu transition */
.nav-menu {
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.nav-menu.open {
  max-height: 500px;
  opacity: 1;
}

/* Dropdown transition */
.dropdown-menu {
  transition: max-height 0.25s ease-out, opacity 0.25s ease-out;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.dropdown-menu.open {
  max-height: 300px;
  opacity: 1;
}

/* FAQ accordion */
.faq-answer {
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.faq-answer.open {
  max-height: 500px;
  opacity: 1;
}

.faq-icon {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

/* Tabs */
.tab-btn.active {
  border-color: #EC008C;
  color: #EC008C;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Language switcher */
.lang-btn.active {
  font-weight: 700;
  color: #EC008C;
}

/* Bilingual text: hide inactive language */
[data-lang-en],
[data-lang-sk] {
  display: none;
}

[data-active-lang="en"] [data-lang-en] {
  display: initial;
}

[data-active-lang="sk"] [data-lang-sk] {
  display: initial;
}

/* For block-level bilingual elements */
div[data-lang-en],
p[data-lang-en],
h1[data-lang-en],
h2[data-lang-en],
h3[data-lang-en],
h4[data-lang-en],
li[data-lang-en],
section[data-lang-en],
a[data-lang-en],
span[data-lang-en] {
  display: none;
}

div[data-lang-sk],
p[data-lang-sk],
h1[data-lang-sk],
h2[data-lang-sk],
h3[data-lang-sk],
h4[data-lang-sk],
li[data-lang-sk],
section[data-lang-sk],
a[data-lang-sk],
span[data-lang-sk] {
  display: none;
}

[data-active-lang="en"] div[data-lang-en],
[data-active-lang="en"] p[data-lang-en],
[data-active-lang="en"] h1[data-lang-en],
[data-active-lang="en"] h2[data-lang-en],
[data-active-lang="en"] h3[data-lang-en],
[data-active-lang="en"] h4[data-lang-en],
[data-active-lang="en"] li[data-lang-en],
[data-active-lang="en"] section[data-lang-en],
[data-active-lang="en"] a[data-lang-en],
[data-active-lang="en"] span[data-lang-en] {
  display: block;
}

[data-active-lang="sk"] div[data-lang-sk],
[data-active-lang="sk"] p[data-lang-sk],
[data-active-lang="sk"] h1[data-lang-sk],
[data-active-lang="sk"] h2[data-lang-sk],
[data-active-lang="sk"] h3[data-lang-sk],
[data-active-lang="sk"] h4[data-lang-sk],
[data-active-lang="sk"] li[data-lang-sk],
[data-active-lang="sk"] section[data-lang-sk],
[data-active-lang="sk"] a[data-lang-sk],
[data-active-lang="sk"] span[data-lang-sk] {
  display: block;
}

/* Inline bilingual elements (keep inline display) */
[data-active-lang="en"] span[data-lang-en],
[data-active-lang="en"] a[data-lang-en] {
  display: inline;
}

[data-active-lang="sk"] span[data-lang-sk],
[data-active-lang="sk"] a[data-lang-sk] {
  display: inline;
}

/* Headings balance */
h1, h2, h3 {
  text-wrap: balance;
}

/* Focus visible ring for all interactive elements */
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid #EC008C;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scroll fade-in animation */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Logo ticker animation */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-scroll-left {
  animation: scroll-left 30s linear infinite;
}

/* Hero vertical scroll animation */
@keyframes loop-vertically {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.animate-loop-vertically {
  animation: loop-vertically 20s linear infinite;
}

/* Honour prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .animate-loop-vertically,
  .animate-scroll-left {
    animation: none;
  }
  .nav-menu,
  .dropdown-menu,
  .faq-answer {
    transition: none;
  }
}