/*
 * Footer styles.
 *
 * Originally ported verbatim from Avada-Child-Theme/footer.php lines 221-791,
 * which is why every line used to carry three leading tabs - it lived inside a
 * <style> block in a PHP template. Dedented here.
 *
 * The footer is the one dark component on an otherwise light site, so it keeps
 * its own --ffx-* palette rather than using the semantic tokens directly. The
 * two brand hues now point at the token layer, so the footer cannot drift from
 * the rest of the site; the surfaces and the white-alpha text ramp stay local
 * until the design system has dark surface tokens of its own.
 */

/* ========== FIXFACTOR FOOTER - DARK TEAL (Deep/Night) ========== */

.ffx-footer {
    --ffx-primary: var(--accent, #00aac4);
    --ffx-primary-light: rgba(0, 170, 196, 0.12);
    --ffx-accent: var(--accent-warm, #FFD100);
    --ffx-surface: #0a1f24;
    --ffx-surface-elevated: #132d33;
    --ffx-border: rgba(0, 170, 196, 0.2);
    --ffx-rule: rgba(255, 255, 255, 0.28);
    --ffx-text-primary: #ffffff;
    --ffx-text-secondary: rgba(255, 255, 255, 0.8);
    --ffx-text-muted: rgba(255, 255, 255, 0.55);
    --ffx-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --ffx-radius: 10px;
    --ffx-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    font-family: var(--font-stack);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ffx-text-primary);
    background: var(--ffx-surface);
    position: relative;
    contain: layout style paint;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ffx-border);
    box-sizing: border-box;
}

/* Reset for all footer children */
.ffx-footer *,
.ffx-footer *::before,
.ffx-footer *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Container */
.ffx-footer .ffx-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Icons */
.ffx-footer .ffx-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    pointer-events: none;
}

/* ========== MAIN FOOTER SECTION ========== */
.ffx-footer .ffx-main {
    padding: 35px 0 25px;
    background: var(--ffx-surface);
}

.ffx-footer .ffx-grid {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 45px;
    margin-bottom: 15px;
    align-items: start;
    position: relative;
    top: 7px;
}

.ffx-footer .ffx-main .ffx-grid nav {
    position: relative;
    top: 10px;
}

/* Company Info Section */
.ffx-footer .ffx-logo-container {
    margin-bottom: 14px;
}

.ffx-footer .ffx-logo-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.ffx-footer .ffx-logo {
    width: 55px;
    height: 55px;
    object-fit: contain;
    transition: transform var(--ffx-transition);
    border-radius: 8px;
}

.ffx-footer .ffx-logo-link:hover .ffx-logo {
    transform: scale(1.05);
}

.ffx-footer .ffx-tagline {
    font-size: 14px;
    color: var(--ffx-text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
    max-width: 320px;
}

.ffx-footer .ffx-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ffx-text-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color var(--ffx-transition);
    min-height: 40px;
}

.ffx-footer .ffx-contact-link:hover {
    color: var(--ffx-primary);
}

.ffx-footer .ffx-contact-link .ffx-icon {
    color: var(--ffx-primary);
}

/* Navigation Section */
.ffx-footer .ffx-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

/*
 * These headings used to be painted with background-clip: text over a
 * #00aac4 -> #00d4f0 gradient. Over a 120px heading the two stops are all but
 * indistinguishable, and the technique costs real accessibility: the glyph
 * colour comes from the background image, so -webkit-text-fill-color stays
 * transparent and the prefers-contrast override below could never reach them.
 * Flat brand teal measures 6.11:1 here and responds to the override.
 */
.ffx-footer .ffx-nav .ffx-nav-column h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ffx-primary);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ffx-border);
    text-align: left;
}

.ffx-footer .ffx-nav-column ul {
    list-style: none;
}

.ffx-footer .ffx-nav-column li {
    margin-bottom: 6px;
}

.ffx-footer .ffx-nav-column a {
    color: var(--ffx-text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: color var(--ffx-transition);
    display: block;
    padding: 2px 0;
    min-height: 24px;
    line-height: 20px;
}

.ffx-footer .ffx-nav-column a:hover {
    color: var(--ffx-primary);
}

/* ========== LOCATIONS SECTION ========== */
.ffx-footer .ffx-locations {
    padding-top: 25px;
}

.ffx-footer .ffx-locations-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: center;
}

.ffx-footer .ffx-locations-title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.ffx-footer .ffx-locations-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ffx-primary);
    text-shadow: none;
    letter-spacing: 0.02em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
}

/*
 * No hover state: the card is an <article>, not a link. A lift and a glow on
 * something that cannot be clicked is a false affordance.
 */
.ffx-footer .ffx-location-card {
    background: var(--ffx-surface-elevated);
    border: 1px solid var(--ffx-border);
    border-radius: var(--ffx-radius);
    overflow: hidden;
    box-shadow: var(--ffx-shadow-sm);
}

.ffx-footer .ffx-location-header {
    padding: 10px 14px;
    background: var(--ffx-primary-light);
    border-bottom: 1px solid var(--ffx-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.ffx-footer .ffx-location-header h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--ffx-text-primary);
}

.ffx-footer .ffx-badge {
    background: transparent;
    color: var(--ffx-primary);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: none;
    border: 1px solid var(--ffx-primary);
}

/*
 * Must come after .ffx-badge - the two selectors have identical specificity,
 * so source order decides, and for a long time this one lost: a closure notice
 * was being painted in the brand accent, reading as a feature rather than as
 * "this branch is shut". Its old #f1f3f4/#5f6368/#dadce0 were light-theme
 * greys that would have been a bright pill on a dark card even if they had
 * applied. Neutral white ramp instead: visibly not the brand colour.
 */
.ffx-footer .ffx-badge-closed {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ffx-text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-weight: 500;
}

