/**
 * Top Pneus - Styles Footer
 *
 * Footer layout: 3-column links grid + company info + copyright bar.
 * Includes Blocksy footer overrides and payment icons.
 *
 * @package TopPneus
 * @since 2.0.0
 * @version 3.9.0
 */

/* ==========================================================================
   FOOTER PRINCIPAL
   ========================================================================== */

.tp-footer {
    background: var(--tp-gray-900);
    color: var(--tp-gray-300);
    padding: var(--tp-space-2xl) 0 var(--tp-space-lg);
    border-top: 1px solid var(--tp-gray-700);
}

.tp-footer-inner {
    max-width: var(--tp-container-width);
    margin: 0 auto;
    padding: 0 var(--tp-space-lg);
}

/* -------------------------------------------------------------------------
   GRILLE DE COLONNES
   ------------------------------------------------------------------------- */

.tp-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tp-space-xl);
    margin-bottom: var(--tp-space-2xl);
}

.tp-footer-col h4 {
    color: var(--tp-footer-heading);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--tp-space-lg);
}

.tp-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tp-footer-col li {
    margin-bottom: var(--tp-space-sm);
}

.tp-footer-col a {
    color: var(--tp-gray-300);
    text-decoration: underline;
    text-decoration-color: var(--tp-gray-600);
    text-underline-offset: 2px;
    font-size: 0.9rem;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.tp-footer-col a:hover {
    color: var(--tp-white);
    text-decoration-color: var(--tp-white);
}

/* -------------------------------------------------------------------------
   DESCRIPTION
   ------------------------------------------------------------------------- */

.tp-footer-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: var(--tp-space-lg);
}

/* -------------------------------------------------------------------------
   BAS DE PAGE (Copyright, Paiements, Social)
   ------------------------------------------------------------------------- */

