/* === Header Styles === */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: visible;
  height: auto; /* REMOVE height: 100% */
}
body {
  position: relative;
  overflow-x: hidden;
}
.site-header {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  overflow: visible;
}
/* CONTAINER padding for site, except the logo mid header area START */
.container,
#mainNav.header-bottom.sticky,
.header-top .container,
.site-footer .footer-container,
main .container {
  padding-left: 1rem;
  padding-right: 1rem;
}
/* container override for the logo area, keep under container */
.header-mid .logo-container {
  padding-left: 0;
  padding-right: 0;
}
/* padding for site, except the logo mid header area END */
/* Light mode override */
.theme-light .quote-link {
  color: #0c2632;
}
.theme-light .quote-link:hover {
  color: #53b0d7;
}

/* Dark mode override */
.theme-dark .quote-link {
  color: #ffffff;
}
.theme-dark .quote-link:hover {
  color: #53b0d7;
}

/* ==========================================================================
   HEADER: TOP
   ========================================================================== */
.header-top {
  padding-top: 5px;
  padding-bottom: 0px;
  height: 40px;
  font-weight: 600;
  font-size: 15px;
  background: #ffffff;
  color: #0c2632;
}
.theme-dark .header-top {
  background: #0c2632;
  color: #ffffff;
}
.header-top .container {
  display: flex;
  justify-content: flex-end;
  align-items: center; /* vertically centers */
  padding: 0 1rem; /* removes extra top padding */
  height: 40px; /* enforces correct height */
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* GTranslate language space */
.gtranslate_wrapper {
  display: inline-block;
  margin-left: 1rem;
    margin-right: 2rem;
}

/* LinkedIn Icon */
.linkedin-icon svg {
  width: 21px;
  height: 21px;
}
.linkedin-icon svg path {
  fill: #0c2632;
  transition: fill 0.3s ease;
}
.theme-dark .linkedin-icon svg path {
  fill: #ffffff;
}
.linkedin-icon:hover svg path {
  fill: #53b0d7;
}
/* Ensures custom LinkedIn SVG looks like others */
.linkedin-icon-img {
  width: 21px;
  height: 21px;
  fill: currentColor;
  transition: filter 0.3s ease;
  filter: brightness(0) saturate(100%) invert(12%) sepia(13%) saturate(1591%) hue-rotate(156deg) brightness(95%) contrast(94%);
}

.theme-dark .linkedin-icon-img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.linkedin-icon:hover .linkedin-icon-img {
  filter: brightness(0) saturate(100%) invert(65%) sepia(27%) saturate(781%) hue-rotate(163deg) brightness(91%) contrast(89%);
}

/* Quote Link */
.quote-link {
  font-weight: 300;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.quote-link:hover {
  color: #53b0d7;
}

/* ==========================================================================
   HEADER: MIDDLE
   ========================================================================== */
.header-mid {
  padding: 0rem 1.5rem;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.theme-dark .header-mid {
  background: #0c2632;
}
.logo-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.logo {
  height: 120px;
  max-width: 100%;
  display: block;
}
.logo-link:hover img {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
@media (max-width: 1024px) {
  .logo {
    height: 90px;
  }
}
@media (max-width: 768px) {
  .logo {
    height: 70px;
  }
}
.logo-light {
  display: block;
}
.logo-dark {
  display: none;
}
.theme-dark .logo-light {
  display: none;
}
.theme-dark .logo-dark {
  display: block;
}

/* ==========================================================================
   BOTTOM HEADER (Nav and Sticky Nav)
   ========================================================================== */
.header-bottom {
  position: sticky;
  top: 0;
  z-index: 9999;
  background-color: #0c2632;
  color: #ffffff;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 1rem;
  transition: all 0.3s ease;
}
/*
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 1rem;
  height: 40px;
}*/
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 1rem;
  height: 40px;
  flex-wrap: nowrap;        /* prevents wrap but allows shrink */
  min-width: 0;             /* allows flex items to shrink below content size */
}

.hdr-btm-left,
.hdr-btm-center,
.hdr-btm-right {
  display: flex;
  align-items: center;
  height: 100%;
}
/* =======
STICKY
======= */
.header-bottom.sticky {
  background-color: #ffffff;
  color: #0c2632;
}
.theme-dark .header-bottom.sticky {
  background-color: #0c2632;
  color: #ffffff;
}
/* --- Sticky Logo in Bottom Header --- */
.sticky-logo-wrapper {
  display: none;
  /*grid-column: 2;*/
  /*justify-content: center;*/
  align-items: center;
  height: 100%;
}
.header-bottom .sticky-logo-wrapper {
  display: none;
  grid-column: 1;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}
.header-bottom.sticky .sticky-logo-wrapper {
  display: flex;
}
.sticky-logo {
  height: 28px;
  width: auto;
  display: block;
  transition: opacity 0.3s ease;
}
.theme-light .header-bottom.sticky .logo-light {
  display: block;
}
.theme-dark .header-bottom.sticky .logo-dark {
  display: block;
}
.theme-dark .header-bottom.sticky .logo-light {
  display: none;
}
.theme-light .header-bottom.sticky .logo-dark {
  display: none;
}
.sticky-logo-wrapper .sticky-logo {
  height: 28px;
  width: auto;
  display: block;
  transition: opacity 0.3s ease;
}
.sticky-logo-wrapper .logo-link:hover .sticky-logo {
  opacity: 0.8;
}
.theme-light .header-bottom.sticky .sticky-logo-wrapper .logo-light {
  display: block;
}
.theme-light .header-bottom.sticky .sticky-logo-wrapper .logo-dark {
  display: none !important;
}
.theme-dark .header-bottom.sticky .sticky-logo-wrapper .logo-light {
  display: none;
}
.theme-dark .header-bottom.sticky .sticky-logo-wrapper .logo-dark {
  display: block;
}
/* Offset sticky nav if WP admin bar is visible */
body.admin-bar .header-bottom {
  top: var(--admin-bar-height, 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar .header-bottom {
    top: 46px;
  }
}
/* -----------------------------
   Sticky Header Flex Adjustments
------------------------------- */
/* ============ Sticky Nav Fixes ============== */

.header-bottom.sticky .nav-container {
  flex-wrap: nowrap;
  min-width: 0;
  /*overflow: hidden;*/
}

.header-bottom.sticky .hdr-btm-left {
  flex: 0 0 auto;
  min-width: auto;
  padding-right: 0.5rem;
}

.header-bottom.sticky .hdr-btm-center {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  justify-content: center;
}

.header-bottom.sticky .hdr-btm-right {
  flex: 0 0 auto;
  min-width: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  overflow: visible;
}

/* In sticky header, hide the search field text input, keep icon only 
.header-bottom.sticky .search-field {
  display: none !important;
}*/

.header-bottom.sticky .search-wrapper.compact .search-field {
  display: none;
}

.header-bottom.sticky .search-wrapper {
  gap: 0.25rem;
}



/*================================================
Theme Light Mode Dark Mode
=====================================*/
/* Detect user’s system preference for light or dark mode */
@media (prefers-color-scheme: dark) {
  /* Apply dark mode styles */
  .theme-light .header-bottom.sticky .logo-light {
    display: none;
  }
  .theme-dark .header-bottom.sticky .logo-dark {
    display: block;
  }
}

/* Default to light mode for users who prefer light theme */
@media (prefers-color-scheme: light) {
  /* Apply light mode styles */
  .theme-dark .header-bottom.sticky .logo-dark {
    display: none;
  }
  .theme-light .header-bottom.sticky .logo-light {
    display: block;
  }
}

/* --- Navigation Layout --- */
/*
.hdr-btm-center {
  flex-grow: 1;
  justify-content: center;
  /*new$$
   display: flex;
   align-items: center;  
   height: 100%;   
}*/

.hdr-btm-center {
  flex: 1 1 auto;            /* allows it to shrink! */
  min-width: 0;              /* allows shrinking below content */
  justify-content: center;
  display: flex;
  align-items: center;
  height: 100%;
  overflow: visible;          /* hide overflow text if needed */
}
/*
.hdr-btm-right {
  justify-content: flex-end;
  /*new$$
  justify-content: flex-end;
  gap: 0.75rem;
  position: relative;
  z-index: 10; /* Ensures icons are visible above other content $$
}*/
.hdr-btm-right {
  flex: 0 0 auto;                /* it won't shrink */
  justify-content: flex-end;
  gap: 0.75rem;
  padding-right: 1rem;           /* ensures right padding */
  position: relative;
  z-index: 10;
}
@media (max-width: 1160px) {
  .main-nav .nav-menu li a {
    font-size: 16px;
    padding: 0.25rem 1rem;
  }
}

/* Ensure icons inside the header are visible even when sticky */
.theme-dark .header-bottom.sticky .theme-icon img,
.theme-dark .header-bottom.sticky .search-icon img {
  display: block;
}

.theme-light .header-bottom.sticky .theme-icon img,
.theme-light .header-bottom.sticky .search-icon img {
  display: block;
}
/* Base style: hide on small screens, show on desktop */
.main-nav {
  justify-content: center;
  flex-grow: 1;
  grid-column: 2;
}

@media (max-width: 1120px) {
  .main-nav {
    display: none;
  }
  .menu-toggle {
    display: flex !important;
  }
}
.hdr-btm-center .menu-toggle {
  order: -1; /* ensures hamburger appears before nav */
  margin-right: auto;
    /* new*/
  display: flex;
  /*display: block; /* Ensures hamburger appears centered */
  justify-content: center;
  align-items: center;
  padding: 0;
  height: 100%;
  }
  .hdr-btm-center .main-nav {
    width: 100%;
  }
  .main-nav.active {
    display: flex;
  }
  .main-nav .nav-menu {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }
  .main-nav .nav-menu li a {
    color: #ffffff;
  }
  .nav-menu {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-menu li a {
    font-size: 18px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
  }
  .nav-menu li a:hover,
  .nav-menu li a:active,
  .nav-menu li.current-menu-item a {
    color: #53b0d7;
  }

/* Force remove bullets in all dropdown contexts */
.mobile-menu,
.mobile-menu ul,
.mobile-menu li {
  list-style: none !important;
}

/* Show hamburger and mobile menu on smaller screens */
@media (max-width: 768px) {
  .mobile-menu {
    display: none;
    flex-direction: column;
    background-color: #fff;
    padding: 1rem;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 99;
  }
  .mobile-menu.show {
    display: flex;
  }
}

/* Sticky Header Colors */
.header-bottom.sticky .nav-menu li a {
  color: #0c2632;
}
.header-bottom.sticky .nav-menu li a:hover,
.header-bottom.sticky .nav-menu li a:active,
.header-bottom.sticky .nav-menu li.current-menu-item a {
  color: #53b0d7;
}
.theme-dark .header-bottom.sticky .nav-menu li a {
  color: #ffffff;
}
.theme-dark .header-bottom.sticky .nav-menu li a:hover,
.theme-dark .header-bottom.sticky .nav-menu li a:active,
.theme-dark .header-bottom.sticky .nav-menu li.current-menu-item a {
  color: #53b0d7;
}
/* Right Side Icons */
.nav-right {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  overflow: visible;
}
.search-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.search-field {
  display: block;
  background: transparent;
  border: none;
  color: inherit;
  padding: 0.25rem 0.5rem;
  font-size: 14px;
  outline: none;
  transition: max-width 0.3s ease;
  /*max-width: 0;
  overflow: hidden;
  padding: 0;*/
}
/* Always show search field on wide screens */
@media (min-width: 1300px) {
  .search-wrapper .search-wrapper {
    flex-grow: 1;
  }
  .search-field {
    display: block;
    max-width: 200px;
  }
  .search-clear {
    display: inline-block;
  }
}

/* Hide search input by default on medium screens (show only on active) */
@media (min-width: 1100px) and (max-width: 1300px) {
  .search-wrapper.compact .search-field,
  .search-wrapper.compact .search-clear {
    display: none;
  }
  .search-wrapper.active .search-field,
  .search-wrapper.active .search-clear {
    display: inline-block;
    max-width: 150px;
  }
}

.header-bottom.sticky .theme-icon {
  display: block !important; /* Force visibility */
  /*display: flex; /* Ensures it is visible in sticky mode */
  z-index: 10; /* Makes sure the icon stays above other elements */
}
/* If theme toggle is hidden in sticky mode, make it visible */
.theme-dark .header-bottom.sticky .theme-icon,
.theme-light .header-bottom.sticky .theme-icon {
  display: block !important;
}

/* Sticky Header Styles */
.header-bottom.sticky {
  position: sticky;
  top: 0;
  z-index: 9999; /* Ensure the sticky header is always above other content */
}

/* Ensure icons (including the theme toggle) are visible in sticky mode */
.header-bottom.sticky .theme-icon,
.header-bottom.sticky .search-icon {
  z-index: 10;
  display: block !important; /* Make sure they're visible in sticky mode */
}
/*
.search-wrapper.compact .search-field,
.search-wrapper.compact .search-clear {
  display: none;
}
*/
.search-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}



/* Base color for the X */
.search-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  display: none;
  color: #ffffff;   /* white in dark header */
  font-size: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.9;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.search-clear:hover {
  opacity: 1;
  color: #53b0d7; /* Moxie blue on hover */
}

/* Sticky header light mode */
.theme-light .header-bottom.sticky .search-clear {
  color: #0c2632;  /* navy */
}

.theme-light .header-bottom.sticky .search-clear:hover {
  color: #53b0d7;
}

/* Sticky header dark mode */
.theme-dark .header-bottom.sticky .search-clear {
  color: #ffffff;
}

.theme-dark .header-bottom.sticky .search-clear:hover {
  color: #53b0d7;
}

/* Sticky header only: constrain expanded input width */
.header-bottom.sticky .search-wrapper.active .search-field {
  max-width: 150px;
  width: 100%;
  transition: max-width 0.3s ease;
}

/* Between 1120px and 1320px screen width: narrower input */
@media (max-width: 1320px) and (min-width: 1121px) {
  .header-bottom.sticky .search-wrapper.active .search-field {
    max-width: 100px;
  }

  .header-bottom.sticky .main-nav a {
    padding: 0.25rem 0.75rem;
    font-size: 0.95rem;
  }
}

/*
.search-wrapper.active .search-clear {
  display: inline-block;
}
*//*
.search-wrapper.active .search-field {
  display: block;
}
*/
/* Removes browser's built-in clear (X) button on input[type=search] */
input[type="search"]::-webkit-search-clear-button,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
/*
@media (max-width: 1190px) {
  /*.search-wrapper.compact .search-field {
    display: none;
  }
  .search-wrapper.active .search-field {
    display: block;
  }
}*/
  /* OPTIONAL: hide theme toggle only when sticky on mobile */
    @media (max-width: 1120px) {
    .header-bottom.sticky .theme-icon {
      display: block !important;
      justify-content: center;
      align-items: center;
    }
}

/* reduce nav spacing for search bar */
@media (max-width: 1150px) {
  .main-nav a {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
  }
  .search-wrapper.active .search-field {
    max-width: 150px;
  }
}


/* Ensures magnifying glass is always visible on header-bottom */
.icon-img {
  filter: none;
  opacity: 1;
}
  /* WW1 Was working 1
   */
  .sticky-logo-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
  @media (max-width: 1120px) {
  .header-bottom.sticky #themeToggle {
    display: none;
  }
}
/* Icons */
.search-icon,
.theme-icon,
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.icon-img,
.theme-icon img {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(53%) sepia(0%) saturate(7493%) hue-rotate(180deg) brightness(88%) contrast(90%);
  opacity: 0.9;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.icon-img:hover,
.theme-icon img:hover {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(64%) sepia(14%) saturate(641%) hue-rotate(177deg) brightness(100%) contrast(95%);
}
/* Sun/Moon Icons */
.theme-icon img {
  content: url('../images/icons/sun.svg');
  display: inline-block;
  width: 20px;
  height: 20px;
  transition: opacity 0.3s ease;
}
.theme-icon:hover img {
  content: url('../images/icons/moon.svg');
}
.theme-dark .theme-icon img {
  content: url('../images/icons/moon.svg');
}
.theme-dark .theme-icon:hover img {
  content: url('../images/icons/sun.svg');
}
@media (max-width: 1120px) {
  .header-bottom.sticky .menu-toggle {
    display: block;
  }
}
@media (max-width: 1120px) {
  .menu-toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    grid-column: 2;
    padding-left: 16px;
    width: auto;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1000; /* ensure it stays clickable */
  }
  .menu-toggle .hamburger-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(53%) sepia(0%) saturate(7493%) hue-rotate(180deg) brightness(88%) contrast(90%);
    transition: filter 0.3s ease;
  }
  .menu-toggle:hover .hamburger-icon {
    filter: brightness(0) saturate(100%) invert(64%) sepia(14%) saturate(641%) hue-rotate(177deg) brightness(100%) contrast(95%);
  }
}

/* Base state: white hamburger on dark background */
.menu-toggle .hamburger-icon {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
  transition: filter 0.3s ease;
}
/* Sticky + light mode: navy on white background */
.header-bottom.sticky .menu-toggle .hamburger-icon {
  filter: brightness(0) saturate(100%) invert(12%) sepia(13%) saturate(1591%) hue-rotate(156deg) brightness(95%) contrast(94%);
}
/* Dark mode: always white */
.theme-dark .menu-toggle .hamburger-icon,
.theme-dark .header-bottom.sticky .menu-toggle .hamburger-icon {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}
/* Hover in any mode (including sticky): Moxie blue */
.menu-toggle:hover .hamburger-icon,
.header-bottom.sticky .menu-toggle:hover .hamburger-icon,
.theme-dark .menu-toggle:hover .hamburger-icon {
  filter: brightness(0) saturate(100%) invert(65%) sepia(27%) saturate(781%) hue-rotate(163deg) brightness(91%) contrast(89%);
}
/* === Hamburger & Mobile Menu Visibility keep below all other instances of .menu-toggle === */
/* Hide hamburger and mobile menu on desktop */
@media (min-width: 1121px) {
  .menu-toggle,
  .mobile-menu {
    display: none !important;
  }
   .mobile-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 1rem;
    z-index: 1000;
  }
  .mobile-menu.show {
    display: flex;
  }
}
/* Show hamburger and mobile menu below 1025px */


@media (min-width: 1121px) {
  .main-nav .nav-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .main-nav .nav-menu li {
    display: inline-block;
    position: relative;
  }
  .main-nav .nav-menu li a {
    font-size: 18px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
  }
  .header-bottom.sticky .main-nav .nav-menu li a {
    color: #0c2632;
  }
  .main-nav .nav-menu li a:hover,
  .main-nav .nav-menu li a:active,
  .main-nav .nav-menu li.current-menu-item a {
    color: #53b0d7;
  }
}
@media (min-width: 1121px) {
  .theme-dark .header-bottom.sticky .main-nav .nav-menu li a {
    color: #ffffff;
  }
}
@media (min-width: 1121px) {
  .theme-light .header-bottom.sticky .main-nav .nav-menu li a:hover,
  .theme-light .header-bottom.sticky .main-nav .nav-menu li a:active,
  .theme-light .header-bottom.sticky .main-nav .nav-menu li.current-menu-item a {
    color: #53b0d7;
  }
}
@media (min-width: 1121px) {
  .theme-dark .header-bottom.sticky .main-nav .nav-menu li a:hover,
  .theme-dark .header-bottom.sticky .main-nav .nav-menu li a:active,
  .theme-dark .header-bottom.sticky .main-nav .nav-menu li.current-menu-item a {
    color: #53b0d7;
  }
}
@media (min-width: 1121px) {
  .theme-dark .header-bottom.sticky .main-nav .nav-menu {
    background-color: #0c2632; /* navy background */
    list-style: none; /* remove bullets if not already */
  }

  .theme-dark .header-bottom.sticky .main-nav .nav-menu li a {
    color: #ffffff;
  }

  .theme-dark .header-bottom.sticky .main-nav .nav-menu li a:hover,
  .theme-dark .header-bottom.sticky .main-nav .nav-menu li a:active,
  .theme-dark .header-bottom.sticky .main-nav .nav-menu li.current-menu-item a {
    color: #53b0d7; /* Moxie Blue */
  }
}
/* Menu Hamburger Drop Down */
/* === MOBILE MENU COLORS (All Modes) === */
.mobile-menu {
  display: none;
  flex-direction: column;
  background-color: #0c2632;
  position: absolute;
  top: 100%;
  left: 0;
  width: auto;
  min-width: 220px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  z-index: 99;
}
/* when toggled ON */
.mobile-menu.show {
  display: flex;
}

.mobile-menu a {
  color: #ffffff; /* White text */
  text-decoration: none;
  font-weight: 500;
  display: block;
  padding: 0.5rem 1rem;
  transition: color 0.3s ease;
}

.mobile-menu a:hover,
.mobile-menu a:active {
  color: #53b0d7; /* Moxie blue on hover/active */
}


/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
New Main Nav to sort out 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/


/* ✅ Keep top-level nav items from wrapping */
.main-nav .nav-menu {
  display: flex;
  flex-wrap: nowrap;        /* Prevent wrap */
  justify-content: flex-start;
  gap: 1rem;
  align-items: center;  /* ✳ Vertically centers the nav items */
}

/* ✅ Prevent text inside each menu item from wrapping */
.main-nav .nav-menu > li > a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;   /* ✳ Helps align items vertically */
  line-height: 1.25;         /* ✳ Normalize line-height across items */
  display: flex;
  align-items: center;
  height: 100%;
}


