.elementor-8038 .elementor-element.elementor-element-e61def7{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-dfddb1b *//* ==========================================================================
   0. SCREEN READER VISUAL HELPER ENGINE
   ========================================================================== */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   1. GLOBAL NAVIGATION BASE & ROWS
   ========================================================================== */

.nav {
  width: 100%;
  background: var(--p-light-purple, #D2ACFF);
  position: relative;
  z-index: 100;
  box-sizing: border-box;
}

/* ========================================================================== 
2. DESKTOP CORE STYLES & INTERACTION SYSTEM (Min-width: 992px) 
========================================================================== */
@media (min-width: 992px) { 
  .nav-desktop-container, .elementor-element .nav-desktop-container  { 
    display: block !important; 
  }


  .nav-top-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
     border-bottom: 1px solid var(--colour-border-light-purple, #9E7FFF) !important; 
    padding: 0.75rem 3.75rem !important;
  }
  
  .nav-bottom-row { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
      border-bottom: 1px solid var(--colour-border-light-purple, #9E7FFF) !important; 
          padding: 0 3.75rem !important;

  }
  
  .nav-mobile-container { 
    display: none !important; 
  }
  
  .nav-top-actions { 
    display: flex !important; 
    align-items: center !important; 
    gap: 0.75rem !important; 
  }
  
  .nav.nav a.nav-item-link-direct, 
  .nav-desktop-container a.nav-item-link-direct { 
    font-weight: 600 !important; 
    display: inline-flex !important; 
    align-items: center !important; 
    padding: 0.75rem 1rem !important; 
    text-decoration: none !important; 
    color: var(--colour-text, #160158) !important; 
    background-color: transparent !important; 
    box-sizing: border-box !important; 
    border-bottom: 2px solid transparent !important; 
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important; 
  }
  
  .nav-item-btn{
      font-weight: 600 !important; 
  }
  .nav.nav a.nav-item-link-direct:hover, 
  .nav-desktop-container a.nav-item-link-direct:hover { 
    font-weight: 600 !important; 
    background-color: var(--p-soft-purple, #DDC1FF) !important; 
    color: var(--colour-link-hover, #2D1583) !important; 
    border-bottom: 2px solid var(--p-deep-purple, #160158) !important; 
  }
}

/* Large Desktop Screens (1025px+) */
@media (min-width: 1025px) {
  .nav-top-row {
    padding: 0.75rem 7.5rem !important;
  }
  .nav-bottom-row {
    padding: 0 7.5rem !important;
  }
}


/* ==========================================================================
   3. DESKTOP BUTTONS & DROPDOWN SYSTEMS
   ========================================================================== */

/* Donate Button */
a.nav-donate-btn {
    background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border: 1px solid var(--btn-primary-border) !important;
  border-radius: 1.25rem !important;
  font-weight: 400 !important;
padding: 0.75rem 1.25rem !important;
transition: all 0.2s ease !important;
}

a.nav-donate-btn:hover {
  background-color: var(--btn-primary-hover-bg) !important;
  color: var(--btn-primary-hover-text) !important;
  border-color: #5840A5 !important;
  text-decoration: underline !important;
  box-shadow: 0 0px 10px rgba(22,1,18,0.20) !important; 
}

/* Nav Menu Items & Dropdowns */
.nav-menu {
  display: flex !important;
  margin: 0 !important;
}

.nav-item {
  position: relative !important;
  display: flex !important;
}

.nav-item-btn {
  display: flex !important;
  gap: 0.5rem !important;
  border-radius: 0 !important;
  padding: 0.75rem 0.5rem !important;
  background: transparent !important;
  border: none !important;
  color: var(--p-deep-purple) !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  align-items: center;
  height: 3.75rem;
  font-size: 1.1rem !important;
}

.nav-item-btn:hover,
.nav-item-btn[aria-expanded="true"] {
  background: var(--p-soft-purple) !important;
  border-bottom: 2px solid var(--p-deep-purple) !important;
  border-radius: 0 !important;
  color: var(--colour-link-hover) !important;
    align-items: center !important;
}

.nav-dropdown[hidden] {
  display: none !important;
}

.nav-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: var(--p-soft-purple) !important;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.25) !important;
  padding: 1rem !important;
  z-index: 200 !important;
  width: auto !important;
  min-width: unset !important;
  white-space: nowrap !important;
  border-radius: 0 0 0.375rem 0.375rem !important;
}

.nav-dropdown--two-col:not([hidden]) {
  display: inline-flex !important;
  flex-direction: row !important;
  gap: 3.75rem !important;
  min-width: unset !important;
  width: auto !important;
}

.nav-dropdown--one-col:not([hidden]) {
  display: inline-flex !important;
  flex-direction: column !important;
  min-width: unset !important;
  width: auto !important;
}

.nav-dropdown-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.nav-dropdown-heading {
  font-family: 'Liebling', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  line-height: 0.875rem !important;
  color: var(--p-deep-purple) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-dropdown-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.nav-dropdown-link {
  font-weight: 400 !important;
  display: block !important;
  padding: 0.25rem 0 !important;
  white-space: nowrap !important;
  color: var(--p-deep-purple) !important;
}

.nav-dropdown-link:hover {
  text-decoration: underline !important;
  color: var(--colour-link-hover) !important;
}

/* ==========================================================================
   4. SEARCH COMPONENT (Desktop & Mobile Unified)
   ========================================================================== */

.nav-search-form { 
  display: flex !important; 
  border-radius: 0.375rem !important; 
  align-items: stretch !important; 
  margin: 0.5rem;
}

.nav-search-input { 
  background: var(--p-soft-purple) !important; 
  color: var(--p-deep-purple) !important; 
  border-radius: 0.375rem 0 0 0.375rem !important;
  border: 1px solid var(--colour-border-light-purple) !important;
  height: 2.75rem !important;
  outline: none !important;
}

.nav-search-input::-webkit-input-placeholder {
  color: var(--colour-text) !important;
  opacity: 1 !important;
}

.nav-search-input:focus, 
.nav-search-input:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--p-deep-purple) !important;
  background-color: var(--p-white) !important;
  color: var(--p-deep-purple) !important;
}

.ast-theme-dark .nav-search-input:focus, 
.ast-theme-dark .nav-search-input:focus-visible,
body.dark-mode .nav-search-input:focus, 
body.dark-mode .nav-search-input:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--p-off-white) !important;
}

.nav-search-btn { 
  background: var(--p-soft-purple) !important; 
  border: 1px solid var(--colour-border-light-purple) !important;
  border-left: none !important; 
  padding: 0.375rem 0.5rem !important;
  color: var(--p-deep-purple) !important; 
  font-size: 1.5rem !important; 
  border-radius: 0 0.375rem 0.375rem 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.nav-search-btn:hover,
.nav-search-btn:focus,
.nav-search-btn:focus-visible { 
  background-color: var(--p-deep-purple) !important; 
  color: var(--p-vibrant-green) !important; 
}

.nav-search-btn:hover span,
.nav-search-btn:focus span,
.nav-search-btn:focus-visible span { 
  color: var(--p-vibrant-green) !important; 
}


/* ==========================================================================
   5. ACCESSIBILITY SYSTEM (Desktop & Mobile)
   ========================================================================== */

.accessibility-dropdown {
  position: relative;
  width: auto;
  background: var(--p-soft-purple);
  border-radius: 1.25rem;
  border: 1px solid var(--colour-border-light-purple);
  display: inline-flex;
  flex-direction: column;
  z-index: 9999;
  overflow: visible;
}

.accessibility-dropdown:hover { 
  box-shadow: 0px 0px 10px rgba(22,1,18,0.20); 
}

.accessibility-dropdown.is-open {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: none !important;
  box-shadow: 0 0px 10px rgba(22,1,18,0.20) !important; 
}

#access-toggle {
  all: unset;
  align-self: stretch;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--p-deep-purple);
  font-size: 1.1rem;
}

/* Sizing and scaling for the universal access icon */
#access-toggle .access-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: block;
}

