/* =========================================================
   SDCA DATA PRIVACY OFFICE
   COMMON / SHARED STYLESHEET

   Used by:
   - Home
   - About Us
   - Monthly News Letter
   - Data Privacy Policy
   - Resources
   - News Detail

   IMPORTANT:
   This file DOES NOT redesign the normal SDCA header.

   The following remain controlled by the website's
   original/global CSS:

   - #site-header
   - #site-header2
   - #site-header4
   - SDCA logo size
   - main menu spacing
   - ENROLL NOW spacing
   - desktop/mobile breakpoint
   - normal header height

   This file only handles:
   - DPO page structure
   - DPO red subheader
   - DPO mobile navigation
   - common DPO heroes
   - common DPO footer
   - header stacking / dropdown priority
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {
    --dpo-red: #A12124;
    --dpo-dark-red: #8f171b;
    --dpo-bright-red: #d51d24;

    --dpo-gray: #625F5F;
    --dpo-light-gray: #efefef;

    --dpo-white: #ffffff;
    --dpo-black: #222222;
    --dpo-beige: #fbf1df;

    --dpo-text-muted: #506b78;

    /*
     * DPO red navigation height.
     */
    --dpo-subheader-height: 54px;

    /*
     * Fallback values only.
     *
     * Layout/Front.php dynamically updates these
     * based on the REAL SDCA header dimensions.
     */
    --dpo-subheader-top: 124px;
    --dpo-content-top: 178px;
}


/* =========================================================
   BOX SIZING
========================================================= */

body.dpo-body *,
body.dpo-body *::before,
body.dpo-body *::after {
    box-sizing: border-box;
}


/* =========================================================
   DOCUMENT BASE
========================================================= */

html {
    overflow-x: hidden;
}


body.dpo-body {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    font-family:
        'Century Gothic',
        'Poppins',
        Arial,
        sans-serif;

    overflow-x: hidden !important;
}


/* =========================================================
   MAIN DPO CONTENT
========================================================= */

body.dpo-body main.dpo-main-content {
    width: 100% !important;

    margin: 0 !important;

    /*
     * This reserves exactly enough room for:
     *
     * normal SDCA header
     * +
     * red DPO subheader
     *
     * Layout/Front.php calculates the real value.
     */
    padding-top: var(--dpo-content-top) !important;

    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;

    background: transparent !important;

    position: relative !important;
}


body.dpo-body .dpo-main-content {
    width: 100% !important;

    margin: 0 !important;
}


/* =========================================================
   REMOVE OLD TEMPLATE PAGE SPACING
========================================================= */

body.dpo-body .mt-7-50,
body.dpo-body .mt-7,
body.dpo-body .mt-6,
body.dpo-body .pt-7,
body.dpo-body .pt-6,
body.dpo-body .content-wrapper,
body.dpo-body .main-content,
body.dpo-body .page-content,
body.dpo-body #content,
body.dpo-body #main,
body.dpo-body .wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* =========================================================
   COMMON DPO PAGE WRAPPERS
========================================================= */

body.dpo-body .dpo-main-content .dpo-page,
body.dpo-body .dpo-main-content .dpo-about-page,
body.dpo-body .dpo-main-content .dpo-monthly-page,
body.dpo-body .dpo-main-content .dpo-policy-page,
body.dpo-body .dpo-main-content .dpo-resources-page,
body.dpo-body .dpo-main-content .dpo-news-detail-page {
    width: 100% !important;

    min-height: 100vh;

    margin: 0 !important;
    padding: 0 !important;

    clear: both;

    position: relative;
    z-index: 1;

    color: var(--dpo-black);

    font-family:
        'Century Gothic',
        'Poppins',
        Arial,
        sans-serif;
}


/*
 * The old versions used:
 *
 * margin-top: -32px
 *
 * Do NOT use that anymore.
 *
 * Layout/Front.php and --dpo-content-top now
 * handle this correctly.
 */
body.dpo-body #site-header3.dpo-sub-navbar~.dpo-page,
body.dpo-body #site-header3.dpo-sub-navbar~.dpo-about-page,
body.dpo-body #site-header3.dpo-sub-navbar~.dpo-monthly-page,
body.dpo-body #site-header3.dpo-sub-navbar~.dpo-policy-page,
body.dpo-body #site-header3.dpo-sub-navbar~.dpo-resources-page,
body.dpo-body #site-header3.dpo-sub-navbar~.dpo-news-detail-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* =========================================================
   NORMAL SDCA HEADER
