/* --- Header Containers ------------------------------------------------------------------------ */

/* Overall Container */
header.site-header {
  width: 100%;
  position: fixed;
  background: transparent;
  z-index: 10;
}
@media (max-width: 1280px) {
  header.site-header {
    padding: 0 35px;
  }
}

/* Content Container */
.site-header-inner {
  display: flex;
  justify-content: space-between;
  width: fit-content; /* small as possible on desktop */
  height: 68px;
  position: relative;
  top: 26px;
  margin: 0 auto; /* top margin controls spacing from top of page, auto centers */
  background: transparent;
  transition: top 0.2s ease-out;
}
.scrolled .site-header-inner {
  top: 10px;
}
@media (max-width: 1060px) {
  .site-header-inner {
    width: auto; /* expand to fill width on mobile */
  }
}

/* Header Background */
.site-header-inner::before {
  height: 68px;
  position: absolute;
  inset: 0; /* adjusts relation to parent */
  border-radius: 1000px; /* large value to fully round */
  background: rgba(255,255,255,0.5);
  background: linear-gradient(to right, rgba(255,255,255,1.0) 0%,
                                        rgba(255,255,255,0.9) 150px,
                                        rgba(255,255,255,0.67) 50%,
                                        rgba(255,255,255,0.33) 100%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,24,7,0.2);
  content: '';
}
@media (max-width: 1060px) {
  .site-header-inner::before {
    background: linear-gradient(to right, rgba(255,255,255,1.0) 0%,
                                          rgba(255,255,255,0.9) 150px,
                                          rgba(255,255,255,0.67) 50%,
                                          rgba(255,255,255,0.9) 100%);
  }
}
@media (max-width: 540px) {
  .site-header-inner::before {
    background: linear-gradient(to right, rgba(255,255,255,1.0) 0%,
                                          rgba(255,255,255,0.67) 50%,
                                          rgba(255,255,255,0.9) 100%);
  }
}

/* --- Logo Area -------------------------------------------------------------------------------- */

header.site-header h1.site-logo {
  display: block;
  margin: 0 15px;
}
header.site-header h1.site-logo a {
  display: flex;
  align-items: center;
  height: 100%;
}
header.site-header h1.site-logo img {
  width: 171px; /* controls logo sizing */
  filter: drop-shadow(0px -2px 6px rgba(0,0,0,0.1))
}

/* --- Nav Area --------------------------------------------------------------------------------- */

header.site-header .site-nav {
  z-index: 2;
}

/* Turns into mobile menu */
@media (max-width: 1060px) {
  header.site-header .site-nav {
    flex: none; /* reset flexbox */
    display: block;
    width: 100%;
    height: calc(100dvh - 128px);
    position: absolute;
    top: 88px;
    left: 0;
    padding: 20px;
    border-radius: var(--rounded-lg);
    background: rgba(255,255,255,0.67);
    backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 10px 72px rgba(0,0,0,0.33);
    overflow-y: scroll;
    scrollbar-width: none; /* remove scrollbar: firefox */
    -ms-overflow-style: none; /* remove scrollbar: ie */
    transform: translateX(100vw);
    transition: none;
  }
  header.site-header .site-nav::-webkit-scrollbar {
    display: none; /* remove scrollbar: chrome, safari, opera */
  }
  header.site-header .site-nav.is-ready {
    transition: transform 0.3s ease; /* prevents menu sliding while browser resizing */
  }
  header.site-header .site-nav.open {
    transform: translateX(0);
  }
}

header.site-header .nav-item-list {
  display: flex;
  justify-content: center;
  height: 100%;
  padding: 6px 0; /* spacing around nav items */
  margin: 0;
}
@media (max-width: 1060px) {
  header.site-header .nav-item-list {
    all: unset;
  }
}

