/* Global Variables
--------------------------------------------- */

:root {
  /* WordPress admin bar offsets */
  --wp-admin--admin-bar--position-offset: 32px; /* Desktop admin bar height */
  --wp-admin--admin-bar--position-offset-responsive: 46px; /* Mobile admin bar height */

  /* Navigation heights */
  --header-height-desktop: var(
    --wp-nav-height-desktop,
    65px
  ); /* Desktop header height */
  --header-height-mobile: var(
    --wp-nav-height-mobile,
    65px
  ); /* Mobile header height */
  --header-list-item-height-mobile: var(
    --wp-nav-list-item-height-mobile,
    65px
  ); /* Mobile menu item height */
}

/* Site Logo Styling
--------------------------------------------- */
.main-site-logo {
  flex: 1;
}

/* Navigation Layout Components
--------------------------------------------- */
.user-nav-wrapper {
  flex: 1;
}

.nav-wrapper {
  min-height: var(--header-height-desktop) !important;
  flex: 2;
}

/* Editor-specific styles */
.editor-styles-wrapper .editor-hidden {
  display: none !important;
}

/* Navigation Hover Effects
--------------------------------------------- */
.nav-hover .wp-block-navigation-item__content {
  transition: color 0.3s ease;
}

/* Desktop Navigation (1199px and above)
--------------------------------------------- */
@media only screen and (min-width: 1199px) {
  /* Main menu item sizing and spacing */
  .main-nav
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container
    > .wp-block-navigation-item,
  .wp-block-outermost-mega-menu__toggle {
    height: var(--header-height-desktop) !important;
    padding-left: var(--wp--preset--spacing--10);
    padding-right: var(--wp--preset--spacing--10);
  }

  /* Submenu styling and layout */
  .main-nav
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item
    ul {
    border-width: 0px 1px 1px 1px;
    border-color: var(--wp--preset--color--borderline);
    border-radius: 0px 0px 4px 4px;
    left: 0px;
    box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.2);
    gap: 3px;
  }

  /* Submenu width */
  .wp-block-navigation__submenu-container {
    width: 240px !important;
  }

  /* Navigation item vertical alignment */
  .main-nav .wp-block-navigation-item__content {
    height: var(--header-height-desktop);
    display: flex;
    align-items: center !important;
  }

  /* Submenu item spacing */
  .wp-block-navigation-submenu > ul > li > a {
    height: 100% !important;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  /* Menu item hover transitions */
  .main-nav .wp-block-navigation-item .wp-block-navigation-item__content {
    transition: background-color 0.2s;
    transition-timing-function: ease-in-out;
  }

  /* Menu item hover states */
  .main-nav .wp-block-navigation-item:hover,
  .wp-block-outermost-mega-menu__toggle:hover,
  .wp-block-outermost-mega-menu:hover .wp-block-outermost-mega-menu__toggle {
    background-color: var(--wp--preset--color--base-2);
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
  }

  /* Navigation buttons container */
  .main-nav .nav-buttons {
    width: 100% !important;
  }
}

