/* Arrow buttons in submenu level-2 items with level-3 children */
/* Show on hover/active via JS (useMenuHover adds .active class) */
@media (min-width: 1026px) {
  /* Hide default CSS ::after arrows (handled by SVG button instead) */
  .primary-nav .subnav__level2 .subnav__lvl2-list-item > a::after,
  .primary-nav .subnav__level2 .subnav__lvl2-list-item > a:hover::after,
  .primary-nav .subnav__level2 .subnav__lvl2-list-item > a:focus::after,
  .primary-nav .subnav__level2 .subnav__lvl2-list-item:hover > a::after,
  .primary-nav .subnav__level2 .subnav__lvl2-list-item:focus > a::after {
    display: none !important;
  }
}

/* Override Tailwind CSS 4 preflight: svg { display: block }
   The menu-dropdown button is display:inline-block with height:0; width:0.
   Its child SVG must be display:inline so it participates in the button's
   inline formatting context and aligns at the text baseline (matching the
   original Citadel rendering where the arrow sits next to "Equities"). */
.page-section--header .menu-dropdown svg {
  display: inline !important;
  vertical-align: baseline !important;
}

/* Always show the arrow on items with submenus so users know there's more */
.page-section--header .menu-dropdown.js-submenu-lvl2,
.page-section--header .menu-dropdown.js-submenu-lvl3 {
  opacity: 1 !important;
}

/* Fix arrow spacing: keep the full 7px gap (button margin-left) */
.page-section--header .menu-dropdown.js-submenu-lvl2 svg,
.page-section--header .menu-dropdown.js-submenu-lvl3 svg {
  transform: translate(0, 0.09375rem) !important;
}

/* Match the original Citadel dropdown panel height (~80% viewport).
   The base CSS sets min-height: 35.5rem (568px) which only covers ~62%.
   The original's JS-calculated content pushed it to ~80%. */
@media (min-width: 1026px) {
  .page-section--header .subnav__wrap {
    min-height: 75vh;
  }
}

/* Desktop logo: 10% smaller than default (3.75rem → 3.375rem max-height).
   Only applies at desktop breakpoint, mobile stays untouched.
   The width auto-scales via aspect ratio preservation. */
@media (min-width: 1026px) {
  .page-section--header .header .row .site-logo-sec .site-logo img {
    max-height: 3.375rem;
    max-width: 13.16rem;
  }
}

/* Carousel slide margins — replicate Swiper's spaceBetween config */
.carousel-card-gallery.swiper-slide,
.carousel-card-immersive-v2.swiper-slide,
.carousel-card.swiper-slide {
  margin-right: 22px;
}
@media (min-width: 1024px) {
  .carousel-card-gallery.swiper-slide,
  .carousel-card-immersive-v2.swiper-slide,
  .carousel-card.swiper-slide {
    margin-right: 72px;
  }
}

/* Announcement cards — Swiper sets width dynamically, we replicate */
.layout-carousel_v2--basic .carousel-card.swiper-slide {
  flex-shrink: 0;
  width: 80vw;
}
@media (min-width: 1024px) {
  .layout-carousel_v2--basic .carousel-card.swiper-slide {
    width: 23.354rem;
  }
}

/* Fix mobile progress bar overflow and gallery nav spacing */
@media (max-width: 1023px) {
  .layout-carousel_v2__nav {
    overflow: hidden;
  }
  .swiper-pagination-progressbar {
    max-width: 100%;
  }
  .layout-carousel_v2__nav--gallery .layout-carousel_v2__fraction-pagination {
    margin-right: 0.5rem;
  }
}

/* Tab neighbor hint: mobile only — shows adjacent tab tinted blue
   to indicate scroll direction. Not needed on desktop where all tabs are visible. */
@media (max-width: 1023px) {
  .theme-citadel .layout-tabbed_content .tab-menu__item-link.is-neighbor {
    color: #08225a;
  }
  .theme-citadel .layout-tabbed_content .tab-menu__item-link.is-neighbor:before {
    transform: scaleX(1);
    background-color: #f8ce56 !important;
    transition: transform 0.4s cubic-bezier(.39,.57,.56,1);
  }
  .theme-citadel .layout-tabbed_content .tab-menu__item-link.is-neighbor--right:before {
    transform-origin: left;
  }
  .theme-citadel .layout-tabbed_content .tab-menu__item-link.is-neighbor--left:before {
    transform-origin: right;
  }

  /* Disable hover fill on mobile — touch-scrolling triggers hover states
     on each tab as the finger passes over, causing the fill to flash.
     The theme has a bare :hover rule without any-hover guard. */
  .theme-citadel .layout-tabbed_content .tab-menu__item-link:not(.active):not(.is-neighbor):hover:before {
    transform: scaleX(0) !important;
  }

  .theme-citadel .layout-tabbed_content .tab-menu__item-link:not(.active):not(.is-neighbor):hover {
    color: inherit !important;
  }
}

