/*
 * Why MetOcean landing page (/whymetocean/, page ID 15873).
 * Hand-written, not compiled from src/ -- loaded after style.css by website_scripts().
 * Point sections and dividers are keyed to block classes (why-point, why-point-divider,
 * why-metocean-wave-divider) so editors keep the styling when they duplicate a section.
 */

/* Point sections: image top lines up with the heading; image 30% smaller */
.why-point > .wp-block-column > .wp-block-heading:first-child {
  margin-top: 0;
}
.main-content .why-point > .wp-block-column:last-child .wp-block-image {
  width: 70%;
  margin: 0 0 0 auto;
}
.why-point > .wp-block-column:last-child .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Short divider between point sections */
.main-content hr.wp-block-separator.why-point-divider {
  width: 130px;
  max-width: 130px;
  height: 0;
  margin: 50px 0;
  border: 0;
  border-top: 3px solid #003b5c;
  background: none;
  opacity: 1;
}

/* Bottom wave: full bleed and flush between the contact band and the footer.
   -80px cancels .group-has-background's margin-bottom; -60px cancels .main-content's padding-bottom. */
.main-content > .wp-block-image.why-metocean-wave-divider {
  width: 100vw;
  max-width: 100vw;
  margin: -80px calc(50% - 50vw) -60px;
}
.main-content > .wp-block-image.why-metocean-wave-divider img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hero call-to-action in MetOcean red ($color__primary / $color__primary-light) */
.page-id-15873 .hero .button {
  background-color: #9e2a2f;
  border-color: #9e2a2f;
}
.page-id-15873 .hero .button:hover {
  background-color: #ba3036;
  border-color: #ba3036;
}
.page-id-15873 .hero .button:active,
.page-id-15873 .hero .button:focus {
  background-color: #9e2a2f;
}

/* Primary nav: "Why MetOcean" is ~50px wider than the "Security" item it replaced.
   header.twig keeps the menu column at 75% from 1024px up; between 940px and 1023px
   tighten the top-level item padding (Max Mega Menu default 0 10px) so the menu still
   fits on one line wherever the old menu did. */
@media only screen and (min-width: 940px) and (max-width: 1023.98px) {
  .header__main__primary-menu #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    padding: 0 4px;
  }
}