/* =============================================================
   Zoho Sites — custom CSS  (v2)

   Changes from v1:
   - HERO: the hardcoded url() is gone. .zpslider-img is a theme class
     applied to every slider, so setting background-image there (with
     !important, which beat the editor's inline style) forced one image
     onto every page. The fade is now painted by a ::after overlay, so
     the Zoho Sites editor stays the single source of truth for images.
   - Added .hero-yt for the desktop YouTube background layer.
   - Mobile: fade switched off via the overlay, and Zoho's default
     video overlay tint cleared so it stops sitting on the image.

   Refactor notes carried over from v1:
   - Repeated literals are custom properties; duplicate rule bodies are
     merged into selector lists. Every original selector is still
     present and keeps its own specificity.
   ============================================================= */

:root {
  /* Brand */
  --c-orange:        #E56400;
  --c-orange-hover:  #B14C03;
  --c-orange-active: #210A02;
  --c-navy:          #013D6C;
  --c-ink:           #0C1215;
  --c-white:         #ffffff;

  /* Header logo */
  --logo-w: 150px;
  --logo-h: 80px;

  /* Hero fade */
  --hero-fade:
    linear-gradient(to bottom, #023d6c 0%, rgba(2, 61, 108, 0) 40%),
    linear-gradient(to top,    #023d6c 0%, rgba(2, 61, 108, 0) 40%);

  /* Sponsor marquee */
  --marquee-logo-h: 50px;
}


/* ── Navigation: logo ───────────────────────────────────────── */

.zpheader-style-04 .theme-logo-parent {
  width: 150px !important;
  height: 31.13px !important;   /* NOTE: shorter than the 80px image */
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 2.29px;
}

/* One size rule for every logo image variant. The last two selectors
   are fallbacks in case the theme's real nesting doesn't match the
   first — Zoho creates the image asynchronously, so the ancestor
   chain isn't fully reliable. */
.zpheader-style-04 .theme-logo-parent img,
.theme-header .zpcontainer .theme-branding-info .theme-logo-parent a img.mobileLogoAuto,
img.mobileLogoAuto,
.theme-logo-parent a .custom-mobile-logo {
  width: var(--logo-w) !important;
  height: var(--logo-h) !important;
}

.zpheader-style-04 .theme-logo-parent img,
.theme-logo-parent a .custom-mobile-logo {
  object-fit: contain;
}

/* Mobile logo swap: header-scripts.js injects
   <img class="custom-mobile-logo"> beside the theme's own logo.
   Hidden on desktop; the mobile block below flips the pair. */
.theme-logo-parent a .custom-mobile-logo {
  display: none;
}


/* ── Header CTA: Partner With Us ────────────────────────────── */

.theme-header .partnerwith-header {
  flex-shrink: 0;
  margin-left: auto;
}

.theme-header .partnerwith-header a {
  width: 143px !important;
  height: 34px !important;
  border-radius: 100px !important;
  padding: 8px 12px !important;
  gap: 8px !important;
  background-color: var(--c-orange) !important;
  color: var(--c-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 12px !important;
  line-height: 150% !important;
  letter-spacing: 0% !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

.theme-header .partnerwith-header a:hover  { background-color: var(--c-orange-hover)  !important; color: var(--c-white) !important; }
.theme-header .partnerwith-header a:active { background-color: var(--c-orange-active) !important; color: var(--c-white) !important; }

/* No arrow glyph on the header variant. */
.theme-header .partnerwith-header a span::after {
  display: none !important;
  content: none !important;
}


/* ── Shared button styles ───────────────────────────────────── */

.partnership-button a,
.partnerwith-button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
}

.partnership-button a span,
.partnerwith-button a span {
  display: inline-flex;
  align-items: center;
}

.partnership-button a span::after,
.partnerwith-button a span::after {
  content: '\2192';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.partnership-button a {
  width: 373px;
  height: 64px;
  gap: 12px;
  background-color: var(--c-orange) !important;
  color: var(--c-white) !important;
}

.partnership-button a:hover  { background-color: var(--c-orange-hover)  !important; color: var(--c-white) !important; }
.partnership-button a:active { background-color: var(--c-orange-active) !important; color: var(--c-white) !important; }

.partnership-button a span::after {
  width: 32px;
  height: 32px;
  font-size: 32px;
  margin-left: 12px;
}

.partnerwith-button a {
  width: 200px;
  height: 48px;
  gap: 12px;
}

.partnerwith-button a span::after {
  width: 24px;
  height: 24px;
  font-size: 24px;
  margin-left: 8px;
}


/* ── Back to top ────────────────────────────────────────────── */

.back-to-top p {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.back-to-top p::after {
  content: '\2191';
  width: 24px;
  height: 24px;
  font-size: 16px;
  font-weight: 300;
  border: 1.5px solid #333;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.back-to-top p:hover::after {
  background: #333;
  color: var(--c-white);
}


/* ── Menu items ─────────────────────────────────────────────── */

.theme-menu-content .theme-menu-name {
  font-size: 12px;
  line-height: 150%;
  text-transform: uppercase;
}

/* Zoho's theme marks "Home" as .theme-menu-selected on every page, so
   it can't be trusted — strip its pill and let highlightActiveMenuItem()
   in header-scripts.js set the real active item by comparing the URL. */
.theme-menu-selected > a,
.custom-menu-active > a {
  background-color: transparent !important;
}

.custom-menu-active .theme-menu-name {
  font-weight: 700 !important;
}

/* Separately from the bug above, "Home" is configured as a highlighted
   menu item (.menu-highlight-primary), which gives it its own padding,
   font-size and dark pill on both breakpoints. Strip all of it. */
.theme-navigation-and-icons .theme-menu-area .theme-menu ul li.menu-highlight-primary > a {
  background: transparent !important;
  padding: 0 45px 0 0 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

.theme-navigation-and-icons .theme-menu-area .theme-menu ul li:hover > a {
  background-color: transparent !important;
  color: #EFF1F2 !important;
}


/* ── Sponsor logo marquee ───────────────────────────────────────
   Logos are sized by HEIGHT only (auto width) so none carries
   internal blank padding — the margin below is then the true,
   consistent visual gap between them.

   The theme's own image CSS sets `width: 100% !important` on these
   same <img> tags, so the compound selectors mirror that nesting to
   win on specificity.

   Motion is driven in JS (rAF + measured pixel distance) rather than
   a CSS keyframe, to avoid a snap at the loop point; the hover-pause
   rule below is therefore inert and is handled by mouseenter /
   mouseleave in header-scripts.js. */

.logo-carousel-track {
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  background: var(--c-white);
  padding: 16px 0;
}

.logo-carousel-track .zpelem-col {
  width: auto !important;
  min-width: 0 !important;
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;   /* may be cancelling the 60px desktop gap — see notes */
  flex: 0 0 auto !important;
}

.logo-carousel-track-inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  width: max-content;
  will-change: transform;
}

.logo-carousel-track-inner > * {
  margin-right: 60px;
}

.logo-carousel-track:hover .logo-carousel-track-inner {
  animation-play-state: paused;
}

.logo-carousel-track-inner .zpimage-container,
.logo-carousel-track-inner figure,
.logo-carousel-track-inner .zpimage-anchor {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
}

.logo-carousel-track-inner img,
.logo-carousel-track-inner .zpimage-container.zpimage-size-fit figure img,
.logo-carousel-track-inner .zpimage-container.zpimage-mobile-fallback-fit figure img,
.logo-carousel-track-inner .zpimage-container.zpimage-tablet-fallback-fit figure img {
  width: auto !important;
  height: var(--marquee-logo-h) !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}


/* ── Hero: fade overlay ─────────────────────────────────────────
   No image URL here. Whatever you set as the section background in
   the Zoho Sites editor shows through; this only paints the fade
   on top of it.

   Layer order inside the hero:
     section background (editor)  →  .hero-yt iframe (z 0)
     →  ::after fade (z 1)  →  headline / CTA (z 2)

   To limit the fade to specific sliders instead of all of them, add a
   custom class in the editor and change the selector below to
   `.hero-fade.zpslider-img::after`. */

.zpslider-img {
  position: relative;
}

.zpslider-img {
  position: relative;
  isolation: isolate;        /* new stacking context */
}

.zpslider-img::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--hero-fade);
}

/* Lift the slider's own content above the fade. */

.hero-yt {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.hero-yt iframe {
    top: 0 !important;
  left: 50% !important;
  margin: 0 !important;
  transform: none !important;
  translate: -50% 0 !important;
  pointer-events: none;
  position: absolute;
  width: 100vw;
  height: 56.25vw;        /* 16:9 from width... */
  min-height: 100vh;
  min-width: 177.78vh;    /* ...or from height, whichever covers */
  border: 0;
}

.hero-yt::after {
  content: '';
  position: absolute;
  inset: 0;
}


/* ── Misc ───────────────────────────────────────────────────── */

.zscustom-card-image-box {
  overflow: hidden;
}

.link-font a {
  color: #000 !important;
}


/* ── Desktop ────────────────────────────────────────────────── */
/* 768, not 767: the old min-width:767px overlapped the max-width:767px
   block below, so both fired at exactly 767px. */

@media (min-width: 768px) {
  .theme-header .zpcontainer {
    min-width: 100%;
    padding: 12px 50px;
  }

  /* Only relevant while a native Zoho background video is in use.
     Safe to delete once the hero is image + .hero-yt. */
  .zpvideo-bg-overlay {
    background: var(--hero-fade) !important;
  }
}

@media (min-width: 992px) {
  .zpheader-style-04 .theme-navigation-and-icons {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .zpheader-style-04 .theme-navigation-and-icons .theme-menu-area .theme-menu ul {
    justify-content: center;
  }

  .theme-navigation-and-icons .theme-menu-area .theme-menu ul li.menu-highlight-primary > a {
    font-size: 18px !important;
    font-weight: 500 !important;
  }
}


/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 767px) {

  /* Logo swap: hide the theme's image, show our injected one. */
  .theme-logo-parent a img.mobileLogoAuto  { display: none !important; }
  .theme-logo-parent a .custom-mobile-logo { display: inline-block !important; }

  /* CTA visible and pushed right (its margin-left:auto does the work,
     provided the header row isn't centering — hence flex-start). */
  .theme-header .partnerwith-header { display: inline-flex !important; }

  .theme-header .zpcontainer {
    justify-content: flex-start !important;
  }

  .theme-header {
    background: var(--c-white) !important;
  }

  /* Hamburger before the logo. */
  .theme-header .theme-responsive-menu-area.zpcontainer {
    order: -1;
    margin-inline-start: 0;
    margin-inline-end: auto;
  }

  /* The burger lines were white for the old dark header and are
     invisible on white. Targets descendants and their pseudo-elements,
     since the lines are drawn on a nested span rather than the
     container's own ::before / ::after. */
  .theme-header .theme-responsive-menu-container,
  .theme-header .theme-responsive-menu-container *,
  .theme-header .theme-responsive-menu-container *::before,
  .theme-header .theme-responsive-menu-container *::after {
    color: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
  }

  /* Open menu panel: white with dark text. Several nesting levels,
     because the background may be painted on a child. None of this
     touches the desktop nav — .theme-responsive-menu is mobile-only. */
  .theme-header .theme-responsive-menu,
  .theme-header .theme-responsive-menu .theme-menu-area,
  .theme-header .theme-responsive-menu ul,
  .theme-header .theme-responsive-menu li,
  .theme-header .theme-responsive-menu .theme-menu-content,
  .theme-header .theme-responsive-menu-area,
  .theme-header .theme-responsive-menu-container {
    background-color: var(--c-white) !important;
  }

  .theme-header .theme-responsive-menu .theme-menu-name,
  .theme-header .theme-responsive-menu .theme-menu-content,
  .theme-header .theme-responsive-menu a {
    color: var(--c-ink) !important;
  }

  /* Keep the burger above the panel / backdrop. */
  .theme-header .theme-responsive-menu-container {
    position: relative;
    z-index: 1001;
  }

  .theme-header .theme-responsive-menu,
  .theme-header .theme-responsive-menu-area,
  .zpmm-backdrop {
    z-index: 999;
  }

  /* Marquee */
  .logo-carousel-track {
    --marquee-logo-h: 40px;
    padding: 10px 0 !important;
  }

  .logo-carousel-track .zpelem-col {
    margin-right: 48px !important;
  }

  /* Hero: editor image only — no fade, no video. */
  .zpslider-img::before { display: none; }

  .hero-yt { display: none; }

  /* Clear Zoho's own overlay tint sitting on the mobile image. */
  .zpvideo-bg-overlay { background: none !important; }
}