/* 
Theme Name: WHCF
Theme URI: https://whcf2.indivo.net/wp-content/themes/whcf/
Description: WHCF is a child theme of Hello Elementor
Author: INDiVO
Author URI: https://indivo.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: whcf
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/* ******************************************************** */
/* ACCESSBILITY */
/* ******************************************************** */
a,
.elementor a {
  color: #B40D0D;  
  text-decoration: underline;
}

footer nav ul li a {
  color: #B40D0D !important;  
  text-decoration: underline !important;
}

a:hover,
a:focus {
  color: #B40D0D;  
}

footer nav ul li a:hover,
footer nav ul li a:focus {
  color: #B40D0D !important;  
}

/* ******************************************************** */
/* GLOBAL STYLINGS */
/* ******************************************************** */


html {
  height: 100%;
  font-family: "articulat-cf", sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Safari / iOS Adobe Fonts Fix — Scoped to dynamic text only */
.elementor-post__excerpt,
.elementor-widget-text-editor,
.elementor-widget-container p,
.elementor-widget-container span,
.elementor-widget-container div:not(:has(h1, h2, h3, h4, h5, h6)) {
  font-family: articulat-cf, sans-serif !important;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Force iOS to repaint excerpts once fonts are loaded */
.elementor-post__excerpt {
  font-family: articulat-cf, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  backface-visibility: hidden;
  transform: translateZ(0);
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "articulat-cf", sans-serif;
}

h1 { font-family: "articulat-cf", Sans-serif;
  font-size: 4rem;
  line-height: 4.1rem;
  font-weight: 100;
  color: #595959;
}

.whcf-h1-white h1 {
  color: #ffffff;
}

h2 { font-family: "articulat-cf", Sans-serif;
  font-size: 2rem;
  line-height: 2.1rem;
  font-weight: 500;
  color: #595959; }

.whcf-h2-white h2 {
  color: #ffffff;
}

h3 { font-family: "articulat-cf", Sans-serif;
  font-size: 1.2rem;
  line-height: 1.7rem;
  font-weight: 800;
  color: #595959; }

p { 
font-family: "articulat-cf", Sans-serif;
  font-size: 1.3rem;
  line-height: 1.8rem;
  letter-spacing:0.08rem;
  font-weight: 500;
  color: #595959;
}

.whcf-p-white p { 
  color: #ffffff;
}

.whcf-p-white a { 
  color: #ffffff;
  text-decoration:underline;
}

.whcf-p-white a:hover { 
  color: #ffffff;
  text-decoration:none;
}

.whcf-callout { 
  font-family: "articulat-cf", Sans-serif;
  font-size: 3rem;
  line-height: 3.05rem;
  font-weight: 100;
  color: #595959;
}


.whcf-callout-small { 
  font-family: "articulat-cf", Sans-serif;
  font-size: 2rem;
  line-height: 2.2rem;
  font-weight: 100;
  color: #595959;
}

.whcf-breadcrumb a {
  font-family: "articulat-cf", Sans-serif;
  font-size: 0.9rem;
  line-height: 1.1rem;
  font-weight: 500;
  color: #b21d1d;
}

.whcf-breadcrumb a:hover {
  text-decoration:underline;
  color:#333;
}

li::marker {
  color: red;
}

li {
  font-family: "articulat-cf", Sans-serif;
  font-size: 1.3rem;
  line-height: 2rem;
  font-weight: 500;
  color: #595959;
}

.whcf-p-white li {
	color:#ffffff;
}

@media (max-width: 767px) {
.whcf-callout { 
  font-size: 2rem;
  line-height: 2.05rem;
}
}

/* ******************************************************** */
/* MENU STYLINGS */
/* ******************************************************** */

.whcf-menu-white a {
  font-family: "articulat-cf", Sans-serif;
  font-size: 0.8rem;
  /* line-height: 1.06rem; */
  letter-spacing:0.05rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration:none;
}

.whcf-menu-white a:hover {
  text-decoration:underline;
}

.whcf-menu-dark a {
  font-family: "articulat-cf", Sans-serif;
  font-size: 0.8rem;
  line-height: 1.06rem;
  letter-spacing:0.05rem;
  font-weight: 600;
  color: #000000;
  text-decoration:none;
}

.whcf-menu-dark a:hover {
  text-decoration:underline;
}

/* ******************************************************** */
/* HEADER */
/* ******************************************************** */
header {
  position: relative;
}

.whcf-global-header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
  z-index: -1;
}

.whcf-header-scroll {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 9999;
}

/*.whcf-global-header-sticky .whcf-global-header-sticky-mobile-wrapper {
  align-items: flex-end;
}*/

.whcf-global-header-sticky .whcf-global-header-sticky-menu-mobile-wrapper svg {
  fill: #FFFFFF;
  color: #FFFFFF;
  background-color: transparent;
}

@media (max-width: 1024px) {
  .whcf-global-header-sticky .whcf-global-header-sticky-logo-mobile-wrapper,
  .whcf-global-header-sticky .whcf-global-header-sticky-menu-mobile-wrapper {
    display: flex;
    width: 50%;
    max-width: 50%;
    padding: 0px 20px;
  }

  .whcf-global-header-sticky .whcf-global-header-sticky-logo-mobile-wrapper {
    align-items: flex-start;
  }

  .whcf-global-header-sticky .whcf-global-header-sticky-menu-mobile-wrapper {
    align-items: flex-end;
  }

}

@media (max-width: 767px) {
  .whcf-global-header-sticky .whcf-global-header-sticky-logo-mobile-wrapper,
  .whcf-global-header-sticky .whcf-global-header-sticky-menu-mobile-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    padding: 0px 20px;
    max-height: none !important;
  }

  .whcf-global-header-sticky .whcf-global-header-sticky-menu-mobile-wrapper .elementor-nav-menu--dropdown {
    min-height: 200vh;
    /* max-height: 100vh; */
    overflow: auto;
    max-height: none !important;
    height: 100vh;
    padding: 0px 0px 20px;
  }

  .whcf-global-header-sticky .whcf-global-header-sticky-menu-mobile-wrapper .sub-menu.elementor-nav-menu--dropdown {
    min-height: 0px;
    height: auto;
    max-height: none !important;
  }
}

/* ******************************************************** */
/* VIMEO STYLINGS */
/* ******************************************************** */

.elementor-lightbox .elementor-video-container .elementor-video-portrait iframe, .elementor-lightbox .elementor-video-container .elementor-video-portrait video {
	width: 100%;
}

/* VIDEO CLOSE BUTTON */
.elementor-lightbox .dialog-close-button {
    display: block !important; /* Ensures visibility */
    position: absolute;
    top: 15px; /* Adjust the position */
    right: 15px;
    z-index: 99999; /* Ensures it's on top */
    font-size: 24px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff; /* White color */
    background-color: rgba(0, 0, 0, 0.6); /* Optional background */
    border-radius: 50%; /* Makes it circular */
    cursor: pointer;
}


/* ******************************************************** */
/* BUTTON STYLINGS */
/* ******************************************************** */

.whcf-standard-button a  {
  display: inline-block;
  line-height: 1;
  font-size: 15px;
  padding: 15px 60px;
  border-radius: 3px;
  text-align: center;
  transition: all .3s;
  font-family: "articulat-cf", Sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  fill: #FFFFFF;
  color: #FFFFFF;
  background-color: #000000;
}

.whcf-standard-button a:hover {
  background-color: #EB0E0E;
}

/* ******************************************************** */
/* CUSTOM LOOP GRID ORGANIZATIONS */
/* ******************************************************** */

.whcf-loop-grid-item-image-wrapper {aspect-ratio: 1.0}

.whcf-national-convener-loop-wrapper .e-loop-item.loop-item-odd {
    background-color: #FFFFFF;
}

.whcf-national-convener-loop-wrapper .e-loop-item.loop-item-even {
    background-color: #F5F2F2;
}

/* ******************************************************** */
/* ANCHOR TAG OFFSETS */
/* ******************************************************** */

#private {
    scroll-margin-top: 10px;
}

/* ******************************************************** */
/* Panning Zooming Graphic */
/* ******************************************************** */

/* Container setup */
.pan-container {
  overflow: hidden;
  width: 100%;
  height: 48.7vh; /* Adjust based on graphic's aspect ratio */
  position: relative;
  cursor: grab;
}

/* Graphic setup */
.pan-graphic {
  width: 150vw; /* Allows horizontal panning */
  height: auto;
  background-image: url('/wp-content/uploads/2024/10/DESKTOP_great-escape-swipe.jpg'); /* Replace with your image path */
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(0, 0) scale(1); /* Initial zoom level */
  transition: transform 0.1s ease-out;
}

/* ******************************************************** */
/* Horizontal Scroll Graphic */
/* ******************************************************** */
.scroll-image-container {
  position: relative;
  overflow: hidden; /* Prevent horizontal scrollbars */
  height: 100vh; /* Full viewport height */
  width: 100vw; /* Full viewport width */
  display: flex;
  align-items: center; /* Vertically center image */
  justify-content: flex-start; /* Start image at the left side */
}

.scroll-image {
  position: absolute;
  left: 0;
  transform: translateX(-66%); /* Show only 1/3 of the image initially */
  height: auto; /* Maintain aspect ratio */
  max-height: 100%; /* Ensure the image fits within viewport height */
  width: auto; /* Keep natural width */
  max-width: none;
  transition: transform 0.1s ease-out; /* Smooth scroll */
}

/* ******************************************************** */
/* Zoom Map */
/* ******************************************************** */
.map-container {
  position: relative;
}

.main-map {
  width: 100%; /* Adjust width as needed */
  overflow: hidden;
  position: relative;
}

.main-map img {
  width: 200%; /* For panning and larger view */
  transform: translate(0, 0);
  cursor: grab;
}

.mini-map {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 100px; /* Adjust mini-map size */
  height: 100px;
  overflow: hidden;
  border: 2px solid #333;
}

.mini-map img {
  width: 100%;
}

.mini-frame {
  position: absolute;
  border: 2px solid red;
  box-sizing: border-box;
  pointer-events: none; /* Prevent interference */
}

/* THE MAN > LEGACY */
.whcf-h3-caption span {
  font-family: "articulat-cf", Sans-serif;
  font-size: 1.2rem;
  line-height: 1.7rem;
  font-weight: 800;
  color: #595959;
}

/* THE COMPANY */
.whcf-company-medical h3 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.9rem;
}

