/**
 * @file
 * Venneker Header Component Styles
 *
 * Handles admin toolbar integration and header positioning.
 */

/**
 * Admin toolbar offset support
 *
 * When logged in as admin, Drupal's admin toolbar sets CSS variables:
 * - --drupal-displace-offset-top: Total vertical displacement
 * - --gin-toolbar-y-offset: Gin theme vertical offset (if Gin is used)
 * - --gin-toolbar-x-offset: Gin theme horizontal offset (if Gin sidebar is open)
 *
 * We use these to ensure the fixed header appears below the toolbar.
 */

/* Base header positioning - respects admin toolbar */
.venneker-header--fixed {
  /* When fixed (scrolled), use Drupal's displacement offset */
  /* When absolute (initial), positioning is handled by Tailwind classes */
}

.venneker-header--fixed.fixed {
  /* Use Drupal's displacement offset, with Gin theme fallback */
  top: var(--drupal-displace-offset-top, var(--gin-toolbar-y-offset, 0px));
  left: var(--gin-toolbar-x-offset, 0px);
}

/* Ensure smooth transition when toolbar state changes */
.venneker-header--fixed,
.venneker-header--absolute {
  transition: top 0.2s ease, left 0.2s ease;
}

/* Mobile admin toolbar adjustments */
@media (max-width: 975px) {
  /* On mobile, Drupal's toolbar collapses differently */
  .venneker-header--fixed {
    top: var(--drupal-displace-offset-top, 0px);
    left: 0;
  }
}

/**
 * Navigation link refinements
 *
 * These styles supplement the Tailwind utilities on nav links.
 */
.vfl-nav-link {
  /* Smooth color transitions */
  transition: color 0.15s ease-in-out;
  /* Prevent text from wrapping */
  white-space: nowrap;
}

/* Active state indicator - subtle underline effect */
.vfl-nav-link[aria-current="page"],
.vfl-nav-link.is-active {
  position: relative;
}

.vfl-nav-link[aria-current="page"]::after,
.vfl-nav-link.is-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: currentColor;
  opacity: 0.6;
  /* ds-exception: Hairline indicator rounding */
  border-radius: 1px;
}

/* Focus visible state for accessibility */
.vfl-nav-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  /* ds-exception: Hairline indicator rounding */
  border-radius: 2px;
}

/**
 * Tesla Curtain: Logo fill animation
 *
 * Smoothly transitions the ENNEKER text from white → dark
 * when the mega menu curtain drops. The V, squares, and
 * "Wirbeugen Vieh / Gruppe" text stay their brand colors.
 */
.venneker-header-logo .venneker-logo-text {
  transition: fill 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.venneker-header-logo[data-mega-open="true"] .venneker-logo-text {
  fill: #080b0c !important;
}