/* Ensure submenus are absolutely positioned and show on hover */
.main-nav .nav-menu li {
  position: relative;
}
/*
.main-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  /*background-color: #fff;$$
  min-width: 200px;
  z-index: 999;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}*/

/* Ensure submenus are hidden by default */
.main-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #0c2632;
  padding: 0.25rem 0;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  min-width: 220px;
}

/* This makes the submenu appear on hover, on desktop only */
@media (min-width: 1121px) {
  .main-nav .nav-menu li {
    position: relative;
  }
  
  .main-nav .nav-menu li:hover > .sub-menu {
    display: block;
  }
}

/*
.main-nav .sub-menu li a:hover {
  background-color: #f2f2f2;
}*/
.main-nav .nav-menu > li > a,
.main-nav .nav-menu > li.current-menu-item > a,
.main-nav .nav-menu > li.current_page_item > a,
.main-nav .nav-menu > li.current-menu-ancestor > a {
  font-weight: 500;         /* Make consistent (instead of normal vs bold) */
  padding: 0.25rem 1.25rem;
  line-height: 1.25rem;     /* Ensure height doesn't shift */
  height: 100%;
}
.sub-menu {
  display: none;
}

.main-nav .nav-menu li:hover > .sub-menu {
  display: block;
}

/*
.main-navigation ul ul,
.sub-menu {
  top: calc(100% - 1px); /* 👈 lifts submenu up by 1px to close the gap $$
}*/
/*
.sub-menu li:first-child {
  /*border-top: none;$$
  border-top: 5px #0c2632;

}*/

