/* 
   OPTIMIZED CSS FOR FOOTER - Pro Translation Service
   Final Version with All Optimizations
*/

:root {
    /* Colors */
    --color-bg: #1a202c;
    --color-text: #ffffff;
    --color-border: #4a5568;
    --color-white-border: #ffffff;
    
    /* Typography */
    --font-family: 'Manrope', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    /* Simplified spacing system - ALL VALUES USED CONSISTENTLY */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Simplified sizes */
    --container-width: min(1300px, 90vw);
    --logo-width: 200px;
    --badge-width: 220px;
    --icon-size: 40px;
    --badge-size: 85px;
    --payment-size: 58px;
    
    /* Font sizes using clamp() */
    --text-xs: clamp(0.75rem, 1.5vw, 0.875rem);
    --text-sm: clamp(0.875rem, 1.5vw, 1rem);
    --text-base: clamp(1rem, 1.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.5vw, 1.25rem);
    
    /* Accordion settings */
    --accordion-open-height: 1000px;
    --accordion-closed-height: 0px;
}

/* Footer Styles - INCREASED TOP MARGIN */
.footer {
  background-color: var(--color-bg);
  color: var(--color-text);
  padding: 3rem 0 1.5rem;
  width: 100%;
  font-family: var(--font-family);
  opacity: 0;
  transition: opacity 0.5s ease;
  position: relative;
  z-index: 1;
  margin-top: 4rem; /* INCREASED from 2rem to 4rem */
}

/* Loaded state */
.footer-loaded {
    opacity: 1;
}

/* Container with max width */
.footer-container {
    max-width: var(--container-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Top Section - Columns */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-xl);
    gap: var(--spacing-md);
}

/* Column Styling */
.footer-column {
    flex: 1;
}

/* Logo column */
.logo-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: var(--spacing-sm);
}

/* Services column */
.services-column {
    padding-left: var(--spacing-sm);
}

/* Specialized and Resources columns */
.specialized-column,
.resources-column {
    padding: 0 var(--spacing-md);
}

/* Vertical Separator */
.vertical-separator {
    width: 1px;
    background-color: var(--color-border);
    height: 320px;
    margin: 0;
    align-self: stretch;
}

/* Footer Logo */
.footer-logo-link {
    display: inline-block;
    margin-bottom: var(--spacing-lg);
    transition: opacity 0.3s ease;
}

.footer-logo-link:hover {
    opacity: 0.9;
}

.footer-logo {
    width: var(--logo-width);
    height: auto;
}

/* Contact Section */
.contact-section {
    margin-bottom: var(--spacing-lg);
}

.contact-heading {
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.contact-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text);
    opacity: 0.9;
}

.contact-text,
.contact-email {
    color: var(--color-text);
    font-size: var(--text-sm);
    opacity: 0.9;
}

.contact-email {
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: opacity 0.3s ease;
}

.contact-email:hover {
    opacity: 1;
}

/* Column Headings - INCREASED SPACING */
.footer-column-heading {
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    margin-bottom: 3rem; /* INCREASED from 1.5rem to 3rem */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Money Back Badge */
.money-back-badge {
    margin-top: var(--spacing-md);
}

.money-back-image {
    width: var(--badge-width);
    height: auto;
    border-radius: 4px;
}

/* Lists */
.footer-column ul {
    list-style: none;
    margin-bottom: var(--spacing-lg);
}

.footer-column ul li {
    margin-bottom: var(--spacing-sm);
}

/* Footer Links - Desktop Underline Effect Only */
.footer-link {
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    opacity: 0.9;
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    transition: opacity 0.3s ease;
    font-weight: var(--font-weight-regular);
}

/* Desktop only underline effect */
@media (min-width: 1025px) {
    .footer-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 1px;
        bottom: 0;
        left: 0;
        background-color: var(--color-text);
        transition: width 0.3s ease;
    }
    
    .footer-link:hover {
        opacity: 1;
    }
    
    .footer-link:hover::after {
        width: 100%;
    }
}

/* Divider Line */
.footer-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: 0 auto var(--spacing-xl);
    max-width: var(--container-width);
    width: 100%;
}

/* Middle Section - REDUCED SPACING */
.footer-middle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem; /* REDUCED from 2rem to 0.5rem */
    gap: var(--spacing-lg);
}

/* Community Section */
.community-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.community-text {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-xs);
}

.social-icons {
    display: flex;
    gap: var(--spacing-sm);
}

.social-icons a {
    display: inline-block;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.social-icons a:hover {
    transform: scale(1.15);
}

.social-icons img {
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: 4px;
}

/* Security Badges */
.security-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
}

.security-badges img {
    width: var(--badge-size);
    height: 55px;
    transition: transform 0.3s ease;
    transform-origin: center;
    border-radius: 4px;
}

.security-badges img:hover {
    transform: scale(1.1);
}

/* Payments Section */
.payments-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.secure-payments-text {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-xs);
}

.payment-icons {
    display: flex;
    gap: var(--spacing-sm);
}

.payment-icons img {
    width: var(--payment-size);
    height: 42px;
    transition: transform 0.3s ease;
    transform-origin: center;
    border-radius: 4px;
}

.payment-icons img:hover {
    transform: scale(1.15);
}

/* Bottom Section */
.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    max-width: var(--container-width);
    width: 100%;
    margin: 0 auto;
}

.footer-bottom p {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-regular);
    opacity: 0.8;
}

/* ========================================================================== */
/* ACCORDION STYLES - Optimized with CSS-based height transitions */
/* ========================================================================== */

