/* Smart Header v1.2.0 — Hostinger-style refined */
.vl-sh {
  position: relative;
  z-index: 1000;
  width: 100%;
  box-sizing: border-box;
  background: var(--sh-bg);
  color: var(--sh-text);
  border-bottom: 0 solid transparent; /* default no border */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vl-sh--translucent {
  background: color-mix(in oklab, var(--sh-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--sh-outline);
}

.vl-sh__inner {
  height: var(--sh-height);
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | nav | actions */
  align-items: center;
  gap: 20px;
  padding: 0 clamp(16px, 3vw, 40px);
  width: 100%;
  max-width: none; /* full-bleed */
  margin: 0;
}

/* logo */
.vl-sh__logo { display:flex; align-items:center; min-width:140px; }
.vl-sh__logo a{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--sh-text); }
.vl-sh__logo img{ max-height: 30px; width:auto; display:block; }

/* nav */
.vl-sh__nav { display:flex; gap: clamp(18px, 3vw, 36px); align-items:center; justify-content:center; }
.vl-sh__nav .menu-item { list-style:none; }
.vl-sh__nav a{
  position:relative;
  color: var(--sh-link);
  text-decoration:none;
  font-weight: 600;
  line-height: 1;
  padding: 10px 0;
  transition: color .2s ease;
}
.vl-sh__nav a:hover { color: var(--sh-link-hover); }
.vl-sh__nav a::after{
  content:"";
  position:absolute; left: 0; right: 0; bottom: 4px;
  height: 2px; border-radius: 2px;
  background: var(--sh-outline);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}
.vl-sh__nav a:hover::after{ transform: scaleX(1); }

/* actions (right) */
.vl-sh__actions{ display:flex; align-items:center; justify-content:flex-end; gap:12px; min-width:140px; }
.vl-sh__btn {
  background: var(--sh-button-bg);
  color: var(--sh-button-text);
  border: 1px solid var(--sh-outline);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .2px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 20px rgba(0,0,0,.18);
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.vl-sh__btn:hover{ filter: brightness(.96); }

/* hamburger */
.vl-sh__hamburger{
  display:none;
  width: 40px; height: 40px;
  align-items:center; justify-content:center;
  border-radius: 12px;
  border: 1px solid var(--sh-outline);
  background: transparent;
  color: var(--sh-hamburger);
}
.vl-sh__hamburger svg{ width: 22px; height: 22px; }

/* drawer */
.vl-sh__drawer {
  display:none;
  position:absolute; left:0; right:0; top:100%;
  background: var(--sh-bg);
  border-top: 1px solid var(--sh-outline);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.vl-sh__drawer ul{ margin:0; padding: 8px clamp(16px, 3vw, 40px); }
.vl-sh__drawer li{ list-style:none; padding: 14px 4px; border-bottom: 1px solid var(--sh-outline); }
.vl-sh__drawer a{ display:block; color: var(--sh-link); text-decoration:none; font-weight:700; }
.vl-sh__drawer a:hover{ color: var(--sh-link-hover); }

/* sticky */
.vl-sh.is-sticky { position: sticky; top:0; }
.vl-sh.is-sticky::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: var(--sh-outline);
  opacity:.6;
}
.vl-sh[data-anim="drop"]{ transform: translateY(-100%); transition: transform .24s ease; }
.vl-sh[data-anim="drop"].is-stuck{ transform: translateY(0); }
.vl-sh[data-anim="fade"]{ opacity: .92; transition: opacity .2s ease; }
.vl-sh[data-anim="fade"].is-stuck{ opacity: 1; }
.vl-sh[data-anim="slide"]{ transform: translateY(-12px); transition: transform .2s ease; }
.vl-sh[data-anim="slide"].is-stuck{ transform: translateY(0); }
.vl-sh[data-anim="scale"]{ transform: scale(.99); transition: transform .2s ease; }
.vl-sh[data-anim="scale"].is-stuck{ transform: scale(1); }

/* responsive */
@media (max-width: 1024px){
  .vl-sh__nav{ display:none; }
  .vl-sh__hamburger{ display:flex; }
  .vl-sh__drawer{ display:none; }
  .vl-sh__drawer.is-open{ display:block; }
}

/* Utility to kill any unexpected top white line from theme */
.vl-sh,
.vl-sh *,
.vl-sh *::before,
.vl-sh *::after { box-sizing: border-box; }