/*
 * METALKISTE V12 HEADER
 * Major architectural change:
 * Header is transparent and overlays the homepage hero.
 * Header + hero therefore read as ONE visual masthead, like the approved mockup.
 */

body.mk-v6 .mk12-header{
  position:absolute;
  inset:0 0 auto 0;
  z-index:9000;
  width:100%;
  color:#fff;
  background:transparent;
}

body.mk-v6 .mk12-topline{
  position:relative;
  width:100%;
  height:205px;
  background:linear-gradient(180deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.48) 66%,rgba(0,0,0,.08) 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
}

body.mk-v6 .mk12-brand{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:min(670px,48vw);
  height:198px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

body.mk-v6 .mk12-brand img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.95));
}

body.mk-v6 .mk12-socials{
  position:absolute;
  left:24px;
  top:23px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:15px;
}

body.mk-v6 .mk12-socials a{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  color:#fff!important;
  opacity:.95;
  transition:.15s;
}

body.mk-v6 .mk12-socials a:hover{
  color:var(--mk-red)!important;
  transform:translateY(-1px);
}

body.mk-v6 .mk12-socials svg{
  width:17px;
  height:17px;
  fill:currentColor;
}

body.mk-v6 .mk12-tools{
  position:absolute;
  right:24px;
  top:20px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:12px;
}

body.mk-v6 .mk12-search{
  display:flex;
  margin:0;
}

body.mk-v6 .mk12-search input{
  width:177px;
  height:37px;
  margin:0;
  padding:0 12px;
  background:rgba(5,5,5,.88);
  border:1px solid #262626;
  border-right:0;
  color:#eee;
  outline:0;
  font-size:12px;
}

body.mk-v6 .mk12-search button{
  width:39px;
  height:37px;
  margin:0;
  padding:0;
  border:1px solid #262626;
  background:rgba(5,5,5,.88);
  color:#fff;
  cursor:pointer;
}

body.mk-v6 .mk12-live{
  min-width:155px;
  height:37px;
  padding:0 15px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #ed443b;
  border-radius:2px;
  background:linear-gradient(#df3028,#b71c16);
  color:#fff!important;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 0 22px rgba(215,39,32,.22);
}

body.mk-v6 .mk12-navrow{
  position:relative;
  width:100%;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(5,5,5,.74);
  border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(2px);
}

body.mk-v6 .mk12-nav{
  height:48px;
}

body.mk-v6 .mk12-menu{
  height:48px;
  margin:0;
  padding:0;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:2px;
  list-style:none;
}

body.mk-v6 .mk12-menu>li{
  position:relative;
  margin:0;
  padding:0;
}

body.mk-v6 .mk12-menu>li>a{
  position:relative;
  height:48px;
  padding:0 17px;
  display:flex;
  align-items:center;
  color:#f4f4f4!important;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none!important;
  white-space:nowrap;
}

body.mk-v6 .mk12-menu>li>a:hover,
body.mk-v6 .mk12-menu>li.current-menu-item>a,
body.mk-v6 .mk12-menu>li.current-menu-ancestor>a{
  color:var(--mk-red)!important;
}

body.mk-v6 .mk12-menu>li>a:after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:2px;
  background:var(--mk-red);
  transform:scaleX(0);
  transition:.15s;
}

body.mk-v6 .mk12-menu>li:hover>a:after,
body.mk-v6 .mk12-menu>li.current-menu-item>a:after,
body.mk-v6 .mk12-menu>li.current-menu-ancestor>a:after{
  transform:scaleX(1);
}

body.mk-v6 .mk12-menu>li.menu-item-has-children>a{
  padding-right:31px;
}

body.mk-v6 .mk12-menu>li.menu-item-has-children>a:before{
  content:"▾";
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-53%);
  font-size:8px;
  color:#8a8a8a;
}

body.mk-v6 .mk12-nav .sub-menu{
  position:absolute;
  z-index:99999;
  left:0;
  top:48px;
  width:245px;
  margin:0;
  padding:5px 0;
  list-style:none;
  background:#0e0e0e;
  border:1px solid #292929;
  border-top:2px solid var(--mk-red);
  box-shadow:0 20px 45px rgba(0,0,0,.88);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:.14s;
}

body.mk-v6 .mk12-nav li:hover>.sub-menu,
body.mk-v6 .mk12-nav li:focus-within>.sub-menu{
  opacity:1;
  visibility:visible;
  transform:none;
}

body.mk-v6 .mk12-nav .sub-menu li{
  position:relative;
}

body.mk-v6 .mk12-nav .sub-menu a{
  display:block;
  padding:11px 14px;
  color:#ddd!important;
  background:#0e0e0e;
  border-bottom:1px solid #202020;
  font-size:11px;
  font-weight:700;
  text-decoration:none!important;
}