========================================================= */

/*
 * IMPORTANT:
 *
 * We DO NOT set:
 *
 * height
 * min-height
 * max-height
 * top
 * padding
 * logo size
 * nav gap
 * container width
 * breakpoint
 *
 * for the original SDCA header.
 *
 * That means DPO pages will look exactly like
 * the rest of the SDCA website.
 */


/* =========================================================
   SDCA HEADER STACKING ONLY
========================================================= */

body.dpo-body #sdca-main-header-wrap {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;

    z-index: 3000 !important;

    overflow: visible !important;
}


body.dpo-body #sdca-main-header-wrap>header {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


body.dpo-body #sdca-main-header-wrap header,
body.dpo-body #sdca-main-header-wrap .header,
body.dpo-body #sdca-main-header-wrap .main-header,
body.dpo-body #sdca-main-header-wrap .navbar {
    z-index: 3000 !important;

    overflow: visible !important;
}


body.dpo-body #sdca-main-header-wrap .container,
body.dpo-body #sdca-main-header-wrap .container-fluid,
body.dpo-body #sdca-main-header-wrap .navbar-collapse,
body.dpo-body #sdca-main-header-wrap .navbar-nav,
body.dpo-body #sdca-main-header-wrap .nav-item,
body.dpo-body #sdca-main-header-wrap .dropdown {
    overflow: visible !important;
}


body.dpo-body #sdca-main-header-wrap .nav-item,
body.dpo-body #sdca-main-header-wrap .dropdown {
    position: relative !important;
}


/*
 * Normal SDCA dropdown menu must remain above
 * the DPO red subheader.
 */
body.dpo-body #sdca-main-header-wrap .dropdown-menu {
    position: absolute !important;

    z-index: 5000 !important;

    overflow: visible !important;
}


/* =========================================================
   DPO RED SUBHEADER
========================================================= */

body.dpo-body #site-header3.dpo-sub-navbar {
    width: 100% !important;

    height: var(--dpo-subheader-height) !important;
    min-height: var(--dpo-subheader-height) !important;
    max-height: var(--dpo-subheader-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--dpo-red) !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    /*
     * Fixed directly below the real SDCA header.
     *
     * Front.php calculates --dpo-subheader-top.
     */
    position: fixed !important;

    top: var(--dpo-subheader-top) !important;
    left: 0 !important;
    right: 0 !important;

    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;

    overflow: visible !important;

    /*
     * Lower than the normal SDCA header
     * and its dropdowns.
     */
    z-index: 2900 !important;
}


/* =========================================================
   REMOVE OLD DPO NAVBAR POSITIONING
========================================================= */

body.dpo-body #site-header3.dpo-sub-navbar.fixed-top,
body.dpo-body #site-header3.dpo-sub-navbar.position-fixed,
body.dpo-body #site-header3.dpo-sub-navbar.sticky-top,
body.dpo-body #site-header3.dpo-sub-navbar.tp-navbar,
body.dpo-body #site-header3.dpo-sub-navbar.mt-7-50 {
    position: fixed !important;

    top: var(--dpo-subheader-top) !important;
    left: 0 !important;
    right: 0 !important;

    margin: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;

    z-index: 2900 !important;
}


/*
 * DPO red subheader must not use the old
 * hide-on-scroll behavior.
 */
body.dpo-body #site-header3.dpo-sub-navbar.hide3 {
    top: var(--dpo-subheader-top) !important;

    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;
}


/* =========================================================
   DPO SUBHEADER CONTAINER
========================================================= */

body.dpo-body #site-header3.dpo-sub-navbar>.container {
    width: 100% !important;

    height: var(--dpo-subheader-height) !important;
    min-height: var(--dpo-subheader-height) !important;

    margin: 0 auto !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    position: relative !important;

    overflow: visible !important;
}


/* =========================================================
   DPO NAVIGATION LIST
========================================================= */

