/* TSA Child Theme custom overrides — clean final */

/* -----------------------------------
   MOBILE NAVIGATION
----------------------------------- */

/* hide the mobile button by default */
.mobile-nav-toggle { display: none; }

/* --- Responsive behavior under 960px --- */
@media (max-width: 960px) {

  /* Header layout */
  #site-header { position: relative; z-index: 1000; } /* sit above banner */
  .tsa-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: nowrap;          /* keep in one row */
    min-height: 56px;
  }

  /* Hide desktop elements on mobile */
  .tsa-desktop-nav,
  .tsa-search-wrapper { display: none !important; }

  /* Show the hamburger as a normal flex item on the far right */
  .mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    width: 44px;                /* comfy tap target */
    height: 44px;
    padding: 0;
    margin-left: auto;          /* push to right edge */
    position: static !important;/* ensure NOT absolute */
    z-index: 1001;
  }

  /* Visually hide the word "Menu" but keep it for screen readers */
  .mobile-nav-toggle .toggle-text {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }
}

/* -----------------------------------
   HAMBURGER ICON
----------------------------------- */

.mobile-nav-toggle .toggle-icon {
  position: relative;
  display: inline-block;
  width: 24px; height: 16px;
}

/* Draw the three bars */
.mobile-nav-toggle .toggle-icon::before,
.mobile-nav-toggle .toggle-icon::after,
.mobile-nav-toggle .toggle-icon span {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 2px; background: #000; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.mobile-nav-toggle .toggle-icon::before { top: 0; }
.mobile-nav-toggle .toggle-icon span { top: 7px; }
.mobile-nav-toggle .toggle-icon::after  { bottom: 0; }

/* Animate to “X” when open */
.showing-menu-modal .mobile-nav-toggle .toggle-icon span { transform: scaleX(0); }
.showing-menu-modal .mobile-nav-toggle .toggle-icon::before { transform: translateY(7px) rotate(45deg); }
.showing-menu-modal .mobile-nav-toggle .toggle-icon::after  { transform: translateY(-7px) rotate(-45deg); }

/* -----------------------------------
   MENU MODAL VISIBILITY + SAFETY
----------------------------------- */

.menu-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.showing-menu-modal .menu-modal { display: block; }

/* -----------------------------------
   DESKTOP NAVIGATION ALIGNMENT FIX
----------------------------------- */

.primary-menu.reset-list-style li { font-size: inherit !important; }

.primary-menu.reset-list-style > li > a {
  display: inline-flex; align-items: center;
  line-height: 1.2; font-size: 1.75rem;
}

.primary-menu .icon, .primary-menu .icon svg {
  display: inline-block; vertical-align: middle; width: .7em; height: .7em;
}
.primary-menu .icon { margin-left: .35rem; position: relative; top: 0 !important; }

.primary-menu > li.menu-item-has-children > a { padding-right: .3rem; }




/* ===== FINAL PATCH ===== */

/* 1) Make sure the hamburger NEVER shows on desktop */
@media (min-width: 961px) {
  .mobile-nav-toggle { display: none !important; }
}

/* 2) Mobile header layout: keep everything on one line and push the button right */
@media (max-width: 960px) {
  #site-header { position: relative; z-index: 1000; }
  #site-header .tsa-header-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: nowrap;              /* prevent wrapping into the banner */
    min-height: 56px;
  }

  /* hide desktop-only bits robustly */
  #site-header .tsa-search-wrapper { display: none !important; }
  .tsa-desktop-nav { display: none !important; }

  /* hamburger as a normal flex item (no absolute!) */
  #site-header .mobile-nav-toggle{
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;     /* comfy tap target */
    padding: 0;
    margin-left: auto;             /* push to far right */
    background: none; border: 0;
    z-index: 1001;
  }
}

/* 3) Draw/animate the hamburger (keeps your current visuals) */
.mobile-nav-toggle .toggle-icon{ position:relative; width:24px; height:16px; display:inline-block; }
.mobile-nav-toggle .toggle-icon::before,
.mobile-nav-toggle .toggle-icon::after,
.mobile-nav-toggle .toggle-icon span{
  content:""; position:absolute; left:0; right:0; height:2px; background:#000; border-radius:2px;
  transition: transform .2s ease, opacity .2s ease;
}
.mobile-nav-toggle .toggle-icon::before{ top:0; }
.mobile-nav-toggle .toggle-icon span{ top:7px; }
.mobile-nav-toggle .toggle-icon::after{ bottom:0; }

.showing-menu-modal .mobile-nav-toggle .toggle-icon span{ transform:scaleX(0); }
.showing-menu-modal .mobile-nav-toggle .toggle-icon::before{ transform:translateY(7px) rotate(45deg); }
.showing-menu-modal .mobile-nav-toggle .toggle-icon::after{  transform:translateY(-7px) rotate(-45deg); }

/* Hide "Menu" text visually but keep for screen readers */
@media (max-width: 960px){
  .mobile-nav-toggle .toggle-text{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
}

/* 4) CRITICAL: when modal is hidden, it must not capture taps */
.menu-modal{
  position: fixed; inset: 0; z-index: 9999;
  opacity: 0; visibility: hidden; pointer-events: none;  /* <— stops “ghost” links */
}
.showing-menu-modal .menu-modal{
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* If the theme animates it with transform, the above still prevents clicks during hidden state */




/* Our Leadership page only */
.page-id-2286 .staff-title,
.page-id-2286 .staff-info,
.page-id-2286 .staff-info * {
  text-align: left !important;
}