/* =========================================================
   CALCULAXY — HEADER STYLESHEET
   Site header, main navigation, categories dropdown, mobile menu
   ========================================================= */

.site-header{
  background:var(--white);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
.header-inner{display:flex;align-items:center;gap:28px;height:72px;}

.logo{display:flex;align-items:center;flex-shrink:0;}
.logo-mark{font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-0.01em;}
.logo-accent{color:var(--primary);}
.logo-img{height:34px;width:auto;display:block;}

.main-nav{flex:1;}
.main-nav > ul{
  list-style:none;display:flex;gap:28px;margin:0;padding:0;
}
.main-nav > ul > li > a{font-weight:600;font-size:15px;color:var(--ink);padding:8px 0;display:inline-block;}
.main-nav > ul > li > a:hover{color:var(--primary);}

.has-dropdown{position:relative;}
.dropdown{
  display:none;position:absolute;top:100%;left:0;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:8px;min-width:200px;box-shadow:var(--shadow-sm);
}
.has-dropdown:hover .dropdown,
.has-dropdown.open .dropdown{display:block;}
.dropdown li a{display:block;padding:9px 12px;border-radius:6px;font-weight:600;font-size:14px;color:var(--slate);}
.dropdown li a:hover{background:var(--primary-tint);color:var(--primary-dark);}

.header-search{
  display:flex;align-items:center;border:1px solid var(--border);border-radius:999px;
  padding:6px 6px 6px 16px;background:var(--surface);
}
.header-search input{border:none;background:transparent;outline:none;font-family:inherit;font-size:14px;width:180px;color:var(--ink);}
.header-search button{
  border:none;background:var(--primary);color:var(--white);width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.header-search button:hover{background:var(--primary-dark);}

.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0;}
.menu-toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px;}

/* ============ RESPONSIVE (mobile header + nav) ============ */
@media (max-width:720px){
  .header-inner{justify-content:space-between;}
  .header-search{display:none;}

  .main-nav{
    position:fixed;top:72px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--border);
    max-height:0;overflow:hidden;overflow-y:auto;transition:max-height .25s ease;flex:none;
  }
  .main-nav.open{max-height:calc(100vh - 72px);}
  .main-nav > ul{flex-direction:column;gap:0;padding:8px 24px 16px;}
  .main-nav > ul > li > a{display:block;padding:12px 0;}

  .dropdown{position:static;border:none;box-shadow:none;padding:0 0 0 12px;min-width:0;}

  .menu-toggle{display:flex;margin-left:auto;}
}

.header-search-wrap{position:relative}.search-suggestions{display:none;position:absolute;top:calc(100% + 8px);right:0;width:min(420px,90vw);background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.12);overflow:hidden;z-index:100}.search-suggestions.show{display:block}.search-suggestions a{display:block;padding:12px 14px;border-bottom:1px solid #f0f2f5;color:inherit;text-decoration:none}.search-suggestions a:last-child{border:0}.search-suggestions a:hover{background:#f7fbff}.search-suggestions strong,.search-suggestions span{display:block}.search-suggestions span{font-size:.8rem;color:#667085;margin-top:3px}.search-suggestions .no-match{padding:14px;color:#667085}@media(max-width:900px){.header-search-wrap{position:static}.search-suggestions{right:16px;left:16px;width:auto;top:72px}}