/* ==========================================================
   MilaanBook — site header (top bar + main nav + mega menu)
   Self-contained: every class is prefixed `mb-` so it can be
   dropped into legacy pages that still load styles.css.
   ========================================================== */

#mbHeaderHost { display: contents; }
body .main-content { margin-top: 0; } /* legacy pages reserved space for a fixed header */

.mb-topbar, .mb-header {
    --mb-brand: #0351b5; --mb-brand-600: #023f8f; --mb-brand-50: #eaf2ff;
    --mb-ink: #112a54; --mb-ink-2: #3a4a68; --mb-ink-3: #64748f;
    --mb-line: #e2e9f4; --mb-soft: #f4f8fd; --mb-accent: #fd9e0e;
    --mb-font: "Plus Jakarta Sans", "Outfit", "Inter", system-ui, sans-serif;
    --mb-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-family: var(--mb-body); font-size: 15px; line-height: 1.5; color: var(--mb-ink-2);
    -webkit-font-smoothing: antialiased; text-align: left;
}
.mb-topbar *, .mb-header * { box-sizing: border-box; }
.mb-topbar a, .mb-header a { text-decoration: none; color: inherit; }
.mb-header ul { list-style: none; margin: 0; padding: 0; }
.mb-header h4, .mb-header h5, .mb-header p { margin: 0; }
.mb-header button { font: inherit; cursor: pointer; }
.mb-wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }

