/*----------------------------------------------------------*/
/*  Qualifications For (Q4) - brand overrides
/*  Colours sampled from the Q4 logo:
/*      orange  #ED7D31   (wordmark)
/*      grey    #767171   ("4" glyph)
/*  Loaded AFTER the template stylesheets so it wins.
/*----------------------------------------------------------*/

:root {
    /* Core palette */
    --pbmit-global-color: #ED7D31;
    --pbmit-global-color-rgb: rgb(237, 125, 49);
    --pbmit-secondary-color: #3A3737;
    --pbmit-secondary-color-rgb: rgb(58, 55, 55);
    --pbmit-blackish-color: #2B2828;
    --pbmit-light-color: #F6F3F1;
    --pbmit-white-color: #ffffff;
    --pbmit-link-color-normal: #3A3737;
    --pbmit-link-color-hover: #ED7D31;

    /* Q4 tokens used by the custom sections below */
    --q4-orange: #ED7D31;
    --q4-orange-dark: #D2661C;
    --q4-grey: #767171;
    --q4-grey-dark: #3A3737;
    --q4-body: #5F5A5A;

    --pbmit-body-typography-color: #5F5A5A;
    --pbmit-heading-color: #2B2828;
}

/* The template hard-codes its amber in a few places - re-point them. */
[class*="pbmit-bg-color-global"],
.pbmit-bg-color-global {
    background-color: var(--q4-orange) !important;
}

.pbmit-text-color-global,
a:hover,
.pbmit-heading-subheading .pbmit-subtitle {
    color: var(--q4-orange);
}

/*--------------------------------------------------*/
/*  Footer
/*  The template hard-codes a navy (#0a1229) on .site-footer
/*  and its ::before layer - repoint both to the Q4 charcoal.
/*--------------------------------------------------*/
.footer.site-footer,
.footer.site-footer::before {
    background-color: var(--q4-grey-dark);
}

/*--------------------------------------------------*/
/*  Buttons
/*  A bare .pbmit-btn is the template's *text-link* style
/*  (transparent, white text) - it is only legible on dark
/*  backgrounds. Solid buttons need .pbmit-btn-global etc.
/*  .q4-btn-outline is added for CTAs sitting on the hero.
/*--------------------------------------------------*/
.pbmit-btn.q4-btn-outline {
    padding: 18px 35px;
    border: 1px solid rgba(255, 255, 255, .55);
    background-color: transparent;
    color: #fff;
    text-transform: uppercase;
}

.pbmit-btn.q4-btn-outline:hover {
    border-color: #fff;
    background-color: #fff;
    color: var(--q4-grey-dark);
}

/*--------------------------------------------------*/
/*  Logo sizing
/*--------------------------------------------------*/
.site-branding .logo-img {
    max-height: 46px;
    width: auto;
}

.pbmit-footer-logo.img-fluid {
    max-height: 60px;
    width: auto;
}

/*--------------------------------------------------*/
/*  Hero
/*--------------------------------------------------*/
.q4-hero {
    position: relative;
    padding: 170px 0 150px;
    background: linear-gradient(rgba(43, 40, 40, .72), rgba(43, 40, 40, .72)),
                url('../images/homepage-1/about-01.jpg') center / cover no-repeat;
    color: #fff;
}

.q4-hero__eyebrow {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 18px;
    border-radius: 2px;
    background-color: var(--q4-orange);
    color: #fff;
    font-family: var(--pbmit-btn-typography-font-family);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.q4-hero__title {
    max-width: 15ch;
    margin-bottom: 26px;
    color: #fff;
    font-size: 62px;
    line-height: 1.08;
}

.q4-hero__desc {
    max-width: 62ch;
    margin-bottom: 38px;
    color: rgba(255, 255, 255, .82);
    font-size: 18px;
    line-height: 32px;
}

.q4-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

@media (max-width: 991px) {
    .q4-hero {
        padding: 110px 0 95px;
    }

    .q4-hero__title {
        font-size: 40px;
    }
}

/*--------------------------------------------------*/
/*  Feature cards (home)
/*--------------------------------------------------*/
.q4-feature {
    height: 100%;
    padding: 42px 34px;
    border: 1px solid #E7E1DD;
    border-radius: 3px;
    background-color: #fff;
    transition: all .35s ease;
}

.q4-feature:hover {
    border-color: var(--q4-orange);
    box-shadow: 0 18px 40px rgba(43, 40, 40, .10);
    transform: translateY(-6px);
}

.q4-feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 26px;
    border-radius: 50%;
    background-color: rgba(237, 125, 49, .12);
    color: var(--q4-orange);
    font-size: 28px;
}