body.dpo-body #site-header3.dpo-sub-navbar .navbar-nav,
body.dpo-body #site-header3.dpo-sub-navbar .dpo-module-nav-list {
    height: var(--dpo-subheader-height) !important;
    min-height: var(--dpo-subheader-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 34px !important;

    list-style: none !important;
}


/*
 * Optional compatibility wrapper.
 */
body.dpo-body #site-header3.dpo-sub-navbar .dpo-module-nav-wrap {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   DPO NAV ITEMS
========================================================= */

body.dpo-body #site-header3.dpo-sub-navbar .nav-item,
body.dpo-body #site-header3.dpo-sub-navbar .dpo-module-nav-list .nav-item {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   DPO NAVIGATION LINKS
========================================================= */

body.dpo-body #site-header3.dpo-sub-navbar .nav-link,
body.dpo-body #site-header3.dpo-sub-navbar .dpo-module-nav-list .nav-link {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family:
        'Century Gothic',
        'Poppins',
        Arial,
        sans-serif !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    line-height: var(--dpo-subheader-height) !important;

    text-transform: uppercase !important;

    text-decoration: none !important;

    white-space: nowrap !important;
}


body.dpo-body #site-header3.dpo-sub-navbar .nav-link:hover,
body.dpo-body #site-header3.dpo-sub-navbar .nav-link:focus,
body.dpo-body #site-header3.dpo-sub-navbar .nav-link.content-active {
    color: #ffffff !important;

    text-decoration: underline !important;
}


/* =========================================================
   DPO DESKTOP NAVIGATION
   BOOTSTRAP LG >= 992PX
========================================================= */

@media screen and (min-width: 992px) {

    /*
     * Hide DPO hamburger on desktop.
     */
    body.dpo-body #site-header3.dpo-sub-navbar .navbar-toggler {
        display: none !important;
    }


    /*
     * DPO links visible horizontally.
     */
    body.dpo-body #site-header3.dpo-sub-navbar .navbar-collapse {
        width: auto !important;

        height: var(--dpo-subheader-height) !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        visibility: visible !important;
        opacity: 1 !important;

        overflow: visible !important;
    }
}


/* =========================================================
   COMMON DPO HERO BANNERS
========================================================= */

body.dpo-body .dpo-hero,
body.dpo-body .dpo-about-hero,
body.dpo-body .dpo-monthly-hero,
body.dpo-body .dpo-policy-hero,
body.dpo-body .dpo-resources-hero,
body.dpo-body .dpo-news-detail-hero {
    width: 100% !important;

    height: 180px !important;
    min-height: 180px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    overflow: hidden !important;

    background: #ffffff !important;

    position: relative !important;

    z-index: 1 !important;
}


/*
 * There must be no empty gap between
 * the red DPO subheader and the hero.
 */
body.dpo-body .dpo-main-content .dpo-hero,
body.dpo-body .dpo-main-content .dpo-about-hero,
body.dpo-body .dpo-main-content .dpo-monthly-hero,
body.dpo-body .dpo-main-content .dpo-policy-hero,
body.dpo-body .dpo-main-content .dpo-resources-hero,
body.dpo-body .dpo-main-content .dpo-news-detail-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* =========================================================
   COMMON HERO IMAGES
========================================================= */

body.dpo-body .dpo-hero img,
body.dpo-body .dpo-about-hero img,
body.dpo-body .dpo-monthly-hero img,
body.dpo-body .dpo-policy-hero img,
body.dpo-body .dpo-resources-hero img,
body.dpo-body .dpo-news-detail-hero img {
    width: 100% !important;

    height: calc(100% + 40px) !important;

    margin: -40px 0 0 0 !important;
    padding: 0 !important;

    display: block !important;

    /* object-fit: cover !important; */
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;

    filter: none !important;
}


/* =========================================================
   COMMON DPO FOOTER
========================================================= */

body.dpo-body .dpo-footer {
    width: 100% !important;

    margin: 0 !important;

    padding: 58px 60px 70px;

    background: var(--dpo-red);

    color: var(--dpo-white);

    box-sizing: border-box;
}


/*
 * Home may render its footer within
 * a constrained .dpo-container.
 *
 * Force footer to full viewport width.
 */
