/* ==========================================================================
   Shared header and navigation.

   Loaded after css/theme-toggle.css so the rules here win ties against it.
   Everything below applies in both themes unless a rule says otherwise.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Menu items never break across two lines
   main.css puts a 10px dot (::before) in front of every menu link to drive its
   hover effect. That dot takes up layout space, so if flex ever squeezes the
   menu the dot is pushed onto its own line and the label drops underneath it.
   Holding each item at its natural width prevents that.
   -------------------------------------------------------------------------- */
.mainMenu > ul > li {
  flex: 0 0 auto;
}

.mainMenu > ul > li > a {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. Legibility over the hero photograph
   The header floats over whatever image a page leads with, and a bright photo
   swallowed the white menu completely - on the homepage it measured 2.7:1,
   and 1.1:1 against the brightest leaves. A soft top-down scrim keeps the menu
   readable on any image; it fades out entirely once the header sticks and
   gains a solid bar of its own.
   -------------------------------------------------------------------------- */
.header--styleFive::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(0, 0, 0, 0.62) 0%,
              rgba(0, 0, 0, 0.55) 55%,
              rgba(0, 0, 0, 0.32) 80%,
              rgba(0, 0, 0, 0) 100%);
  transition: opacity 0.4s ease;
}

.header--styleFive.sticky::before {
  opacity: 0;
}

/* keep the bar's contents above the scrim */
.header--styleFive .container {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   3. Current-page indicator
   A short underline rather than main.css's hover dot: that dot is positioned
   for a momentary hover and is transformed scale(5), so leaving it switched on
   permanently put a large stray circle above the active item.
   -------------------------------------------------------------------------- */
.mainMenu > ul > li.current > a,
html[data-theme="dark"] .header__menu--style2 .mainMenu > ul > li.current > a {
  color: #08c2ff;
}

.sticky-on.sticky .header__menu--style2 .mainMenu > ul > li.current > a,
html[data-theme="dark"] .sticky-on.sticky .header__menu--style2 .mainMenu > ul > li.current > a {
  color: #08c2ff;
}

.mainMenu > ul > li.current > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
}

/* mobile slide-out menu */
.cc--slideNav .menu > li.current > a,
html[data-theme="dark"] .cc--slideNav .menu > li.current > a {
  color: #08c2ff;
}

/* --------------------------------------------------------------------------
   4. Donate button and theme toggle, balanced
   The donate button stays the brand green - it is the primary call to action -
   but at a weight that sits inside the bar instead of dominating it, and a
   shade that does not glare on the dark theme.
   -------------------------------------------------------------------------- */
.header__right--style2 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}

.header__right--style2 .header__button .btn--styleOne {
  padding: 13px 26px;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

html[data-theme="dark"] .header__right--style2 .btn--secondary {
  background-color: #6d9c2d;
  border-color: #6d9c2d;
}

html[data-theme="dark"] .header__right--style2 .btn--secondary:hover {
  background-color: #7fb432;
  border-color: #7fb432;
}

/* over the hero the toggle is a quiet outlined circle, so it reads as part of
   the bar rather than as a second button competing with donate */
.themeToggle--header {
  width: 42px;
  height: 42px;
  margin-right: 0;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
  box-shadow: none;
}

.themeToggle--header:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: #ffffff;
  color: #ffffff;
}

/* once the header sticks it has a solid bar, so use the normal treatment */
.sticky .themeToggle--header {
  background: var(--tt-bg);
  border-color: var(--tt-border);
  color: var(--tt-icon);
}

.sticky .themeToggle--header:hover {
  border-color: #08c2ff;
  color: #08c2ff;
}