/* Panel container (animated) */
  #masthead .cte-hdr--mobile .cte-hdr__panel{
    display:block !important;
    width:100% !important;
    background:#fff !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.10) !important;

    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    pointer-events: none !important;
    transition: max-height .26s ease, opacity .18s ease, transform .18s ease !important;
    will-change: max-height, opacity, transform;
  }
  #masthead .cte-hdr--mobile.is-open .cte-hdr__panel{
    max-height: 70vh !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  @media (prefers-reduced-motion: reduce){
    #masthead .cte-hdr--mobile .cte-hdr__panel{
      transition: none !important;
      transform: none !important;
    }
  }
#masthead #mobile-header{ display:none !important; }
@media (max-width:1180px){
  #masthead #mobile-header{ display:block !important; }
  #masthead #main-header{ display:none !important; }
}

/* Full width under 1300 */
@media (max-width:1299px){
  #masthead .site-container,
  #masthead .site-header-row-layout-fullwidth > .site-header-row-container-inner > .site-container{
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Component base */
#masthead [data-cte-hdr="1"]{ width:100%; display:block; }

/* Surface */
#masthead [data-cte-hdr="1"] .cte-hdr__outer{
  width:100%;
  background:#fff !important;
  color: rgba(0,0,0,.92);
}

/* Card feel on >=1300 */
@media (min-width:1300px){
  #masthead [data-cte-hdr="1"] .cte-hdr__outer{
    max-width: var(--cte-site-width);
    margin: 14px auto 0;
    border-radius: 16px;
    border: 1px solid var(--cte-header-card-border, rgba(0,0,0,.08));
    overflow: hidden;
    box-shadow: var(--cte-header-card-shadow, 0 10px 28px rgba(0,0,0,.10));
  }
}

/* Slab under 1300 */
@media (max-width:1299px){
  #masthead [data-cte-hdr="1"] .cte-hdr__outer{
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Wrap layout */
#masthead [data-cte-hdr="1"] .cte-hdr__wrap{
  width:100%;
  box-sizing:border-box;
  display:grid;
  grid-template-columns: 1fr auto; /* left | right */
  gap: 16px;
  align-items: start;
  padding: 14px var(--cte-frame-pad) 14px;
}
@media (max-width:780px){
  #masthead [data-cte-hdr="1"] .cte-hdr__wrap{
    padding: 12px var(--cte-frame-pad-sm) 12px;
    align-items: center;
  }
}

/* Left stack */
#masthead .cte-hdr__left{
  display:flex;
  flex-direction: column;
  gap: 8px;
  min-width:0;
}

/* Logo */
#masthead .cte-hdr__logoLink{ text-decoration:none !important; }
#masthead .cte-hdr__logoImg{ height:58px; width:auto; display:block; max-width:none; }
@media (max-width:780px){ #masthead .cte-hdr__logoImg{ height:44px; } }

/* CTE_DESKTOP_LOGO_MASK_CSS_V1
   Desktop logo: overlay the same mask layer on top of the raster logo.
   Uses canonical orange token (no hardcoded color).
*/
#masthead .cte-hdr--desktop .cte-hdr__logoImg{ display:block; }

}

/* CTE_MOBILE_LOGO_MASK_CSS_V1
   Mobile logo: render the PNG as a mask and fill with canonical CTE orange.
   - NO hardcoded orange: uses --cte-brand-orange
   - Keeps <img> as fallback for browsers without mask support
*/
/* Keep the original IMG visible as fallback */
  #masthead .cte-hdr--mobile .cte-hdr__logoImg{ display:block; }

  /* Overlay the orange mask on top of the raster */
}
}

/* Primary nav: pro “soft tabs” (no underline leak) */
#masthead .cte-hdr__nav{
  display:flex;
  flex-wrap: nowrap;
  gap: 12px;
  white-space: nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
#masthead .cte-hdr__nav::-webkit-scrollbar{ display:none; }

#masthead .cte-hdr__nav a{
  text-decoration:none !important;
  border-bottom: 0 !important;
  padding: 6px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  color: rgba(0,0,0,.70);
  position: relative;
}
#masthead .cte-hdr__nav a:hover{
  background: var(--cte-blue-100);
  color: rgba(0,0,0,.90);
}
#masthead .cte-hdr__nav a.is-active{
  background: var(--cte-blue-100);
  color: rgba(0,0,0,.92);
}
#masthead .cte-hdr__nav a::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background: transparent;
}
#masthead .cte-hdr__nav a.is-active::after{
  background: var(--cte-blue-600);
}

