/**
 * Organism: Site Header
 * Global site header with navigation, mega menu, mobile navigation, and search
 *
 * Extends: atoms.css nav-header pattern, global.css tokens
 * Uses: .nav-header, .nav-brand, .nav-link, .nav-mobile-toggle, .btn-icon, .form-input
 */

/* @critical-start context: base */

/* ==========================================================================
   CSS Variables
   ========================================================================== */

   .site-header {
    --nav-height: 3.5rem;
    --nav-height-scrolled: 3rem;
    --mega-menu-max-width: 900px;
    --mobile-menu-width: 320px;
    --hover-delay: 150ms;
    --z-header: 100;
    --z-mega-menu: 101;
    --z-search-overlay: 150;
    --z-mobile-overlay: 200;
    --z-mobile-panel: 201;
  }
  
  /* ==========================================================================
     Header Container
     Extends .nav-header from atoms.css
     ========================================================================== */
  
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    min-height: var(--nav-height);
    background: var(--color-overlay-white-90);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-bottom: 1px solid var(--color-neutral-100);
    transition: height var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-default);
  }

  .site-header.is-scrolled {
    min-height: var(--nav-height-scrolled);
    box-shadow: var(--shadow-md);
  }

  .site-header.header-hidden {
    transform: translateY(-100%);
  }
  
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    height: 100%;
    padding: var(--spacing-2) 0;
  }
  
  /* ==========================================================================
     Site Branding
     Uses .nav-brand pattern from atoms.css
     ========================================================================== */
  
  .site-branding {
    flex-shrink: 0;
  }
  
  .site-title {
    font-family: var(--font-logo);
    font-size: var(--logo-font-size);
    font-weight: var(--font-weight-bold);
    color: var(--logo-color);
    line-height: var(--logo-line-height);
    text-decoration: none;
    transition: color var(--transition-fast);
    display: block;
  }

  .site-title:hover {
    color: var(--logo-color-hover);
  }

  /* Tagline (site description) */
  .site-branding span {
    display: var(--tagline-display);
    margin-top: var(--tagline-margin-top);
    font-size: var(--tagline-font-size);
    color: var(--tagline-color);
    letter-spacing: var(--tagline-letter-spacing);
	text-align: center;
  }

  /* Logo image (alternative to text site-title) */
  .site-logo {
    display: block;
    max-height: var(--nav-height);
    width: auto;
    transition: opacity var(--transition-fast);
  }

  .site-logo:hover {
    opacity: 0.8;
  }

  .site-header.is-scrolled .site-logo {
    height: 24px;
  }
  
  /* ==========================================================================
     Primary Navigation
     Uses .nav-links, .nav-link patterns from atoms.css
     ========================================================================== */
  
  .main-navigation {
    display: none;
    flex: 1;
    justify-content: center;
  }
  
  .primary-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .primary-menu > .menu-item {
    position: relative;
  }

  /*
   * Keep hover continuity between trigger and dropdown.
   * This bridge prevents brief mouse-gap exits from collapsing the mega menu.
   */
  .primary-menu > .menu-item.menu-item-has-mega-menu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(var(--spacing-4) * -1);
    right: calc(var(--spacing-4) * -1);
    height: var(--spacing-3);
  }
  
  /* Reuse .nav-link styles from atoms.css */
  .primary-menu .nav-link {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-600);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
  }
  
  .primary-menu .nav-link:hover,
  .primary-menu .nav-link:focus {
    color: var(--color-brand-600);
    background: var(--color-brand-50);
  }
  
  .primary-menu .nav-link:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
  }
  
  /* @critical-end */

  /* ==========================================================================
     Mega Menu
     ========================================================================== */

  .mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: var(--mega-menu-max-width);
    margin-top: var(--spacing-2);
    padding: var(--spacing-6);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: var(--z-mega-menu);
  }
  
  /* Show mega menu on hover with delay */
  .menu-item-has-mega-menu:hover .mega-menu,
  .menu-item-has-mega-menu:focus-within .mega-menu,
  .menu-item-has-mega-menu.is-mega-open .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: var(--hover-delay);
  }
  
  /* Mega menu inner grid */
  .mega-menu__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);
  }
  
  /* Mega menu columns */
  .mega-menu__column {
    min-width: 0;
  }
  
  .mega-menu__column--primary .mega-menu__list a {
    font-weight: var(--font-weight-semibold);
  }
  
  .mega-menu__column--actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    padding-left: var(--spacing-4);
    border-left: 1px solid var(--color-neutral-100);
  }
  
  /* Mega menu heading */
  .mega-menu__heading {
    margin: 0 0 var(--spacing-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  /* Mega menu list */
  .mega-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .mega-menu__list li {
    margin: 0;
  }
  
  .mega-menu__list a {
    display: block;
    padding: var(--spacing-2) 0;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-700);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  
  .mega-menu__list a:hover,
  .mega-menu__list a:focus {
    color: var(--color-brand-600);
  }
  
  .mega-menu__list a:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  
  /* Recipe count badge */
  .mega-menu__count {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-neutral-400);
    margin-left: var(--spacing-1);
  }
  
  /* Mega menu button */
  .mega-menu__btn {
    width: 100%;
    text-align: center;
  }
  
  /* Mega menu search */
  .mega-menu__search {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }
  
  .mega-menu__search-input {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
  }
  
  .mega-menu__search-input::placeholder {
    color: var(--color-neutral-400);
  }
  
  .mega-menu__search-input:focus {
    outline: none;
    border-color: var(--color-brand-500);
    box-shadow: 0 0 0 3px var(--color-ring-subtle);
  }
  
  .mega-menu__search-btn {
    width: 100%;
  }
  
  /* @critical-start context: base */

  /* ==========================================================================
     Header Actions
     ========================================================================== */

  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    flex-shrink: 0;
  }
  
  .header-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-touch-target);
    height: var(--size-touch-target);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    color: var(--color-neutral-600);
    text-decoration: none;
    transition: all var(--transition-fast);
  }
  
  .header-action-btn:hover {
    color: var(--color-brand-600);
    background: var(--color-brand-50);
  }
  
  .header-action-btn:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
  }

  .header-action-btn svg,
  .header-action-btn .icon {
    width: var(--size-icon);
    height: var(--size-icon);
    flex-shrink: 0;
  }

  /* Favorites link */
  .favorites-link {
    position: relative;
  }
  
  .favorites-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    line-height: 18px;
    text-align: center;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--radius-full);
  }
  
  .favorites-count[hidden] {
    display: none;
  }
  
  /* ==========================================================================
     Social Icons
     ========================================================================== */
  
  .social-icons {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
  }
  
  .social-icons--header {
    display: none;
    margin-left: var(--spacing-2);
    padding-left: var(--spacing-2);
    border-left: 1px solid var(--color-neutral-200);
  }
  
  .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    color: var(--color-neutral-500);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
  }
  
  .social-icon:hover {
    color: var(--color-brand-600);
    background: var(--color-brand-50);
  }
  
  .social-icon:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
  }
  
  .social-icon .icon {
    display: block;
  }
  
  /* Mobile social icons */
  .social-icons--mobile {
    justify-content: center;
    gap: var(--spacing-3);
  }
  
  .social-icons--mobile .social-icon {
    width: var(--size-touch-target);
    height: var(--size-touch-target);
  }
  
  /* ==========================================================================
     Mobile Menu Toggle
     Uses .nav-mobile-toggle pattern from atoms.css
     ========================================================================== */
  
  .mobile-menu-toggle {
    display: flex;
    width: var(--size-touch-target);
    height: var(--size-touch-target);
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
  }
  
  .mobile-menu-toggle:hover {
    background: var(--color-brand-50);
  }
  
  .mobile-menu-toggle:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
  }
  
  /* Hamburger icon */
  .hamburger-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: var(--size-burger-bar-width);
    height: 18px;
  }
  
  .hamburger-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--size-burger-bar-height);
    background: var(--color-neutral-700);
    border-radius: 1px;
    transition: all var(--transition-fast);
  }
  
  .hamburger-icon span:nth-child(1) {
    top: 0;
  }
  
  .hamburger-icon span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }
  
  .hamburger-icon span:nth-child(3) {
    bottom: 0;
  }
  
  /* Hamburger to X animation */
  .mobile-menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  
  .mobile-menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
  }
  
  /* ==========================================================================
     Search Toggle & Overlay
     Uses .btn-icon pattern from atoms.css
     ========================================================================== */
  
  .search-overlay {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    z-index: var(--z-search-overlay);
    padding: var(--spacing-4) 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-md);
  }
  
  .search-overlay[hidden] {
    display: none;
  }
  
  .search-form {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: var(--spacing-2);
  }
  
  /* Reuse .form-input from atoms.css */
  .search-field {
    flex: 1;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    color: var(--color-neutral-900);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
  }
  
  .search-field::placeholder {
    color: var(--color-neutral-400);
  }
  
  .search-field:focus {
    outline: none;
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px var(--color-ring-subtle);
  }
  
  /* Reuse .btn-primary from atoms.css */
  .search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--gradient-brand);
    color: var(--color-primary-foreground);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-glow-sm);
  }
  
  .search-submit svg,
  .search-submit .icon {
    display: block;
    width: var(--size-icon);
    height: var(--size-icon);
    flex-shrink: 0;
  }

