/* HOMEPAGE STYLES
************************************************************/

/* COVER CAROUSEL (2026-10-12): the slides fill the screen and the navbar
   sits over them on a white gradient, so the site title and links stay
   readable over any image. Adjust the gradient here. */
:root {
	--home-navbar-fade-top: rgba(255, 255, 255, 0.6);    /* behind the title and links */
	--home-navbar-fade-mid: rgba(255, 255, 255, 0.4);    /* lower edge of the links */
	--home-navbar-fade-end: rgba(255, 255, 255, 0);      /* fully clear by the bottom */
	--home-navbar-fade-extra: 2.5rem;                     /* how far the fade runs below the links */
}

.home .navbar-wrapper {
	position: absolute;
	width: 100%;
	background-color: transparent;
	z-index: 100;
}

section.quotes,
section.hero {
	border-bottom: 1px solid var(--color-row-border);
}

section.bannerImage	{
	min-height: 70vh;
	display: flex; 				/* 5-lines to avoid internal scrollbars */
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

section.hero {
	position: relative;           /* dots and arrows sit inside the cover */
	padding-bottom: 0;
}


.sectionTitle	{
	text-align: center;
}

section.heroStatement .container	{
	max-width: 52rem;
}

section.heroStatement	{	
	text-align: center;
}

section.heroStatement h2	{	
	margin-top: 1em;
	font-size: 2em;
	font-style: italic;
	font-family: var(--font-quote);
}

li.current_page_item	{
	display: none;
}

.menu-main-navigation-container ul.nav.navbar-nav > li.menu-item a {
	color: var(--color-accent1);
	color: #222;
}
.menu-main-navigation-container ul.nav.navbar-nav > li.menu-item a:hover{
	color: black;
	text-shadow: 1px 1px 3px rgba(255,255,255,0.7);
}


/*-----------------------------------------*/

.siteTitle {
	/*text-shadow: 0 0 30px #000, 0 0 60px #000;*/
}

/* SITE TITLE CENTERED OVER THE COVER (2026-10-13, as tjones)
   The title leaves the navbar row and sits at the middle of the screen
   (50svh); the nav links stay at the top right. Size and weight are
   tjones' hero title. Font is set separately (--font-siteTitle). */
.home .siteTitle.flexItem {
	position: absolute;
	top: 50svh;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(90%, 60rem);
	text-align: center;
	z-index: 3;
}

.home .siteTitle .mainSiteTitle {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 700;
	line-height: 1.1;
}

.home .siteTitle .siteSlogan {
	margin-top: 0.5rem;
}

.home .navbar-wrapper .siteTitle a:link,
.home .navbar-wrapper .siteTitle a:visited,
.home .navbar-wrapper .siteTitle a:hover,
.home .navbar-wrapper .siteTitle a:active,
.home .siteTitle .siteSlogan {
	color: #fff;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

ul.nav li a {
	/*text-shadow: 0 0 20px #000, 0 0 40px #000;*/
}
/* Hero Carousel Styles */
	.home .navbar-wrapper {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    padding-bottom: var(--home-navbar-fade-extra);
	    background-color: transparent;
	    background-image: linear-gradient(to bottom,
	        var(--home-navbar-fade-top) 0%,
	        var(--home-navbar-fade-mid) 55%,
	        var(--home-navbar-fade-end) 100%);
	    border-bottom: none;
	    z-index: 9999;
	}

	/* logged in: sit below the WordPress admin toolbar (32px; 46px on narrow screens) */
	.admin-bar.home .navbar-wrapper {
	    top: 32px;
	}

	@media (max-width: 782px) {
	    .admin-bar.home .navbar-wrapper {
	        top: 46px;
	    }
	}
	
	.home .navbar-wrapper a,
	.home .navbar-wrapper a:hover {
		color: var(--color-siteTitle);
	}
	
	/*.navbar-wrapper .navbar-nav a:hover {
		border-bottom: 2px solid #fff;
	}*/
	
	.home .icon-bar {
	    background-color: var(--color-siteTitle);
	    }

	/* phones: the dropdown menu opens just under the hamburger, not below the fade */
	@media (max-width: 499.98px) { /* BP-NAV-MOBILE */
	    .home .navbar-menu {
	        top: calc(100% - var(--home-navbar-fade-extra));
	    }
	}
	
	.hero-carousel {
	    position: relative;
	    height: 100svh;
	    overflow: hidden;
	    background-color: var(--color-accent4);   /* shows only before the first image loads */
	}
	
	.hero-carousel-slides {
	    position: relative;
	    width: 100%;
	    height: 100%;
	}
	
	.hero-slide {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    opacity: 0;
	    transition: opacity 1.5s ease-in-out;
	    background-size: cover;
	    background-position: center;
	    background-repeat: no-repeat;
	}
	
	.hero-slide.active {
	    opacity: 1;
	}
	
	.hero-overlay {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, <?php echo esc_attr($hero_overlay_opacity); ?>);
	    z-index: 2;
	}
	
	.hero-content {
	    position: absolute;
	    top: 50%;
	    left: 50%; 
	    left: 5%;  
	    transform: translate(-5%, -50%);
	    text-align: center;
	    text-align: left;
	    z-index: 3;
	    max-width: 800px;
	    padding: 0 20px;
	    color: <?php echo $hero_text_color === 'white' ? '#ffffff' : ($hero_text_color === 'black' ? '#000000' : '#ffffff'); ?>;
	}
	
	.hero-title {
	    font-size: clamp(2.5rem, 6vw, 4.5rem);
	    font-weight: 700;
	    margin-bottom: 1rem;
	    line-height: 1.1;
	    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	    color: white;
	}
	
	.hero-subtitle {
	    font-size: clamp(1.25rem, 3vw, 2rem);
	    font-weight: 400;
	    margin-bottom: 1.5rem;
	    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	    color: white;
	}
	
	.hero-description {
	    font-size: clamp(1rem, 2vw, 1.25rem);
	    line-height: 1.6;
	    margin-bottom: 2rem;
	    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	}
	
	.hero-button {
	    display: inline-block;
	    padding: 12px 30px;
	    background: rgba(255, 255, 255, 0.9);
	    color: #333;
	    text-decoration: none;
	    border-radius: 5px;
	    font-weight: 600;
	    font-size: 1.1rem;
	    transition: all 0.3s ease;
	    text-transform: uppercase;
	    letter-spacing: 1px;
	}
	
	.hero-button:hover {
	    background: rgba(255, 255, 255, 1);
	    transform: translateY(-2px);
	    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	    color: #333;
	    text-decoration: none;
	}
	
	/* Carousel Navigation */
	.hero-nav {
	    position: absolute;
	    bottom: 30px;
	    left: 50%;
	    transform: translateX(-50%);
	    z-index: 4;
	    display: flex;
	    justify-content: center;
	    gap: 10px;
	}
	
	.hero-nav-dot {
	    width: 12px;
	    height: 12px;
	    border-radius: 50%;
	    background: rgba(255, 255, 255, 0.5);
	    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);   /* keeps the dots visible over pale images */
	    cursor: pointer;
	    transition: all 0.3s ease;
	}
	
	.hero-nav-dot.active,
	.hero-nav-dot:hover {
	    background: rgba(255, 255, 255, 1);
	    transform: scale(1.1);
	}
	
	/* Arrow Navigation — matches the shared carousel engine's default look
	   (css/hwd-carousel.css .hwdc-arrow): white chevron on a dark
	   semi-opaque box, flush to the carousel's own left/right edge. */
	.hero-arrow {
	    position: absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    display: none;
	    align-items: center;
	    justify-content: center;
	    width: 35px;
	    height: 45px;
	    width: 26px;
	    height: 40px;
	    border: 0;
	    cursor: pointer;
	    background: rgba(59,59,68, 0.30);
	    color: var(--color-accent5);
	    transition: color 0.2s ease, background 0.2s ease;
	    z-index: 4;
	}
	
	.hero-arrow:hover {
	    background: rgba(59,59,68, 0.6);
	}
	
	.hero-arrow svg {
	    width: 100%;
	    height: 100%;
	    fill: none;
	    stroke: currentColor;
	    stroke-width: 2px;
	    stroke-miterlimit: 10;
	}
	
	.hero-arrow.prev {
	    left: 0;
	}
	
	.hero-arrow.next {
	    right: 0;
	}
	
	/* Nav swap: dots for narrow screens, arrows once there's room ( >= 600px ) */
	@media (min-width: 600px) {
	   /* .hero-nav {
	        display: none; 					/* if not arrows (wide)
	    }*/
	
	    .hero-arrow {
	        display: flex;
	        display:none; 					/* if not dots (wide) */
	    }
	}
	
	.sectionInner {
		padding: 5rem 0 3rem;
	}
	
	/* Responsive adjustments */
	@media (max-width: 768px) {
	    .hero-content {
	        padding: 0 15px;
	    }
	    
	    .hero-nav {
	        bottom: 20px;
	    }
	}
	
	.about .one-col	{
		width: min(100%, 40em);
		font-size: 1.3rem;
		line-height: 1.5em;
	}

section.about p	{
	text-align: justify;
}	

	section.footer {
		border-top: none;
	}