/* Right side: stable grid */
#masthead .cte-hdr__right{
  display:grid;
  grid-template-columns: 1fr auto; /* search | subscribe */
  grid-template-rows: auto auto;   /* meta | controls */
  gap: 8px 12px;
  align-items: end;
  justify-items: end;
}

/* Meta links */
#masthead .cte-hdr__metaNav{
  grid-column: 1 / -1;
  grid-row: 1;
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content:flex-end;
}
#masthead .cte-hdr__metaLink{
  text-decoration:none !important;
  border-bottom: 0 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  font-size: 12px;
  color: rgba(0,0,0,.70);
  padding: 4px 6px;
  border-radius: 8px;
}
#masthead .cte-hdr__metaLink:hover{
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.92);
}

/* Search */
#masthead .cte-hdr__searchForm{
  grid-column: 1;
  grid-row: 2;
  display:flex;
  align-items:center;
  gap: 8px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  height: 44px;
  padding: 0 12px;
  background:#fff;
  width: clamp(200px, 20vw, 320px);
}
#masthead .cte-hdr__searchForm:focus-within{
  border-color: rgba(0,77,191,.45);
  box-shadow: 0 0 0 4px rgba(0,77,191,.10);
}
#masthead .cte-hdr__searchInput{
  border:0 !important;
  outline:none !important;
  background:transparent !important;
  width: 100%;
  min-width: 0;
  height: 44px;
  line-height: 44px;
  padding: 0 6px;
  margin: 0;
}
#masthead .cte-hdr__searchBtn{
  border:0 !important;
  background:transparent !important;
  cursor:pointer;
  height: 44px;
  padding: 0 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: rgba(0,0,0,.60);
}
#masthead .cte-hdr__searchBtn:hover{
  background: rgba(0,0,0,.03) !important;
  color: rgba(0,0,0,.82);
}

/* Subscribe CTA */
#masthead .cte-hdr__sub{
  grid-column: 2;
  grid-row: 2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration:none !important;
  background: var(--cte-accent);
  border: 1px solid var(--cte-accent);
  color: #fff !important;
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: 0 8px 16px rgba(0,0,0,.10);
}
#masthead .cte-hdr__sub:hover{
  background: var(--cte-accent-deep);
  border-color: var(--cte-accent-deep);
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
}

/* Hot topics wrapper alignment */
#masthead .cte-hdr__hotTopics{
  width:100%;
  box-sizing:border-box;
  padding:0;
}

/* Mobile: force right controls to stay a row (fix stacking) */
@media (max-width:780px){
  #masthead .cte-hdr--mobile .cte-hdr__right{
    display:flex !important;
    flex-direction: row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap: 10px !important;
  }
}

/* ============================================================
   HEADER SEARCH TIGHTEN (v1)
   - Prevent CPT nav truncation by reducing search footprint
   ============================================================ */
#masthead .cte-hdr__searchForm{ min-width: 0 !important; max-width: 320px; }


/* ============================================================
   CTE MOBILE HEADER — PANEL + ICONS (v1)
   - Styles the mobile header controls + slide-down panel.
   - Fixes giant orange squares + underlined inline links.
   - Uses existing classes from cte-header-bar-mobile.php
   ============================================================ */

