.site-header {
  position: sticky;
  top: 0px;
  z-index: 1041;
  background-color: var(--background);
}

.text-white {
  color: var(--foreground) !important;
}

.site-branding {
  margin-right: auto !important;
}

body.rtl .site-branding {
  margin-right: 0rem !important;
  margin-left: auto;
}

/* Change color of dropdown links on hover */
#footer-menu li.wpml-ls-item {display: none !important;}

/* Style The Dropdown Button */
.dropdown-toggle {
  background-color: transparent !important;
  color: var(--foreground) !important;
  border: none;
  cursor: pointer;
  width: 124px;
  margin-left: 0px;
}

.dropdown-toggle::after {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  content: ' ';
  background: url('../icons/dropdown-dark.svg') no-repeat scroll center;
  background-color: transparent;
  background-size: 15px 15px;
  width: 15px;
  height: 15px;
  margin-left: 10px;
  margin-right: 3px;
  margin-top: 3px;
  text-align: center;
}

.darkmode .dropdown-toggle::after {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  content: ' ';
  background: url('../icons/dropdown.svg') no-repeat scroll center;
  background-color: transparent;
  background-size: 15px 15px;
  width: 15px;
  height: 15px;
  margin-left: 10px;
  margin-right: 3px;
  margin-top: 3px;
  text-align: center;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-menu {
  display: none;
  position: absolute;
  background-color: var(--clr-primary);
  color: var(--clr-light) !important;
  border: 2px solid var(--clr-light) !important;
  min-width: 140px;
  text-align: center !important;
  z-index: 1;
}

.dropdown-menu li  {
  text-align: center !important;
}

.dropdown .dropdown-menu li  {
  text-align: center !important;
}

.dropdown .dropdown-menu li.nav-item a.dropdown-item {
  text-align: center !important;
}


.dropdown .dropdown-menu li.nav-item a.dropdown-item {
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--clr-light) !important;
}

.dropdown .dropdown-menu li.nav-item a.dropdown-item:hover {
  background: transparent !important;
  color: var(--clr-accent) !important;
}

a.dropdown-item {
  color: var(--background) !important;
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
  text-align: center;
  background: transparent;
}

