/* Import default styles
----------------------------------------*/
@import "../../../../wabs_sitepackage_park/Resources/Private/Scss/fonts";
@import "../../../../wabs_sitepackage_park/Resources/Private/Scss/variables";
@import "fonts";
@import "variables";
@import "../../../../wabs_sitepackage_park/Resources/Private/Scss/park-styles";

@import "park-custom";
@import "meeting-events-variable.scss";

// Primary-bg class — explicit white override (CSS cascade, since entrypoint-variable
// is imported after park-styles and cannot override the SCSS variable at compile time).
.primary-bg {
    background-color: $white !important;
}

// Typography — PF Monumenta Pro applied to headings.
// body parent adds one element to specificity, winning over plain h1–h6
// rules from the park-styles %heading/@extend pattern.
body {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        font-family: $font-family-heading;
    }
}

.hero-main .owl-carousel .figure:before {
    background: $white;
}


// Brand colour application
body {

    // Headings — brand gold
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        color: $brand-gold ;
    }

    // Body copy — brand grey
    p,
    p span,
    li,
    li span,
    .ce-bodytext,
    .ce-bodytext span {
        color: $brand-grey;
    }

    .btn,
    .btn.btn-primary,
    .button.btn-primary,
    input[type=button].btn-primary,
    input[type=submit].btn-primary {
        background-color: $white;
        color: $brand-gold;
    }
}

// Black background section — all text white; form inputs styled for contrast.
.text-color-black-bg {
    background-color: $black;
    width: 100%;

    p,
    span,
    a,
    li,
    label,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        color: $white;
    }

    form {

        input,
        textarea,
        select,
        .form-control,
        .form-select {
            background-color: $white;
            color: $black;
            border-color: $white;
        }

        ::placeholder {
            color: rgba(0, 0, 0, 0.5);
        }
    }

    .btn,
    .btn.btn-primary,
    .button.btn-primary,
    input[type=button].btn-primary,
    input[type=submit].btn-primary {
        background-color: #d6ae5b;
        color: #000000;
    }
}

// Gold background section — all text white; form inputs styled for contrast.
.text-color-gold-bg {
    background-color: $brand-gold;
    width: 100%;

    p,
    span,
    a,
    li,
    label,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        color: $white;
    }

    form {

        input,
        textarea,
        select,
        .form-control,
        .form-select {
            background-color: $white;
            color: $black;
            border-color: $white;
        }

        ::placeholder {
            color: rgba(0, 0, 0, 0.5);
        }
    }
}

// Slider arrows — gold icon on black background (meeting-events pages only)
.owl-carousel .owl-nav button.owl-next::before,
.owl-carousel .owl-nav button.owl-prev::before,
.owl-carousel .owl-nav button.owl-next:hover::before,
.owl-carousel .owl-nav button.owl-prev:hover::before,
.owl-carousel .owl-nav button.owl-next:focus::before,
.owl-carousel .owl-nav button.owl-prev:focus::before,
.owl-carousel .owl-nav button.owl-next:active::before,
.owl-carousel .owl-nav button.owl-prev:active::before {
    color: $brand-gold !important;
    background: $black !important;
    box-shadow: none !important;
}

// Slider dots — black inactive, gold active (meeting-events pages only)
.owl-carousel .owl-dots button.owl-dot {
    background: $black !important;
    box-shadow: none !important;

    &:hover,
    &:focus,
    &:active,
    &.active {
        background: $brand-gold !important;
        box-shadow: $brand-gold 0 0 0 3px !important;
    }
}