/**
 Theme Name:   SSSLA
 Theme URI:    https://www.laneandlane.com
 Description:  Child theme for the Sisters of Social Service. Uses the Kadence theme framework.
 Author:       Lane+Lane
 Author URI:   https://www.laneandlane.com
 Template:     kadence
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:   sssla
*/

/********** GLOBAL **********/

/* Site Side Padding */
/* Header & Footer */
.site-main-header-wrap .site-header-row-container-inner>.site-container, 
footer .site-footer-wrap {
	padding-left: clamp(2rem, 3.5vw, 5rem);
	padding-right: clamp(2rem, 3.5vw, 5rem);
}

/* ALT FONTS */

/* Default WordPress Paragraph Font Sizes */
:root {
	--global-font-size-small:   clamp(1.25rem,   1.2157rem + 0.1408vw, 1.3125rem);
	--global-font-size-medium:  clamp(1.6875rem, 1.6532rem + 0.1408vw, 1.75rem);
	--global-font-size-large:   clamp(1.875rem,  1.8063rem + 0.2817vw, 2.0rem);
	--global-font-size-larger:  clamp(2.125rem,  1.9190rem + 0.8451vw, 2.5rem);
	--global-font-size-xxlarge: clamp(2.25rem,   1.9754rem + 1.1268vw, 2.75rem);
}


/* Default List Blocks */
.single-content .wp-block-list {
	padding-left: 1em;
}
.single-content .wp-block-list li+li {
	margin-top: 0.5rem;
}
ol li {
	padding-left: 0.375rem;
}


/* Horizontal Rules (corrects issue of background + border being applied when there is a color added) */
.wp-block-separator.has-background:not(.is-style-dots) {
	height: 0px !important;
}


/* BUTTONS (make 100% width when container under 600px) */
/* This sets container as the overall content wrapper. Add or adjust if needed for other columns or containers */
.entry-content-wrap {
	container-type: inline-size;
}
@container (max-width: 600px) {
  button, .button, .wp-block-button, .wp-block-button__link, 
  input[type="button"], 
  input[type="reset"], 
  input[type="submit"], 
  .fl-button, 
  .elementor-button-wrapper .elementor-button, 
  .wc-block-components-checkout-place-order-button, 
  .wc-block-cart__submit {
    width: 100%;
  }
}



/********** HEADER **********/

/* Page Header Images (added 'page-header-image' DIV in functions.php to generate Page Headers) */
/* The standalone banner wrapper */

.page-header-image {
    width: 100%;
    /* MINIMUM: 220px to protect mobile height (but grows via Media Query below)
       IDEAL VALUE: 32.6vw (144:47 aspect ratio )
       MAXIMUM: 550px caps desktop growth */
    height: clamp(220px, 32.6vw, 550px); 
    background-size: cover;
    background-position: center center; 
    background-repeat: no-repeat;
    z-index: 1;
}


/* Linear gradient overlay with blend mode */
.page-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px; 
    background: linear-gradient(to bottom, #000000 0%, #ffffff 100%);
    mix-blend-mode: multiply;
    opacity: 0.8;
    z-index: 2;
    pointer-events: none;
}

/* Keeps the main layout content beginning naturally right below the photo */
.site .site-main {
    position: relative;
    z-index: 3;
}





/********** HOME **********/


/********** PAGES **********/


/********** MEDIA QUERIES **********/

@media screen and (max-width: 970px) {

}

/* Tablet & Mobile Layout Shifts */
@media screen and (max-width: 768px) {
    .page-header-image {
        /* Forces a slightly taller minimum profile for small device real estate */
        height: clamp(240px, 40vw, 320px);
        
        /* SHIFT TRICK: Moves the image alignment downward to reveal the hidden 
           top padding territory so the top of your photo doesn't clip behind 
           the header graphics. Adjust percentages to suit your image focal point. */
        background-position: center 25%; 
    }
    
    /* Optional: If you choose to keep your overlay at a fixed 140px, it works fine. 
       But if you want it to cover slightly more percentage of the smaller banner space:
    .page-header-overlay {
        height: 160px;
    }
     */
}


@media screen and (max-width: 484px) {


}