/* Vanilla responsive header (no frameworks) */
:root{
  --site-header-height: 80px;
  --site-logo-height: 56px;
  --site-header-bg: #65a30d; /* primary-600 */
  --site-header-shadow: 0 2px 10px rgba(0,0,0,0.15);
  --site-nav-font-size: 13px;
  --site-nav-item-pad-x: 8px;
  --site-nav-text: #ffffff;
  --site-nav-text-hover: #ecfccb; /* primary-100 */
  --site-nav-border: rgba(255,255,255,0.25);
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--site-header-bg);
  box-shadow: var(--site-header-shadow);
}

.site-header__inner{
  height: var(--site-header-height);
  /* Matches the site's own widest content container (Tailwind's 2xl breakpoint)
     so the header lines up with the page below it. The old 1200px cap left a
     large empty green margin on wide screens (pushing the logo away from the
     true left edge) and only gave the nav ~1168px to work with no matter how
     wide the browser window actually was - too tight for the longer Amharic/
     Oromo menu labels, which pushed the language switcher off-screen. */
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}

.site-brand__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--site-logo-height);
  height: var(--site-logo-height);
  background: #ffffff;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.site-brand__icon{
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.site-brand__text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
  white-space: nowrap;
}

.site-brand__name{
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.site-brand__tagline{
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Hidden in the sticky nav header at every width: the header's content box is
     capped at max-width:1536px regardless of how wide the browser window is, so
     a wider monitor never actually creates more room here. This ~200px-wide text
     block does not fit alongside the full 9-item nav in Amharic/Oromo, even with
     the nav at its most compact readable size. The full "EMYC + Ethiopian
     Muslim Youth Council" wordmark treatment belongs somewhere with its own
     row - a hero/masthead section or the footer - not squeezed into the thin
     nav bar next to a 3-language menu. */
  display: none;
}

.site-nav{
  margin: 0;
}

.site-nav__list{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav__link{
  display: inline-flex;
  align-items: center;
  height: var(--site-header-height);
  padding: 0 var(--site-nav-item-pad-x);
  font-size: var(--site-nav-font-size);
  color: var(--site-nav-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav__link:hover{
  color: var(--site-nav-text-hover);
  background: rgba(255,255,255,0.12);
}

.site-nav__link[aria-current="page"]{
  font-weight: 600;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.9);
}

/* Desktop dropdown (About) */
.site-nav__item--dropdown{
  position: relative;
}

.site-nav__dropdownToggle{
  font: inherit;
  /* `font: inherit` resets the size to the <li>'s 16px; restore the nav size
     so "About" matches the other links. */
  font-size: var(--site-nav-font-size);
  border: none;
  background: none;
  cursor: pointer;
  gap: 6px;
}

.site-nav__dropdownCaret{
  font-size: 11px;
  transition: transform 0.15s ease;
}

.site-nav__item--dropdown.is-open .site-nav__dropdownCaret{
  transform: rotate(180deg);
}

.site-nav__dropdownMenu{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #ffffff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.site-nav__item--dropdown.is-open .site-nav__dropdownMenu,
.site-nav__item--dropdown:hover .site-nav__dropdownMenu,
.site-nav__item--dropdown:focus-within .site-nav__dropdownMenu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__dropdownLink{
  display: block;
  padding: 10px 20px;
  font-size: 15px;
  color: #374151;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__dropdownLink:hover{
  background: var(--site-header-bg);
  color: #ffffff;
}

.site-nav__dropdownLink[aria-current="page"]{
  font-weight: 600;
  color: var(--site-header-bg);
}

.site-nav__toggle{
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--site-nav-border);
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  color: var(--site-nav-text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.site-nav__toggle:focus{
  outline: 2px solid rgba(2,132,199,0.35);
  outline-offset: 2px;
}

.site-nav__panel{
  display: none;
  border-top: 1px solid var(--site-nav-border);
  background: var(--site-header-bg);
}

.site-nav__panel.is-open{
  display: block;
}

.site-nav__panelList{
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 0;
  list-style: none;
}

.site-nav__panelLink{
  display: block;
  padding: 12px 16px;
  font-size: var(--site-nav-font-size);
  color: var(--site-nav-text);
  text-decoration: none;
}

.site-nav__panelLink:hover{
  background: rgba(255,255,255,0.12);
  color: var(--site-nav-text-hover);
}

/* Mobile "About" accordion */
.site-nav__panelToggle{
  width: 100%;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.site-nav__panelCaret{
  font-size: 12px;
  transition: transform 0.15s ease;
}

.site-nav__panelToggle[aria-expanded="true"] .site-nav__panelCaret{
  transform: rotate(180deg);
}

.site-nav__panelSubList{
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.site-nav__panelSubList.is-open{
  max-height: 240px;
}

.site-nav__panelSubLink{
  display: block;
  padding: 10px 16px 10px 32px;
  font-size: 15px;
  color: var(--site-nav-text-hover);
  text-decoration: none;
}

.site-nav__panelSubLink:hover{
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}

/* Language switcher - pushed to the far right of the header; the nav (above)
   sits immediately after the logo instead of being pulled toward this. */
.site-lang{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}

.site-lang__btn{
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 6px;
  background: rgba(255,255,255,0.12);
  color: var(--site-nav-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-lang__btn:hover{
  background: rgba(255,255,255,0.25);
}

.site-lang__btn.is-active{
  background: #ffffff;
  color: var(--site-header-bg);
  border-color: #ffffff;
}

.site-nav__panel .site-lang{
  padding: 12px 16px 4px;
}

/* Desktop: three equal-weight columns (brand | nav | languages) so the nav
   sits in the true centre of the bar and the logo and language switcher
   balance each other, instead of everything bunching up on the left with an
   empty gap before the language buttons. The outer columns never shrink below
   their content, so long Amharic/Oromo labels can't overlap. */
@media (min-width: 1281px){
  .site-header__inner{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
  }
  .site-brand{
    justify-self: start;
  }
  .site-header__inner > .site-lang{
    justify-self: end;
    margin-left: 0;
  }
}

/* Switch to the hamburger menu below 1280px (this was confirmed working at
   your screen size - the full nav showed correctly, including Oromo, at
   this threshold with the compact 13px/8px nav sizing above). */
@media (max-width: 1280px){
  .site-nav{
    display: none;
  }
  .site-header__inner > .site-lang{
    display: none;
  }
  .site-nav__toggle{
    display: inline-flex;
  }
}

/* True mobile: shrink the header chrome itself too. */
@media (max-width: 768px){
  :root{
    --site-header-height: 68px;
    --site-logo-height: 48px;
  }
}