/* Site overrides for the static build.
 * Replaces behaviors that the removed Blade-theme JS provided. */

/* The Blade theme hides animated items until JS reveals them (opacity:0).
 * We render statically, so always show them. */
.grve-animated-item {
  opacity: 1 !important;
}

/* Feature-section background images are opacity:0 until the theme JS adds
 * .grve-show. We render statically, so always show them. */
.grve-bg-image,
.grve-bg-image.grve-show {
  opacity: 1 !important;
}

/* Feature-section / page-title text content is hidden until the theme JS
 * animates it in. Show statically. */
#grve-feature-section .grve-content,
.grve-page-title .grve-content {
  opacity: 1 !important;
}
#grve-feature-section .grve-title,
#grve-feature-section .grve-subheading,
#grve-feature-section .grve-description,
#grve-feature-section .grve-btn,
#grve-feature-section .grve-graphic,
.grve-page-title .grve-title {
  opacity: 1 !important;
}

/* Product-box images are opacity:0 until the theme JS reveals them. */
.grve-box .grve-media img {
  opacity: 1 !important;
}

/* Generic .grve-image images (opacity:0 default). */
.grve-image img {
  opacity: 1 !important;
}

/* Product single-media hero image (opacity:0 default). */
#grve-single-media img {
  opacity: 1 !important;
}

/* ==========================================================================
   Image + text blocks (/network/)
   --------------------------------------------------------------------------
   The theme ships `.grve-image-text { visibility: hidden }` and its script
   floated the two halves before revealing them. With the script gone every
   one of these blocks stayed invisible — image and caption both. Flexbox
   does the same job declaratively; the source's own `grve-position-left` /
   `grve-position-right` classes decide the order.
   ========================================================================== */
.grve-image-text {
  visibility: visible;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
/* the theme's float clearfix would become a stray flex item */
.grve-image-text::before,
.grve-image-text::after {
  display: none;
}
.grve-image-text > .grve-image,
.grve-image-text > .grve-content {
  box-sizing: border-box;
}
.grve-image-text > .grve-position-left {
  order: 1;
}
.grve-image-text > .grve-position-right {
  order: 2;
}
/* Below the theme's 767px breakpoint the halves stack (it sets width:auto,
 * which under flex would keep them side by side). */
@media (max-width: 767px) {
  .grve-image-text > .grve-image,
  .grve-image-text > .grve-content {
    width: 100%;
  }
}

/* ==========================================================================
   Product / portfolio grids
   --------------------------------------------------------------------------
   WordPress laid these out with Isotope: absolutely-positioned items whose
   width and column count were computed in JS. The static site drops Isotope
   entirely and uses CSS Grid, so the column count follows the viewport with
   no JS at all. Column counts still come from the source markup's
   data-columns* attributes, so content stays the single source of truth.
   ========================================================================== */

/* Card inners and the container are opacity:0 until the theme JS reveals
 * them. We render statically, so show them. */
.grve-isotope-item-inner,
.grve-isotope-container {
  opacity: 1 !important;
}

.grve-isotope .grve-isotope-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  /* undo the theme's negative gutter margins + fixed width from Isotope */
  margin: 0 !important;
  width: auto !important;
  overflow: visible;
}
.grve-isotope:not(.grve-with-gap) .grve-isotope-container {
  gap: 0;
}
.grve-isotope .grve-isotope-item {
  /* undo the theme's per-item gutter padding and Isotope's inline geometry */
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  float: none;
}