body.dpo-body .dpo-container .dpo-footer {
    width: 100vw !important;

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


/* =========================================================
   FOOTER CONTENT
========================================================= */

body.dpo-body .dpo-footer-content {
    width: 100%;
    max-width: 1240px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 55px;

    align-items: center;
}


/* =========================================================
   FOOTER BANNER
========================================================= */

body.dpo-body .dpo-footer-banner img {
    width: 100%;
    max-width: 700px;

    height: auto;

    margin: 0;

    display: block;
}


/* =========================================================
   FOOTER LINKS
========================================================= */

body.dpo-body .dpo-footer-links {
    color: var(--dpo-white);
}


body.dpo-body .dpo-footer-links h4,
body.dpo-body .dpo-footer-links h5 {
    margin: 0 0 14px;

    color: var(--dpo-white);

    font-size: 16px;
    font-weight: 400;
}


body.dpo-body .dpo-footer-links a {
    display: block;

    width: 220px;

    margin-bottom: 14px;

    padding: 11px 12px;

    background: var(--dpo-light-gray);

    color: #555555 !important;

    border-radius: 8px;

    text-align: center;

    text-decoration: none !important;

    font-size: 14px;

    box-sizing: border-box;
}


body.dpo-body .dpo-footer-links a:hover,
body.dpo-body .dpo-footer-links a:focus {
    background: var(--dpo-white);

    color: var(--dpo-red) !important;

    text-decoration: none !important;
}


/* =========================================================
   DPO TABLET / MOBILE NAVIGATION
   <= 991PX
========================================================= */

@media screen and (max-width: 991px) {

    /* =====================================================
       DPO HERO SIZE
    ===================================================== */

    body.dpo-body .dpo-hero,
    body.dpo-body .dpo-about-hero,
    body.dpo-body .dpo-monthly-hero,
    body.dpo-body .dpo-policy-hero,
    body.dpo-body .dpo-resources-hero,
    body.dpo-body .dpo-news-detail-hero {
        height: 150px !important;
        min-height: 150px !important;
    }


    /* =====================================================
       DPO SUBHEADER CONTAINER
    ===================================================== */

    body.dpo-body #site-header3.dpo-sub-navbar>.container {
        width: 100% !important;
        max-width: 100% !important;

        height: var(--dpo-subheader-height) !important;
        min-height: var(--dpo-subheader-height) !important;

        margin: 0 !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: flex-end !important;

        position: relative !important;

        overflow: visible !important;
    }


    /* =====================================================
       DPO MOBILE HAMBURGER
    ===================================================== */

    body.dpo-body #site-header3.dpo-sub-navbar .navbar-toggler {
        width: 42px !important;
        height: 38px !important;

        margin: 0 !important;

        padding: 4px 7px !important;

        border: 0 !important;

        background: transparent !important;

        color: #ffffff !important;

        box-shadow: none !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        position: relative !important;

        z-index: 2960 !important;
    }


    body.dpo-body #site-header3.dpo-sub-navbar .navbar-toggler:focus {
        outline: none !important;

        box-shadow: none !important;
    }


    body.dpo-body #site-header3.dpo-sub-navbar .navbar-toggler span {
        color: #ffffff !important;

        font-size: 24px !important;

        line-height: 1 !important;
    }


    /* =====================================================
       CLOSED DPO MOBILE MENU
    ===================================================== */

    body.dpo-body #site-header3.dpo-sub-navbar .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }


    /* =====================================================
       OPEN DPO MOBILE MENU
    ===================================================== */

    body.dpo-body #site-header3.dpo-sub-navbar .navbar-collapse.show,

    body.dpo-body #site-header3.dpo-sub-navbar .navbar-collapse.collapsing {
        width: 100% !important;

        height: auto !important;

        position: absolute !important;

        top: var(--dpo-subheader-height) !important;
        left: 0 !important;
        right: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        background: var(--dpo-red) !important;

        border-top:
            1px solid rgba(255, 255, 255, 0.15) !important;

        box-shadow:
            0 8px 16px rgba(0, 0, 0, 0.20) !important;

        overflow: visible !important;

        z-index: 2950 !important;
    }


    /* =====================================================
       MOBILE DPO NAV LIST
    ===================================================== */

    body.dpo-body #site-header3.dpo-sub-navbar .navbar-nav,

    body.dpo-body #site-header3.dpo-sub-navbar .dpo-module-nav-list {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 0 !important;

        list-style: none !important;
    }


    body.dpo-body #site-header3.dpo-sub-navbar .dpo-module-nav-wrap {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       MOBILE DPO ITEMS
    ===================================================== */

    body.dpo-body #site-header3.dpo-sub-navbar .nav-item,

    body.dpo-body #site-header3.dpo-sub-navbar .dpo-module-nav-list .nav-item {
        width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;
    }


    /* =====================================================
       MOBILE DPO LINKS
    ===================================================== */

    body.dpo-body #site-header3.dpo-sub-navbar .nav-link,

    body.dpo-body #site-header3.dpo-sub-navbar .dpo-module-nav-list .nav-link {
        width: 100% !important;
        height: auto !important;

        margin: 0 !important;

        padding: 12px 20px !important;

        display: block !important;

        color: #ffffff !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        line-height: 1.3 !important;

        text-align: center !important;

        text-transform: uppercase !important;

        white-space: normal !important;

        text-decoration: none !important;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.10) !important;

        box-sizing: border-box !important;
    }


    body.dpo-body #site-header3.dpo-sub-navbar .nav-link:hover,

    body.dpo-body #site-header3.dpo-sub-navbar .nav-link:focus {
        background:
            rgba(255, 255, 255, 0.08) !important;

        color: #ffffff !important;

        text-decoration: none !important;
    }


    body.dpo-body #site-header3.dpo-sub-navbar .nav-link.content-active {
        background:
            rgba(0, 0, 0, 0.10) !important;

        color: #ffffff !important;

        text-decoration: underline !important;
    }


    /* =====================================================
       COMMON FOOTER TABLET / MOBILE
    ===================================================== */

    body.dpo-body .dpo-footer {
        padding: 45px 18px 55px;
    }


    body.dpo-body .dpo-footer-content {
        grid-template-columns: 1fr;

        gap: 25px;

        text-align: center;
    }


    body.dpo-body .dpo-footer-banner img {
        margin-left: auto;
        margin-right: auto;
    }


    body.dpo-body .dpo-footer-links a {
        margin-left: auto;
        margin-right: auto;
    }
}


