/* =============================================================================
   lib/styles/components/footer.css — Filtra-Core Footer
   ============================================================================= */

.footer {
    background-color: #FFFFFF;
    width: 100%;
    margin-top: auto;
    border-top: 1px solid #E5E7EB;
}

.footer__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 64px 64px 40px;
    box-sizing: border-box;
}

@media (max-width: 1023px) { .footer__container { padding: 48px 48px 32px; } }
@media (max-width: 639px) { .footer__container { padding: 48px 24px 32px; } }

/* =============================================================================
   TOP SECTION
   ============================================================================= */
.footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
    align-items: start;
}

@media (max-width: 1023px) {
    .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 639px) {
    .footer__top { grid-template-columns: 1fr; gap: 32px; }
    .footer__brand { grid-column: 1; }
}

/* =============================================================================
   BRAND COLUMN
   ============================================================================= */
.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__logo-block { display: flex; flex-direction: column; gap: 12px; width: fit-content; }

.footer__logo { 
    display: inline-flex; 
    align-items: flex-start; 
    text-decoration: none; 
    width: fit-content; 
    border-radius: 4px; 
}
.footer__logo:focus-visible { outline: 3px solid var(--color-accent, #00B4D8); outline-offset: 4px; }
.footer__logo-img { height: 77px; width: auto; display: block; object-fit: contain; object-position: left center; }
.footer__logo-tm {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary, #0A192F); 
    margin-top: 18px; 
    margin-left: 2px;
    line-height: 1;
}

.footer__parent-brand { display: flex; align-items: center; gap: 10px; }
.footer__parent-label { font-family: var(--font-sans, 'Inter', sans-serif); font-size: 11px; color: #9CA3AF; white-space: nowrap; font-style: italic; }
.footer__parent-logo-link { display: inline-flex; align-items: center; text-decoration: none; border-radius: 3px; transition: opacity 150ms ease-out; }
.footer__parent-logo-link:hover { opacity: 0.75; }
.footer__parent-logo-link:focus-visible { outline: 2px solid var(--color-accent, #00B4D8); outline-offset: 3px; }
.footer__parent-logo-img { height: 70px; width: auto; display: block; object-fit: contain; opacity: 0.85; }

.footer__tagline {
    font-family: var(--font-heading, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent, #00B4D8); 
    letter-spacing: 0.5px;
    margin: 0;
    line-height: 1.4;
}

.footer__brand-description {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 14px;
    color: #6B7280;
    line-height: 1.6;
    margin: 0;
    max-width: 320px;
}

.footer__trust-badges { display: flex; flex-direction: column; gap: 8px; }
.footer__trust-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: #6B7280; }

/* =============================================================================
   LINK COLUMNS (Quick Links, Products, Contact)
   ============================================================================= */
.footer__link-column,
.footer__products-column,
.footer__contact-column { 
    display: flex; 
    flex-direction: column; 
    gap: 0; 
}

/* Base Headings (e.g. QUICK LINKS, OUR PRODUCTS) */
.footer__column-heading {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 800;
    color: var(--color-primary, #0A192F);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin: 0 0 24px 0; 
    line-height: 1.4;
}

/* Sub-category Headings inside Our Products */
.footer__category-heading-link {
    text-decoration: none;
    display: inline-block;
    transition: opacity 150ms ease-out;
}
.footer__category-heading-link:hover {
    opacity: 0.8;
}
.footer__category-heading-link:focus-visible { 
    outline: 2px solid var(--color-accent, #00B4D8); outline-offset: 3px; 
}

.footer__category-heading {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 15px; /* Reduced to match general text size better, fixing the huge font issue */
    font-weight: 800;
    color: var(--color-primary, #0A192F);
    margin: 0 0 10px 0;
}

/* Link Lists and Items */
.footer__categories-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Reduced gap so it looks compact and clean */
}

.footer__link-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }

.footer__link-item { 
    display: flex; 
    align-items: center; 
}

.footer__bullet {
    font-size: 16px; /* Slightly smaller dot */
    line-height: 1;
    margin-right: 6px;
    color: var(--color-accent, #00B4D8); 
}

.footer__link {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 14px; /* Standardized text size */
    color: #6B7280;
    text-decoration: none;
    line-height: 1.5;
    transition: color 150ms ease-out;
    border-radius: 2px;
}

.footer__link:hover { color: var(--color-primary, #0B172A); } 
.footer__link:focus-visible { outline: 2px solid var(--color-accent, #00B4D8); outline-offset: 3px; }

/* =============================================================================
   CONTACT COLUMN
   ============================================================================= */
.footer__contact-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.footer__contact-row { display: flex; align-items: center; gap: 12px; }
.footer__contact-link { font-size: 14px; color: #6B7280; text-decoration: none; line-height: 1.5; transition: color 150ms ease-out; }
.footer__contact-link:hover { color: var(--color-primary, #0B172A); } 
.footer__contact-text { font-size: 14px; color: #6B7280; line-height: 1.5; }

.footer__cta-link {
    display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
    color: var(--color-accent, #00B4D8); 
    text-decoration: none; border-bottom: 1px solid rgba(0, 180, 216, 0.35); 
    padding-bottom: 2px; transition: color 150ms ease-out, border-color 150ms ease-out;
}
.footer__cta-link:hover { color: var(--color-primary, #0B172A); border-color: rgba(11, 23, 42, 0.70); } 
.footer__cta-link:hover .footer__cta-link-icon { transform: translateX(4px); }

/* =============================================================================
   DIVIDER & BOTTOM BAR
   ============================================================================= */
.footer__divider { height: 1px; background-color: #E5E7EB; margin: 40px 0 32px; }
@media (max-width: 639px) { .footer__divider { margin: 32px 0 24px; } }

.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 639px) { .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; } }

.footer__copyright { font-size: 13px; color: #9CA3AF; margin: 0; line-height: 1.5; }
.footer__legal-list { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.footer__legal-item { display: flex; align-items: center; }
.footer__legal-separator { color: #D1D5DB; font-size: 12px; user-select: none; }

.footer__legal-link { font-size: 13px; color: #9CA3AF; text-decoration: none; transition: color 150ms ease-out; border-radius: 2px; }
.footer__legal-link:hover { color: #374151; }

@media (max-width: 639px) {
    .footer__logo-img { height: 61px; }
    .footer__logo-tm { margin-top: 14px; font-size: 20px; } 
    .footer__parent-logo-img { height: 54px; }
}