/*
Theme Name: Salvation Child
Theme URI: http://cmsmasters.net/salvation-child/
Author: cmsmasters
Author URI: http://cmsmasters.net/
Description: Salvation Child Theme
Template: salvation
Version: 1.0.0
License:
License URI:
Text Domain: salvation-child
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/

/* Customizations migrated from live parent theme */
.wrap {
   float: right; 
   margin: 20px;
}

/* --- Mobile Overrides (Portrait Tablets and Phones) --- */
@media only screen and (max-width: 768px) {
  /* Overlay the header on top of the LayerSlider on homepage */
  .home #header {
    position: absolute !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 100 !important;
  }
  
  /* Make all header wrappers transparent, removing white background block */
  .home #header,
  .home #header .header_mid,
  .home #header .header_mid_outer,
  .home #header .header_mid_inner,
  .home #header .header_bot,
  .home #header .header_bot_outer,
  .home #header .header_bot_inner,
  .home #header .logo_wrap {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
  }


  /* Center logo wrap on mobile and remove custom paddings */
  .home #header .logo_wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 101 !important;
    text-align: center !important;
    float: none !important;
    width: 100% !important;
  }
  .home #header .logo {
    display: inline-block !important;
    float: none !important;
    text-align: center !important;
  }

  /* Scale down logo text size on mobile to prevent overflow and overlap with content */
  .home #header .logo_wrap .title {
    font-size: 33.8px !important; /* 26px * 1.3 = 33.8px */
    line-height: 1.2em !important;
    margin-bottom: 5px !important;
  }
  .home #header .logo_wrap .title_text {
    display: block !important;
    font-size: 15.6px !important; /* 12px * 1.3 = 15.6px */
    line-height: 1.05em !important;
    margin-top: 2px !important;
  }

  /* Overlay the vertical gradient behind the header (50% transparent) restricted to the 150% height slider area */
  .home #header::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(93vw + 50px) !important; /* matches 150% slider height (62vw * 1.5 = 93vw) + 50px perfectly */
    background: url('img/gradient.png') repeat-x top left !important;
    opacity: 0.5 !important;
    z-index: 1 !important; /* above the slides, but under the header content */
    pointer-events: none !important;
  }

  /* Set logo title and tagline to cream color for readability over the image */
  .home #header .logo_wrap .title,
  .home #header .logo_wrap .title_text {
    color: #f4eedb !important;
  }

  /* Set hamburger menu lines to grey on interior pages, cream on homepage */
  #header .header_mid .resp_mid_nav_wrap .responsive_nav:before,
  #header .header_mid .resp_mid_nav_wrap .responsive_nav:after,
  #header .header_mid .resp_mid_nav_wrap .responsive_nav span {
    background-color: #a0a0a0 !important; /* Muted grey to keep the top-left menu balanced */
  }
  .home #header .header_mid .resp_mid_nav_wrap .responsive_nav:before,
  .home #header .header_mid .resp_mid_nav_wrap .responsive_nav:after,
  .home #header .header_mid .resp_mid_nav_wrap .responsive_nav span {
    background-color: #f4eedb !important; /* Cream on homepage */
  }

  /* Position hamburger menu at top-left of the screen on all pages */
  #header .header_mid .header_mid_inner .resp_mid_nav_wrap {
    position: absolute !important;
    left: -3px !important;
    top: 15px !important;
    margin: 0 !important;
    z-index: 101 !important;
  }

  /* Ensure the open dropdown menu has a solid background for readability */
  .home #header .header_mid .mid_nav_wrap nav {
    background-color: #ffffff !important;
  }

  /* Remove horizontal rule container below header */
  .home .headline {
    display: none !important;
  }

  /* Hide standard block separator horizontal rules on the homepage */
  .home .wp-block-separator {
    display: none !important;
  }

  /* Remove middle section padding to allow full-bleed layout */
  .home #middle {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Force the first row (containing the LayerSlider) to be full-bleed */
  .home #middle .cmsmasters_row:first-child .cmsmasters_row_inner,
  .home #middle .cmsmasters_row:first-child .cmsmasters_column,
  .home #middle .cmsmasters_row:first-child .cmsmasters_row_margin {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Make sure parent layout wrappers don't clip */
  .home #middle .middle_inner .content_wrap,
  .home .middle_content {
    overflow: visible !important;
  }

  /* Stretch the LayerSlider container full-bleed using negative margins */
  .home .ls-wp-container-wrapper,
  .home .layerslider {
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    padding: 0 !important;
  }

  /* Force 150% height (93vw) on LayerSlider container and inner wrappers on mobile */
  .home #middle .ls-container {
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
    overflow: hidden !important;
    position: relative !important;
    height: calc(93vw + 50px) !important;
  }
  .home #middle .ls-container .ls-inner,
  .home #middle .ls-container .ls-slide {
    overflow: hidden !important;
    height: calc(93vw + 50px) !important;
  }

  /* Allow inner slide wrappers to overflow so zoomed image can fill the full width of .ls-container */
  .home #middle .ls-container .ls-layers,
  .home #middle .ls-container .ls-wrapper {
    overflow: visible !important;
  }

  /* Reset and scale the images by 110% (2.1x zoom) to completely cover gaps with the taller height */
  .home #middle .ls-container img {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    transform: scale(2.1) !important;
  }

  /* Scale down the layout helper span to prevent horizontal document overflow */
  .cmsmasters_responsive_width {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Remove top padding of middle content to allow LayerSlider to reach the very top */
  .home .middle_content {
    padding-top: 0 !important;
  }

  /* Enable pre-line to render newlines as line breaks on mobile logo title */
  .home #header .logo_wrap .title {
    white-space: pre-line !important;
  }

  /* Scale down title font size on extra-narrow viewports to prevent clipping of Saint-Irénée-de-Lyon */
  @media only screen and (max-width: 360px) {
    .home #header .logo_wrap .title {
      font-size: 28.6px !important; /* 22px * 1.3 = 28.6px */
    }
  }

  /* Homepage button wrapping and adjusted spacing for mobile viewports */
  .home .wp-block-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px 11px !important;
  }
  .home .wp-block-buttons .wp-block-button:first-child {
    flex-basis: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .home .wp-block-buttons .wp-block-button:first-child .wp-block-button__link {
    width: auto !important;
    display: inline-block !important;
  }

  /* Symmetrical spacing around FSSP crest logo on mobile */
  .home .wp-block-buttons + .wp-block-spacer,
  .home .wp-block-buttons + .wp-block-spacer + .wp-block-separator,
  .home .wp-block-buttons + .wp-block-spacer + .wp-block-separator + .wp-block-spacer {
    display: none !important;
  }
  .home p:has(img[src*="crest300.png"]) {
    margin-top: 35px !important;
    margin-bottom: 20px !important;
    line-height: 0 !important;
    padding: 0 !important;
  }
  .home p:has(img[src*="crest300.png"]) img {
    display: block !important;
    margin: 0 auto !important;
    vertical-align: middle !important;
  }

  /* Prevent the responsive hamburger menu / active close icon from being clipped */
  #header .header_mid .resp_mid_nav_wrap,
  #header .header_mid .resp_mid_nav_wrap .responsive_nav {
    overflow: visible !important;
  }
  #header .header_mid .resp_mid_nav_wrap .responsive_nav.active {
    left: 3px !important;
  }
  #header .header_mid .resp_mid_nav_wrap .responsive_nav:not(.active):before,
  #header .header_mid .resp_mid_nav_wrap .responsive_nav:not(.active):after {
    width: 14px !important;
  }
}

