/************************************************************
 * WHATCANYOUDO — HEADER / NAV / MEGA MENU CSS (FULL FILE)
 * FIXED: mega menu top aligns below top-level nav text (not mid-header)
 * NOTE: normal dropdowns are untouched.
 *
 * UPDATED: Slow down fade-out (close) animation for normal + mega menus.
 *
 * IMPORTANT (MOBILE TOGGLER):
 * - Removed competing 100vw/calc() rules.
 * - Uses ONLY the box-shadow full-bleed technique to prevent the
 *   left white strip / scrollbar rounding issues.
 ************************************************************/

:root {
  --wcyd-dropdown-gap: 50px;                  /* gap below nav before dropdown */
  --wcyd-mega-backdrop: #d4d7dc;              /* solid grey */
  --wcyd-container-width: 1315px;

  /* JS sets this to the mega menu height when open */
  --wcyd-mega-open-height: 0px;

  /*
   * FIX: mega menu needs a top that matches the nav baseline, not the full header.
   */
  --wcyd-mega-top: 176px; /* WAS 146px */

  --wcyd-mega-gap: 100px;            /* mega-only drop distance */

  /************************************************************
   * ANIMATION TUNING
   ************************************************************/
  --wcyd-menu-open-ms: 160ms;        /* keep open snappy */
  --wcyd-menu-close-ms: 420ms;       /* slower fade-out */
  --wcyd-menu-ease: ease-out;

  /* Visual calibration: negative moves mega UP; positive moves it DOWN */
  --wcyd-mega-nudge-y: -5px;
}

/************************************************************
 * WHATCANYOUDO — HEADER TOP BAR (SOCIAL ICONS + SEARCH)
 ************************************************************/

.header-top-bar {
  background-color: #123c61;
  padding: 8px 0;
  width: 100%;
  box-sizing: border-box;
}

.header-top-inner {
  display: block;
  max-width: 1315px;
  margin: 0 auto;
  padding-left: 33.5px;
  padding-right: 33.5px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 27.2px;
}

.header-top-bar .text-content,
.region--header-top .block__content .text-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
}

.header-top-bar .block,
.header-top-bar .block__content,
.header-top-bar .field--name-body {
  margin: 0;
  padding: 0;
}

/************************************************************
 * SOCIAL ICONS (LEFT)
 ************************************************************/

.header-top-bar .social-icons {
  display: flex;
  gap: 16px;
  align-items: center;
}

.header-top-bar .social-icons a {
  color: #ffffff !important;
  font-size: 24px;
  line-height: 24px;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.3s ease;
}

.header-top-bar .social-icons a:hover {
  opacity: 0.75;
}

/************************************************************
 * SEARCH FORM (RIGHT) — PILL SHAPE
 ************************************************************/

.header-top-bar .search-form,
.region--header-top .search-form {
  display: flex;
  align-items: center;
  margin: 0;
  margin-left: auto;
}

.header-top-bar .search-input-wrap,
.region--header-top .search-input-wrap {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 999px;
  overflow: hidden;
  height: 35px;
  min-width: 220px;
  max-width: 260px;
  box-sizing: border-box;
}

.header-top-bar .search-input-wrap input[type="search"],
.region--header-top .search-input-wrap input[type="search"] {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 12px;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  background: transparent;
  color: #333;
  -webkit-appearance: none;
  appearance: none;
}

.header-top-bar .search-input-wrap input[type="search"]::placeholder,
.region--header-top .search-input-wrap input[type="search"]::placeholder {
  color: #666;
  opacity: 0.7;
  line-height: 35px;
}

