/* ahen26 - menu and language switch.
   Loaded after top.css. To go back to the previous look, remove the <link> of this file in index.php. */

/* ---------------------------------------------------------------------
   Language switch (all widths): a quiet pill - globe + language code
   --------------------------------------------------------------------- */
header ul.lang-inline { display: flex; margin: 0; padding: 0; list-style: none; }
header ul.lang-inline li {
  float: none;
  display: block;
  width: auto;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  line-height: 1;
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
header ul.lang-inline li a {
  float: none;
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: 100%;
  padding: 0 14px 0 12px;
  box-sizing: border-box;
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration: none;
}
header ul.lang-inline li a::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.6 2.4 4 5.6 4 9s-1.4 6.6-4 9c-2.6-2.4-4-5.6-4-9s1.4-6.6 4-9z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.6 2.4 4 5.6 4 9s-1.4 6.6-4 9c-2.6-2.4-4-5.6-4-9s1.4-6.6 4-9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
header ul.lang-inline li:hover,
header ul.lang-inline li:focus-within {
  background: var(--brand);
  border-color: var(--brand);
}
header ul.lang-inline li:hover a,
header ul.lang-inline li:focus-within a { color: #fff; }
header ul.lang-inline li a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 999px; }

/* ---------------------------------------------------------------------
   Desktop menu: a little more air, calmer underline
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  header ul.nav.menu li a { font-weight: 600; padding: 8px 0; transition: color .18s var(--ease), border-color .18s var(--ease); }
  header ul.nav.menu li.current a,
  header ul.nav.menu li.active a { color: var(--brand); }
}

/* ---------------------------------------------------------------------
   Phone: 44px round menu button | language pill | donate | logo.
   The open menu is a full-width sheet under the header.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* the menu module is only the anchor; the button is its :before, the sheet is positioned against the header */
  header .moduletable.menu { position: static; width: auto; margin: 0; }
  header .moduletable.menu:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 10px;
    z-index: 2001;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--brand);
    border-radius: 50%;
    background:
      linear-gradient(var(--brand), var(--brand)) center 14px / 18px 2px no-repeat,
      linear-gradient(var(--brand), var(--brand)) center 21px / 18px 2px no-repeat,
      linear-gradient(var(--brand), var(--brand)) center 28px / 18px 2px no-repeat,
      #fff;
    cursor: pointer;
    transition: background-color .18s var(--ease);
  }
  /* open: a filled button with an X */
  header .moduletable.menu.open:before {
    background:
      linear-gradient(45deg, transparent 46%, #fff 46% 54%, transparent 54%) center / 18px 18px no-repeat,
      linear-gradient(-45deg, transparent 46%, #fff 46% 54%, transparent 54%) center / 18px 18px no-repeat,
      var(--brand);
  }
  header .moduletable_lang { left: 64px; top: 12px; }
  header ul.lang-inline li { height: 40px; }
  header a.header-donate { left: 148px; }   /* after the language pill (64px + ~76px wide + gap) */

  header .moduletable.menu.open ul.nav.menu {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 2000;
    width: auto;
    margin: 0;
    padding: 6px 20px 18px;
    background: #fff;
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    box-shadow: 0 18px 30px rgba(16, 42, 67, .18);
    animation: nav-sheet .2s var(--ease);
  }
  header .moduletable.menu.open ul.nav.menu li { display: block; padding: 0; margin: 0; }
  header .moduletable.menu.open ul.nav.menu li a {
    display: block;
    padding: 15px 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-inline-start: 4px solid transparent;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
  }
  header .moduletable.menu.open ul.nav.menu li:last-child a { border-bottom: 0; }
  header .moduletable.menu.open ul.nav.menu li.current a,
  header .moduletable.menu.open ul.nav.menu li.active a {
    border-bottom: 1px solid var(--line);
    border-inline-start-color: var(--green);
    background: #f2f8f1;
    color: var(--brand);
    font-weight: 800;
  }
  header .moduletable.menu.open ul.nav.menu li:last-child.current a,
  header .moduletable.menu.open ul.nav.menu li:last-child.active a { border-bottom: 0; }
  header .moduletable.menu.open ul.nav.menu li a:active { background: #eef3f7; }
}
@keyframes nav-sheet { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* narrow phones: a tighter language pill so the donate button clears the (wider) English logo */
@media (max-width: 420px) {
  header ul.lang-inline li a { gap: 4px; padding: 0 10px 0 9px; font-size: .85rem; }
  header ul.lang-inline li a::before { width: 16px; height: 16px; }
  header a.header-donate { left: 134px; padding: 0 12px; font-size: .9rem; }
}
@media (max-width: 420px) {
  html[lang^="en"] header .moduletable.logo img { height: 32px; }   /* the English logo is wider: keep it clear of the donate button */
}