/* =========================================================
   ProTemplate2 • Footer — THEME-AWARE / GRIDED / NOT CENTERED
   Works with markup using:
   .template-footer.pro-footer > .footer-inner
     ├─ .footer-grid
     │   ├─ .footer-col.footer-brand
     │   ├─ .footer-col.footer-links-col
     │   └─ .footer-col.footer-actions
     ├─ .footer-secondary  (hours / payments)
     └─ .footer-legal      (copyright / back-to-top)
   ========================================================= */

/* -------- Tokens mapped to global theme with safe fallbacks -------- */
.template-footer.pro-footer {
    --pt2-bg: var(--primary-bg, #071d32);
    --pt2-text: var(--text-color, #c9d6e3);
    --pt2-muted: color-mix(in srgb, var(--pt2-text) 75%, transparent);
    --pt2-accent: var(--accent, #c96d36);
    --pt2-accent-2: var(--accent-2, #d88346);
    --pt2-border: color-mix(in srgb, var(--pt2-accent) 50%, #000 20%);
    --pt2-panel: color-mix(in srgb, var(--pt2-bg) 85%, #fff 15%);
    --pt2-panel-2: color-mix(in srgb, var(--pt2-bg) 75%, #fff 25%);
    --pt2-link: var(--link-color, var(--pt2-accent));
    --pt2-link-h: color-mix(in srgb, var(--pt2-accent-2) 90%, #fff 10%);
    --pt2-maxw: min(1280px, 94vw);
    --pt2-radius: 14px;
    --pt2-gap: 28px;
    --pt2-pad-y: clamp(48px, 8vw, 84px);
    --pt2-pad-x: 24px;
}

/* -------- Wrapper -------- */
.template-footer.pro-footer {
    margin: 0;
    width: 100%;
    padding: var(--pt2-pad-y) var(--pt2-pad-x) calc(var(--pt2-pad-y) - 18px);
    background: var(--pt2-bg);
    color: var(--pt2-text);
    border-top: 2px solid var(--pt2-accent);
    box-shadow: 0 -8px 30px rgba(0,0,0,.35);
    position: relative;
    z-index: 5;
    overflow: hidden;
}

    .template-footer.pro-footer .footer-inner {
        max-width: var(--pt2-maxw);
        margin: 0 auto;
    }

/* =========================================================
   TOP GRID (3 columns): brand | links | actions
   ========================================================= */
.footer-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr .95fr;
    gap: var(--pt2-gap) calc(var(--pt2-gap) + 10px);
    align-items: start;
}

/* columns default left aligned; actions right aligned */
.footer-col {
    text-align: left;
}

.footer-actions {
    text-align: right;
}

/* ---------- Brand / Contact / Address / Map ---------- */
.footer-brand .brand-name {
    font-size: clamp(1.15rem, 2.6vw, 1.6rem);
    font-weight: 800;
    letter-spacing: .2px;
}

.footer-brand .brand-slogan {
    margin-top: 4px;
    font-size: .96rem;
    color: var(--pt2-muted);
}

.footer-brand .contact-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}

    .footer-brand .contact-list li + li {
        margin-top: 6px;
    }

    .footer-brand .contact-list a {
        color: var(--pt2-text);
        text-decoration: none;
        border-bottom: 1px dotted color-mix(in srgb, var(--pt2-text) 35%, transparent);
        transition: color .2s, border-color .2s, text-shadow .2s;
    }

        .footer-brand .contact-list a:hover {
            color: #fff;
            border-color: var(--pt2-accent);
            text-shadow: 0 0 10px color-mix(in srgb, var(--pt2-accent) 40%, transparent);
        }

/* address + map */
.footer-address {
    margin-top: 14px;
    font-style: normal;
    color: var(--pt2-muted);
}

.map-embed {
    --h: min(280px, 34vw);
    margin-top: 12px;
    border-radius: var(--pt2-radius);
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    border: 1px solid color-mix(in srgb, var(--pt2-accent) 20%, transparent);
    background: var(--pt2-panel);
}

    .map-embed iframe {
        width: 100%;
        height: var(--h);
        display: block;
    }

/* ---------- Link groups (preferred) or legacy list ---------- */
.footer-links-col .link-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px 22px;
}

.footer-links-col .link-group {
}

.footer-group-title {
    font-weight: 700;
    margin-bottom: 6px;
    color: #fff;
    letter-spacing: .25px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links li {
        margin: 6px 0;
    }

    .footer-links a {
        color: var(--pt2-link);
        text-decoration: none;
        transition: color .2s, text-shadow .2s, transform .15s;
        will-change: transform;
    }

        .footer-links a:hover {
            color: var(--pt2-link-h);
            text-shadow: 0 0 8px color-mix(in srgb, var(--pt2-accent) 50%, transparent);
            transform: translateX(2px);
        }

.footer-links-col .legacy-links {
    columns: 2 200px;
}

/* ---------- Newsletter + Socials ---------- */
.newsletter-box {
    display: block;
    margin-left: auto;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pt2-panel) 70%, transparent), color-mix(in srgb, var(--pt2-panel-2) 70%, transparent));
    border: 1px solid var(--pt2-border);
    border-radius: var(--pt2-radius);
    padding: 16px;
    backdrop-filter: saturate(1.2) blur(6px);
}

.newsletter-heading {
    font-weight: 700;
    margin-bottom: 4px;
}

.newsletter-sub {
    color: var(--pt2-muted);
    margin: 0 0 10px;
}

.newsletter-form .input-group {
    display: flex;
    gap: 8px;
}

.newsletter-form input[type="email"] {
    flex: 1 1 auto;
    background: color-mix(in srgb, var(--pt2-bg) 60%, #fff 40%);
    border: 1px solid color-mix(in srgb, var(--pt2-text) 25%, transparent);
    color: var(--pt2-text);
    padding: 10px 12px;
    border-radius: 8px;
    outline: none;
}

.newsletter-form input::placeholder {
    color: color-mix(in srgb, var(--pt2-text) 55%, transparent);
}

.newsletter-form .btn, .newsletter-form button {
    background: var(--pt2-accent);
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--pt2-accent) 25%, #000 10%);
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, background .2s;
}

    .newsletter-form .btn:hover, .newsletter-form button:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px color-mix(in srgb, var(--pt2-accent) 45%, transparent);
        background: var(--pt2-accent-2);
    }

.footer-socials ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.footer-socials a {
    color: var(--pt2-text);
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--pt2-accent) 30%, transparent);
    background: color-mix(in srgb, #fff 5%, var(--pt2-bg));
    padding: 8px 12px;
    border-radius: 999px;
    font-size: .9rem;
    transition: background .2s, color .2s, transform .15s, box-shadow .2s;
}

    .footer-socials a:hover {
        color: #fff;
        background: var(--pt2-accent);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px color-mix(in srgb, var(--pt2-accent) 45%, transparent);
    }

/* =========================================================
   SECONDARY GRID (2 columns): hours | payments
   ========================================================= */
.footer-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--pt2-gap);
    margin-top: calc(var(--pt2-gap) + 6px);
}

