/**
 * FOOTER STYLES
 * 
 * Stylesheet for the main footer component of Midway Wholesale website.
 * Implements a responsive grid layout with 5 columns on desktop,
 * reducing to fewer columns on smaller screens.
 * 
 * Layout Structure:
 * - Company branding & newsletter signup (left column)
 * - Menu navigation links
 * - Buy/Account links  
 * - Contact information & social media
 * - Payment methods & app downloads (right column)
 * - Copyright bar at bottom
 * 
 * Responsive Breakpoints:
 * - Desktop: 5 columns (1400px max-width)
 * - Tablet: 3 columns (1024px and below)
 * - Mobile: 2 columns (768px and below)
 * - Small mobile: 1 column (480px and below)
 * 
 * @package MidwayWholesale
 * @version 1.2
 * @author GoneClear Development Team
 */

/* ================================
   MAIN FOOTER CONTAINER
   ================================ */

/**
 * Primary footer wrapper
 * Sets background, spacing, and overall container properties
 */
.main-footer {
    margin-top: 50px;           /* Separation from main content */
    background-color: #f8f9fa;  /* Light gray background */
    color: black;               /* Default text color */
    padding: 40px 0 0;          /* Top padding, no side/bottom padding */
}

/**
 * Footer content grid container
 * Creates responsive 5-column layout with maximum width constraint
 */
.footer-content {
    max-width: 1400px;                      /* Maximum container width */
    margin: 0 auto;                         /* Center the container */
    padding: 0 20px;                        /* Side padding for mobile */
    display: grid;                          /* CSS Grid layout */
    grid-template-columns: repeat(5, 1fr);  /* 5 equal columns */
    gap: 30px;                              /* Space between columns */
}

/* ================================
   FOOTER SECTIONS
   ================================ */

/**
 * Individual footer section headers
 * Styling for section titles like "Menu", "Contact", etc.
 */
.footer-section h3 {
    font-size: 18px;        /* Section header size */
    margin-bottom: 20px;    /* Space below headers */
    font-weight: 600;       /* Semi-bold text */
}

/**
 * Footer navigation lists
 * Reset default list styling for clean appearance
 */
.footer-section ul {
    list-style: none;   /* Remove bullet points */
    padding: 0;         /* Remove default padding */
}

/**
 * Footer list items
 * Spacing between navigation links
 */
.footer-section ul li {
    margin-bottom: 10px;    /* Space between list items */
}

/**
 * Footer links
 * Consistent styling and hover effects for all footer links
 */
.footer-section a {
    color: #747474;             /* Gray text color */
    text-decoration: none;      /* Remove underlines */
    transition: opacity 0.3s;   /* Smooth hover transition */
}

/**
 * Footer link hover effect
 * Subtle opacity change on hover for better UX
 */
.footer-section a:hover {
    opacity: 0.8;   /* Slightly transparent on hover */
}

/* ================================
   COMPANY BRANDING SECTION
   ================================ */

/**
 * Company logo in footer
 * Responsive sizing with bottom margin
 */
.footer-logo {
    max-width: 200px;   /* Maximum logo width */
    margin-bottom: 5px; /* Space below logo */
}

/**
 * Company tagline text
 * Italicized motto below the logo
 */
.tagline {
    font-style: italic;     /* Italic text style */
    margin-bottom: 20px;    /* Space below tagline */
    margin-top: 0;          /* Remove default top margin */
}

/* ================================
   NEWSLETTER SIGNUP SECTION
   ================================ */

/**
 * Newsletter email input field
 * Full-width input with consistent styling
 */
.register-now input {
    padding: 10px;          /* Internal padding */
    border: none;           /* Remove default border */
    border-radius: 4px;     /* Rounded corners */
    width: 100%;            /* Full width of container */
    margin-bottom: 10px;    /* Space below input */
}

/**
 * Newsletter submit button
 * Brand-colored button with hover effects
 */
.submit-btn {
    background: #dc382b;        /* Brand red background */
    border: none;               /* Remove default border */
    color: white;               /* White text */
    padding: 10px 20px;         /* Internal padding */
    border-radius: 4px;         /* Rounded corners */
    cursor: pointer;            /* Pointer cursor on hover */
    width: 100%;                /* Full width button */
    margin-top: 10px;           /* Space above button */
    font-weight: 500;           /* Medium font weight */
}