.sub-menu li {
  border-top: 1px solid rgba(255, 255, 255, 0.2); /* nice subtle line */
  width: 80%;
  margin: 0;
  max-width: 80%;
}
/*
 .sub-menu {
  display: none;
  position: absolute;
  /*top: 100%;$$
  left: 0;
  background-color: #0c2632;
  padding: 0;
  z-index: 999;
  width: max-content;
  max-width: 90vw;       /* Allow shrinking on narrow screens $$
  white-space: normal;   /* Allow line wrapping $$
  word-wrap: break-word; /* Long words break $$
  margin-top: 0;
}*/


/* Default (mobile) - show search input with placeholder 'Search for' */
/* Default for <1024px and ≥1200px — show search input $$
.search-wrapper {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.search-field {
  width: 160px;
  max-width: 100%;
  padding: 0.3rem 0.6rem;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.search-field::placeholder {
  color: inherit;
}

/* 1024px–1199px: hide input unless .expanded is active $$
@media (min-width: 1024px) and (max-width: 1199px) {
  .search-wrapper:not(.expanded) .search-field {
    width: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    border: none;
  }

  .search-wrapper.expanded .search-field {
    width: 160px;
    padding: 0.3rem 0.6rem;
    opacity: 1;
    pointer-events: auto;
  }
}
*/
/* search for ^^*/
/* Force the height to normalize and center align content *//*
@media (max-width: 1199px) {
  .hdr-btm-center {
    padding-top: 1rem; /* tweak this until it's centered $$
  }
}

*/