/* Top-level nav items */
header.site-header .nav-item {
  display: flex;
  position: relative;
  padding: 0;
}
@media (max-width: 1060px) {
  header.site-header .nav-item {
    all: unset;
    display: block;
  }
  header.site-header .nav-item:not(:last-child) {
    border-bottom: 1px solid rgba(81,114,59,0.33);
  }
}

/* Top-level nav item links */
header.site-header .nav-item > a {
  display: flex;
  align-items: center; /* vertically center text */
  padding: 12px;
  background: transparent;
  transition: ease 0.2s background;
}
/* NOTE: Pseudoelements are used for backgrounds in order to overlap them optically so they are allowed to sit closer together */
@media (min-width: 1061px) {
  header.site-header .nav-item > a::before {
    display: block;
    position: absolute;
    top:    6px; /* visually smaller than parent to match height of logo */
    bottom: 6px; /* visually smaller than parent to match height of logo */
    left:  -6px; /* sticks out further than its parent */
    right: -6px; /* sticks out further than its parent */
    border-radius: 1000px; /* large value to fully round */
    background: rgba(0,42,7,0.075);
    backdrop-filter: blur(12px) saturate(120%);
    content: '';
    opacity: 0; /* TEMP */
    z-index: -1; /* ensures under parent */
    transition: ease 0.2s opacity;
  }
  header.site-header .nav-item:hover > a::before {
    opacity: 1;
  }
}

header.site-header .nav-item-label {
  font-size: 1.0rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--off-black);
  transition: 0.1s color;
  user-select: none;
  text-wrap: nowrap;
}

/* --- Nav Dropdown Carets ---------------------------------------------------------------------- */

header.site-header .caret-down {
  display: block;
  position: relative;
  width: 17px;
  height: 10px;
}
header.site-header .caret-right {
  display: block;
  position: relative;
  height: 14px;
  width: 10px;
}

/* Spacing for top-level carets */
header.site-header .nav-item > a > .caret-down {
  margin-left: 5px;
}

/* Spacing for dropdown right carets */
header.site-header .nav-dropdown-item-row a > .caret-right {
  left: 7px;
}

/* Remove top-level carets and dropdown right carets on mobile */
@media (max-width: 1060px) {
  header.site-header .nav-item > a .caret-down {
    display: none;
  }
  header.site-header .nav-dropdown-item-row a > .caret-right {
    display: none;
  }
}

header.site-header .caret-line {
  width: 9px;
  height: 1.8px;
  position: absolute;
  top: 7px;
  border-radius: 1000px; /* large value to fully round */
  background: currentColor;
  transition: all 0.2s ease;
}

/* Down (`Closed`) State */
header.site-header .nav-item > a > .caret-down            .caret-line.left,
header.site-header .nav-dropdown-item .dropdown-caret-btn .caret-line.left {
  left: 0;
  transform: rotate(45deg);
  transform-origin: center right;
}
header.site-header .nav-item > a > .caret-down            .caret-line.right,
header.site-header .nav-dropdown-item .dropdown-caret-btn .caret-line.right {
  right: 0;
  transform: rotate(-45deg);
  transform-origin: center left;
}

/* Up (Open) State */
header.site-header .nav-item:hover > a > .caret-down           .caret-line,
header.site-header .nav-dropdown-item.open .dropdown-caret-btn .caret-line {
  top: 1px;
}
header.site-header .nav-item:hover > a > .caret-down           .caret-line.left,
header.site-header .nav-dropdown-item.open .dropdown-caret-btn .caret-line.left {
  transform: rotate(-45deg);
}
header.site-header .nav-item:hover > a > .caret-down           .caret-line.right,
header.site-header .nav-dropdown-item.open .dropdown-caret-btn .caret-line.right {
  transform: rotate(45deg);
}

/* Right State */
header.site-header .nav-dropdown-item-row .caret-right .caret-line.top {
  top: 0;
  transform: rotate(45deg);
  transform-origin: center left;
}
header.site-header .nav-dropdown-item-row .caret-right .caret-line.bottom {
  top: unset;
  bottom: 0;
  transform: rotate(-45deg);
  transform-origin: center left;
}