/* Mobile Navigation (1198px and below)
--------------------------------------------- */
@media only screen and (max-width: 1198px) {
  /* Mobile header height */
  .header-container {
    height: 65px !important;
  }

  .wp-block-navigation__responsive-container {
    border-right: 1px solid var(--wp--preset--color--borderline);
  }

  /* Mobile menu padding */
  .is-menu-open.has-modal-open {
    padding: var(--wp--preset--spacing--20);
  }

  /* Content spacing */
  .wp-block-navigation__responsive-container-content {
    gap: var(--wp--preset--spacing--20);
  }

  /* Navigation container width and spacing */
  .is-menu-open.has-modal-open .wp-block-navigation__container {
    width: 100%;
    gap: 0px !important;
  }

  /* Page list width */
  .is-menu-open.has-modal-open .wp-block-page-list {
    width: 100%;
  }

  /* Submenu container styling */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .has-child
    .wp-block-navigation__submenu-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    margin: 0 0 20px 0;
    padding: 0 0 0 20px;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    border-left: 4px solid var(--wp--preset--color--accent);
  }

  /* Ensure submenu items don't overflow */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item {
    width: calc(100% - 16px); /* Account for the left padding and border */
  }

  /* Submenu item styling */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 20px 60px 20px 20px;
    border-radius: 0px;
    margin: 0;
    font-size: 16px;
    font-weight: 400 !important;
    letter-spacing: -0.022em;
    line-height: 1.3;
  }

  /* Submenu font size */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    font-size: 14px;
    padding: 12px 60px 12px 0px;
  }

  /* Submenu toggle icon positioning */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-icon {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: absolute;
    right: 0;
    height: 60px;
    width: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0;
    border-radius: 0px;
  }

  /* RTL submenu icon positioning */
  body.rtl
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-icon {
    left: 0;
    right: auto;
  }

  /* Submenu icon sizing and transition */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-icon
    svg {
    height: 16px;
    margin: 0;
    transition: transform 0.2s ease-in-out;
  }

  /* Flip submenu icon when expanded */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu.is-selected
    > .wp-block-navigation__submenu-icon
    svg,
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.has-child
    > .wp-block-navigation-submenu__toggle[aria-expanded='true']
    svg {
    transform: scaleY(-1);
  }

  /* Submenu visibility */
  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    display: none;
  }

  /* Expanded submenu display */
  .wp-block-navigation-submenu__toggle[aria-expanded='true']
    ~ .wp-block-navigation-submenu {
    display: flex;
  }

  /* Menu item container sizing */
  .is-menu-open.has-modal-open
    .wp-block-navigation__container
    li:not(.wp-social-link) {
    width: 100%;
    max-width: 100%;
    padding: 0 0;
    position: relative;
    border-bottom: 1px solid var(--wp--preset--color--borderline);
  }

  /* Remove border from last item */
  .is-menu-open.has-modal-open
    .wp-block-navigation__container
    li:last-child:not(.has-child) {
    border-bottom: none;
  }

  /* Submenu items shouldn't have borders */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item {
    border-bottom: none;
    background-color: var(--wp--preset--color--base-2);
  }

  /* Mobile menu link styling */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item__content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 20px 60px 20px 0px;
    border-radius: 0px;
    margin: 0;
    font-size: 16px;
    font-weight: inherit;
    letter-spacing: -0.022em;
    line-height: 1.3;
  }

  /* RTL mobile menu link padding */
  body.rtl
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item__content {
    padding: 15px 15px 15px 60px;
  }

  /* Active and hover states for menu items */
  .wp-block-navigation__container
    .current-menu-item
    > .wp-block-navigation-item__content,
  .wp-block-navigation__container
    .wp-block-navigation-item:hover
    > .wp-block-navigation-item__content {
    transition: 0.3s ease-in-out;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Close button styling */
  .wp-block-navigation__responsive-container-close {
    padding: 6px;
    border-radius: 100px;
    background: var(--wp--preset--color--base-2);
    color: var(--wp--preset--color--contrast);
  }

  .wp-block-navigation__responsive-container-close svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
  }

  .wp-block-navigation__responsive-container-close:hover svg {
    transform: rotate(90deg);
  }

  /********** Main Height Calculations **********/

  /* MAIN CONTAINER */

  /* Container height calculations */
  .wp-block-navigation__responsive-container {
    min-height: 100dvh;
    height: 100dvh;
    padding: var(--wp--preset--spacing--20);
  }

  body.admin-bar .wp-block-navigation__responsive-container {
    height: calc(
      100dvh - var(--wp-admin--admin-bar--position-offset)
    ) !important;
  }

  /* Mobile admin bar adjustment */
  @media screen and (max-width: 782px) {
    body.admin-bar .wp-block-navigation__responsive-container {
      height: calc(
        100dvh - var(--wp-admin--admin-bar--position-offset-responsive)
      ) !important;
    }
  }

  /* Responsive Close Height - critical this is correct */

  .wp-block-navigation__responsive-close {
    height: 100%;
  }

  body.admin-bar .wp-block-navigation__responsive-close {
    height: calc(100% - var(--wp-admin--admin-bar--position-offset)) !important;
  }

  @media screen and (max-width: 782px) {
    body.admin-bar .wp-block-navigation__responsive-close {
      height: calc(
        100% - var(--wp-admin--admin-bar--position-offset-responsive)
      ) !important;
    }
  }

  /* Open menu container layout */
  .wp-block-navigation__responsive-container.is-menu-open {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Dialog height and layout */
  .wp-block-navigation__responsive-dialog {
    height: 100% !important;
    display: flex;
    flex-direction: column;
  }

  /* Content container layout */
  .wp-block-navigation__responsive-container-content {
    display: flex;
    flex-direction: column;
    flex: 1 !important;
    overflow-y: auto;
    padding-bottom: var(--wp--preset--spacing--20);
  }

  .wp-block-navigation__responsive-container-content .wp-block-site-logo {
    margin-bottom: 20px;
  }

  /* Navigation menu scroll handling */
  .wp-block-navigation__container {
    flex: 1;
    overflow-y: auto;
  }

  /* Button container layout */
  .wp-block-buttons.nav-buttons {
    width: 100%;
    margin-top: auto;
    margin-bottom: 20px;
    padding-bottom: var(--wp--preset--spacing--20);
    display: flex;
    flex-direction: row;
    gap: var(--wp--preset--spacing--10);
    flex-shrink: 0;
    background: var(--wp--preset--color--base);
    position: sticky;
    z-index: 200;
  }

  /* Single button width */
  .wp-block-buttons.nav-buttons .wp-block-button:only-child {
    flex: 1 1 100%;
  }

  /* Multiple buttons width distribution */
  .wp-block-buttons.nav-buttons .wp-block-button:not(:only-child) {
    flex: 1 1 0;
  }

  /* Button link layout */
  .wp-block-buttons.nav-buttons .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }
}

/* Desktop container width constraint */
@media only screen and (min-width: 768px) {
  .wp-block-navigation__responsive-container {
    width: 325px;
    left: 0;
    right: auto;
  }
}

/* Content container layout */
.wp-block-navigation__responsive-container-content {
  padding-top: 0px !important;
}

@media only screen and (max-width: 768px) {
  .wp-block-navigation__responsive-container {
    border-right: none !important;
  }
}

/* Menu Toggle Button Animations */
.wp-block-navigation__responsive-container-open svg {
  transition: transform 0.3s ease;
}

.wp-block-navigation__responsive-container-open svg rect {
  transition: transform 0.3s ease;
  transform-origin: center;
}

.wp-block-navigation__responsive-container-open:hover svg rect:first-child {
  transform: translateY(1px);
}

.wp-block-navigation__responsive-container-open:hover svg rect:last-child {
  transform: translateY(-1px);
}

/* Close button styling */

/* Submenu toggle within submenu */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__submenu-container
  .wp-block-navigation__submenu-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Override WordPress modal animation */
.wp-block-navigation__responsive-container.hidden-by-default.has-modal-open {
  animation: overlayIn 0.2s ease-in-out forwards !important;
}

@keyframes overlayIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}