/*
 * .gp-footer — site footer for the Performance design.
 *
 * Layout: 4-column grid (1.3fr 1fr 1fr 1.3fr).
 *   Col 1: brand (mark + tagline + socials)
 *   Col 2: SITE MAP links
 *   Col 3: SUPPORT links
 *   Col 4: NEWSLETTER (heading + body + inline input + JOIN button)
 *
 * One source of truth. Selectors prefixed with .gp-footer + element +
 * !important on the load-bearing declarations so the same rules win
 * on legacy pages too — Bootstrap and the parent style.css were
 * leaking into li margin, h4 color, input bg, ul indent. Don't fight
 * them in legacy-compat — beat them here, once.
 */

.gp-footer,
.gp-footer * {
    text-align: left !important;
    box-sizing: border-box !important;
}
.gp-footer {
    background: #000 !important;
    color: var(--gp-text) !important;
    border-top: var(--gp-border-w) solid var(--gp-border) !important;
    padding: 36px var(--gp-page-gutter) 16px !important;
    /* Bootstrap body has line-height: 20px on legacy pages — lock our own. */
    line-height: 1.4 !important;
    font-family: var(--gp-font-body) !important;
    font-size: var(--gp-fs-body-sm) !important;
}

.gp-footer__grid {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr 1fr 1.3fr !important;
    gap: var(--gp-space-6) !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
}

/* Column 1 — brand block. Masked PNG so the mark tints to brand gold. */
.gp-footer__brand-mark {
    display: inline-block !important;
    width: 64px !important;
    height: 44px !important;
    background-color: var(--gp-gold) !important;
    -webkit-mask-image: url("../../img/gp_logo-gold.png") !important;
            mask-image: url("../../img/gp_logo-gold.png") !important;
    -webkit-mask-size: contain !important;
            mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    -webkit-mask-position: left center !important;
            mask-position: left center !important;
}

.gp-footer__tagline {
    font-family: var(--gp-font-display) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 0.10em !important;
    line-height: 1.1 !important;
    margin: 8px 0 12px !important;
    color: var(--gp-text) !important;
}
.gp-footer__tagline-accent { color: var(--gp-gold) !important; }

