/* ========================================
   LIGHT-TOUCH BRANDING
   Buttons, Accordions & Tabs
   ======================================== */


/* ----------------------------------------
   BUTTONS
   ---------------------------------------- */

/* Primary button */

.btn-primary {
    color: var(--w-sys-colors-bg) !important;
    background-color: #000000 !important;
    font-weight: 600;
    border: 1px black solid !important;
    font-size: 16px;
    min-height: 45px;
    border-radius: 0px;
    align-items: center;
    display: flex;
    box-shadow: 0 0 0 0px #000;
    transition: box-shadow 0.3s cubic-bezier(0.57, 0.19, 0.26, 1.15);
    justify-content: space-between;
    padding: 6px 18px;
}

/* Primary button hover */

.btn-primary:hover {
    background-color: #000;
    box-shadow: 0 0 0 5px #000;
}

/* Primary button - white text override */

.btn-primary.white-text,
.btn-primary.white-text i {
    color: #fff !important;
}


/* Secondary button */

.btn-secondary {
    border: 1px solid black;
    color: black !important;
    background: none;
    text-decoration: none !important;
}

.btn-secondary:hover {
    background-color: #000;
    color: white !important;
}

/* Secondary button on dark backgrounds */

.pg-dark .btn-secondary {
    border: 1px solid white;
    color: white !important;
}

.pg-dark .btn-secondary:hover {
    background-color: #fff;
    color: black !important;
}


/* Button icons */

.btn-primary i,
.btn-secondary i {
    margin-left: 15px;
    font-size: 24px;
}

.overlayContent .btn-primary i,
.overlayContent .btn-secondary i {
    margin-left: 0;
}


/* Hide new-window icon on buttons */

.btn-primary i.new-window-link,
.btn-secondary i.new-window-link {
    display: none;
}

/* Centre button height vertically */
.centre-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Mobile buttons */

@media (max-width: 767px) {

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }

    .cta-links .btn-primary,
    .cta-links .btn-secondary {
        width: auto;
    }

    .btn-primary i,
    .btn-secondary i {
        margin-left: auto;
    }
}


/* ----------------------------------------
   FOCUS STATES
   ---------------------------------------- */

a:focus,
.form-control:focus,
.dropdown-menu > .active > a:focus,
.dropdown-toggle:focus,
.open > a:focus,
[role=button]:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 4px black;
    outline: none;
}

.id7-navigation button.nav-dropdown-button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: revert;
    box-shadow: 0 0 0 2px white, 0 0 0 4px black;
}

button:focus-visible,
a:focus-visible {
    box-shadow: 0 0 0 2px white, 0 0 0 4px black;
}


/* ----------------------------------------
   ACCORDIONS
   ---------------------------------------- */

button.tabs-component--accordion-button.btn.btn-default.btn-lg:focus {
    background-color: var(--w-sys-colors-bg) !important;
    box-shadow: none;
}

button.tabs-component--accordion-button.btn.btn-default.btn-lg:focus-visible {
    box-shadow: 0 0 0 2px white, 0 0 0 4px black !important;
    background-color: var(--w-sys-focusOutline) !important;
}

.tabs-accordion button.tabs-component--accordion-button.btn.btn-default.btn-lg {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0px;
    border: none;
    border-top: 1px solid black;
    border-bottom: 0px solid black;
    margin: 0px 0px -2px 0px;
    background: transparent;
}

/* Mobile accordion */

@media (max-width: 768px) {

    button.tabs-component--accordion-button.btn.btn-default.btn-lg {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0px;
        border: none;
        border-top: 1px solid black;
        border-bottom: 0px solid black;
        margin: 0px 0px -2px 0px;
        background: transparent;
    }
}

button.tabs-component--accordion-button.btn.btn-default.btn-lg.expanded {
    border-bottom: none;
}

.tabs-component--accordion-button h3,
.tabs-component--accordion-button h4,
.tabs-component--accordion-button h5 {
    margin: 0px;
}

.tabs-component--accordion-button i {
    color: var(--w-sys-colors-bg);
    background: black;
    padding: 10px;
    margin: 0px !important;
}

.tabs-component .panel.panel-default {
    border: none;
    margin-top: 5px;
}

.tabs-component .panel-body {
    padding: 15px 0px 40px;
}

.tabs-component .panel {
    background-color: var(--w-sys-colors-bg);
}

.tabs-component .panel.panel-default {
    box-shadow: 0 0px 0px #000000;
}

.tabs-component--panels .tabs-component--panels.tab-content {
    box-shadow: 0 1px 0 0 black;
}

.accordion-heading {
    color: #262626;
}


/* Nested accordion */

@media (max-width: 768px) {

    .tabs-component--panels .tabs-accordion
    button.tabs-component--accordion-button.btn.btn-default.btn-lg {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 0px;
        border-top: 1px solid #999999;
        border-bottom: 0px;
    }

    .tabs-component--panels .tabs-accordion
    .tabs-component--panels.tab-content {
        border-bottom: 0px;
        margin-left: 30px;
        box-shadow: 0 1px 0 0 #999999;
    }

    .tabs-component .tabs-component
    .tabs-component--accordion-button i {
        color: var(--w-sys-colors-bg);
        background: black;
    }

    .tabs-component--panels
    .tabs-component--panels.tab-content {
        box-shadow: none;
    }

    .tabs-component--panels.tab-content {
        box-shadow: 0 1px 0 0 black;
    }
}


/* ----------------------------------------
   TABS
   ---------------------------------------- */

@media (min-width: 768px) {

    .tabs-component > .tabs-component--tablist {
        justify-content: center;
        padding: 10px 0px 30px;
    }
}

.tabs-component > .tabs-component--tablist > button {
    background-color: var(--w-sys-colors-bg);
    border: 1px solid black !important;
    border-radius: 0px;
}

.tabs-component > .tabs-component--tablist > button:hover,
.tabs-component > .tabs-component--tablist > button.active {
    background-color: black;
    color: var(--w-sys-colors-bg);
}


/* ----------------------------------------
   HERO CREST
   ----------------------------------------
   Components Editor structure:

   Outer container box style:
   header crest-right

   Inner container box style:
   header-content

   Put the h2 and any supporting content inside
   the inner header-content container.

   These rules use the system-wide ID7 crest asset,
   but also create the pseudo-element locally so the
   hero does not depend on the system selector winning
   the CSS cascade.
   ---------------------------------------- */

.header.crest-right {
    --w-sys-images-crest: var(--w-ref-images-crestPositive);
}

.header.crest-right::before {
    display: block;
    content: var(--w-sys-images-crest);
    height: var(--w-sys-crestHeight);
    aspect-ratio: var(--w-sys-crestAspect);
    margin-left: auto;
}

.header.crest-right .header-content {
    min-width: 0;
}

.header.crest-right h2 {
    font-size: 7rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 30px;
    padding-top: 0;
}

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

    .header.crest-right {
        display: flex;
        align-items: center;
        gap: 40px;
    }

    .header.crest-right .header-content {
        flex: 1 1 auto;
        align-self: center;
    }

    .header.crest-right::before {
        order: 1;
        flex: 0 0 auto;
    }
}

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

    .header.crest-right h2 {
        font-size: 6rem;
    }

    .header.crest-right::before {
        margin-bottom: 30px;
    }
}