/**
 * Unified site header — same colors on homepage (Tailwind-only) and inner pages (Bootstrap body).
 * Overrides Bootstrap’s default blue link/active styles inside the header.
 */

.infaq-site-header {
  border-bottom: 1px solid rgba(15, 118, 110, 0.1);
  background: rgba(249, 244, 235, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.infaq-site-header a {
  text-decoration: none !important;
}

.infaq-site-header__brand-title {
  color: #0f766e !important;
}

.infaq-site-header__brand-ar {
  color: #c9a96a !important;
}

.infaq-site-header__nav-link {
  color: #3d4543 !important;
  background-color: transparent !important;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.infaq-site-header__nav-link:hover,
.infaq-site-header__nav-link:focus-visible {
  color: #0f766e !important;
  background-color: rgba(15, 118, 110, 0.1) !important;
  outline: none;
  box-shadow: none;
}

.infaq-site-header__nav-link.is-active {
  color: #0f766e !important;
  background-color: rgba(15, 118, 110, 0.1) !important;
}

.infaq-site-header #tw-nav-toggle {
  color: #0f766e !important;
  border-color: rgba(15, 118, 110, 0.2) !important;
  background-color: #fff !important;
}

.infaq-site-header #tw-nav-toggle:hover,
.infaq-site-header #tw-nav-toggle:focus-visible {
  background-color: rgba(15, 118, 110, 0.08) !important;
  outline: none;
}

.infaq-site-header #tw-mobile-panel {
  background-color: #f9f4eb !important;
  border-top: 1px solid rgba(15, 118, 110, 0.1);
}

.infaq-site-header #tw-mobile-panel .infaq-site-header__mobile-link {
  color: #1c2220 !important;
  background-color: transparent !important;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem;
}

.infaq-site-header #tw-mobile-panel .infaq-site-header__mobile-link:hover,
.infaq-site-header #tw-mobile-panel .infaq-site-header__mobile-link:focus-visible {
  color: #0f766e !important;
  background-color: rgba(15, 118, 110, 0.1) !important;
  outline: none;
}

.infaq-site-header #tw-mobile-panel .infaq-site-header__mobile-link.is-active {
  color: #0f766e !important;
  background-color: rgba(15, 118, 110, 0.1) !important;
}

/* Spacer below fixed header — taller on handheld so hero Arabic is not clipped */
.site-header-spacer {
  height: 5rem;
}

@media (max-width: 1023px) {
  .site-header-spacer {
    height: calc(5.75rem + env(safe-area-inset-top, 0px));
  }
}

@media (max-width: 639px) {
  .site-header-spacer {
    height: calc(5.25rem + env(safe-area-inset-top, 0px));
  }

  .infaq-site-header > .mx-auto {
    gap: 0.375rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Brand block: logo + text share left column; truncate instead of overlap CTAs */
  .infaq-site-header__brand-link {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(100% - 8.75rem);
    overflow: hidden;
  }

  .infaq-site-header__logo {
    height: 2.375rem;
    width: 2.375rem;
  }

  .infaq-site-header__brand-text {
    min-width: 0;
    overflow: hidden;
    gap: 0.0625rem;
  }

  .infaq-site-header__brand-title {
    font-size: 0.6875rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .infaq-site-header__brand-ar {
    font-size: 0.8125rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-bar-actions {
    flex-shrink: 0;
    gap: 0.375rem;
  }
}

/* Very narrow phones: shorter Donate label */
.header-donate-label--short {
  display: none;
}

@media (max-width: 389px) {
  .header-donate-label--full {
    display: none;
  }

  .header-donate-label--short {
    display: inline;
  }

  .infaq-site-header__brand-link {
    max-width: calc(100% - 7.5rem);
  }
}

/* Full-viewport heroes: start content lower on handheld (homepage, etc.) */
@media (max-width: 1023px) {
  .home-hero {
    justify-content: flex-start !important;
  }

  .home-hero__inner {
    justify-content: flex-start !important;
    padding-top: 2rem !important;
  }
}