@media (max-width:1180px){

  /* Make the mobile header wrap behave (logo left, controls right) */
  #masthead .cte-hdr--mobile .cte-hdr__wrap{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap: 10px !important;
  }

  #masthead .cte-hdr--mobile .cte-hdr__logo{
    flex: 0 0 auto !important;
  }

  #masthead .cte-hdr--mobile .cte-hdr__right{
    display:flex !important;
    flex-direction: row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap: 10px !important;
  }

  /* Icon buttons (search + kebab) */
  #masthead .cte-hdr--mobile .cte-hdr__iconBtn{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    background: rgba(0,0,0,.02) !important;
    color: rgba(0,0,0,.75) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding: 0 !important;
  }
  #masthead .cte-hdr--mobile .cte-hdr__iconBtn:hover{
    background: rgba(0,0,0,.05) !important;
  }

  #masthead .cte-hdr--mobile .cte-hdr__icon{
    width: 22px !important;
    height: 22px !important;
    display:block !important;
  }

  /* Subscribe button should stay normal size */
  #masthead .cte-hdr--mobile .cte-hdr__sub{
    height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
  }

  /* Panel container */
  #masthead .cte-hdr--mobile.is-open .cte-hdr__panel{
    display:block !important;
  }

  /* Panel top bar (close button) */
  #masthead .cte-hdr--mobile .cte-hdr__panelTop{
    display:flex !important;
    justify-content:flex-end !important;
    padding: 10px var(--cte-frame-pad-sm) !important;
  }
  #masthead .cte-hdr--mobile .cte-hdr__panelClose{
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    background: rgba(0,0,0,.02) !important;
    font-size: 26px !important;
    line-height: 1 !important;
    color: rgba(0,0,0,.75) !important;
  }

  /* Panel inner */
  #masthead .cte-hdr--mobile .cte-hdr__panelInner{
    padding: 10px var(--cte-frame-pad-sm) 16px !important;
  }

  /* Search row */
  #masthead .cte-hdr--mobile .cte-hdr__panelSearch{
    display:grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    align-items:center !important;
    margin-bottom: 12px !important;
  }
  #masthead .cte-hdr--mobile .cte-hdr__panelInput{
    height: 46px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    padding: 0 12px !important;
    font-size: 18px !important;
  }
  #masthead .cte-hdr--mobile .cte-hdr__panelSubmit{
    height: 46px !important;
    border-radius: 12px !important;
    border: 1px solid var(--cte-accent) !important;
    background: var(--cte-accent) !important;
    color: #fff !important;
    font-weight: 900 !important;
    padding: 0 16px !important;
  }

  /* Menu links: block list, no underline leak */
  #masthead .cte-hdr--mobile .cte-hdr__panelNav{
    display:flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #masthead .cte-hdr--mobile .cte-hdr__panelNav a{
    display:block !important;
    text-decoration:none !important;
    border-bottom: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,.02) !important;
    color: rgba(0,0,0,.82) !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
  }
  #masthead .cte-hdr--mobile .cte-hdr__panelNav a:hover{
    background: var(--cte-orange-100) !important;
    color: var(--cte-accent-deep) !important;
  }

  /* Show only the active panel section */
  #masthead .cte-hdr--mobile .cte-hdr__panelSection{ display:none !important; }
  #masthead .cte-hdr--mobile.is-search .cte-hdr__panelSection[data-panel="search"]{ display:block !important; }
  #masthead .cte-hdr--mobile.is-menu   .cte-hdr__panelSection[data-panel="menu"]{ display:block !important; }
}

/* ============================================================
   CTE DESKTOP TOPBAR OVERRIDES (v2)
   - Desktop header now uses a top utility bar:
     About | Advertise | Contact | Search | Subscribe
   - This overrides the older .cte-hdr__right grid layout.
   ============================================================ */

#masthead .cte-hdr--desktop .cte-hdr__right{
  display: block !important;
  width: auto !important;
}

/* The utility bar row */
#masthead .cte-hdr--desktop .cte-hdr__topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}

/* Meta links no longer use grid positioning */
#masthead .cte-hdr--desktop .cte-hdr__metaNav{
  display:flex !important;
  gap: 14px !important;
  align-items:center !important;
  justify-content:flex-end !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Top search: smaller footprint */
#masthead .cte-hdr--desktop .cte-hdr__searchForm--top{
  width: clamp(220px, 22vw, 360px) !important;
  max-width: 360px !important;
}

/* Hide SEARCH label a bit earlier to stay compact */

/* Keep subscribe from wrapping */
#masthead .cte-hdr--desktop .cte-hdr__sub{
  white-space: nowrap !important;
}

/* TOPBAR WRAP SAFETY (v1)
   - If the utility row gets tight, allow it to wrap without impacting nav.
*/
@media (max-width:1500px){
  #masthead .cte-hdr--desktop .cte-hdr__topbar{
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  #masthead .cte-hdr--desktop .cte-hdr__searchForm--top{
    width: clamp(200px, 28vw, 340px) !important;
  }
}

/* ============================================================
   CTE DESKTOP SPLIT ROWS (v1)
   - Split desktop header into two independent rows so nav never
     gets constrained by search/subscribe/meta width.
   ============================================================ */

#masthead .cte-hdr--desktop .cte-hdr__wrap{
  display:block !important;       /* override legacy grid */
}

