/**
 * Global Header / Footer helpers.
 *
 * Logo height and footer social chips stay here. The header row also shares the
 * static content box (max-w-6xl + px-4 / sm:px-6 / lg:px-8) so the logo and nav
 * line up with hero text. Divi's 5% row padding does not.
 */

/* Overlay hero: white nav links (Messages / homepage heroes). */
body.rlcc-messages-overlay-hero .et-l--header .et_pb_link,
body.home .et-l--header .et_pb_link {
  color: rgba(255, 255, 255, 0.9);
}

body.rlcc-messages-overlay-hero .et-l--header .et_pb_link:hover,
body.home .et-l--header .et_pb_link:hover {
  color: #ffffff;
}

/* Divi Link modules wrap label in <p> — kill extra padding. */
.et-l--header .et_pb_link .et_pb_link_text p {
  margin: 0;
  padding: 0;
}

/*
 * Same horizontal box as the static header/hero:
 * max-w-6xl, centered, with px-4 / sm:px-6 / lg:px-8 (--rlcc-gutter).
 * The row stays full width so the sticky bar still spans the viewport.
 */
/* Archive templates scope the header as .et-db #et-boc .et-l … !important, which beats a class-only rule. */
.et-db #et-boc .et-l.et-l--header .et_pb_row_0_tb_header.et_pb_row,
.et-l--header .et_pb_row_0_tb_header.et_pb_row {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  padding-left: max(
    var(--rlcc-gutter),
    calc((100% - var(--rlcc-content-max)) / 2 + var(--rlcc-gutter))
  ) !important;
  padding-right: max(
    var(--rlcc-gutter),
    calc((100% - var(--rlcc-content-max)) / 2 + var(--rlcc-gutter))
  ) !important;
}

.et-l--header .et_pb_column_0_tb_header {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/*
 * Popup side menu. On CPT archives Divi rewrites
 * ".et_pb_menu_1 .et_mobile_nav_menu" into a selector that never matches,
 * so the list shrinks to about 90px and pins to the right. Other pages
 * already set this to 100%.
 */
@media (max-width: 980px) {
  .et-db #et-boc .et-l.et-l--header .et_pb_menu_1_tb_header .et_mobile_nav_menu,
  .et-db #et-boc .et-l.et-l--header .et_pb_menu_1_tb_header .mobile_nav,
  .et-l--header .et_pb_menu_1_tb_header .et_mobile_nav_menu,
  .et-l--header .et_pb_menu_1_tb_header .mobile_nav {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }
}

/*
 * The header bar is position:absolute over the hero, with z-index only on the
 * inner row. iOS Safari then paints the hamburger on top but sends the tap to
 * the hero, so the menu never opens. A z-index on the header section puts the
 * bar in front for hit testing too.
 */
.et-l--header .et_pb_section_0_tb_header.et_pb_section {
  z-index: 1000;
}

@media (max-width: 980px) {
  .et-l--header .et_pb_icon_0_tb_header {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }
}

/*
 * Homepage phone: the live-stream card uses translateY(-100px) to overlap the
 * hero. Transform leaves that 100px in the layout, so a blank band sits above
 * NEW HERE, and the card covers Plan Your Visit once the hero text wraps.
 * A small margin overlaps the hero without covering the buttons or leaving a hole.
 * The photo column is also forced to 55% at every width. Divi renumbers
 * that column, so the override follows the Who We Are image. Below the
 * static lg breakpoint the photo is full width, larger than the text
 * column. At lg and up the 55% column stays wider than the text column.
 */
@media (max-width: 767px) {
  body.home .et_pb_row:has(+ .et_pb_row img[src*="who-we-are-feature"]).et_pb_row {
    transform: none !important;
    margin-top: -2rem !important;
  }
}

@media (max-width: 1023px) {
  body.home .et_pb_column:has(img[src*="who-we-are-feature"]),
  body.home .et_pb_column:has(img[src*="who-we-are-feature"]) + .et_pb_column {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }
}

/* Homepage sections sit on the 72rem row with no gutter. Inset them so headings share the header edges. */
body.home .et_pb_row_0.et_pb_row,
body.home .et_pb_row_1.et_pb_row,
body.home .et_pb_row_2.et_pb_row,
body.home .et_pb_row_3.et_pb_row,
body.home .et_pb_row_4.et_pb_row,
body.home .et_pb_row_5.et_pb_row,
body.home .et_pb_row_6.et_pb_row {
  box-sizing: border-box;
  padding-left: var(--rlcc-gutter) !important;
  padding-right: var(--rlcc-gutter) !important;
}

/* Keep header logo at design size (Divi height on module alone is unreliable). */
.et-l--header .et_pb_column_0_tb_header .et_pb_image img {
  display: block;
  width: auto;
  height: 2rem; /* h-8 */
  max-width: none;
}

@media (min-width: 640px) {
  .et-l--header .et_pb_column_0_tb_header .et_pb_image img {
    height: 2.5rem; /* sm:h-10 */
  }
}

/* Footer social chips — design h-10 w-10 rounded-md bg-white/10 (FooterSection). */
.et-l--footer .et_pb_social_media_follow li a.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--rlcc-radius-md);
  background-color: rgba(255, 255, 255, 0.1);
  transition: background-color var(--rlcc-duration-slow) var(--rlcc-ease);
}

