/* ==========================================================================
   KUTAVAR — Custom hero slider
   Scope: the Uncode row with Element ID "customSlider"

   Built for the CMS-editable structure, where each slide is four separate
   Uncode modules sitting as siblings inside .uncont:

     .uncont                          <- the hero box
       .uncode-single-media           <- image  -> promoted to background layer
       .vc_custom_heading_wrap  h2    <- title
       .uncode_text_column      p     <- body text
       span.btn-container       a.btn <- call to action

   Every rule is scoped to #customSlider, so this file only ever affects that
   one row and is safe to enqueue per-page or site-wide. The single exception
   is section 10, which recolours the site menu sitting over the hero — see the
   note there for why, and for how to remove it.

   Brand tokens match the live site (Uncode theme options):
     accent #cc2c24 "Kutavar Red"  ·  hover #bf1f17  ·  dark #101213
   Type is Raleway, already loaded site-wide.

   TUNING: --cs-height below is the single dial for hero height.
   ========================================================================== */

#customSlider{
  --cs-height:    clamp(500px, 68vh, 740px);
  --cs-height-sm: clamp(430px, 64vh, 560px);

  --cs-red:       #cc2c24;
  --cs-red-dark:  #bf1f17;
  --cs-ink:       #101213;
  --cs-ease:      cubic-bezier(.22,.61,.36,1);

  /* The site menu is transparent and sits over this row, so the centred
     content is nudged down to stay clear of it. */
  --cs-nav-clear: 92px;
}

/* --------------------------------------------------------------------------
   1. Full-bleed frame
   Uncode pads the slide rows, which stops the slider going edge to edge.
   -------------------------------------------------------------------------- */
#customSlider .row-child,
#customSlider .row-internal > .row-child{
  padding:0 !important;
  max-width:none !important;
}
#customSlider .wpb_column,
#customSlider .uncol,
#customSlider .uncoltable,
#customSlider .uncell{
  padding:0 !important;
  margin:0 !important;
}
/* .row-inner carries Uncode's negative gutter margin, which pushes the hero
   off-centre once the side padding is removed. */
#customSlider .wpb_row.row-inner{
  margin:0 !important;
  width:auto !important;
}
/* never let Owl force a taller slide than the hero needs */
#customSlider .owl-item{ height:auto !important; }

/* --------------------------------------------------------------------------
   2. The hero box
   .uncont is the common parent of all four modules, so it becomes the hero.
   -------------------------------------------------------------------------- */
#customSlider .uncont{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:var(--cs-height);
  margin:0 !important;
  padding:calc(var(--cs-nav-clear) + clamp(24px,4vh,48px))
          clamp(24px,6vw,80px)
          clamp(64px,9vh,96px);          /* extra bottom room for the dots */
  overflow:hidden;
  isolation:isolate;
}

/* Image module -> full-bleed background layer */
#customSlider .uncode-single-media{
  position:absolute;
  inset:0;
  margin:0 !important;
  padding:0 !important;
  z-index:0;
}
#customSlider .single-wrapper,
#customSlider .tmb,
#customSlider .t-inside,
#customSlider .t-entry-visual,
#customSlider .t-entry-visual-tc,
#customSlider .uncode-single-media-wrapper{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
}
#customSlider .tmb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  transform:scale(1.02);
  transition:transform 1.2s var(--cs-ease);
}
#customSlider .uncont:hover .tmb img{ transform:scale(1.06); }

/* Legibility scrim. Darkens top (for the transparent menu), centre (for the
   copy) and bottom (for the dots) without flattening the photograph. */
#customSlider .uncont::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(16,18,19,.74) 0%,
      rgba(16,18,19,.30) 26%,
      rgba(16,18,19,.34) 55%,
      rgba(16,18,19,.80) 100%),
    radial-gradient(ellipse 72% 62% at 50% 52%,
      rgba(16,18,19,.46) 0%,
      rgba(16,18,19,0) 100%);
}

/* All three content modules ride above the scrim */
#customSlider .vc_custom_heading_wrap,
#customSlider .uncode_text_column,
#customSlider .btn-container{
  position:relative;
  z-index:2;
  width:100%;
  max-width:none;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
}

/* --------------------------------------------------------------------------
   3. Title
   -------------------------------------------------------------------------- */
#customSlider .heading-text{ margin:0 !important; }