body.mk-v6 .mk12-nav .sub-menu a:hover{
  color:#fff!important;
  background:#1a1a1a;
}

body.mk-v6 .mk12-nav .sub-menu .sub-menu{
  left:100%;
  top:-2px;
}

body.mk-v6 .mk12-menu-toggle{
  display:none;
}

/* ===== The crucial V12 change: hero starts at top of viewport behind header ===== */
body.mk-v6 .mk6-hero{
  min-height:490px!important;
  margin-top:0!important;
  border-bottom:1px solid #262626;
  background:#070707;
}

body.mk-v6 .mk6-hero:before{
  background-size:auto 112%,auto 112%!important;
  background-position:left center,left center!important;
}

body.mk-v6 .mk6-hero:after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.03) 38%,rgba(0,0,0,.18) 100%),
    radial-gradient(circle at 22% 56%,rgba(215,39,32,.25),transparent 36%),
    linear-gradient(90deg,transparent 28%,rgba(0,0,0,.18) 48%,rgba(0,0,0,.82) 77%,rgba(0,0,0,.96) 100%)!important;
}

body.mk-v6 .mk6-hero-inner{
  min-height:490px!important;
  padding-top:253px;
  padding-bottom:18px;
  align-items:center!important;
}

body.mk-v6 .mk6-hero-copy{
  padding-left:30px;
  transform:translateY(-8px);
}

body.mk-v6 .mk6-kicker{
  font-size:clamp(31px,3.15vw,48px);
}

body.mk-v6 .mk6-title{
  font-size:clamp(52px,5vw,76px);
}

/* V11 stylesheet, if cached, cannot influence the V12 markup. */
body.mk-v6 .mk11-header,
body.mk-v6 .mk11-stage,
body.mk-v6 .mk11-navband{
  display:none!important;
}

@media(max-width:1120px){
  body.mk-v6 .mk12-brand{width:550px}
  body.mk-v6 .mk12-search{display:none}
  body.mk-v6 .mk12-menu>li>a{padding-left:12px;padding-right:12px;font-size:10px}
  body.mk-v6 .mk12-menu>li.menu-item-has-children>a{padding-right:24px}
}

@media(max-width:760px){
  body.mk-v6 .mk12-header{position:absolute}
  body.mk-v6 .mk12-topline{height:126px}
  body.mk-v6 .mk12-brand{top:4px;width:min(400px,73vw);height:118px}
  body.mk-v6 .mk12-socials{left:10px;top:10px;gap:5px}
  body.mk-v6 .mk12-socials a{width:24px;height:25px}
  body.mk-v6 .mk12-socials a:nth-child(n+4){display:none}
  body.mk-v6 .mk12-tools{right:10px;top:10px}
  body.mk-v6 .mk12-tools>*{display:none!important}

  body.mk-v6 .mk12-navrow{
    height:47px;
    justify-content:flex-start;
    padding:0 12px;
    background:rgba(5,5,5,.94);
  }

  body.mk-v6 .mk12-menu-toggle{
    display:flex;
    height:47px;
    align-items:center;
    padding:0;
    border:0;
    background:none;
    color:#fff;
    font-weight:900;
    text-transform:uppercase;
    cursor:pointer;
  }

  body.mk-v6 .mk12-nav{
    display:none;
    position:absolute;
    left:12px;
    right:12px;
    top:47px;
    height:auto;
    background:#0b0b0b;
    border:1px solid #292929;
    border-top:2px solid var(--mk-red);
    box-shadow:0 18px 42px rgba(0,0,0,.9);
  }

  body.mk-v6 .mk12-nav.is-open{display:block}
  body.mk-v6 .mk12-menu{height:auto;display:block}
  body.mk-v6 .mk12-menu>li{border-bottom:1px solid #222}

  body.mk-v6 .mk12-menu>li>a{
    height:auto;
    min-height:44px;
    padding:0 45px 0 14px;
    font-size:11px;
  }

  body.mk-v6 .mk12-menu>li>a:after{display:none}

  body.mk-v6 .mk12-nav .sub-menu,
  body.mk-v6 .mk12-nav .sub-menu .sub-menu{
    position:static;
    display:none;
    width:auto;
    opacity:1;
    visibility:visible;
    transform:none;
    border:0;
    border-top:1px solid #222;
    box-shadow:none;
    background:#131313;
  }

  body.mk-v6 .mk12-nav li.submenu-open>.sub-menu{display:block}
  body.mk-v6 .mk12-nav .sub-menu a{padding-left:26px}

  body.mk-v6 .mk6-hero{min-height:455px!important}
  body.mk-v6 .mk6-hero-inner{
    min-height:455px!important;
    padding-top:173px;
    align-items:end!important;
  }
  body.mk-v6 .mk6-hero-copy{
    padding:90px 0 30px!important;
    transform:none;
  }
}