/* =============================================================================
 * after-market.css
 * -----------------------------------------------------------------------------
 * Post-Webflow / post-SeeMS hand changes live here. Loaded LAST (after the
 * generated Webflow stylesheets and main.css) so these rules win without having
 * to fight specificity in the generated CSS. Keep edits here rather than
 * touching the generated *.webflow.css, which may be regenerated.
 * ========================================================================== */

/* --- News detail page ------------------------------------------------------
 * .news-hero has no generated CSS and is shared by several pages, so scope this
 * to the article detail page (.news-detail) only. */
.news-detail .quantum-zenith-design-system--news-hero {
  padding-top: 48px;
}

@media (max-width: 767px) {
  .news-detail .quantum-zenith-design-system--news-hero {
    padding-top: 96px;
  }
}

/* Cap the cover image height on the detail page. */
.news-detail .quantum-zenith-design-system--news-thumbnail img {
  max-height: 640px;
}

/* --- Gallery lightbox -------------------------------------------------------
 * The slider has no width, so Swiper sizes slides to the whole popup and it
 * blows up to a full-width white box. Constrain it and make the image fill. */
/* Both gallery and knowledge-hub lightboxes use .c-gallery_slider; scope the
 * width to popups that contain one so other popups are unaffected. */
.quantum-zenith-design-system--popup-container:has(
  .quantum-zenith-design-system--c-gallery_slider
) {
  width: 90vw;
}

/* Clip the Swiper overflow on the slider — NOT on .popup-container, whose close
 * button is positioned outside it (translate(100%)) and would get clipped. */
.quantum-zenith-design-system--c-gallery_slider {
  width: 100%;
  overflow: hidden;
}

.quantum-zenith-design-system--gallery-slider_img {
  width: 100%;
  max-width: 100%;
}

.quantum-zenith-design-system--gallery-slider_img img,
.quantum-zenith-design-system--gallery-slider_img iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Paginated grid items (gallery + knowledge hub) are grid children; ensure the
 * pagination's hidden attr actually removes them. */
[data-gallery-grid] .quantum-zenith-design-system--gallery-grid_item[hidden],
[data-kh-grid] .quantum-zenith-design-system--gallery-grid_item[hidden] {
  display: none !important;
}

/* --- Planner plans: alternate the image side -------------------------------
 * The source alternates the image side per row and puts the image on top on
 * mobile via per-item Webflow grid-placement IDs (#w-node-…). Those unique IDs
 * can't survive a CMS loop (every item shares one template), so reproduce the
 * same behaviour generically here. */
@media screen and (min-width: 768px) {
  .planner-plans_list .planner-plan:nth-child(even) .planner-plan_content {
    order: 2;
  }
  .planner-plans_list .planner-plan:nth-child(even) .planner-plan_img {
    order: 1;
  }
}

@media screen and (max-width: 767px) {
  /* 1-col stack: image on top for every row (matches the original w-node rule). */
  .planner-plans_list .planner-plan_img {
    order: -1;
  }
}

/* --- Careers: open-roles filter dropdowns ----------------------------------
 * The c-dropdown trays toggle via the existing .cc-hide class; these just add
 * the click affordance, active state, and an empty-results message. */
.open-role_dropdowns .dropdown-btn,
.open-role_dropdowns .dropdown-item {
  cursor: pointer;
}

/* Left-align the trays under their pill (Webflow defaults them to right: 0). */
.open-role_dropdowns .dropdown-tray {
  left: 0;
  right: auto;
}

.open-role_dropdowns .dropdown-item.is-active {
  background: #f4f4f4;
  font-weight: 600;
}

/* Reports "Recent/Oldest" sort dropdown. */
.reports-section_heading .dropdown-btn,
.reports-section_heading .dropdown-item {
  cursor: pointer;
}

.reports-section_heading .dropdown-item.is-active {
  background: #f4f4f4;
  font-weight: 600;
}

/* .reports-item is display:flex, which overrides the UA [hidden] rule — so the
 * JS filter (el.hidden = true) wouldn't hide it. Force it. */
[data-roles-list] .reports-item[hidden] {
  display: none !important;
}

.careers-empty {
  padding: 24px 0;
  color: #6b6b6b;
}

/* --- News listing: filter dropdowns (category + sort) ----------------------
 * The generated filter pills are static closed controls; add the popover menu. */
