/**
 * Colocated component styles for the fullwidth-flyout header.
 * Built into assets/css/ by scripts/build-fullpage-css.js; split to puffergo-tpl-header-components.css.
 *
 * @package PufferGo
 */

@layer components {
  .pgo-header-flyout-root {
    background-color: var(--puffergo-header-bg, rgb(17 24 39));
    color: var(--puffergo-header-text, #f5f7ff);
  }

  .pgo-header-flyout-logo-fallback {
    display: inline-flex;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--puffergo-header-accent, #6366f1);
  }

  .pgo-header-flyout-logo-img {
    display: block;
    height: 2rem;
    width: auto;
    max-width: 12rem;
    object-fit: contain;
    object-position: left;
  }

  /* Dropdown row + icon tile — colors mirror stacked-flyout so both variants match. */
  .pgo-header-flyout-item {
    transition: background-color 150ms ease;
  }
  .pgo-header-flyout-item:hover {
    background-color: color-mix(
      in srgb,
      var(--puffergo-header-text, #f5f7ff) 8%,
      var(--puffergo-header-bg, #0f172a)
    );
  }
  .pgo-header-flyout-icon-tile {
    background-color: color-mix(
      in srgb,
      var(--puffergo-header-text, #f5f7ff) 8%,
      var(--puffergo-header-bg, #0f172a)
    );
    color: color-mix(
      in srgb,
      var(--puffergo-header-text, #f5f7ff) 70%,
      transparent
    );
    transition: background-color 150ms ease, color 150ms ease;
  }
  .pgo-header-flyout-item:hover .pgo-header-flyout-icon-tile {
    background-color: var(--puffergo-header-bg, #0f172a);
    color: var(--puffergo-header-accent, #6366f1);
  }
}