/*
 * Mierlo voor Mierlo — official website branding layer
 * Uses only the approved MvM media assets supplied by the site owner.
 * Algemeen logo (alle varianten): 10255 mvmlogo.jpg
 */

:root {
    --mvm-brand-blue: #1966AE;
    --mvm-brand-blue-deep: #0F4F88;
    --mvm-brand-white: #FFFFFF;
    --mvm-brand-border: #D9E4ED;
    --mvm-brand-shadow: 0 8px 26px rgba(15, 45, 72, .12);
    --mvm-brand-full: url('https://www.mierlovoormierlo.nl/wp-content/uploads/2026/08/mvmlogo.jpg');
    --mvm-brand-compact: url('https://www.mierlovoormierlo.nl/wp-content/uploads/2026/08/mvmlogo.jpg');
    --mvm-brand-mark: url('https://www.mierlovoormierlo.nl/wp-content/uploads/2026/08/mvmlogo.jpg');
}

/* --------------------------------------------------------------------------
 * Header brand lockup
 * ----------------------------------------------------------------------- */
.mvm-brandbar {
    position: relative;
    overflow: hidden;
    background: var(--mvm-brand-blue);
    border-bottom: 1px solid var(--mvm-brand-blue);
}

.mvm-brandbar .mvm-header-inner {
    min-height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 8px;
    padding-bottom: 8px;
}

.mvm-brand-lockup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: min(720px, 72vw);
    border-radius: 12px;
    outline-offset: 4px;
}

.mvm-brand-lockup:focus-visible {
    outline: 3px solid rgba(25, 102, 174, .32);
}

.mvm-brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.mvm-brand-logo--compact {
    display: none !important;
}

.mvm-brand-logo--full {
    display: block !important;
    max-height: 112px;
}

.mvm-brand-mark {
    position: absolute;
    right: clamp(14px, 3vw, 42px);
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 72px;
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
}

body.mvm-header-dark .mvm-brandbar {
    background: var(--mvm-brand-blue);
    border-bottom-color: rgba(255, 255, 255, .16);
}

body.mvm-header-dark .mvm-brand-logo--compact {
    display: none;
}

body.mvm-header-dark .mvm-brand-logo--full {
    display: block;
}

body.mvm-header-dark .mvm-brand-mark {
    background: rgba(255, 255, 255, .96);
    padding: 5px;
}

/* Keep the existing navigation bar as a clean, uninterrupted MvM blue band. */
#mvm-header-v1 .mvm-header-main,
#mvm-header-v1 .mvm-header-main .mvm-header-inner {
    background-color: var(--mvm-brand-blue);
}

/* --------------------------------------------------------------------------
 * Footer branding
 * ----------------------------------------------------------------------- */
footer .mg-footer-bottom-area .site-branding-text {
    position: relative;
}

footer .mg-footer-bottom-area .site-branding-text::before {
    content: none !important;
    display: none !important;
}

footer .site-title-footer {
    display: none !important;
}

footer .site-description-footer {
    max-width: 620px;
    margin-top: 4px;
}

/* Footer contains no MvM logo or beeldmerk; branding remains text-only here. */
footer .mg-footer-bottom-area .navbar-brand,
footer .mg-footer-bottom-area .custom-logo {
    display: none !important;
}

footer .mg-footer-copyright .mvm-footer-mark {
    display: none !important;
}

footer .mg-footer-copyright .mvm-footer-mark + p {
    display: block;
    margin: 0;
}

/* Footer intentionally has no separate compact/beeldmerk image. */
footer .mg-footer-copyright .mvm-footer-mark,
footer .mg-footer-copyright .mvm-footer-mark img {
    display: none !important;
}

footer .mg-footer-copyright p {
    display: block;
    margin: 0;
}

/* --------------------------------------------------------------------------
 * Hub — same official identity, no separate app logo
 * ----------------------------------------------------------------------- */
body.mvm-hub-route main#content::before {
    content: '';
    display: block;
    width: min(420px, calc(100% - 32px));
    height: 132px;
    margin: 0 auto 18px;
    background-image: var(--mvm-brand-compact);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

body.mvm-hub-route.mvm-header-dark main#content::before {
    background-image: var(--mvm-brand-full);
}

/* Native MvM Mail may use the official red MvM mill as a supporting beeldmerk. */
.mvm-mail-hero {
    position: relative;
    overflow: hidden;
    padding-right: 126px;
}

