/* Loaded last. Replaces old jQuery plugin styling and fixes Bootstrap 4 -> 5 differences
   for the existing RendoHR theme (stylesheet.css). */

/* ---------- Bootstrap 5 compatibility ---------- */

/* BS5 gutters are rem-based; with the theme's 24px root they become 36px. Restore BS4's 30px. */
.container, .container-fluid, .row { --bs-gutter-x: 30px; }

/* BS5 makes every <hr> 25% opaque, which washes out the theme's coloured rules */
hr.left, hr.center, hr.footer, hr.feed, hr.about, hr.contact { opacity: 1; }

/* BS5 buttons read colours from CSS variables; define them for the theme's custom buttons
   so focus/hover states don't fall back to transparent. */
.btn-custom, .btn-slider {
  --bs-btn-color: #fff; --bs-btn-bg: #009170; --bs-btn-border-color: #009170;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #A9ABAE; --bs-btn-hover-border-color: #A9ABAE;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #A9ABAE; --bs-btn-active-border-color: #A9ABAE;
}
.btn-nav {
  --bs-btn-color: #fff; --bs-btn-bg: #0E2349; --bs-btn-border-color: #0E2349;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #A9ABAE; --bs-btn-hover-border-color: #A9ABAE;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #A9ABAE; --bs-btn-active-border-color: #A9ABAE;
}

/* The theme's "main p { 1.25rem }" rule (meant for another layout) would enlarge every
   paragraph now that the page uses <main>. Restore the theme's normal paragraph size;
   class-based sizes (13px, 14px...) still win as before. */
@media (min-width: 1024px) { main p { font-size: 15px; } }

/* Hero carousel indicators: theme styled <li>, BS5 uses <button> */
.carousel-indicators [data-bs-target] {
  flex: 0 1 auto; width: 30px; height: 3px; margin: 0 3px;
  text-indent: -999px; background-color: #fff; opacity: 1;
}
.carousel-indicators .active { height: 3px; background-color: #009170; }

/* ---------- Font Awesome 6 (theme targeted the FA4 ".fa" class) ---------- */
.inner-header-social .fa-brands { font-size: 15px; color: #FFF; transition: .3s; }
.inner-header-social a:hover .fa-brands { color: #009170; }
.social-items .fa-brands { color: #0E2349; font-size: 18px; transition: .3s; }
.icon-fa:hover .fa-brands { color: #fff; }

/* ---------- Replaces Modernizr "no-touch" and plugin styles ---------- */
.cd-top:hover { background-color: #A9ABAE; opacity: 1; }

/* Portfolio filter (replaces isotope); theme's active-pill selector was invalid CSS */
.portfolio-item.is-hidden { display: none; }
.portfolio-filter li.active a { background: #009170; color: #FFF; }

/* Lightbox (replaces magnific-popup) */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 95vw; max-height: 95vh; overflow: visible; }
.lightbox::backdrop { background: rgba(11, 11, 11, .9); }
.lightbox img { display: block; max-width: 95vw; max-height: 90vh; margin: auto; }
.lightbox-close {
  position: absolute; top: -2.5rem; right: 0; width: 2.5rem; height: 2.5rem;
  border: 0; background: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}

/* Testimonials (replaces flickity). Sits on the theme's navy .testimonials-box */
.main-gallery {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; margin-bottom: 20px;
}
.main-gallery::-webkit-scrollbar { display: none; }
.gallery-cell { flex: 0 0 100%; scroll-snap-align: center; }
.gallery-nav { display: flex; justify-content: center; gap: .75rem; padding-bottom: 10px; }
.gallery-nav button {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255, 255, 255, .6); background: transparent; color: #fff; cursor: pointer;
  transition: background-color .3s, border-color .3s;
}
.gallery-nav button:hover { background: #009170; border-color: #009170; }

/* Clients: theme gives each .item a 30px transparent border and inline-block layout */
.clients_slider { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.clients_slider .item { flex: 0 1 auto; max-width: 100%; }

/* ---------- Quality of life ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}
img { max-width: 100%; height: auto; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 3000; padding: .6rem 1rem; background: #fff; color: #000; border-radius: .25rem; }
.skip-link:focus { top: 1rem; }
:focus-visible, .btn:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }

.top-location a, .location-box a { color: inherit; text-decoration: none; }
.top-location a:hover, .location-box a:hover { text-decoration: underline; }

/* ---------- Navbar (navbar.css + responsive.css were written for BS4) ---------- */

/* BS5.3 colours nav links from variables on .navbar, which beats the theme's .nav-link colour.
   Desktop: white links on the green bar. Mobile (<=850px): grey links on the white menu. */
.navbar {
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #14213D;
  --bs-navbar-active-color: #fff;
  --bs-navbar-toggler-border-color: transparent; /* BS5 adds a visible toggler border */
}
@media (max-width: 850px) {
  .navbar {
    --bs-navbar-color: #595959;
    --bs-navbar-hover-color: #B5E700;
    --bs-navbar-active-color: #595959;
  }
  .navbar-nav .nav-link { padding-left: 15px; }
  /* BS5 sets a margin on dropdowns that overrides the theme's -16px */
  .navbar-nav .dropdown-menu[data-bs-popper] { margin-top: -16px; }
}

/* Dropdown arrow used the FA4 "FontAwesome" font family; point it at FA6 */
.caret-drop:before { font-family: "Font Awesome 6 Free"; font-weight: 900; }

/* No blue flash when a dropdown item is pressed */
.dropdown-menu .dropdown-item:active { background-color: transparent; color: #14213D; }

/* responsive.css turns .testimonials-box white on small screens: keep the arrows visible */
@media (max-width: 576px) {
  .gallery-nav button { color: #0E2349; border-color: #0E2349; }
  .gallery-nav button:hover { color: #fff; }
}

/* ---------- Services / Products dropdown hover: navy background, white text ---------- */
.dropdown-menu > li > .dropdown-item {
  padding: 5px 20px;                       /* taller hit area so the highlight reads as a band */
  transition: background-color .3s, color .3s;
}
.dropdown-menu .divider { margin: 6px 0; } /* keeps the menu's overall height unchanged */

.dropdown-menu > li > .dropdown-item:hover,
.dropdown-menu > li > .dropdown-item:focus,
.dropdown-menu > li > .dropdown-item:active {
  background-color: #0E2349;
  color: #fff;
}