@charset "utf-8";
/* CSS Document */
/*
Theme Name:     MSCH
Description:    Customized theme for Mountains States Children's Home
Author:         Don Jenkins	
Template:       Divi
Changes: 		2026 redesign	
*/
/****** 2026 Redesign 
- same fonts - Bevan for headings, Bitter for content
- same logo
- same title and motto
Color scheme: 
  primary color - teal #049fc0
  secondary color - orange #f2663c   
  mouse-over secondary color - a little darker orange - #eb4210	
  content area background - ice white (has a tinge of teal) #f4f8fa - 
  dark section background - dark blue - 
  text - deep slate #1a252c

******/
/****** 
	1.0 FONTS and HEADINGS
	2.0 LOGO
    3.0 MENUS
    4.0 BUTTONS
	5.0 INNER PAGE HEADERS
	6.0 GRAVITY FORMS (except buttons)
	    WIDGETS
		
******/
   
/************************** FONTS AND HEADINGS *********************/
/* Bevan - Headings */
@font-face {
  font-family: 'Bevan';
  src: url('./fonts/Bevan-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Bitter - Body */
@font-face {
  font-family: 'Bitter';
  src: url('./fonts/Bitter-VariableFont_wght.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body, p, .et_pb_text, .et_pb_text_inner {
  font-family: 'Bitter' !important;
}

h1, h2, h3, h4, h5 {
  font-family: 'Bevan' !important;
  letter-spacing: 2px !important;
}
h1, h2, h3, h4, h5 {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}
/* Min drops from 1.8rem to 1.4rem */
h1 {
    font-size: clamp(1.4rem, 1rem + 2vw, 3rem) !important; 
}
/* Min drops from 1.5rem to 1.2rem */
h2 {
    font-size: clamp(1.2rem, 0.9rem + 1.8vw, 2.1rem) !important; 
    /*font-size: clamp(1.2rem, 1rem + 2vw, 2.3rem) !important; */
}
/* Slowed down scaling for mid-tier text */
h3 {
    /*font-size: clamp(1.1rem, 0.9rem + 1.5vw, 1.8rem) !important; */
    font-size: clamp(1.0rem, 0.8rem + 1.4vw, 1.7rem) !important; 

}
h4 {
    /*font-size: clamp(1rem, 0.9rem + 1vw, 1.4rem) !important;*/
    font-size: clamp(0.9rem, 0.7rem + 1vw, 1.4rem) !important;

}
h5 {
    /*font-size: clamp(0.9rem, 0.8rem + 1vw, 1.1rem) !important;*/
    font-size: clamp(0.8rem, 0.6rem + 1vw, 1.1rem) !important;

}

.et_pb_module_header, h3 {
	padding-top: 2rem !important;
}
.et_pb_text_inner h4 {
 	padding-top: 1rem !important;
}
/*************************** LISTS *************************/
/* Level 1: Outer list (Disc / Filled Circle) */
.et_pb_module .entry-content ul,
.et_pb_post_content ul {
  list-style-type: disc !important;
}

/* Level 2: Nested list (Circle / Hollow Circle) */
.et_pb_module .entry-content ul ul,
.et_pb_post_content ul ul {
  list-style-type: circle !important;
}

/* Level 3: Deeply nested list (Square) */
.et_pb_module .entry-content ul ul ul,
.et_pb_post_content ul ul ul {
  list-style-type: square !important;
}

/***************************** LOGO ***************************/
/* logo */
.et_pb_image_0_tb_header .et_pb_image_wrap {
	border-radius: 15px !important;
	width: fit-content;
  	display: inline-block; 
}
.et_pb_image_0_tb_header .et_pb_image_wrap img {
	width: clamp(150px, 18vw, 350px);  /* was 120 15 240 */
	height: auto;
	display: block;	
}
/***************************** HAMBURGER BUTTON MECHANICS **************************/

/* 1. Force the hamburger to evaluate on the highest possible structural layer */
.global-fixed-hamburger {
    position: fixed !important;
    top: 3rem !important;
    right: 2rem !important;
    padding: 8px !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: 2147483647 !important; /* Absolute highest 32-bit integer layer */
    cursor: pointer !important;
    pointer-events: auto !important;
    font-size: clamp(1.1rem, 0.9rem + 1.5vw, 1.8rem) !important; 
}
.global-fixed-hamburger:hover {
    padding: 6px !important;
}

/* 2. Elevate the specific section containing your toggle above everything but the canvas */
.et_pb_section:has(.global-fixed-hamburger) {
    z-index: 2147483646 !important; /* Right below the button layer */
    position: relative !important;
}
/* 3. Active State layout changes */
html body .global-fixed-hamburger.is-menu-active {
    transform: rotate(90deg) !important;
    transition: transform 0.25s ease-in-out !important;
    background-color: #f4f8fa !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2147483647 !important;
}

/* Hide native child elements inside active burger */
html body .global-fixed-hamburger.is-menu-active * {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Inject Elegant Themes 'X' icon */
html body .global-fixed-hamburger.is-menu-active::before {
    content: "\4d" !important;
    font-family: "ETmodules" !important;
    display: inline-block !important;
    line-height: 1 !important;
    font-size: clamp(1.1rem, 0.9rem + 1.5vw, 1.8rem) !important; 
    /* font-size: 2rem !important;*/ /* was 24px */
    color: #1a8997 !important;
}

/***************************** MENU CANVAS CONTAINER **************************/

/* 4. Force canvas hidden by default */
.msch-menu-canvas {
    display: none !important;
    z-index: 99990 !important; /* Keeps it under the button section */
}

/* 5. Smoothly reveal the canvas when toggled active */
.msch-menu-canvas.is-menu-active,
body.mobile-menu-open .msch-menu-canvas {
    display: block !important;
    z-index: 99990 !important;
}
.msch-menu-canvas p {
	padding-bottom: 0 !important;
}

/*== Misc menu ==*/
/* Vertically align the mega menu icons with the text */
.et_pb_link_inner {
  align-items: start !important;
}
/* Decrease padding-top in menu canvas djj 8/23/26 */
/* The Home page header template injects the menu from section 1, the other header 
   templates inject it from section 2 */
.et_pb_section_1_tb_header.et_pb_section,
.et_pb_section_2_tb_header.et_pb_section {
	padding-top: 0 !important;
	padding-bottom: 25px !important;
}
/* Add padding for last menu item */ /* I think this can be removed, previous handles it */
@media only screen and (max-width: 480px) {
  #mobile_menu {
    padding-bottom: 25px !important;
  }
}

/********************************* BUTTONS ******************/
/* button background */ 
a.big-button.bigblue,  /* override events calendar styling */
.ecmd-list-post.style2 .ecmd-event-readmore,
body #page-container .et_pb_section .et_pb_button_0_tb_body,
body #page-container .et_pb_section .et_pb_button_1_tb_body,
body #page-container .et_pb_section .et_pb_button_2_tb_body,
body #page-container .et_pb_section .et_pb_button_3_tb_body,
body #page-container .et_pb_section .et_pb_button_4_tb_body,
.gform-theme-button,
.gform_button,
.et_pb_button,
.et_pb_button_0_tb_body,
.msch_menu_cta,  
.wp-block-button__link { 
    position: relative !important;
	font-family: Bitter !important; 
    
    /* Make text scale smoothly between 14px and 18px */
    font-size: clamp(0.875rem, 0.45vw + 0.78rem, 1.125rem) !important; 
	line-height: 20px !important;
    /* Make button only as wide as the text + padding and centered djj 08/30/26 */
	display: inline-block !important;
	margin: 0 auto !important;

    /* Make padding scale relative to the shifting font size */
    padding: 0.6em 1.6em !important; 
    
    /* Ensure the button never overflows its container */
    max-width: 100% !important;
    box-sizing: border-box !important;
	background: none !important;
    background-color: #f4f8fa !important; 
    border-color: #f2663c !important; 
	border-style: solid !important; 
    border-width: 2px !important; 
    border-radius: 15px !important; 
    color: #049fc0 !important; 	
    font-weight: 700 !important; 
    text-transform: uppercase !important; 
    letter-spacing: 0.13em !important; /* was 0.16 */
}
.gform_wrapper .gform_page_footer input.gform_previous_button,
.gform_wrapper .gform_page_footer input.gform_next_button,
.gform_wrapper .gform_page_footer button.gform_previous_button,
.gform_wrapper .gform_page_footer button.gform_next_button {
    box-sizing: border-box !important;
    height: 46px !important; /* Adjust to match your desired height */
    line-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
a.big-button.bigblue:hover,  /* override events calendar styling */
.ecmd-list-post.style2 .ecmd-event-readmore:hover,
body #page-container .et_pb_section .et_pb_button_0_tb_body:hover,
body #page-container .et_pb_section .et_pb_button_1_tb_body:hover,
body #page-container .et_pb_section .et_pb_button_2_tb_body:hover,
body #page-container .et_pb_section .et_pb_button_3_tb_body:hover,
body #page-container .et_pb_section .et_pb_button_4_tb_body:hover,
.gform-theme-button:hover,
.gform_button:hover,
.et_pb_button:hover,
.et_pb_button_0_tb_body:hover,
.msch_menu_cta:hover,  
.wp-block-button__link:hover { 
	padding-right: 1em !important;
    padding-left: 1em !important;
    color: #049fc0 !important; 	
}

.et_pb_button::after {
	content: "" !important;
}
/* Forces the button container to stay on one line */
.et_pb_button {
	white-space: nowrap !important;
}
/* Center the widget title (if you use it)  2026 redesign */
.widgettitle {
	text-align: center !important;
	padding-top: 1rem !important;
}
/* center image in Contact Thrift Store widget area */
.image {
	margin: auto !important;
}
.msch-hearts {
	color: #049fc0;
	text-align: center;
	font-size: 2rem;
}
/* djj 240812 */
.msch_menu_cta img {
	width: 100% !important;
}

/****************************** GRAVITY FORMS *************************/                     
/* Move gform error panel down into content area */
.gform-theme--framework .gform_validation_errors{
	margin-top: 1em !important;
}
.gform_next_button {
	margin-bottom: 1em !important;
}
/* Style the field labels for clear readability */
.gform_wrapper .gfield_label {
    color: #2C3E50 !important;
    font-weight: 600 !important;
}
/************************** WIDGETS **********************************/              
/* Style the widget area - 2026 redesign */ /*7-2-2026 10:00pm*/
.msch-list-container,
.et_pb_sidebar_0_tb_body.et_pb_widget_area,
.et_pb_blog {
	text-align: center !important;
	padding: 1em 0.5em !important;
	background-color: #ffffff !important;
	border-radius: 15px;
	border-width: 2px;
	border-color: var(--gcid-secondary-color);
	border-style: solid;
}
.et_pb_promo {
  padding: 2.5em 2em 2.5em 2em !important;
}

.wp-block-column p {
	padding-bottom: 0 !important;
}
/* Style widgets for those pages that have them 2026 redesign */
.msch-widget {
	margin: 1em auto;
	padding: 0 1em;
}
.wp-block-image img {
  padding: 0 1em !important;
}
.msch50 {
	width: 50% !important;
}
@media screen and (orientation: landscape) and (max-width: 979px) {
  .msch50 {
	  width: 35% !important;
  }
}
.msch-widget-text {
	color: #000; /*#fff;*/
}
.msch-center-text {
	text-align: center;
}
.msch-address {
	line-height: 1.2rem;
	padding: 5px;
}

/**************************** HOME PAGE ******************************/
/* Make top of menu show through hamburger row  djj 8/23/26 */
.et_pb_section_0_tb_header {
	background-color: transparent !important;
}

/* Home page logo needs space below */
.wp-image-7635 {
	padding-bottom: 2rem !important;
}

/* motto font */
.et_pb_text_0_tb_body .et_pb_text_inner {
	font-family: Bitter !important;
}
/* Program Overview video */
.et_pb_row_4_tb_body {
	width: 75% !important;
}

.home .et_pb_heading_2_tb_body {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom: solid;
	margin-bottom: 0 !important;
}
.et_pb_video_0_tb_body, .et_pb_video_0_tb_body iframe {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
/* I want Request a Tour button at the bottom of the image so it doesn't block the school at
   smaller screen sizes */ /* didn't work*/
.et_pb_button_3_tb_body_wrapper {
	margin-bottom: 0 !important;
}
/* Make Event Details buttons line up with excerpt */
.et_pb_button_module_wrapper {
	padding-left: 1rem !important;
}

/* Upcoming Events slider arrows */
.et_mobile_device .et-pb-arrow-prev {
  left: 3px !important;
}
.et_mobile_device .et-pb-arrow-next {
  right: 3px !important;
}
/************************** BOARD and STAFF **************************/              
.page-id-4697 .wp-block-paragraph {
	font-weight: bold !important;
}
.page-id-4697 .wp-block-columns {
	text-align: center !important;
}
.page-id-4697 .et-l--body ul {
	text-align: center !important;
	list-style-type: none !important;
	/*padding: 0 0 2em 2em !important;*/
}
.msch-bottom-pad {
	padding-bottom: 2rem;
}
/****************************** NEWSLETTER PAGE **************************/
/* Format the UL container into a 3x3 grid */
ul.career-list,
ul.newsletter-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Exactly 3 columns */
  gap: 15px;                                         /* Spacing between cells */
  list-style: none !important;                       /* Remove default bullet points */
  padding: 0 !important;                             /* Reset padding */
  margin: 0 auto;
  width: 100%;
}

/* Format individual LI items as table cells */
ul.career-list li,
ul.newsletter-list li {
  border: 1px solid #ddd;                            /* Simple cell border */
  padding: 20px;
  text-align: center;
  background-color: #ffffff;                         /* Cell background color */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

/* Optional hover effect for interactivity */
ul.career-list li:hover,
ul.newsletter-list li:hover {
  background-color: #f9f9f9;
}

/* Ensure links inside fill the cell area */
ul.career-list li a,
ul.newsletter-list li a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  width: 100%;
}

/* Responsive adjustment: Stack vertically on mobile screens */
@media (max-width: 768px) {
  ul.career-list,
  ul.newsletter-list {
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* 1 column on mobile */
  }
}
/****************************** EVENTS LIST ***************************/
/* djj 9/4/2026 */
.ecmd-list-post.style1 {
	padding: 2rem 0;
	background-color: #f4f8fa;
}
.ecmd-list-post.style2:hover {
  background-color: #f4f8fa !important;
}

/****************************** CONTENT AREA **************************/
/* Add some padding after the end of an accordion block 2026 redesign */
.wp-block-paragraph {
	padding-bottom: 1.5em !important;
}
/* Add some top and bottom padding to post content 2026 redesign */
.et_pb_post_content {
	padding: 2rem !important;
	background-color: #f4f8fa;
	border: solid #049fc0 2px;
	border-radius: 25px;
}
/* Make the dot separator bold and primary color  2026 redesign */
.wp-block-separator.is-style-dots {
	font-weight: 900;
	color: #f2663c;
}
/* 7-3-2026 reduce padding-bottom in blog post list */
.et-db #et-boc .et-l .et_pb_post {
	margin-bottom: 2em !important;
}
.et_pb_blog_posts {
	padding-top: 2em !important;
}
/* Need space between paragraphs and buttons */
/* Indent paragraph text djj 8/30/26 */
p {
	padding-bottom: 1rem !important;
	padding-left: 1rem !important;
}
/* Need space after MSCH Houses on Facilities page */
.wp-block-gallery {
  padding-bottom: inherit;
}
/* Force parent rows and sections to drop all structural isolation tags when fullscreen is active */
body:has(.df-fullscreen) #page-container,
body:has(.df-fullscreen) .et-l,
body:has(.df-fullscreen) .et_pb_section,
body:has(.df-fullscreen) .et_pb_row,
body:has(.df-fullscreen) .et_pb_column {
    isolation: auto !important;
    container-type: normal !important;
    contain: none !important;
    perspective: none !important;
    transform: none !important;
    z-index: auto !important;
}

/* Fix dflip incompatibility - widgets and footer were overlaying fullscreen flipbook */
/* Forcibly wipe the sidebar widgets and global footer off the visual stack when fullscreen is open */
body:has(.df-fullscreen) .et_pb_column_1of2:nth-child(2), /* Targets your column 2 */
body:has(.df-fullscreen) #sidebar, 
body:has(.df-fullscreen) .et_pb_widget_area,
body:has(.df-fullscreen) footer, 
body:has(.df-fullscreen) #main-footer,
body:has(.df-fullscreen) .et-l--footer {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/****************************** INNER PAGE HEADERS ***************************/
/* --- 1. GLOBAL MOBILE & BASE STYLES --- */
/* Reset padding transitions globally so content doesn't snap */
#main-content, article { 
    transition: padding-top 0.4s ease-in-out !important; 
}
/* --- 2. DESKTOP ONLY STYLES (981px and above) --- */
@media (min-width: 981px) {
  /* Pins your header container straight to the top of the browser window */
  .master-sticky-header {
	  position: fixed !important;
	  top: 0 !important;
	  left: 0 !important;
	  width: 100% !important;
	  z-index: 99998 !important;       /* second only to mega menu and hamburger */ 
	  padding-top: 25px !important;    /* Default spacing at the top */
	  padding-bottom: 25px !important; /* Default spacing at the bottom */
	  transition: all 0.4s ease-in-out !important;
  }
  
  /* Ensures the inner row stays centered and responsive */
  .master-header-row {
	  width: 90% !important;
	  max-width: 1920px !important; /* Match this to your main website width */
	  margin: 0 auto !important;
	  padding-top: 10px !important;
	  padding-bottom: 10px !important;
	  transition: all 0.4s ease-in-out !important;
  }
  
  /* Ensures the inner logo and menu transition smoothly */
  .master-header-row img,
  .master-header-row .et_pb_menu__icon {
	  transition: transform 0.4s ease-in-out, max-height 0.4s ease-in-out !important;
  }
  
  
  /* --- 2. ACTIVATED SHRINK STATE (Triggers on Scroll) ---  2026 redesign */
  
  /* Instantly squashes the outer section spacing */
  .master-sticky-header.header-shrink {
	  padding-top: 8px !important;
	  padding-bottom: 0px !important; /* was 8 */
  }
  
  /* Instantly squashes the inner row padding simultaneously */
  .master-sticky-header.header-shrink .master-header-row {
	  padding-top: 0px !important;
	  padding-bottom: 0px !important;
  }
  
  /* Forces the logo image and the hamburger lines to shrink to 75% scale */
  .master-sticky-header.header-shrink .master-header-row img,
  .master-sticky-header.header-shrink .master-header-row .et_pb_menu__icon {
	  transform: scale(0.60) !important; /* was .75 */
	  transform-origin: center left !important; /* Keeps alignment perfect on the left side */
  }
  
  /* 1. Targets the wrapper (the border box) and forces it to shrink to 75% */
  .master-sticky-header.header-shrink .master-header-row .et_pb_image_wrap {
	  transform: scale(0.60) !important; /* was .75 */
	  transform-origin: center left !important; /* Keeps alignment perfect on the left side */
	  transition: transform 0.4s ease-in-out !important;
  }
  
  /* 2. Resets the inner image so it doesn't double-shrink inside the wrapper */
  .master-sticky-header.header-shrink .master-header-row img {
	  transform: scale(1) !important; 
  }
  /* Smoothly glides the page content up and down as the header scales */
  #main-content, article {
	  transition: padding-top 0.4s ease-in-out !important;
  }
  
  
  /* Remove default main area offsets */
  #page-container {
	  padding-top: 0 !important;
	  margin-top: 0 !important;
  }
  
  #et-main-area {
	  margin-top: 0 !important;
  }

  #main-content {
	  margin-top: 0 !important;
	  padding-top: 0 !important;
  }

  /* Increase padding-left in menu canvas djj 8/23/26 */
  .et_pb_section_1_tb_header.et_pb_section,
  .et_pb_section_2_tb_header.et_pb_section,
  .et_pb_section_3_tb_header.et_pb_section {
	  padding-left: 150px !important;
  }

}
@media screen and (max-width: 1150px) {
  /* djj 8/23/26 */
  .wp-block-image { 
      padding-bottom: 2rem;
  }
}
/* --- 3. MOBILE & TABLET STYLES (980px and below) --- */
@media screen and (max-width: 980px) {
  .global-fixed-hamburger {
	  position: fixed !important;
	  top: 1.5rem !important;
	  right: 1.5rem !important;
  }
  /* FORCE HEADER TO UN-STICK AND SCROLL AWAY */
  .master-sticky-header, 
  .et_pb_section.master-sticky-header {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      width: 100% !important;
      padding-top: 15px !important;  /* Adjusted fallback spacing for mobile view */
      padding-bottom: 15px !important;
  }

  .et_pb_menu .et_pb_menu__menu {
      display: flex;
      justify-content: space-between;
  }
}

