/*
Theme Name: EWP
Theme URI: https://chcdigital.com
Author: CHC Digital
Version: 0.1.0
Description: Custom starter theme for EWP.
Text Domain: ewp
*/
:root {
  --brand: #2c9867;
  --brand-600: #237a52;
  --ink: #0b1220;
  --muted: #6b7280;
  --white: #fff;
  --black: #0a0a0a;
  --radius-card: 16px;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, .08);
  --shadow-card: 0 10px 28px rgba(0, 0, 0, .06);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ring: rgba(44, 152, 103, .35);
  --nav-bg: rgba(255, 255, 255, .88);
  --nav-border: #e7edf5;
  --nav-shadow: 0 12px 30px rgba(0, 0, 0, .1);
	 --nav-h: 72px;
  --frame-pad: clamp(12px, 2.6vw, 40px); /* initial inset around video */
  --frame-radius: 20px;
  --frame-width: 2px;
  --frame-color: #fff;
}

/* Ensure the photo layer is a containing block */
.hero-photo { position: relative; }

/* Your pattern likely already has position; ensure it's below the mask */
.hero-pattern { position: absolute; inset: 0; z-index: 30; }

/* The frame overlay */
.hero-mask{
  position: absolute;
  inset: var(--frame-pad);
  z-index: 60;                 /* above pattern, below UI */
  pointer-events: none;
  border-radius: var(--frame-radius);
  transition: inset 800ms cubic-bezier(.2,.8,.2,1); /* collapse timing */
}

.hero-mask svg{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;      /* clip stroke corners cleanly */
  overflow: visible;
}

.hero-mask .mask-rect{
  fill: transparent;
  stroke: var(--frame-color);
  stroke-width: var(--frame-width);
  vector-effect: non-scaling-stroke;  /* keeps stroke crisp at all sizes */
  stroke-linecap: round;
  stroke-linejoin: round;
  /* The draw animation is driven via JS by changing stroke-dashoffset */
  transition: stroke-dashoffset 1100ms cubic-bezier(.2,.8,.2,1) 0.05s,
              opacity 300ms ease;
  opacity: 1;
}

/* Collapse the frame inset to 0 when your timeline toggles pad-off */
.pad-off .hero-mask{
  inset: 0;
}

.hero-frame {
  position: absolute;
  inset: 0;
  border: 40px solid white;
  border-radius: 0px;
  pointer-events: none;
  z-index: 20;
  transition: all 1s cubic-bezier(0.65, 0, 0.35, 1);
}

/* When the hero animation reaches stage 4–5s */
.pad-off .hero-frame {
  border-width: 0;
  border-radius: 0;
}

/* Reduced motion: keep frame but skip the draw animation */
@media (prefers-reduced-motion: reduce){
  .hero-mask .mask-rect{
    transition: none !important;
  }
}

/* If logged in, WordPress exposes the admin bar height via this var in modern versions */
.site-header {
  top: var(--wp-admin--admin-bar--height, 0px);
}

/* Push content below the fixed header on non-home pages */
body:not(.home) main {
  padding-top: calc(var(--nav-h) + var(--wp-admin--admin-bar--height, 0px));
}

button#mobile-menu-toggle {
    border-radius: 50px;
}