/* Main Nav End */
/*====================================
Main Menu and Dropdown
======================================*/
/* Hide submenus by default $$
.main-navigation ul ul {
  top: 100%;
  left: 0;
}*/

/* Show submenu on hover of parent 
.main-navigation li:hover > ul {
  display: block;
}*/

/*
.main-navigation > ul > li {
  white-space: nowrap;
}
.main-navigation > ul > li > a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Optional: avoids ugly wrapping $$
}*/
.header-bottom {
  height: 40px;                /* Adjust to your preferred height */
  background-color: #0c2632;  /* Your dark background */
  align-items: center;
}/*
.main-navigation {
  width: 100%;
  overflow-x: auto; /* Optional fallback on small screens $$
  display: flex;
  align-items: center;  /* ✳ Vertically centers the nav items $$
  height: 100%;        /* Ensure it fills the parent container $$
}*/
/* forces no wrap on menu
ul.nav-menu {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}
ul.nav-menu li.sub-menu {
  display: flex;
  flex-wrap: wrap;
  white-space: wrap;
}
  but not wrap on sub menu*/
.main-navigation > ul {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: visible;
}
/*
.main-navigation > ul > li {
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: 100%;
}*/
/*
.main-navigation > ul > li > a {
  /*display: inline-block;
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1rem;
  line-height: 1;
}
*/
/*
.main-navigation ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem; /* Optional spacing between menu items $$
}*/
/*
.main-navigation ul a {
  display: flex;
  flex-wrap: nowrap;
}
*/
/*
.is-sticky .main-navigation ul {
  flex-wrap: nowrap;
}

*/

