#header {
  --header-nav-font: "Helvetica Neue", Arial, sans-serif;
  --header-menu-font: Georgia, "Times New Roman", serif;
}

#header .header-nav-item a,
#header .header-actions-action--cta .btn {
  font-family: var(--header-nav-font) !important;
}

#header .header-menu-nav-item a {
  font-family: var(--header-menu-font) !important;
}

/* ─────────────────────────────────────────────
   DFW Indian Christians — Header controls
   Change these values first.
───────────────────────────────────────────── */
#header {
  --header-bg: #0d2b1e;       /* Forest green */
  --header-link: #ffffff;     /* Navigation links */
  --header-link-hover: #d5b45d;
  --header-gold: #8e661d;
  --header-cta: #c9471d;
  --header-height-custom: 88px;
}

/* Section 0 begins at the top of the page; the header floats over it. */
body.dfw-hero-page #header {
  position: fixed !important;
  inset: 0 0 auto;
  z-index: 1000;
  width: 100%;
}

/* Squarespace can reserve header space on the page wrapper. Section 0 owns
   the opening viewport, so remove that reservation only on the hero page. */
body.dfw-hero-page #page,
body.dfw-hero-page main,
body.dfw-hero-page .page-section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Main header background and height. The script adds the scroll state class. */
#header,
#header .header-background {
  background: var(--header-bg) !important;
  transition: background-color 220ms ease, box-shadow 220ms ease;
}

/* Top of page: let the opening content show through the header. */
#header.dfw-header--at-top,
#header.dfw-header--at-top .header-background,
#header.dfw-header--at-top .header-inner {
  background: transparent !important;
  box-shadow: none !important;
}

#header .header-inner,
#header .header-display-desktop,
#header .header-display-mobile {
  min-height: var(--header-height-custom);
}

/* ─────────────────────────────────────────────
   Desktop navigation
───────────────────────────────────────────── */
#header .header-nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.25vw, 2.75rem);
}

#header .header-nav-item {
  margin: 0;
}

#header .header-nav-item a {
  color: var(--header-link) !important;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, opacity 180ms ease;
}

/* Transparent header: dark links remain legible over the opening page. */
#header.dfw-header--at-top .header-nav-item a {
  color: #000 !important;
}

#header.dfw-header--at-top .header-nav-item a:hover,
#header.dfw-header--at-top .header-nav-item a:focus-visible,
#header.dfw-header--at-top .header-nav-item--active a,
#header.dfw-header--at-top .header-nav-item a[aria-current="page"] {
  color: var(--header-gold) !important;
}

/* Hover, keyboard focus, and active page */
#header .header-nav-item a:hover,
#header .header-nav-item a:focus-visible,
#header .header-nav-item--active a,
#header .header-nav-item a[aria-current="page"] {
  color: var(--header-link-hover) !important;
  opacity: 1;
}

#header .header-nav-item a:focus-visible {
  outline: 1px solid var(--header-link-hover);
  outline-offset: 5px;
}

/* ─────────────────────────────────────────────
   Logo
───────────────────────────────────────────── */
#header .header-title-logo img {
  width: auto;
  max-height: 64px;
  display: block;
  object-fit: contain;
}

/* ─────────────────────────────────────────────
   Find a Community button
───────────────────────────────────────────── */
#header .header-actions-action--cta .btn,
#header .header-menu-cta .btn {
  border: 1px solid var(--header-cta) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  background: var(--header-cta) !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 180ms ease, border-color 180ms ease;
}

#header .header-actions-action--cta .btn:hover,
#header .header-actions-action--cta .btn:focus-visible,
#header .header-menu-cta .btn:hover,
#header .header-menu-cta .btn:focus-visible {
  border-color: var(--header-gold) !important;
  background: var(--header-gold) !important;
}

/* ─────────────────────────────────────────────
   Mobile hamburger and menu overlay
───────────────────────────────────────────── */
#header .header-burger-btn,
#header .header-burger-btn:hover,
#header .header-burger-btn:focus-visible {
  color: #ffffff !important;
}

#header .top-bun,
#header .patty,
#header .bottom-bun {
  background: #ffffff !important;
}

#header .header-menu,
#header .header-menu-bg {
  background: var(--header-bg) !important;
}

#header .header-menu-nav-item a {
  color: #ffffff !important;
  font-size: clamp(1.75rem, 7vw, 3rem);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.05;
  text-decoration: none;
}

#header .header-menu-nav-item a:hover,
#header .header-menu-nav-item a:focus-visible {
  color: var(--header-link-hover) !important;
}

/* ─────────────────────────────────────────────
   Responsive adjustments
───────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  #header {
    --header-height-custom: 72px;
  }

  #header .header-title-logo img {
    max-height: 48px;
  }

  #header .header-menu-nav-wrapper {
    padding-inline: 1.5rem;
  }
}