.ffx-footer .ffx-hours--closed span {
    color: var(--ffx-text-muted);
    text-decoration: line-through;
}

.ffx-footer .ffx-location-content {
    padding: 14px;
}

.ffx-footer .ffx-info-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: flex-start;
}

.ffx-footer .ffx-info-row .ffx-icon {
    color: var(--ffx-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

.ffx-footer .ffx-info-row address {
    font-style: normal;
    color: var(--ffx-text-secondary);
    font-size: 14px;
}

/* 24px minimum, WCAG 2.5.8 - these were 22. */
.ffx-footer .ffx-info-row a {
    color: var(--ffx-text-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--ffx-transition);
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.ffx-footer .ffx-info-row a:hover {
    color: var(--ffx-primary);
}

.ffx-footer .ffx-hours {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: var(--ffx-text-secondary);
}

.ffx-footer .ffx-location-features {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ffx-border);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ffx-footer .ffx-location-features span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--ffx-text-secondary);
}

.ffx-footer .ffx-location-features .ffx-icon {
    color: var(--ffx-accent);
    width: 14px;
    height: 14px;
}

/* ========== BOTTOM BAR ========== */
.ffx-footer .ffx-bottom {
    background: var(--ffx-surface-elevated);
    padding: 12px 0;
    border-top: 1px solid var(--ffx-border);
}

.ffx-footer .ffx-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ffx-footer .ffx-copyright {
    font-size: 13px;
    color: var(--ffx-text-muted);
}

.ffx-footer .ffx-legal {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ffx-footer .ffx-legal a {
    position: relative;
    color: var(--ffx-text-muted);
    text-decoration: none;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    transition: color var(--ffx-transition);
    min-height: 24px;
}

.ffx-footer .ffx-legal a:hover {
    color: var(--ffx-primary);
}

/*
 * The separators used to be literal "|" characters in the markup, coloured
 * rgba(0,170,196,0.2) - 1.39:1, so barely there, and read out loud by screen
 * readers as part of the link list. A pseudo-element rule is neither.
 */
.ffx-footer .ffx-legal a + a::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    width: 1px;
    height: 12px;
    transform: translateY(-50%);
    background: var(--ffx-rule);
}

/* ========== RESPONSIVE DESIGN ========== */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    .ffx-footer .ffx-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 15px;
    }

    .ffx-footer .ffx-nav {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .ffx-footer .ffx-locations-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ffx-footer .ffx-locations-title-container {
        min-height: auto;
        order: -1;
        justify-content: flex-start;
    }

    .ffx-footer .ffx-locations-title {
        writing-mode: horizontal-tb;
        text-orientation: initial;
        transform: none;
        text-align: left;
        font-size: 16px;
        margin-bottom: 10px;
        font-weight: 700;
        letter-spacing: 0.02em;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--ffx-border);
        width: 100%;
    }

    .ffx-footer .ffx-main {
        padding: 30px 0 20px;
    }
}

/* Mobile (576px - 767px) */
@media (max-width: 767px) {
    .ffx-footer .ffx-main {
        padding: 25px 0 15px;
    }

    .ffx-footer .ffx-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .ffx-footer .ffx-bottom-content {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .ffx-footer .ffx-logo {
        width: 45px;
        height: 45px;
    }

    .ffx-footer .ffx-nav .ffx-nav-column h3 {
        font-size: 15px;
    }

    .ffx-footer .ffx-locations .ffx-locations-title-container .ffx-locations-title {
        font-size: 15px;
    }
}

/* Mobile Portrait (< 576px) */
@media (max-width: 575px) {
    .ffx-footer .ffx-container {
        padding: 0 12px;
    }

    .ffx-footer .ffx-tagline {
        font-size: 14px;
    }

    .ffx-footer .ffx-location-header h4 {
        font-size: 15px;
    }

    .ffx-footer .ffx-badge {
        font-size: 10px;
        padding: 3px 10px;
    }

    .ffx-footer .ffx-nav .ffx-nav-column h3 {
        font-size: 14px;
    }

    .ffx-footer .ffx-grid {
        gap: 20px;
        margin-bottom: 15px;
    }

    .ffx-footer .ffx-nav {
        gap: 18px;
    }

    .ffx-footer .ffx-locations .ffx-locations-title-container .ffx-locations-title {
        font-size: 14px;
    }
}

/* Special Mobile Cases */
@media (max-width: 640px) {
    .ffx-footer .ffx-locations .ffx-locations-title-container .ffx-locations-title {
        text-align: left;
        text-shadow: none;
    }
}

/* Large Screens */
@media (min-width: 1024px) {
    .ffx-footer .ffx-locations-title {
        font-size: 18px;
    }
}

/* ========== ACCESSIBILITY AND PERFORMANCE ========== */

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .ffx-footer * {
        animation: none;
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ffx-footer {
        --ffx-border: #ffffff;
        --ffx-rule: #ffffff;
        --ffx-primary: #00d4f5;
        --ffx-accent: #ffc107;
        --ffx-text-secondary: #ffffff;
        --ffx-text-muted: #ffffff;
    }

    .ffx-footer .ffx-location-card {
        border-width: 2px;
    }
}

/* Print optimization */
@media print {
    .ffx-footer {
        background: white;
        color: black;
        border-top: 1px solid #ccc;
    }

    .ffx-footer .ffx-main,
    .ffx-footer .ffx-bottom {
        background: white;
    }

    .ffx-footer a {
        color: black;
        text-decoration: underline;
    }

    .ffx-footer .ffx-location-card {
        break-inside: avoid;
    }
}

/* Focus management for accessibility */
.ffx-footer a:focus-visible {
    outline: 2px solid var(--ffx-primary);
    outline-offset: 2px;
    border-radius: 2px;
}