.navbar-menu-wrapper {
    position: fixed;
    top: 0;
    z-index: 60;
    /* backdrop-filter: blur(8px); */
    /* background: var(--nav-bg); */
    /* border-bottom: 1px solid var(--nav-border); */
    /* transition: box-shadow .25s var(--ease-out), background-color .25s var(--ease-out), border-color .25s var(--ease-out); */
    width: 100%;
    padding-top: 10px;
}
.navbar-menu-wrapper.is-scrolled {

  border-color: transparent
}
.navbar-menu-wrapper .nav-list a {
  position: relative;
  padding: 12px 6px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none
}
.navbar-menu-wrapper .nav-list a:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  transition: width .2s var(--ease-out), left .2s var(--ease-out)
}
.navbar-menu-wrapper .nav-list a:hover:after {
  left: 0;
  width: 100%
}
.hero-button-1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 900;
  letter-spacing: .2px;
  border-radius: var(--radius-pill);
  padding: 14px 22px;
  border: 2px solid transparent;
  line-height: 1;
  transition: transform .06s ease, background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
  text-decoration: none
}
.hero-button-1:active {
  transform: translateY(1px)
}
.hero-button-1:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px
}
.hero-button-1--filled {
  background: var(--brand);
  color: #fff
}
.hero-button-1--filled:hover {
  background: var(--brand-600)
}
.hero-button-1--outline {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand)
}
.hero-button-1--outline:hover {
  background: rgba(44, 152, 103, .1)
}
.hero-button-1--black {
  background: var(--black);
  color: #fff
}
.hero-button-1--black:hover {
  filter: brightness(.92)
}
.hero-button-1--white {
  background: #fff;
  color: var(--ink);
  border-color: #e5e7eb;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}

/* Default: nav is visible */
.navbar-menu-wrapper{
  transform: translateY(-16px);
  opacity: 0;
  transition:
    transform .8s cubic-bezier(.22,1,.36,1),
    opacity   .8s cubic-bezier(.22,1,.36,1);
}

/* Only hide during hero sequence */
.hero-sequencing .navbar-menu-wrapper{
  transform: translateY(-16px);
  opacity: 0;
}


#hero { 
  position: relative; 
  min-height: 100svh; 
  overflow: clip; /* contain painting + scrolling */
}
/* When revealed */
.ui-nav-in .navbar-menu-wrapper{
  transform:none;
  opacity:1;
}

.hero-button-1--white:hover {
  background: #f9fafb
}
.hero-button-1--sm {
  padding: 10px 16px;
  font-size: .95rem
}
.hero-button-1--lg {
  padding: 16px 26px;
  font-size: 1.05rem
}
.on-dark .hero-button-1--outline {
  color: #fff;
  border-color: #fff
}
.on-dark .hero-button-1--outline:hover {
  background: rgba(255, 255, 255, .12)
}
.hero-button-1 .chev {
  display: inline-block;
  transform: translateY(1px)
}
.event-date-wrapper {
  display: inline-grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: center;
  min-width: 64px;
  padding: 8px 10px;
  gap: 6px;
  border: 1px solid #e7edf5;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card)
}
.event-date-wrapper .month {
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: .72rem;
  color: var(--brand);
  background: rgba(44, 152, 103, .12);
  padding: 3px 8px;
  border-radius: var(--radius-pill)
}
.event-date-wrapper .day {
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink)
}
.event-date-wrapper--lg {
  min-width: 78px;
  padding: 10px 12px
}
.event-date-wrapper--lg .day {
  font-size: 1.9rem
}
.on-dark .event-date-wrapper {
  background: rgba(255, 255, 255, .94);
  border-color: transparent
}
.hero-stage {
  --hero-pad: 40px;
  position: relative;
  inset: 0;
  width: 100%;
  height: 95vh;
  padding: var(--hero-pad);
  transition: padding 1.1s var(--ease-out)
}
.hero-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;

}
.hero-photo .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s var(--ease-out)
}
.hero-mask {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 1;
  transition: opacity 1.1s var(--ease-out);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='12' cy='12' r='3' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='12' cy='12' r='3' fill='black'/></svg>");
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat
}
.hero-seq-start body, .hero-seq-start .hero-immersive {
  background: #fff
}
.hero-seq-step1 .hero-img {
  opacity: 1
}
.hero-seq-step2 .hero-mask {
  opacity: 0
}
.hero-seq-step2 .hero-stage {
  --hero-pad: 0
}
.reveal-words {
  --word-gap: .25em;
  display: inline
}
.reveal-words .rw-word {
  display: inline-block;
  margin-right: var(--word-gap);
  opacity: 0;
  transform: translateY(.9em);
  animation: rw-up .6s var(--ease-out) forwards
}
@keyframes rw-up {
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

	#primary-nav{
			grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
 background-color: rgb(221 221 221 / 58%);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    padding: .2rem .5rem;
    display: flex;
			width: fit-content;
			margin: auto;
		}
		
	#primary-nav li {
    color: #121212;
    align-items: center;
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-weight: 400;
    transition: all .3s;
    display: flex