/* Dropdown links */
/*
.main-navigation ul ul li a {
  display: block;
  padding: 0.75rem 1rem;
  color: #ffffff; /* match mobile text $$
  background-color: #0c2632;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: normal; /* allow wrapping $$
}*/
/*
.main-navigation ul ul li a {
  display: block;
  padding: 0.75rem 1rem;     /* Top/bottom and left/right padding $$
  white-space: normal;       /* ✅ Allow wrapping $$
  word-wrap: break-word;     /* Wrap long words if needed $$
  text-align: left;
  background-color: #0c2632;
  color: #ffffff;
}
*/

/* Hover styles $$
.main-navigation ul ul li a:hover {
  color: #53b0d7; /* match hover from mobile $$
  background-color: #121212; /* slightly lighter or consistent bg $$
}*/
/* FOR Desktop Screens ONLY START $$
@media (min-width: 1024px) {
  /* dropdown CSS here $$
}
/* FOR Desktop Screens ONLY END $$

/*
.main-navigation ul ul.open {
  display: block;
}
/*clean menu $$
.main-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}*/

/*
.sub-menu {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.2s ease-in-out;
  position: absolute;
  z-index: 1000;
}
  */
  .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #0c2632;
  padding: 0.25rem 0;
  z-index: 999;
  width: max-content;
  max-width: 90vw;       /* Allow shrinking on narrow screens */
  white-space: normal;   /* Allow line wrapping */
  word-wrap: break-word; /* Long words break */
  margin-top: 0;
}

