/* ==========================================================
   BLR Block Theme — Navigation & Header Styles
   ==========================================================
   This CSS supplements theme.json — it handles things
   that theme.json cannot: sticky positioning, backdrop blur,
   hover pill effects, scroll shadows, and mobile animations.
   ========================================================== */

/* ===== STICKY HEADER =====
   The header sticks to the top on scroll. IMPORTANT: background and
   backdrop-filter are intentionally on ::before, NOT on .site-header.

   WHY? backdrop-filter on a parent creates a CSS "containing block"
   (per spec). This causes any position:fixed child — like WordPress's
   mobile overlay — to be positioned relative to the header (64px tall)
   instead of the viewport. The overlay would render inside the header
   bar instead of covering the full screen.

   By moving backdrop-filter to a ::before pseudo-element, the header
   no longer creates a containing block, and the overlay's position:fixed
   correctly refers to the viewport. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 1rem;
  /* No background or backdrop-filter here — see ::before below */
}

/* Pseudo-element carries the visual background + frosted-glass blur.
   Since backdrop-filter is on ::before (a replaced element with no
   fixed-position descendants), it does NOT trap the overlay. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;                                /* Behind header content */
  background: rgba(11, 18, 32, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: box-shadow 0.3s ease, background 0.3s ease;
  pointer-events: none;                       /* Click-through to header */
}

/* Scrolled state — applied to ::before so the effect stays on the
   pseudo-element and doesn't re-introduce the containing block. */
.site-header.is-scrolled::before {
  background: rgba(11, 18, 32, 0.98);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* Prevent ancestor containers from clipping the fixed-position overlay.
   WordPress constrained layouts can add overflow:hidden to wrappers. */
.site-header,
.site-header > *,
.site-header__inner {
  overflow: visible !important;
}

/* Inner flex row — sets the header height to 64px */
.site-header__inner {
  height: 64px;
}

/* ===== BRAND (Logo + Title) =====
   The logo and site title sit side by side with a 10px gap. */
.site-header__brand {
  gap: 10px !important; /* Override WP block gap */
}

/* Force the uploaded logo image to 34px height, auto width.
   This targets both the direct img and WP's nested structure. */
.site-header__logo img,
.site-header__logo .wp-block-site-logo img {
  width: auto !important;
  height: 34px !important;
  object-fit: contain;
}

/* Prevent the site title from wrapping to a second line */
.site-header__title {
  white-space: nowrap;
}

/* Remove the underline from the site title link */
.site-header__title a {
  text-decoration: none !important;
}

/* ===== DESKTOP NAVIGATION LINKS =====
   These styles apply to each nav link on desktop (horizontal layout). */

/* Small gap between nav items */
.site-header__nav .wp-block-navigation__container {
  gap: 4px;
}

/* Each nav link gets a pill-shaped hover area.
   Transparent border by default — becomes visible on hover.
   This creates a subtle "pill" highlight effect. */
.site-header__nav .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hover and keyboard-focus state — light border + tinted background */
.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item__content:focus-visible {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

/* Active/current page link turns accent blue */
.site-header__nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--accent);
}

/* ===== MOBILE OVERLAY MENU =====
   WordPress core/navigation with overlayMenu:"mobile" renders a
   responsive container that toggles the .is-menu-open class.
   Core CSS already sets position:fixed, but we reinforce it here
   to guarantee full-viewport coverage regardless of stacking context. */

/* Full-screen overlay — explicit viewport coverage */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;   /* Dynamic viewport — accounts for mobile browser chrome */
  z-index: 999999 !important;  /* Above everything, including the sticky header */
  display: flex !important;
  flex-direction: column;
  animation: blr-overlay-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Ensure the overlay content area is scrollable for long menus */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keyframes: fade in + slide down from above */
@keyframes blr-overlay-in {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Closing animation — triggered by JS adding .is-menu-closing */
.wp-block-navigation__responsive-container.is-menu-closing {
  animation: blr-overlay-out 0.2s ease-in forwards;
}

@keyframes blr-overlay-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* Hamburger toggle button (☰) — styled as a rounded bordered button */
.wp-block-navigation__responsive-container-open {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  transition: background 0.2s ease;
}

.wp-block-navigation__responsive-container-open:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Close button (✕) inside the mobile overlay — matches hamburger style */
.wp-block-navigation__responsive-container-close {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 8px !important;
}

/* Mobile menu content area — padded, with spacing between links */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding: 2rem 1.5rem;
  gap: 4px;
}

/* Mobile nav links — larger tap targets (min 44px per WCAG 2.5.8)
   with full-width pill shape and hover highlight */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  padding: 14px 18px;
  min-height: 44px;
  font-size: 1.1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  width: 100%;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ===== SCROLL LOCK =====
   When the overlay is open, JS adds .blr-no-scroll to <body>
   to prevent background content from scrolling underneath. */
body.blr-no-scroll {
  overflow: hidden !important;
  /* Fixed position prevents iOS Safari from allowing scroll
     through overflow:hidden. The scroll position is preserved
     via JS (top offset set as inline style). */
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/* ===== FOCUS-VISIBLE RING =====
   Shows a blue outline ring only when navigating with keyboard.
   Mouse/touch clicks don't show the ring (better UX). */
.site-header :focus-visible,
.wp-block-navigation__responsive-container.is-menu-open :focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.site-header a:focus:not(:focus-visible),
.site-header button:focus:not(:focus-visible) {
  outline: none;
}

/* ===== FOOTER =====
   Subtle top border to separate footer from content */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Remove underline from footer brand link */
.site-footer__brand a {
  text-decoration: none !important;
}