/* Top row: logo + utilities */
#masthead .cte-hdr--desktop .cte-hdr__row--top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 14px !important;
  width: 100% !important;
}

#masthead .cte-hdr--desktop .cte-hdr__row--top .cte-hdr__logo{
  flex: 0 0 auto !important;
}

#masthead .cte-hdr--desktop .cte-hdr__row--top .cte-hdr__right{
  flex: 1 1 auto !important;
  min-width: 0 !important;        /* allow internal wrap without forcing nav */
}

/* Utilities: wrap if tight (never steal from nav row) */
#masthead .cte-hdr--desktop .cte-hdr__topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

/* Search in topbar */
#masthead .cte-hdr--desktop .cte-hdr__searchForm--top{
  width: clamp(220px, 22vw, 360px) !important;
  max-width: 360px !important;
}

/* Hide SEARCH label earlier for compactness */

/* Nav row: full width, independent */
#masthead .cte-hdr--desktop .cte-hdr__row--nav{
  margin-top: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Nav itself: keep single row with optional horizontal scroll */
#masthead .cte-hdr--desktop .cte-hdr__row--nav .cte-hdr__nav{
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* SUBSCRIBE IN NAV ROW (v1)
   - Desktop: put Subscribe on the far right of the CPT nav row.
   - Topbar keeps About/Advertise/Contact/Search only.
*/
@media (min-width:1025px){
  #masthead .cte-hdr--desktop .cte-hdr__navWrap{
    display:flex !important;
    align-items:center !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #masthead .cte-hdr--desktop .cte-hdr__navWrap .cte-hdr__nav{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #masthead .cte-hdr--desktop .cte-hdr__sub--nav{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    align-self: center !important;
  }

  /* Desktop only: neutralize legacy grid-placement expectations */
  #masthead .cte-hdr--desktop .cte-hdr__sub{
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* SR-only helper */
#masthead .cte-hdr__sr{
  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;
}

/* Header icons (shared) */
#masthead .cte-hdr__icon{
  width: 22px !important;
  height: 22px !important;
  display:block !important;
}

/* ============================================================
   DESKTOP SEARCH ICON SUBMIT (v1)
   ============================================================ */
#masthead .cte-hdr--desktop .cte-hdr__searchBtn{
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius: 999px !important;
  color: rgba(0,0,0,.70) !important;
}
#masthead .cte-hdr--desktop .cte-hdr__searchBtn:hover{
  background: rgba(0,0,0,.03) !important;
  color: rgba(0,0,0,.92) !important;
}

/* ============================================================
   MOBILE ICON -> X MORPH (v1)
   ============================================================ */
@media (max-width:1180px){
  #masthead .cte-hdr--mobile .cte-hdr__iconSwap{
    position: relative !important;
    width: 22px !important;
    height: 22px !important;
    display:block !important;
  }
  #masthead .cte-hdr--mobile .cte-hdr__iconSwap .cte-hdr__iconOpen,
  #masthead .cte-hdr--mobile .cte-hdr__iconSwap .cte-hdr__iconClose{
    position:absolute !important;
    inset:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    transition: opacity .18s ease, transform .18s ease !important;
    transform-origin: 50% 50% !important;
  }
  #masthead .cte-hdr--mobile .cte-hdr__iconSwap .cte-hdr__iconClose{
    opacity: 0 !important;
    transform: rotate(-90deg) scale(.85) !important;
  }
  #masthead .cte-hdr--mobile .cte-hdr__iconBtn.is-active .cte-hdr__iconOpen{
    opacity: 0 !important;
    transform: rotate(90deg) scale(.85) !important;
  }
  #masthead .cte-hdr--mobile .cte-hdr__iconBtn.is-active .cte-hdr__iconClose{
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
  }
}


/* ============================================================
   MOBILE INLINE SEARCH (v1)
   - Goal: keep full search bar visible until <=728px
   - Applies ONLY while the MOBILE header is active (<=1180px)
   ============================================================ */