/* Hide and show functional carets for mobile */
header.site-header .nav-dropdown-item .dropdown-caret-btn {
  display: none;
}
@media (max-width: 1060px) {
  header.site-header .nav-dropdown-item .dropdown-caret-btn {
    display: flex;
  }
}

/* --- Dropdowns -------------------------------------------------------------------------------- */

/* Dropdown top container */
header.site-header .site-nav-dropdown {
  display: none; /* hide by default */
  height: fit-content;
  position: absolute;
  top: 56px;
  left: -6px;
  padding: 0;
  z-index: 11;
}
@media (max-width: 1060px) {
  header.site-header .site-nav-dropdown {
    all: unset; /* reset */
  }
}
header.site-header .nav-item:hover .site-nav-dropdown {
  display: block; /* unhide dropdown */
}

/* Dropdown (child) list container */
/* NOTE: List container contains the dropdown's background so the dropdown itself can sit flush with its parent nav item */
header.site-header .site-nav-dropdown > ul.nav-item-list-submenu {
  display: block;
  padding: 6px;
  margin: 12px 0 0 0;
  background: transparent;
  overflow: visible;
}
@media (max-width: 1060px) {
  header.site-header .site-nav-dropdown > ul.nav-item-list-submenu {
    padding: 0;
    margin: 0 0 15px 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
  }
}

/* Dropdown (child) background */
/* NOTE: Background as pseudoelement required for grandchild background's backdrop-filter */
@media (min-width: 1061px) {
  header.site-header .site-nav-dropdown > ul.nav-item-list-submenu::before {
    position: absolute;
    inset: 0;
    margin: 12px 0 0 0;
    border-radius: 25px;
    background: rgba(255,255,255,0.7);
    background: linear-gradient(-45deg, rgba(19,197,197,0.4) 0%,
                                        rgba(255,255,255,0.5) 50%,
                                        rgba(255,255,255,0.8) 100%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 10px 30px rgba(0,24,7,0.3);
    content: '';
  }
}
/* Sub-sub menus (lowest level) */
header.site-header li.nav-dropdown-item > ul.nav-item-list-submenu {
  height: 0;
  margin: 0;
  overflow: hidden;
  transition: height 0.33s ease;
}

header.site-header li.nav-dropdown-item,
header.site-header li.nav-dropdown-sub-item {
  position: relative;
  padding: 0;
  margin: 0;
}

/* Dropdown item rows */
header.site-header .nav-dropdown-item-row {
  display: flex;
  align-items: center;
  height: 35px;
  overflow: visible;
}
@media (max-width: 1060px) {
  header.site-header .nav-dropdown-item-row {
    height: auto;
    min-height: 35px; /* height needs to be flexible for wrapping on mobile */
    justify-content: space-between;
  }
}
header.site-header .nav-dropdown-item-row > a {
  flex-grow: 2;
  display: flex;
  align-items: center;
  justify-content: space-between; /* puts right carets flush right */
  padding: 10px 18px;
  border-radius: 1000px;
  color: var(--off-black);
  background: transparent;
  transition: background 0.2s ease;
}
@media (max-width: 1060px) {
  header.site-header .nav-dropdown-item-row > a {
    all: unset;
    display: block;
    padding: 8px 8px 8px 20px;
  }
}
header.site-header .dropdown-caret-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  width: 35px;
  height: 44px;
  background: transparent;
  cursor: pointer;
}
header.site-header .dropdown-caret-btn::before {
  display: block;
  position: absolute;
  inset: 3px -2px;
  border-radius: 1000px; /* fully round */
  background: transparent;
  content: '';
  z-index: -1;
  transition: background 0.2s ease;
}
header.site-header .dropdown-caret-btn:hover::before {
  background: rgba(0,35,14,0.1);
}