.footer-section-title {
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: .3px;
}

.hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .hours-list li {
        display: grid;
        grid-template-columns: auto 10px 1fr;
        gap: 8px;
        padding: 6px 0;
        border-bottom: 1px dashed color-mix(in srgb, var(--pt2-text) 18%, transparent);
    }

        .hours-list li:last-child {
            border-bottom: none;
        }

    .hours-list .day {
        color: #fff;
    }

    .hours-list .time {
        color: var(--pt2-muted);
    }

.payments .badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

    .payments .badges img {
        height: 28px;
        width: auto;
        filter: saturate(0.9) brightness(1.05) drop-shadow(0 2px 6px rgba(0,0,0,.25));
        border-radius: 6px;
        background: #fff;
        padding: 3px 6px;
        border: 1px solid color-mix(in srgb, #000 10%, transparent);
    }

/* =========================================================
   BOTTOM BAR
   ========================================================= */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: calc(var(--pt2-gap) + 4px);
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--pt2-text) 14%, transparent);
}

    .footer-legal .legal-left small {
        color: var(--pt2-muted);
    }

    .footer-legal .dot {
        margin: 0 .5rem;
        opacity: .6;
    }

.back-to-top {
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, var(--pt2-accent), var(--pt2-accent-2));
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--pt2-accent) 30%, #000 10%);
    transition: transform .15s, box-shadow .2s, opacity .2s;
    opacity: .95;
}

    .back-to-top:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px color-mix(in srgb, var(--pt2-accent) 55%, transparent);
        opacity: 1;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
    .footer-links-col .link-groups {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 880px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-actions {
        text-align: left;
    }
    /* stop right-align on mobile */
    .footer-socials ul {
        justify-content: flex-start;
    }

    .footer-secondary {
        grid-template-columns: 1fr;
    }

    .map-embed {
        --h: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-links a, .footer-socials a, .back-to-top {
        transition: none !important;
    }
}

@media print {
    .map-embed, .back-to-top {
        display: none !important;
    }
}