/* 729–1180: show inline search in the mobile header bar */
@media (min-width:729px) and (max-width:1180px){
  #masthead .cte-hdr--mobile .cte-hdr__wrap{
    gap: 12px !important;
  }

  /* show inline bar */
  #masthead .cte-hdr--mobile .cte-hdr__right{
    display:flex !important;
    flex-direction: row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  /* show inline bar (RIGHT-ALIGNED, NO GROW) */
  #masthead .cte-hdr--mobile .cte-hdr__mobileSearch{
    display:flex !important;
    align-items:center !important;
    gap: 8px !important;
    height: 44px !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 999px !important;
    padding: 0 10px !important;
    background: #fff !important;

    flex: 0 0 auto !important;              /* <- do NOT expand */
    width: clamp(220px, 26vw, 360px) !important;  /* <- stable width (desktop-like) */
    max-width: 360px !important;
  }

  /* input */
  #masthead .cte-hdr--mobile .cte-hdr__mobileSearch .cte-hdr__searchInput{
    height: 44px !important;
    line-height: 44px !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* submit icon */
  #masthead .cte-hdr--mobile .cte-hdr__mobileSearch .cte-hdr__searchBtn{
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius: 999px !important;
    color: rgba(0,0,0,.70) !important;
  }

  /* hide the SEARCH ICON toggle (we already have the inline bar) */
  #masthead .cte-hdr--mobile .cte-hdr__searchToggle{
    display:none !important;
  }

  /* also hide the SEARCH panel section so only menu panel is relevant */
  #masthead .cte-hdr--mobile .cte-hdr__panelSection[data-panel="search"]{
    display:none !important;
  }
}

/* <=728: hide inline bar (use icon + panel) */
@media (max-width:728px){
  #masthead .cte-hdr--mobile .cte-hdr__mobileSearch{
    display:none !important;
  }
}


/* ============================================================
   MOBILE INLINE SEARCH POSITION FIX (v1)
   - In the 729–1180 zone, keep the inline search bar RIGHT-GROUPED:
     search stays immediately left of Subscribe (not centered)
   ============================================================ */
@media (min-width:729px) and (max-width:1180px){
  /* Right group should shrink-wrap content, not behave like a full-width row */
  #masthead .cte-hdr--mobile .cte-hdr__right{
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: flex-end !important;
  }

  /* Ensure the inline search itself also does not try to expand */
  #masthead .cte-hdr--mobile .cte-hdr__mobileSearch{
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}


/* ============================================================
   MOBILE MENU META LINKS (v1)
   - De-emphasize About / Advertise / Contact
   ============================================================ */
@media (max-width:1180px){
  #masthead .cte-hdr--mobile .cte-hdr__panelNav a.is-meta{
    background: transparent !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    color: rgba(0,0,0,.62) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
  }
  #masthead .cte-hdr--mobile .cte-hdr__panelNav a.is-meta:hover{
    background: rgba(0,0,0,.02) !important;
    color: rgba(0,0,0,.78) !important;
  }
}


/* ============================================================
   MOBILE PANEL ANIMATION (v2)
   - Reliable open/close animation (no pop)
   - Requires .cte-hdr--mobile.is-open toggling (already in JS)
   ============================================================ */
@media (max-width:1180px){
  /* panel always exists; we animate height + inner fade/slide */
  #masthead .cte-hdr--mobile .cte-hdr__panel{
    display:block !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 1 !important;           /* keep container stable */
    transform: none !important;
    pointer-events: none !important;
    transition: max-height .28s ease !important;
    will-change: max-height;
  }
  #masthead .cte-hdr--mobile.is-open .cte-hdr__panel{
    max-height: 70vh !important;
    pointer-events: auto !important;
  }

  /* inner anim (the “feel”) */
  #masthead .cte-hdr--mobile .cte-hdr__panelInner{
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    transition: opacity .18s ease, transform .18s ease !important;
    will-change: opacity, transform;
  }
  #masthead .cte-hdr--mobile.is-open .cte-hdr__panelInner{
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  @media (prefers-reduced-motion: reduce){
    #masthead .cte-hdr--mobile .cte-hdr__panel,
    #masthead .cte-hdr--mobile .cte-hdr__panelInner{
      transition: none !important;
      transform: none !important;
    }
  }
}


/* ============================================================
   MOBILE PANEL ANIMATION CLOSE DELAY (v1)
   - Fix: on close, keep inner content visible while container collapses
   - Open stays immediate; close fade is delayed to match max-height collapse
   ============================================================ */