.q4-feature__title {
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 1.35;
}

.q4-feature p {
    margin-bottom: 0;
}

/*--------------------------------------------------*/
/*  Contact strip (orange bar)
/*--------------------------------------------------*/
.q4-contact-strip {
    padding: 58px 0;
    background-color: var(--q4-orange);
    color: #fff;
}

.q4-contact-strip__item {
    text-align: center;
    padding: 12px 10px;
}

.q4-contact-strip__item i {
    display: block;
    margin-bottom: 16px;
    font-size: 34px;
}

.q4-contact-strip__item h4 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 15px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.q4-contact-strip__item p,
.q4-contact-strip__item a {
    margin-bottom: 0;
    color: rgba(255, 255, 255, .92);
}

.q4-contact-strip__item a:hover {
    color: #fff;
    text-decoration: underline;
}

/*--------------------------------------------------*/
/*  Booking iframe
/*--------------------------------------------------*/
.q4-booking-frame {
    width: 100%;
    min-height: 700px;
    border: 0;
}

/*--------------------------------------------------*/
/*  Long-form legal / prose pages
/*--------------------------------------------------*/
.q4-prose h2 {
    margin-top: 42px;
    margin-bottom: 16px;
    font-size: 26px;
}

.q4-prose h2:first-child {
    margin-top: 0;
}

.q4-prose p {
    margin-bottom: 18px;
}

.q4-prose__updated {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid #E7E1DD;
    color: var(--q4-grey);
    font-size: 15px;
}

/*--------------------------------------------------*/
/*  Static-SSR form validation states
/*--------------------------------------------------*/
.q4-form .validation-message {
    display: block;
    margin-top: 6px;
    color: #C0392B;
    font-size: 14px;
}

.q4-form .form-control.invalid {
    border-color: #C0392B;
}

.q4-alert {
    margin-bottom: 28px;
    padding: 16px 20px;
    border-left: 3px solid var(--q4-orange);
    background-color: rgba(237, 125, 49, .10);
    color: var(--q4-grey-dark);
}

.q4-alert--error {
    border-left-color: #C0392B;
    background-color: rgba(192, 57, 43, .08);
}

/*--------------------------------------------------*/
/*  Admin area (/admin/*)
/*--------------------------------------------------*/
.q4-admin-card {
    margin-bottom: 30px;
    padding: 28px 30px;
    border: 1px solid #E7E1DD;
    background-color: #fff;
}

.q4-admin-card > p:last-child {
    margin-bottom: 0;
}

.q4-admin-card .heading-title {
    margin-bottom: 8px;
}

.q4-admin-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.q4-admin-topbar p {
    margin-bottom: 0;
}

.q4-admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* Buttons that are really links: "Sign out", "Set active", "Delete". */
.q4-admin-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--q4-orange);
    text-decoration: underline;
}

.q4-admin-link:hover {
    color: var(--q4-grey-dark);
}

.q4-admin-disabled {
    color: var(--q4-grey);
    opacity: .65;
}

.q4-admin-hint {
    display: block;
    margin: 2px 0 0;
    color: var(--q4-grey);
    font-size: 13px;
}

.q4-admin-active {
    color: #2E7D32;
}

.q4-admin-warn {
    color: #C0392B;
}

.q4-admin-table {
    width: 100%;
    border-collapse: collapse;
}

.q4-admin-table th,
.q4-admin-table td {
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid #E7E1DD;
    text-align: left;
    vertical-align: top;
}

.q4-admin-table th {
    color: var(--q4-grey-dark);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/*--------------------------------------------------*/
/*  Footer developer credit
/*--------------------------------------------------*/
.q4-footer-credit {
    display: inline-block;
    margin-left: 6px;
}

.q4-footer-credit::before {
    content: "|";
    margin-right: 8px;
    opacity: .4;
}

@media (max-width: 767px) {
    .q4-footer-credit {
        display: block;
        margin-left: 0;
        margin-top: 6px;
    }

    .q4-footer-credit::before {
        content: none;
    }
}