/* =========================================================
   HOSTINGER HEADER LOGO HOTFIX V4
   Goal: make the header logo match the wide desktop reference
   and bust stale cache with a new file loaded after main CSS.
   ========================================================= */

:root{
  --headerH: 126px !important;
}

.siteHeader{
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important;
  box-shadow:none !important;
}

.headerInner{
  width:100% !important;
  max-width:1320px !important;
  min-height:126px !important;
  margin:0 auto !important;
  padding:0 18px !important;
  display:grid !important;
  grid-template-columns:minmax(290px, 312px) 1fr auto !important;
  align-items:center !important;
  gap:clamp(18px, 2.6vw, 36px) !important;
}

.headerLogo{
  display:flex !important;
  align-items:center !important;
  align-self:stretch !important;
  min-height:126px !important;
  padding:0 28px 0 0 !important;
  border-right:0 !important;
  z-index:1001 !important;
}

.headerLogo a{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
}

.brandLogo,
.brandLogo.brandLogo--hostfix{
  width:290px !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
}

.headerNav{
  display:flex !important;
  justify-content:center !important;
  gap:28px !important;
}

.headerNav a{
  font-size:18px !important;
  font-weight:600 !important;
}

.headerCtas{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

.headerPortalLink{
  white-space:nowrap !important;
}

@media (max-width: 1280px){
  :root{ --headerH: 118px !important; }

  .headerInner{
    min-height:118px !important;
    grid-template-columns:minmax(260px, 288px) 1fr auto !important;
    gap:22px !important;
    padding:0 16px !important;
  }

  .headerLogo{
    min-height:118px !important;
    padding:0 24px 0 0 !important;
  }

  .brandLogo,
  .brandLogo.brandLogo--hostfix{
    width:252px !important;
  }

  .headerNav{
    gap:18px !important;
  }

  .headerNav a{
    font-size:16px !important;
    padding:8px 10px !important;
  }

  .headerPortalLink{
    font-size:14px !important;
  }
}

@media (max-width: 1100px){
  :root{ --headerH: 88px !important; }

  .headerInner{
    min-height:88px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:12px !important;
    padding:8px 16px !important;
  }

  .headerLogo{
    min-height:72px !important;
    padding:0 !important;
    border-right:0 !important;
  }

  .brandLogo,
  .brandLogo.brandLogo--hostfix{
    width:214px !important;
  }

  .headerNav,
  .headerCtas{
    display:none !important;
  }

  .mobileMenuToggle{
    display:flex !important;
    justify-self:end !important;
  }
}

@media (max-width: 768px){
  :root{ --headerH: 76px !important; }

  .headerInner{
    min-height:76px !important;
    padding:8px 14px !important;
  }

  .brandLogo,
  .brandLogo.brandLogo--hostfix{
    width:182px !important;
  }
}

@media (max-width: 480px){
  :root{ --headerH: 68px !important; }

  .headerInner{
    min-height:68px !important;
    padding:6px 14px !important;
  }

  .brandLogo,
  .brandLogo.brandLogo--hostfix{
    width:156px !important;
  }
}