/* =========================================================
   TABLET / MOBILE <= 768PX
========================================================= */

@media screen and (max-width: 768px) {

    /*
     * Fallback only.
     *
     * The real value should come from Front.php.
     */
    :root {
        --dpo-subheader-top: 104px;
        --dpo-content-top: 158px;
    }


    /* =====================================================
       HERO
    ===================================================== */

    body.dpo-body .dpo-hero,
    body.dpo-body .dpo-about-hero,
    body.dpo-body .dpo-monthly-hero,
    body.dpo-body .dpo-policy-hero,
    body.dpo-body .dpo-resources-hero,
    body.dpo-body .dpo-news-detail-hero {
        height: 120px !important;
        min-height: 120px !important;
    }


    /* =====================================================
       DPO NAVIGATION
    ===================================================== */

    body.dpo-body #site-header3.dpo-sub-navbar>.container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }


    body.dpo-body #site-header3.dpo-sub-navbar .nav-link {
        padding: 11px 15px !important;

        font-size: 13px !important;
    }
}


/* =========================================================
   SMALL MOBILE <= 575PX
========================================================= */

@media screen and (max-width: 575px) {

    /*
     * Fallback only.
     */
    :root {
        --dpo-subheader-top: 94px;
        --dpo-content-top: 148px;
    }


    /* =====================================================
       HERO
    ===================================================== */

    body.dpo-body .dpo-hero,
    body.dpo-body .dpo-about-hero,
    body.dpo-body .dpo-monthly-hero,
    body.dpo-body .dpo-policy-hero,
    body.dpo-body .dpo-resources-hero,
    body.dpo-body .dpo-news-detail-hero {
        height: 100px !important;
        min-height: 100px !important;
    }


    /* =====================================================
       DPO NAVIGATION
    ===================================================== */

    body.dpo-body #site-header3.dpo-sub-navbar>.container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }


    body.dpo-body #site-header3.dpo-sub-navbar .nav-link {
        padding: 10px 12px !important;

        font-size: 12px !important;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    body.dpo-body .dpo-footer {
        padding: 40px 15px 50px;
    }
}