.search-submit:hover {
    background: var(--color-brand-700);
    box-shadow: var(--shadow-glow);
  }
  
  .search-submit:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
  }
  
  /* ==========================================================================
     Skip Link
     ========================================================================== */
  
  .skip-link {
    position: absolute;
    top: -100%;
    left: var(--spacing-4);
    z-index: 999;
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    background: var(--color-brand-600);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: top var(--transition-fast);
  }
  
  .skip-link:focus {
    top: var(--spacing-4);
  }
  
  /* ==========================================================================
     Screen Reader Only
     ========================================================================== */
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  /* ==========================================================================
     Body scroll lock when mobile menu is open
     ========================================================================== */
  
  body.mobile-menu-open {
    overflow: hidden;
  }
  
  /* ==========================================================================
     Tablet Breakpoint
     ========================================================================== */

  @media (min-width: 768px) {
    .site-title {
      font-size: var(--logo-font-size-md);
    }
  }

  /* ==========================================================================
     Desktop Breakpoint
     ========================================================================== */

  @media (min-width: 1024px) {
    .main-navigation {
      display: flex;
    }

    .mobile-menu-toggle {
      display: none;
    }

    .site-title {
      font-size: var(--logo-font-size-lg);
    }

    /* Show social icons on larger screens */
    .social-icons--header {
      display: flex;
    }
  }

  /* @critical-end */

  /* ==========================================================================
     Large Desktop - Wider mega menu
     ========================================================================== */
  
  /* @media (min-width: 1024px) {
    .site-header {
      --mega-menu-max-width: 1000px;
    }
  } */
  
  /* ==========================================================================
     Dropdown Menu (Standard Sub-menus)
     ========================================================================== */
  
  .primary-menu .menu-item-has-children {
    position: relative;
  }
  
  .primary-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-2);
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-fast);
    z-index: var(--z-mega-menu);
  }
  
  .primary-menu .menu-item-has-children:hover > .sub-menu,
  .primary-menu .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .primary-menu .sub-menu .nav-link {
    display: block;
    width: 100%;
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-700);
    border-radius: var(--radius-md);
  }
  
  .primary-menu .sub-menu .nav-link:hover {
    background: var(--color-brand-50);
    color: var(--color-brand-600);
  }
  
  /* Sub-menu indicator arrow */
  .primary-menu .menu-item-has-children > .nav-link::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: var(--spacing-2);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition-fast);
  }
  
  .primary-menu .menu-item-has-children:hover > .nav-link::after {
    transform: translateY(1px) rotate(45deg);
  }