@media (max-width:1180px){
  /* Container: keep your existing collapse timing */
  #masthead .cte-hdr--mobile .cte-hdr__panel{
    transition: max-height .28s ease !important;
  }

  /* CLOSED state: delay the fade/slide so it doesn't disappear first */
  #masthead .cte-hdr--mobile .cte-hdr__panelInner{
    transition: opacity .18s ease .16s, transform .18s ease .16s !important;
  }

  /* OPEN state: remove delay so open feels snappy */
  #masthead .cte-hdr--mobile.is-open .cte-hdr__panelInner{
    transition-delay: 0s !important;
  }

  @media (prefers-reduced-motion: reduce){
    #masthead .cte-hdr--mobile .cte-hdr__panel,
    #masthead .cte-hdr--mobile .cte-hdr__panelInner{
      transition: none !important;
    }
  }
}


/* ============================================================
   MOBILE PANEL ANIMATION HEIGHT ONLY (v1)
   - Fix close pop: remove inner fade/slide entirely
   - Only animate container max-height (content clips naturally)
   ============================================================ */
@media (max-width:1180px){
  /* keep container animation */
  #masthead .cte-hdr--mobile .cte-hdr__panel{
    display:block !important;
    overflow:hidden !important;
    max-height: 0 !important;
    pointer-events: none !important;
    transition: max-height .28s ease !important;
    will-change: max-height;
  }
  #masthead .cte-hdr--mobile.is-open .cte-hdr__panel{
    max-height: 70vh !important;
    pointer-events: auto !important;
  }

  /* nuke inner animations so it doesn't vanish early */
  #masthead .cte-hdr--mobile .cte-hdr__panelInner{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  @media (prefers-reduced-motion: reduce){
    #masthead .cte-hdr--mobile .cte-hdr__panel{
      transition: none !important;
    }
  }
}


/* ============================================================
   MOBILE PANEL CLOSE CONTENT FIX (v1)
   - Fix: on close, content must NOT disappear before panel collapses
   - Cause: legacy rule sets .cte-hdr__panelSection{display:none} by default
   - Solution:
     * default sections are display:block (so close keeps content rendered)
     * when OPEN, hide all sections, then show the active one only
   ============================================================ */
@media (max-width:1180px){
  /* Default: keep sections rendered (prevents “empty bg” collapse) */
  #masthead .cte-hdr--mobile .cte-hdr__panelSection{
    display:block !important;
  }

  /* When OPEN: hide all sections... */
  #masthead .cte-hdr--mobile.is-open .cte-hdr__panelSection{
    display:none !important;
  }

  /* ...then show ONLY the active one */
  #masthead .cte-hdr--mobile.is-open.is-search .cte-hdr__panelSection[data-panel="search"]{
    display:block !important;
  }
  #masthead .cte-hdr--mobile.is-open.is-menu .cte-hdr__panelSection[data-panel="menu"]{
    display:block !important;
  }
}


/* ============================================================
   MOBILE PANEL SECTION VISIBILITY (v2)
   - Prevent flicker: keep only the active section visible
   - Works with JS closeAll() using is-closing
   ============================================================ */
@media (max-width:1180px){
  /* default: hide both sections */
  #masthead .cte-hdr--mobile .cte-hdr__panelSection{ display:none !important; }

  /* open: show active */
  #masthead .cte-hdr--mobile.is-open.is-search .cte-hdr__panelSection[data-panel="search"]{ display:block !important; }
  #masthead .cte-hdr--mobile.is-open.is-menu   .cte-hdr__panelSection[data-panel="menu"]{ display:block !important; }

  /* closing: keep last active visible during collapse */
  #masthead .cte-hdr--mobile.is-closing.is-search .cte-hdr__panelSection[data-panel="search"]{ display:block !important; }
  #masthead .cte-hdr--mobile.is-closing.is-menu   .cte-hdr__panelSection[data-panel="menu"]{ display:block !important; }
}

/* ============================================================
   CPT HEADER ACTIVE TAB — GINA CTE BLUE
   ============================================================ */

#masthead .cte-hdr__nav a.is-active{
  background: var(--cte-blue-050) !important; /* Gina-approved light blue */
  color: var(--cte-ink) !important;
}

/* Optional: subtle underline, NOT a border */
#masthead .cte-hdr__nav a.is-active::after{
  background: var(--cte-blue-600) !important; /* real CTE blue */
}



/* ============================================================
   CTE_NAV_ACTIVE_MATCH_ABOUT_V2
   Goal: Make selected CPT nav item match ABOUT pill EXACTLY
   - Same padding, radius, display, line-height as base nav pill
   ============================================================ */