/* Default accordion content - closed */
.accordion-content {
    max-height: var(--accordion-closed-height);
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Open state - controlled by JS adding class */
.accordion-content.open {
    max-height: var(--accordion-open-height);
}

/* Arrow icon rotation */
.accordion-arrow {
    transition: transform 0.3s ease;
}

.accordion-toggle[aria-expanded="true"] .accordion-arrow {
    transform: rotate(180deg);
}

/* ========================================================================== */
/* DESKTOP-ONLY OVERRIDES FOR ACCORDION ELEMENTS */
/* ========================================================================== */

@media (min-width: 1025px) {
    /* Hide accordion buttons and show normal headings on desktop */
    .mobile-accordion .accordion-toggle {
        border: none;
        background: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        width: auto;
        display: block;
        cursor: default;
        justify-content: flex-start;
    }
    
        /* Show the heading text normally */
    .mobile-accordion .accordion-toggle .footer-column-heading {
        margin-bottom: 3rem;
        text-align: left;
    }
    
    /* Hide the accordion arrows on desktop */
    .mobile-accordion .accordion-icon {
        display: none;
    }
    
    /* Show accordion content always expanded on desktop */
    .mobile-accordion .accordion-content {
        max-height: none;
        display: block;
        overflow: visible;
    }
    
        /* Ensure lists display normally on desktop */
    .mobile-accordion .accordion-content ul {
        margin-bottom: var(--spacing-lg);
        padding-top: 0;
        text-align: left;
    }
    
    /* Add top margin to first list item for better spacing */
    .mobile-accordion .accordion-content ul li:first-child {
        margin-top: 1.5rem; /* Adjust this value as needed */
    }
    
    /* Ensure links display normally on desktop */
    .mobile-accordion .accordion-content .footer-link {
        display: inline-block;
        text-align: left;
        padding-bottom: 2px;
    }
}

/* ========================================================================== */
/* MOBILE STYLES (1024px and below) */
/* ========================================================================== */

@media (max-width: 1024px) {
    .footer-container {
        padding: 0 var(--spacing-lg);
    }
    
    /* Hide unwanted sections on mobile */
    .money-back-badge,
    .security-badges,
    .payments-section,
    .vertical-separator {
        display: none;
    }
    
    /* Adjust footer middle section for mobile */
    .footer-middle {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-xl);
        margin-bottom: var(--spacing-xl);
    }
    
    .community-section {
        flex: 1 1 100%;
        justify-content: center;
    }
    
    /* Mobile Accordion Layout */
    .footer-top {
        flex-direction: column;
        gap: 0;
        margin-bottom: var(--spacing-xl);
    }
    
    /* Logo column - ALWAYS LEFT ALIGNED on mobile + ADDED TOP SPACING */
    .logo-column {
        width: 100%;
        margin-bottom: var(--spacing-xl);
        padding-right: 0;
        align-items: flex-start;
        text-align: left;
        padding-top: 1rem; /* ADDED: Space above logo on mobile */
    }
    
    /* Mobile Accordion Columns */
    .mobile-accordion {
        width: 100%;
        padding: 0;
        margin-bottom: var(--spacing-sm);
        text-align: center;
    }
    
    /* Accordion Toggle Button - White border, rounded edges */
    .accordion-toggle {
        width: 100%;
        background: none;
        border: 1px solid var(--color-white-border);
        border-radius: 50px;
        padding: var(--spacing-md) var(--spacing-lg);
        margin-bottom: var(--spacing-sm);
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        color: var(--color-text);
        font-family: var(--font-family);
        transition: background-color 0.3s ease;
    }
    
    .accordion-toggle:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
    
    /* Accordion heading inside button */
    .accordion-toggle .footer-column-heading {
        margin-bottom: 0;
        font-size: var(--text-base);
        color: var(--color-text);
        text-align: center;
        flex-grow: 1;
    }
    
    /* Accordion icon container */
    .accordion-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        margin-left: var(--spacing-sm);
    }
    
    /* Arrow SVG styling - White arrows */
    .accordion-icon svg {
        width: 16px;
        height: 16px;
        stroke: white;
        stroke-width: 2;
    }
    
    /* Accordion Content */
    .accordion-content {
        text-align: center;
    }
    
    /* Accordion Lists */
    .accordion-content ul {
        margin-bottom: var(--spacing-md);
        padding-top: var(--spacing-sm);
        text-align: center;
    }
    
    .accordion-content ul li {
        margin-bottom: var(--spacing-sm);
        text-align: center;
    }
    
    /* Mobile Links - no underline effect */
    .footer-link {
        display: block;
        padding: var(--spacing-sm) 0;
        font-size: var(--text-sm);
        text-align: center;
    }
    
    .footer-link::after {
        display: none;
    }
    
    .footer-link:hover {
        opacity: 0.8;
    }
    
    /* Contact items remain left-aligned */
    .contact-details {
        align-items: flex-start;
        text-align: left;
    }
    
    .contact-item {
        justify-content: flex-start;
    }
    
    /* Ensure footer stays below navigation */
    .footer {
        padding-bottom: 120px;
    }
}

/* ========================================================================== */
/* SMALL MOBILE DEVICES (480px and below) */
/* ========================================================================== */

@media (max-width: 480px) {
    .footer-container {
        padding: 0 var(--spacing-md);
    }
    
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-top {
        gap: 0;
    }
    
    .contact-details {
        gap: var(--spacing-sm);
    }
    
    .contact-item {
        gap: var(--spacing-xs);
    }
    
    .social-icons,
    .payment-icons {
        gap: var(--spacing-xs);
    }
    
    .accordion-toggle {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    /* Mobile touch targets */
    .social-icons a,
    .footer-link {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .footer,
    .social-icons a,
    .security-badges img,
    .payment-icons img,
    .footer-link,
    .footer-link::after,
    .accordion-content,
    .accordion-icon svg {
        transition: none;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}