/**
 * Mzansi Business Admin Suite — Login Hub (public front door).
 * Standalone split screen: Website Manager (left, compact) and Office
 * Manager (right, wide — brand panel + advertising slot). Theme-independent,
 * Inter (SIL OFL 1.1) bundled with the plugin. --mzb-hub-accent is injected
 * from Settings.
 */

@font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("../fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url("../fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url("../fonts/Inter-Bold.woff2") format("woff2");
}
@font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 800;
        font-display: swap;
        src: url("../fonts/Inter-ExtraBold.woff2") format("woff2");
}

:root {
        --mzb-hub-accent: #174C3D;
        --mzb-hub-deep: #23292B;
        --mzb-hub-ink: #1c2733;
        --mzb-hub-muted: #64748b;
        --mzb-hub-line: #e2e6ec;
        --mzb-hub-light: #f4f6f5;
}

html, body {
        margin: 0;
        padding: 0;
}

/* When an integrator drops the shortcode into a normal page, the hub
 * becomes a full-bleed band instead of forcing viewport height. */
.mzb-hub-body .mzb-hub {
        min-height: 100vh;
}

.mzb-hub {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        min-height: 100vh;
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
}

.mzb-hub-panel {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
        box-sizing: border-box;
}

.mzb-hub-panel-inner {
        width: 100%;
        max-width: 30rem;
}

/* ---- Channel 1 · Website Manager (left, compact, light) ---- */

.mzb-hub-panel--web {
        flex: 0 0 42%;
        order: 1;
        background: var(--mzb-hub-light);
        color: var(--mzb-hub-ink);
        border-right: 1px solid var(--mzb-hub-line);
}

.mzb-hub-panel--web .mzb-hub-title {
        color: var(--mzb-hub-ink);
}

/* ---- Channel 2 · Office Manager (right, wide, brand panel) ---- */

.mzb-hub-panel--office {
        flex: 1 1 auto;
        order: 2;
        background:
                linear-gradient(150deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 55%),
                var(--mzb-hub-deep);
        color: #ffffff;
}

.mzb-hub-panel--office .mzb-hub-title {
        color: #ffffff;
}

.mzb-hub-panel--office .mzb-hub-sub {
        color: rgba(255, 255, 255, 0.78);
}

.mzb-hub-panel--office .mzb-hub-fineprint {
        color: rgba(255, 255, 255, 0.6);
}

/* ---- Shared panel elements ---- */

.mzb-hub-kicker {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin: 0 0 0.5rem;
        opacity: 0.65;
}

.mzb-hub-title {
        font-size: clamp(1.7rem, 3.2vw, 2.4rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.15;
        margin: 0 0 0.7rem;
}

.mzb-hub-sub {
        font-size: 0.98rem;
        line-height: 1.6;
        margin: 0 0 1.6rem;
}

.mzb-hub-btn {
        display: inline-block;
        border-radius: 10px;
        padding: 0.85rem 1.7rem;
        font-size: 0.98rem;
        font-weight: 700;
        text-decoration: none;
        text-align: center;
        transition: filter 0.15s ease, transform 0.15s ease;
}

.mzb-hub-btn:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
}

.mzb-hub-btn--web {
        background: var(--mzb-hub-ink);
        color: #ffffff;
}

.mzb-hub-btn--office {
        background: var(--mzb-hub-accent);
        color: #ffffff;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.mzb-hub-note {
        background: rgba(0, 0, 0, 0.05);
        border: 1px solid var(--mzb-hub-line);
        border-radius: 10px;
        padding: 0.85rem 1rem;
        font-size: 0.9rem;
        line-height: 1.55;
        margin: 0 0 1.25rem;
}

.mzb-hub-fineprint {
        font-size: 0.82rem;
        line-height: 1.5;
        margin: 1.1rem 0 0;
}

/* ---- Brand block (Office panel) ---- */

.mzb-hub-brand {
        margin-bottom: 2.4rem;
}

.mzb-hub-brand .mzb-brand-logo {
        max-height: 64px;
        max-width: 240px;
        width: auto;
        display: block;
        margin: 0 0 0.7rem;
        /* Logos designed for light backgrounds get a white chip on the dark panel. */
        background: #ffffff;
        padding: 8px 10px;
        border-radius: 10px;
        box-sizing: border-box;
}

/* v1.3.1: the reversed logo is made for dark surfaces — no white chip. */
.mzb-hub-brand .mzb-brand-logo--reversed,
.mzb-hub-brand .mzb-brand-logo.mzb-brand-logo--reversed {
        background: none;
        padding: 0;
}

.mzb-hub-brand .mzb-brand-monogram {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        font-size: 22px;
        font-weight: 800;
        border-radius: 14px;
        background: var(--mzb-hub-accent);
        color: #ffffff;
        margin: 0 0 0.7rem;
}

.mzb-hub-business {
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        margin: 0;
        opacity: 0.9;
}

.mzb-hub-powered {
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin: 2.6rem 0 0;
        opacity: 0.45;
}

/* ---- Advertising slot (Website panel) ---- */

.mzb-hub-ad {
        margin-top: 2.4rem;
        border: 1px dashed var(--mzb-hub-line);
        border-radius: 14px;
        background: #ffffff;
        overflow: hidden;
}

.mzb-hub-ad-img {
        display: block;
        width: 100%;
        height: auto;
}

.mzb-hub-ad-link {
        display: block;
}

.mzb-hub-ad-body {
        padding: 1rem 1.2rem 1.15rem;
}

.mzb-hub-ad-head {
        font-size: 0.95rem;
        font-weight: 700;
        margin: 0 0 0.3rem;
        color: var(--mzb-hub-ink);
}

.mzb-hub-ad-text {
        font-size: 0.86rem;
        line-height: 1.55;
        margin: 0 0 0.6rem;
        color: var(--mzb-hub-muted);
}

.mzb-hub-ad-cta {
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--mzb-hub-accent);
        text-decoration: none;
}

.mzb-hub-ad-cta:hover {
        text-decoration: underline;
}

/* ---- Mobile: stack (Office Manager first, then Website Manager) ---- */

@media (max-width: 880px) {
        .mzb-hub {
                flex-direction: column;
        }

        .mzb-hub-panel {
                flex: 1 1 auto;
                padding: 2.4rem 1.4rem;
        }

        /* Office Manager is the daily workplace — it leads on small screens. */
        .mzb-hub-panel--office {
                order: 1;
                border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        }

        .mzb-hub-panel--web {
                order: 2;
                border-right: 0;
        }

        .mzb-hub-panel-inner {
                max-width: 34rem;
        }

        .mzb-hub-brand {
                margin-bottom: 1.8rem;
        }
}