/*
 * Booking My Surf — footer design layer.
 *
 * Registered globally from Themes\BC\Core\ModuleProvider via Assets::registerCss,
 * so the footer looks the same on every page rather than only where a page-level
 * @push('css') happens to run. There is no frontend SCSS build wired up in this
 * repo (node_modules is absent and webpack.mix only builds admin), so this is a
 * hand-authored stylesheet.
 *
 * Every rule is scoped to .bravo_footer on purpose — this file loads site-wide.
 * It is emitted before @stack('css'), so page-level styles can still override it.
 */

.bravo_footer {
    --bmsf-deep: #062730;
    --bmsf-deep-2: #0b3a45;
    --bmsf-teal: #81c5bb;
    /* #81C5BB is only 1.97:1 on white and fails WCAG AA as text; this darker step
       measures 4.97:1. Teal stays for fills, this for text on light backgrounds. */
    --bmsf-teal-text: #347b72;
    --bmsf-ink: #0e1b22;
    --bmsf-muted: #5b6b73;
}

/* ------------------------------------------------------------------
   Newsletter band
   Was a flat navy that clashed with the deep-ocean CTA directly above
   it; this continues the same gradient so the two read as one base.
------------------------------------------------------------------ */
.bravo_footer .mailchimp {
    /*
       Starts on #0e4b57 — the exact colour the landing page's call-to-action band
       ends on — so where the two stack they read as one continuous dark base. They
       previously each ran a 115deg diagonal across boxes of different heights, so
       their colours disagreed at the junction and it showed as a mismatched step.
       Keep in sync with .bravo-call-to-action in the landing design layer.
    */
    background: linear-gradient(180deg, #0e4b57 0%, var(--bmsf-deep) 100%) !important;
    padding: 52px 0 !important;
}

.bravo_footer .mailchimp .media {
    display: flex;
    align-items: center;
    gap: 18px;
}

.bravo_footer .mailchimp .media-left {
    flex: 0 0 auto;
}

.bravo_footer .mailchimp .media-heading {
    font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.015em;
    line-height: 1.15 !important;
    color: #fff !important;
    /* Stops "Catch the latest swell!" breaking after "latest". */
    max-width: 22ch;
    margin: 0 0 6px !important;
}

.bravo_footer .mailchimp .media-body p {
    color: rgba(255, 255, 255, .78) !important;
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
    max-width: 44ch;
}

/* Subscribe form — pill field with a solid button.
   The button was white on #81C5BB (1.97:1). Deep ink on teal is 7.93:1. */
.bravo_footer .mailchimp .subcribe-form .form-group {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    padding: 6px 6px 6px 8px;
    margin: 0;
    max-width: 480px;
}

.bravo_footer .mailchimp .subcribe-form .form-control.email-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 15px;
    padding: 0 12px !important;
}

.bravo_footer .mailchimp .subcribe-form .form-control.email-input::placeholder {
    color: rgba(255, 255, 255, .62);
    opacity: 1;
}

.bravo_footer .mailchimp .subcribe-form .btn-submit {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 26px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--bmsf-teal) !important;
    color: var(--bmsf-deep) !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.bravo_footer .mailchimp .subcribe-form .btn-submit:hover,
.bravo_footer .mailchimp .subcribe-form .btn-submit:focus {
    background: #fff !important;
    transform: translateY(-1px);
}

.bravo_footer .mailchimp .subcribe-form .form-mess {
    color: #fff;
    font-size: 13px;
    margin-top: 10px;
}

