/*
|--------------------------------------------------------------------------
| Gillingham Storage Header CSS
|--------------------------------------------------------------------------
| Candidate: v1.1.19
| Based on approved v1.1.9 header baseline
| Change scope: sitewide mobile header centring + shared header baseline
| Status: test only - do not lock until approved
|--------------------------------------------------------------------------
*/

/* 1. Variables */
:root {
  --gill-blue: #0ea5e9;
  --gill-blue-hover: #0891cf;
  --gill-yellow: #ffd93d;
  --gill-white: #ffffff;
  --gill-black: #000000;
  --gill-deep: #123e6d;
  --gill-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  --gill-more-width: 168px;
  --gill-portal-width: 220px;
}

/* 2. Transparent header shell */
.site-header,
.inside-header,
.main-navigation,
.inside-navigation,
.navigation-search {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.site-header,
.inside-header {
  overflow: visible !important;
}

/* 3. Header spacing and logo visibility */
.inside-header {
  padding-top: 35px !important;
  padding-bottom: 35px !important;
}

.inside-header > .site-logo,
.inside-header > .site-branding {
  margin: 0 !important;
  padding: 0 !important;
  align-self: end !important;
  overflow: visible !important;
  line-height: 0 !important;
  transform: none !important;
}

.site-logo a,
.site-branding a,
.custom-logo-link {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

.site-logo img,
.site-branding img,
.custom-logo,
.custom-logo-link img,
.header-image {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-height: 78px !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  vertical-align: bottom !important;
}

/* 4. Shared type rules */
.main-title a,
.site-logo a,
.main-navigation .main-nav > ul > li > a,
.main-navigation .main-nav > ul > li > .dropdown-menu-toggle,
.menu-toggle {
  font-family: "Nunito", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.main-title a,
.site-logo a,
.main-navigation .main-nav > ul > li > a,
.main-navigation .main-nav > ul > li > .dropdown-menu-toggle,
.menu-toggle {
  color: var(--gill-white) !important;
}

/* 5. Cart removal */
.main-navigation .wc-menu-item,
.mobile-bar-items .wc-menu-item,
.mobile-bar-items.wc-mobile-cart-items {
  display: none !important;
}

/* 6–11. Desktop header structure */
@media (min-width: 1025px) {
  .inside-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    column-gap: clamp(24px, 3vw, 48px) !important;
    align-items: end !important;
  }

  .inside-header > .site-logo,
  .inside-header > .site-branding {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: end !important;
  }

  .inside-header > .main-navigation {
    grid-column: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    align-self: end !important;
  }

  .main-navigation .inside-navigation,
  .main-navigation .main-nav {
    width: 100% !important;
  }

  .main-navigation .main-nav > ul {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr) max-content max-content;
    grid-template-rows: auto auto;
    grid-template-areas:
      ". . . . . phone phone"
      ". mid1 mid2 mid3 . more portal";
    column-gap: clamp(18px, 2vw, 32px) !important;
    row-gap: 10px !important;
    align-items: end !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .main-navigation .main-nav > ul > li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    list-style: none !important;
    align-self: end !important;
  }

  .main-navigation .main-nav > ul > li.menu-mid-1 { grid-area: mid1; justify-self: center !important; }
  .main-navigation .main-nav > ul > li.menu-mid-2 { grid-area: mid2; justify-self: center !important; }
  .main-navigation .main-nav > ul > li.menu-mid-3 { grid-area: mid3; justify-self: center !important; }
  .main-navigation .main-nav > ul > li.menu-more-info { grid-area: more; justify-self: end !important; }
  .main-navigation .main-nav > ul > li.menu-portal { grid-area: portal; justify-self: end !important; }
  .main-navigation .main-nav > ul > li.menu-phone { grid-area: phone; justify-self: end !important; align-self: start !important; }

  /* 7. Middle menu items */
  .main-navigation .main-nav > ul > li.menu-mid-1,
  .main-navigation .main-nav > ul > li.menu-mid-2,
  .main-navigation .main-nav > ul > li.menu-mid-3 {
    display: inline-flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  .main-navigation .main-nav > ul > li.menu-mid-1 > a,
  .main-navigation .main-nav > ul > li.menu-mid-2 > a,
  .main-navigation .main-nav > ul > li.menu-mid-3 > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--gill-white) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .main-navigation .main-nav > ul > li.menu-mid-1 > .dropdown-menu-toggle,
  .main-navigation .main-nav > ul > li.menu-mid-2 > .dropdown-menu-toggle,
  .main-navigation .main-nav > ul > li.menu-mid-3 > .dropdown-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 0 6px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--gill-white) !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
  }

  .main-navigation .main-nav > ul > li.menu-mid-1 > a:hover,
  .main-navigation .main-nav > ul > li.menu-mid-2 > a:hover,
  .main-navigation .main-nav > ul > li.menu-mid-3 > a:hover,
  .main-navigation .main-nav > ul > li.menu-mid-1:hover > .dropdown-menu-toggle,
  .main-navigation .main-nav > ul > li.menu-mid-2:hover > .dropdown-menu-toggle,
  .main-navigation .main-nav > ul > li.menu-mid-3:hover > .dropdown-menu-toggle,
  .main-navigation .main-nav > ul > li.menu-mid-1.current-menu-item > a,
  .main-navigation .main-nav > ul > li.menu-mid-2.current-menu-item > a,
  .main-navigation .main-nav > ul > li.menu-mid-3.current-menu-item > a {
    color: var(--gill-white) !important;
  }

  /* 8. Phone row */
  .main-navigation .main-nav > ul > li.menu-phone > a {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--gill-white) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  .main-navigation .main-nav > ul > li.menu-phone > a:hover {
    color: var(--gill-white) !important;
  }

  /* 9. More Info control */
  .main-navigation .main-nav > ul > li.menu-more-info {
    display: inline-flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    width: auto !important;
    background: var(--gill-blue) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  .main-navigation .main-nav > ul > li.menu-more-info > a,
  .main-navigation .main-nav > ul > li.menu-more-info > .dropdown-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    color: var(--gill-white) !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }

  .main-navigation .main-nav > ul > li.menu-more-info > a {
    width: auto !important;
    padding: 0 14px 0 20px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .main-navigation .main-nav > ul > li.menu-more-info > .dropdown-menu-toggle {
    width: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .main-navigation .main-nav > ul > li.menu-more-info:hover,
  .main-navigation .main-nav > ul > li.menu-more-info.current-menu-item {
    background: var(--gill-blue-hover) !important;
  }

  .main-navigation .main-nav > ul > li.menu-more-info:hover > a,
  .main-navigation .main-nav > ul > li.menu-more-info:hover > .dropdown-menu-toggle,
  .main-navigation .main-nav > ul > li.menu-more-info.current-menu-item > a {
    background: transparent !important;
    color: var(--gill-white) !important;
  }

  /* 10. Customer Portal control */
  .main-navigation .main-nav > ul > li.menu-portal {
    display: inline-flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    width: auto !important;
    margin-left: 12px !important;
    background: var(--gill-yellow) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(255, 217, 61, 0.22) !important;
  }

  .main-navigation .main-nav > ul > li.menu-portal > a,
  .main-navigation .main-nav > ul > li.menu-portal > .dropdown-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    color: var(--gill-black) !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }

  .main-navigation .main-nav > ul > li.menu-portal > a {
    width: auto !important;
    padding: 0 14px 0 20px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .main-navigation .main-nav > ul > li.menu-portal > .dropdown-menu-toggle {
    width: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .main-navigation .main-nav > ul > li.menu-portal:hover,
  .main-navigation .main-nav > ul > li.menu-portal.current-menu-item {
    background: var(--gill-yellow) !important;
  }

  .main-navigation .main-nav > ul > li.menu-portal:hover > a,
  .main-navigation .main-nav > ul > li.menu-portal:hover > .dropdown-menu-toggle,
  .main-navigation .main-nav > ul > li.menu-portal.current-menu-item > a {
    background: transparent !important;
    color: var(--gill-black) !important;
  }


  .gill-desktop-hover-enabled .main-navigation .main-nav > ul > li.menu-item-has-children::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    height: 14px !important;
    pointer-events: auto !important;
  }

  /* 11. Desktop dropdowns */
  .main-navigation .main-nav > ul > li.menu-item-has-children > ul.sub-menu {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(8px) !important;
    min-width: 220px !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    background: var(--gill-white) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: var(--gill-shadow) !important;
    white-space: nowrap !important;
    z-index: 999 !important;
  }

  .main-navigation .main-nav > ul > li.menu-more-info > ul.sub-menu,
  .main-navigation .main-nav > ul > li.menu-portal > ul.sub-menu {
    left: auto !important;
    right: 0 !important;
    transform: translateY(8px) !important;
  }

  .main-navigation .main-nav > ul > li.menu-item-has-children:hover > ul.sub-menu,
  .main-navigation .main-nav > ul > li.menu-item-has-children.sfHover > ul.sub-menu,
  .main-navigation .main-nav > ul > li.menu-item-has-children:focus-within > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  .main-navigation .main-nav > ul > li.menu-more-info:hover > ul.sub-menu,
  .main-navigation .main-nav > ul > li.menu-more-info.sfHover > ul.sub-menu,
  .main-navigation .main-nav > ul > li.menu-more-info:focus-within > ul.sub-menu,
  .main-navigation .main-nav > ul > li.menu-portal:hover > ul.sub-menu,
  .main-navigation .main-nav > ul > li.menu-portal.sfHover > ul.sub-menu,
  .main-navigation .main-nav > ul > li.menu-portal:focus-within > ul.sub-menu {
    transform: translateY(0) !important;
  }

  .main-navigation .main-nav > ul > li.menu-item-has-children > ul.sub-menu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  .main-navigation .main-nav > ul > li.menu-item-has-children > ul.sub-menu > li > a {
    display: block !important;
    width: 100% !important;
    padding: 12px 18px !important;
    background: transparent !important;
    color: var(--gill-deep) !important;
    font-family: "Nunito", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
  }

  .main-navigation .main-nav > ul > li.menu-item-has-children > ul.sub-menu > li > a:hover,
  .main-navigation .main-nav > ul > li.menu-item-has-children > ul.sub-menu > li.current-menu-item > a {
    background: rgba(14, 165, 233, 0.08) !important;
    color: var(--gill-blue) !important;
  }
}

/* 12. Mobile / tablet fallback */
@media (max-width: 1024px) {
  .inside-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    position: relative !important;
  }

  .inside-header > .site-logo,
  .inside-header > .site-branding {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    margin-bottom: 0 !important;
  }

  .inside-header > .main-navigation,
  .inside-header > .mobile-menu-control-wrapper,
  .inside-header > #mobile-menu-control-wrapper,
  .inside-header > .menu-toggle,
  .inside-header > button.menu-toggle {
    grid-column: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    z-index: 200 !important;
  }

  .inside-header > .main-navigation {
    width: 0 !important;
    min-width: 0 !important;
    position: static !important;
    overflow: visible !important;
  }

  .site-logo img,
  .site-branding img,
  .custom-logo,
  .custom-logo-link img,
  .header-image {
    max-height: 54px !important;
  }

  .main-navigation,
  .main-navigation .inside-navigation,
  .main-navigation .main-nav {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .inside-header > .main-navigation > .inside-navigation {
    width: 0 !important;
    min-width: 0 !important;
    position: static !important;
    overflow: visible !important;
  }

  /* Hide duplicate mobile controls and bar items */
  .inside-header > .main-navigation > .inside-navigation > .menu-toggle,
  .inside-header > .main-navigation > .inside-navigation > button.menu-toggle,
  .inside-header > .main-navigation .main-nav .menu-toggle,
  .inside-header > .main-navigation .main-nav .mobile-menu-control-wrapper,
  .mobile-bar-items,
  .mobile-bar-items > *,
  .menu-bar-items,
  .menu-bar-items > * {
    display: none !important;
  }

  /* Restore only the header-level trigger or the wrapped trigger */
  .inside-header > .mobile-menu-control-wrapper,
  .inside-header > #mobile-menu-control-wrapper,
  .inside-header > .main-navigation > .inside-navigation > .mobile-menu-control-wrapper,
  .inside-header > .main-navigation > .inside-navigation > #mobile-menu-control-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 260 !important;
  }

  .inside-header > .mobile-menu-control-wrapper > .menu-toggle,
  .inside-header > .mobile-menu-control-wrapper > button.menu-toggle,
  .inside-header > #mobile-menu-control-wrapper > .menu-toggle,
  .inside-header > #mobile-menu-control-wrapper > button.menu-toggle,
  .inside-header > .main-navigation > .inside-navigation > .mobile-menu-control-wrapper > .menu-toggle,
  .inside-header > .main-navigation > .inside-navigation > .mobile-menu-control-wrapper > button.menu-toggle,
  .inside-header > .main-navigation > .inside-navigation > #mobile-menu-control-wrapper > .menu-toggle,
  .inside-header > .main-navigation > .inside-navigation > #mobile-menu-control-wrapper > button.menu-toggle,
  .inside-header > .menu-toggle,
  .inside-header > button.menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;
    min-width: 80px !important;
    height: 80px !important;
    min-height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--gill-white) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .menu-toggle::before,
  .menu-toggle::after,
  .main-navigation .menu-toggle::before,
  .main-navigation .menu-toggle::after {
    display: none !important;
  }

  .menu-toggle .gp-icon,
  .menu-toggle .gp-icon svg,
  .menu-toggle svg {
    width: 36px !important;
    height: 36px !important;
    color: var(--gill-white) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  .main-navigation .main-nav > ul > li > a,
  .main-navigation .main-nav > ul > li > .dropdown-menu-toggle {
    color: var(--gill-white) !important;
  }

  .main-navigation .main-nav > ul > li.menu-phone,
  .main-navigation.toggled .main-nav > ul > li.menu-phone {
    display: none !important;
  }

  .main-navigation.toggled .inside-navigation {
    position: static !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .main-navigation.toggled .main-nav {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
  }

  .main-navigation.toggled .main-nav > ul {
    position: absolute !important;
    top: calc(100% + 16px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(calc(100vw - 32px), 420px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 18px !important;
    list-style: none !important;
    background: var(--gill-deep) !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26) !important;
    z-index: 9999 !important;
    overflow: hidden !important;
  }

  .main-navigation.toggled .main-nav > ul > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .main-navigation.toggled .main-nav > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    background: transparent !important;
    color: var(--gill-white) !important;
    font-family: "Nunito", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    text-align: left !important;
    white-space: normal !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-item-has-children {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px !important;
    align-items: stretch !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .main-navigation.toggled .main-nav > ul > li > .dropdown-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .main-navigation.toggled .main-nav > ul > li > .dropdown-menu-toggle .gp-icon,
  .main-navigation.toggled .main-nav > ul > li > .dropdown-menu-toggle .gp-icon svg,
  .main-navigation.toggled .main-nav > ul > li > .dropdown-menu-toggle svg {
    width: 18px !important;
    height: 18px !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-more-info {
    background: var(--gill-blue) !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-more-info > a,
  .main-navigation.toggled .main-nav > ul > li.menu-more-info > .dropdown-menu-toggle {
    background: transparent !important;
    color: var(--gill-white) !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-portal {
    background: var(--gill-yellow) !important;
    box-shadow: none !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-portal > a,
  .main-navigation.toggled .main-nav > ul > li.menu-portal > .dropdown-menu-toggle {
    background: transparent !important;
    color: var(--gill-black) !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-more-info,
  .main-navigation.toggled .main-nav > ul > li.menu-portal {
    position: relative !important;
    display: block !important;
    min-height: 60px !important;
    overflow: hidden !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-more-info > a,
  .main-navigation.toggled .main-nav > ul > li.menu-portal > a {
    justify-content: center !important;
    min-height: 60px !important;
    padding: 0 68px !important;
    font-size: 23px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-more-info > .dropdown-menu-toggle,
  .main-navigation.toggled .main-nav > ul > li.menu-portal > .dropdown-menu-toggle {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 68px !important;
    min-width: 68px !important;
    height: 60px !important;
    min-height: 60px !important;
    z-index: 2 !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > ul.sub-menu {
    grid-column: 1 / -1 !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
    padding: 10px 0 !important;
    background: var(--gill-white) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > ul.sub-menu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > ul.sub-menu > li > a {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    color: var(--gill-deep) !important;
    font-family: "Nunito", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: normal !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > ul.sub-menu > li > a:hover,
  .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > ul.sub-menu > li.current-menu-item > a {
    background: rgba(14, 165, 233, 0.08) !important;
    color: var(--gill-blue) !important;
  }
}


/* 13. Mobile dropdown refinement */
@media (max-width: 1024px) {
  .main-navigation.toggled .main-nav > ul {
    width: min(calc(100vw - 24px), 440px) !important;
    padding: 18px !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-more-info,
  .main-navigation.toggled .main-nav > ul > li.menu-portal {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-more-info {
    background: var(--gill-blue) !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-portal {
    background: var(--gill-yellow) !important;
    box-shadow: none !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-more-info > a,
  .main-navigation.toggled .main-nav > ul > li.menu-portal > a {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 0 12px 0 30px !important;
    box-sizing: border-box !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-more-info > a {
    color: var(--gill-white) !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-portal > a {
    color: var(--gill-black) !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-more-info > .dropdown-menu-toggle,
  .main-navigation.toggled .main-nav > ul > li.menu-portal > .dropdown-menu-toggle {
    grid-column: 2 !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    right: auto !important;
    z-index: 2 !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > ul.sub-menu {
    grid-column: 1 / -1 !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 12px 0 0 !important;
    padding: 14px !important;
    background: var(--gill-white) !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: none !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > ul.sub-menu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > ul.sub-menu > li + li {
    margin-top: 8px !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-more-info > ul.sub-menu > li > a {
    display: block !important;
    width: 100% !important;
    padding: 18px 22px !important;
    background: var(--gill-white) !important;
    color: var(--gill-black) !important;
    border: 0 !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-more-info > ul.sub-menu > li > a:hover,
  .main-navigation.toggled .main-nav > ul > li.menu-more-info > ul.sub-menu > li.current-menu-item > a {
    background: var(--gill-white) !important;
    color: var(--gill-black) !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-portal > ul.sub-menu {
    padding: 14px !important;
    background: var(--gill-white) !important;
    border-radius: 24px !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-portal > ul.sub-menu > li > a {
    display: block !important;
    width: 100% !important;
    padding: 16px 22px !important;
    background: var(--gill-white) !important;
    color: var(--gill-black) !important;
    border: 0 !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .main-navigation.toggled .main-nav > ul > li.menu-portal > ul.sub-menu > li > a:hover,
  .main-navigation.toggled .main-nav > ul > li.menu-portal > ul.sub-menu > li.current-menu-item > a {
    background: var(--gill-white) !important;
    color: var(--gill-black) !important;
  }
}