#customSlider .vc_custom_heading_wrap h1,
#customSlider .vc_custom_heading_wrap h2,
#customSlider .vc_custom_heading_wrap h3{
  margin:0 auto clamp(14px,2vh,20px) !important;
  padding:0 !important;
  max-width:20ch;
  color:#fff !important;
  font-size:clamp(1.9rem, 4.3vw, 3.5rem) !important;
  font-weight:700 !important;
  line-height:1.05 !important;
  letter-spacing:-.02em !important;
  text-align:center !important;
  text-wrap:balance;
  text-shadow:0 2px 26px rgba(0,0,0,.45);
}
/* inline colour/weight set in the CMS editor must not beat the above */
#customSlider .vc_custom_heading_wrap h1 span,
#customSlider .vc_custom_heading_wrap h2 span,
#customSlider .vc_custom_heading_wrap h3 span,
#customSlider .vc_custom_heading_wrap strong{
  color:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  letter-spacing:inherit !important;
}
/* Short red rule above the title — decorative only, so nothing here needs
   translating by WPML. */
#customSlider .vc_custom_heading_wrap::before{
  content:"";
  display:block;
  width:52px;
  height:3px;
  background:var(--cs-red);
  margin:0 auto clamp(18px,2.6vh,26px);
}

/* --------------------------------------------------------------------------
   4. Body text
   -------------------------------------------------------------------------- */
#customSlider .uncode_text_column{
  margin:0 auto clamp(22px,3vh,32px) !important;
  max-width:56ch;
}
#customSlider .uncode_text_column p{
  margin:0 auto !important;
  color:rgba(255,255,255,.86) !important;
  font-size:clamp(1rem,1.35vw,1.125rem) !important;
  line-height:1.65 !important;
  text-align:center !important;
  text-shadow:0 1px 14px rgba(0,0,0,.45);
}
#customSlider .uncode_text_column p:last-child{ margin-bottom:0 !important; }
#customSlider .uncode_text_column span,
#customSlider .uncode_text_column strong{ color:inherit !important; }

/* --------------------------------------------------------------------------
   5. Call to action
   A real Uncode button module, so it is genuinely clickable. Restyled to the
   site's existing CTA pill: red, going to white-on-ink on hover.
   -------------------------------------------------------------------------- */
#customSlider .btn-container{
  display:flex !important;
  justify-content:center;
  line-height:0;
}
#customSlider .btn-container a.btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:0;
  margin:0 !important;
  padding:15px 38px !important;
  border:0 !important;
  border-radius:999px !important;
  background:var(--cs-red) !important;
  background-image:none !important;
  color:#fff !important;
  font-family:inherit !important;
  font-size:.78rem !important;
  font-weight:600 !important;
  letter-spacing:.1em !important;
  line-height:1.35 !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  box-shadow:0 10px 28px -12px rgba(0,0,0,.7);
  transition:background .25s var(--cs-ease), color .25s var(--cs-ease),
             transform .25s var(--cs-ease);
}
#customSlider .btn-container a.btn:hover,
#customSlider .btn-container a.btn:focus-visible{
  background:#fff !important;
  color:var(--cs-ink) !important;
  transform:translateY(-2px);
}
#customSlider .btn-container a.btn i,
#customSlider .btn-container a.btn .btn-icon{
  margin:0 !important;
  font-size:1em;
  color:inherit !important;
}
/* Uncode sometimes wraps the label in a span with its own colour */
#customSlider .btn-container a.btn span{ color:inherit !important; }

/* --------------------------------------------------------------------------
   6. Dots
   Uncode markup: .owl-dots > button.owl-dot > span
   -------------------------------------------------------------------------- */
#customSlider .owl-dots{
  position:absolute !important;
  /* Uncode's .owl-dots-align-center centres the strip with
     left:50% + translateX(-50%). Both are neutralised here and the strip is
     stretched edge to edge instead, so flex centring does the work. */
  inset:auto 0 clamp(20px,3.2vh,34px) 0 !important;
  transform:none !important;
  width:auto !important;
  z-index:5;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  line-height:0;
}
#customSlider .owl-dot{
  position:static !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:6px !important;      /* generous tap target around a small dot */
  background:none !important;
  border:0 !important;
  cursor:pointer;
}
#customSlider .owl-dot span{
  display:block !important;
  width:9px !important;
  height:9px !important;
  margin:0 !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.5) !important;
  box-shadow:0 1px 6px rgba(0,0,0,.45);
  opacity:1 !important;
  transition:background .25s var(--cs-ease), transform .25s var(--cs-ease);
}
#customSlider .owl-dot:hover span{ background:rgba(255,255,255,.85) !important; }
#customSlider .owl-dot.active span{
  background:var(--cs-red) !important;
  transform:scale(1.3);
}

/* --------------------------------------------------------------------------
   7. Arrows (only if enabled on the element — styled defensively)
   -------------------------------------------------------------------------- */
