/* ---- Custom overrides added when converting to a WordPress theme ---- */

/* Mobile navigation */
@media (max-width: 1023px) {
  #primary-nav {
    display: none !important;
  }
  #primary-nav.mobile-nav-open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    z-index: 300;
  }
  #primary-nav.mobile-nav-open .nav-item {
    width: 100%;
  }
  #primary-nav.mobile-nav-open .nav-item > a {
    height: auto !important;
    padding: 14px 24px !important;
  }
  #primary-nav.mobile-nav-open .nav-dropdown {
    display: block !important;
    position: static !important;
    box-shadow: none;
    border-top: none;
    background: var(--off);
  }
}

/* Sticky header shadow once the page is scrolled */
.site-header--scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* ------------------------------------------------------------------ */
/* Force a single, consistent definition of .container everywhere.    */
/* The compiled Tailwind output has two competing ".container" rules  */
/* (an auto-generated utility with no centering, and the design's own */
/* component rule with margin:auto + padding). Depending on cascade   */
/* layer order these can be applied inconsistently between the header */
/* and page sections, causing the header logo and the hero/section    */
/* text to sit at different left edges. Pinning it here with          */
/* !important removes the ambiguity so every section lines up.        */
/* ------------------------------------------------------------------ */
.container {
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 30px !important;
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------------ */
/* Responsive grid fixes.                                             */
/* The original design set its grid-template-columns as an inline     */
/* style computed by React at the desktop width it was captured at.   */
/* These rules force the correct column count back in at each         */
/* breakpoint, using the same class names the design already carries. */
/* ------------------------------------------------------------------ */
.grid-cols-1[class*="sm:grid-cols-2"][class*="lg:grid-cols-4"],
.grid-cols-2[class*="lg:grid-cols-4"],
.grid-cols-1[class*="sm:grid-cols-2"][class*="lg:grid-cols-3"],
.grid-cols-1[class*="sm:grid-cols-2"]:not([class*="lg:grid-cols-4"]):not([class*="lg:grid-cols-3"]),
.grid-cols-1[class*="lg:grid-cols-2"],
.grid-cols-1[class*="lg:grid-cols-contact"] {
  grid-template-columns: 1fr !important;
}

@media (width >= 40rem) {
  .grid-cols-1[class*="sm:grid-cols-2"][class*="lg:grid-cols-4"],
  .grid-cols-2[class*="lg:grid-cols-4"],
  .grid-cols-1[class*="sm:grid-cols-2"][class*="lg:grid-cols-3"],
  .grid-cols-1[class*="sm:grid-cols-2"]:not([class*="lg:grid-cols-4"]):not([class*="lg:grid-cols-3"]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (width >= 64rem) {
  .grid-cols-1[class*="lg:grid-cols-4"],
  .grid-cols-2[class*="lg:grid-cols-4"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .grid-cols-1[class*="lg:grid-cols-3"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .grid-cols-1[class*="lg:grid-cols-2"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-cols-1[class*="lg:grid-cols-contact"] {
    grid-template-columns: 2fr 3fr !important;
  }
}

/* Catch-all: any other inline "display:grid" container (portfolio cards,
   process steps, about-grid, office panel, etc.) that has no responsive
   class hint at all stacks to a single column below 640px. Their fixed
   multi-column inline value is left alone at 640px and up. */
@media (width < 40rem) {
  [style*="display: grid"],
  [style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* Global office tab panels */
.office-panel {
  display: none;
}
.office-panel[data-office-panel="0"] {
  display: grid;
}

/* Testimonial slides */
.testimonial-slide {
  display: none;
}
.testimonial-slide[data-slide="0"] {
  display: block;
}

/* Form feedback messages */
.ra-form-message {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
}
.ra-form-message.success {
  background: #e6f4ea;
  color: #1e7e34;
  border: 1px solid #b7dfc0;
}
.ra-form-message.error {
  background: #fdecea;
  color: #b3261e;
  border: 1px solid #f5c2bd;
}