#access-toggle:hover .label { 
  color: var(--colour-link-hover); 
  text-decoration: underline; 
  text-underline-offset: 0.125rem;
}

#access-toggle[aria-expanded="true"] .arrow { 
  transform: rotate(180deg); 
}

#access-menu {
  position: absolute;
  top: 100%;
  left: -1px;
  width: calc(100% + 2px);
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  z-index: 999;
  border-bottom-left-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
  overflow: hidden;
  border: 1px solid var(--colour-border-light-purple);
  background: var(--p-soft-purple);
}

#access-menu:not([hidden]) { 
  display: flex; 
  flex-direction: column; 
}

.access-btn {
  all: unset;
  align-self: stretch;
  padding: 0.75rem 0.75rem 0.5rem 0.75rem !important;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--p-deep-purple) !important;
  background-color: var(--p-soft-purple) !important;
  border: none !important;
  font-size: 1.1rem;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0px !important; 
  box-shadow: none !important;
   font-size: 1.1rem !important;
}

.access-btn.is-active { 
  background-color: #EAE4FF !important; 
  border-radius: 0 !important; 
  box-shadow: none !important; 
  color: var(--colour-link-hover) !important;
}

.access-btn:hover { 
  color: var(--colour-link-hover) !important; 
  text-decoration: underline !important; 
  text-underline-offset: 0.125rem;
  box-shadow: none !important; 
}

.access-btn:focus-visible { 
  outline: none !important; 
  box-shadow: inset 0 0 0 2px var(--p-deep-purple) !important; 
}

 .ast-theme-dark .access-btn:focus-visible,
body.dark-mode .access-btn:focus-visible {
     outline: none !important; 
  box-shadow: inset 0 0 0 2px var(--p-off-white) !important; 
}


/* ==========================================================================
   6. CHEVRON ROTATION SYSTEM
   ========================================================================== */

.nav-item-btn[aria-expanded="true"] .nav-chevron,
.nav-accessibility-btn[aria-expanded="true"] .nav-chevron,
.nav-mobile-item-btn[aria-expanded="true"] .nav-chevron,
.nav-mobile-accessibility-btn[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}


