/*
  WiBiCharge — shared site styles.
  Tailwind (via CDN) still handles layout and one-off utility styling on
  each page; this file only carries things Tailwind can't express inline:
  design tokens, cross-page component states, and motion preferences.

  The custom properties below mirror the palette used throughout the
  Tailwind arbitrary-value classes (e.g. bg-[#273F61]). They exist as a
  single documented reference now, ready to become the Astro/Tailwind
  theme (and Sanity colour fields) later, without having to reverse
  engineer the palette from markup.
*/

:root {
  --color-ink: #273F61;
  --color-ink-deep: #203650;
  --color-paper: #F5F5F0;
  --color-lime: #A0BF38;
  --color-lime-soft: #BDD475;
  --color-olive: #6B8553;
  --color-amber: #D78432;
  --color-eu-blue: #003399;
  --color-eu-star: #FFCC00;
}

html {
  scroll-behavior: smooth;
}

@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;
    scroll-behavior: auto !important;
  }
}

/* Desktop dropdown menus (header component) */
[data-dropdown-panel] {
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
}

[data-dropdown-panel].is-open {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

[data-dropdown-chevron] {
  transition: transform 0.15s ease;
}

[data-dropdown-trigger][aria-expanded="true"] [data-dropdown-chevron] {
  transform: rotate(180deg);
}

/* Mobile accordion groups (header component) */
[data-mobile-group-chevron] {
  transition: transform 0.15s ease;
}

[data-mobile-group-trigger][aria-expanded="true"] [data-mobile-group-chevron] {
  transform: rotate(180deg);
}

/* Active-page indication, applied by assets/js/site.js */
[data-nav-link].is-active {
  color: var(--color-ink);
}

[data-dropdown-trigger].is-active {
  color: var(--color-ink);
}