/* fix padding on sub menu items: */
/* ============ MOBILE FIRST ============ */
.sub-menu {
  left: 5rem; /* indent submenu on mobile */
}

/* ============ DESKTOP OVERRIDE ============ */
@media (min-width: 1120px) {
  .sub-menu {
    left: 0 !important; /* override mobile indent */
    right: auto;
    /*width: max-content;*/
    /*max-width: 600px;*/
    background-color: #0c2632;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

.sub-menu.open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.menu-item-has-children:hover > .sub-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
/* Show sub-menus on hover for desktop */
@media (min-width: 1120px) {
  .menu-item-has-children:hover > .sub-menu {
    display: block;
  }
}
/* ============== Submenu Styling ============== */
/* Reveal dropdown on hover 
.main-navigation li:hover > ul {
  display: block;
}*/
/* Dropdown list items $$
.main-navigation ul ul li {
  display: block;
  border-top: 1px solid rgba(255,255,255,0.1); /* subtle line $$
  white-space: normal; /* allow wrapping $$
  /*width: 100%;$$
}*/

.main-navigation .nav-menu > li {
  display: flex;
  align-items: center;
  height: 100%;
}
.menu-item > a {
  align-items: center;
}

.main-navigation .nav-menu > li > a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1rem;
}
/* js Dropdown container */
.main-navigation ul ul {
  /*position: absolute;
  display: none;*/
  background-color: #0c2632; 
  z-index: 999;
  margin-top: 0.0rem;
  min-width: 250px;
  min-width: 220px;
  /*max-width: 300px;   /* Optional: limit how wide it can get */
  padding: 0;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  /*  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);*/
  width: fit-content; /* Fit to the widest child */
  /*width: max-content; /* adjusts to longest item + padding */
  top: 100%; /* Align submenu directly below the parent */
  left: 0;
}

/* Show submenu on hover 
.main-navigation li:hover > ul {
  display: block;
}*/


/*
.main-navigation ul ul li:first-child {
  border-top: none;
}
*/
/* Submenu links $$
.main-navigation ul ul li a {
  display: block;
  padding: 0.75rem 1rem;
  color: #53b0d7; /* blue text $$
  background-color: #ffffff; /* white background $$
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease;
}*/

/* prevent main nav from wrapping to two lines within a link */

.main-nav .nav-menu > li > a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;     /* Optional: fades long text with "..." */
  display: inline-block;
}
@media (min-width: 1120px) {
  .main-nav .nav-menu {
    justify-content: center;
  }
}