/**
 * Newsletter submit button hover state
 * Darker color on hover for visual feedback
 */
.submit-btn:hover {
    background: #c62f23;    /* Darker red on hover */
}

/* ================================
   GOOGLE REVIEWS SECTION
   ================================ */

/**
 * Google review link container
 * Spacing above the review button
 */
.review-link {
    margin-top: 15px;   /* Space above review section */
}

/**
 * Google review button
 * Styled to match Google's brand colors
 */
.google-review-btn {
    display: inline-block;          /* Inline block for button styling */
    background: #4285F4;            /* Google blue background */
    color: white !important;        /* White text (important for specificity) */
    padding: 8px 15px;              /* Internal padding */
    border-radius: 4px;             /* Rounded corners */
    transition: background-color 0.3s; /* Smooth background transition */
    font-weight: 500;               /* Medium font weight */
}

/**
 * Google review button star icon
 * Yellow star to match Google's review styling
 */
.google-review-btn i {
    color: #FBBC05;         /* Google yellow for star */
    margin-right: 5px;      /* Space between icon and text */
}

/**
 * Google review button hover state
 * Darker blue on hover with opacity override
 */
.google-review-btn:hover {
    background: #3367D6;        /* Darker Google blue */
    opacity: 1 !important;      /* Override default link hover opacity */
}

/* ================================
   SOCIAL MEDIA SECTION
   ================================ */

/**
 * Social media icons container
 * Horizontal layout with spacing between icons
 */
.social-links {
    margin-top: 20px;   /* Space above social icons */
    display: flex;      /* Horizontal layout */
    gap: 15px;          /* Space between icons */
}

/**
 * Social media icon sizing
 * Larger icons for better touch targets
 */
.social-links a {
    font-size: 20px;    /* Icon size */
}

/* ================================
   PAYMENT METHODS SECTION
   ================================ */

/**
 * Payment method logos container
 * Horizontal layout with spacing
 */
.payment-methods {
    display: flex;          /* Horizontal layout */
    gap: 5px;               /* Small gap between logos */
    margin-bottom: 20px;    /* Space below payment section */
}

/**
 * Payment method logo images
 * Consistent sizing for Visa, Mastercard, etc.
 */
.payment-methods img {
    max-width: 40px;        /* Maximum logo width */
    height: auto;           /* Maintain aspect ratio */
    object-fit: contain;    /* Fit within container */
}

/* ================================
   MOBILE APP SECTION
   ================================ */

/**
 * App download links container
 * Vertical stacking of app store buttons
 */
.app-links {
    display: flex;              /* Flexbox layout */
    flex-direction: column;     /* Stack vertically */
    gap: 10px;                  /* Space between buttons */
}

/**
 * App store button images
 * Consistent sizing for Google Play and App Store buttons
 */
.app-links img {
    max-width: 140px;   /* Maximum button width */
}

/* ================================
   FOOTER BOTTOM SECTION
   ================================ */

/**
 * Copyright section at bottom of footer
 * Full-width bar with centered text and brand colors
 */
.footer-bottom {
    margin-top: 40px;                               /* Space above copyright bar */
    padding: 20px;                                  /* Internal padding */
    text-align: center;                             /* Center-aligned text */
    background-color: #19427f;                      /* Brand blue background */
    border-top: 1px solid rgba(255,255,255,0.1);   /* Subtle top border */
}

/**
 * Copyright text styling
 * White text on dark background
 */
.footer-bottom p {
    color: white;   /* White text for contrast */
}

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

/**
 * TABLET LAYOUT (1024px and below)
 * Reduces to 3-column layout for medium screens
 */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: repeat(3, 1fr);  /* 3 columns instead of 5 */
    }
    
    /* Slightly larger payment logos on tablets */
    .payment-methods img {
        max-width: 50px;
    }
}

/**
 * SMALL TABLET/LARGE MOBILE LAYOUT (768px and below)
 * Reduces to 2-column layout for smaller screens
 */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);  /* 2 columns */
    }
    
    /* Adjust payment logo size */
    .payment-methods img {
        max-width: 45px;
    }
}

/**
 * MOBILE LAYOUT (480px and below)
 * Single column layout for smallest screens
 */
@media (max-width: 480px) {
    .footer-content {
        grid-template-columns: 1fr;    /* Single column layout */
    }
}