/* Column heading — small mono gold eyebrow */
.gp-footer .gp-footer__heading,
h4.gp-footer__heading {
    font-family: var(--gp-font-mono) !important;
    font-size: var(--gp-fs-meta-sm) !important;
    font-weight: 500 !important;
    letter-spacing: var(--gp-ls-meta-wider) !important;
    text-transform: uppercase !important;
    color: var(--gp-gold) !important;
    line-height: 1 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

/* Link lists — Bootstrap adds margin: 0 0 10px 25px to every ul/ol;
   reset to 0 for the chrome lists. */
.gp-footer .gp-footer__list,
ul.gp-footer__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.gp-footer .gp-footer__list li {
    margin: 0 0 6px !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
.gp-footer .gp-footer__list a {
    color: var(--gp-text) !important;
    font-family: var(--gp-font-body) !important;
    font-size: var(--gp-fs-body-sm) !important;
    text-decoration: none !important;
    transition: color var(--gp-dur-base) var(--gp-ease-standard);
}
.gp-footer .gp-footer__list a:hover { color: var(--gp-gold) !important; }

/* Newsletter */
.gp-footer .gp-newsletter__copy {
    font-family: var(--gp-font-body) !important;
    font-size: var(--gp-fs-body-sm) !important;
    color: var(--gp-text-dim) !important;
    line-height: var(--gp-lh-body) !important;
    margin: 0 0 16px !important;
}
.gp-footer .gp-newsletter__form {
    display: flex !important;
    border: var(--gp-border-w) solid var(--gp-border) !important;
    background: transparent !important;
    margin: 0 !important;
}
/* Bootstrap's input[type=email] hits our input; the
   `input.gp-newsletter__input` selector ties on specificity, then
   !important lets us win. */
.gp-footer input.gp-newsletter__input,
input[type="email"].gp-newsletter__input,
.gp-newsletter__input {
    flex: 1 1 auto !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    padding: 14px 16px !important;
    color: var(--gp-text) !important;
    font-family: var(--gp-font-body) !important;
    font-size: var(--gp-fs-body-sm) !important;
    outline: none !important;
    min-width: 0;
    border-radius: 0 !important;
    margin: 0 !important;
    /* Bootstrap (loaded on legacy pages) sets `input { height: 20px;
       line-height: 20px; }` with !important via more-specific
       selectors, which squashes our padding box. Force border-box +
       a minimum tall enough for our 14px padding + body line-height. */
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 48px !important;
    line-height: 1.4 !important;
}
.gp-newsletter__input::placeholder { color: var(--gp-text-muted) !important; }

.gp-footer .gp-newsletter__submit,
button.gp-newsletter__submit {
    background: var(--gp-gold) !important;
    color: var(--gp-text-on-gold) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 22px !important;
    font-family: var(--gp-font-display) !important;
    font-size: 14px !important;
    letter-spacing: var(--gp-ls-nav) !important;
    text-transform: uppercase !important;
    cursor: pointer;
    box-shadow: none !important;
    background-image: none !important;
    text-shadow: none !important;
    transition: background var(--gp-dur-base) var(--gp-ease-standard);
    /* Match input height — Bootstrap's button rules otherwise leave the
       button shorter than the input on legacy pages. */
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 48px !important;
    line-height: 1 !important;
}
.gp-footer .gp-newsletter__submit:hover { background: var(--gp-gold-deep) !important; }

/* Legal strip */
.gp-footer__legal {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--gp-space-5) !important;
    border-top: var(--gp-border-w) solid var(--gp-border) !important;
    padding: 14px 0 0 !important;
    margin: 0 !important;
    font-family: var(--gp-font-mono) !important;
    font-size: var(--gp-fs-meta-sm) !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    color: var(--gp-text-muted) !important;
}
.gp-footer__legal a { color: var(--gp-text-muted) !important; text-decoration: none !important; }
.gp-footer__legal a:hover { color: var(--gp-text) !important; }
.gp-footer__legal-tagline { color: var(--gp-gold) !important; font-weight: 500 !important; }

/* Footer img/svg — Bootstrap sets vertical-align middle + max-width 100% */
.gp-footer img,
.gp-footer svg { vertical-align: baseline !important; max-width: none; }

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .gp-footer__grid { grid-template-columns: 1fr 1fr !important; gap: var(--gp-space-7) !important; }
    .gp-footer__col--brand { grid-column: 1 / -1; }
    .gp-footer__col--newsletter { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    /* Condensed mobile footer — pack everything into ~half the previous
       vertical real estate. Site Map + Support sit side-by-side so they
       don't each take a tall column; brand + newsletter still span the
       full width above/below. Type, gaps, and padding all tighten. */
    .gp-footer {
        padding: 28px var(--gp-page-gutter) 12px !important;
    }
    .gp-footer__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        margin: 0 0 16px !important;
    }
    .gp-footer__col--brand     { grid-column: 1 / -1; }
    .gp-footer__col--sitemap   { grid-column: 1 / 2; }
    .gp-footer__col--support   { grid-column: 2 / 3; }
    .gp-footer__col--newsletter{ grid-column: 1 / -1; }

    .gp-footer__brand-mark { width: 48px !important; height: 32px !important; }
    .gp-footer__tagline    { font-size: 14px !important; margin: 6px 0 10px !important; }

    .gp-footer .gp-footer__heading      { margin: 0 0 8px !important; }
    .gp-footer .gp-footer__list li      { margin: 0 0 4px !important; }
    .gp-footer .gp-footer__list a       { font-size: 13px !important; }

    .gp-footer .gp-newsletter__copy     { margin: 0 0 10px !important; font-size: 13px !important; }
    .gp-footer input.gp-newsletter__input,
    .gp-newsletter__input               { padding: 10px 12px !important; }
    .gp-footer .gp-newsletter__submit,
    button.gp-newsletter__submit        { padding: 0 14px !important; font-size: 13px !important; }

    .gp-footer__legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding-top: 10px !important;
        font-size: 10px !important;
        letter-spacing: 0.14em !important;
    }
}