/* kooka-css-version: 1.6.5 */
/* Minimal background layering so your theme styles control layout/typography */
.section.section--hero.kooka-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* Full-bleed regardless of the WPBakery column/row this shortcode is
     dropped into - without this it's only as wide as its parent column. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.kooka-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.kooka-hero__bg--image,
.hero__slide {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  min-height: 100vw;
}

.kooka-hero__bg--video .kooka-hero__video {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.kooka-hero__overlay {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
}

/* Ensure foreground content stays above background */
.section.section--hero.kooka-hero .container,
.section.section--hero.kooka-hero .hgroup {
  position: relative;
  z-index: 1;
}

/* Swiper controls (optional; hide if your theme provides its own) */
.hero-swiper__nav {
  position: absolute;
  inset: auto 0 16px 0;
  display: flex;
  justify-content: space-between;
  z-index: 2;
  padding: 0 16px;
}
.hero-swiper__btn {
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,.35);
  border-radius: 999px;
  cursor: pointer;
}
.hero-swiper__pagination {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
}
.section.section--hero.kooka-hero { position: relative; overflow: hidden; }
.kooka-hero__bg { position: absolute; inset: 0; z-index: 0; }
.kooka-hero__bg--image, .hero__slide { width:100%; height:100%; background-size:cover; background-position:center; min-height: 100vw; }
.kooka-hero__bg--video .kooka-hero__video {
  position:absolute; min-width:100%; min-height:100%; width:auto; height:auto;
  top:50%; left:50%; transform:translate(-50%,-50%); object-fit:cover;
}
.kooka-hero__overlay { position:absolute; inset:0; background:#000; pointer-events:none; }
.section.section--hero.kooka-hero .container, .section.section--hero.kooka-hero .hgroup { position:relative; z-index:1; }
.hero__slide, .kooka-hero__bg::after {
  position: relative; /* ensure pseudo is positioned correctly */
}

.hero__slide::after, .kooka-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* adjust opacity as needed */
  pointer-events: none; /* don't block clicks */
  z-index: 1; /* sits above the background image */
  mix-blend-mode: multiply;
}

/* keep slide content above the overlay if you add any */
.hero__slide > *, .kooka-hero__bg > * {
  position: relative;
  z-index: 2;
}

.hgroup__title--hero span{text-align: center;}
.hgroup__title span [class^="word"]:empty,
.hgroup__subtitle span [class^="word"]:empty {
  display: none !important;
}

/* Hero title/subtitle: no other stylesheet in this theme defines these
   classes, so without this the text renders as unstyled browser defaults.
   Left-aligned, vertically centered - matches the 2026 homepage design
   ("The Art of Living" over the video hero). */
.section.section--hero.kooka-hero {
  align-items: center;
}

.hgroup--hero {
  text-align: left;
  width: 100%;
  color: #fff;
}

.hgroup__title--hero {
  font-size: 3.75rem;
  font-weight: 300;
  line-height: 1.15;
  margin: 0 0 12px;
  color: inherit;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.hgroup__subtitle--hero {
  font-size: 1.15rem;
  margin: 0;
  max-width: 420px;
  color: inherit;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.kooka-hero__tricolor {
  width: 200px;
  height: 3px;
  margin: 20px 0 24px;
  background: linear-gradient(
    to right,
    #009246 0%, #009246 33.33%,
    #fff 33.33%, #fff 66.66%,
    #ce2b37 66.66%, #ce2b37 100%
  );
}

.kooka-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.kooka-hero__cta:hover {
  background: #fff;
  color: #000;
}
.kooka-hero__cta-arrow {
  transition: transform 0.2s ease;
}
.kooka-hero__cta:hover .kooka-hero__cta-arrow {
  transform: translateX(3px);
}

@keyframes kooka-hero-reveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kooka-hero__reveal {
  opacity: 0;
  animation: kooka-hero-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.kooka-hero__reveal--1 { animation-delay: 0.15s; }
.kooka-hero__reveal--2 { animation-delay: 0.35s; }
.kooka-hero__reveal--3 { animation-delay: 0.5s; }
.kooka-hero__reveal--4 { animation-delay: 0.65s; }

@media (prefers-reduced-motion: reduce) {
  .kooka-hero__reveal {
    animation: none;
    opacity: 1;
  }
}

.kooka-hero__scroll-down {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.kooka-hero__scroll-down:hover {
  background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 690px) {
  .hgroup__title--hero { font-size: 2.35rem; }
  .hgroup__subtitle--hero { font-size: 1rem; }
}
/* YouTube hero video wrapper */
.hero-yt-wrap{
  position:relative;
  padding-top:56.25%; /* 16:9 */
  background-size:cover;
  background-position:center;
}
.hero-yt-iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.kooka-hero--video .kooka-hero__yt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1; /* behind content */
}

.kooka-hero--video .kooka-hero__yt iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh; /* 100 * (16/9) — makes it wide enough */
  height: 100vh;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}
/* Make the hero a positioned container so the video fills it */
.kooka-hero { position: relative; overflow: hidden; }

/* Salient-like video wrapper */
.nectar-video-wrap{
  position:absolute; inset:0;
  overflow:hidden; pointer-events:none; /* keep hero links clickable */
  z-index:0;
}
.nectar-video-inner{ position:absolute; inset:0; }

/* Instant poster paint behind iframe/video */
.nectar-video-poster{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}

/* “cover” behavior for iframe and <video> (16:9) */
.nectar-video-iframe,
.nectar-video-file {
  /* !important needed: the theme's own .wpb_row .nectar-video-wrap video
     rule sets left:0, which otherwise wins and breaks centering. */
  position: absolute !important;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%,-50%);
  min-width: 100vw;
  min-height: 56.25vw;
}

/* Overlay tint - left-to-right gradient (darkest behind the text block on
   the left, fading out by the right) rather than a flat tint, so the video
   still reads clearly on the side with no text over it. The hero_video_
   overlay_opacity field still scales the whole gradient's intensity via
   the inline opacity style already applied to this element. */
.nectar-video-color-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0) 75%);
}

/* Keep foreground content above */
.kooka-hero .container,
.kooka-hero .hgroup { position:relative; z-index:2; }