/* Tablet: use the source's tablet-portrait column count. */
@media (min-width: 600px) {
  .grve-isotope[data-columns-tablet-portrait='2'] .grve-isotope-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .grve-isotope[data-columns-tablet-portrait='3'] .grve-isotope-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop (where the full-width header also kicks in): the source's
 * data-columns — 3 for every product grid on this site. */
@media (min-width: 1024px) {
  .grve-isotope[data-columns='2'] .grve-isotope-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .grve-isotope[data-columns='3'] .grve-isotope-container {
    grid-template-columns: repeat(3, 1fr);
  }
  .grve-isotope[data-columns='4'] .grve-isotope-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card hover. The theme animated this from a JS-applied `.hover` class;
 * plain :hover/:focus-within does the same job without the script. */
.grve-portfolio-item .grve-image-hover .grve-hover-overlay {
  transition: opacity 0.3s ease;
}
.grve-portfolio-item > a:hover .grve-hover-overlay,
.grve-portfolio-item > a:focus-visible .grve-hover-overlay {
  opacity: 0.9;
}
.grve-portfolio-item > a:focus-visible {
  outline: 2px solid #37a5c6;
  outline-offset: 3px;
}
.grve-portfolio-item .grve-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Main menu dropdowns (Products / Company)
   --------------------------------------------------------------------------
   The Blade theme opened these from JS; the theme CSS never positions or
   shows `.sub-menu` on its own, so without the script the dropdowns were
   invisible. Colours still come from theme-inline.css — this only adds
   position, reveal and spacing. Desktop only: below 1024px the main header
   is hidden and the off-canvas menu takes over.
   ========================================================================== */
@media (min-width: 1024px) {
  #grve-main-menu .grve-menu > li {
    position: relative;
  }
  #grve-main-menu .grve-menu ul.sub-menu {
    /* The theme ships `#grve-main-menu.grve-horizontal-menu li ul` with
     * display:none + a JS-driven keyframe animation. Keep the element in
     * flow and reveal it with opacity/visibility instead. */
    display: block;
    animation: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    width: auto;
    min-width: 240px;
    max-width: 330px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    text-align: left;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  /* Right-align the last menu item's dropdown so it can't overflow the page */
  #grve-main-menu .grve-menu > li:last-child ul.sub-menu {
    left: auto;
    right: 0;
  }
  #grve-main-menu .grve-menu > li:hover > ul.sub-menu,
  #grve-main-menu .grve-menu > li:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  #grve-main-menu .grve-menu ul.sub-menu > li {
    float: none;
    display: block;
  }
  /* Beats the theme's `#grve-main-menu.grve-horizontal-menu ul.sub-menu li a` */
  #grve-main-menu.grve-horizontal-menu ul.sub-menu li a {
    display: block;
    margin: 0;
    padding: 11px 20px;
    line-height: 1.4;
    white-space: normal;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  /* Caret on items that have a dropdown */
  #grve-main-menu .grve-menu > li.menu-item-has-children > a > .grve-item::after {
    content: '';
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.6em;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-0.2em) rotate(45deg);
    transition: transform 0.2s ease;
  }
  #grve-main-menu .grve-menu > li.menu-item-has-children:hover > a > .grve-item::after,
  #grve-main-menu .grve-menu > li.menu-item-has-children:focus-within > a > .grve-item::after {
    transform: translateY(0.1em) rotate(-135deg);
  }
}

/* ==========================================================================
   Off-canvas (mobile) menu — accordion sub-menus
   The theme hides `ul.grve-menu li ul` and relied on JS slideToggle to open
   it. `.open` is toggled by the arrow button in site.js.
   ========================================================================== */
#grve-hidden-menu ul.grve-menu li.open > ul.sub-menu {
  display: block;
}
#grve-hidden-menu ul.grve-menu ul.sub-menu li a {
  font-size: 13px;
  opacity: 0.85;
}
/* The theme rules these dividers in #3e3e3e, which reads muddy on the navy
 * panel — a faint white line separates just as well. */
#grve-hidden-menu ul.grve-menu li a {
  border-color: rgba(255, 255, 255, 0.13);
}
/* The arrow is a hit target inside the link — keep it above the label */
#grve-hidden-menu ul.grve-menu li a .grve-arrow {
  z-index: 2;
}