/* Disable pre-line on desktop logo title to collapse newlines into spaces */
.logo_wrap .title {
  white-space: normal;
}

/* Add extra vertical space above logo title on desktop and tablet */
@media only screen and (min-width: 769px) {
  .logo_wrap .logo_text_wrap {
    position: relative !important;
    top: 10px !important;
  }
}

/* Prevent horizontal scroll wiggle on all screens */
html, body {
  overflow-x: hidden !important;
}

/* Dim and blur content behind the mobile menu when it is open */
@media only screen and (max-width: 1024px) {
  body:has(.responsive_nav.active) #header {
    z-index: 9999 !important;
  }
  
  body:has(.responsive_nav.active)::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 9998;
    animation: menuFadeIn 0.3s ease forwards;
  }

  /* Hide mobile-only menu items on desktop / sub-menu overrides */
  #header .navigation .hide-on-mobile {
    display: none !important;
  }
  #header .navigation #menu-item-27 .cmsmasters_resp_nav_toggle,
  #header .navigation #menu-item-27 ul.sub-menu {
    display: none !important;
  }
}

@media only screen and (min-width: 1025px) {
  #header .navigation .hide-on-desktop {
    display: none !important;
  }
}

@keyframes menuFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Customizations for non-homepage page site titles */
body:not(.home) #header .logo_wrap .title {
  font-size: 24px !important; /* Proportional to H3 (24px) */
  line-height: 1.25em !important;
}

body:not(.home) #header .logo_wrap .title_text {
  font-size: 14px !important; /* Scaled down slightly to balance with the smaller title */
  line-height: 1.2em !important;
  margin-top: 4px !important;
}