.et-l--footer .et_pb_social_media_follow li a.icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.et-l--footer .et_pb_social_media_follow li a.icon:before {
  font-size: 18px;
  /* line-height: 1; */
}

/*
 * Stay Connected hangs over the map on purpose. Below desktop the title
 * column stayed at 41% of a shrink-to-fit card, so "Connected" broke.
 * Keep the hang. Give the card the content width and stack the columns.
 */
@media (max-width: 1023px) {
  body.home .et_pb_section:has(.rlcc-optin) {
    height: auto !important;
    padding-bottom: 22rem !important;
  }

  body.home .et_pb_row:has(.rlcc-optin).et_pb_row {
    box-sizing: border-box !important;
    width: calc(100% - (var(--rlcc-gutter) * 2)) !important;
    max-width: var(--rlcc-content-max) !important;
    flex-wrap: wrap !important;
  }

  body.home .et_pb_row:has(.rlcc-optin) > .et_pb_column {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }

  body.home .et_pb_row:has(.rlcc-optin) h3 {
    overflow-wrap: normal;
    word-break: normal;
  }
}

/*
 * Communities How to Join is a 3-track grid with fixed column sizes.
 * On a phone the third card is cut off and titles break mid-phrase.
 * Static stacks the cards below 640px and uses three equal columns above.
 */
body.post-type-archive-community .et_pb_icon_list.et_grid_module {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 639px) {
  body.post-type-archive-community .et_pb_icon_list.et_grid_module {
    grid-template-columns: 1fr !important;
  }
}

/*
 * The What is a Community photo keeps a fixed width. Once the columns
 * stack, it sits short of the text. Static makes it the full content width.
 */
body.post-type-archive-community .et_pb_image:has(img[src*="what-is-community"]),
body.post-type-archive-community .et_pb_image:has(img[src*="what-is-community"]) .et_pb_image_wrap {
  width: 100% !important;
  max-width: none !important;
}

body.post-type-archive-community img[src*="what-is-community"] {
  width: 100% !important;
  max-width: none !important;
  height: 18rem !important;
  object-fit: cover !important;
}

@media (min-width: 640px) {
  body.post-type-archive-community img[src*="what-is-community"] {
    height: 24rem !important;
  }
}

/*
 * Watch and Listen are archives. Divi paints the open sidenav with
 * border-top: 3px solid #2ea3f2 on .et-db #et-boc .et-l .et_mobile_menu.
 * The green customizer rule on those templates is not prefixed, so blue wins.
 * Other pages get a prefixed #365233. Menu 1 is the visible sidenav.
 */
.et-db #et-boc .et-l .et_pb_menu_1_tb_header .et_mobile_menu,
.et_pb_menu_1_tb_header .et_mobile_menu {
  border-color: #365233 !important;
}