/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  --top-bar-height: 32px;
  --nav-border-size: 3px;
  --main-nav-bar-height: 57px;

  @media (min-width: 768px) {
    --main-nav-bar-height: 62px;
  }

  @media (min-width: 1024px) {
    --main-nav-bar-height: 70px;
  }
}

.admin-bar {
  --admin-bar-height: 46px;

  @media (min-width: 782px) {
    --admin-bar-height: 32px;
  }
}


/* ==========================================================================
   Top Navigation Bar
   ========================================================================== */

.site-header .top-nav-bar-inner {
  position: relative;
  height: var(--top-bar-height);
  justify-content: center;

  @media (min-width: 768px) {
    justify-content: flex-end;
  }
}

.site-header .top-nav-bar-inner nav ul {
  gap: 0.75rem;
}

.site-header .top-nav-bar-inner nav ul>li {
  height: var(--top-bar-height);
  border-bottom: var(--nav-border-size) solid transparent;
  font-size: clamp(0.75rem, 0.4366rem + 0.6849vw, 0.875rem);
}

.site-header .top-nav-bar-inner nav ul>li.is-current-site {
  border-bottom-color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent);
}


/* ==========================================================================
   Main Navigation Bar
   ========================================================================== */

.site-header .main-nav-bar {
  border-bottom: var(--nav-border-size) solid var(--wp--preset--color--border-light);
  display: flex;
  align-items: center;
  height: var(--main-nav-bar-height);
  position: relative;

  @media (min-width: 768px) {
    position: static;
  }
}

.site-header .main-nav-bar-inner {
  flex: 1;

  & nav ul>li {
    font-size: 1.125rem !important;
  }

  & nav ul>li>ul>li {
    font-size: 1rem !important;
  }

  @media (min-width: 1024px) {
    & nav ul>li>ul>li {
      font-size: 1.125rem !important;
    }
  }
}

.site-header .main-nav-bar-menus {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-direction: row-reverse;

  @media (min-width: 1280px) {
    flex-direction: row;
  }
}

.site-header .main-nav-bar-right {
  justify-content: flex-end;
  position: relative;
  z-index: 10;

  @media (min-width: 1280px) {
    flex: 1;
    justify-content: space-between;
  }
}

/* ==========================================================================
   CTA Button — visibility control
   ========================================================================== */

/* Hidden on mobile in the header bar; visible from 768px up */
.site-header .header-cta {
  & nav ul>li {
    text-align: center;
  }

  @media (max-width: 767px) {
    display: none;
  }
}

/* ==========================================================================
   Site Menu
   ========================================================================== */

.site-header .site-menu {
  flex-wrap: nowrap;

  & .wp-block-navigation-item {
    white-space: nowrap;
  }
}

/* CTA inside site menu: hidden by default, shown only on small screens */
.site-header .site-menu .header-cta {
  display: none;

  @media (max-width: 767px) {
    align-items: center;
    display: flex;
    flex-direction: column;
  }
}

.site-header .wp-block-navigation__container {
  gap: 26px;
}

.site-header .wp-block-navigation__container .wp-block-navigation-item__content:focus {
  border: 0 !important;
  color: var(--wp--preset--color--main-accent);
  outline: 0 !important;
}

/* Responsive container positioning on tablet */
.site-header .site-menu .wp-block-navigation__responsive-container {
  @media (min-width: 768px) and (max-width: 1023px) {
    bottom: auto;
    left: auto;
    width: 300px;
  }
}

/* Open / overlay state */
.site-header .site-menu .wp-block-navigation__responsive-container.is-menu-open {
  top: calc(var(--admin-bar-height, 0px) + var(--main-nav-bar-height) + var(--top-bar-height) - var(--nav-border-size));
  padding-top: 0;
  z-index: 2;
  overflow: scroll;
}

.site-header .site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
  padding: 0.5rem 0;

}

.site-header .site-menu .wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) a,
.site-header .site-menu .wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) .wp-block-navigation-submenu__toggle {
  padding: 0.5rem 1.5rem !important;
}

.site-header .site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 0 !important;
}

.site-header .site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  top: -2.7rem;
}

.site-header .site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  margin-top: 0;
  padding-top: 0;
}


/* ==========================================================================
   Search Block
   ========================================================================== */

.site-header .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
  gap: 0.5rem;
}

.site-header .wp-block-search.wp-block-search__button-only .wp-block-search__button {
  align-items: center;
  border-radius: 0;
  padding-block: 0;
  padding-inline: 0.25rem;
}

.site-header .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
  justify-content: flex-end;
}

.site-header .wp-block-search {
  transition: none;
}

.site-header .wp-block-search__button:focus:not(:focus-visible) {
  outline: none;
}

.site-header .wp-block-search.wp-block-search__button-only .wp-block-search__input {
  background: var(--wp--preset--color--base);
  border-radius: 0.25rem !important;
  border: 0 !important;
  max-width: 320px;
  width: calc(100vw - 205px);

  @media (min-width: 600px) {
    width: 320px;
  }

  &::placeholder {
    color: var(--wp--preset--color--text-secondary);
  }

  &:focus {
    border: 0 !important;
    outline: 0 !important;
  }
}


/* ==========================================================================
   Menu Item Typography & States
   ========================================================================== */

/* Remove underline on hover — mirrors WP core-navigation.css selector to override it */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .current-menu-item>a,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .has-child button:hover {
  text-decoration: none;
}

/* Smooth color transition on all nav items */
.site-header .wp-block-navigation-item__content,
.site-header .wp-block-navigation-submenu__toggle {
  transition: color 0.2s ease;
}

.site-header .wp-block-navigation__submenu-icon svg path {
  transition: stroke 0.2s ease;
}

/* All menu items: accent color + no underline on hover (targets label, toggle button, and chevron together) */
.site-header .wp-block-navigation-item:hover>.wp-block-navigation-item__content,
.site-header .wp-block-navigation-item:hover>.wp-block-navigation-submenu__toggle,
.site-header .wp-block-navigation-item:focus>.wp-block-navigation-item__content,
.site-header .wp-block-navigation-item:focus>.wp-block-navigation-submenu__toggle {
  color: var(--wp--preset--color--main-accent);
  text-decoration: none;
}

.site-header .wp-block-navigation-item:hover>.wp-block-navigation__submenu-icon svg path {
  stroke: var(--wp--preset--color--main-accent);
}

/* First-level items: accent color + chevron when submenu is open */
.site-header .wp-block-navigation__container>li:has(> .wp-block-navigation__submenu-container:is(:hover, :focus-within))>.wp-block-navigation-submenu__toggle {
  color: var(--wp--preset--color--main-accent);
}

.site-header .wp-block-navigation__container>li:has(> .wp-block-navigation__submenu-container:is(:hover, :focus-within))>.wp-block-navigation__submenu-icon svg path {
  stroke: var(--wp--preset--color--main-accent);
}


.site-header .wp-block-navigation-submenu__toggle {
  height: auto;
}


/* ==========================================================================
   Modal Open State — Hide Hamburger Toggle
   ========================================================================== */

.has-modal-open .wp-block-navigation__responsive-container-open {
  z-index: -2;
  visibility: hidden;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
  border-radius: 0;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) li:last-child {
  border-radius: 0;
}