#customSlider .owl-nav{ z-index:5; }
#customSlider .owl-nav button{
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(16,18,19,.42) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:#fff !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .25s var(--cs-ease), border-color .25s var(--cs-ease);
}
#customSlider .owl-nav button:hover{
  background:var(--cs-red) !important;
  border-color:var(--cs-red) !important;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:959px){
  #customSlider{ --cs-nav-clear:76px; }
  #customSlider .vc_custom_heading_wrap h2{ max-width:16ch; }
  #customSlider .uncode_text_column{ max-width:48ch; }
}

@media (max-width:767px){
  #customSlider{
    --cs-height:var(--cs-height-sm);
    --cs-nav-clear:64px;
  }
  #customSlider .uncont{
    padding:calc(var(--cs-nav-clear) + 20px) 22px 72px;
  }
  #customSlider .vc_custom_heading_wrap h2{
    font-size:clamp(1.6rem,7vw,2.15rem) !important;
    max-width:15ch;
  }
  #customSlider .uncode_text_column{
    max-width:44ch;            /* keep a comfortable measure on wide phones */
    margin-bottom:24px !important;
  }
  #customSlider .uncode_text_column p{ font-size:.9375rem !important; }
  #customSlider .btn-container a.btn{
    padding:14px 28px !important;
    letter-spacing:.08em !important;
  }
  /* portrait phones crop the sides hard — bias to the centre of the machine */
  #customSlider .tmb img{ object-position:60% center; }
}

/* --------------------------------------------------------------------------
   9. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #customSlider .tmb img,
  #customSlider .btn-container a.btn,
  #customSlider .owl-dot span{ transition:none; }
  #customSlider .uncont:hover .tmb img{ transform:scale(1.02); }
  #customSlider .btn-container a.btn:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   10. Menu skin over the hero
   ** The one section in this file that reaches outside #customSlider. **

   Uncode picks the transparent menu's colour from the skin of the ACTIVE
   SLIDE's column (uncode/library/js/app.js):

       $col = $('.owl-item.index-active .uncol', $slider).first();
       $col.hasClass('style-light')  -> #masthead gets style-light-override
       $col.hasClass('style-dark')   -> #masthead gets style-dark-override

   The slide columns are set to Light, so the logo and nav render dark
   (#303133) and all but disappear over the hero photography.

   The PROPER fix is to set each slide's COLUMN skin to Dark in the builder,
   which is what the old homepage did (uncol style-spec style-dark). This block
   is a stand-in for that. If the skin is ever set correctly, DELETE THIS
   SECTION — it becomes redundant, and leaving both in place means two things
   controlling one colour.

   Guarded three ways:
   - only on a page containing the slider (or page 120817 as a fallback, for
     browsers without :has() — :is() is forgiving, so the list still matches)
   - only while the header is transparent over the hero, NOT once it sticks
     and goes solid, where Uncode's own colours are correct and forcing white
     would give white-on-white
   - the language switcher and the CONTACT US pill are left alone: the first
     is red on the old homepage too, the second is already white on red
   -------------------------------------------------------------------------- */
/* The wordmark is six <path> elements plus a <polygon> for the "T" — target
   every shape, or the T stays dark. */
body:is(.page-id-120817, :has(#customSlider)) #masthead:not(.is_stuck):not(.is-stuck):not(.stuck) .navbar-brand svg :is(path, polygon, rect, circle, ellipse, polyline){
  fill:#fff !important;
}

body:is(.page-id-120817, :has(#customSlider)) #masthead:not(.is_stuck):not(.is-stuck):not(.stuck) #menu-main-menu > li:not(.wpml-ls-item) > a{
  color:#fff !important;
}

/* dropdown arrows / icons inside those links */
body:is(.page-id-120817, :has(#customSlider)) #masthead:not(.is_stuck):not(.is-stuck):not(.stuck) #menu-main-menu > li:not(.wpml-ls-item) > a i{
  color:inherit !important;
}

/* The CONTACT US pill is red in BOTH the over-hero and stuck states, so its
   label must stay white in both — it sits outside the :not(.is_stuck) guard.
   The Customizer rule that builds this pill sets `color:#fff` without
   !important, so Uncode's light-skin rule wins and the label renders dark.
   (Same bug will show on any other page with a light-skin hero — the tidier
   long-term fix is adding !important to that Customizer declaration.) */
@media (min-width:960px){
  body:is(.page-id-120817, :has(#customSlider)) #masthead #menu-main-menu > li#menu-item-87959 > a{
    color:#fff !important;
  }
}

/* mobile burger — the menu is transparent on mobile too */
body:is(.page-id-120817, :has(#customSlider)) #masthead:not(.is_stuck):not(.is-stuck):not(.stuck) .mobile-menu-button i,
body:is(.page-id-120817, :has(#customSlider)) #masthead:not(.is_stuck):not(.is-stuck):not(.stuck) .menu-button-inner{
  color:#fff !important;
}