/*
 * Overrides for the simplified (no-jQuery) site. Everything else is the
 * original bridge theme CSS, untouched, so the look is identical.
 */

/* Safety net: ensure pages are visible even if a fade class lingers. */
.page_not_loaded {
  opacity: 1 !important;
}

/* --- Home hero slider ---------------------------------------------------
 * The original carousel relied on the theme JS to size itself, center a
 * pixel-wide inner track, and toggle slides. With our tiny vanilla slider we
 * stack the slides and cross-fade the active one. */
#qode-home-slider-5 {
  position: relative;
  overflow: hidden;
}
#qode-home-slider-5.full_screen {
  height: 100vh;
  min-height: 520px;
}
#qode-home-slider-5 .qode_slider_preloader {
  display: none !important;
}
#qode-home-slider-5 .carousel-inner {
  position: relative;
  width: 100% !important;
  left: 0 !important;
  height: 100%;
  overflow: hidden;
}
#qode-home-slider-5 .carousel-inner > .item {
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
#qode-home-slider-5 .carousel-inner > .item.active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}
/* The cover background-image on .image already shows the photo; hide the
 * inline <img> so it doesn't render a second, unscaled copy on top. */
#qode-home-slider-5 .carousel-inner > .item .image img {
  display: none !important;
}
#qode-home-slider-5 .carousel-inner .slider_content_outer {
  width: 100% !important;
}
/* The theme animated the slide caption in (opacity:0 -> 1) with JS we removed.
 * Show it statically and give it readable contrast over the photos. */
#qode-home-slider-5 .slider_content .text {
  opacity: 1 !important;
  animation: none !important;
}
#qode-home-slider-5 .slider_content .text h2,
#qode-home-slider-5 .slider_content .text h2 span,
#qode-home-slider-5 .slider_content .text p,
#qode-home-slider-5 .slider_content .text p span {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important;
}
#qode-home-slider-5 .carousel-control,
#qode-home-slider-5 .carousel-indicators {
  z-index: 5;
}
/* --- Header logo --------------------------------------------------------
 * The build collapses the theme's 5 JS-swapped logo variants into one element
 * under .sms-logo. Two things hid it without the theme JS: (1) the theme rule
 * ".q_logo a{visibility:hidden}" still matches (our element keeps the q_logo
 * class) and (2) the <img> is absolutely positioned/transformed for the JS
 * crossfade. So: force the link visible, render the white logo as a
 * background-image on it, and hide the <img>. Also neutralise the theme's
 * float/absolute logo wrapper so it sits centered above the nav. */
header.centered_logo .header_inner_left {
  text-align: center !important;
  display: block !important;
}
.logo_wrapper {
  position: static !important;
  float: none !important;
  height: auto !important;
  width: auto !important;
  display: block !important;
  padding: 22px 0 6px !important;
  text-align: center !important;
}
.sms-logo {
  position: static !important;
  top: auto !important;
  display: block !important;
  text-align: center !important;
}
/* Smooth-scroll the home hero down-carat (href="#start") to the first content
 * section, with an offset so the sticky header doesn't cover its top. */
html {
  scroll-behavior: smooth;
}
#start {
  scroll-margin-top: 80px;
}

.sms-logo a {
  visibility: visible !important;
  display: inline-block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  /* width/height must be !important: the responsive theme CSS sets
   * ".q_logo a{width:auto!important}" on mobile, which would otherwise
   * collapse our background-image logo to zero width. The source logo is
   * 400x93, so keep that 4.3:1 ratio to avoid distortion. */
  width: 360px !important;
  max-width: 80% !important;
  height: 84px !important;
  margin: 0 auto !important;
  background: url("/wp-content/uploads/2016/08/swami-logo-white.png") center
    center / contain no-repeat;
}
.sms-logo img {
  display: none !important;
}

/* --- Inner-page title banners ------------------------------------------
 * The theme JS normally sizes the banner and vertically centers the title.
 * With the JS removed the banner had no real height and the title was placed
 * by a baked-in inline padding-top, so titles collided with the nav. Override
 * the layout completely: a fixed-height banner, the image as a cover layer,
 * and the title flex-centered in the area below the absolute header. Applies
 * to every inner page (about-us, what-we-do, services, contact). */
.title_outer.with_image {
  position: relative !important;
  height: 420px !important;
  overflow: hidden !important;
  opacity: 1 !important;
}
.title_outer.with_image .title {
  position: static !important;
  height: 420px !important;
  width: 100% !important;
}
.title_outer.with_image .image.responsive {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.title_outer.with_image .image.responsive img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}
.title_outer.with_image .title_holder {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* The header (logo + nav) overlays the top ~200px of the banner. Pad the
   * flex box by roughly the header height so the title centers in the band
   * BELOW the header rather than tucking up right under the nav. */
  padding-top: 200px !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}
.title_outer.with_image .title_holder .container,
.title_outer.with_image .title_holder .container_inner {
  width: 100% !important;
  height: auto !important;
}
.title_outer.with_image .title_subtitle_holder {
  padding: 0 !important;
  width: 100% !important;
  text-align: center !important;
}
.title_outer.with_image h1 {
  margin: 0 !important;
}
.title_outer.with_image h1,
.title_outer.with_image h1 span {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
}
/* Shorter banner + tighter header clearance on phones/tablets. */
@media (max-width: 768px) {
  .title_outer.with_image,
  .title_outer.with_image .title {
    height: 320px !important;
  }
  .title_outer.with_image .title_holder {
    padding-top: 150px !important;
  }
  .sms-logo a {
    width: 280px !important;
    height: 65px !important;
  }
}

/* --- Mobile menu --------------------------------------------------------
 * The theme keeps .mobile_menu hidden until its JS opens it; our toggle adds
 * .simple-open instead. */
.mobile_menu.simple-open {
  display: block !important;
}
/* The theme also hides the inner list (nav.mobile_menu ul{display:none}) —
 * it used to be revealed by jQuery slideDown. Show it when open, including
 * any nested submenus. */
.mobile_menu.simple-open > ul {
  display: block !important;
}
.mobile_menu.simple-open ul li ul {
  display: block !important;
}