/* ============================================================================
   HEADER ENTERPRISE — gearmotors.net
   Three-band B2B header: topbar (contacts + language) / masthead (logo, search,
   actions) / navbar (primary sections). Structure follows the Grundfos B2B
   portal (pumps.tecnicaindustriale.com), palette is Innomotics petrol/teal so
   it sits on top of the existing design system without a cascade restyle.

   Loaded AFTER redesign.css. Uses its own `gm-` namespace, so none of the
   legacy `.nav-modern` rules in style.min.css apply to it — the only legacy
   class deliberately kept in the markup is `nav-modern__badge`, because
   main.js and widgets.php drive the quote counter through it.

   Tokens come from design-system.css; literals are only used where a fallback
   must survive that file failing to load.
   ============================================================================ */

/* ---------------------------------------------------------------- shell --- */
.gm-head {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--c-petrol-700, #00646e);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 6px 24px rgba(0, 30, 35, .10);
}

.gm-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* -------------------------------------------------------------- topbar --- */
.gm-topbar {
    background: var(--c-petrol-900, #003b42);
    color: rgba(255, 255, 255, .72);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1;
}

.gm-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 38px;
}

.gm-topbar__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-topbar__right {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: none;
}

.gm-topbar a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .18s ease;
}

.gm-topbar a:hover { color: #fff; }

.gm-ico {
    width: 15px;
    height: 15px;
    flex: none;
    opacity: .85;
}

/* language pills */
.gm-lang {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
}

.gm-lang a {
    padding: 5px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .62);
}

