/**
 * Colocated component styles for the Stacked Flyout header (Path B exceptions).
 * Built into assets/css/ by scripts/build-fullpage-css.js; split to puffergo-tpl-header-components.css.
 *
 * @package PufferGo
 */
@layer components {
  /* Header skin tokens (set on <header> in templates; optional overrides from PHP/Preview). */
  .pgo-header-shell-dark {
    background-color: var(
      --puffergo-header-bg,
      var(--pgo-neutral-950, oklch(21% 0.034 264.665))
    );
    color: var(--puffergo-header-text, #f5f7ff);
  }

  /* Mobile: always split logo + drawer trigger. Desktop: layout tokens (preview/saved) control group vs split. */
  .pgo-header-nav {
    @apply mx-auto flex max-w-canvas items-center justify-between gap-0 px-6 py-5 lg:px-8;
  }
  @media (min-width: 1024px) {
    .pgo-header-nav {
      justify-content: var(--puffergo-header-nav-justify, space-between);
      gap: var(--puffergo-header-nav-gap, 0);
    }
  }

  .pgo-header-menu-desktop {
    @apply hidden lg:flex lg:items-center lg:gap-x-12;
  }

  .pgo-header-menu-trigger {
    @apply flex items-center gap-x-1 border-0 !bg-transparent text-sm/6 font-semibold;
    color: var(--puffergo-header-text, #fafafa) !important;
    @apply outline-none ring-0 ring-offset-0;
    @apply focus:outline-none focus:ring-0 focus:ring-offset-0;
    @apply focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0;
    @apply active:outline-none active:ring-0;
  }

  .pgo-header-menu-trigger::-moz-focus-inner {
    border: 0;
  }

  /* Right-anchored to the trigger: avoids clipping on the right when the nav is on the right */
  .pgo-header-dropdown-panel {
    @apply absolute left-auto right-0 top-full z-50 mt-3 w-screen max-w-md translate-x-0 rounded-3xl p-4 shadow-xl ring-1;
    background-color: var(--puffergo-header-bg, #0f172a);
    --tw-ring-color: color-mix(
      in srgb,
      var(--puffergo-header-text, #f5f7ff) 12%,
      transparent
    );
    border: 1px solid
      color-mix(in srgb, var(--puffergo-header-text, #f5f7ff) 12%, transparent);
    box-shadow: 0 20px 40px
      color-mix(in srgb, var(--puffergo-header-text, #0f172a) 18%, transparent);
  }

  .pgo-header-dropdown-list {
    @apply space-y-2;
  }

  /* Two-pane master column reuses the default-header dropdown-item markup, but
     the default variant's :hover rule lives in its own inline <style> and isn't
     loaded here. Re-add hover feedback on the dark panel so every left-column
     category (including flat links with no detail pane) highlights on hover. */
  .pgo-header-dropdown-panel .puffergo-default-header__dropdown-item {
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
  }
  .pgo-header-dropdown-panel .puffergo-default-header__dropdown-item:hover {
    background-color: color-mix(
      in srgb,
      var(--puffergo-header-text, #e2e8f0) 8%,
      var(--puffergo-header-bg, #0f172a)
    );
  }

  .pgo-header-submenu-item {
    @apply relative flex items-center gap-x-6 rounded-xl p-4 text-sm/6 no-underline transition-colors;
    color: var(--puffergo-header-text, #f5f7ff);
  }
  .pgo-header-submenu-item:hover {
    background-color: color-mix(
      in srgb,
      var(--puffergo-header-text, #e2e8f0) 8%,
      var(--puffergo-header-bg, #0f172a)
    );
  }

  .pgo-header-icon-tile {
    @apply flex size-11 flex-none items-center justify-center rounded-lg transition-colors;
    background-color: color-mix(
      in srgb,
      var(--puffergo-header-text, #e2e8f0) 8%,
      var(--puffergo-header-bg, #0f172a)
    );
    color: var(--puffergo-header-text, #f5f7ff);
  }

  .pgo-header-submenu-item:hover .pgo-header-icon-tile {
    background-color: var(--puffergo-header-bg, #0f172a);
    color: var(--puffergo-header-accent, #6366f1);
  }

  /* Non-clickable parent (URL is # or empty): full-width accordion button. */
  .pgo-header-mobile-parent {
    @apply flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base/7 font-semibold;
    color: var(--puffergo-header-text, #f5f7ff);
    border: 0;
    background: transparent;
    outline: none;
  }
  .pgo-header-mobile-parent:focus,
  .pgo-header-mobile-parent:focus-visible {
    outline: none;
  }
  .pgo-header-mobile-parent:hover {
    background-color: color-mix(
      in srgb,
      var(--puffergo-header-text, #e2e8f0) 8%,
      var(--puffergo-header-bg, #0f172a)
    );
  }

  /* Clickable parent: link + toggle split. */
  .pgo-header-mobile-parent-link {
    @apply flex-1 rounded-lg py-2 pl-3 text-base/7 font-semibold no-underline;
    color: var(--puffergo-header-text, #f5f7ff);
  }
  .pgo-header-mobile-parent-link:hover {
    background-color: color-mix(
      in srgb,
      var(--puffergo-header-text, #e2e8f0) 8%,
      var(--puffergo-header-bg, #0f172a)
    );
  }

  .pgo-header-mobile-parent-toggle {
    @apply flex items-center justify-center rounded-lg p-2;
    color: var(--puffergo-header-text, #f5f7ff);
    border: 0;
    background: transparent;
    outline: none;
  }
  .pgo-header-mobile-parent-toggle:focus,
  .pgo-header-mobile-parent-toggle:focus-visible {
    outline: none;
  }
  .pgo-header-mobile-parent-toggle:hover {
    background-color: color-mix(
      in srgb,
      var(--puffergo-header-text, #e2e8f0) 8%,
      var(--puffergo-header-bg, #0f172a)
    );
  }

  .pgo-header-mobile-children {
    @apply mt-3 space-y-2;
  }

  .pgo-header-mobile-child-link {
    @apply block rounded-lg py-2.5 pl-5 pr-3 text-sm/7 font-semibold;
    color: color-mix(
      in srgb,
      var(--puffergo-header-text, #e2e8f0) 90%,
      transparent
    );
  }
  .pgo-header-mobile-child-link:hover {
    background-color: color-mix(
      in srgb,
      var(--puffergo-header-text, #e2e8f0) 6%,
      var(--puffergo-header-bg, #0f172a)
    );
  }

  .pgo-header-mobile-icon-tile {
    @apply flex size-9 flex-none items-center justify-center rounded-md;
    background-color: color-mix(
      in srgb,
      var(--puffergo-header-text, #e2e8f0) 10%,
      var(--puffergo-header-bg, #0f172a)
    );
  }

  .pgo-header-desktop-link {
    @apply text-sm/6 font-semibold;
    color: var(--puffergo-header-text, #f5f7ff);
  }

  .pgo-header-desktop-link-current {
    @apply underline underline-offset-4;
  }

  .pgo-header-login-link {
    @apply text-sm/6 font-semibold text-neutral-100;
  }

  .pgo-header-mobile-link {
    @apply -mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold;
    color: var(--puffergo-header-text, #f5f7ff);
  }
  .pgo-header-mobile-link:hover {
    background-color: color-mix(
      in srgb,
      var(--puffergo-header-text, #e2e8f0) 6%,
      var(--puffergo-header-bg, #0f172a)
    );
  }

  .pgo-header-mobile-link-current {
    background-color: color-mix(
      in srgb,
      var(--puffergo-header-text, #e2e8f0) 12%,
      var(--puffergo-header-bg, #0f172a)
    );
  }
}