/* Additions for the Next.js port. Everything else is the original theme CSS. */

/* Pages whose theme template had no .page-wrapper */
.cm-no-wrapper {
  display: contents;
}

/* Background video hero — replaces Revolution Slider "News Background Video1"
   (fullwidth, grid 1240x700 / 1024x450 / 778x400, scaled like RS6 does) */
.cm-hero {
  position: relative;
  overflow: hidden;
  background: #eeeeee;
  --cm-hero-h: 700px;
  height: var(--cm-hero-h);
}
@media (max-width: 1239px) {
  .cm-hero {
    --cm-hero-h: calc(100vw * 700 / 1240);
  }
}
@media (max-width: 1024px) {
  .cm-hero {
    --cm-hero-h: calc(100vw * 450 / 1024);
  }
}
@media (max-width: 778px) {
  .cm-hero {
    --cm-hero-h: calc(100vw * 400 / 778);
  }
}
.cm-hero-poster,
.cm-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
}
.cm-hero-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
/* The video is ~2.15:1 inside YouTube's 16:9 player: size the player so the
   picture itself covers the hero, and show it only once it is playing
   (until then the poster is visible, like Revolution Slider did) */
.cm-hero-video {
  width: max(100%, calc(var(--cm-hero-h) * 2.15));
  aspect-ratio: 16 / 9;
  height: auto;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.cm-hero-video.is-playing {
  opacity: 1;
}
.cm-hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Readability & layout fixes (design otherwise unchanged)
   ========================================================================== */

/* 1. Text the WordPress editor coloured #e4e4e4 (meant for a dark background)
      is near-invisible on the light page backgrounds: "What We Do", the home
      "About Us" text, the "Code Of Conduct" title. */
.container-modern [style*="e4e4e4"] {
  color: #1f2d3d !important;
}

/* 2. Newsletter heading: some pages set it to white on a light background */
.newsletter .mc4wp-form .mc4wp-form-fields h3 {
  color: #000 !important;
}

/* 3. Menu: "Contact Us" was smaller and grey unlike the other top items */
.navbar-nav li#menu-item-2194 > a {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
/* Collapsed (mobile/tablet) menu: the top items were white on the light menu
   panel — the custom CSS's "black on mobile" rule never applied (escaped
   comments) — and the desktop black bar showed as a strip above the panel */
@media (max-width: 991px) {
  .navbar-nav > li.menu-item > a.nav-link {
    color: #172b43 !important;
  }
  .navbar-nav > li.menu-item.current-menu-item > a.nav-link,
  .navbar-nav > li.menu-item > a.nav-link:hover {
    color: #000 !important;
  }
  div#navbarNav {
    background: transparent;
  }
}

/* 4. Stray black triangles the custom CSS drew outside the menu bar */
div#navbarNav::before,
div#navbarNav::after {
  display: none !important;
}

/* 5. Home service cards: same height and top-aligned (were vertically centred,
      so cards with less text sat higher than their neighbours) */
#services .vc_row-flex {
  align-items: stretch;
}
#services .vc_row-flex > .vc_column_container > .vc_column-inner {
  justify-content: flex-start;
}
#services .vc_row-flex > .vc_column_container > .vc_column-inner > .wpb_wrapper,
#services .service-box {
  height: 100%;
}

/* 6. Photo gallery / product group cards: centre the 3-column grid
      (31% wide + 2% right margin left an uneven gap on the right) */
@media screen and (min-width: 768px) {
  .vc_row.extra_margin {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .extra_margin .content-block.wpb_column.vc_column_container.vc_col-sm-4:last-child {
    margin-right: 0 !important;
  }
}

/* 7. Product group lists used the browser's monospace <pre> font */
.extra_margin pre {
  font-family: "Fira Sans", sans-serif;
  font-size: 1.5rem;
  line-height: 2.6rem;
  white-space: pre-line;
  overflow: visible;
}

/* 8. Page header carousels: equal image heights. This is the rule the site's
      custom CSS intended (it never applied because its comments were saved
      escaped), so slides no longer jump in height and mobile has no big gap. */
.wdo-carosuel-container .owl-item .box-img img {
  display: block;
  width: 100%;
  height: 400px !important;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .wdo-carosuel-container .owl-item .box-img img {
    height: 250px !important;
  }
}

/* 9. Contact form "subject" dropdown looked unstyled next to the inputs */
.contact-form select.wpcf7-select {
  width: 100%;
  height: calc(6rem + 4px);
  margin-bottom: 3rem;
  padding: 0 2rem;
  font-size: 1.8rem;
  color: #69798d;
  background: #fff;
  border: 2px solid #f1f0ff;
  border-radius: 5px;
  transition: all 0.5s;
}
.contact-form select.wpcf7-select:hover,
.contact-form select.wpcf7-select:focus {
  outline: none;
  border-color: #ff7cb0;
}

/* 10. Get A Quote: social icons in the info card (hover state) */
.contact-info.floating-contact-info .social-icons a:hover {
  background: #6245fe;
}

/* 11. Footer menu + copyright were too dim on the navy background */
.small-agency-footer .footer-nav-wrapper .footer-nav li a,
.small-agency-footer .footer-bottom p,
.small-agency-footer .footer-bottom p a {
  color: #a9b6c6;
}

/* 12. Gallery pages on phones: centre the photo grid */
@media screen and (max-width: 767px) {
  .wpb_gallery .wpb_image_grid .wpb_image_grid_ul {
    text-align: center;
  }
  .wpb_gallery .wpb_image_grid .wpb_image_grid_ul .isotope-item {
    float: none;
    display: inline-block;
  }
}
.extra_margin pre,
.extra_margin pre * {
  font-weight: 600;
}

/* Submenus opened by click/tap (see theme-runtime.tsx); hover keeps working */
.navbar-nav li.dropdown.cm-open > ul.custom-dropdown-menu {
  display: block;
}

/* Desktop submenus: the custom CSS meant to place them right under the menu
   bar (top: 100%) but that rule never applied (escaped comments), leaving a
   ~30px gap — moving the mouse down to a submenu closed it. Nested submenus
   (Photo Gallery > Knit > Men…) also had a small gap to their left; an
   invisible bridge keeps the hover alive while crossing it. */
@media (min-width: 992px) {
  .navbar-nav > li.dropdown > .custom-dropdown-menu {
    top: 100%;
  }
  .navbar-nav .dropdown.dropdown-item > .custom-dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 24px;
  }
}
@media (min-width: 992px) {
  .navbar-nav .dropdown.dropdown-item.cm-flip > .custom-dropdown-menu {
    left: auto;
    right: 100%;
  }
  .navbar-nav .dropdown.dropdown-item.cm-flip > .custom-dropdown-menu::before {
    right: auto;
    left: 100%;
  }
}
@media (min-width: 992px) {
  /* Nested submenus level with their parent row (custom CSS intent: top 0) */
  .navbar-nav .dropdown.dropdown-item > .custom-dropdown-menu {
    top: 0;
  }
}