/* SchoolCMS – Footer (template-parts/footer/)
   Burlington House School, from footer 6003:181 (home), 11010:570 /
   11010:642 (inner) and 11010:1020 (mobile) in Figma heKkCZqetGZ4Jss8DyuX3n.
   A purple band with the logo-mark outline behind at 5 %: quick links,
   the school columns and the frosted "Get in touch" card, then the
   social row beside the accreditation logos, then the legal bar.
   Everything stacks below 992px per the mobile mockup, and the card stays
   on its own row until 1200 (.footerMain). WPForms ships no
   CSS, so the card carries its own field chrome, scoped here. */

.site-footer {
    position:   relative;
    isolation:  isolate;
    overflow:   hidden;
    padding:    48px 0;
    background: var(--color-purple);
    color:      var(--color-white);

    @media (min-width: 992px) {
        padding: 132px 0 30px;
    }

    /* the logo-mark outline – one huge rotated copy, the footer sees
       its lower-left quarter (mask-group 6003:184) */
    &::before {
        content:    '';
        position:   absolute;
        z-index:    -1;
        top:        537px;
        left:       calc(50% + 666px);
        width:      3562px;
        height:     3562px;
        translate:  -50% -50%;
        rotate:     18.38deg;
        background: var(--color-white);
        opacity:    0.05;
        mask:       url(../../images/icons/logo-mark-outline.svg) center / contain no-repeat;
        -webkit-mask: url(../../images/icons/logo-mark-outline.svg) center / contain no-repeat;
        pointer-events: none;
    }

    /* Underline always present but transparent, so the hover reveal
       fades (text-decoration itself can't transition) */
    a:not(.socialLink):not(.button):not(.footerLogoLink) {
        color:                 var(--color-white);
        text-decoration:       underline;
        text-decoration-color: transparent;
        transition:            text-decoration-color var(--transition-base);

        &:hover,
        &:focus-visible {
            text-decoration-color: currentColor;
        }
    }

    ul {
        margin:     0;
        padding:    0;
        list-style: none;
    }

    p {
        margin: 0;
    }

    .screen-reader-text {
        position: absolute;
        width:    1px;
        height:   1px;
        overflow: hidden;
        clip:     rect(0 0 0 0);
        white-space: nowrap;
    }

    /* ── Quick links, schools | form card ─────────────────────── */
    /* SIDE BY SIDE FROM 1200 ONLY (col-xl-7 / col-xl-5 in footer.php). At
       992–1199 the 7/12 column left the three schools about 180px each and
       broke the quick links onto a second line, "|" first (Charlie,
       2026-10-21), so there the card takes a row of its own under them, as
       it does below 992, and the links and schools have the full width. */
    .footerMain {
        row-gap: 48px;

        @media (min-width: 1200px) {
            row-gap: 0;
        }
    }

    .footerInfo {
        @media (min-width: 1200px) {
            /* the card starts at the band's top pad; the links 40px lower */
            padding-top: 40px;
        }
    }

    /* the caps kicker style – button text without the disc */
    .quickLinks a,
    .schoolDirections {
        display:        inline-block;
        font:           var(--text-12kx);
        letter-spacing: 2.2px;
        text-transform: uppercase;

        @media (min-width: 992px) {
            letter-spacing: 2.4px;
        }
    }

    .quickLinks {
        margin-bottom: 48px;

        @media (min-width: 992px) {
            margin-bottom: 80px;
        }

        ul {
            display:        flex;
            flex-direction: column;
            align-items:    center;
            gap:            16px;

            @media (min-width: 992px) {
                flex-direction:  row;
                flex-wrap:       wrap;
                align-items:     baseline;
                justify-content: flex-start;
                gap:             8px 0;
            }
        }

        li {
            display: flex;
            align-items: baseline;
        }

        /* "|" between items, desktop only */
        li + li::before {
            content: '|';
            display: none;
            font:    var(--text-12kx);
            margin:  0 38px;

            @media (min-width: 992px) {
                display: inline;
            }
        }
    }

    .footerSchools {
        display:        flex;
        flex-direction: column;
        gap:            32px;

        @media (min-width: 768px) {
            flex-direction: row;
            gap:            0;
        }
    }

    .footerSchool {
        /* hairline rules between the stacked schools (line-6 / line-7) –
           become column dividers from 768px */
        & + & {
            padding-top: 32px;
            border-top:  1px solid var(--color-white-20);

            @media (min-width: 768px) {
                padding-top:  0;
                border-top:   0;
                padding-left: 24px;
                border-left:  1px solid var(--color-white-20);
            }

            @media (min-width: 1200px) {
                padding-left: 40px;
            }
        }

        @media (min-width: 768px) {
            flex:          1 1 0;
            min-width:     0;
            padding-right: 24px;

            &:last-child {
                padding-right: 0;
            }
        }

        @media (min-width: 1200px) {
            padding-right: 40px;
        }
    }

    .schoolName {
        font:   var(--text-20kl);
        color:  var(--color-white);
        margin: 0 0 24px;

        @media (min-width: 992px) {
            margin-bottom: 22px;
        }
    }

    .schoolAddress {
        font:       var(--text-16kl);
        font-style: normal;
        margin:     0;
    }

    /* NOT DRAWN – the company's registration line, asked for under each
       school's address (Luke, Feedbucket #1017230, #1017231, #1017232,
       2026-10-06). Small print, so it takes the legal bar's type and
       opacity rather than the address's. */
    .schoolRegistration {
        margin:  8px 0 0;
        font:    var(--text-14kl);
        opacity: 0.7;
    }

    .schoolPhone {
        font:       var(--text-16kl);
        /* the blank line the design leaves above "Tel:" */
        margin-top: 23px;

        @media (min-width: 992px) {
            margin-top: 26px;
        }
    }

    .schoolDirections {
        margin-top: 16px;

        @media (min-width: 992px) {
            margin-top: 8px;
        }
    }

    /* ── The frosted "Get in touch" card ──────────────────────── */
    .footerCard {
        padding:                 24px 15px 21px;
        border:                  2px solid var(--color-white);
        border-radius:           var(--border-radius-lg);
        background:              var(--color-white-20);
        box-shadow:              var(--shadow-md);
        -webkit-backdrop-filter: blur(var(--blur-frosted));
        backdrop-filter:         blur(var(--blur-frosted));

        @media (min-width: 576px) {
            padding: 40px 40px 28px;
        }
    }

    .footerCardTitle {
        font:          var(--text-40kl);
        color:         var(--color-white);
        margin:        0;
        padding:       0 0 10px;
        border-bottom: 1px solid var(--color-white-60);
    }

    /* WPForms – the plugin loads no stylesheet, so this is the whole
       chrome of the fields inside the card: frosted 34px inputs with a
       white hairline, white placeholders, a 14px square consent box and
       the white .button as the submit (the form's Submit CSS Class setting) */
    .wpforms-container {
        margin:      0;
        padding-top: 23px;

        @media (min-width: 992px) {
            padding-top: 41px;
        }
    }

    .wpforms-form {
        .wpforms-field {
            margin:  0;
            padding: 0 0 22px;
        }

        .wpforms-field-hp,
        .wpforms-field-label.wpforms-label-hide,
        .wpforms-field-sublabel.wpforms-sublabel-hide,
        .wpforms-field-description.wpforms-disclaimer-description:empty {
            position: absolute;
            width:    1px;
            height:   1px;
            overflow: hidden;
            clip:     rect(0 0 0 0);
            white-space: nowrap;
        }

        /* the hidden UTM fields (js/utilities/utm-fields.js) draw nothing,
           so their containers take no row – each was adding a field's 22px
           above the submit. A hidden input still submits from inside a
           display: none container. */
        .wpforms-field-hidden {
            display: none;
        }

        .wpforms-field-label {
            display:       block;
            font:          var(--text-14kl);
            color:         var(--color-white);
            margin-bottom: 8px;
        }

        .wpforms-field-sublabel {
            display:    block;
            font:       var(--text-14kl);
            color:      var(--color-white);
            margin-top: 6px;
        }

        /* First / Last name stack on mobile, share a row from 576px */
        .wpforms-field-row {
            display:        flex;
            flex-direction: column;
            gap:            22px;

            @media (min-width: 576px) {
                flex-direction: row;
                gap:            24px;
            }

            .wpforms-field-row-block {
                flex:      1 1 0;
                min-width: 0;
                width:     auto;
                margin:    0;
                padding:   0;
                float:     none;
            }
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="url"],
        input[type="number"],
        select,
        textarea {
            display:                 block;
            width:                   100%;
            max-width:               100%;
            height:                  34px;
            margin:                  0;
            padding:                 1px 12px;
            border:                  1px solid var(--color-white);
            border-radius:           var(--border-radius-sm);
            background:              var(--color-white-10);
            -webkit-backdrop-filter: blur(var(--blur-frosted));
            backdrop-filter:         blur(var(--blur-frosted));
            box-shadow:              none;
            font:                    var(--text-18kl);
            color:                   var(--color-white);
            -webkit-appearance:      none;
            appearance:              none;
            transition:              background-color var(--transition-base);

            &::placeholder {
                color:   var(--color-white);
                opacity: 1;
            }

            &:focus {
                outline:    none;
                background: var(--color-white-20);
            }

            &:focus-visible {
                outline:        2px solid var(--color-white);
                outline-offset: 2px;
            }
        }

        textarea {
            height:  123px;
            padding: 6px 12px;
            resize:  vertical;
        }

        /* the consent checkbox – WPForms' GDPR Agreement field */
        .wpforms-field-checkbox,
        .wpforms-field-gdpr-checkbox {
            ul {
                display:        flex;
                flex-direction: column;
                gap:            8px;
            }

            li {
                display:     flex;
                align-items: flex-start;
                gap:         13px;
                margin:      0;
            }

            input[type="checkbox"] {
                flex:               none;
                width:              14px;
                height:             14px;
                margin:             6px 0 0;
                border:             1px solid var(--color-white);
                border-radius:      2px;
                background:         var(--color-white-10);
                -webkit-appearance: none;
                appearance:         none;
                cursor:             pointer;
                transition:         background-color var(--transition-base);

                &:checked {
                    background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%2351284f' stroke-width='1.5'/%3E%3C/svg%3E") center / 8px no-repeat;
                }

                &:focus-visible {
                    outline:        2px solid var(--color-white);
                    outline-offset: 2px;
                }
            }

            .wpforms-field-label-inline {
                font:   var(--text-14kl);
                color:  var(--color-white);
                cursor: pointer;
            }
        }

        .wpforms-required-label {
            color: var(--color-white);
        }

        /* validation – gold reads on the purple where the red error
           token would not */
        .wpforms-error,
        em.wpforms-error {
            display:    block;
            font:       var(--text-14kl);
            font-style: normal;
            color:      var(--color-gold);
            margin-top: 6px;
        }

        .wpforms-has-error {
            border-color: var(--color-gold);
        }

        .wpforms-submit-container {
            display:         flex;
            justify-content: flex-end;
            margin:          0;
            padding:         0;
        }

        /* the .button's ink – buttons.css draws the rest */
        .wpforms-submit {
            color: var(--color-white);
        }

        .wpforms-submit-spinner {
            display: none;
        }
    }

    .wpforms-confirmation-container-full {
        margin:  0;
        padding: 31px 0 0;
        font:    var(--text-18kl);
        color:   var(--color-white);
    }

    /* ── Social row + accreditation logos ─────────────────────── */
    .footerBadges {
        display:        flex;
        flex-direction: column;
        gap:            40px;
        margin-top:     48px;

        @media (min-width: 992px) {
            flex-direction:  row;
            align-items:     center;
            justify-content: space-between;
            gap:             40px;
            margin-top:      84px;
        }
    }

    .footerSocials {
        display:     flex;
        align-items: center;
        gap:         28px;

        .socialLink {
            display:         flex;
            align-items:     center;
            justify-content: center;
            min-width:       20px;
            height:          20px;
            color:           var(--color-white);
            font-size:       17px;
            line-height:     1;
            text-decoration: none;
            opacity:         1;
            transition:      opacity var(--transition-base);

            &:hover,
            &:focus-visible {
                opacity: 0.6;
            }
        }
    }

    .footerLogos {
        display:         flex;
        flex-wrap:       wrap;
        align-items:     center;
        justify-content: center;
        gap:             16px;

        @media (min-width: 992px) {
            justify-content: flex-end;
            gap:             16px 30px;
        }

        /* The dim sits on each logo, NOT on the group: opacity on the group
           composites the lot into one layer, and a child inside it can never
           render above the group's own value, so the hover would do nothing.
           A linked logo comes up to full white on hover; an unlinked one has
           nothing to hover and stays dimmed. */
        .footerLogoLink,
        > img {
            opacity:    0.6;
            transition: opacity var(--transition-base);
        }

        .footerLogoLink {

            &:hover,
            &:focus-visible {
                opacity: 1;
            }
        }

        .footerLogoLink {
            display:    block;
            line-height: 0;
        }

        img {
            display:    block;
            width:      auto;
            height:     40px;
            max-width:  110px;
            object-fit: contain;
        }
    }

    /* ── Legal bar ────────────────────────────────────────────── */
    .footerLegal {
        display:        flex;
        flex-direction: column;
        gap:            24px;
        margin-top:     39px;
        font:           var(--text-14kl);
        opacity:        0.7;

        @media (min-width: 992px) {
            display:               grid;
            grid-template-columns: 1fr auto 1fr;
            align-items:           center;
            gap:                   24px;
            margin-top:            53px;
        }

        .credit {
            @media (min-width: 992px) {
                text-align: right;
            }
        }

        .legalLinks ul {
            display:   flex;
            flex-wrap: wrap;
            gap:       0;
        }

        .legalLinks li {
            display: flex;
        }

        .legalLinks li + li::before {
            content: '|';
            margin:  0 12px;
        }
    }
}