.site-header{position:absolute;inset:0 0 auto;z-index:999;height:88px;display:flex;align-items:center;transition:background-color .3s ease}
.site-header.scrolled{background:rgba(10,10,12,.28)}
.header-inner{height:88px;display:grid;grid-template-columns:210px minmax(560px,1fr) 245px;align-items:center;gap:28px}
.brand{display:flex;align-items:center;justify-self:start}.brand img{width:160px;height:auto;display:block}
.nav{justify-self:center;width:100%;max-width:785px}
.nav>ul{display:flex;align-items:center;justify-content:center;gap:4px;list-style:none;margin:0;padding:6px 12px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(24,24,27,.76);box-shadow:inset 0 1px rgba(255,255,255,.035),0 12px 34px rgba(0,0,0,.14);backdrop-filter:blur(8px)}
.nav a,.nav button{position:relative;font-size:.91rem;line-height:1;color:#d9d9dd;background:transparent;border:0;cursor:pointer;padding:12px 13px;border-radius:7px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:color .22s ease,background-color .22s ease,transform .22s ease}
.nav a:hover,.nav button:hover{color:var(--orange);background:rgba(255,102,0,.075);transform:translateY(-1px)}
.nav a.active,.nav button.active{color:var(--orange);background:rgba(255,102,0,.10)}
.nav a.active:after,.nav button.active:after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1px;background:var(--orange);opacity:.9;transform:scaleX(1);transform-origin:center}
.nav-item{position:relative}
.dropdown{position:absolute;top:calc(100% + 10px);left:-8px;min-width:235px;background:rgba(20,20,23,.96);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px) scale(.985);transform-origin:top left;transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;box-shadow:0 20px 48px rgba(0,0,0,.34)}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s}
.dropdown a{display:block;padding:11px 12px;border-radius:6px;line-height:1.25;transition:background-color .18s ease,color .18s ease,transform .18s ease}
.dropdown a:hover,.dropdown a.active{background:rgba(255,102,0,.10);color:var(--orange);transform:translateX(2px)}
.header-actions{justify-self:end;display:flex;align-items:center;gap:18px}.header-actions .btn{min-height:48px;padding:12px 24px;border-radius:10px}.login-link{font-size:.91rem;color:#e3e3e5;padding:11px 2px;transition:color .2s ease}.login-link:hover{color:var(--orange)}
.menu-toggle{display:none;margin-left:auto;width:42px;height:42px;border-radius:8px;border:1px solid var(--line);background:#19191d;color:white;transition:border-color .2s ease,background-color .2s ease}.menu-toggle:hover{border-color:rgba(255,102,0,.55);background:rgba(255,102,0,.08)}.menu-toggle span{display:block;width:18px;height:2px;background:currentColor;margin:4px auto;transition:transform .22s ease,opacity .22s ease}.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1230px){.header-inner{grid-template-columns:175px minmax(520px,1fr) 220px;gap:18px}.brand img{width:148px}.nav a,.nav button{padding-inline:10px}.header-actions{gap:12px}.header-actions .btn{padding-inline:18px}}
@media(max-width:1080px){.site-header,.header-inner{height:74px}.header-inner{display:flex}.nav{position:fixed;inset:82px 14px auto 14px;width:auto;max-width:none;background:rgba(23,23,26,.97);border:1px solid var(--line);border-radius:10px;padding:14px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.99);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;max-height:calc(100vh - 96px);overflow:auto}.nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}.nav>ul{display:block;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none}.nav a,.nav button{display:flex;width:100%;text-align:left;padding:12px}.dropdown{position:static;min-width:0;opacity:1;visibility:visible;pointer-events:auto;transform:none;max-height:0;overflow:hidden;padding:0 8px;margin:0;background:#111113;border:0;box-shadow:none;transition:max-height .28s ease,margin .28s ease,padding .28s ease}.nav-item.open .dropdown{max-height:280px;margin:5px 0 8px;padding:8px}.menu-toggle{display:block}.header-actions{margin-left:auto}.header-actions .login-link{display:none}.header-actions .btn{padding-inline:16px}}
@media(max-width:560px){.site-header,.header-inner{height:64px}.brand img{width:134px}.header-actions .btn{display:none}.header-inner{gap:9px}.nav{inset:72px 12px auto 12px}}
/* =========================================================
   MOBILE HEADER — RIGHT MENU BUTTON + LARGER LOGO
   ========================================================= */

@media (max-width: 980px) {
  .site-header .container,
  .header-inner,
  .navbar {
    position: relative;
  }

  /* Make the logo slightly larger */
  .site-logo,
  .header-logo,
  .site-header .logo img,
  .site-header img[alt*="Clickronix"] {
    width: 160px !important;
    max-width: 160px !important;
    height: auto !important;
  }

  /* Push menu toggle fully to the right */
  .menu-toggle,
  .mobile-menu-toggle,
  .nav-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    left: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 1002;
  }

  /* Keep header content using the full available width */
  .site-header .container,
  .header-inner,
  .navbar {
    width: 110%;
    max-width: none;
    padding-left: 18px;
    padding-right: 18px;
  }
}