/* ---------- Top bar ---------- */
.mb-topbar { background: #112a54; color: #c2d0e8; font-size: 13px; position: relative; z-index: 10; }
.mb-topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 40px; }
.mb-announce { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; color: #e6eefb; }
.mb-new { padding: 2px 9px; border-radius: 99px; background: linear-gradient(135deg, var(--mb-accent), #ffc15e); color: #1b1200; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mb-announce-cta { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; }
.mb-announce-cta i { font-size: 10px; transition: transform .2s; }
.mb-announce:hover .mb-announce-cta i { transform: translateX(3px); }
.mb-top-links { display: flex; align-items: center; gap: 22px; }
.mb-top-links a { display: inline-flex; align-items: center; gap: 8px; color: #c2d0e8; transition: color .15s; }
.mb-top-links a i { color: #6fa8ee; font-size: 12px; }
.mb-top-links a:hover { color: #fff; }

/* ---------- Main bar ---------- */
.mb-header { position: sticky; top: 0; z-index: 1000; }
.mb-bar { position: relative; z-index: 2; background: rgba(255, 255, 255, .92); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.mb-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); }
.mb-header.scrolled .mb-bar { border-color: var(--mb-line); box-shadow: 0 8px 24px -16px rgba(17, 42, 84, .3); }
.mb-bar-in { position: relative; display: flex; align-items: center; gap: 28px; height: 72px; }

.mb-brand { position: relative; z-index: 2; display: inline-flex; align-items: center; flex: none; }
.mb-brand img { display: block; height: 38px; width: auto; }

.mb-nav { flex: 1; display: flex; align-items: center; }
.mb-nav > ul { display: flex; align-items: center; gap: 2px; }
.mb-link {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; border: 0; background: none;
    font-family: var(--mb-body); font-size: 15px; font-weight: 500; color: var(--mb-ink-2); transition: background .2s, color .2s;
}
.mb-link i { font-size: 10px; transition: transform .25s; }
.mb-link:hover, .mb-has-menu:hover > .mb-link, .mb-has-menu.open > .mb-link { background: var(--mb-soft); color: var(--mb-ink); }
.mb-link.active { color: var(--mb-brand); background: var(--mb-brand-50); }
.mb-has-menu:hover > .mb-link i, .mb-has-menu.open > .mb-link i { transform: rotate(180deg); }
.mb-has-menu { position: relative; }
.mb-has-mega { position: static; }
.mb-nav-cta { display: none; }

.mb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; position: relative; z-index: 2; }
.mb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
    font-family: var(--mb-body); font-weight: 600; font-size: 14.5px; line-height: 1; white-space: nowrap; transition: transform .2s, box-shadow .2s, background .2s;
}
.mb-btn i { font-size: 12px; transition: transform .2s; }
.mb-btn:hover i.fa-arrow-right { transform: translateX(3px); }
.mb-btn-primary { background: linear-gradient(180deg, #0a66d2 0%, var(--mb-brand) 55%, #0a3f9e 100%); color: #fff !important; box-shadow: 0 6px 16px -6px rgba(3, 81, 181, .6); }
.mb-btn-primary:hover { background: linear-gradient(180deg, #1573e0 0%, #0a5ac4 55%, #08358a 100%); transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(3, 81, 181, .7); }
.mb-btn-ghost { color: var(--mb-ink) !important; }
.mb-btn-ghost:hover { background: var(--mb-soft); }

/* ---------- Panels (shared) ---------- */
.mb-panel {
    position: absolute; top: calc(100% + 10px); z-index: 5; background: #fff; border: 1px solid var(--mb-line); border-radius: 24px;
    box-shadow: 0 30px 60px -20px rgba(17, 42, 84, .28), 0 12px 24px -12px rgba(17, 42, 84, .12);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.mb-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.mb-has-menu:hover > .mb-panel, .mb-has-menu.open > .mb-panel, .mb-has-menu:focus-within > .mb-panel { opacity: 1; visibility: visible; transform: none; }

.mb-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 16px; background: var(--mb-brand-50); color: var(--mb-brand); }
.mb-ico.c2 { background: #fff4de; color: #d98200; }
.mb-ico.c3 { background: #e6f7ef; color: #12a566; }
.mb-ico.c4 { background: #e0f4f6; color: #0e8fa0; }

/* Features dropdown */
.mb-drop { left: -60px; width: 560px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mb-item { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; transition: background .15s; }
.mb-item:hover { background: var(--mb-soft); }
.mb-item b { display: block; font-family: var(--mb-font); font-size: 15px; color: var(--mb-ink); }
.mb-item small { display: block; font-size: 13px; color: var(--mb-ink-3); }

/* Solutions mega menu */
.mb-mega { left: 50%; width: min(1180px, 100vw - 48px); padding: 28px; transform: translate(-50%, 8px); }
.mb-has-menu:hover > .mb-mega, .mb-has-menu.open > .mb-mega, .mb-has-menu:focus-within > .mb-mega { transform: translate(-50%, 0); }
.mb-mega-grid { display: grid; grid-template-columns: repeat(3, 1fr) 300px; gap: 28px; }
.mb-mega-col h4 { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--mb-line); font-family: var(--mb-font); font-size: 16px; font-weight: 700; color: var(--mb-ink); }
.mb-mega-col h4 .mb-ico { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.mb-mega-col a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin-inline: -10px; border-radius: 10px; font-size: 14.5px; color: var(--mb-ink-2); transition: background .15s, color .15s; }
.mb-mega-col a i { width: 18px; text-align: center; font-size: 13px; color: #8a9ab3; transition: color .15s; }
.mb-mega-col a:hover { background: var(--mb-brand-50); color: var(--mb-brand); }
.mb-mega-col a:hover i { color: var(--mb-brand); }

.mb-feature { padding: 18px; border-radius: 20px; background: linear-gradient(160deg, #eaf2ff, #fff6ec); border: 1px solid #d6e6fb; display: flex; flex-direction: column; gap: 8px; }
.mb-feature-tag { align-self: flex-start; padding: 3px 10px; border-radius: 99px; background: #fff; border: 1px solid #cfe1fb; color: var(--mb-brand-600); font-size: 11.5px; font-weight: 700; }
.mb-feature img { width: 100%; height: auto; border-radius: 10px; border: 1px solid #cfe1fb; box-shadow: 0 10px 20px -12px rgba(17, 42, 84, .5); margin: 4px 0; }
.mb-feature h5 { font-family: var(--mb-font); font-size: 16px; line-height: 1.25; color: var(--mb-ink); }
.mb-feature p { font-size: 13px; color: var(--mb-ink-3); }
.mb-feature .mb-btn { margin-top: 6px; width: 100%; }
.mb-feature-link { text-align: center; font-size: 13px; font-weight: 600; color: var(--mb-brand) !important; padding: 6px; }
.mb-feature-link:hover { text-decoration: underline !important; }

.mb-burger { display: none; position: relative; z-index: 2; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--mb-line); background: #fff; }
.mb-burger span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--mb-ink); transition: transform .25s, opacity .2s, top .25s; }
.mb-burger span:nth-child(1) { top: 15px; }
.mb-burger span:nth-child(2) { top: 21px; }
.mb-burger span:nth-child(3) { top: 27px; }
.mb-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.mb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mb-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mb-header :focus-visible { outline: 3px solid rgba(3, 81, 181, .45); border-radius: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .mb-mega-grid { grid-template-columns: repeat(3, 1fr); }
    .mb-feature { display: none; }
    .mb-top-links a:nth-child(2) { display: none; }
}
@media (max-width: 1100px) {
    .mb-top-links { display: none; }
    .mb-topbar-in { justify-content: center; }
    .mb-actions { display: none; }
    .mb-burger { display: block; }

    .mb-nav {
        position: fixed; inset: 0; z-index: 1; padding: var(--mb-drawer-top, 72px) 20px 28px; background: #fff; overflow-y: auto;
        flex-direction: column; align-items: stretch; opacity: 0; visibility: hidden; transform: translateY(-10px);
        transition: opacity .25s, transform .25s, visibility .25s;
    }
    .mb-nav.open { opacity: 1; visibility: visible; transform: none; }
    .mb-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; padding-top: 12px; }
    .mb-link { width: 100%; justify-content: space-between; padding: 15px 12px; font-size: 17px; border-radius: 14px; }
    .mb-has-menu:hover > .mb-link { background: none; }
    .mb-has-menu.open > .mb-link { background: var(--mb-soft); }
    .mb-has-menu:hover > .mb-link i { transform: none; }
    .mb-has-menu.open > .mb-link i { transform: rotate(180deg); }

    .mb-panel, .mb-mega, .mb-drop {
        position: static; width: 100%; max-height: 0; overflow: hidden; padding: 0 6px; border: 0; border-radius: 0; box-shadow: none;
        opacity: 1; visibility: visible; transform: none; transition: max-height .35s ease, padding .35s;
    }
    .mb-panel::before { display: none; }
    .mb-has-menu:hover > .mb-panel, .mb-has-menu:focus-within > .mb-panel { max-height: 0; transform: none; }
    .mb-has-menu.open > .mb-panel { max-height: 1600px; padding: 8px 6px 14px; transform: none; }
    .mb-mega-grid, .mb-drop { grid-template-columns: 1fr; gap: 6px; }
    .mb-mega-col { padding: 8px 0; }
    .mb-nav-cta { display: grid; gap: 10px; margin-top: 22px; }
    .mb-nav-cta .mb-btn { padding: 15px; font-size: 16px; border: 1px solid var(--mb-line); }
    .mb-nav-cta .mb-btn-primary { border-color: transparent; }
}
@media (max-width: 600px) {
    .mb-wrap { width: calc(100% - 32px); }
    .mb-announce span:nth-child(2) { font-size: 12.5px; }
    .mb-announce-cta { display: none; }
    .mb-topbar-in { min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    .mb-header *, .mb-topbar * { transition-duration: .01ms !important; }
}

/* shown only if the logo image fails to load */
.logo-fallback { font-family: var(--mb-font, "Plus Jakarta Sans", sans-serif); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: #0351b5; }
.logo-fallback b { margin-left: 3px; padding: 1px 7px; border-radius: 6px; background: #112a54; color: #fd9e0e; }