/**
 * Consolidated Navigation overrides for Olivero sub-theme.
 * Handles both Desktop (> 1200px) and Mobile Floating Drawer (< 1200px).
 */

/* ==========================================================================
   1. DESKTOP NAVIGATION (> 75rem / 1200px)
   ========================================================================== */
@media (min-width: 75rem) {
  /* Reduce excessive spacing in desktop dropdown menus */
  body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
    padding-block: var(--sp1) !important;
    padding-inline: var(--sp1) !important;
  }

  /* Top-level link text size and span alignment */
  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-1,
  body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner--level-1 {
    font-size: 1.125rem !important;
  }

  /* Header container alignment: removes white space and nudges nav left/right */
  .site-header .container {
    max-width: 100% !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 100px !important;
  }

  .primary-nav {
    margin-inline-start: auto !important;
  }
}

/* ==========================================================================
   2. MOBILE NAVIGATION DRAWER (< 74.9375rem / 1199px)
   ========================================================================== */
@media (max-width: 74.9375rem) {
  /* --- 2.1 The Floating Drawer Container --- */
  .header-nav {
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    inset-block-start: var(--sp1) !important;

    /* Geometry */
    width: min(400px, 85vw) !important;
    height: calc(100dvh - (var(--sp1) * 2)) !important;
    margin-inline-end: var(--sp1);

    /* Animation: Hidden off-screen right */
    transform: translateX(calc(100% + var(--sp2))) !important;
    visibility: hidden;

    /* Visual Style */
    background-color: var(--color--white) !important;
    border-radius: var(--sp1);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    padding-block: var(--sp2) !important;
    padding-inline: var(--sp1-5) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.3s ease !important;
    z-index: 502;
  }

  .header-nav.is-active {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* Remove Olivero default top-spacing pseudo-element */
  .header-nav::before {
    display: none !important;
  }

  /* Backdrop blur and dimming */
  .header-nav-overlay {
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.3);
  }

  /* --- 2.2 Level 1 Menu Items & Links --- */
  .primary-nav__menu--level-1 {
    margin-block-start: var(--sp1) !important;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
  }

  .primary-nav__menu-item--level-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-block-end: 6px !important; /* Spacing between items */
  }

  .primary-nav__menu-link--level-1 {
    display: flex;
    align-items: center;
    min-block-size: 68px !important; /* Consolidated touch target height */
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #2b353b !important; /* Original dark gray contrast */
    padding-block: var(--sp0-5) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    text-decoration: none;
    flex-grow: 1;
  }

  .primary-nav__menu-link--level-1:hover,
  .primary-nav__menu-link--level-1.is-active {
    color: var(--color--primary-40) !important;
  }

  /* --- 2.3 Submenu (Level 2) & Toggles --- */
  .primary-nav__button-toggle {
    margin-inline-start: auto;
    background: transparent;
    border: none;
    width: 44px;
    height: 68px !important; /* Match link height */
  }

  .primary-nav__menu--level-2 {
    width: 100%;
    padding-inline-start: var(--sp1) !important;
    padding-block: 9px !important; /* Consolidated vertical padding */
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: var(--sp0-5);
    margin-block-start: 0 !important; /* Remove top margin when expanded */
  }

  /* --- 2.4 Structural Fixes --- */
  /* Ensure the burger button (X) stays clickable above the drawer */
  .mobile-buttons {
    z-index: 503;
    position: relative;
  }

  /* Prevent background scroll when menu is open */
  body.is-overlay-active {
    overflow: hidden;
  }
}