/* ==========================================================================
   Creator.al — custom styles
   Tailwind (CDN) handles the utility classes used in the markup.
   This file holds the things utilities cannot express: base/critical styles,
   component state (open/closed) and animations driven by app.js.
   ========================================================================== */

/* --------------------------------------------------------- base / critical */
/* Painted before Tailwind's CDN stylesheet is generated, so there is no
   white flash on first paint. */
html {
  background-color: #000;
  scrollbar-width: thin;
  scrollbar-color: #2e2e2e transparent;
  scroll-padding-top: 90px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: #000;
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Locked while the mobile menu or the contact modal is open. */
body.no-scroll {
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #2e2e2e;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #4a4a4a;
}

/* Inline SVG sprite holding the logo <symbol>. */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Logo <use> instances inherit their size from the utility classes on the
   <svg>, but need an explicit fallback if Tailwind has not loaded yet. */
svg use {
  pointer-events: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: #9eff00;
  color: #000;
  font-weight: 600;
  border-radius: 0 0 0.5rem 0;
}
.skip-link:focus {
  left: 0;
}

/* Visible focus ring for keyboard users on every interactive element. */
:focus-visible {
  outline: 2px solid #9eff00;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ header */
#site-header {
  background-color: transparent;
  backdrop-filter: none;
}

#site-header.is-scrolled {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ------------------------------------------------- products dropdown (desktop) */
.dropdown-panel {
  opacity: 0;
  transform: translateY(-0.5rem);
  pointer-events: none;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

[data-dropdown].is-open .dropdown-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-chevron {
  transition: transform 0.3s ease-in-out;
}

[data-dropdown].is-open > [data-dropdown-trigger] .dropdown-chevron,
[data-accordion].is-open > [data-accordion-trigger] .dropdown-chevron {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------- mobile menu */
.mobile-menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Collapsible "Produkte" group inside the mobile menu. */
.accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
}

[data-accordion].is-open .accordion-panel {
  max-height: 24rem;
}

/* --------------------------------------------------------------------- FAQ */
.faq-item:hover {
  border-color: #9eff00;
}

.faq-item.is-open {
  border-color: rgba(158, 255, 0, 0.5);
  background-color: #1a2e00;
}

.faq-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-in-out;
}

.faq-item.is-open .faq-panel {
  max-height: 30rem;
}

/* +/− indicator, kept out of the markup so it always matches the state. */
.faq-sign::before {
  content: "+";
}
.faq-item.is-open .faq-sign::before {
  content: "\2212"; /* − */
}

/* ------------------------------------------------------------ audio players */
/* Every play button ships both icons; the state class decides which shows. */
.icon-pause {
  display: none;
}

.is-playing .icon-play {
  display: none;
}
.is-playing .icon-pause {
  display: block;
}

/* The <audio> elements are controlled entirely from app.js. */
audio {
  display: none;
}

/* ----------------------------------------------------------- contact modal */
.modal {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}

.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  transform: scale(0.95);
  transition: transform 0.2s ease-out;
}

.modal.is-open .modal-card {
  transform: scale(1);
}

/* Inline validation feedback on the contact form. */
.field-error {
  border-color: #f87171 !important;
}

#contact-status.is-error {
  color: #f87171;
}
#contact-status.is-success {
  color: #9eff00;
}

/* ---------------------------------------------------------------- a11y bits */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}