.header-top-bar .search-input-wrap .search-button,
.region--header-top .search-input-wrap .search-button {
  border: none;
  outline: none;
  padding: 0 12px;
  height: 35px;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-top-bar .search-input-wrap .search-button i,
.region--header-top .search-input-wrap .search-button i {
  font-size: 16px;
  color: #666 !important;
}

.header-top-bar .search-input-wrap .search-button:hover i,
.region--header-top .search-input-wrap .search-button:hover i {
  color: #333 !important;
}

.header-top-bar .search-form input[type="submit"],
.region--header-top .search-form input[type="submit"] {
  display: none !important;
}

/************************************************************
 * MOBILE HEADER TOP BAR — CENTER ICONS ABOVE SEARCH
 ************************************************************/
@media (max-width: 600px) {

  .header-top-bar .text-content,
  .region--header-top .block__content .text-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .header-top-bar .social-icons {
    justify-content: center;
    width: 100%;
  }

  .header-top-bar .search-form,
  .region--header-top .search-form {
    width: 100%;
    margin: 0;
  }

  .header-top-bar .search-input-wrap,
  .region--header-top .search-input-wrap {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

/************************************************************
 * HEADER BOTTOM NAV — MAIN MENU (WP-LIKE TOP LEVEL ITEMS)
 ************************************************************/

/* WCYD: stabilize header vertical layout across Olivero breakpoints */
header.site-header {
  height: auto !important;

  --wcyd-header-min: 146px;
  min-height: var(--wcyd-header-min) !important;

  padding-top: 8px !important;
  padding-bottom: 8px !important;

  display: flex;
  align-items: center !important;

  border-bottom: 0 !important;
}

@media (min-width: 75rem) {
  header.site-header {
    min-height: var(--wcyd-header-min) !important;
    border-bottom: 0 !important;
  }
}

/************************************************************
 * FIX: REMOVE OLIVERO BLOCK SPACING FROM MAIN NAV BLOCK
 ************************************************************/
#block-whatcanyoudo-mainnavigation {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/************************************************************
 * FINE-TUNE MAIN NAV VERTICAL POSITION (WP-LIKE BASELINE)
 ************************************************************/
.primary-nav {
  margin-top: 18px;
}

.primary-nav .navbar {
  padding-top: 0;
  padding-bottom: 0;
}

/* Top-level menu items */
.primary-nav .navbar-nav > .nav-item > .nav-link {
  display: inline-block;
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #333333;
  text-align: center;
  text-decoration: none;
  line-height: 21px;
  padding: 10px 14px;
  margin: 0 4px;
  border-bottom: none;

  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.primary-nav .navbar-nav > .nav-item > .nav-link:hover,
.primary-nav .navbar-nav > .nav-item > .nav-link:focus,
.primary-nav .navbar-nav > .nav-item.show > .nav-link {
  color: rgb(5, 128, 163) !important;
  background-color: transparent !important;
  text-decoration: none;
}

@media (min-width: 992px) {
  .primary-nav .navbar-nav > .nav-item {
    display: flex;
    align-items: center;
  }

  .primary-nav .navbar-nav > .nav-item > .nav-link {
    height: 42px;
    line-height: 21px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/************************************************************
 * BASE: ALL DROPDOWNS (NORMAL + MEGA)
 ************************************************************/
.primary-nav .navbar-nav .dropdown > .dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity var(--wcyd-menu-close-ms) var(--wcyd-menu-ease),
    visibility 0ms linear var(--wcyd-menu-close-ms);
}

/************************************************************
 * NORMAL DROPDOWNS — BULLETPROOF HOVER (NON–MEGA) + GAP
 ************************************************************/
.primary-nav .navbar-nav .dropdown:not(.mega-menu) {
  position: relative;
}

.primary-nav .navbar-nav .dropdown:not(.mega-menu)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: calc(var(--wcyd-dropdown-gap) + 12px);
  background: transparent;
}

.primary-nav .navbar-nav .dropdown:not(.mega-menu) > .dropdown-menu {
  position: absolute;
  top: calc(100% + var(--wcyd-dropdown-gap));
  left: 0;

  background-color: rgba(246, 250, 251, 0.95);
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2px 4px;
  min-width: 180px;
  font-family: "Open Sans", sans-serif;
  z-index: 500;

  border-top: 10px solid rgb(5, 128, 163);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: none;

  transition:
    opacity var(--wcyd-menu-close-ms) var(--wcyd-menu-ease),
    visibility 0ms linear var(--wcyd-menu-close-ms);
}

.primary-nav .navbar-nav .dropdown:not(.mega-menu):hover > .dropdown-menu,
.primary-nav .navbar-nav .dropdown:not(.mega-menu) > .dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity var(--wcyd-menu-open-ms) var(--wcyd-menu-ease),
    visibility 0ms linear 0ms;
}

.primary-nav .navbar-nav .dropdown:not(.mega-menu) .dropdown-item {
  color: #333 !important;
  padding: 6px 10px;
  font-size: 14px;
  background: none !important;
}

.primary-nav .navbar-nav .dropdown:not(.mega-menu) .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/************************************************************
 * MAIN NAV – PSA MEGA MENU (WP-LIKE)
 ************************************************************/
.primary-nav .navbar,
.primary-nav .container-fluid {
  position: relative;
}

.primary-nav .mega-menu {
  position: static;
}

/************************************************************
 * MEGA MENU — HOVER BRIDGE (ACTIVE ONLY WHEN MEGA IS OPEN)
 ************************************************************/
@media (min-width: 992px) {

  :root { --wcyd-navlink-h: 42px; }

  .primary-nav .mega-menu::before {
    content: "";
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--wcyd-container-width), calc(100vw - 40px));
    top: calc(var(--wcyd-mega-top) + var(--wcyd-navlink-h) + var(--wcyd-mega-nudge-y));
    height: calc(var(--wcyd-mega-gap) - var(--wcyd-navlink-h));

    background: transparent;
    z-index: 1019;

    pointer-events: none;
    opacity: 0;
  }

  .primary-nav .mega-menu:hover::before,
  .primary-nav .mega-menu.show::before {
    pointer-events: auto;
    opacity: 1;
  }

  .primary-nav .mega-menu:hover > .dropdown-menu.mega-menu-content,
  .primary-nav .mega-menu .dropdown-menu.mega-menu-content:hover,
  .primary-nav .mega-menu .dropdown-menu.mega-menu-content.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.primary-nav .mega-menu .dropdown-menu.mega-menu-content {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(12px);

  width: min(var(--wcyd-container-width), calc(100vw - 40px));
  max-width: var(--wcyd-container-width);

  top: calc(var(--wcyd-mega-top) + var(--wcyd-mega-gap) + var(--wcyd-mega-nudge-y));

  margin: 0;
  border-radius: 0;
  background-color: #ffffff;

  padding-top: 1.5rem;
  padding-bottom: 1.5rem;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1020;

  border-top: 10px solid transparent;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity var(--wcyd-menu-close-ms) var(--wcyd-menu-ease),
    transform var(--wcyd-menu-close-ms) var(--wcyd-menu-ease),
    visibility 0ms linear var(--wcyd-menu-close-ms),
    border-top-color var(--wcyd-menu-close-ms) var(--wcyd-menu-ease);
}

@media (min-width: 992px) {
  .primary-nav .mega-menu::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;

    top: calc(var(--wcyd-mega-top) + var(--wcyd-mega-gap) + var(--wcyd-mega-nudge-y));
    height: var(--wcyd-mega-open-height);

    background: var(--wcyd-mega-backdrop);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
      opacity var(--wcyd-menu-close-ms) var(--wcyd-menu-ease),
      visibility 0ms linear var(--wcyd-menu-close-ms);
    z-index: 1010;
  }

  .primary-nav .mega-menu:hover::after,
  .primary-nav .mega-menu.show::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
      opacity var(--wcyd-menu-open-ms) var(--wcyd-menu-ease),
      visibility 0ms linear 0ms;
  }
}