.quantum-zenith-design-system--news-filter[data-category-filter],
.quantum-zenith-design-system--news-filter[data-sort-filter] {
  position: relative;
  cursor: pointer;
}

.news-filter_menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: #fff;
  border: 1px solid #dfdfdf;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  z-index: 10;
}

.quantum-zenith-design-system--news-filter.is-open .news-filter_menu {
  display: flex;
}

.quantum-zenith-design-system--news-filter.is-open
  .quantum-zenith-design-system--news-filter_btn
  svg {
  transform: rotate(180deg);
}

.news-filter_option {
  padding: 8px 12px;
  color: #1e1e1e;
  text-decoration: none;
  cursor: pointer;
}

/* Card image link is an inline-block <a> that shrinks to the image and clips
 * it; make it fill the card width (same fix as the suggestion cards). */
.quantum-zenith-design-system--news-grid
  .quantum-zenith-design-system--news-card_img {
  width: 100%;
}

.news-filter_option:hover {
  background: #f4f4f4;
}

.news-filter_option.is-active {
  background: #f4f4f4;
  font-weight: 600;
}

/* JS-built page numbers sit inline with the prev/next buttons. */
.news-pagination_nums {
  display: contents;
}

.news-empty {
  grid-column: 1 / -1;
  padding: 40px 0;
  color: #6b6b6b;
}

/* --- News detail: "More news" suggestions ----------------------------------
 * The generated markup is built as a Swiper (flex .swiper-wrapper inside an
 * overflow:hidden .news-sugg_grid). When there aren't enough items to warrant
 * a slider we don't initialise Swiper (no `.swiper` class on the grid); in that
 * case render the cards as a wrapping responsive grid so none get clipped. */
.quantum-zenith-design-system--news-sugg_grid:not(.swiper) {
  overflow: visible;
}

/* The card image is an inline-block <a> that shrinks to the image and clips it;
 * make it fill the card width. */
.quantum-zenith-design-system--news-sugg_grid
  .quantum-zenith-design-system--news-card_img {
  width: 100%;
}