@media (max-width: 980px) {
  .et_pb_column .et_pb_widget {
      width: 100% !important;
      margin: 0 auto !important;
  }
}

@media (max-width: 980px) {
  /* Push the first section of every inner page down to clear the sticky header 
  djj 08/21/26 */
  #main-content .et_pb_section:first-child {
	  /*padding-top: 110px !important;*/ /* was 250  djj 8/22/26 */
	  padding-top: 50 !important; /* header scrolls away  djj 8/23/26 */

  }
}

@media (min-width: 981px) {
  /* Push the first section of every inner page down to clear the sticky header 
  djj 08/21/26 */
  #main-content .et_pb_section:first-child {
	  padding-top: 220px !important; /* was 250  djj 8/22/26 */
  }
}

@media (min-width: 1900px) {
  /* Push the first section of every inner page down to clear the sticky header
  djj 08/21/26 */
  #main-content .et_pb_section:first-child {
	  padding-top: 250px !important; /* djj 8/22/26 */
  }
  /* Don't push the Home page content - there is no sticky header */
  body.home #main-content .et_pb_section:first-child {
	  padding-top: 0 !important; /* djj 8/23/26 */
  }
}
/* Push footer buttons down, keep from clipping event slider button */
@media (min-width: 981px) {
  .et_pb_section {
    padding: 4% 0 3.5% 0;
  }
}