/* =========================================
CLOCK7 CALCULATORS - FOOTER STYLES
Mobile & Desktop Optimized
========================================= */

#global-footer {
 background-color: #ffffff;
 padding: 50px 0 30px;
 border-top: 1px solid #e2e8f0;
 margin-top: 60px;
}

/* Container */
#global-footer .container {
 max-width: 1100px;
 margin: 0 auto;
 padding: 0 16px;
}

/* --- Footer layout: CSS Grid for Responsiveness --- */
.footer-content {
 display: grid;
 /* Desktop: Allows 4 columns, each at least 220px wide */
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 40px;
 margin-bottom: 40px;
}

/* Sections */
.footer-section h4 {
 font-size: 1.15rem;
 margin-bottom: 14px;
 color: #0f172a;
 font-weight: 600;
}

.footer-section p {
 font-size: 0.95rem;
 color: #475569;
 line-height: 1.6;
 margin-bottom: 10px;
}

/* Lists */
.footer-section ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.footer-section ul li {
 margin-bottom: 10px;
}

.footer-section ul li a {
 color: #1d4ed8;
 text-decoration: none;
 font-size: 0.95rem;
}

.footer-section ul li a:hover {
 text-decoration: underline;
}

/* Social icons */
.social-links {
 margin-top: 10px;
}

.social-links a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 margin-right: 12px;
 color: #0f172a;
}

.social-links a:hover {
 color: #1d4ed8;
}

/* Footer bottom */
.footer-bottom {
 text-align: center;
 padding-top: 16px;
 border-top: 1px solid #e2e8f0;
}

.footer-bottom p {
 font-size: 0.9rem;
 color: #475569;
}

.footer-bottom a {
 color: #1d4ed8;
 text-decoration: none;
}

.footer-bottom a:hover {
 text-decoration: underline;
}

/* =========================================
TABLET (Max 768px) - 2.5 Column Layout
========================================= */
@media (max-width: 768px) {

 #global-footer {
  padding: 40px 0 25px;
 }

    /* Set up a fixed two-column grid for the Tablet layout */
 .footer-content {
  grid-template-columns: 1fr 1fr;
  gap: 30px;
 }

    /* CRITICAL FIX: Make the first section (Clock7) span both columns */
    .footer-section:first-child {
        grid-column: 1 / -1; /* Spans from the first line to the last */
        margin-bottom: 10px; /* Adjust spacing after the wide section */
        text-align: center;
    }
    
    .footer-section:first-child p {
        max-width: 80%; /* Constrain text width for better readability */
        margin: 0 auto 10px auto;
    }

    /* The remaining 3 sections (Tools, Support, Legal) will then wrap naturally below */
}

/* =========================================
MOBILE (Max 480px) - Single Column Layout
========================================= */
@media (max-width: 480px) {

 #global-footer {
  padding: 30px 0 20px;
 }

    /* Set up a single-column grid for Mobile */
 .footer-content {
  grid-template-columns: 1fr;
  gap: 26px;
  text-align: center;
 }

    /* Ensure the first section is still explicitly 1 column wide (default, but good practice) */
    .footer-section:first-child {
        grid-column: 1;
        text-align: center;
    }
    
 .footer-section ul li {
  margin-bottom: 8px;
 }

 /* Center social icons on mobile */
 .social-links {
  display: flex;
  justify-content: center;
 }

 .social-links a {
  margin-right: 14px;
 }

 .footer-bottom {
  padding-top: 14px;
 }
}