/* Dropdown link hover */
@media (min-width: 1061px) {
  header.site-header .nav-dropdown-item:hover > .nav-dropdown-item-row > a,
  header.site-header .nav-dropdown-sub-item > a:hover {
    background: rgba(0,42,7,0.1);
  }
}

header.site-header .nav-dropdown-item-label {
  font-size: 1.0rem;
  line-height: 0.9rem;
  font-weight: bold;
  text-wrap: nowrap;
  user-select: none;
}
@media (max-width: 1060px) {
  header.site-header .nav-dropdown-item-label {
    text-wrap: wrap; /* wrap long items on mobile */
  }
}
header.site-header .nav-dropdown-sub-item > a {
  display: block;
  padding: 6px 12px;
  margin: 1px 0 1px 18px;
  border-radius: 1000px;
  color: var(--off-black);
  background: transparent;
  transition: background 0.2s ease;
}
@media (max-width: 1060px) {
  header.site-header .nav-dropdown-sub-item > a {
    all: unset;
    display: block;
    padding: 10px 30px;
  }
}

header.site-header .nav-dropdown-sub-item-label {
  font-size: 0.9rem;
  line-height: 0.9rem;
  font-weight: normal;
  text-wrap: nowrap;
  user-select: none;
}
@media (max-width: 1060px) {
  header.site-header .nav-dropdown-sub-item-label {
    text-wrap: wrap; /* wrap long items on mobile */
  }
}

/* --- Floating Submenus ------------------------------------------------------------------------ */

.site-nav.floating-submenus .nav-item-list-submenu.grandchild {
  margin: 0;
}

@media (min-width: 1061px) {
  .site-nav.floating-submenus .nav-dropdown-item.has-grandchildren .site-nav-dropdown-sub {
    display: none; /* hidden by default */
  }
  .site-nav.floating-submenus .nav-dropdown-item.has-grandchildren:hover .site-nav-dropdown-sub {
    display: block; /* show on parent hover */
  }
  .site-nav.floating-submenus .site-nav-dropdown-sub {
    width: fit-content; /* dynamic width based on contents */
    height: auto;
    position: absolute;
    top: -6px; /* aligns vertically with parent menu */
    left: 100%; /* push floating menu to the right by full width */
    padding-left: 12px; /* spacing between child menu and grandchild menu */
  }
  .site-nav.floating-submenus .nav-item-list-submenu.grandchild {
    padding: 6px;
    border-radius: 25px;
    background: rgba(255,255,255,0.7);
    background: linear-gradient(-45deg, rgba(255,133,46,0.4) 0%,
                                        rgba(255,255,255,0.5) 50%,
                                        rgba(255,255,255,0.8) 100%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 10px 30px rgba(0,24,7,0.3);
    overflow: hidden;
    content: '';
  }
  .site-nav.floating-submenus .nav-item-list-submenu.grandchild .nav-dropdown-sub-item > a {
    padding: 8px 12px;
    margin-left: 0;
  }
}

@media (max-width: 1060px) {
  .site-nav .nav-dropdown-item.has-grandchildren.closed .site-nav-dropdown-sub {
    height: 0;
    overflow: hidden;
  }
}

/* --- Search Toggle Button --------------------------------------------------------------------- */

header.site-header .site-nav-buttons {
  display: flex;
  margin-right: 14px;
}

header.site-header .site-search {
  display: flex;
  align-items: center;
  margin-right: 10px;
  z-index: 2;
}
@media (max-width: 1060px) {
  header.site-header .site-search {
    display: none; /* hide desktop menu on mobile */
  }
}
header.site-header button.site-search-toggle {
  all: unset; /* remove all default button styling */
  position: relative;
  padding: 12px; /* matches nav padding */
  font-size: 1.0rem;
  color: var(--off-black);
  cursor: pointer;
  transition: all 0.2s ease;
}
header.site-header button.site-search-toggle::before {
  display: block;
  position: absolute;
  top:    -1px; /* visually same height as logo */
  bottom: -1px; /* visually same height as logo */
  left:   -1px; /* sticks out further than its parent */
  right:  -1px; /* sticks out further than its parent */
  border-radius: 1000px; /* large value to fully round */
  background: rgba(0,42,7,0.075);
  backdrop-filter: blur(12px) saturate(120%);
  content: '';
  opacity: 0;
  z-index: -1; /* ensures under parent */
  transition: ease 0.2s opacity;
}
header.site-header button.site-search-toggle:hover::before {
  opacity: 1;
}

/* --- Search Form ------------------------------------------------------------------------------ */

#search-form {
  display: flex;
  gap: 16px;
  position: absolute;
  top: 74px;
  right: 0;
  padding: 12.5px 14px;
  border-radius: 1000px;
  background: rgba(255,255,255,0.5);
  background: linear-gradient(to right, rgba(255,255,255,0.3) 0%,
                                        rgba(255,255,255,0.6) 50%,
                                        rgba(255,255,255,0.3) 100%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,24,7,0.2);
  opacity: 0;
  transform: translateX(50px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#search-form.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

#search-form form ul {
  display: flex;
  gap: 10px;
  margin: 0;
}

#search-form form ul > li {
  padding-right: 0; /* remove given padding */
}