/* ==========================================================================
   Contact form response messages
   --------------------------------------------------------------------------
   site.js drives Contact Form 7's own state classes (sent / failed / invalid)
   so its stylesheet supplies the semantics. But the theme overrides the
   response box's colour at id-level specificity in two different places —
   `#grve-content form div` (#e4e4e4) on /contacts/ and
   `#grve-theme-wrapper .grve-modal form div` (#3e3e3e) in the header modal —
   which left every outcome the same neutral grey. These restore the state
   colours above both, so success and failure are actually distinguishable.
   ========================================================================== */
#grve-theme-wrapper .wpcf7 form .wpcf7-response-output {
  margin: 1.6em 0 0;
  padding: 0.85em 1.1em;
  border: 2px solid #00a0d2;
  border-radius: 3px;
  background: rgba(0, 160, 210, 0.06);
  font-size: 14px;
  line-height: 1.5;
}
#grve-theme-wrapper .wpcf7 form.sent .wpcf7-response-output {
  border-color: #46b450;
  background: rgba(70, 180, 80, 0.09);
  color: #1d7a32;
}
#grve-theme-wrapper .wpcf7 form.failed .wpcf7-response-output,
#grve-theme-wrapper .wpcf7 form.aborted .wpcf7-response-output {
  border-color: #dc3232;
  background: rgba(220, 50, 50, 0.07);
  color: #a32020;
}
#grve-theme-wrapper .wpcf7 form.invalid .wpcf7-response-output,
#grve-theme-wrapper .wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: #ffb900;
  background: rgba(255, 185, 0, 0.1);
  color: #8a6100;
}

/* Prevent body scroll while the mobile menu is open */
body.grve-hidden-menu-open {
  overflow: hidden;
}

/* Back-to-top button visibility (show once scrolled) */
.grve-back-top {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
body.grve-show-back-top .grve-back-top {
  opacity: 1;
  visibility: visible;
}

/* Homepage hero slider — arrows + pagination styled like the original
 * RevSlider "uranus" navigation. Global (not scoped) so Splide's
 * dynamically-created controls match these rules.
 * !important beats the theme's generic
 * `#grve-theme-wrapper button:not(.grve-custom-btn)` rules that would
 * otherwise paint every button with the primary color + padding. */

/* Left/right arrows: 50x50, transparent, white chevron */
.sitep-hero .splide__arrow {
  position: absolute !important; /* theme forces relative on all buttons */
  top: 50% !important;
  width: 50px !important;
  height: 50px !important;
  background: rgba(255, 255, 255, 0) !important;
  border: none !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  padding: 0 !important;
  display: flex !important;
  transition: opacity 0.3s;
}
.sitep-hero .splide__arrow:hover {
  opacity: 0.75 !important;
}
.sitep-hero .splide__arrow svg {
  fill: #ffffff !important;
  width: 32px !important;
  height: 32px !important;
}
.sitep-hero .splide__arrow--prev {
  left: 24px !important;
}
.sitep-hero .splide__arrow--next {
  right: 24px !important;
}

/* Pagination dots: 15px round, white ring, centered bottom */
.sitep-hero .splide__pagination {
  bottom: 28px !important;
  position: absolute !important;
  z-index: 10;
}
.sitep-hero .splide__pagination__page {
  position: relative;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  background: transparent !important;
  opacity: 1 !important;
  margin: 0 5px !important;
  padding: 0 !important;
  display: block !important;
}
.sitep-hero .splide__pagination__page::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
}
.sitep-hero .splide__pagination__page.is-active::after {
  background: rgba(255, 255, 255, 1);
}

@media (max-width: 767px) {
  .sitep-hero .splide__arrow {
    width: 36px !important;
    height: 36px !important;
  }
  .sitep-hero .splide__arrow svg {
    width: 22px !important;
    height: 22px !important;
  }
  .sitep-hero .splide__arrow--prev {
    left: 12px !important;
  }
  .sitep-hero .splide__arrow--next {
    right: 12px !important;
  }
}