;
    padding: .5rem 0.75rem 0.5rem 0.75rem;
}
		
		a.brand {
    text-align: center;
    margin: auto;
}
		.nav a { color:#fff; mix-blend-mode:difference; }
		
		
		a.btn.btn-primary.float-right.hero-button-1.hero-button-1--outline.hero-button-1--lg {
    width: fit-content;
    margin: auto;
}
		
		h1, h2, h3{
			font-family: "El Messiri", sans-serif;
  font-optical-sizing: auto;

  font-style: normal;
		}
		
		h3 {
    font-size: 1.5em;
}
		
		h3 a {
    font-family: "El Messiri", sans-serif;
}
		span.text-xs.justify-center.time {
    font-size: 0.8em;
}
		
		body{
			 font-family: "Poppins", sans-serif;
			
			font-size: 0.75em;
		}
		
		p, a, button{
			 font-family: "Poppins", sans-serif;
		}

:root{
	  --brand:#2c9867;
	  --ease: cubic-bezier(.22,1,.36,1);
	  --tile-x:46px;           /* pattern tile width  */
	  --tile-y:40px;           /* pattern tile height */
	
	}
h1 {
   font-size: 3em;
    line-height: 1em;
    font-weight: bold;
}
		h2 {
    font-size: 2em;
}

h4 {
    font-size: 1.25em;
    margin-bottom: 10px;
}

input.min-w-0.flex-1.rounded.border.border-black\/20.px-3.py-2 {
    border-radius: 50px;
}

	/* ------- NAVBAR: slide-in after 3.5s ------- */
	.navbar-menu-wrapper{
	  transform: translateY(-16px);
	  opacity: 0;
	  transition: transform .8s var(--ease), opacity .8s var(--ease);
	}
	.ui-nav-in .navbar-menu-wrapper{
	  transform: none;
	  opacity: 1;
	}

	/* ------- HERO LAYERING ------- */
	.hero-stage{ position:relative; height:100svh; isolation:isolate; background:#fff; }
	.hero-photo{ position:absolute; inset:0; overflow:hidden; background:#fff; }

	/* Video cover + white “padding border” that collapses at 3s */
	.video-frame{
	  position:absolute; inset:0;
	  padding:80px;                 /* start with 80px white frame */
	  background:#fff;
	  box-sizing:border-box;
	  transition: padding 1s var(--ease);
	}
	.pad-off .video-frame{ padding:0; }

		/* keep iframe behind the overlay */
	.video-iframe, .hero-video { z-index: 0; }


	/* 16:9 cover */
	.video-shell{ position:absolute; inset:0; overflow:hidden; z-index:1; }
	.video-iframe{
	  position:absolute; top:50%; left:50%;
	  width:100vw; height:56.25vw;        /* 16:9 from width */
	  transform:translate(-50%,-50%);
	  border:0;
	  opacity:0;                          /* 5) fade video in over 2s */
	  transition: opacity 5s var(--ease);
	}
	@media (max-aspect-ratio:16/9){
	  .video-iframe{ width:177.78vh; height:100vh; } /* 16:9 from height */
	}
	.video-on .video-iframe{ opacity:1; }

	/* Poster (optional safety). We’ll auto-hide when iframe is ready */
	.hero-poster{
	  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	  z-index:0; opacity:1; transition:opacity .8s var(--ease);
	}
	.video-ready .hero-poster{ opacity:0; }

	/* ------- PATTERN OVERLAY (white with your tiled SVG) ------- */
	.hero-pattern{
	  position: absolute; inset: 0; z-index: 2; pointer-events: none;

	  /* Tiled white shapes on transparent */
	  background-color: transparent;
	  background-image: var(--svg-leaf);
	  background-repeat: repeat;
	  background-size: var(--tile-x) var(--tile-y);
	  background-position: 0 0;

	  /* CRITICAL: nuke any earlier masking so tiling isn't clipped */
	  -webkit-mask: none !important;
			  mask: none !important;

	  opacity: 1;
	  transition: opacity 5s cubic-bezier(.22,1,.36,1);
	  will-change: opacity;
	}

	/* fade it away when your JS adds .pattern-off to <html> */
	.pattern-off .hero-pattern{ opacity: 0; }
	/* ------- HEADLINE baseline reveal after 3s ------- */
	.hero-cta{ position:relative; z-index:3; color:#fff; }
	.baseline-clip{ display:inline-block; overflow:hidden; line-height:1.05; }
	.baseline-slide{
	  display:inline-block;
	  transform: translateY(1.1em);                /* below baseline */
	  transition: transform .8s var(--ease);       /* 3) ease up from baseline */
	}
	.text-on .baseline-slide{ transform: translateY(0); }
	/* add to your inline CSS with the other .video-iframe rules */
	.video-iframe{ pointer-events: none; }
	/* Keep your word-by-word stagger inside the headline */
	/* Per-word baseline reveal (paused until .text-on is on <html>) */
.reveal-words .rw-word{
  display:inline-block;
  overflow:hidden;              /* clip each word at the baseline */
  vertical-align:baseline;
}
.reveal-words .rw-i{
  display:inline-block;
  transform: translateY(100%);  /* start below baseline */
  opacity: 0;
  animation: rw-in .7s var(--ease) forwards;
  animation-play-state: paused; /* wait for .text-on */
  will-change: transform, opacity;
}

/* Start the animation when your JS adds .text-on (at 5s) */
.text-on .reveal-words .rw-i{
  animation-play-state: running;
}

@keyframes rw-in {
  to { transform: translateY(0); opacity: 1; }
}

	/* ------- CTA buttons: fade in at 3.5s ------- */
	.hero-button-1{ opacity:0; transition: opacity .6s var(--ease); }
	.cta-on .hero-button-1{ opacity:1; }
		
		.hero-pattern { -webkit-mask:none !important; mask:none !important; }
.hero-button-1--lg {
    padding: 10px 23px;
    font-size: 0.8rem;
    font-weight: 400;
}		
		
		.hero-button-1--sm {
    padding: 10px 16px;
    font-size: .85rem;
    font-weight: 300;
    border: solid 0.5px;
}
		.facetwp-checkbox {
    background: none !important;
    background-size: 0px;
    margin-bottom: 4px;
    padding: 10px;
    cursor: pointer;
      border: solid 1px #dddddd;
    display: inline-block;
    margin-right: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8em;
    width: max-content;
}
		input.facetwp-date.facetwp-date-min.flatpickr-input.flatpickr-alt {
    text-align: center;
}
		.flatpickr-input[readonly] {
    cursor: pointer;
    text-align: center;
}
.facetwp-facet {
    margin-bottom: 0px !important;
}

button#apply-delegation-btn {
    border-radius: 50px;
}

a.inline-flex.items-center.rounded-full.border.border-slate-300.bg-white.px-3.py-1\.5.text-slate-900.text-xs.uppercase.hover\:bg-slate-100.transition {
    font-size: 0.75em;
    letter-spacing: 1px;
}
.facetwp-selections .facetwp-selection-value {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    padding-right: 16px;
    background-image: url(../images/icon-close.png);
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: right center;
    border: solid 1px #ddd;
    padding: 7px;
    padding-right: 16px;
    border-radius: 20px;
}

.facetwp-selections {
    padding-top: 9px;
}

		.fs-label-wrap {
    position: relative;
    background-color: #fff;
    border: 1px solid;
    cursor: default;
    border-radius: 20px;
    padding: 5px;
}
		
		.facetwp-checkbox {
   border-radius: 20px;
    margin-bottom: 4px;
    padding-left: 20px;
    cursor: pointer;
}
		

.facetwp-facet.facetwp-facet-date_range.facetwp-type-date_range {
    border: solid 1px #dddddd;
    border-radius: 20px;
    padding: 9px;
    text-align: center;
    height: 36.4px;
   
}
		
		.event-date-wrapper {
    anchor-name: none;
    display: inline-grid;
    grid-template-rows: auto 1fr;
    align-items: center;
    justify-items: center;
    min-width: 64px;
    padding: 8px 10px;
    gap: 6px;
    border: 0.5px solid #111;
    border-radius: 0px;
    background: #fff;
    box-shadow: var(--shadow-card);
}
.fs-dropdown {
    width: 100%;
    position: absolute;
    background-color: #fff;
    border: none;
    border-top: none;
    z-index: 1000;
}

.fs-option, .fs-search, .fs-optgroup-label {
    padding: 6px 8px;
    cursor: default;
    border-radius: 20px;
}

.fdate-input {
    outline: none;
    text-align: center;
}
	

/* 3-layer headline: black text + two solid colored layers behind it */
.tri-shadow {
  /* Tweak these per-usage or via inline style */
  --s1-color: #d67e7a;   /* rose/red layer */
  --s2-color: #2c9867;   /* brand green layer */
  --s1-x: -0.08em; --s1-y: -0.22em; /* rose offset (left/up) */
  --s2-x:  0.14em; --s2-y: -0.08em; /* green offset (right/up) */

  position: relative;
  color: #111;           /* main (top) text color – your black */
  font-weight: 800;      /* looks best with bold weights */
  line-height: 1.05;
}

/* Duplicate the text twice behind using pseudo-elements */
.tri-shadow::before,
.tri-shadow::after {
  content: attr(data-text);   /* read the text from data-text */
  position: absolute;
  inset: 0;
  font: inherit;
  line-height: inherit;
  white-space: pre-wrap;      /* supports line breaks */
  pointer-events: none;
}

.tri-shadow::before {
  color: var(--s1-color);
  transform: translate(var(--s1-x), var(--s1-y));
  z-index: -2;
}

.tri-shadow::after {
  color: var(--s2-color);
  transform: translate(var(--s2-x), var(--s2-y));
  z-index: -1;
}

.hero-border {
  pointer-events: none; /* don’t block clicks */
  z-index: 1;          /* above content backgrounds, below menus if needed */
}

/* Optional: smaller offsets on narrow screens */
@media (max-width: 640px) {
  .tri-shadow {
    --s1-x: -0.05em; --s1-y: -0.14em;
    --s2-x:  0.10em; --s2-y: -0.05em;
  }
}

/* ===== EWP: Navbar reveal (global) ===== */
.navbar-menu-wrapper{
  transform: translateY(-16px);
  opacity: 0;
  transition:
    transform .8s cubic-bezier(.22,1,.36,1),
    opacity   .8s cubic-bezier(.22,1,.36,1);
}
.ui-nav-in .navbar-menu-wrapper{
  transform: none;
  opacity: 1;
}

/* === EWP: Hero video white frame (40px → 0 from 4s to 5s) === */
.hero-photo .video-frame{
  position:absolute;
  inset:0;
  /* 40px “white border” implemented as padding */
  padding:40px;
  box-sizing:border-box;
  background:#fff;
  transition: padding 1s var(--ease, cubic-bezier(.22,1,.36,1));
  z-index:1;             /* keep it above the video, below pattern/CTA */
}
.pad-off .video-frame{ padding:0; }

/* Mobile: slightly smaller initial frame if you prefer */
@media (max-width: 640px){
  .hero-photo .video-frame{ padding:24px; }
}

/* Respect reduced motion: start collapsed, no animation */
@media (prefers-reduced-motion: reduce){
  .hero-photo .video-frame{ padding:0; transition:none; }
}
/* --- EWP nav fixes (2025-11-07) --- */
@media (max-width: 767.98px){
  #primary-nav{ display:none !important; }
}
@media (min-width: 768px){
  #primary-nav{ display:block !important; }
}