/* Press pages: main-site header + category button row under it */

:root {
  --pzps-press-subnav-height: 52px;
  --pzps-press-chrome-height: 172px;
}

/*
 * One fixed stack (upper + main nav + subnav) so desktop scroll cannot open a gap
 * between .the-menu and the category bar.
 *
 * Order must stay: marquee → main nav → category subnav.
 * Marquee CSS sets body .the-menu { top: marquee-height !important } for fixed
 * positioning — that must NOT apply here or relative .the-menu shifts down and
 * the subnav appears above it.
 */
.pzps-press-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
}

body:not(.body-nic) .pzps-press-chrome .new-uppermenu,
body:not(.body-nic) .pzps-press-chrome .the-menu,
.pzps-press-chrome .new-uppermenu,
.pzps-press-chrome .the-menu {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
}

.pzps-press-chrome .the-menu {
  box-shadow: none !important;
  border-bottom: none !important;
  z-index: 3 !important;
}

.pzps-press-chrome .new-uppermenu {
  z-index: 3 !important;
}

/* Marquee mobile rules force fixed uppermenu — keep it in the chrome flow */
@media screen and (max-width: 767px) {
  body:not(.body-nic) .pzps-press-chrome .new-uppermenu:has(.pzps-marquee),
  .pzps-press-chrome .new-uppermenu:has(.pzps-marquee) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: 3 !important;
    height: var(--pzps-marquee-height, 40px) !important;
    min-height: var(--pzps-marquee-height, 40px) !important;
    max-height: var(--pzps-marquee-height, 40px) !important;
  }

  body:has(.pzps-press-chrome):has(.pzps-marquee) {
    padding-top: 0 !important;
  }

  /* Keep the white bar as a single hamburger/logo row */
  .pzps-press-chrome .the-menu {
    display: block !important;
  }

  .pzps-press-chrome .the-menu .div-block-7 {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 60px !important;
    overflow: hidden !important;
  }

  .pzps-press-chrome .the-menu .div-block-10,
  .pzps-press-chrome .the-menu .div-block-9 {
    display: none !important;
  }

  /*
   * Overlay lives inside .pzps-press-chrome. Stack under hamburger (z:3) but
   * above the category subnav (z:1). Top offset matches site-wide mobile nav
   * (marquee + white bar); content starts at the top of the panel.
   */
  .pzps-press-chrome .show-menu.div-block-117 {
    z-index: 2 !important;
    top: calc(var(--pzps-marquee-height, 40px) + var(--pzps-mobile-nav-bar-height, 60px)) !important;
    height: calc(
      100dvh - var(--pzps-marquee-height, 40px) - var(--pzps-mobile-nav-bar-height, 60px)
    ) !important;
    max-height: calc(
      100dvh - var(--pzps-marquee-height, 40px) - var(--pzps-mobile-nav-bar-height, 60px)
    ) !important;
  }

  .pzps-press-chrome .show-menu .div-block-116 {
    margin-top: 16px !important;
  }

  .pzps-press-chrome .pzps-press-subnav {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
  }

  html.pzps-mobile-nav-open .pzps-press-chrome .pzps-press-subnav {
    visibility: hidden;
  }
}

.pzps-press-subnav {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  z-index: auto;
  background: #fff;
  border-top: 1px solid #d9d9d9;
  border-bottom: none;
  height: var(--pzps-press-subnav-height);
}

.pzps-press-subnav__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Pill buttons — same round corners as upper-menu .link-block-25 */
.pzps-press-subnav__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 16px;
  border: 1px solid #d6d6d6;
  border-radius: 100px;
  background: #fff;
  color: #000;
  font-family: Ppneuemontreal, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.pzps-press-subnav__btn:hover {
  color: var(--chocolate, #ee6213);
  border-color: var(--chocolate, #ee6213);
}

.pzps-press-subnav__btn.is-active,
.pzps-press-subnav__btn[aria-current="page"] {
  color: #fff;
  background: var(--chocolate, #ee6213);
  border-color: var(--chocolate, #ee6213);
}

/* Article back control (moved from .sticky-button-wrapper) */
.pzps-press-subnav__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 4px;
  border-radius: 100px;
  background: #6b6b6b;
  transition: background-color 0.2s ease;
}

.pzps-press-subnav__back:hover {
  background: #818181;
}

.pzps-press-subnav__back img {
  display: block;
  width: 16px;
  height: 16px;
}

/* Hide the old floating back button on article pages */
body:has(.pzps-press-subnav__back) .sticky-button-wrapper {
  display: none !important;
}

/* Spacer = full fixed chrome height (set by JS) */
body:has(.pzps-press-chrome) .undermenu {
  height: var(--pzps-press-chrome-height) !important;
}

body:has([data-pzps-main-header]) .page-wrapper {
  padding-top: 0;
}

/* Duplicate category blurb twin (Webflow left two bound nodes). */
.category-description-wrapper > .div-flex-2 {
  display: none !important;
}

.category-description-wrapper > .text-size-large {
  opacity: 1 !important;
}

/*
 * /blog/all and /article-categories/* featured hero images are full-width
 * with no desktop height cap, so the first screen overflows. Cap them so
 * title + image fit one viewport.
 */
@media screen and (min-width: 768px) {
  .hero-section .featured-article-img-wrapper,
  .category-hero-section .featured-article-img-wrapper {
    height: min(40vh, 380px);
    max-height: 380px;
  }

  .hero-section .featured-article-img-wrapper .article-img-default,
  .category-hero-section .featured-article-img-wrapper .article-img-default {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --pzps-press-subnav-height: 48px;
  }

  .pzps-press-subnav__inner {
    padding: 0 15px;
    gap: 8px;
  }

  .pzps-press-subnav__btn {
    min-height: 32px;
    padding: 6px 14px;
    font-size: 14px;
  }

  .pzps-press-subnav__back {
    width: 32px;
    height: 32px;
  }
}