/* ============================================
   COURAGE AGAINST CANCER — HEADER FIX CSS
   Paste into: Appearance → Customize → Additional CSS
   ============================================ */


/* --- 1. HIDE THE DUPLICATE SECOND NAV MENU --- */
/* The header is rendering two navigation lists — this hides the extra one */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container:not(.is-menu-open) ~ .wp-block-navigation__responsive-container,
header .wp-block-navigation:last-of-type {
  display: none !important;
}

/* Keep only the first nav visible on desktop */
header .wp-block-navigation:first-of-type {
  display: flex !important;
}


/* --- 2. FIX HEADER LAYOUT — logo left, nav right --- */
.wp-site-blocks > header,
.site-header,
header.wp-block-template-part {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 32px !important;
  flex-wrap: nowrap !important;
  background-color: #fff !important;
  border-bottom: 2px solid #8B1A1A !important;
  gap: 16px !important;
}


/* --- 3. LOGO — constrain size, no stretching --- */
.wp-block-site-logo,
.wp-block-site-logo a,
header .wp-block-site-logo {
  flex-shrink: 0 !important;
  width: 70px !important;
  height: auto !important;
  display: block !important;
}

.wp-block-site-logo img,
header .wp-block-site-logo img {
  width: 70px !important;
  height: auto !important;
  max-width: 70px !important;
  display: block !important;
}


/* --- 4. SITE TITLE & TAGLINE — keep next to logo, no overflow --- */
.wp-block-site-title,
.wp-block-site-title a {
  font-family: Montserrat, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #8B1A1A !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.wp-block-site-tagline {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 11px !important;
  color: #555 !important;
  white-space: nowrap !important;
}


/* --- 5. NAVIGATION — align to the right, wrap links neatly --- */
header .wp-block-navigation,
header nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  flex: 1 !important;
}

header .wp-block-navigation .wp-block-navigation__container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

header .wp-block-navigation-item__content,
header .wp-block-navigation a {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #8B1A1A !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  transition: background 0.2s, color 0.2s !important;
}

header .wp-block-navigation-item__content:hover,
header .wp-block-navigation a:hover {
  background-color: #8B1A1A !important;
  color: #fff !important;
}


/* --- 6. HIDE MOBILE MENU BUTTON on desktop --- */
@media (min-width: 769px) {
  .wp-block-navigation__responsive-container-open,
  button.wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  .wp-block-navigation__responsive-container {
    display: none !important;
  }

  header .wp-block-navigation .wp-block-navigation__container {
    display: flex !important;
  }
}


/* --- 7. MOBILE — stack logo above nav, full-width hamburger menu --- */
@media (max-width: 768px) {
  .wp-site-blocks > header,
  .site-header,
  header.wp-block-template-part {
    flex-wrap: wrap !important;
    padding: 10px 16px !important;
    justify-content: space-between !important;
  }

  .wp-block-site-logo img {
    width: 52px !important;
    max-width: 52px !important;
  }

  .wp-block-site-title a {
    font-size: 14px !important;
  }

  .wp-block-site-tagline {
    display: none !important;
  }

  /* Keep hamburger button visible on mobile */
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  /* Hide inline nav links on mobile (show only in hamburger) */
  header .wp-block-navigation > .wp-block-navigation__container {
    display: none !important;
  }
}


/* --- 8. SEARCH ICON — move to far right, clean up spacing --- */
.wp-block-search__button,
.wp-block-navigation .wp-block-search {
  flex-shrink: 0 !important;
  margin-left: 8px !important;
}