/* ==========================================================================
   Header Configurator: Row Structure
   ========================================================================== */

.site-header__above,
.site-header__sub {
  display: none;
}

.site-header__above {
  border-bottom: 1px solid var(--color-neutral-100);
  font-size: var(--font-size-xs);
}

.site-header__sub {
  border-top: 1px solid var(--color-neutral-100);
}

.site-header__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-2) 0;
}

/* ==========================================================================
   Header Configurator: Zone Structure
   ========================================================================== */

.header-zone {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.header-zone--left {
  justify-content: flex-start;
}

.header-zone--center {
  justify-content: center;
}

/* Above Header: center logo block and tagline when logo is placed in middle zone */
.site-header__above .header-zone--row-above_header.header-zone--center.header-zone--has-logo .site-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.site-header__above .header-zone--row-above_header.header-zone--center.header-zone--has-logo .site-branding .custom-logo-link {
  display: inline-flex;
  justify-content: center;
}

.site-header__above .header-zone--row-above_header.header-zone--center.header-zone--has-logo .site-branding span {
  width: 100%;
  text-align: center;
}

@media (min-width: 1024px) {
  .header-zone--center {
    flex: 1;
  }
}

.header-zone--right {
  justify-content: flex-end;
  margin-left: auto;
}

.header-zone--empty {
  display: none;
}

/* ==========================================================================
   Header Configurator: Preset Modifiers
   ========================================================================== */

/* Classic — default, no changes needed */

/* Logo Centered — larger logo in center row */
.header-logo-centered .site-header__main .header-zone--center {
  flex: none;
}

.header-logo-centered .site-header__main .site-branding {
  text-align: center;
}

.header-logo-centered .site-header__main .site-logo {
  max-height: calc(var(--nav-height) * 1.5);
}

.header-logo-centered .site-header__main .site-title {
  font-size: var(--logo-font-size-lg);
}

/* Logo Top — logo row without nav */
.header-logo-top .site-header__main .site-branding {
  text-align: center;
}

/* Compact — nav and actions together */
.header-compact .header-zone--center {
  display: none;
}

.header-compact .header-zone--right {
  flex: 1;
  justify-content: flex-end;
  gap: var(--spacing-3);
}

.header-compact .site-header__row {
  padding: var(--spacing-1) 0;
}

.header-compact .site-branding span {
  display: none;
}

.header-compact .primary-menu .nav-link {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
}

.header-compact .header-action-btn {
  width: calc(var(--size-touch-target) - 6px);
  height: calc(var(--size-touch-target) - 6px);
}

.header-compact .header-cta-btn,
.header-compact .social-icons--header {
  display: none;
}

/* Magazine — large logo, full-width sub-nav */
.header-magazine .site-header__main .site-branding {
  text-align: center;
}

.header-magazine .site-header__main .site-logo {
  max-height: calc(var(--nav-height) * 2);
}

.header-magazine .site-header__main .site-title {
  font-size: var(--logo-font-size-lg);
}

.header-magazine .site-header__sub .main-navigation {
  flex: 1;
  justify-content: center;
}

/* ==========================================================================
   Header Configurator: CTA Button (in header zones)
   ========================================================================== */

.header-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-primary-foreground);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
  box-shadow: var(--shadow-glow-sm);
}