/* ========================================================================== 
7. MOBILE LAYOUT SYSTEM & OVERRIDES (Max-width: 991px) 
========================================================================== */
@media (max-width: 991px) { 
  .nav.nav, .nav { 
    display: block !important; 
    position: relative !important; 
    width: 100% !important; 
    height: auto !important; 
    z-index: 99999 !important; 
    background: #ffffff !important; 
  }

  /* HARD COLLAPSE: Strips dimensions & accessibility tree presence on mobile */
  .nav-top-row, 
  .nav-bottom-row, 
  .nav-desktop-container,
  div.nav-top-row,
  div.nav-bottom-row,
  .elementor-element .nav-bottom-row,
  .elementor-element .nav-top-row { 
    display: none !important; 
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
  }

  .nav-mobile-container { 
    display: block !important; 
    position: relative !important; 
    width: 100% !important; 
    height: auto !important; 
    box-sizing: border-box !important; 
  }

  .nav-mobile-container.is-active { 
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: auto;
    display: flex !important; 
    flex-direction: column !important; 
    z-index: 999999 !important; 
    background: transparent !important; 
  }

  /* Equal Thirds Mobile Header Layout */ 
  .nav-mobile-header { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr 1fr !important;
    align-items: stretch !important; 
    min-height: 6.25rem !important;
    width: 100% !important; 
    border-bottom: 1px solid var(--colour-border-light-purple, #9E7FFF) !important; 
    box-sizing: border-box !important; 
    background: var(--p-light-purple, #D2ACFF) !important; 
    position: relative !important; 
    z-index: 100001 !important; 
    flex-shrink: 0 !important;
  }

  .nav-mobile-logo-link { 
    display: flex !important; 
    padding: 1rem !important; 
    grid-column: 1 !important; 
    width: 130px !important; 
    height: 101px !important; 
    overflow: visible !important; 
    position: relative !important; 
    margin: auto 0 !important; 
  }

  .nav-mobile-logo { 
    display: block !important; 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: contain !important; 
    align-items: center !important; 
  }

  .nav-mobile-actions { 
    display: contents !important; 
  }

  .nav-mobile-donate { 
    grid-column: 2 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 0.5rem !important; 
    border-left: 1px solid var(--colour-border-light-purple, #9E7FFF) !important; 
    width: 100% !important; 
    color: var(--p-deep-purple, #160158) !important; 
    font-weight: 600 !important; 
  }

  .nav-mobile-donate-heart { 
    font-size: 1.5rem !important; 
    line-height: 1 !important; 
  }

  .nav-mobile-donate-text:hover { 
    text-decoration: underline !important; 
    color: var(--colour-link-hover, #2D1583) !important; 
  }

  .nav-mobile-donate:focus-visible { 
    outline: 0.1875rem solid #5840A5 !important; 
    outline-offset: 0.125rem !important; 
  }

  .nav-mobile-menu-btn { 
    grid-column: 3 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 0.5rem !important; 
    border-left: 1px solid var(--colour-border-light-purple, #9E7FFF) !important; 
    border-radius: 0px !important; 
    padding: 0 !important; 
    width: 100% !important; 
    background: transparent !important; 
    border-top: none !important; 
    border-right: none !important; 
    border-bottom: none !important; 
    cursor: pointer !important; 
    font-family: 'Atkinson Hyperlegible', sans-serif !important; 
    font-size: 1.1rem !important; 
    font-weight: 600 !important; 
    color: var(--p-deep-purple, #160158) !important; 
    -webkit-appearance: none !important; 
    appearance: none !important; 
    box-shadow: none !important; 
  }

  .nav-mobile-menu-btn:hover { 
    text-decoration: none !important; 
  }

  .nav-mobile-menu-btn:hover .nav-mobile-menu-label { 
    text-decoration: underline !important; 
    color: var(--colour-link-hover, #2D1583) !important; 
  }

  .nav-hamburger-icon, 
  .nav-close-icon { 
    font-size: 1.5rem !important; 
    line-height: 1 !important; 
  }

  .nav-mobile-menu-btn:focus-visible { 
    outline: 0.1875rem solid #5840A5 !important; 
    outline-offset: 0.125rem !important; 
  }

  /* Mobile Panel & Navigation Drawer */ 
  .nav-mobile-panel[hidden] { 
    display: none !important; 
  }

  .nav-mobile-panel:not([hidden]) { 
    position: relative !important; 
    top: auto !important; 
    left: auto !important; 
    width: 100% !important; 
    height: auto !important; 
    max-height: calc(100vh - 6.25rem) !important;
overflow-y: auto !important; 
    background: var(--p-light-purple, #D2ACFF) !important; 
    z-index: 10000 !important; 
    display: flex !important; 
    flex-direction: column !important;
     padding-bottom: 0px;
     border-top: 0px;
  }

  .nav-mobile-panel, 
  .nav-mobile-menu, 
  .nav-mobile-item, 
  .nav-mobile-toggle-btn, 
  .nav-mobile-linkitem, 
  .nav-mobile-sublink { 
    border-radius: 0px !important; 
    box-shadow: none !important; 
    text-shadow: none !important; 
    filter: none !important; 
  }

  .nav-mobile-menu { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    width: 100% !important; 
  }

  .nav-mobile-item { 
    display: flex !important; 
    flex-direction: column !important; 
    width: 100% !important; 
    border-bottom: 1px solid var(--colour-border-light-purple, #9E7FFF) !important;
  }

  .nav-mobile-item-btn, 
  .nav-mobile-toggle-btn, 
  .nav-mobile-linkitem { 
    background: none !important; 
    border: none !important; 
    padding: 0.75rem 1rem !important; 
    width: 100% !important; 
    text-align: left !important; 
    color: var(--p-deep-purple, #160158) !important; 
    font-size: 1.1rem !important; 
    font-weight: 600 !important; 
    font-family: 'Atkinson Hyperlegible', inherit !important; 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    text-decoration: none !important; 
    box-sizing: border-box !important; 
    cursor: pointer !important; 
    -webkit-appearance: none !important; 
  }
  
  .nav-mobile-toggle-btn:focus-visible { 
  outline: none !important; 
  box-shadow: inset 0 0 0 2px var(--p-deep-purple) !important; 
}

 .ast-theme-dark .nav-mobile-toggle-btn:focus-visible,
body.dark-mode .nav-mobile-toggle-btn:focus-visible {
     outline: none !important; 
  box-shadow: inset 0 0 0 2px var(--p-off-white) !important; 
}

.ast-theme-dark .nav-mobile-linkitem:focus-visible,
body.dark-mode .nav-mobile-linkitem:focus-visible{
  outline: none !important; 
  box-shadow: inset 0 0 0 2px var(--p-off-white) !important; 
}

  .nav-mobile-subitems[hidden] { 
    display: none !important; 
  }

  .nav-mobile-subitems:not([hidden]) { 
    display: flex !important; 
    flex-direction: column !important; 
    background: var(--p-soft-purple, #DDC1FF) !important; 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
  }

  .nav-mobile-sublink { 
    background: none !important; 
    border: none !important; 
    padding: 0.75rem 1.5rem !important; 
    width: 100% !important; 
    text-align: left !important; 
    color: var(--p-deep-purple, #160158) !important; 
    font-size: 1.1rem !important; 
    font-weight: 400 !important; 
    display: block !important; 
    text-decoration: none !important; 
    box-sizing: border-box !important; 
    border-top: 1px solid var(--colour-border-light-purple, #9E7FFF) !important; 
  }

  .nav-mobile-sublink:hover { 
    text-decoration: underline !important; 
  }
  
  .nav-mobile-sublink:focus-visible { 
  outline: none !important; 
  box-shadow: inset 0 0 0 2px var(--p-deep-purple) !important; 
  }
  
  .ast-theme-dark .nav-mobile-sublink:focus-visible,
body.dark-mode .nav-mobile-sublink:focus-visible{
     outline: none !important; 
  box-shadow: inset 0 0 0 2px var(--p-off-white) !important; 
}

  /* Mobile Accessibility Toggle Button Variations */ 
  .nav-mobile-toggle-btn.access-btn { 
    background: var(--p-soft-purple, #DDC1FF) !important; 
    border: none !important; 
    border-top: 1px solid var(--colour-border-light-purple, #9E7FFF) !important; 
   padding: 0.75rem 1rem !important; 
    display: flex !important;
    width: 100% !important; 
    color: var(--p-deep-purple, #160158) !important; 
    font-size: 1.1rem !important; 
    box-sizing: border-box !important; 
  }
  
  .nav-mobile-toggle-btn.access-btn .access-icon {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
    display: block !important;
  }
}

/* Force the text label to align left */
  .nav-mobile-toggle-btn.nav-mobile-accessibility-btn .nav-mobile-text {
    text-align: left !important;
    padding-left: 0.5rem !important;
    margin-right: auto !important; /* Pushes the chevron to the right */
  }

  .nav-mobile-toggle-btn.access-btn.is-active { 
    background-color: #EAE4FF !important; 
    color: var(--colour-link-hover, #2D1583) !important; 
  }

  .nav-mobile-toggle-btn.access-btn:hover { 
    color: var(--colour-link-hover, #2D1583) !important; 
    text-decoration: underline !important; 
    text-underline-offset: 0.125rem;
    background: var(--p-soft-purple, #DDC1FF) !important; 
  }

  .nav-mobile-toggle-btn.access-btn.is-active:hover { 
    background-color: #EAE4FF !important; 
  }

  /* Mobile Search Customizations */ 
  .nav-mobile-search { 
    padding: 0.75rem 1rem 0.75rem 1rem !important; 
    border-bottom: 1px solid var(--colour-border-light-purple, #9E7FFF) !important; 
      border-top: 1px solid var(--colour-border-light-purple, #9E7FFF) !important; 
    background: var(--p-light-purple) !important; 
  }

  .nav-mobile-container .nav-mobile-search .nav-search-input { 
    width: 100% !important; 
    flex: 1 !important; 
    min-height: 44px;
  }

  .nav-mobile-container input[type="search"]:focus, 
  .nav-mobile-container input[type="search"]:focus-visible { 
    outline: none !important; 
    box-shadow: inset 0 0 0 2px var(--p-deep-purple, #160158) !important; 
    background-color: #ffffff !important; 
  }

  .nav-mobile-container .nav-search-btn { 
    background: var(--p-soft-purple, #DDC1FF) !important; 
  }

  .nav-mobile-container .nav-search-btn:hover, 
  .nav-mobile-container .nav-search-btn:focus-visible { 
    background: var(--p-deep-purple, #160158) !important; 
    box-shadow: none !important; 
  }

  /* Universal Mobile Hover/Focus Text Effects */ 
  .nav-mobile-toggle-btn:hover, 
  .nav-mobile-linkitem:hover, 
  .nav-mobile-panel a:hover, 
  .nav-mobile-panel button:hover { 
    color: var(--colour-link-hover, #2D1583) !important; 
    text-decoration: none !important; 
    background: transparent !important; 
  }

  .nav-mobile-toggle-btn:hover .nav-mobile-text, 
  .nav-mobile-linkitem:hover .nav-mobile-text, 
  .nav-mobile-sublink:hover .nav-mobile-text, 
  .nav-mobile-item a:hover .nav-mobile-text { 
    color: var(--colour-link-hover, #2D1583) !important; 
    text-decoration: underline !important;
     text-underline-offset: 0.125rem;
  }

  .nav-mobile-container a:focus-visible, 
  .nav-mobile-container button:focus-visible { 
    outline: none !important; 
    box-shadow: inset 0 0 0 2px var(--p-deep-purple, #160158) !important; 
  } 
/* ==========================================================================
   8. GLOBAL UTILITY MODIFIERS (Hide Engine)
   ========================================================================== */

body.hide-images img:not(.nav-logo-desktop):not(.nav-mobile-logo), 
body.hide-images svg:not(.nav-logo-desktop):not(.nav-mobile-logo) { 
  display: none !important; 
}

body.hide-backgrounds [style*="background-image"] { 
  background-image: none !important; 
}

/* ==========================================================================
NAVIGATION DARK MODE OVERRIDES (Light Purple -> Deep Purple)
========================================================================== */
.ast-theme-dark .nav,
body.dark-mode .nav,
.ast-theme-dark .nav-mobile-header,
body.dark-mode .nav-mobile-header {
  background-color: var(--p-deep-purple) !important;
  border-bottom-color: var(--colour-border-default) !important;
}

.ast-theme-dark .nav-mobile-panel,
body.dark-mode .nav-mobile-panel,
.ast-theme-dark .nav-dropdown,
body.dark-mode .nav-dropdown {
  background-color: var(--p-deep-purple) !important;
  color: var(--colour-text) !important;
}

.ast-theme-dark .nav-mobile-search #nav-mobile-search-input:focus,
.ast-theme-dark .nav-mobile-search #nav-mobile-search-input:focus-visible,
body.dark-mode .nav-mobile-search #nav-mobile-search-input:focus,
body.dark-mode .nav-mobile-search #nav-mobile-search-input:focus-visible {
  box-shadow: inset 0 0 0 2px var(--p-off-white) !important;
  background-color: var(--p-deep-purple, #160158) !important;
  color: var(--p-off-white, #FFFCF8) !important;
}


/* ==========================================================================
   NAVIGATION DARK MODE OVERRIDES (Deep Purple Background & Off-White Text)
   ========================================================================== */

/* 1. Background Switch: Light Purple to Deep Purple */
.ast-theme-dark .nav,
body.dark-mode .nav,
.ast-theme-dark .nav-mobile-header,
body.dark-mode .nav-mobile-header {
  background-color: var(--p-deep-purple) !important;
  border-bottom-color: var(--colour-border-default) !important;
}


/* 2. Panel & Dropdown Adjustments in Dark Mode */
.ast-theme-dark .nav-mobile-panel,
body.dark-mode .nav-mobile-panel,
.ast-theme-dark .nav-dropdown,
body.dark-mode .nav-dropdown,
.ast-theme-dark #access-menu,
body.dark-mode #access-menu,
.ast-theme-dark .accessibility-dropdown,
body.dark-mode .accessibility-dropdown,
.ast-theme-dark .nav-mobile-subitems,
body.dark-mode .nav-mobile-subitems,
.ast-theme-dark .nav-mobile-search,
body.dark-mode .nav-mobile-search,
.ast-theme-dark .nav-search-input,
body.dark-mode .nav-search-input,
.ast-theme-dark .nav-search-btn,
body.dark-mode .nav-search-btn {
  background-color: var(--p-deep-purple) !important;
  color: var(--p-off-white) !important;
  border-color: var(--colour-border-default) !important;
}

/* 3. Text and Link Color Switch: Deep Purple to Off-White */
.ast-theme-dark .nav a,
body.dark-mode .nav a,
.ast-theme-dark .nav-item-btn,
body.dark-mode .nav-item-btn,
.ast-theme-dark .nav-mobile-item-btn,
body.dark-mode .nav-mobile-item-btn,
.ast-theme-dark .nav-mobile-sublink,
body.dark-mode .nav-mobile-sublink,
.ast-theme-dark .nav-mobile-donate,
body.dark-mode .nav-mobile-donate,
.ast-theme-dark .nav-mobile-menu-btn,
body.dark-mode .nav-mobile-menu-btn,
.ast-theme-dark .nav-dropdown-heading,
body.dark-mode .nav-dropdown-heading,
.ast-theme-dark .nav-dropdown-link,
body.dark-mode .nav-dropdown-link,
.ast-theme-dark #access-toggle,
body.dark-mode #access-toggle,
.ast-theme-dark .access-btn,
body.dark-mode .access-btn,
.ast-theme-dark .nav-search-input,
body.dark-mode .nav-search-input,
.ast-theme-dark .nav-search-btn,
body.dark-mode .nav-search-btn {
  color: var(--p-off-white) !important;
}

/* 4. Dark Mode Hover and Active States for Accessibility & Links */
.ast-theme-dark .nav a.nav-item-link-direct:hover,
body.dark-mode .nav a.nav-item-link-direct:hover,
.ast-theme-dark .nav-item-btn:hover,
body.dark-mode .nav-item-btn:hover,
.ast-theme-dark .nav-item-btn[aria-expanded="true"],
body.dark-mode .nav-item-btn[aria-expanded="true"] {
  background-color: #2D1583 !important;
  color: var(--p-cream) !important;
  border-bottom-color: var(--p-cream) !important;
}
/* ==========================================================================
   DARK MODE DROPDOWN LINK HOVER OVERRIDE (Cream on Hover)
   ========================================================================== */

.ast-theme-dark .nav-dropdown-link:hover,
body.dark-mode .nav-dropdown-link:hover,
.ast-theme-dark .nav-mobile-sublink:hover,
body.dark-mode .nav-mobile-sublink:hover,
.ast-theme-dark .nav-dropdown-link:focus-visible,
body.dark-mode .nav-dropdown-link:focus-visible,
.ast-theme-dark .nav-mobile-sublink:focus-visible,
body.dark-mode .nav-mobile-sublink:focus-visible {
  color: var(--p-cream) !important;
  text-decoration: underline !important;
   text-underline-offset: 0.125rem;
}
/* ==========================================================================
   DARK MODE BORDER & LINK HOVER REFINEMENTS
   ========================================================================== */

/* 1. Update borders from #9E7FFF to #5840A5 in dark mode */
.ast-theme-dark,
body.dark-mode {
  --colour-border-light-purple: #5840A5 !important;
}

.ast-theme-dark .nav,
body.dark-mode .nav,
.ast-theme-dark .nav-top-row,
body.dark-mode .nav-top-row,
.ast-theme-dark .nav-bottom-row,
body.dark-mode .nav-bottom-row,
.ast-theme-dark .nav-mobile-header,
body.dark-mode .nav-mobile-header,
.ast-theme-dark .accessibility-dropdown,
body.dark-mode .accessibility-dropdown,
.ast-theme-dark #access-menu,
body.dark-mode #access-menu,
.ast-theme-dark .nav-mobile-item,
body.dark-mode .nav-mobile-item,
.ast-theme-dark .nav-mobile-item-btn,
body.dark-mode .nav-mobile-item-btn,
.ast-theme-dark .nav-mobile-sublink,
body.dark-mode .nav-mobile-sublink,
.ast-theme-dark .nav-mobile-toggle-btn.access-btn,
body.dark-mode .nav-mobile-toggle-btn.access-btn,
.ast-theme-dark .nav-mobile-search,
body.dark-mode .nav-mobile-search,
.ast-theme-dark .nav-search-btn,
body.dark-mode .nav-search-btn {
  border-color: #5840A5 !important;
}

/* 2. Dropdown and Mobile sublinks change to cream on hover in dark mode */
.ast-theme-dark .nav-dropdown-link:hover,
body.dark-mode .nav-dropdown-link:hover,
.ast-theme-dark .nav-mobile-sublink:hover,
body.dark-mode .nav-mobile-sublink:hover,
.ast-theme-dark .nav-dropdown-link:focus-visible,
body.dark-mode .nav-dropdown-link:focus-visible,
.ast-theme-dark .nav-mobile-sublink:focus-visible,
body.dark-mode .nav-mobile-sublink:focus-visible {
  color: var(--p-cream) !important;
  text-decoration: underline !important;
   text-underline-offset: 0.125rem;
}
/* ==========================================================================
   DARK MODE REFINEMENTS: RESOURCES TEXT & COMPONENTS (#2D1583)
   ========================================================================== */

/* 1. Ensure "Resources" link changes to off-white in dark mode */
.ast-theme-dark a[href*="resource-hub"],
body.dark-mode a[href*="resource-hub"],
.ast-theme-dark .nav-item-link-direct[href*="resource-hub"],
body.dark-mode .nav-item-link-direct[href*="resource-hub"],
.ast-theme-dark .nav-mobile-linkitem[href*="resource-hub"],
body.dark-mode .nav-mobile-linkitem[href*="resource-hub"] {
  color: var(--p-off-white) !important;
}

/* 2. Dropdown menus, access menu, and search inputs background in dark mode (#2D1583) */
.ast-theme-dark .nav-dropdown,
body.dark-mode .nav-dropdown,
.ast-theme-dark #access-menu,
body.dark-mode #access-menu,
.ast-theme-dark .accessibility-dropdown,
body.dark-mode .accessibility-dropdown,
.ast-theme-dark .nav-search-input,
body.dark-mode .nav-search-input,
.ast-theme-dark .nav-search-btn,
body.dark-mode .nav-search-btn,
.ast-theme-dark .nav-mobile-subitems,
body.dark-mode .nav-mobile-subitems,
.ast-theme-dark .access-btn,
body.dark-mode .access-btn {
  background-color: #2D1583 !important;
  color: var(--p-off-white) !important;
}

/* 3. Update specific borders from #9E7FFF to #5840A5 in dark mode */
.ast-theme-dark,
body.dark-mode {
  --colour-border-light-purple: #5840A5 !important;
}

.ast-theme-dark .nav,
body.dark-mode .nav,
.ast-theme-dark .nav-top-row,
body.dark-mode .nav-top-row,
.ast-theme-dark .nav-bottom-row,
body.dark-mode .nav-bottom-row,
.ast-theme-dark .nav-mobile-header,
body.dark-mode .nav-mobile-header,
.ast-theme-dark .accessibility-dropdown,
body.dark-mode .accessibility-dropdown,
.ast-theme-dark #access-menu,
body.dark-mode #access-menu,
.ast-theme-dark .nav-mobile-item,
body.dark-mode .nav-mobile-item,
.ast-theme-dark .nav-mobile-item-btn,
body.dark-mode .nav-mobile-item-btn,
.ast-theme-dark .nav-mobile-sublink,
body.dark-mode .nav-mobile-sublink,
.ast-theme-dark .nav-mobile-toggle-btn.access-btn,
body.dark-mode .nav-mobile-toggle-btn.access-btn,
.ast-theme-dark .nav-mobile-search,
body.dark-mode .nav-mobile-search,
.ast-theme-dark .nav-search-btn,
body.dark-mode .nav-search-btn,
body.dark-mode .nav-search-input{
  border-color: #5840A5 !important;
}

/* 4. Dropdown and mobile sublinks color and hover states in dark mode */
.ast-theme-dark .nav-dropdown-link,
body.dark-mode .nav-dropdown-link,
.ast-theme-dark .nav-mobile-sublink,
body.dark-mode .nav-mobile-sublink {
  color: var(--p-off-white) !important;
}

.ast-theme-dark .nav-dropdown-link:hover,
body.dark-mode .nav-dropdown-link:hover,
.ast-theme-dark .nav-mobile-sublink:hover,
body.dark-mode .nav-mobile-sublink:hover,
.ast-theme-dark .nav-dropdown-link:focus-visible,
body.dark-mode .nav-dropdown-link:focus-visible,
.ast-theme-dark .nav-mobile-sublink:focus-visible,
body.dark-mode .nav-mobile-sublink:focus-visible {
  color: var(--p-cream) !important;
  text-decoration: underline !important;
   text-underline-offset: 0.125rem;
}
/* ==========================================================================
   DARK MODE ACCESS MENU ACTIVE STATE REFINEMENT (#4620D0)
   ========================================================================== */

.ast-theme-dark .access-btn.is-active,
body.dark-mode .access-btn.is-active,
.ast-theme-dark .nav-mobile-toggle-btn.access-btn.is-active,
body.dark-mode .nav-mobile-toggle-btn.access-btn.is-active {
  background-color: #4620D0 !important;
  color: var(--p-cream) !important;
}

.ast-theme-dark .access-btn.is-active:hover,
body.dark-mode .access-btn.is-active:hover{
 background-color: #4620D0 !important;}

/* ==========================================================================
   MOBILE DARK MODE: DROPDOWN MENU TITLES (OFF-WHITE)
   ========================================================================== */

.ast-theme-dark .nav-mobile-item-btn,
body.dark-mode .nav-mobile-item-btn,
.ast-theme-dark .nav-mobile-toggle-btn,
body.dark-mode .nav-mobile-toggle-btn,
.ast-theme-dark .nav-mobile-linkitem,
body.dark-mode .nav-mobile-linkitem {
  color: var(--p-off-white) !important;
}
/* ==========================================================================
   DARK MODE MOBILE ACCESS MENU HOVER REFINEMENT (#2D1583 background, cream text)
   ========================================================================== */

.ast-theme-dark .nav-mobile-toggle-btn.access-btn:hover,
body.dark-mode .nav-mobile-toggle-btn.access-btn:hover,
.ast-theme-dark .access-btn:hover,
body.dark-mode .access-btn:hover {
  background-color: #2D1583 !important;
  color: var(--p-cream) !important;
  text-decoration: underline !important;
   text-underline-offset: 0.125rem;
}

/* Ensure the active/hover combination state maintains the correct styling if open */
.ast-theme-dark .nav-mobile-toggle-btn.access-btn.is-active:hover,
body.dark-mode .nav-mobile-toggle-btn.access-btn.is-active:hover {
  background-color: #4620D0 !important;
  color: var(--p-cream) !important;
}

/* =================================================
   DARK MODE DONATE BUTTON
   ================================================= */
   .ast-theme-dark a.nav-donate-btn,
body.dark-mode a.nav-donate-btn {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-border) !important;
}

.ast-theme-dark a.nav-donate-btn:hover,
body.dark-mode a.nav-donate-btn:hover {
  background-color: var(--btn-primary-hover-bg) !important;
  color: var(--btn-primary-hover-text) !important;
    border-color: var(--btn-primary-border) !important;
}


/* ==========================================================================
   GTRANSLATE DROPDOWN RENDERING ENGINE FIX
   ========================================================================== */
.gtranslate-dropdown {
  position: relative !important;
  width: auto;
    min-width: 110px !important;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
  display: inline-flex !important;
  flex-direction: column !important;
  z-index: 9999 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.gtranslate-dropdown .language-icon{
    width: 1.25rem !important;
    height: 1.25rem !important;
}

.gtranslate-dropdown:hover .label{
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.gtranslate-dropdown.is-open {
  border: 1px solid var(--colour-border-light-purple); 
 box-shadow: 0 0px 10px rgba(22,1,18,0.20) !important; 
}

#gtranslate-toggle:focus-visible{
    outline: 3px solid var(--p-deep-purple) !important;
    outline-offset: 3px;
}

#gtranslate-toggle {
  all: unset !important;
  align-self: stretch !important;
  padding: 0.75rem !important;
  gap: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  color: var(--colour-text) !important;
  font-size: 1.1rem !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

#gtranslate-toggle:hover .arrow{
    text-decoration: none !important;
}

#gtranslate-toggle:hover{
    color: var(--colour-link-hover)!important;
}

#gtranslate-toggle[aria-expanded="true"] .arrow {
  transform: rotate(180deg) !important;
}

#gtranslate-menu {
  position: absolute !important;
  top: 100% !important;
  left: -1px !important;
  width: calc(100% + 2px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  z-index: 9999 !important;
  border-bottom-left-radius: 1.25rem !important;
  border-bottom-right-radius: 1.25rem !important;
  border: 1px solid #9E7FFF !important;
  border-top: none !important;
  background: #DDC1FF !important;
  box-sizing: border-box !important;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

#gtranslate-menu:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
}

/* Make sure the wrapper and injected GTranslate elements fill the dropdown */
.gtranslate_wrapper {
  background-color: #DDC1FF !important;
  width: auto;
  box-sizing: border-box !important;
  display: block !important;
  font-weight: 400!important;
border-bottom-left-radius: 1.25rem !important;
  border-bottom-right-radius: 1.25rem !important;
}

.gtranslate_wrapper select, 
.gtranslate_wrapper .gt_container,
.gtranslate_wrapper select.notranslate {
  width: 100% !important;
  background-color: #DDC1FF !important;
  color: #160158 !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  border: 1px solid #9E7FFF !important;
  border-radius: 0.375rem !important;
  padding: 0.375rem !important;
  box-sizing: border-box !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
}

.gtranslate_wrapper select:hover,
.gtranslate_wrapper select:focus {
  background-color: #D2ACFF !important;
  color: #2D1583 !important;
  outline: none !important;
}

/* 1. Target GTranslate Anchor Links List */
#gtranslate-menu .gtranslate_wrapper a.glink {
  display: block !important;
  padding: 0.75rem 0.75rem 0.5rem 0.75rem  !important;
  color: var(--colour-text) !important;
  background-color: #DDC1FF !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  font-weight:400;
}

#gtranslate-menu .gtranslate_wrapper a.glink:hover,
#gtranslate-menu .gtranslate_wrapper a.glink:focus {
  color: var(--colour-link-hover) !important;
  text-decoration: underline !important;
   text-underline-offset: 0.125rem;
  font-weight:400;
}

 #gtranslate-menu .gtranslate_wrapper a.glink:focus-visible,
#gtranslate-menu .gtranslate_wrapper a.glink:focus-visible {
     outline: none !important; 
  box-shadow: inset 0 0 0 2px var(--p-deep-purple) !important; 
}


/* Highlight current active language */
#gtranslate-menu .gtranslate_wrapper a.glink.gt-current-lang {
  background-color: #EAE4FF !important;
  font-weight: 400 !important;
}


/* DARK MODE */
.ast-theme-dark #gtranslate-menu .gtranslate_wrapper a.glink,
body.dark-mode #gtranslate-menu .gtranslate_wrapper a.glink {
    background-color: #2D1583!important;
}

.ast-theme-dark #gtranslate-menu .gtranslate_wrapper a.glink.gt-current-lang,
body.dark-mode #gtranslate-menu .gtranslate_wrapper a.glink.gt-current-lang {
  background-color: #4620D0 !important;
}

.ast-theme-dark #gtranslate-menu,
body.dark-mode #gtranslate-menu{
    border: 1px solid #5840A5 !important;
}

.ast-theme-dark #gtranslate-toggle:focus-visible,
body.dark-mode #gtranslate-toggle:focus-visible{
    outline: 3px solid var(--p-off-white) !important;
      outline: none !important; 
  box-shadow: inset 0 0 0 2px var(--p-off-white) !important; ;
}

 .ast-theme-dark #gtranslate-menu .gtranslate_wrapper a.glink:focus-visible,
 body.dark-mode #gtranslate-menu .gtranslate_wrapper a.glink:focus-visible {
     outline: none !important; 
  box-shadow: inset 0 0 0 2px var(--p-off-white) !important; 
}

/* ========================================
   MOBILE LANGUAGE MENU
   ====================================== */
@media (max-width: 991px) {
  .nav-mobile-panel .accessibility-dropdown.nav-mobile-gtranslate-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    background: var(--p-light-purple, #DDC1FF) !important;
    display: block !important;
    box-shadow: none!important;
  }


  .nav-mobile-panel #gtranslate-toggle-mobile {
    width: 100% !important;
    font-weight: 600 ;
    box-sizing: border-box !important;
    background: var(--p-light-purple, #DDC1FF) !important;
    color: var(--colour-text) !important;
    border: none !important;
    border-bottom: 1px solid #9E7FFF !important;
    border-radius: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }
  
 #gtranslate-toggle-mobile .label{
      text-align: left !important;
    padding-left: 0.5rem !important;
    margin-right: auto !important; 
 }
  
#gtranslate-toggle-mobile:hover .label {
        text-decoration: underline !important;
         text-underline-offset: 0.125rem;
}

#gtranslate-toggle-mobile:hover {
       color: var(--colour-link-hover) !important;
}


  .nav-mobile-panel #gtranslate-toggle-mobile[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
    box-shadow: none !important;
  }

  .nav-mobile-panel #gtranslate-menu-mobile {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid #9E7FFF !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    display: none !important;
  }

  .nav-mobile-panel #gtranslate-menu-mobile:not([hidden]) {
    display: block !important;
  }
}
 .nav-mobile-panel #gtranslate-toggle-mobile:hover {
     box-shadow: none !important;
 }
 
 .nav-mobile-panel #gtranslate-toggle-mobile:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--p-deep-purple, #160158) !important;
}
 
 /* 1. Target GTranslate Anchor Links List */
#gtranslate-menu-mobile .gtranslate_wrapper a.glink {
  display: block !important;
  padding: 0.75rem 0.75rem 0.75rem 2rem  !important;
  color: var(--colour-text) !important;
  background-color: #DDC1FF !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  font-weight:400;
  border-bottom: 1px solid #9E7FFF;
}

#gtranslate-menu-mobile .gtranslate_wrapper a.glink:hover,
#gtranslate-menu-mobile .gtranslate_wrapper a.glink:focus {
  color: var(--colour-link-hover) !important;
  text-decoration: underline !important;
   text-underline-offset: 0.125rem;
  font-weight:400;
}

#gtranslate-menu-mobile .gtranslate_wrapper a.glink:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--p-deep-purple, #160158) !important;
}

 
 /* Highlight current active language */
#gtranslate-menu-mobile .gtranslate_wrapper a.glink.gt-current-lang {
  background-color: #EAE4FF !important;
  font-weight: 400 !important;
}
/* DARK MODE */

.ast-theme-dark #gtranslate-menu-mobile,
body.dark-mode #gtranslate-menu-mobile {
  background-color: var(--p-deep-purple) !important;
}
.ast-theme-dark #gtranslate-toggle-mobile,
body.dark-mode #gtranslate-toggle-mobile {
  background-color: var(--p-deep-purple) !important;
  color: var(--p-off-white) !important;
  border-bottom-color: #5840A5 !important;
}
    
.ast-theme-dark#gtranslate-menu-mobile .gtranslate_wrapper a.glink,
body.dark-mode #gtranslate-menu-mobile .gtranslate_wrapper a.glink {
    background-color: #2D1583!important;
}

.ast-theme-dark #gtranslate-menu-mobile .gtranslate_wrapper a.glink.gt-current-lang,
body.dark-mode #gtranslate-menu-mobile .gtranslate_wrapper a.glink.gt-current-lang {
  background-color: #4620D0 !important;
}

.ast-theme-dark #gtranslate-toggle-mobile:hover,
body.dark-mode #gtranslate-toggle-mobile:hover
{
       color: var(--colour-link-hover) !important;
}

/* Dark Mode Toggle Focus State */
.ast-theme-dark .nav-mobile-panel #gtranslate-toggle-mobile:focus-visible,
body.dark-mode .nav-mobile-panel #gtranslate-toggle-mobile:focus-visible {
  box-shadow: inset 0 0 0 2px var(--p-off-white) !important;
}

/* Dark Mode Menu Items Focus State */
.ast-theme-dark #gtranslate-menu-mobile .gtranslate_wrapper a.glink:focus-visible,
body.dark-mode #gtranslate-menu-mobile .gtranslate_wrapper a.glink:focus-visible {
  box-shadow: inset 0 0 0 2px var(--p-off-white) !important;
}