/* Search text field */
#search-form form input[type="text"] {
  width: 200px;
  border-radius: 1000px;
  transition: all 0.2s ease-in-out;
}

/* --- Login/Register Button -------------------------------------------------------------------- */

header.site-header .login-register {
  display: flex;
  align-items: center;
  z-index: 2;
}
@media (max-width: 580px) {
  header.site-header .login-register {
    display: none; /* hide menubar version on small mobile to make room for logo */
  }
}
header.site-header .login-register-button {
  position: relative;
  padding: 12px 18px;
  font-size: 1.0rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--white);
  user-select: none;
  text-wrap: nowrap;
}
header.site-header .login-register-button::before {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 1000px;
  background: var(--glorieta-green);
  content: '';
  z-index: -1;
  transition: transform 0.2s ease;
}
header.site-header .login-register-button:hover::before {
  animation: bounce-scale 300ms ease forwards;
}
@keyframes bounce-scale {
  0% {
    transform: scale(1, 1);
  }
  66% {
    transform: scale(1.1, 1.2);
  }
  100% {
    transform: scale(1.06, 1.15);
  }
}

header.site-header .login-register-mobile {
  display: none;
}
@media (max-width: 580px) {
  header.site-header .login-register-mobile {
    display: block;
  }
}

/* --- Mobile Menu Button Area ------------------------------------------------------------------ */

header.site-header .site-mobile-menu-button {
  display: none; /* hide by default */
  align-items: center;
  padding: 0 20px;
  z-index: 2;
}
@media (max-width: 1060px) {
  header.site-header .site-mobile-menu-button {
    display: flex;
  }
}
.mobile-menu-btn {
  all: unset;
  --size: 28px;
  --thick: 2px;
  --gap: 6px;
  width: var(--size);
  height: var(--size);
  position: relative;
  top: -2px;
  border: 0;
  background: transparent;
  color: var(--off-black);
  cursor: pointer;
}
.mobile-menu-btn::before,
.mobile-menu-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: var(--thick);
  background: var(--off-black);
  border-radius: 999px;
  transform-origin: center;
  transition: top .2s ease, transform .2s ease;
}
.mobile-menu-btn::before { top: calc(50% - var(--gap)); }
.mobile-menu-btn::after  { top: calc(50% + var(--gap)); }
.mobile-menu-btn.is-active::before,
.mobile-menu-btn.is-active::after {
  top: 50%;
  transform: translateY(-50%); /* center the line vertically */
}
.mobile-menu-btn.is-active::before { transform: translateY(-50%) rotate(45deg); }
.mobile-menu-btn.is-active::after  { transform: translateY(-50%) rotate(-45deg); }

/* ---------------------------------------------------------------------------------------------- */