/**
 * Footer Styles
 *
 * Uses scoped CSS variables following the same pattern as Promptless WP plugin sections.
 * Footer theme variant (light/dark) is controlled via Customizer settings.
 *
 * @package Promptless_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   Theme Variant Scoped Variables
   Same pattern as plugin sections - footer controls its own theme independently
   ========================================================================== */

.promptless-footer.aisb-section--light {
    --section-bg: var(--aisb-color-surface, #f9fafb);
    --section-surface: var(--aisb-color-background, #ffffff);
    --section-text: var(--aisb-color-text, #1f2937);
    --section-text-muted: var(--aisb-color-text-muted, #6b7280);
    --section-border: var(--aisb-color-border, #e5e7eb);
    --section-primary: var(--aisb-color-primary, #6366f1);
}

.promptless-footer.aisb-section--dark {
    --section-bg: var(--aisb-color-dark-background, #111827);
    --section-surface: var(--aisb-color-dark-surface, #1f2937);
    --section-text: var(--aisb-color-dark-text, #f9fafb);
    --section-text-muted: var(--aisb-color-dark-text-muted, #9ca3af);
    --section-border: var(--aisb-color-dark-border, #374151);
    --section-primary: var(--aisb-color-primary, #6366f1);
}

/* ==========================================================================
   Footer Container
   ========================================================================== */

.promptless-footer {
    background-color: var(--section-bg);
    border-top: 1px solid var(--section-border);
    padding-top: 3rem;
    padding-bottom: 1.5rem;
    margin-top: auto;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* ==========================================================================
   Footer Main Content - Dynamic Grid
   Grid adapts based on number of nav columns and social widget presence.
   Classes are generated by promptless_get_footer_grid_class() in PHP.
   ========================================================================== */

.promptless-footer__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--section-border);
}

/* Mobile: 2-column grid for nav columns */
@media (min-width: 640px) {
    .promptless-footer__main {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: Dynamic grid based on nav column count and social presence */
@media (min-width: 1024px) {
    .promptless-footer__main {
        gap: 3rem;
    }

    /* 0 nav columns, no social: brand only (full width) */
    .promptless-footer__main--nav-0:not(.promptless-footer__main--has-social) {
        grid-template-columns: 1fr;
    }

    /* 0 nav columns, with social: brand + social */
    .promptless-footer__main--nav-0.promptless-footer__main--has-social {
        grid-template-columns: 3fr 1fr;
    }

    /* 1 nav column, no social */
    .promptless-footer__main--nav-1:not(.promptless-footer__main--has-social) {
        grid-template-columns: 2fr 1fr;
    }

    /* 1 nav column, with social */
    .promptless-footer__main--nav-1.promptless-footer__main--has-social {
        grid-template-columns: 2fr 1fr 1fr;
    }

    /* 2 nav columns, no social */
    .promptless-footer__main--nav-2:not(.promptless-footer__main--has-social) {
        grid-template-columns: 2fr 1fr 1fr;
    }

    /* 2 nav columns, with social */
    .promptless-footer__main--nav-2.promptless-footer__main--has-social {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    /* 3 nav columns, no social */
    .promptless-footer__main--nav-3:not(.promptless-footer__main--has-social) {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    /* 3 nav columns, with social (full layout) */
    .promptless-footer__main--nav-3.promptless-footer__main--has-social {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    }
}

/* ==========================================================================
   Footer Brand
   ========================================================================== */

.promptless-footer__brand {
    max-width: 280px;
}

.promptless-footer__brand a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.promptless-footer__brand img {
    max-height: 36px;
    width: auto;
}

.promptless-footer__brand .promptless-header__site-title {
    font-size: 1.125rem;
    color: var(--section-text);
}

/* Footer brand/site title - high specificity to override plugin link rules */
.promptless-footer.aisb-section--light .promptless-footer__brand a[href][href][href][href][href][href][href][href] {
    text-decoration: none;
}

.promptless-footer.aisb-section--light .promptless-footer__brand .promptless-header__site-title[href][href][href][href][href][href][href][href] {
    color: var(--section-text);
    text-decoration: none;
}

.promptless-footer.aisb-section--light .promptless-footer__brand .promptless-header__site-title[href][href][href][href][href][href][href][href]:hover,
.promptless-footer.aisb-section--light .promptless-footer__brand .promptless-header__site-title[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-light-section-link, var(--section-primary));
    text-decoration: none;
}

.promptless-footer.aisb-section--dark .promptless-footer__brand a[href][href][href][href][href][href][href][href] {
    text-decoration: none;
}

.promptless-footer.aisb-section--dark .promptless-footer__brand .promptless-header__site-title[href][href][href][href][href][href][href][href] {
    color: var(--section-text);
    text-decoration: none;
}

.promptless-footer.aisb-section--dark .promptless-footer__brand .promptless-header__site-title[href][href][href][href][href][href][href][href]:hover,
.promptless-footer.aisb-section--dark .promptless-footer__brand .promptless-header__site-title[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-dark-section-link, var(--section-primary));
    text-decoration: none;
}

.promptless-footer__tagline {
    font-size: 0.9375rem;
    color: var(--section-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* ==========================================================================
   Footer Brand Rich Text
   Supports formatted text, links, and contact info below logo
   ========================================================================== */

.promptless-footer__brand-text {
    font-size: 0.9375rem;
    color: var(--section-text-muted);
    line-height: 1.6;
}

.promptless-footer__brand-text p {
    margin: 0 0 0.75rem 0;
}

.promptless-footer__brand-text p:last-child {
    margin-bottom: 0;
}

.promptless-footer__brand-text a {
    color: var(--section-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.promptless-footer__brand-text a:hover,
.promptless-footer__brand-text a:focus {
    color: var(--section-primary);
}

/* High-specificity link overrides for smart colors */
.promptless-footer.aisb-section--light .promptless-footer__brand-text a[href][href][href][href][href][href][href][href] {
    color: var(--section-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.promptless-footer.aisb-section--light .promptless-footer__brand-text a[href][href][href][href][href][href][href][href]:hover,
.promptless-footer.aisb-section--light .promptless-footer__brand-text a[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-light-section-link, var(--section-primary));
}

.promptless-footer.aisb-section--dark .promptless-footer__brand-text a[href][href][href][href][href][href][href][href] {
    color: var(--section-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.promptless-footer.aisb-section--dark .promptless-footer__brand-text a[href][href][href][href][href][href][href][href]:hover,
.promptless-footer.aisb-section--dark .promptless-footer__brand-text a[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-dark-section-link, var(--section-primary));
}

/* ==========================================================================
   Footer Navigation Columns
   ========================================================================== */

.promptless-footer__nav-columns {
    display: contents;
}

@media (max-width: 639px) {
    .promptless-footer__nav-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

.promptless-footer__nav-column {
    min-width: 0;
}

/* ==========================================================================
   Footer Navigation Column Headings
   Uses <p> instead of heading elements for accessibility (avoids hierarchy issues)
   Styled to match widget titles for visual consistency.

   Uses heading font tokens for design consistency with sections.
   Tokens update automatically when Global Settings → Heading Font changes.
   ========================================================================== */

.promptless-footer__nav-heading {
    font-family: var(--aisb-section-font-heading);
    font-size: var(--aisb-section-text-lg);
    font-weight: var(--aisb-section-font-heading-weight);
    color: var(--section-text);
    margin: 0 0 1rem 0;
}

.promptless-footer__nav {
    display: block;
}

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

.promptless-footer__nav-list li {
    margin-bottom: 0.5rem;
}

.promptless-footer__nav-list a {
    display: inline-block;
    font-size: 0.9375rem;
    color: var(--section-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.promptless-footer__nav-list a:hover,
.promptless-footer__nav-list a:focus {
    color: var(--section-primary);
    text-decoration: none;
}

/* ==========================================================================
   HIGH-SPECIFICITY NAVIGATION LINK OVERRIDES
   Plugin core-components.css link rules have specificity 0,10,1 due to 9 :not() clauses.
   We use 8x [href] attribute selectors to achieve 0,11,1 and override.
   See docs/standards/WOOCOMMERCE_DESIGN_ALIGNMENT.md Part 8.3
   ========================================================================== */

/* Light mode footer navigation - base state */
.promptless-footer.aisb-section--light .promptless-footer__nav-list a[href][href][href][href][href][href][href][href] {
    color: var(--section-text);
    text-decoration: none;
}

/* Light mode footer navigation - hover/focus */
.promptless-footer.aisb-section--light .promptless-footer__nav-list a[href][href][href][href][href][href][href][href]:hover,
.promptless-footer.aisb-section--light .promptless-footer__nav-list a[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-light-section-link, var(--section-primary));
    text-decoration: none;
}

/* Dark mode footer navigation - base state */
.promptless-footer.aisb-section--dark .promptless-footer__nav-list a[href][href][href][href][href][href][href][href] {
    color: var(--section-text);
    text-decoration: none;
}

/* Dark mode footer navigation - hover/focus */
.promptless-footer.aisb-section--dark .promptless-footer__nav-list a[href][href][href][href][href][href][href][href]:hover,
.promptless-footer.aisb-section--dark .promptless-footer__nav-list a[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-dark-section-link, var(--section-primary));
    text-decoration: none;
}

/* ==========================================================================
   Footer Social / Widgets
   ========================================================================== */

.promptless-footer__social-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.promptless-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.promptless-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--section-text-muted);
    background-color: var(--section-surface);
    border-radius: var(--aisb-section-radius-button, 6px);
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Social links - high specificity to override plugin link rules */
.promptless-footer.aisb-section--light .promptless-footer__social a[href][href][href][href][href][href][href][href] {
    color: var(--section-text-muted);
    text-decoration: none;
}

.promptless-footer.aisb-section--light .promptless-footer__social a[href][href][href][href][href][href][href][href]:hover,
.promptless-footer.aisb-section--light .promptless-footer__social a[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-light-section-link, var(--section-primary));
    text-decoration: none;
}

.promptless-footer.aisb-section--dark .promptless-footer__social a[href][href][href][href][href][href][href][href] {
    color: var(--section-text-muted);
    text-decoration: none;
}

.promptless-footer.aisb-section--dark .promptless-footer__social a[href][href][href][href][href][href][href][href]:hover,
.promptless-footer.aisb-section--dark .promptless-footer__social a[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-dark-section-link, var(--section-primary));
    text-decoration: none;
}

.promptless-footer__widget {
    margin-bottom: 1rem;
}

.promptless-footer__widget-title {
    font-family: var(--aisb-section-font-heading);
    font-size: var(--aisb-section-text-lg);
    font-weight: var(--aisb-section-font-heading-weight);
    color: var(--section-text);
    margin-bottom: 1rem;
}

/* ==========================================================================
   Footer Bottom Bar
   ========================================================================== */

.promptless-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .promptless-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

.promptless-footer__copyright {
    font-size: 0.875rem;
    color: var(--section-text-muted);
}

.promptless-footer__bottom-nav .promptless-footer__nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
}

@media (min-width: 768px) {
    .promptless-footer__bottom-nav .promptless-footer__nav-list {
        justify-content: flex-end;
    }
}

.promptless-footer__bottom-nav .promptless-footer__nav-list li {
    margin-bottom: 0;
}

.promptless-footer__bottom-nav .promptless-footer__nav-list a {
    font-size: 0.875rem;
    color: var(--section-text-muted);
}

.promptless-footer__bottom-nav .promptless-footer__nav-list a:hover,
.promptless-footer__bottom-nav .promptless-footer__nav-list a:focus {
    color: var(--section-primary);
    text-decoration: none;
}

/* Bottom nav links - high specificity with muted text color
   Uses 8x [href] to beat plugin specificity 0,10,1 */
.promptless-footer.aisb-section--light .promptless-footer__bottom-nav .promptless-footer__nav-list a[href][href][href][href][href][href][href][href] {
    color: var(--section-text-muted);
    text-decoration: none;
}

.promptless-footer.aisb-section--light .promptless-footer__bottom-nav .promptless-footer__nav-list a[href][href][href][href][href][href][href][href]:hover,
.promptless-footer.aisb-section--light .promptless-footer__bottom-nav .promptless-footer__nav-list a[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-light-section-link, var(--section-primary));
    text-decoration: none;
}

.promptless-footer.aisb-section--dark .promptless-footer__bottom-nav .promptless-footer__nav-list a[href][href][href][href][href][href][href][href] {
    color: var(--section-text-muted);
    text-decoration: none;
}

.promptless-footer.aisb-section--dark .promptless-footer__bottom-nav .promptless-footer__nav-list a[href][href][href][href][href][href][href][href]:hover,
.promptless-footer.aisb-section--dark .promptless-footer__bottom-nav .promptless-footer__nav-list a[href][href][href][href][href][href][href][href]:focus {
    color: var(--aisb-smart-dark-section-link, var(--section-primary));
    text-decoration: none;
}