.primary-nav .mega-menu .dropdown-menu.mega-menu-content.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  border-top-color: rgb(5, 128, 163);
  transform: translateX(-50%) translateY(0);

  transition:
    opacity var(--wcyd-menu-open-ms) var(--wcyd-menu-ease),
    transform var(--wcyd-menu-open-ms) var(--wcyd-menu-ease),
    visibility 0ms linear 0ms,
    border-top-color var(--wcyd-menu-open-ms) var(--wcyd-menu-ease);
}

@media (min-width: 992px) {
  .primary-nav .mega-menu:hover > .dropdown-menu.mega-menu-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border-top-color: rgb(5, 128, 163);
    transform: translateX(-50%) translateY(0);

    transition:
      opacity var(--wcyd-menu-open-ms) var(--wcyd-menu-ease),
      transform var(--wcyd-menu-open-ms) var(--wcyd-menu-ease),
      visibility 0ms linear 0ms,
      border-top-color var(--wcyd-menu-open-ms) var(--wcyd-menu-ease);
  }
}

.primary-nav .mega-menu > .nav-link.dropdown-toggle {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.primary-nav .mega-menu > .nav-link.dropdown-toggle::after {
  margin-left: 0.4rem;
}

/************************************************************
 * PSA MEGA MENU – TABS LAYOUT
 ************************************************************/
.primary-nav .mega-menu .psa-mega-row {
  align-items: stretch;
}

.primary-nav .mega-menu .psa-tabs {
  border-right: 1px solid #e2e2e2;
  padding-right: 1rem;
  margin-bottom: 1rem;
}

.primary-nav .mega-menu .psa-tabs-header {
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
  color: #666;
}

.primary-nav .mega-menu .psa-tab-link {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
  color: #333;
  cursor: pointer;
  border-radius: 3px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  line-height: 20px;
}

.primary-nav .mega-menu .psa-tab-link:focus {
  outline: none;
  box-shadow: none;
}

.primary-nav .mega-menu .psa-tab-link:hover,
.primary-nav .mega-menu .psa-tab-link:focus {
  background-color: #f5f5f5;
  color: #96031e;
}

.primary-nav .mega-menu .psa-tab-link.active {
  background-color: #96031e;
  color: #ffffff;
}

.primary-nav .mega-menu .psa-tab-panels {
  padding-left: 1.5rem;
}

.primary-nav .mega-menu .psa-tab-panel {
  display: none;
}

.primary-nav .mega-menu .psa-tab-panel.is-active {
  display: block;
}

.primary-nav .mega-menu .psa-tab-panel h5 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.primary-nav .mega-menu .psa-tabs-divider {
  margin: 0.75rem 0 0.5rem;
  border: 0;
  border-top: 1px solid #e2e2e2;
}

@media (max-width: 767.98px) {
  .primary-nav .mega-menu .psa-tabs {
    border-right: none;
    border-bottom: 1px solid #e2e2e2;
    padding-right: 0;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .primary-nav .mega-menu .psa-tab-panels {
    padding-left: 0;
  }
}

/* Espanol dropdown alignment */
#block-whatcanyoudo-mainnavigation a#dropdown-7 + .dropdown-menu {
  left: auto !important;
  right: 0 !important;
}

/************************************************************
 * ALIGN MAIN NAV ONLY (do NOT move logo)
 ************************************************************/
.primary-nav .navbar,
.primary-nav .navbar > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#block-whatcanyoudo-mainnavigation {
  padding-right: 33.5px !important;
  box-sizing: border-box;
}