/* --- Newsletter Page Specific Styles (.page-id-229) --- */
.page-id-229 .middle_content {
  padding-top: 15px !important; /* Reduce top padding from 40px to 15px */
  padding-bottom: 15px !important; /* Reduce bottom padding to 15px to match top */
}

.page-id-229 .newsletter-iframe-wrapper {
  max-width: 600px;
  margin: 10px auto 10px; /* Reduce top/bottom margins to 10px for symmetrical spacing */
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 10px;
  overflow: hidden;
}

.page-id-229 iframe[src*="sg-form.com"] {
  display: block;
  margin: 0 auto;
  border: none;
  background: transparent;
  width: 100%;
  max-width: 100%;
}

@media only screen and (max-width: 680px) {
  /* Dynamic CSS scaling for fixed-width SendGrid form on mobile viewports */
  .page-id-229 .newsletter-iframe-wrapper {
    width: 560px !important;
    max-width: 560px !important;
    transform: scale(0.85);
    transform-origin: top center;
    margin-left: calc((100% - 560px) / 2) !important;
    margin-right: calc((100% - 560px) / 2) !important;
    margin-bottom: -115px !important;
    padding: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }
  
  .page-id-229 iframe[src*="sg-form.com"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media only screen and (max-width: 540px) {
  .page-id-229 .newsletter-iframe-wrapper {
    transform: scale(0.75);
    margin-bottom: -192px !important;
  }
}

@media only screen and (max-width: 480px) {
  .page-id-229 .newsletter-iframe-wrapper {
    transform: scale(0.65);
    margin-bottom: -270px !important;
  }
}

@media only screen and (max-width: 414px) {
  .page-id-229 .newsletter-iframe-wrapper {
    transform: scale(0.55);
    margin-bottom: -346px !important;
  }
}

@media only screen and (max-width: 375px) {
  .page-id-229 .newsletter-iframe-wrapper {
    transform: scale(0.48);
    margin-bottom: -400px !important;
  }
}

@media only screen and (max-width: 320px) {
  .page-id-229 .newsletter-iframe-wrapper {
    transform: scale(0.38);
    margin-bottom: -477px !important;
  }
}

/* Make mobile hamburger menu lines thinner (1px) on all pages */
#header .header_mid .resp_mid_nav_wrap .responsive_nav span {
  height: 1px !important;
  bottom: 0 !important;
}
#header .header_mid .resp_mid_nav_wrap .responsive_nav:before {
  height: 1px !important;
  bottom: 5px !important;
}
#header .header_mid .resp_mid_nav_wrap .responsive_nav:after {
  height: 1px !important;
  bottom: 10px !important;
}

/* Reset bottom to 0 when active to form the close cross 'X' correctly */
#header .header_mid .resp_mid_nav_wrap .responsive_nav.active:before,
#header .header_mid .resp_mid_nav_wrap .responsive_nav.active:after {
  bottom: 0 !important;
}

/* Fix tablet menu icon vertical spacing */
@media only screen and (max-width: 1024px) and (min-width: 769px) {
  .enable_header_centered #header .header_mid .logo_wrap {
    height: auto !important;
  }
  .enable_header_centered #header .header_mid .logo_wrap:after {
    content: none !important;
  }
  .enable_header_centered #header .header_mid .resp_mid_nav_wrap {
    margin: 6px 8px 20px !important;
  }
  .logo_wrap .logo_text_wrap {
    top: 15px !important;
  }
}

/* Reduce the gap under the homepage LayerSlider on desktop and tablet to 40px */
@media only screen and (min-width: 769px) {
  .home .middle_content .ls-container,
  .home .middle_content .ls-wp-container,
  .home .middle_content .layerslider {
    margin-bottom: 40px !important;
  }
}

/* Add 1px more space on each side of the homepage buttons (i.e. 2px total more between them) on desktop and tablet */
@media only screen and (min-width: 769px) {
  .home .wp-block-buttons {
    column-gap: calc(0.5em + 2px) !important;
  }
}


/* Prevent Contact from being highlighted as current-menu-ancestor when viewing the Directions page */
body.page-id-444 #header .navigation #menu-item-27 > a,
body.page-id-444 #header .navigation #menu-item-27 > a .nav_subtitle {
  color: rgb(28, 38, 71) !important;
}

/* Allow Contact to be highlighted on hover even on the Directions page */
body.page-id-444 #header .navigation #menu-item-27:hover > a,
body.page-id-444 #header .navigation #menu-item-27:hover > a .nav_subtitle {
  color: rgb(172, 144, 82) !important;
}