/* Header-specific styles */
.menu :where(li > a):hover,
.menu :where(li > button):hover {
  background-color: transparent;
}

.site-logo img {
	max-width: 100%!important;
}

.header-drawer {
  background-image: url('../images/drawe-background.jpg');
  background-size: cover;
  background-position: center;
}

/* Drawer menu link borders */
.header-drawer .menu :where(li > a) {
  border-bottom: 2px solid var(--color-teal);
  border-radius: 0px;
  padding: 2px 0px;
}


/* Language trigger button: enforce teal deep background and cream text */
.lang-trigger,
.lang-trigger:hover,
.lang-trigger:focus,
.lang-trigger:focus-visible {
  background-color: var(--color-teal-deep) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-teal-deep) !important;
}

/* Menu trigger button: enforce teal deep background and cream text */
.menu-trigger,
.menu-trigger:hover,
.menu-trigger:focus,
.menu-trigger:focus-visible {
  background-color: var(--color-teal-deep) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-teal-deep) !important;
}

/* Header navbar horizontal menu: remove left/right padding from child links/buttons */
.navbar .menu.menu-horizontal :where(li > a, li > button) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Turn menu item text white on hover (drawer only) */
.drawer-side .menu :where(li > a:hover, li > button:hover) {
  color: #ffffff !important;
}

/* Sticky, hide-on-scroll header behavior */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  will-change: transform;
  transition: transform 250ms ease-in-out;
}

header.header--hidden {
  transform: translateY(-100%);
}

/* Ensure drawer stacks above sticky header, with panel above overlay */
.drawer .drawer-overlay {
  z-index: 55 !important; /* above header (50), below panel */
}
.drawer .drawer-side {
  z-index: 60 !important; /* above overlay */
}

/* Elevate the inner drawer content block if needed */
.header-drawer {
  position: relative;
  z-index: 61 !important; /* above side and overlay */
}

/* Drawer submenu behavior */
.header-drawer .menu.drawer-fade-hidden {
  pointer-events: none;
}

.header-drawer .menu.drawer-root-hidden > li:not(.showing-submenu) {
  display: none;
}

.header-drawer .menu.drawer-root-hidden > li.showing-submenu > a,
.header-drawer .menu.drawer-root-hidden > li.showing-submenu > button {
  display: none;
}

.header-drawer ul.sub-menu.drawer-submenu {
  display: none;
}

.header-drawer ul.sub-menu:not(.drawer-submenu) {
  display: block;
}

/* Remove left spacing/border on submenus inside the drawer */
.header-drawer ul.sub-menu {
  margin-left: 0 !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}

/* Also ensure submenu item links don't indent left */
.header-drawer ul.sub-menu :where(li > a, li > button) {
  padding-left: 0 !important;
}

/* Remove any decorative pseudo-element borders on submenus */
.header-drawer ul.sub-menu::before,
.header-drawer ul.sub-menu:before {
  content: none !important;
  display: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Back row at top of submenu */
.header-drawer li.drawer-back-row > a {
  border-bottom: 2px solid var(--color-teal);
  border-radius: 0px;
  padding: 3px 0px;
  text-transform: uppercase;
  font-size: 30px;
  padding-bottom: 32px !important;
}

@media (min-width: 1280px) {
  .header-drawer li.drawer-back-row > a {
    font-size: 35px;
  }
}

/* Capitalize drawer submenu items (override any uppercase) */
.header-drawer ul.sub-menu :where(li:not(.drawer-back-row) > a, li:not(.drawer-back-row) > button) {
  text-transform: capitalize !important;
}

/* Slightly smaller font for submenu items */
.header-drawer ul.sub-menu :where(li > a, li > button) {
  font-size: 26px;
}

@media (min-width: 1280px) {
  .header-drawer ul.sub-menu :where(li > a, li > button) {
    font-size: 30px;
  }
}

/* Vertical padding on submenu list items */
.header-drawer ul.sub-menu > li a {
  padding-top: 6.5px;
  padding-bottom: 6.5px;
}
header .lang-dropdown ul li a {
  gap: 2px;
}