/* --------------------------------------------------------------------------
   BDEF LOGO DARK MODE: Transparent Cream & Off-White Adaptation
   -------------------------------------------------------------------------- */
.ast-theme-dark .nav-logo-desktop,
body.dark-mode .nav-logo-desktop,
.ast-theme-dark .access-icon,
body.dark-mode .access-icon,
.ast-theme-dark .language-icon,
body.dark-mode .language-icon,
.ast-theme-dark .nav-mobile-logo,
body.dark-mode .nav-mobile-logo {
    /* Turns the cream background elements transparent/blended, 
       and transforms the deep purple elements into clean off-white */
    filter: invert(1) grayscale(100%) brightness(200%);
    mix-blend-mode: lighten;
}

/* ==========================================================================
   SCREEN MASK / READING GUIDE ACCESSIBILITY TOOL
   ========================================================================== */
body.screen-mask-active {
    cursor: ns-resize !important;
}

/* Screen Mask Focus Container */
#bdef-screen-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none !important;
    z-index: 99998 !important;
    display: none;
    box-sizing: border-box;
}

body.screen-mask-active #bdef-screen-mask {
    display: block;
}

/* Top and Bottom Darkened Focus Overshades */
.bdef-mask-shade {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: rgba(22, 1, 88, 0.65); /* Uses --p-deep-purple tint for accessibility contrast */
    transition: background-color 0.3s ease;
}