.mvm-mail-hero::after {
    content: '';
    position: absolute;
    right: 22px;
    top: 50%;
    width: 88px;
    height: 88px;
    transform: translateY(-50%);
    background-image: var(--mvm-brand-mark);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.mvm-mail-card-icon {
    color: transparent !important;
    font-size: 0 !important;
    background-image: var(--mvm-brand-mark) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

body.mvm-header-dark .mvm-mail-hero::after {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28));
}

/* Mail account actions must remain visible before hover/focus. */
#mvm-mail-app button[data-mail-disconnect].mvm-mail-linkbutton {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
    margin-top: 8px !important;
    padding: 10px 12px !important;
    border: 2px solid var(--mvm-brand-blue) !important;
    border-radius: 10px !important;
    background: var(--mvm-brand-blue) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

#mvm-mail-app button[data-mail-disconnect].mvm-mail-linkbutton:hover,
#mvm-mail-app button[data-mail-disconnect].mvm-mail-linkbutton:focus,
#mvm-mail-app button[data-mail-disconnect].mvm-mail-linkbutton:focus-visible {
    background: var(--mvm-brand-blue-deep) !important;
    border-color: var(--mvm-brand-blue-deep) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body.mvm-header-dark #mvm-mail-app button[data-mail-disconnect].mvm-mail-linkbutton {
    background: var(--mvm-brand-blue) !important;
    border-color: #78BAF3 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
 * PeepSo/community entry — replace generic stock cover with MvM identity
 * ----------------------------------------------------------------------- */
#peepso-wrap .ps-landing__cover {
    background-color: var(--mvm-brand-blue) !important;
    background-image: var(--mvm-brand-full) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

#peepso-wrap .ps-landing__cover-inner {
    background: transparent !important;
}

#peepso-wrap .ps-btn--action,
#peepso-wrap .pso-btn--primary,
#peepso-wrap .ps-button-action {
    background: var(--mvm-brand-blue) !important;
    border-color: var(--mvm-brand-blue) !important;
}

#peepso-wrap .ps-btn--action:hover,
#peepso-wrap .pso-btn--primary:hover,
#peepso-wrap .ps-button-action:hover,
#peepso-wrap .ps-btn--action:focus,
#peepso-wrap .pso-btn--primary:focus,
#peepso-wrap .ps-button-action:focus {
    background: var(--mvm-brand-blue-deep) !important;
    border-color: var(--mvm-brand-blue-deep) !important;
}

/* --------------------------------------------------------------------------
 * WordPress login branding — loaded separately on wp-login.php
 * ----------------------------------------------------------------------- */
body.login {
    background: #F1F5F8;
}

body.login #login h1 a {
    width: 220px;
    height: 150px;
    margin: 0 auto 18px;
    background-image: var(--mvm-brand-mark) !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
    border: 1px solid var(--mvm-brand-border);
    border-radius: 14px;
    box-shadow: var(--mvm-brand-shadow);
}

body.login .button-primary {
    background: var(--mvm-brand-blue) !important;
    border-color: var(--mvm-brand-blue) !important;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
    background: var(--mvm-brand-blue-deep) !important;
    border-color: var(--mvm-brand-blue-deep) !important;
}

/* --------------------------------------------------------------------------
 * Responsive behaviour
 * ----------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .mvm-brandbar .mvm-header-inner {
        min-height: 96px;
    }

    .mvm-brand-logo--compact,
    .mvm-brand-logo--full {
        max-height: 84px;
    }

    .mvm-brand-mark {
        width: 56px;
        height: 56px;
        right: 14px;
    }

    footer .mg-footer-bottom-area .site-branding-text::before {
        margin-left: auto;
        margin-right: auto;
        background-position: center;
    }

    footer .site-description-footer {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 640px) {
    .mvm-brandbar .mvm-header-inner {
        min-height: 78px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .mvm-brand-lockup {
        max-width: calc(100% - 82px);
    }

    .mvm-brand-logo--compact,
    .mvm-brand-logo--full {
        max-height: 66px;
    }

    .mvm-brand-mark {
        width: 46px;
        height: 46px;
        right: 10px;
        border-radius: 9px;
    }

    body.mvm-hub-route main#content::before {
        height: 96px;
        margin-bottom: 12px;
    }

    footer .mg-footer-copyright .mvm-footer-mark {
        display: flex;
        margin: 0 auto 8px;
    }

    footer .mg-footer-copyright .mvm-footer-mark + p {
        display: block;
        text-align: center;
    }
}