/* active sub menu fix Start */
.main-nav .nav-menu li.current-menu-item a {
  color: #53b0d7 !important;
  font-weight: 600 !important;
  transition: color 0.2s ease, background-color 0.2s ease;
  display: block;
  padding: 0.75rem 1rem;
}
.main-nav .nav-menu li.current-menu-item .sub-menu li.menu-item a {
  color: #ffffff !important;
  font-weight: 500 !important;
  transition: color 0.2s ease, background-color 0.2s ease;
  text-decoration: none;
}
.main-nav .nav-menu li.current-menu-item .sub-menu li.menu-item a:hover {
  color: #53b0d7 !important;
  font-weight: 500 !important;
  transition: color 0.2s ease, background-color 0.2s ease;
}
/* active sub menu fix END



/* Base submenu style */
/*
.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #0c2632; /* Your desired background $$
  padding: 0;
  z-index: 999;
  white-space: normal;
  padding: 0.25rem 0; /* vertical spacing $$
}
*/
/* Reveal submenu on hover */
.menu-item:hover > .sub-menu {
  display: block;
}

/* Sub-menu items styled uniformly */

.sub-menu li {
  display: block;
  width: 80%;
  margin: auto; /* centers the 80% width */
  border-top: 1px solid #999; /* adjust color as needed */
  padding: 0; /* remove any added spacing */
}