body.dark-mode .bdef-mask-shade,
.ast-theme-dark .bdef-mask-shade {
    background-color: rgba(22, 1, 88, 0.65); 
}

.bdef-mask-top {
    top: 0;
}

.bdef-mask-bottom {
    bottom: 0;
}

/* Transparent Reading Cutout Window */
.bdef-mask-window {
    position: absolute;
    left: 0;
    width: 100%;
    height: 200px; /* Reading band thickness */
    box-sizing: border-box;
    border-top: 2px dashed var(--p-vibrant-green); /* Vibrant green visual alignment border */
    border-bottom: 2px dashed var(--p-vibrant-green);
    background: transparent;
}

/* Ensure hidden attribute is strictly respected */
[hidden] {
  display: none !important;
}

/* DESKTOP VIEW: Hide Mobile Container */
@media (min-width: 1025px) {
  .nav-mobile-container {
    display: none !important;
  }
  .nav-desktop-container {
    display: block;
  }
}

/* MOBILE VIEW: Hide Desktop Container & Style Mobile Drawer */
@media (max-width: 1024px) {
  .nav-desktop-container {
    display: none !important;
  }
  
  .nav-mobile-container {
    display: block;
    width: 100%;
    background-color: #ffffff;
  }

  .nav-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
  }

  .nav-mobile-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  /* Accessible Touch Target Sizes (Min 44px) */
  .nav-mobile-menu-btn,
  .nav-mobile-toggle-btn,
  .nav-mobile-linkitem,
  .nav-mobile-sublink {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    background: transparent;
    border: none;
    text-align: left;
    text-decoration: none;
    color: inherit;
  }

  .nav-mobile-panel {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    padding-bottom: 1rem;
  }

  .nav-mobile-menu,
  .nav-mobile-subitems {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .nav-mobile-subitems {
    background-color: rgba(0, 0, 0, 0.03);
    padding-left: 1rem;
  }

  /* Clear focus ring for accessibility */
  .nav-mobile-menu-btn:focus-visible,
  .nav-mobile-toggle-btn:focus-visible,
  .nav-mobile-sublink:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 2px;
  }
}

/* ==========================================================================
GREYSCALE & HIGH CONTRAST (WCAG AAA)
   ========================================================================== */

/* 1. LAYOUT-SAFE GREYSCALE MODE */
html.greyscale-mode,
html.greyscale-mode img,
html.greyscale-mode svg {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
}/* End custom CSS */