/* Links inside the dropdown */
.dropdown-menu a:hover {
  color: var(--white);
  border-radius: 0;
  text-align: center;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Style The Dropdown Button */
.mobile .menu-item-has-children {
  background-color: var(--background);
  color: var(--foreground) !important;
  color: white;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  font-size: 1rem;
}

/* Style The Dropdown Button */
.mobile .menu-item-has-children a {
  text-decoration: underline;
}

.mobile .menu-item-has-children::before {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  content: ' ';
  background: url('../icons/language-dark.svg') no-repeat scroll center;
  background-color: transparent;
  background-size: 18px 18px;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  margin-top: 3px;
  text-align: center;
}

body.rtl .mobile .menu-item-has-children::before {
  margin-right: 0px;
  margin-left: 5px;
}

.darkmode .mobile .menu-item-has-children::before {
  background: url('../icons/language.svg') no-repeat scroll center;
}

/* Dropdown Content (Hidden by Default) */
.sub-menu {
  display: inline-flex;
  position: relative;
  background-color: var(--background);
  min-width: 160px;
  margin-left: .5rem;
  z-index: 1;
}

/* Dropdown Content (Hidden by Default) */
.mobile .menu-item-has-children .sub-menu li a {
  text-decoration: none;
  margin-left: .5rem;
  margin-right: .5rem;
}

/* Change color of dropdown links on hover */
.menu-item-has-children .sub-menu li:hover {
  text-decoration: underline;
  color: var(--foreground) !important;
}

.navbar {
  padding: 1.5rem 1.5rem .5rem 1.5rem;
  display: flex;
  align-items: center;
  font-family: var(--font-family-sans-serif-headings);
  color: var(--foreground);
  background-color: var(--background);
}

.rtl .navbar {
  font-family: var(--font-family-arabic-sans-serif-arabic-headings);
}

.navbar-links {
  max-width: 920px;
  padding-right: 60px;
}

.navbar-not-logged-in {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  background-color: var(--background);
}

ul.navbar-menu {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 1.15rem;
}

ul.navbar-menu li {
  list-style: none;
  flex: 1 1 auto !important;
}

ul.navbar-menu li a:hover {
  background-color: var(--background);
  border-radius: 1rem;
  color: var(--foreground);
}

.site-footer ul.navbar-menu li a:hover {
  background-color: transparent !important;
}

.site-footer ul.navbar-menu li a {
  font-family: var(--font-family-sans-serif-headings);
}

body.not-home ul.navbar-menu li.current-menu-item a {
  color: var(--foreground);
}

body.not-home ul.navbar-menu li a {
  color: var(--black-transparent);
}

body.not-home ul.navbar-menu li a:hover {
  color: var(--foreground);
}

.logo-icon {
  max-height: 70px;
  width: auto;
}

a.logo:hover {
  text-decoration: none;
  color: var(--foreground);
}

.logo-text {
  color: var(--foreground) !important;
  font-family: var(--font-family-sans-serif-headings);
}

ul.navbar-menu li a {
  padding: .5rem;
  display: flex;
  color: var(--foreground);
}

ul.navbar-menu li.donate-btn a {
  padding: .5rem;
  display: flex;
  justify-content: center;
  margin-right: 1rem;
  color: var(--background);
  background-color: var(--foreground);
}

.darkmode ul.navbar-menu li.donate-btn a {
  padding: .5rem;
  display: flex;
  justify-content: center;
  margin-right: 1rem;
  color: var(--background) !important;
  background-color: var(--foreground);
}

.site-footer ul.navbar-menu li.donate-btn a {
  padding: .5rem;
  display: flex;
  justify-content: center;
  margin-right: 1rem;
  color: var(--white) !important;
  background-color: var(--foreground);
}

.darkmode .site-footer ul.navbar-menu li.donate-btn a {
  color: var(--background) !important;
}

.site-footer ul.navbar-menu li.donate-btn a:hover {
  color: var(--white) !important;
  background: var(--clr-accent) !important;
}

body.not-home ul.navbar-menu li.donate-btn a {
  color: var(--background);
  background-color: var(--foreground);
}

ul.navbar-menu li.donate-btn.current-menu-item a {
  color: var(--background) !important;
  background-color: var(--clr-accent);
}

body.not-home.darkmode ul.navbar-menu li.donate-btn.current-menu-item a {
  color: var(--white) !important;
  background-color: var(--clr-accent);
}

body.not-home ul.navbar-menu li.donate-btn.current-menu-item a {
  color: var(--background) !important;
  background-color: var(--clr-accent);
}

ul.navbar-menu li.donate-btn a:hover {
  border-radius: 0px !important;
  color: var(--white) !important;
  background-color: var(--clr-accent);
}

body.not-home ul.navbar-menu li.donate-btn a:hover {
  border-radius: 0px !important;
  color: var(--white) !important;
  background-color: var(--clr-accent) !important;
}

.toggle-button {
  position: absolute;
  right: 1.5rem;
  top: 3rem;
  width: 30px;
  height: 21px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: var(--foreground);
  border-radius: 10px;
}

li.search {
  width: 100%;
  margin-left: 2rem;
}

.search-field {
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--foreground);
  color: var(--foreground);
  padding-bottom: 8px;
  margin-top: 8px;
}

.search-page-input input[type="search"]{
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--foreground);
  color: var(--clr-light) !important;
  padding-bottom: 8px;
  margin-top: 8px;
}

.search-field:focus {
  outline: 2px solid transparent;
}

.search-field::-webkit-input-placeholder { /* Edge */
  color: var(--black-transparent);
}

.search-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--black-transparent);
}

.search-field::placeholder {
  color: var(--black-transparent);
}

input[type="search"] {
  border: none;
  border-radius: none;
  background-color: var(--foreground);
  color: var(--foreground);
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 30px;
  width: 30px;
  background-size: contain;
  background: transparent;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('./icons/backspace.svg');
}

input.search-field::-webkit-search-cancel-button:hover {
  cursor: pointer;
}

.search-field-button {
  background-color: transparent;
  fill: var(--background) !important;
  -webkit-appearance: none;
  border: none;
  color: var(--foreground) !important;
  padding: .5rem .75rem;
}

.top-of-search .search-field-button {
  background-color: transparent;
  fill: var(--foreground) !important;
  -webkit-appearance: none;
  border: none;
  color: var(--background) !important;
  padding: .5rem .75rem;
}