.site-header__above .header-cta-btn {
  padding: 0.125rem var(--spacing-2);
  font-size: var(--font-size-2xs);
  line-height: 1.15;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.header-cta-btn:hover {
  background: var(--color-brand-700);
  box-shadow: var(--shadow-glow);
  color: var(--color-white);
}

.header-cta-btn:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}

/* ==========================================================================
   Header Configurator: Custom Text
   ========================================================================== */

.header-custom-text {
  font-size: var(--font-size-xs);
  color: var(--color-neutral-600);
}

/* ==========================================================================
   Header Configurator: Responsive — Above/Sub hidden on mobile
   ========================================================================== */

@media (max-width: 1023px) {
  .site-header .bap-hide-mobile {
    display: none;
  }
}

@media (min-width: 1024px) {
  .site-header .bap-hide-desktop {
    display: none;
  }

  .site-header__above,
  .site-header__sub {
    display: block;
  }
}

/* Desktop: keep center zone truly centered in Above Header (independent of left/right widths) */
@media (min-width: 1024px) {
  .site-header__above .site-header__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .site-header__above .header-zone--left {
    justify-self: start;
  }

  .site-header__above .header-zone--center {
    justify-self: center;
    flex: none;
  }

  .site-header__above .header-zone--right {
    justify-self: end;
    margin-left: 0;
  }

  .site-header__above .header-zone--empty {
    display: flex;
  }
}