/*
.main-nav .sub-menu li a {
  display: block;
  padding: 0.75rem 1rem;
  white-space: nowrap;
  color: #0c2632;
  background-color: #ffffff;
  transition: background-color 0.2s ease;
  border-top: 5px solid #8d0606;
}
*/
/* Sub-menu links */
/*
.sub-menu li a {
  display: block;
  padding: 0.75rem 1.25rem;
  color: #ffffff;
  background-color: #0c2632;
  font-weight: 500;
  text-decoration: none;
  text-align: left;
  transition: all 0.3s ease;
}
*/
.sub-menu li a {
  display: block;
  padding: 0.75rem 1.25rem;
  color: #ffffff;
  background-color: #0c2632;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 220px;
}

/* Hover style */
.sub-menu li a:hover {
  background-color: #0c2632;
  color: #53b0d7;
}
@media (min-width: 1120px) {
  .main-navigation ul ul,
  .sub-menu {
    width: max-content;         /* Shrinks to fit the longest item */
    max-width: 500px;          /* Optional: cap the width */
    left: 0;                    /* Keep aligned to parent */
    padding: 0;
    background-color: #0c2632;  /* Or your preferred color */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  
  }

  .main-navigation ul ul li,
  .sub-menu li {
    width: 100%;                /* Fills the submenu container */
  }
.main-nav .nav-menu > li > a,
.main-nav .nav-menu > li.current-menu-item > a,
.main-nav .nav-menu > li.current_page_item > a,
.main-nav .nav-menu > li.current-menu-ancestor > a {
  font-weight: 500;         /* Make consistent (instead of normal vs bold) */
  padding: 0.25rem 1.25rem;
  line-height: 1.25rem;     /* Ensure height doesn't shift */
  height: 100%;
}
}
/* Only indent on small screens (<1024px) 
@media (max-width: 1023px) {
  .sub-menu {
    left: 5rem;
  }
}*/

/* On desktop, reset to align with parent */
@media (min-width: 1120px) {
  .sub-menu {
    left: 0;
  }
}

/*indent Sub Menu */
@media (min-width: 700px) {
  .sub-menu {
    left: 5rem;
  }

  .main-navigation ul ul li a,
  .sub-menu li a {
    white-space: normal;        /* ✅ Allow wrapping */
    overflow-wrap: break-word;
    padding: 0.75rem 1rem;
  }
}

/* --- Width matching parent or longest child --- */
.menu-item-has-children {
  position: relative;
}

.menu-item-has-children > a,
.menu-item-has-children .sub-menu li a {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}






/* Hover for light mode */
.main-navigation ul ul li a:hover {
  color: #0c2632; /* navy on hover */
  background-color: #f2f2f2;
}
.sub-menu li a {
  background-color: #0c2632;
  color: #ffffff;
}
.sub-menu li a:hover {
  background-color: #0c2632;
  color: #53b0d7;
}
/* Remove hover effects on desktop sub-menu items */
@media (min-width: 1120px) {
  .main-navigation ul ul li a:hover,
  .sub-menu li a:hover {
    background-color: inherit;
    color: inherit;
  }
}

/* ============== Dark Mode ============== */
.theme-dark .main-navigation ul ul {
  background-color: #0c2632;
}

.theme-dark .main-navigation ul ul li {
  border-top: 1px solid #333;
}

.theme-dark .main-navigation ul ul li a {
  background-color: #0c2632;
  color: #53b0d7;
}
/* This may n
.theme-dark .main-navigation ul ul li a:hover {
  color: #ffffff;
  background-color: #0c2632;
}*/


/* fix padding on sub menu items END */
/* Remove Active lInk on sub menu items start */
/*
@media (min-width: 1024px) {
  .main-navigation .sub-menu .current-menu-item > a,
  .main-navigation .sub-menu .current_page_item > a,
  .main-navigation .sub-menu .current-menu-ancestor > a,
  .main-navigation .sub-menu .current_page_ancestor > a,
  .main-navigation .sub-menu .current-menu-parent > a,
  .main-navigation .sub-menu .current_page_parent > a {
    color: #ffffff !important;
    background-color: #0c2632 !important;
  }

  .main-navigation .sub-menu li a:hover {
    color: #53b0d7 !important;
    background-color: #0c2632 !important;
  }
}*/

/* Remove Active lInk on sub menu items end */
/* fix padding on sub menu items END */
/* Remove Active lInk on sub menu items start */
.main-nav .sub-menu li > a {
  color: #ffffff !important;
  background-color: #0c2632 !important;
}
.main-nav .sub-menu li > a:hover {
  color: #53b0d7 !important;
  background-color: #0c2632 !important;
}
@media (min-width: 1121px) {
  .main-nav .nav-menu li:hover > .sub-menu {
    display: block;
  }
}