.tp-footer-bottom {
    border-top: 1px solid var(--tp-gray-700);
    padding-top: var(--tp-space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.tp-footer-bottom p {
    margin: 0;
    color: var(--tp-gray-400);  /* WCAG AA: 5.51:1 on gray-900 */
}

.tp-footer-payments {
    display: flex;
    align-items: flex-end;
    gap: var(--tp-space-lg);
}

.tp-payment-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;                       /* Override Blocksy column 2 text-align */
}

.tp-payment-label {
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af !important;              /* Gray-400 — WCAG AA compliant on dark bg (ratio 6.3:1) */
}

.tp-payment-icons {
    display: flex;
    align-items: center;
    gap: var(--tp-space-sm, 8px);
}

.tp-footer-payments img,
.tp-footer-payments svg {
    height: 30px !important;
    width: auto !important;
    object-fit: contain !important;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Simple logos (solid shapes) — white silhouette */
.tp-icon-visa,
.tp-icon-dpd {
    filter: brightness(0) invert(1) !important;
    opacity: 0.6;
}

/* PostFinance — grayscale of yellow original (gray badge look) */
.tp-icon-postfinance {
    filter: grayscale(1) brightness(0.8) !important;
    opacity: 0.85;
}

/* Mastercard — grayscale preserves circle separation via luminosity */
.tp-icon-mastercard {
    filter: grayscale(1) brightness(1.5) !important;
    opacity: 0.8;
}

/* TWINT — opacity only (white hexagon + colored interior visible on dark bg) */
.tp-icon-twint {
    opacity: 0.55;
}

/* Hover — all logos: full color (desktop only) */
.tp-footer-payments img:hover,
.tp-footer-payments svg:hover {
    filter: none !important;
    opacity: 1;
}

/* Mobile/tablet: always full color (no hover on touch devices) */
@media (max-width: 900px) {
    .tp-icon-visa,
    .tp-icon-dpd,
    .tp-icon-postfinance,
    .tp-icon-mastercard,
    .tp-icon-twint {
        filter: none !important;
        opacity: 1;
    }
}

.tp-payment-separator {
    width: 1px;
    height: 40px;
    background: var(--tp-gray-600, #4b5563);
    align-self: flex-end;
}

/* WCAG: Links must be distinguishable from surrounding text (underline or 3:1 contrast) */
footer a,
.ct-footer a {
    text-decoration: underline;
    text-decoration-color: var(--tp-gray-600);
    text-underline-offset: 2px;
}

footer a:hover,
.ct-footer a:hover {
    text-decoration-color: currentColor;
}

/* -------------------------------------------------------------------------
   BLOCKSY FOOTER — Bottom row top border
   footerRowTopDivider via set_theme_mod doesn't cascade to elements.
   ------------------------------------------------------------------------- */
.ct-footer [data-row="bottom"] {
    border-top: 1px solid var(--tp-gray-700);
    align-items: flex-end !important;   /* Both columns aligned to bottom — Blocksy inline */
}

/* Payment icons: right-aligned, pushed to bottom */
.ct-footer [data-row="bottom"] [data-column="2"] {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end !important;
}

/* Ensure Blocksy widget wrappers don't break bottom alignment */
.ct-footer [data-row="bottom"] [data-id] {
    align-self: flex-end !important;
}

/* -------------------------------------------------------------------------
   BLOCKSY FOOTER — Dark background text cascade
   Background: Color 6 via Blocksy palette (set_theme_mod in setup.php).
   Text colors: Blocksy element-level defaults don't inherit from rowFontColor,
   so we cascade light text here for the dark footer.
   ------------------------------------------------------------------------- */
.ct-footer,
.ct-footer p,
.ct-footer span,
.ct-footer [data-id] {
    color: var(--tp-gray-300) !important;
}
.ct-footer a {
    color: var(--tp-gray-300) !important;
}
.ct-footer a:hover {
    color: var(--tp-white) !important;  /* White — hover */
}
.ct-footer h1,
.ct-footer h2,
.ct-footer h3,
.ct-footer h4,
.ct-footer h5,
.ct-footer h6,
.ct-footer .widget-title {
    color: var(--tp-white);             /* White — headings */
}

/* ==========================================================================
   RESPONSIVE - FOOTER
   ========================================================================== */

@media (max-width: 900px) {
    .tp-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .tp-footer-bottom {
        flex-direction: column;
        gap: var(--tp-space-md);
        text-align: center;
    }

    /* Payment icons: wrap and center on mobile */
    .tp-footer-payments {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--tp-space-md);
    }

    .tp-payment-group {
        align-items: center;
    }

    .tp-payment-separator {
        display: none;
    }

    .tp-footer-payments img,
    .tp-footer-payments svg {
        height: 24px !important;
    }
}

/* =========================================================================
   Footer company info
   ========================================================================= */
.tp-footer-info {
    text-align: left;
    font-size: var(--tp-text-sm, 0.875rem);
    color: var(--tp-gray-400, #a0aec0);
    line-height: 1.6;
}
.tp-footer-company {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--tp-gray-300, #cbd5e0);
    margin-bottom: 4px;
}
.tp-footer-ide {
    font-family: monospace;
    font-size: var(--tp-text-xs, 0.75rem);
    margin-bottom: 2px;
}
.tp-footer-owner {
    font-size: var(--tp-text-xs, 0.75rem);
    margin-bottom: 8px;
}
.tp-footer-copyright {
    font-size: var(--tp-text-xs, 0.75rem);
    color: var(--tp-gray-500, #6b7280);
}

/* =========================================================================
   SAV hours
   ========================================================================= */
.tp-sav-hours {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--tp-text-sm, 0.875rem);
}
.tp-sav-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tp-gray-400, #a0aec0);
}
.tp-sav-phone {
    color: var(--tp-gray-300, #cbd5e0);
    text-decoration: none;
    font-weight: 500;
}
.tp-sav-phone:hover {
    color: var(--tp-white);
}