body.not-home nav:not(.mobile) ul.navbar-menu li.current-menu-item a::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(-125%,-30%);
  width: 18px;
  height: 18px;
  border-radius: 20px;
  background-color: var(--clr-accent);
  margin-right: 10px;
}

body.not-home.rtl nav:not(.mobile) ul.navbar-menu li.current-menu-item a::before {
  margin-right: 40px;
}

body.not-home.rtl nav:not(.mobile) ul.navbar-menu li.current-page-ancestor a::before {
  margin-right: 40px;
}

body.not-home nav:not(.mobile) ul.navbar-menu li.current-page-ancestor a::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(-125%,-30%);
  width: 18px;
  height: 18px;
  border-radius: 20px;
  background-color: var(--clr-accent);
  margin-right: 10px;
}

body.not-home nav:not(.mobile) ul.navbar-menu li.donate-btn.current-menu-item a::before {
  display: none;
}

.af-nav.mobile {
  display: none;
}

@media (max-width: 1114px) {
  .toggle-button {
    display: flex;
  }

  .navbar-links {
    width: 100%;
    display: none;
  }

  .navbar-menu {
    flex-direction: column;
    width: 100%;
    text-align: left !important;
  }

  .navbar-menu li {
    width: 100%;
  }

  .navbar-links {
    max-width: 100%;
    margin-top: 1rem;
  }

  li.search {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links.active {
    display: flex;
  }

  #site-navigation .search-button {
    display: none;
  }

  .navbar.desktop {
    display: none !important;
  }

  .navbar.mobile {
    width: 100%;
  }

  .af-nav.mobile {
    display: flex;
    font-size: 3rem;
    font-family: var(--font-family-sans-serif-headings);
  }

  .navbar.mobile .site-branding {
    margin-right: 0rem !important;
    line-height: 1;
  }

  body.rtl .navbar.mobile .site-branding {
    margin-right: 2rem !important;
    line-height: 1;
  }

  .af-nav.mobile .menu-btn {
    display: none;
  }

  .af-nav.mobile .toggle-button {
    position: absolute;
    padding: 0.25rem 0rem;
    right: 1.5rem;
    top: 1.25rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .af-nav.mobile .toggle-button::after {
    content: ' ';
    position: absolute;
    line-height: 1.25;
    right: 1.5rem;
    top: 1.5rem;
    width: 2rem;
    height: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .af-nav.mobile .menu {
    clear: both;
    max-height: 0;
    overflow: hidden;
    padding: 0rem !important;
  }

  .af-nav.mobile .menu-btn:checked ~ .menu {
    height: 100vh;
    max-height: 100vh;
  }

  .af-nav.mobile .menu-item {
    display: flex;
    align-items: center;
  }

  .af-nav.mobile .menu-item a:focus,
  .af-nav.mobile .menu-item a:active {
    color: var(--clr-accent) !important;
  }

  .af-nav.mobile .current-menu-item > a {
    padding-left: 3rem;
  }

  .af-nav.mobile .current-menu-item::before {
    content: '';
    position: absolute;
    margin-right: 0.5rem;
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    background-color: var(--clr-accent);
  }

  .af-nav.mobile .search-form {
    margin-bottom: 2rem;
  }

  .af-nav.mobile .search-form .form-control {
    height: 2rem;
  }

  .af-nav.mobile .search-form .input-group-btn-modal {
    display: none;
  }

  .af-nav.mobile .search-form,
  .af-nav.mobile .search-form * {
    max-width: 280px;
    padding: 0rem !important;
  }

  .af-nav.mobile input[type="search"] {
    padding: 0rem !important;
    background: none !important;
    color: var(--foreground) !important;
    min-width: 100%;
    font-size: 2rem;
    border-bottom: 2px solid var(--foreground);
    border-radius: 0rem !important;
  }

  .af-nav.mobile .dark-mode-toggle {
    position: relative;
    z-index: 999;
    display: flex;
    top: auto;
    right: auto;
    color: var(--foreground);
    border: none;
    padding: 0px;
    background: transparent;
    cursor: pointer;
    border-radius: 5px;
    width: auto;
    height: auto;
  }

  .af-nav.mobile .dark-mode-toggle::after {
    content: 'Toggle Colors';
    font-size: 2rem;
    align-self: center;
  }

  .af-nav.mobile .dark-mode-toggle svg {
    align-self: center;
    margin-right: 0.5rem;
  }

}