/* Keep arrows visible on mobile */
@media (max-width: 1025px) {
  .primary-nav .subnav__level2 .subnav__lvl2-list-item > a::after {
    display: inline-block !important;
  }
}

/* ── Interview Process carousel ──
   Desktop: active card 712px (blue) + non-active cards 416px (gray) visible.
   The theme CSS has a top-level rule:
     .swiper-slide:not(.swiper-slide-active) { width: 416px !important }
   On desktop we KEEP this — non-active cards should be 416px and visible.
   On mobile we OVERRIDE it to 100% for single-card sliding.
   Translate = activeSlide × (416 + margin) since all preceding slides
   are non-active (416px) when the wrapper settles. */

/* Mobile only: override 416px to full-width for single-card carousel.
   Also cap desc__inner width — the theme CSS uses calc(var(--card-width) - 64px)
   which resolves to 648px from the 712px desktop variable. On mobile the card
   is ~350px, so desc text overflows. max-width:100% constrains it. */
@media (max-width: 1279px) {
  .interview-process__swiper .swiper-slide,
  .interview-process__swiper .swiper-slide:not(.swiper-slide-active) {
    flex-shrink: 0;
    width: 100% !important;
  }
  .interview-process__swiper .swiper-wrapper {
    overflow: visible;
  }
  .interview-process__card__desc__inner,
  .interview-process__card__desc__ellipsis {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Below tablet: constrain swiper width for the peek effect.
   90% leaves room for next card's edge on the right. */
@media (max-width: 767px) {
  .interview-process__swiper {
    width: 90%;
    overflow: visible;
  }
}

/* ── Equal-height cards ──
   The card has TWO text areas: desc__inner (full text, visibility:hidden on
   non-active) and desc__ellipsis (truncated to 4 lines on non-active, full
   text on active). Both are in normal flow, so when a card becomes active
   the desc__ellipsis un-truncates and the card grows, shifting the nav.

   Fix: pull desc__ellipsis out of flow (position:absolute) so card height
   is determined ONLY by desc__inner (which is always full text regardless
   of active state). Hide desc__ellipsis entirely on active cards since
   desc__inner already shows the full content. */
.interview-process__card__desc {
  position: relative;
}
.interview-process__card__desc__ellipsis {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.interview-process__swiper .swiper-slide-active .interview-process__card__desc__ellipsis {
  display: none;
}

/* Flex stretch so all slides match the tallest card height */
.interview-process__swiper .swiper-wrapper {
  height: auto !important;
  align-items: stretch !important;
}
.interview-process__swiper .swiper-slide {
  height: auto !important;
  flex-shrink: 0;
  /* Make each slide a flex column so the card can use flex:1 to fill it.
     height:100% doesn't work on the card because the slide's height comes
     from flex stretch (not an explicit property), so % resolves wrong. */
  display: flex !important;
  flex-direction: column !important;
}
.interview-process__card {
  flex: 1;
}

/* Mobile masonry bleed: the .container.js-masonry-container has 24px padding.
   The grid wrapper's negative margin must match (not 16px) so the grid reaches
   the container's border box edges, which ARE the screen edges on mobile.
   This keeps the container's overflow:hidden and padding intact for the
   progress bar and arrows below. */

/* Mobile mosaic card sizing — override the theme's aspect-ratio
   which renders too tall on real iPhones. */
@media (max-width: 1023px) {
  .masonry-grid-card {
    background-color: transparent !important;
  }
  /* Odd columns: square top, tall bottom */
  .swiper-slide:nth-child(odd) .masonry-grid-card:first-child {
    aspect-ratio: 1/1 !important;
  }
  .swiper-slide:nth-child(odd) .masonry-grid-card:last-child {
    aspect-ratio: 370/462 !important;
  }
  /* Even columns: tall top, square bottom */
  .swiper-slide:nth-child(even) .masonry-grid-card:first-child {
    aspect-ratio: 370/462 !important;
  }
  .swiper-slide:nth-child(even) .masonry-grid-card:last-child {
    aspect-ratio: 1/1 !important;
  }
}

/* Desktop (≥ 1280px): swiper overflow:visible lets non-active cards show.
   The parent .container--interview-process has overflow:hidden from the theme
   which clips cards that extend past the container boundary. */
@media (min-width: 1280px) {
  .interview-process__swiper {
    overflow: visible !important;
  }
  .interview-process__body .container--interview-process {
    overflow: hidden;
  }
}