.quantum-zenith-design-system--news-sugg_grid:not(.swiper)
  .quantum-zenith-design-system--swiper-wrapper {
  display: grid;
  /* Fixed ~420px columns (not 1fr) so cards keep their width instead of
   * stretching to fill the row; collapses to full width on narrow screens. */
  grid-template-columns: repeat(auto-fill, min(420px, 100%));
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

/* Slides are `flex: none` for the slider; reset that when gridded so each card
 * fills its grid track. */
.quantum-zenith-design-system--news-sugg_grid:not(.swiper)
  .quantum-zenith-design-system--swiper-slide {
  flex: initial;
  width: auto;
}

/* As a slider, slides have no intrinsic width (Swiper `slidesPerView:auto`
 * measures the slide), so give them an explicit width. max-width keeps them
 * from overflowing a narrow viewport. */
.quantum-zenith-design-system--news-sugg_grid.swiper
  .quantum-zenith-design-system--swiper-slide {
  width: 420px;
  max-width: 100%;
}

/* ---- Nav logo light/dark swap ----
 * Webflow swapped the dark/white logos with per-variant `.w-variant-*` classes,
 * which the SeeMS extraction stripped (leaving both <img>s present but the white
 * logo always hidden, so it never swaps). Re-express the swap off the nav variant
 * attribute that the color contract (Sitenav.vue) and the scroll JS (BaseLayout)
 * already toggle: base/group = white nav bg → dark logo; transparent/
 * group_transparent = over hero → white logo. Covers desktop (c-logo_dark/_light)
 * and mobile (c-logo / c-logo-white). */
.quantum-zenith-design-system--c-nav {
  --nav-logo-dark-display: inline-block; /* matches the global img default */
  --nav-logo-light-display: none;
}
.quantum-zenith-design-system--c-nav[data-wf--quantum-zenith-design-system--nav--variant="transparent"],
.quantum-zenith-design-system--c-nav[data-wf--quantum-zenith-design-system--nav--variant="group_transparent"] {
  --nav-logo-dark-display: none;
  --nav-logo-light-display: inline-block;
}
.quantum-zenith-design-system--c-logo_dark,
.quantum-zenith-design-system--c-logo {
  display: var(--nav-logo-dark-display);
}
.quantum-zenith-design-system--c-logo_light,
.quantum-zenith-design-system--c-logo-white {
  display: var(--nav-logo-light-display);
}

/* ---- About leadership popup on mobile: stack image over bio, scroll bio ---- */
@media screen and (max-width: 767px) {
  .quantum-zenith-design-system--c-leadership_slider {
    flex-flow: column;
  }
  .quantum-zenith-design-system--lslide-img_group,
  .quantum-zenith-design-system--lslide {
    width: 100%;
    max-width: none;
  }
  .quantum-zenith-design-system--lslide-imgs {
    width: 100%;
    max-height: 40vh;
  }
  .quantum-zenith-design-system--lslide-content_holder {
    max-height: 30vh;
  }
  .quantum-zenith-design-system--lslide-content {
    padding-top: 0;
    padding-bottom: 0;
  }
  .quantum-zenith-design-system--popup-container {
    margin-top: 48px;
    max-height: calc(100vh - 64px - 48px);
  }
}

/* When the mobile menu is open, the swap slides every descendant of .menu-icon
 * (incl. the embed), carrying the close (X) out of its clipped box. Keep the
 * inner embed put — scoped to the open state so it outspecifies the swap rule. */
.quantum-zenith-design-system--nav-holder:has(
    + .quantum-zenith-design-system--c-nav_mobile.cc-open
  )
  .quantum-zenith-design-system--menu-icon
  .quantum-zenith-design-system--i-36,
.quantum-zenith-design-system--nav-holder:has(
    + .quantum-zenith-design-system--c-nav_mobile.cc-open
  )
  .quantum-zenith-design-system--menu-icon
  .quantum-zenith-design-system--i-36
  * {
  transform: none;
}

/* ---- Contact form success / error states ----
 * Replace the gray Webflow defaults (#ddd / #ffdede) — unreadable against the
 * dark .contact-form card's white text — with on-theme messages. */
.contact-form .w-form-done,
.contact-form .w-form-fail {
  padding: 48px 32px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  line-height: 1.5;
}
.contact-form .w-form-done {
  background-color: #1a1a1a;
  border: 1px solid var(--quantum-zenith-design-system---zenith-red);
}
.contact-form .w-form-done::before {
  content: "✓";
  display: block;
  margin-bottom: 16px;
  font-size: 44px;
  line-height: 1;
  color: var(--quantum-zenith-design-system---zenith-red);
}
.contact-form .w-form-fail {
  margin-top: 0;
  background-color: rgba(227, 1, 16, 0.12);
  border: 1px solid var(--quantum-zenith-design-system---zenith-red);
}

@media screen and (min-width: 768px) {
  .service-list_item {
    min-height: 360px;
  }
}

/* Google Maps embed fills the .contact-map box (iframes have no intrinsic size,
 * unlike the image it replaces). .contact-map already sets height:300px on mobile. */
.contact-map_embed {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
}
@media screen and (max-width: 767px) {
  .contact-map_embed {
    height: 300px;
  }
}

/* Submit button loading state: disable + swap the arrow for a spinner. */
.contact-form .box-btn.cc-loading {
  pointer-events: none;
  opacity: 0.7;
  cursor: progress;
}
.contact-form .box-btn.cc-loading .box-btn_icon {
  visibility: hidden;
  position: relative;
}
.contact-form .box-btn.cc-loading .box-btn_icon::after {
  content: "";
  visibility: visible;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: qz-btn-spin 0.7s linear infinite;
}
@keyframes qz-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.contact-form_wrapper {
  transition: top 0.3s cubic-bezier(0.86, 0, 0.07, 1);
  top: var(--nav-offset);
}

.c-btn.cc-large.cc-white:hover {
  color: white;
}

.quantum-zenith-design-system--c-cta_btn {
  position: relative;
  overflow: hidden;
  --y: 100%;
  --color: black;
  transition: border-color 0.4s ease;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color);
    transform: translateY(var(--y));
    transition: transform 0.3s ease-in-out;
  }
  & > * {
    position: relative;
    margin: 0;
  }
  &:hover {
    --y: 0%;
    color: white;
    border-color: var(--color);
  }
  &.cc-disabled {
    --y: 100%;
    cursor: not-allowed;
  }
}