/* ==========================================================================
   MKRST Child — Innolec
   File: assets/css/header-skin.css
   Purpose: Header variants + sticky behaviour + mobile sheet
   ========================================================================== */

:root {
  --header-h: 3.75rem;
  --header-pad: .9rem;
  --header-ink: #111;
  --header-light:#fff;
  --header-overlay: .35;   /* used by transparent header fade */
}

/* Base header layout ------------------------------------------------------ */
.site-header{
  position:absolute;           /* sits over hero until sticky */
  inset:0 0 auto 0;            /* top:0; left/right:0 */
  z-index:10000;
  width:100%;
  background:transparent;
  color:var(--ink);
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease,
    opacity .25s ease;
}

.site-header .nav-bar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:1rem;
  align-items:center;
  min-block-size:var(--header-h);
  padding-block:var(--header-pad);
  max-inline-size: 100%;
  width: 100%;
}

.site-header .menu{
  display:grid;
  grid-auto-flow:column;
  gap:1.75rem;
  list-style:none;
  margin:0; padding:0;
  justify-content:center;
}
.site-header .menu a{ text-decoration:none; color:inherit; }

/* Brand ------------------------------------------------------------------- */
.site-header .brand a{
  display:inline-flex;
  align-items:center;
  width:160px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
}
.site-header .brand img{
  display:block;
  max-width:100%;
  height:auto;
}

/* Page-level variants (when NOT sticky) ----------------------------------- */
.header--white .site-header:not(.is-sticky){ background:var(--header-light); color:var(--header-ink); }
.header--black .site-header:not(.is-sticky){ background:var(--header-ink); color:var(--header-light); }

html[data-skin="dark"] .header--white .site-header:not(.is-sticky) { background:var(--header-ink); color:var(--header-light); }


.header--transparent .site-header:not(.is-sticky){
  background:transparent;
  color:var(--header-light);
}
.header--transparent .site-header:not(.is-sticky)::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:15vh; z-index:-1;
  background:linear-gradient(to bottom,
              rgba(0,0,0,var(--header-overlay, .35)) 0%,
              rgba(0,0,0,0) 100%);
}

/* Brand invert rules */
.header--transparent .site-header:not(.is-sticky) .brand img { filter: invert(1) brightness(100); }
html[data-skin="dark"] .site-header .brand img { filter: invert(1) brightness(100); }

/* Sticky glass header ------------------------------------------------------ */
.site-header.is-sticky{
  position:fixed;
  top:0; left:0; right:0;
  background:rgba(255,255,255,.8);
  color:var(--header-ink);
}

.site-header.is-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                          /* behind */
  pointer-events: none;
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  backdrop-filter: blur(8px) saturate(180%);
  background: var(--header-h);
}

.site-header > * {
  position: relative;
  z-index: 1;
}


.site-header.is-sticky .brand img{ filter:none; }

/* Dark skin + sticky */
html[data-skin="dark"] .site-header.is-sticky{
  background:rgba(16,16,18,.9);
  color:var(--header-light);
}

/* CTA sizing */
.site-header .nav-cta .btn{ padding:.6rem .95rem; }

/* Entry animation for delayed sticky (used by JS: .sticky-hold) ----------- */
#site-header { transform:translateY(0); opacity:1; }
#site-header.sticky-hold { transform:translateY(-100%); opacity:0; }
#site-header.is-sticky     { transform:translateY(0);    opacity:1; }