@media (max-width: 991px) {
    .bravo_footer .mailchimp {
        padding: 40px 0 !important;
    }

    .bravo_footer .mailchimp .subcribe-form .form-group {
        margin-top: 20px;
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------
   Link columns
------------------------------------------------------------------ */
.bravo_footer .main-footer {
    padding: 56px 0 44px !important;
}

.bravo_footer .main-footer .nav-footer .title {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bmsf-ink) !important;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(6, 39, 48, .1) !important;
}

.bravo_footer .main-footer .nav-footer .context ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bravo_footer .main-footer .nav-footer .context ul li {
    margin-bottom: 11px;
    list-style: none;
}

.bravo_footer .main-footer .nav-footer .context ul li a {
    color: var(--bmsf-muted) !important;
    font-size: 14.5px;
    line-height: 1.5;
    text-decoration: none;
    transition: color .18s ease;
}

.bravo_footer .main-footer .nav-footer .context ul li a:hover,
.bravo_footer .main-footer .nav-footer .context ul li a:focus {
    color: var(--bmsf-teal-text) !important;
    text-decoration: none;
}

/* The contact block carried a stray teal left-border that read as an artifact. */
.bravo_footer .main-footer .nav-footer .context .contact {
    border-left: 0 !important;
    padding-left: 0 !important;
}

.bravo_footer .main-footer .nav-footer .context a[href^="mailto:"] {
    color: var(--bmsf-teal-text) !important;
    font-weight: 700;
    word-break: break-word;
}

/* The first column is not a link list but "Contact Us" / "Follow Us" blocks:
   .contact > .c-title + .sub, where the social links live inside .sub. */
.bravo_footer .main-footer .nav-footer .context .contact {
    margin-bottom: 22px;
}

.bravo_footer .main-footer .nav-footer .context .contact .c-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bmsf-muted);
    margin-bottom: 9px;
}

.bravo_footer .main-footer .nav-footer .context .contact .sub {
    color: var(--bmsf-ink);
    font-size: 14.5px;
    line-height: 1.5;
    word-break: break-word;
}

/* Only the .sub that actually holds the icon links becomes a row of squares —
   the sibling .sub holds the plain-text email address. */
.bravo_footer .main-footer .nav-footer .context .contact .sub:has(a > i) {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* Footer socials: match the rounded-square treatment used in the topbar, and give
   them enough contrast — they were faint teal glyphs on white. */
.bravo_footer .main-footer .nav-footer .context .socials,
.bravo_footer .main-footer .nav-footer .context ul.socials {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.bravo_footer .main-footer .nav-footer .context .contact .sub a:has(> i),
.bravo_footer .main-footer .nav-footer .context .socials a {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: var(--bmsf-deep);
    color: #fff !important;
    transition: background .2s ease, transform .2s ease;
}

.bravo_footer .main-footer .nav-footer .context .contact .sub a:has(> i):hover,
.bravo_footer .main-footer .nav-footer .context .socials a:hover {
    background: var(--bmsf-teal-text);
    transform: translateY(-2px);
}

.bravo_footer .main-footer .nav-footer .context .contact .sub a > i,
.bravo_footer .main-footer .nav-footer .context .socials a i,
.bravo_footer .main-footer .nav-footer .context .socials a img {
    color: #fff !important;
    font-size: 15px;
    line-height: 1;
}

.bravo_footer .main-footer .nav-footer .context .socials a img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
    .bravo_footer .main-footer {
        padding: 36px 0 20px !important;
    }

    .bravo_footer .main-footer .nav-footer {
        margin-bottom: 28px;
    }
}

/* ------------------------------------------------------------------
   Copyright
------------------------------------------------------------------ */
.bravo_footer .copy-right {
    border-top: 1px solid rgba(6, 39, 48, .1);
    padding: 22px 0 !important;
}

.bravo_footer .copy-right,
.bravo_footer .copy-right p {
    color: var(--bmsf-muted) !important;
    font-size: 13.5px;
    margin: 0;
}

.bravo_footer .copy-right a {
    color: var(--bmsf-teal-text) !important;
}

/* Keyboard focus — the theme suppresses outlines globally. */
.bravo_footer a:focus-visible,
.bravo_footer button:focus-visible,
.bravo_footer input:focus-visible {
    outline: 3px solid var(--bmsf-teal-text) !important;
    outline-offset: 3px;
}

.bravo_footer .mailchimp a:focus-visible,
.bravo_footer .mailchimp button:focus-visible,
.bravo_footer .mailchimp input:focus-visible {
    outline-color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
    .bravo_footer .mailchimp .subcribe-form .btn-submit,
    .bravo_footer .main-footer .nav-footer .context .socials a {
        transition: none !important;
    }

    .bravo_footer .mailchimp .subcribe-form .btn-submit:hover,
    .bravo_footer .main-footer .nav-footer .context .socials a:hover {
        transform: none !important;
    }
}