#masthead .cte-hdr__nav a[aria-current="page"],
#masthead .cte-hdr__nav li.current-menu-item > a,
#masthead .cte-hdr__nav li.current_page_item > a,
#masthead .cte-hdr__nav li.current-menu-ancestor > a,
#masthead .cte-hdr__nav li.current_page_ancestor > a{
  background: rgba(0,0,0,.03) !important; /* matches ABOUT hover/pill vibe */
  color: rgba(0,0,0,.92) !important;

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

  padding: 6px 10px !important;
  border-radius: 10px !important;
  line-height: 1 !important;

  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Ensure any underline/after indicator is off for the active pill */
#masthead .cte-hdr__nav a[aria-current="page"]::after,
#masthead .cte-hdr__nav li.current-menu-item > a::after,
#masthead .cte-hdr__nav li.current_page_item > a::after,
#masthead .cte-hdr__nav li.current-menu-ancestor > a::after,
#masthead .cte-hdr__nav li.current_page_ancestor > a::after{
  background: transparent !important;
}


/* ============================================================
   CTE_NAV_ACTIVE_PILL_GEOMETRY_FIX_V1
   - Active/current nav pills must match base pill geometry exactly
   - Remove ::after completely on active/current to prevent visual overhang
   ============================================================ */

#masthead .cte-hdr__nav a,
#masthead .cte-hdr__nav li > a{
  box-sizing: border-box !important;
}

/* Active/current: same padding/radius and no pseudo underline element */
#masthead .cte-hdr__nav a[aria-current="page"],
#masthead .cte-hdr__nav li.current-menu-item > a,
#masthead .cte-hdr__nav li.current_page_item > a,
#masthead .cte-hdr__nav li.current-menu-ancestor > a,
#masthead .cte-hdr__nav li.current_page_ancestor > a{
  padding: 6px 10px !important;
  border-radius: 10px !important;
}

/* Nuke the underline pseudo-element entirely on active/current */
#masthead .cte-hdr__nav a[aria-current="page"]::after,
#masthead .cte-hdr__nav li.current-menu-item > a::after,
#masthead .cte-hdr__nav li.current_page_item > a::after,
#masthead .cte-hdr__nav li.current-menu-ancestor > a::after,
#masthead .cte-hdr__nav li.current_page_ancestor > a::after{
  content: none !important;
  display: none !important;
}


/* ============================================================
   CTE_NAV_IS_ACTIVE_GEOMETRY_FIX_V1
   - The active CPT pill is driven by .cte-hdr__nav a.is-active
   - Force identical geometry to base nav pill
   - Remove ::after entirely to prevent visual overhang
   ============================================================ */

#masthead .cte-hdr__nav a{
  box-sizing: border-box !important;
}

/* Active: same size as base pill */
#masthead .cte-hdr__nav a.is-active{
  padding: 6px 10px !important;
  border-radius: 10px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Remove underline pseudo element completely on active */
#masthead .cte-hdr__nav a.is-active::after{
  content: none !important;
  display: none !important;
}


/* ============================================================
   CTE_NAV_HOVER_GEOMETRY_FIX_V1
   - Hover should match base pill geometry (no visual overhang)
   - Remove ::after on hover (it causes the right-side extension artifact)
   ============================================================ */

#masthead .cte-hdr__nav a:hover{
  padding: 6px 10px !important;
  border-radius: 10px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Kill underline pseudo-element on hover */
#masthead .cte-hdr__nav a:hover::after{
  content: none !important;
  display: none !important;
}


/* ============================================================
   CTE_NAV_DISABLE_AFTER_PSEUDO_V1
   - Prevent hover-out flash by removing ::after entirely for nav pills
   ============================================================ */
#masthead .cte-hdr__nav a::after{
  content: none !important;
  display: none !important;
}


/* ============================================================
   CTE_NAV_LOCK_GEOMETRY_NO_FLASH_V1
   - Prevent hover-out flash by ensuring base/hover/active all share
     identical geometry (no display/line-height changes)
   - Also disables ::after underline pseudo-element globally
   ============================================================ */

/* Base nav pills: lock geometry */
#masthead .cte-hdr__nav a{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;

  padding: 6px 10px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

/* Remove underline pseudo-element entirely (no flash) */
#masthead .cte-hdr__nav a::after{
  content: none !important;
  display: none !important;
}