/*
    Shared site footer (P5) — used on the public storefront, the customer
    portal, and the member portal. Loaded as its own stylesheet (not an
    inline <style> tag) because at least one account page in this app
    strips inline <style> tags from the body at runtime; a real
    <link rel="stylesheet"> in <head> is unaffected by that.
*/

/*
    Typography comes from the site's own faces (@font-face declarations live in
    public/assets/style.css, loaded ahead of this file in both layouts), not a
    system stack. Same three roles the rest of the site uses:

      body    "MontserratRegular"  — `p, body` in style.css, and --dca-body in
                                     dca-portal.css
      label   "Bicyclette"         — the site's UI/nav face; the previous footer
                                     set it on `.footer h4`
      display "TAN-PEARL"          — brand display face, --dca-display in
                                     dca-portal.css
*/
.dca-site-footer {
    --dca-footer-body: "MontserratRegular", "Montserrat", Arial, sans-serif;
    --dca-footer-label: "Bicyclette", Arial, sans-serif;
    --dca-footer-display: "TAN-PEARL", "Tan-pearl", Georgia, serif;

    background: #000;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 64px 40px 0;
    font-family: var(--dca-footer-body);
}

.dca-site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 1.4fr);
    gap: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

/*
    The nav columns live in their OWN inner grid, separate from the
    subscribe column, so hiding "Customer" or "Members" when logged in
    only reflows the remaining nav columns and never disturbs the
    subscribe column's position/width.
*/
.dca-site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.dca-site-footer__nav > div {
    flex: 1 1 160px;
    min-width: 0;
}

@media (max-width: 992px) {
    .dca-site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

.dca-site-footer__heading {
    font-family: var(--dca-footer-label);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 20px;
    color: #fff;
}

.dca-site-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 16px;
}

.dca-site-footer__links a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 14px;
}

.dca-site-footer__links a:hover {
    color: #fff;
}

.dca-site-footer__subscribe-heading {
    font-family: var(--dca-footer-display);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.5;
    margin: 0 0 24px;
}

.dca-site-footer__subscribe-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 8px;
}

.dca-site-footer__email-field {
    flex: 1 1 auto;
    min-width: 0;
}

.dca-site-footer__email-label {
    display: block;
    font-family: var(--dca-footer-label);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
}

.dca-site-footer__email-input {
    width: 100%;
    font-family: var(--dca-footer-body);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 14px;
    padding: 0 0 8px;
}

.dca-site-footer__email-input:focus {
    outline: none;
    border-bottom-color: #fff;
}

.dca-site-footer__subscribe-btn {
    flex: 0 0 auto;
    background: #2a2a2a;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-family: var(--dca-footer-label);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.dca-site-footer__subscribe-btn:hover {
    background: #3a3a3a;
}

.dca-site-footer__flash {
    font-size: 12px;
    margin: 8px 0 0;
}

.dca-site-footer__flash--success { color: #4ade80; }
.dca-site-footer__flash--error { color: #f87171; }

.dca-site-footer__social {
    display: flex;
    gap: 14px;
    margin-top: 32px;
}

.dca-site-footer__social a {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dca-site-footer__social a.is-outline {
    border: 1.5px solid #fff;
    color: #fff;
}

.dca-site-footer__social a.is-solid {
    background: #fff;
    color: #000;
}

.dca-site-footer__bottom {
    max-width: 1440px;
    margin: 48px auto 0;
    padding: 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    font-family: var(--dca-footer-label);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.dca-site-footer__bottom a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.dca-site-footer__bottom a:hover {
    color: #fff;
}

.dca-site-footer__watermark {
    margin-top: 24px;
    text-align: center;
    user-select: none;
}

.dca-site-footer__watermark img {
    width: 100%;
    display: inline-block;
    opacity: 0.35;
}
