/* ==========================================================
   CMO — GLOBAL / LEGACY SUPPORT CSS
   Cleaned September 2026
   ========================================================== */


/* ==========================================================
   DARK PAGE BACKGROUNDS
   ========================================================== */

.page-id-12626,
.page-id-12626 .wp-site-blocks,
.page-id-13107,
.page-id-13107 .wp-site-blocks,
.page-id-13211,
.page-id-13211 .wp-site-blocks,
.page-id-13830,
.page-id-13830 .wp-site-blocks,
.page-id-13871,
.page-id-13871 .wp-site-blocks,
.page-id-13902,
.page-id-13902 .wp-site-blocks,
.page-id-13952,
.page-id-13952 .wp-site-blocks,
.page-id-14232,
.page-id-14232 .wp-site-blocks,
.page-id-8143,
.page-id-8143 .wp-site-blocks {
    background-color: #25272C !important;
}


/* ==========================================================
   GLOBAL FULL-WIDTH COLOUR BANDS
   ========================================================== */

.cmo-band {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 60px 20px !important;

    box-sizing: border-box !important;
}

.wp-block-group.cmo-band {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Band colour options */

.cmo-band--green {
    background-color: #22BC77 !important;
    color: #ffffff !important;
}

.cmo-band--pink {
    background-color: #A50B5E !important;
    color: #ffffff !important;
}

.cmo-band--dark {
    background-color: #25272C !important;
    color: #ffffff !important;
}

.cmo-band--white {
    background-color: #ffffff !important;
    color: #25272C !important;
}


/* ==========================================================
   MOBILE FULL-WIDTH BAND SUPPORT
   ========================================================== */

@media (max-width: 768px) {

    .cmo-band {
        width: 100vw !important;
        max-width: 100vw !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        box-sizing: border-box !important;
    }
}


/* ==========================================================
   LEGACY MOBILE NAVIGATION SUBMENUS
   ========================================================== */

@media (max-width: 768px) {

    .wp-block-navigation .wp-block-navigation__submenu-container {
        display: none !important;
    }

    .wp-block-navigation-item.has-child:focus-within
    > .wp-block-navigation__submenu-container {
        display: block !important;
    }
}


/* ==========================================================
   FEATURED IMAGES
   Remove legacy top border
   ========================================================== */

.wp-block-post-featured-image,
.wp-block-post-featured-image img,
.wp-block-post-featured-image figure {
    border: none !important;
    border-top: none !important;
    outline: none !important;
}


/* ==========================================================
   BLOG CATEGORY DROPDOWN
   ========================================================== */

.wp-block-categories-dropdown select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-color: #ffffff;
    color: #25272C;

    border: 2px solid #25272C;
    border-radius: 6px;

    padding: 10px 40px 10px 12px;

    font-size: 16px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpolyline points='5 7 10 12 15 7' fill='none' stroke='%2325272C' stroke-width='2'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}

.wp-block-categories-dropdown select:hover,
.wp-block-categories-dropdown select:focus {
    border-color: #25272C;

    box-shadow:
        0 0 0 2px rgba(37, 39, 44, 0.20);

    outline: none;
}


/* ==========================================================
   CMO — SOCIAL CHAT / WHATSAPP BUTTON
   ========================================================== */


/* ==========================================================
   DESKTOP
   ========================================================== */

.qlwapp__container {
    right: 26px !important;
    bottom: 4px !important;
    transform: translateY(8px) !important;
}

.qlwapp__button {
    min-height: 42px !important;

    padding: 9px 15px !important;

    border-radius: 999px !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.16) !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease !important;
}

.qlwapp__button:hover {
    transform: translateY(-2px) !important;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.20) !important;
}


/* ==========================================================
   MOBILE — COMPACT PILL
   ========================================================== */

@media (max-width: 700px) {

    .qlwapp__container {
        right: 16px !important;
        bottom: 8px !important;
        transform: translateY(28px) !important;
    }

    .qlwapp__button {
        width: auto !important;
        height: auto !important;

        min-width: 0 !important;
        min-height: 38px !important;
        max-width: none !important;

        padding: 7px 11px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        border-radius: 999px !important;

        box-shadow:
            0 8px 22px rgba(0, 0, 0, 0.18) !important;

        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
    }

    .qlwapp__text {
        display: inline !important;
        margin: 0 !important;
    }

    .qlwapp__icon {
        margin: 0 !important;

        font-size: 21px !important;
        line-height: 1 !important;
    }
}