/* THE WALLACE H. COULTER FOUNDATION */
.whcf-wallacehcoulterfoundation-subheadings h2 {
  font-family: "articulat-cf", Sans-serif;
  font-size: 1.2rem;
  line-height: 1.7rem;
  font-weight: 800;
  color: #595959;
}

/* ******************************************************** */
/* TABLET RESPONSIVE */
/* ******************************************************** */

@media screen and (min-width: 768px) and (max-width: 1024px) {

/* Wallace Painting Home Background, About Foundation Background */
	.elementor-14 .elementor-element.elementor-element-35ef908:not(.elementor-motion-effects-element-type-background), .elementor-1250 .elementor-element.elementor-element-35ef908:not(.elementor-motion-effects-element-type-background) {
    background-image: url(https://whcf2.indivo.net/wp-content/uploads/2025/10/IMG-HOME_coulter-portrait-tablet1.jpg) !important;
}
	
/* The Man Title Text */
	    body.page-id-641 img.wp-image-51 {
  width: 90% !important;
  max-width: 90% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}
	    .elementor-641 .elementor-element.elementor-element-f980489 .elementor-heading-title {
        margin-top: 100px!important;
    }
	
	/* Special Projects rollover text */
	.elementor-1783 .elementor-element.elementor-element-1e0f7d3 .uc_post_title a > * {
    font-size: 16px !important;
    line-height: 21px !important;
    }

}

/* ******************************************************** */
/* MOBILE RESPONSIVE */
/* ******************************************************** */
@media (max-width: 767px) {

  /* THE COMPANY */
  .whcf-company-medical-img-wrapper { 
    aspect-ratio: 1.7;
  }

  .whcf-company-indus-img-wrapper { 
    aspect-ratio: 1.98;
  }

  /* Special Projects */
  .wp-image-1881, 
  body.whcf-biomedical-society-the-association-for-diagnostics-laboratory-medicine-formerly-aacc-post .wp-image-2056, 
  .wp-image-2059, 
  .wp-image-2060 {
    margin-top: -120px;
    margin-bottom: -120px;
  }

  .wp-image-2057 {
      margin-top: -90px;
      margin-bottom: -150px;
  }

  .wp-image-2063 {
    margin-top: -90px;
      margin-bottom: -90px;
  }

}