.gm-lang a:hover { background: rgba(255, 255, 255, .10); color: #fff; }

.gm-lang a.is-active {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* ------------------------------------------------------------ masthead --- */
.gm-mast__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 78px;
}

.gm-logo {
    flex: none;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.gm-logo img {
    height: 38px;
    width: auto;
    display: block;
    /* the asset is a dark wordmark; invert it onto the petrol band */
    filter: brightness(0) invert(1);
}

/* search ------------------------------------------------------------------ */
.gm-search {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

.gm-search__field {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
}

.gm-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 13px 18px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14.5px;
    color: var(--c-ink-900, #0e1b22);
    background: transparent;
}

.gm-search input::placeholder { color: #93a2a8; }

.gm-search__btn {
    flex: none;
    width: 56px;
    border: 0;
    cursor: pointer;
    background: var(--c-mint-500, #00c896);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .18s ease;
}

.gm-search__btn:hover { background: var(--c-mint-600, #00a67d); }
.gm-search__btn svg { width: 19px; height: 19px; }

.gm-search__results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--c-line, #e3e9ec);
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(0, 30, 35, .18);
    max-height: 380px;
    overflow-y: auto;
    z-index: 120;
}

/* actions ----------------------------------------------------------------- */
.gm-acts {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gm-act {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 62px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: 5px;
    color: rgba(255, 255, 255, .88);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.gm-act:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.gm-act svg { width: 21px; height: 21px; }

.gm-act--cta {
    flex-direction: row;
    gap: 9px;
    margin-left: 10px;
    padding: 13px 22px;
    background: var(--c-mint-500, #00c896);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 2px 10px rgba(0, 200, 150, .28);
}

.gm-act--cta:hover { background: var(--c-mint-600, #00a67d); }

/* counters (legacy class name kept: main.js / widgets.php drive it) */
.gm-act .nav-modern__badge,
.gm-act .gm-count {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: #d1435b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(209, 67, 91, .45);
    pointer-events: none;
}

.gm-act--cta .nav-modern__badge {
    position: static;
    display: inline-block;
    background: rgba(0, 0, 0, .22);
    box-shadow: none;
}

/* hamburger --------------------------------------------------------------- */
.gm-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.gm-burger span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
}

.gm-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gm-burger.is-open span:nth-child(2) { opacity: 0; }
.gm-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------- navbar --- */
.gm-nav {
    background: var(--c-petrol-800, #004e58);
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.gm-nav__inner {
    display: flex;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.gm-nav__inner::-webkit-scrollbar { display: none; }

.gm-nav a,
.gm-nav button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 18px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .82);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.gm-nav a svg,
.gm-nav button svg { width: 17px; height: 17px; opacity: .9; }

.gm-nav a:hover,
.gm-nav button:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.gm-nav .is-active,
.gm-nav button[aria-expanded="true"] {
    color: #fff;
    border-bottom-color: var(--c-mint-500, #00c896);
}

.gm-nav__chev { width: 11px !important; height: 11px !important; margin-left: -3px; }

/* ------------------------------------------------------------ mega menu --- */
.gm-mega {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--c-line, #e3e9ec);
    box-shadow: 0 24px 48px rgba(0, 30, 35, .16);
    z-index: 999;
}

.gm-mega.is-open { display: block; }

.gm-mega__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 4px;
    padding: 24px 0 10px;
}

.gm-mega__card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 7px;
    text-decoration: none;
    transition: background-color .16s ease;
}

.gm-mega__card:hover { background: var(--c-petrol-50, #eefafb); }

.gm-mega__ico {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-petrol-100, #d7f2f5);
    color: var(--c-petrol-700, #00646e);
}

.gm-mega__ico svg { width: 20px; height: 20px; }

.gm-mega__card h4 {
    margin: 0 0 3px;
    font-family: 'Barlow Condensed', 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--c-ink-900, #0e1b22);
}

/* product count — listings always show how much is behind them */
.gm-mega__n {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: 9px;
    background: var(--c-petrol-50, #eefafb);
    color: var(--c-petrol-700, #00646e);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 600;
    vertical-align: middle;
}

.gm-drawer__sub .gm-mega__n { margin-left: auto; }

.gm-mega__card p {
    margin: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--c-slate-500, #7c8b92);
}

.gm-mega__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 0 22px;
    border-top: 1px solid var(--c-line, #e3e9ec);
    margin-top: 10px;
}

.gm-mega__foot a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-petrol-700, #00646e);
    text-decoration: none;
}

.gm-mega__foot a:hover { text-decoration: underline; }
.gm-mega__foot svg { width: 16px; height: 16px; }

/* ---------------------------------------------------- search result rows --- */
.gm-res {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--c-surface-3, #eef2f4);
    text-decoration: none;
}

.gm-res:last-child { border-bottom: 0; }
.gm-res:hover { background: var(--c-petrol-50, #eefafb); }

.gm-res strong {
    display: block;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink-900, #0e1b22);
}

.gm-res span {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
    color: var(--c-slate-500, #7c8b92);
}

.gm-res svg { width: 15px; height: 15px; color: var(--c-slate-400, #9fabb1); flex: none; }

.gm-res--empty {
    padding: 16px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13.5px;
    color: var(--c-slate-500, #7c8b92);
}

/* -------------------------------------------------------------- drawer --- */
.gm-drawer {
    display: none;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 380px);
    background: #fff;
    box-shadow: -20px 0 50px rgba(0, 30, 35, .22);
    z-index: 1200;
    overflow-y: auto;
    padding: 18px 20px 40px;
}

.gm-drawer.is-open { display: block; }

.gm-drawer__scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(3, 25, 30, .48);
    z-index: 1100;
}

.gm-drawer__scrim.is-open { display: block; }

.gm-drawer a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 6px;
    border-bottom: 1px solid var(--c-surface-3, #eef2f4);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--c-ink-900, #0e1b22);
    text-decoration: none;
}

.gm-drawer a svg { width: 18px; height: 18px; color: var(--c-petrol-700, #00646e); }
.gm-drawer a.gm-drawer__sub { padding-left: 18px; font-size: 14px; color: var(--c-ink-700, #29404a); }

.gm-drawer__label {
    margin: 20px 0 4px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--c-slate-500, #7c8b92);
}

.gm-drawer__cta {
    justify-content: center;
    margin-top: 22px;
    border: 0 !important;
    border-radius: 5px;
    background: var(--c-mint-500, #00c896);
    color: #fff !important;
    font-weight: 700 !important;
}

.gm-drawer__cta svg { color: #fff !important; }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
    .gm-act__lbl { display: none; }
    .gm-act { min-width: 46px; }
}

@media (max-width: 900px) {
    .gm-topbar__tag { display: none; }
    .gm-topbar__inner { justify-content: flex-end; }
    .gm-nav { display: none; }
    .gm-burger { display: flex; }
    .gm-mast__inner { height: 66px; gap: 14px; }
    .gm-logo img { height: 30px; }
}

@media (max-width: 620px) {
    .gm-wrap { padding: 0 14px; }
    .gm-search { order: 3; flex-basis: 100%; }
    /* keep the horizontal gutter from .gm-wrap — overriding `padding` wholesale
       here would flush the logo and search against the screen edge */
    .gm-mast__inner { height: auto; flex-wrap: wrap; padding: 12px 14px; gap: 12px; }
    .gm-act--cta .gm-act__lbl { display: none; }
    .gm-act--cta { padding: 11px 14px; margin-left: 4px; }
    .gm-topbar a.gm-topbar__mail { display: none; }
}

/* Respect reduced-motion preferences: transitions here are decorative only. */
@media (prefers-reduced-motion: reduce) {
    .gm-head *, .gm-drawer * { transition: none !important; }
}