/************************************************************
 * 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: #96031e;
  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, #0580a3) !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;
  }
}