/* ============================================================
   MyTrafficBuzz — Header

   The utility top bar and the sticky site header, including the
   primary navigation, its dropdowns and the mobile drawer.

   Part of the split of the former single style.css (20-Aug-2026).
   Load order matters: see the <link> block in any page head, and
   keep this file in that same position when adding rules.
   ============================================================ */

/* ---------- top bar ---------- */
.topbar{background:var(--bk);color:var(--wh);padding:7px 0;font-size:13px;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.topbar__contact{display:flex;gap:20px;align-items:center}
.topbar__contact a{color:rgba(255,255,255,.8);display:inline-flex;align-items:center}
.topbar__contact a:hover{color:var(--gold)}
.topbar__social{display:flex;gap:8px}
.topbar__social a{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.07);transition:var(--t)}
.topbar__social a:hover{background:var(--acc);transform:translateY(-1px)}


/* ---------- header (glass) ---------- */
.site-header{background:rgba(7,15,31,.9);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);position:sticky;top:0;z-index:1000;transition:var(--t);border-bottom:none}
.site-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hairline);opacity:.55;pointer-events:none}
.site-header.scrolled{background:rgba(6,13,27,.88);box-shadow:0 10px 34px rgba(4,10,22,.42)}
.site-header .container{display:flex;justify-content:space-between;align-items:center;padding-top:10px;padding-bottom:10px;max-width:1320px}
.site-header__logo{display:flex;align-items:center;flex-shrink:0;margin-right:20px}
.site-header__logo img{height:56px;width:auto;max-width:250px;object-fit:contain;display:block}
.primary-nav{display:flex;align-items:center;gap:2px}
.primary-nav>a,.primary-nav__dropdown>.primary-nav__trigger{position:relative;padding:10px 14px;font-weight:500;font-size:15px;color:rgba(255,255,255,.86);border-radius:0;transition:var(--t);cursor:pointer;background:0 0;border:none;font-family:inherit;display:flex;align-items:center;gap:5px;white-space:nowrap}
.primary-nav>a::after,.primary-nav__dropdown>.primary-nav__trigger::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;border-radius:2px}
.primary-nav>a:hover,.primary-nav__dropdown:hover>.primary-nav__trigger{color:#fff;background:none}
.primary-nav>a:hover::after,.primary-nav__dropdown:hover>.primary-nav__trigger::after{transform:scaleX(1)}
.primary-nav__dropdown{position:relative}
.primary-nav__menu{position:absolute;top:calc(100% + 10px);left:0;min-width:280px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-radius:14px;box-shadow:var(--shh);padding:8px;opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:top left;transition:var(--t);z-index:100;border:1px solid rgba(228,234,244,.9)}
.primary-nav__dropdown:hover .primary-nav__menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.primary-nav__menu a{display:block;padding:10px 14px;font-size:14px;color:var(--txt);font-weight:500;border-radius:9px}
.primary-nav__menu a:hover{background:rgba(226,58,78,.07);color:var(--acc);padding-left:18px}
.site-header__menu-toggle{display:none;background:0 0;border:none;cursor:pointer;padding:8px}
.site-header__menu-toggle span{display:block;width:24px;height:2px;background:var(--wh);margin:6px 0;border-radius:2px;transition:var(--t)}

/* header actions (search + quote CTA + theme toggle) */
.site-header__actions{display:flex;align-items:center;gap:10px;margin-left:14px;flex-shrink:0}
.site-header__search{display:flex;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:11px;overflow:hidden;transition:var(--t)}
.site-header__search:focus-within{background:rgba(255,255,255,.13);border-color:rgba(244,182,63,.5)}
.site-header__search input{width:110px;padding:9px 0 9px 12px;border:none;background:transparent;color:#fff;font-family:inherit;font-size:13px;transition:width .3s ease;outline:none}
.site-header__search input::placeholder{color:rgba(255,255,255,.5)}
.site-header__search:focus-within input{width:180px}
.site-header__search button{background:none;border:none;cursor:pointer;padding:9px 11px;display:flex;align-items:center}


.site-header__cta{display:inline-flex;align-items:center;padding:10px 20px;background:var(--g2);color:#fff!important;font-weight:600;font-size:14px;border-radius:11px;white-space:nowrap;box-shadow:0 4px 16px rgba(226,58,78,.38);position:relative;overflow:hidden}
.site-header__cta::before{content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .5s ease}
.site-header__cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(226,58,78,.5)}
.site-header__cta:hover::before{left:120%}