/* Shared dropdown framing for the local framed page designs. */
body[class*="-framed"] {
  --jvds-nav-paper: #fff;
  --jvds-nav-header-paper: #f3f1eb;
  --jvds-nav-line: #d9d7cf;
  --jvds-nav-ink: #282821;
  --jvds-nav-node-size: 3px;
  --jvds-nav-content-inset: 16px;
  --jvds-nav-media-pad: 20px;
}

/* Shared header controls use the homepage black surface and white hover/focus text. */
body[class*="-framed"] .header .nav > li > .v1:is(:hover, :focus-visible) { color: #fff !important; }
body[class*="-framed"] .header .nav > li > .v1:is(:hover, :focus-visible)::before {
  background-color: #000;
  opacity: 1;
}
body[class*="-framed"] .header .jvds-header-tools .jvds-pref-btn:is(:hover, :focus-visible) {
  background: #000;
  border-color: #000;
  color: #fff;
}
body[class*="-framed"] .header #jvds-header-contact:is(:hover, :focus-visible) {
  background: #000;
  border-color: #000;
  color: #fff !important;
}
body[class*="-framed"] .header #jvds-header-contact:is(:hover, :focus-visible) .g-contact-btn-fill { background: #000 !important; }
body[class*="-framed"] .header #jvds-header-contact:is(:hover, :focus-visible) .g-contact-btn-text,
body[class*="-framed"] .header #jvds-header-contact:is(:hover, :focus-visible) .g-contact-btn-icon { color: #fff !important; }

body[class*="-framed"] .header .jvds-mega-plate,
body[class*="-framed"] .header .jvds-megamenu-panel,
body[class*="-framed"] .header .jvds-megamenu-content {
  background: var(--jvds-nav-paper);
}

body[class*="-framed"] .header .jvds-mega-plate {
  border-color: var(--jvds-nav-line);
}

body[class*="-framed"] .header .jvds-megamenu-heading {
  padding-inline: var(--jvds-nav-content-inset);
  border-bottom: 0;
  color: #6e6e65;
}

body[class*="-framed"] .header .jvds-menu-card,
body[class*="-framed"] .header .jvds-megamenu-cover {
  position: relative;
  box-sizing: border-box;
  isolation: isolate;
  overflow: visible;
  border: 1px solid var(--jvds-nav-line);
  border-radius: 0;
  background: var(--jvds-nav-paper);
}

body[class*="-framed"] .header .jvds-menu-card:is(:hover, :focus-visible) {
  background: var(--jvds-nav-paper);
}

body[class*="-framed"] .header .jvds-menu-card::before {
  border-radius: 0;
}

/* Leave the navigation's height reveal clipped. Content padding protects
   these complete square nodes inside that animated outer viewport. */
body[class*="-framed"] .header .jvds-menu-card::after,
body[class*="-framed"] .header .jvds-megamenu-cover::after {
  content: "";
  display: block;
  position: absolute;
  inset: -2px;
  width: auto;
  height: auto;
  z-index: 10;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--jvds-nav-ink), var(--jvds-nav-ink)) left top / var(--jvds-nav-node-size) var(--jvds-nav-node-size) no-repeat,
    linear-gradient(var(--jvds-nav-ink), var(--jvds-nav-ink)) right top / var(--jvds-nav-node-size) var(--jvds-nav-node-size) no-repeat,
    linear-gradient(var(--jvds-nav-ink), var(--jvds-nav-ink)) left bottom / var(--jvds-nav-node-size) var(--jvds-nav-node-size) no-repeat,
    linear-gradient(var(--jvds-nav-ink), var(--jvds-nav-ink)) right bottom / var(--jvds-nav-node-size) var(--jvds-nav-node-size) no-repeat;
}

body[class*="-framed"] .header .jvds-menu-title {
  color: var(--jvds-nav-ink);
}

body[class*="-framed"] .header .jvds-menu-description {
  color: #6e6e65;
}

@media (min-width: 801px) {
  /* The full-width bar and its capped inner container must share one surface. */
  body[class*="-framed"] .header[data-jvds-megamenu-header][data-mega-open],
  body[class*="-framed"] .header[data-jvds-megamenu-header][data-mega-open] > .wp3 {
    background-color: var(--jvds-nav-header-paper) !important;
  }

  /* Only the homepage hero keeps a transparent top bar when a menu opens.
     Sticky/solid headers retain the page background supplied by their normal rules. */
  body.jvds-home-framed .header:not(.fixed):not(.hd-bg)[data-jvds-megamenu-header][data-mega-open],
  body.jvds-home-framed .header:not(.fixed):not(.hd-bg)[data-jvds-megamenu-header][data-mega-open] > .wp3 {
    background: transparent !important;
    border-bottom-color: transparent !important;
  }

  body[class*="-framed"] .header .jvds-megamenu-content {
    padding: 12px var(--jvds-nav-content-inset) 20px;
  }

  body[class*="-framed"] .header .jvds-megamenu-content.has-cover {
    gap: 16px;
    padding: 12px var(--jvds-nav-content-inset) 20px;
  }

  body[class*="-framed"] .header .jvds-megamenu-grid,
  body[class*="-framed"] .header .jvds-megamenu-content.has-cover > .jvds-megamenu-grid {
    gap: 16px;
    padding: 0;
  }

  body[class*="-framed"] .header .jvds-megamenu-cover {
    padding: var(--jvds-nav-media-pad);
  }

  /* Keep the cover stretched to the menu rows; crop only within its inset
     image rectangle so the frame nodes remain visible above the media. */
  body[class*="-framed"] .header .jvds-megamenu-cover img {
    inset: var(--jvds-nav-media-pad);
    width: calc(100% - var(--jvds-nav-media-pad) * 2);
    height: calc(100% - var(--jvds-nav-media-pad) * 2);
    max-width: none;
    border-radius: 0;
    object-fit: cover;
  }
}

@media (max-width: 800px) {
  body[class*="-framed"] {
    --jvds-nav-media-pad: 16px;
  }

  body[class*="-framed"] .header .jvds-megamenu-panel {
    border-radius: 0;
  }

  body[class*="-framed"] .header .jvds-megamenu-content {
    padding: 4px;
  }

  body[class*="-framed"] .header .jvds-megamenu-grid {
    gap: 12px;
    padding: 0;
  }

  body[class*="-framed"] .header .jvds-menu-card {
    min-height: 62px;
    padding: 12px 16px;
  }
}