.primary-nav .navbar-nav > .nav-item:last-child {
  margin-left: auto;
  flex-shrink: 0;
}

.main-navigation {
  padding-left: 0px;
}

/************************************************************
 * DESKTOP FLEX TILE RULES (992px+)
 ************************************************************/
@media (min-width: 992px) {

  .primary-nav .navbar-collapse {
    width: 100%;
  }

  .primary-nav .navbar-nav {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: nowrap !important;
  }

  .primary-nav .navbar-nav > .nav-item > .nav-link {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;

    height: auto !important;
    min-height: 42px;
    line-height: 1.15;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .primary-nav .navbar-nav > .nav-item:not(:last-child) {
    flex: 0 1 150px;
    min-width: 120px;
    max-width: 190px;
  }

  .primary-nav .navbar-nav > .nav-item:first-child {
    min-width: 110px;
    max-width: 120px;
  }

  .primary-nav .navbar-nav > .nav-item:nth-last-child(2) {
    min-width: 170px;
    max-width: 190px;
  }

  .primary-nav .navbar-nav > .nav-item:last-child {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
  }

  .primary-nav .navbar-nav > .nav-item > .nav-link {
    margin: 0 2px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/************************************************************
 * PRE-STACK SQUEEZE BAND (1268px → 1096px)
 ************************************************************/
@media (max-width: 1268px) and (min-width: 1096px) {

  .primary-nav .navbar-collapse { width: 100%; }

  .primary-nav .navbar-nav {
    width: 100%;
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
    overflow-x: hidden;
  }

  .primary-nav .navbar-nav > .nav-item > .nav-link {
    height: auto !important;
    min-height: 42px;
    line-height: 1.12;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 9px;
    padding-right: 9px;
    margin: 0 1px;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .primary-nav .navbar-nav > .nav-item:not(:last-child) {
    flex: 1 1 0;
    min-width: 96px;
    max-width: 155px;
  }

  .primary-nav .navbar-nav > .nav-item:first-child {
    min-width: 86px;
    max-width: 120px;
  }

  .primary-nav .navbar-nav > .nav-item:nth-last-child(2) {
    min-width: 120px;
    max-width: 175px;
  }

  .primary-nav .navbar-nav > .nav-item:last-child {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    flex-shrink: 0;
  }
}

/************************************************************
 * REMOVE DROPDOWN CARET ARROWS (Bootstrap)
 ************************************************************/
.primary-nav .dropdown-toggle::after {
  display: none !important;
  content: none !important;
}

.primary-nav .dropdown-toggle {
  padding-right: 0 !important;
}

/************************************************************
 * MID BREAKPOINT: 1095px → 992px
 * Stack logo row then nav row, still no hamburger.
 ************************************************************/
@media (max-width: 1095px) and (min-width: 992px) {

  header.site-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  header.site-header .region--branding,
  header.site-header .branding,
  header.site-header .site-branding {
    width: 100%;
  }

  .primary-nav {
    width: 100%;
    margin-top: 10px !important;
  }

  .primary-nav .navbar-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100%;
  }

  .primary-nav .navbar-nav > .nav-item > .nav-link {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
    height: auto !important;
    min-height: 42px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;

    max-width: 140px;
  }
}

/************************************************************
 * MOBILE HAMBURGER — WP-LIKE BAR UNDER LOGO (NO WHITE STRIP)
 ************************************************************/
@media (max-width: 991.98px) {

  /* Stack header regions vertically (logo first, nav second) */
  header.site-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  header.site-header .region--branding,
  header.site-header .site-branding,
  header.site-header .branding,
  header.site-header .region--primary-menu,
  header.site-header .region--navigation,
  header.site-header .primary-nav {
    width: 100% !important;
  }

  .primary-nav {
    margin-top: 0 !important;
  }

  .primary-nav .navbar {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  /* Button: full-bleed BLACK background using box-shadow technique */
  .primary-nav .navbar-toggler {
    width: 100% !important;
    margin: 0 !important;

    background: #000000 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 0 !important;

    padding: 15px var(--wcyd-page-pad-x, 33.5px) !important;

    text-transform: uppercase;
    font-size: var(--wcyd-font-size-base-rem, 1.6rem);
    line-height: 1.3;
    letter-spacing: 0.02em;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    box-sizing: border-box;

    /* Full-bleed paint (prevents left white strip) */
    box-shadow: 0 0 0 100vmax #000000 !important;
    clip-path: inset(0 -100vmax);

    order: 1;
  }

  .primary-nav .navbar-toggler:hover,
  .primary-nav .navbar-toggler:focus {
    color: var(--wcyd-link, #257bb0) !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Force Bootstrap icon to be white and sized */
  .primary-nav .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;

    width: 22px !important;
    height: 22px !important;
    background-size: 22px 22px !important;

    filter: none !important;
  }

  /* Collapse panel goes under the bar */
  .primary-nav .navbar-collapse {
    width: 100% !important;
    order: 2;
  }
}

/************************************************************
 * MOBILE NAV: UN-CONSTRAIN NAV INNER + RIGHT-ALIGN TOGGLER
 ************************************************************/
@media (max-width: 991.98px) {

  /* 1) Your .wcyd-container is centering the whole nav area.
        On mobile, let the nav-inner go full width. */
  .primary-nav .wcyd-nav-inner.wcyd-container,
  .primary-nav .wcyd-container.wcyd-nav-inner {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* Kill the asymmetric 90px left padding on mobile */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Make the button full width and a flex row */
  .primary-nav .navbar-toggler {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;

    /* Push content to the far right */
    justify-content: flex-end !important;

    /* Keep your WCYD gutters for the content inside the full-width bar */
    padding-left: var(--wcyd-page-pad-x, 33.5px) !important;
    padding-right: var(--wcyd-page-pad-x, 33.5px) !important;

    text-align: right !important;
  }

  /* 3) If you are ONLY using the icon (no label), this forces it to the right */
  .primary-nav .navbar-toggler .navbar-toggler-icon {
    margin-left: auto !important;
  }
  
  /* If you enable the MENU label above, you want icon next to it (not auto-pushed) */
  .primary-nav .navbar-toggler::before + .navbar-toggler-icon {
    margin-left: 0 !important;
  }
}

/************************************************************
 * MOBILE: MAKE "ESPAÑOL" BEHAVE LIKE OTHER NAV ITEMS
 ************************************************************/
@media (max-width: 991.98px) {

  /* Undo the desktop "pin last item to far right" behavior */
  .primary-nav .navbar-nav > .nav-item:last-child {
    margin-left: 0 !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-shrink: 1 !important;
  }
}

/************************************************************
 * FIX: KILL "GHOST" SPLIT-TOGGLE BOX (DESKTOP)
 * The split <a> still exists (for click + a11y), but must not
 * show any outline/box-shadow/background that looks like a caret.
 ************************************************************/
@media (min-width: 992px) {

  /* Target only the split-toggle anchor (the second <a>) */
  .primary-nav .navbar-nav > .nav-item.dropdown > a.dropdown-toggle-split {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border: 0 !important;

    /* Keep it from looking like a separate "button" */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;

    /* Optional: reduce hit-box so it doesn't look like a separate tile */
    width: 0.1px !important;
    overflow: hidden !important;
  }

  .primary-nav .navbar-nav > .nav-item.dropdown > a.dropdown-toggle-split:focus,
  .primary-nav .navbar-nav > .nav-item.dropdown > a.dropdown-toggle-split:focus-visible,
  .primary-nav .navbar-nav > .nav-item.dropdown > a.dropdown-toggle-split:active {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

/************************************************************
 * MOBILE HEADER: remove bottom padding when hamburger appears
 ************************************************************/
@media (max-width: 991.98px) {
  header.site-header {
    padding-bottom: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .primary-nav .navbar-nav .dropdown:not(.mega-menu)::before {
    content: none !important;
    display: none !important;
  }
}

/* ============================================================
 * MOBILE: header bottom (nav) full-bleed, branding still padded
 * ============================================================ */
@media (max-width: 991.98px) {

  /* 1) Stop the <header> from acting like a padded container */
  header.site-header.wcyd-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Put the gutter back ONLY on the branding block/region */
  header.site-header .branding {
    padding-left: 33.5px !important;
    padding-right: 33.5px !important;
    margin-left: 0 !important; /* also kills your desktop 110px on mobile */
  }

  /* 3) Make the header-bottom/nav region truly full width */
  header.site-header .header-bottom-region,
  header.site-header .region--header-bottom,
  header.site-header #block-whatcanyoudo-mainnavigation {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 4) Keep your hamburger button’s INNER content aligned to gutter */
  .primary-nav .navbar-toggler {
    padding-left: 33.5px !important;
    padding-right: 33.5px !important;
  }
}

/* ============================================================
 * MOBILE (collapsed navbar): dropdowns should be CLOSED by default
 * and only open when Bootstrap adds .show
 * ============================================================ */
@media (max-width: 991.98px) {

  /* 1) Kill the desktop rule that forces ALL dropdown menus display:block */
  .primary-nav .navbar-collapse .dropdown > .dropdown-menu {
    display: none !important;          /* <-- this is the key */
    position: static !important;
    transform: none !important;
    float: none !important;

    width: 100% !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 10px 0 !important;

    /* also kill your opacity/visibility system on mobile */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  /* 2) Open only when Bootstrap toggles .show */
  .primary-nav .navbar-collapse .dropdown.show > .dropdown-menu {
    display: block !important;
  }

  /* 3) Align ALL items left on mobile (your desktop nav centers them) */
  .primary-nav .navbar-collapse .nav-link,
  .primary-nav .navbar-collapse .dropdown-item {
    text-align: left !important;
  }

  /* 4) Make parent items full-width tap targets with your gutter */
  .primary-nav .navbar-collapse .nav-link {
    display: block;
    width: 100%;
    padding-left: 33.5px !important;
    padding-right: 33.5px !important;
  }

  /* 5) Indent submenu items a bit so hierarchy is obvious */
  .primary-nav .navbar-collapse .dropdown-item {
    padding: 10px 33.5px 10px 53.5px !important; /* 33.5 + 20 indent */
  }
}

@media (max-width: 991.98px) {

  /* Reduce the "tall" feel */
  .primary-nav .navbar-collapse .navbar-nav {
    margin: 0 !important;
    padding: 6px 0 10px 0 !important;
  }

  .primary-nav .navbar-collapse .nav-item {
    margin: 0 !important;
  }

  /* Make top-level items tighter */
  .primary-nav .navbar-collapse .nav-link {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 1.2 !important;
  }

  /* Subitems tighter too */
  .primary-nav .navbar-collapse .dropdown-item {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 991.98px) {

  /* Make the split-toggle visible and positioned on the right */
  .primary-nav .navbar-collapse .nav-item.dropdown {
    position: relative;
  }

  /* Parent link: leave room for the chevron button */
  .primary-nav .navbar-collapse .nav-item.dropdown > a.nav-link:not(.dropdown-toggle-split) {
    padding-right: 60px !important; /* space for chevron tap target */
  }

  /* The split toggle becomes a right-side chevron button */
  .primary-nav .navbar-collapse a.dropdown-toggle-split {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 60px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 !important;
    margin: 0 !important;

    /* looks like a control, not another menu item */
    background: transparent !important;
  }

  /* Put a chevron icon back, but only for the split toggle */
  .primary-nav .navbar-collapse a.dropdown-toggle-split::after {
    display: inline-block !important;
    content: "" !important;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  /* Rotate chevron when open (Bootstrap adds .show on the li) */
  .primary-nav .navbar-collapse .nav-item.dropdown.show > a.dropdown-toggle-split::after {
    transform: rotate(-135deg);
  }
}

@media (max-width: 991.98px) {

  /* Ensure the parent link doesn't sit above the caret */
  .primary-nav .navbar-collapse .nav-item.dropdown > a.nav-link:not(.dropdown-toggle-split) {
    position: relative;
    z-index: 1;
  }

  /* Put the caret hit-target above the parent link */
  .primary-nav .navbar-collapse a.dropdown-toggle-split {
    z-index: 3;
    pointer-events: auto !important;
    cursor: pointer;
  }
}

@media (max-width: 991.98px) {

  /* Your existing rule can stay */
  .primary-nav .navbar-collapse .dropdown.show > .dropdown-menu {
    display: block !important;
  }

  /* Add: open when Bootstrap adds .show directly to the menu */
  .primary-nav .navbar-collapse .dropdown-menu.show {
    display: block !important;
  }
}

@media (max-width: 991.98px) {

  /* Kill caret ONLY on non-split toggles */
  .primary-nav .navbar-collapse .nav-link.dropdown-toggle:not(.dropdown-toggle-split)::after {
    content: none !important;
    display: none !important;
  }

  /* Ensure split-toggle caret is not inheriting weird transforms */
  .primary-nav .navbar-collapse a.dropdown-toggle-split::after {
    content: "" !important;
    display: inline-block !important;

    width: 14px;
    height: 14px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;

    /* IMPORTANT: normalize transform so it starts "down" */
    transform: rotate(0deg) !important;
    transform-origin: 50% 50% !important;

    /* IMPORTANT: allow transform to work reliably */
    vertical-align: middle;
    margin-left: 0;               /* keep it centered in your 60px hit box */

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  }

  /* Rotate when open — cover both possible .show placements */
  .primary-nav .navbar-collapse .nav-item.dropdown.show > a.dropdown-toggle-split::after,
  .primary-nav .navbar-collapse a.dropdown-toggle-split[aria-expanded="true"]::after {
    transform: rotate(180deg) !important;
  }
}

@media (max-width: 991.98px) {

  /* Remove any focus ring / outline / box-shadow "box" on the caret hit-target */
  .primary-nav .navbar-collapse a.dropdown-toggle-split {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    /* optional: kills iOS/Android tap highlight box */
    -webkit-tap-highlight-color: transparent;
  }

  .primary-nav .navbar-collapse a.dropdown-toggle-split:focus,
  .primary-nav .navbar-collapse a.dropdown-toggle-split:focus-visible,
  .primary-nav .navbar-collapse a.dropdown-toggle-split:active {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

@media (max-width: 991.98px) {
  .primary-nav .navbar-collapse a.dropdown-toggle-split::after {
    box-shadow: none !important;
    outline: none !important;
    border: 0 !important;
  }
}

@media (max-width: 991.98px) {

  /* Lock the row height so opening a submenu doesn't change the caret hitbox */
  .primary-nav .navbar-collapse .nav-item.dropdown {
    /* this equals your .nav-link padding 10/10 + line-height 1.2 at 14px-ish,
       but explicit is better than "100%" */
  }

  .primary-nav .navbar-collapse .nav-item.dropdown > a.nav-link:not(.dropdown-toggle-split) {
    position: relative;
    /* enforce consistent row height */
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Split toggle: match the same row height, NOT the entire <li> */
  .primary-nav .navbar-collapse a.dropdown-toggle-split {
    height: 44px !important;     /* <- key change */
    top: 0 !important;
  }
}

/* ============================================================
 * MOBILE: PSA "mega menu" should behave like a normal dropdown
 * ============================================================ */
@media (max-width: 991.98px) {

  /* 1) Undo mega-menu positioning + backdrop behaviors */
  .primary-nav .mega-menu {
    position: relative !important;   /* not static */
  }

  .primary-nav .mega-menu::before,
  .primary-nav .mega-menu::after {
    content: none !important;
    display: none !important;
  }

  /* 2) Make the mega dropdown menu act like a normal mobile dropdown */
  .primary-nav .navbar-collapse .mega-menu > .dropdown-menu.mega-menu-content {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 0 10px 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;

    /* IMPORTANT: keep it closed unless .show (your system) */
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Open state */
  .primary-nav .navbar-collapse .mega-menu.show > .dropdown-menu.mega-menu-content,
  .primary-nav .navbar-collapse .mega-menu > .dropdown-menu.mega-menu-content.show {
    display: block !important;
  }
}

/* ============================================================
 * MOBILE: simplify PSA mega-menu content (no tabs, just links)
 * ============================================================ */
@media (max-width: 991.98px) {

  /* Hide the left tab column entirely */
  .primary-nav .navbar-collapse .mega-menu .psa-tabs {
    display: none !important;
  }

  /* Make the panels full width */
  .primary-nav .navbar-collapse .mega-menu .psa-tab-panels {
    padding-left: 0 !important;
  }

  /* Show ALL panels stacked (so user sees all PSA link groups) */
  .primary-nav .navbar-collapse .mega-menu .psa-tab-panel {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Optional: headings look like section labels */
  .primary-nav .navbar-collapse .mega-menu .psa-tab-panel h5 {
    margin: 10px 33.5px 6px 33.5px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
  }

  /* The link list columns become a single stacked list */
  .primary-nav .navbar-collapse .mega-menu .psa-tab-panel .row,
  .primary-nav .navbar-collapse .mega-menu .psa-tab-panel .col-md-8,
  .primary-nav .navbar-collapse .mega-menu .psa-tab-panel .col-md-4 {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }

  /* Hide the thumbnails on mobile (optional, but usually nicer) */
  .primary-nav .navbar-collapse .mega-menu .psa-tab-panel img {
    display: none !important;
  }

  /* Make all links look like dropdown items (indent like your other submenus) */
  .primary-nav .navbar-collapse .mega-menu .psa-tab-panel a {
    display: block;
    padding: 8px 33.5px 8px 53.5px !important; /* match dropdown-item indent */
    text-decoration: none;
  }

  /* “PSA Download Center / Video Contests” extra links: treat like submenu items */
  .primary-nav .navbar-collapse .mega-menu .psa-extra-links a {
    display: block;
    padding: 8px 33.5px 8px 53.5px !important;
  }
}

/* ============================================================
 * MOBILE FIX PACK:
 * 1) Force split-caret visible (override desktop "ghost" rule)
 * 2) Normalize PSA menu alignment + spacing
 * ============================================================ */
@media (max-width: 991.98px) {

  /* ---------- (A) CARET VISIBILITY FIX ---------- */
  /* Your desktop rule likely sets width:0.1px + overflow:hidden on split toggle.
     Force it back to a real tap target on mobile. */
  .primary-nav .navbar-collapse a.dropdown-toggle-split {
    width: 60px !important;
    min-width: 60px !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;

    /* keep it in the same row height as the parent */
    height: 44px !important;
    top: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Make sure the pseudo element actually paints */
  .primary-nav .navbar-collapse a.dropdown-toggle-split::after {
    display: block !important;
  }

  /* ---------- (B) PSA MEGA -> NORMAL DROPDOWN CLEANUP ---------- */

  /* Kill bootstrap grid gutters/margins inside the PSA dropdown */
  .primary-nav .navbar-collapse .mega-menu .row {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .primary-nav .navbar-collapse .mega-menu [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Ensure the dropdown content itself lines up with your menu gutter */
  .primary-nav .navbar-collapse .mega-menu > .dropdown-menu.mega-menu-content {
    padding-top: 6px !important;
    padding-bottom: 10px !important;
  }

  /* Headings ("I Can", etc.) should align under PSA CAMPAIGNS text */
  .primary-nav .navbar-collapse .mega-menu .psa-tab-panel h5 {
    margin: 10px 33.5px 6px 33.5px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  /* The views field is likely emitting <a><br><a><br>...
     Make anchors block-level AND kill <br> spacing. */
  .primary-nav .navbar-collapse .mega-menu .psa-tab-panel br {
    display: none !important;
  }

  /* Links: tighter vertical rhythm */
  .primary-nav .navbar-collapse .mega-menu .psa-tab-panel a,
  .primary-nav .navbar-collapse .mega-menu .psa-extra-links a {
    display: block !important;
    margin: 0 !important;
    padding: 8px 33.5px 8px 53.5px !important; /* same indent as dropdown items */
    line-height: 1.2 !important;
  }

  /* If any container adds margins, zero them */
  .primary-nav .navbar-collapse .mega-menu .psa-tab-panel,
  .primary-nav .navbar-collapse .mega-menu .psa-tab-panels,
  .primary-nav .navbar-collapse .mega-menu .view,
  .primary-nav .navbar-collapse .mega-menu .view-content {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ============================================================
 * MOBILE: show the split-toggle caret, but NEVER show its label text
 * (prevents "Toggle dropdown" from appearing)
 * ============================================================ */
@media (max-width: 991.98px) {

  /* Make the split-toggle a visible tap target */
  .primary-nav .navbar-collapse a.dropdown-toggle-split {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;

    width: 60px !important;
    height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* If PSA uses visually-hidden-focusable, undo ONLY the hiding mechanics */
  .primary-nav .navbar-collapse a.dropdown-toggle-split.visually-hidden-focusable {
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
  }

  /* Hide any actual label text inside the split-toggle */
  .primary-nav .navbar-collapse a.dropdown-toggle-split {
    font-size: 0 !important;     /* kills any accidental text nodes */
    line-height: 0 !important;
    color: #333 !important;      /* caret color if using currentColor elsewhere */
  }

  /* Specifically keep the accessibility span hidden (belt + suspenders) */
  .primary-nav .navbar-collapse a.dropdown-toggle-split .visually-hidden,
  .primary-nav .navbar-collapse a.dropdown-toggle-split .visually-hidden-focusable {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Re-enable the caret icon size (since we set font-size:0 above) */
  .primary-nav .navbar-collapse a.dropdown-toggle-split::after {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
  }
}

/* ============================================================
 * MOBILE: align ONLY the PSA Campaigns caret with menu gutter
 * ============================================================ */
@media (max-width: 991.98px) {

  /* Target ONLY the mega-menu (PSA Campaigns) split toggle */
  .primary-nav .navbar-collapse .nav-item.mega-menu > a.dropdown-toggle-split {
    right: 3px !important;
  }
}

.header-top-bar .header-dol-logo {
  display: flex;
  align-items: center;
}

.header-top-bar .header-dol-logo a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #ffffff;
  box-shadow: none !important;
}

.header-top-bar .header-dol-logo img {
  display: block;
  width: 53px;
  height: 53px;
  flex-shrink: 0;
}

.header-top-bar .header-dol-logo .usa-logo__text {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  font-family: "Merriweather", serif;
}

.header-top-bar .header-dol-logo .usa-logo__slogan {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  font-family: sans-serif;
}

#block-whatcanyoudo-uswdsgovwebsiteheader {
  margin-block-end: 0;
}

.usa-banner__header-text,
.usa-banner__header-action {
  margin-bottom: 0 !important;
}

.header-top-bar .wcyd-container.header-top-inner {
  padding-left: 75px;
}

/* < 1200px */
@media (max-width: 1199px) {
  .header-top-bar .wcyd-container.header-top-inner {
    padding-left: 90px;
  }
}

/* < 992px */
@media (max-width: 991px) {
  .header-top-bar .wcyd-container.header-top-inner {
    padding-left: 15px !important;
  }
}