/**
 * Component — Navigation
 *
 * Primary site navigation. Self-contained. Includes :focus-visible states
 * for all interactive elements (added during Stage 6 audit).
 *
 * @package    Recipes_Lola
 * @version    1.0.0
 */

.rl-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--rl-z-header);
  block-size: var(--rl-header-height);
  background-color: var(--rl-header-bg);
  border-block-end: var(--rl-border-width) solid var(--rl-header-border);
  box-shadow: var(--rl-header-shadow);
}

.rl-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: 100%;
  gap: var(--rl-space-6);
}

.rl-site-branding__link { display: inline-flex; align-items: center; text-decoration: none; }
.rl-site-branding__logo { block-size: var(--rl-space-8); inline-size: auto; }
.rl-site-branding__name { font-family: var(--rl-font-display); font-size: var(--rl-text-lg); font-weight: var(--rl-weight-regular); color: var(--rl-color-foreground); letter-spacing: var(--rl-tracking-tight); }

.rl-nav { display: none; }
@media (min-width: 1024px) { .rl-nav { display: flex; align-items: center; gap: var(--rl-space-8); } }

.rl-nav__list { display: flex; align-items: center; gap: var(--rl-space-8); }

.rl-nav__link {
  font-size: var(--rl-text-sm);
  font-weight: var(--rl-weight-medium);
  color: var(--rl-header-link-color);
  text-decoration: none;
  padding-block: var(--rl-space-2);
  border-block-end: var(--rl-border-width-2) solid var(--rl-color-transparent);
  transition: color var(--rl-transition-fast), border-color var(--rl-transition-fast);
}

.rl-nav__link:hover { color: var(--rl-header-link-hover); }

.rl-nav__link:focus-visible {
  outline: var(--rl-focus-outline-width) solid var(--rl-focus-outline-color);
  outline-offset: var(--rl-focus-outline-offset);
  border-radius: var(--rl-focus-border-radius);
}

.rl-nav__link[aria-current="page"] { color: var(--rl-header-link-active); border-block-end-color: var(--rl-color-primary); }

.rl-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--rl-space-10);
  block-size: var(--rl-space-10);
  border-radius: var(--rl-radius-md);
  color: var(--rl-color-foreground);
  transition: background-color var(--rl-transition-fast);
}

.rl-nav-toggle:hover { background-color: var(--rl-color-surface-raised); }

.rl-nav-toggle:focus-visible {
  outline: var(--rl-focus-outline-width) solid var(--rl-focus-outline-color);
  outline-offset: var(--rl-focus-outline-offset);
}

@media (min-width: 1024px) { .rl-nav-toggle { display: none; } }

.rl-nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--rl-z-overlay);
  background-color: var(--rl-color-surface);
  transform: translateX(100%);
  transition: transform var(--rl-transition-slow);
}

.rl-nav-drawer.is-open { transform: translateX(0); }

@media (min-width: 1024px) { .rl-nav-drawer { display: none; } }

.rl-nav-drawer__inner { display: flex; flex-direction: column; padding: var(--rl-space-6); gap: var(--rl-space-1); }

.rl-nav-drawer__link {
  font-family: var(--rl-font-display);
  font-size: var(--rl-text-xl);
  color: var(--rl-color-foreground);
  text-decoration: none;
  padding-block: var(--rl-space-3);
  border-block-end: var(--rl-border-width) solid var(--rl-color-border);
}

.rl-nav-drawer__link:focus-visible {
  outline: var(--rl-focus-outline-width) solid var(--rl-focus-outline-color);
  outline-offset: calc(var(--rl-focus-outline-offset) * -1);
  border-radius: var(--rl-focus-border-radius);
}

.rl-nav-drawer__close {
  align-self: flex-end;
  inline-size: var(--rl-space-10);
  block-size: var(--rl-space-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rl-radius-md);
  color: var(--rl-color-foreground);
}

.rl-nav-drawer__close:hover { background-color: var(--rl-color-surface-raised); }

.rl-nav-drawer__close:focus-visible {
  outline: var(--rl-focus-outline-width) solid var(--rl-focus-outline-color);
  outline-offset: var(--rl-focus-outline-offset);
}