/* Beacon Bay Therapy — shared website header isolation
   Source of truth: the public index.php header as rendered by the normal theme.
   Scope: public site, client portal and admin.

   This file intentionally does NOT redesign the header. It only prevents page-level
   CSS from leaking into it. The header body's background colour is deliberately left
   to each context (public hero / portal / admin).
*/

/* Admin styles use generic custom-property names such as --primary and --secondary.
   The website's gradient Contact CTA also uses those names, so isolate the header's
   theme values at the header element instead of allowing page variables to inherit. */
#header {
    --primary: #7ec3f6;
    --primary-100: #9fbbdc;
    --primary-200: #9fbbdc;
    --primary-300: #9fbbdc;
    --primary--100: #9fbbdc;
    --primary--200: #9fbbdc;
    --primary--300: #9fbbdc;
    --primary-rgba-50: rgba(134, 171, 165, 0.5);
    --primary-inverse: #fff;

    --secondary: #7ec3f6;
    --secondary-100: #77a19a;
    --secondary-200: #9fbbdc;
    --secondary-300: #9fbbdc;
    --secondary--100: #9fbbdc;
    --secondary--200: #9fbbdc;
    --secondary--300: #9fbbdc;
    --secondary-inverse: #fff;

    /* The public theme's inherited type metrics. This stops admin body fonts such as
       Roboto Condensed / Open Sans / Outfit from compressing the navigation. */
    font-family: "Poppins", Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 26px !important;
}

#header,
#header *,
#header *::before,
#header *::after {
    box-sizing: border-box !important;
}

#header .header-body,
#header .header-nav,
#header .header-nav-main,
#header .header-nav-main nav,
#header .header-nav-main a,
#header .header-nav > a.btn,
#header .header-btn-collapse-nav {
    font-family: "Poppins", Arial, sans-serif !important;
}

/* IMPORTANT: no background/background-color declaration for .header-body here. */

/* Protect the Bootstrap website container from legacy admin .container rules
   (some admin pages otherwise turn the header container into a white card and/or
   shrink it to 54em/72em). These are the same widths used by the public theme. */
#header .header-container.container {
    --bs-gutter-x: 1.5rem;
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (min-width: 576px) {
    #header .header-container.container { max-width: 540px !important; }
}
@media (min-width: 768px) {
    #header .header-container.container { max-width: 720px !important; }
}
@media (min-width: 992px) {
    #header .header-container.container { max-width: 960px !important; }
}
@media (min-width: 1200px) {
    #header .header-container.container { max-width: 1140px !important; }
}
@media (min-width: 1400px) {
    #header .header-container.container { max-width: 1320px !important; }
}
@media (min-width: 1440px) {
    /* demo-creative-agency-2.css public reference */
    #header .header-container.container { max-width: 1440px !important; }
}

/* Keep the logo itself immune to generic image/card rules, without changing the
   public theme's native 1rem .header-logo margins. */
#header .header-logo img {
    width: 170px !important;
    height: 45px !important;
    max-width: none !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Top-level desktop nav: the demo stylesheet already supplies 12px/500 sizing and
   responsive spacing. Pin the same values so late-loaded admin CSS cannot change
   them. Nothing here changes the public index appearance. */
@media (min-width: 992px) {
    #header .header-nav-main nav > ul {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #header .header-nav-main nav > ul > li {
        margin-left: 2px !important;
        padding: 0 !important;
    }

    #header .header-nav.header-nav-links nav > ul > li > a,
    #header .header-nav.header-nav-links nav > ul > li:hover > a {
        font-family: "Poppins", Arial, sans-serif !important;
        font-size: 12px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: 26px !important;
        letter-spacing: -.5px !important;
        text-transform: capitalize !important;
        text-decoration: none !important;
        color: #fff !important;
        background: transparent !important;
        min-height: 60px !important;
        height: 100% !important;
        margin: 1px 0 0 !important;
        padding-left: 1.3rem !important;
        padding-right: 1.3rem !important;
        border-radius: 4px !important;
    }

    #header .header-nav > a.btn {
        /* Exact public index CTA metrics: theme .btn + py-lg-3 + ms-4. */
        display: inline-block !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 1.5rem !important;
        padding-top: 1rem !important;
        padding-right: .933rem !important;
        padding-bottom: 1rem !important;
        padding-left: .933rem !important;
        border: 0 !important;
        border-radius: .375rem !important;
        background: linear-gradient(135deg, #7ec3f6 0%, #7ec3f6 80%) !important;
        color: #161326 !important;
        box-shadow: none !important;
        font-family: "Poppins", Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        letter-spacing: normal !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    #header .header-nav > a.btn span {
        display: block !important;
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
        white-space: nowrap !important;
    }

    #header .header-btn-collapse-nav {
        display: none !important;
    }
}

/* demo-creative-agency-2.css reduces desktop nav padding at <=1280px. */
@media (min-width: 992px) and (max-width: 1280px) {
    #header .header-nav.header-nav-links nav > ul > li > a,
    #header .header-nav.header-nav-links nav > ul > li:hover > a {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

#header .header-nav > a.btn:hover,
#header .header-nav > a.btn.hover {
    background: linear-gradient(135deg, #9fbbdc 0%, #9fbbdc 80%) !important;
    color: #161326 !important;
}

#header .header-nav > a.btn:focus,
#header .header-nav > a.btn.focus {
    color: #161326 !important;
}

/* Mobile values mirror the mobile critical CSS already embedded in header.php.
   They are repeated here only so late admin .btn/button rules cannot win. */
@media (max-width: 991.98px) {
    #header .header-container.container {
        max-width: none !important;
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #header .header-logo img {
        width: 170px !important;
        height: 45px !important;
        max-width: 52vw !important;
    }

    #header .header-nav > a.btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        margin-left: 0 !important;
        min-height: 44px !important;
        padding: 10px 14px !important;
        border: 0 !important;
        border-radius: .375rem !important;
        background: linear-gradient(135deg, #7ec3f6 0%, #7ec3f6 80%) !important;
        color: #161326 !important;
        box-shadow: none !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        white-space: nowrap !important;
    }

    #header .header-nav > a.btn span {
        padding-left: 0 !important;
        padding-right: 0 !important;
        white-space: nowrap !important;
    }

    #header .header-btn-collapse-nav {
        width: auto !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        font-family: "Poppins", Arial, sans-serif !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* Match header.php's tablet/phone-landscape shell exactly. */
    #header .header-container.container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    #header .header-logo img {
        width: 170px !important;
        height: 45px !important;
        max-width: 34vw !important;
    }
}

@media (max-width: 767px) {
    #header .header-nav > a.btn {
        min-width: 108px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

@media (max-width: 360px) {
    #header .header-logo img {
        width: 145px !important;
        max-width: 42vw !important;
    }
    #header .header-nav > a.btn {
        min-width: 96px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (min-width: 568px) and (max-width: 991.98px) and (orientation: landscape) {
    #header .header-logo img {
        width: 145px !important;
        height: auto !important;
        max-width: 26vw !important;
    }
    #header .header-nav > a.btn {
        min-width: 108px !important;
        min-height: 40px !important;
        padding: 8px 16px !important;
    }
    #header .header-btn-collapse-nav {
        min-width: 40px !important;
        min-height: 40px !important;
    }
}