.footer { background-color: var(--primary-color); padding: clamp(1.5rem, 2.5vw, 2rem) 0; text-align: center; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); width: 100%; box-sizing: border-box; } .footer__content { max-width: clamp(700px, 90vw, 1100px); margin: 0 auto; padding: 0 clamp(0.75rem, 2vw, 1.25rem); } .footer__links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: clamp(0.75rem, 2vw, 1rem); margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem); } .footer__contact-details { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: clamp(0.75rem, 2vw, 1rem); } .footer__item { font-family: 'Montserrat', sans-serif; font-size: clamp(0.75rem, 2vw, 0.85rem); color: var(--footer-text); } .footer__item a { color: var(--footer-text); text-decoration: none; transition: color 0.3s ease; display: inline-block; padding: 0.5rem 0.25rem; min-height: 44px; min-width: 44px; } .footer__item a:hover { color: var(--nav-hover); text-decoration: underline; } .footer__link-button { background: none; border: none; padding: 0.5rem 0.25rem; font-family: 'Montserrat', sans-serif; font-size: inherit; color: var(--footer-text); text-decoration: none; cursor: pointer; transition: color 0.3s ease; min-height: 44px; min-width: 44px; } .footer__link-button:hover { color: var(--nav-hover); text-decoration: underline; } .footer__contact { font-family: 'Montserrat', sans-serif; font-size: clamp(0.75rem, 2vw, 0.85rem); color: var(--footer-contact-text); } .footer__contact a { color: var(--footer-contact-text); text-decoration: none; transition: color 0.3s ease; display: inline-block; padding: 0.5rem 0.25rem; min-height: 44px; min-width: 44px; } .footer__contact a:hover { color: var(--nav-hover-dark); text-decoration: underline; } .footer__copyright { display: block; width: 100%; text-align: center; margin-top: clamp(0.5rem, 1.5vw, 0.75rem); font-family: 'Montserrat', sans-serif; font-size: clamp(0.6rem, 1.5vw, 0.75rem); color: var(--footer-text); } .footer__copyright a { color: var(--footer-text); text-decoration: none; transition: color 0.3s ease; } .footer__copyright a:hover { color: var(--nav-hover); text-decoration: underline; } /* Responsive Design */ @media (max-width: 768px) { .footer { padding: clamp(1.5rem, 3vw, 2rem) 0; } .footer__content { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1rem 0; text-align: center; position: relative; } /* Centered vertical divider using pseudo-element */ .footer__content::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: calc(100% - 3rem); /* Stop before copyright */ background: rgba(0, 0, 0, 0.1); } .footer__links { flex-direction: column; align-items: center; justify-content: flex-start; padding-right: 1rem; margin-bottom: 0; } .footer__contact-details { flex-direction: column; align-items: center; justify-content: flex-start; padding-left: 1rem; text-align: center; margin-bottom: 0; } .footer__copyright { grid-column: 1 / -1; width: 100%; text-align: center; padding-top: 1rem; border-top: 2px solid rgba(0, 0, 0, 0.05); } /* Reset text alignments to center */ .footer__item, .footer__link-button, .footer__contact { text-align: center; } .footer__item, .footer__contact { font-size: clamp(0.7rem, 1.8vw, 0.8rem); } } @media (max-width: 500px) { .footer__content { padding: 0 clamp(0.5rem, 1.5vw, 0.75rem); } .footer__links, .footer__contact-details { gap: 0.4rem; } .footer__item, .footer__contact { font-size: clamp(0.65rem, 1.6vw, 0.75rem); } } @media (max-width: 400px) { .footer { padding: clamp(0.75rem, 1.5vw, 1rem) 0; } .footer__content { padding: 0 clamp(0.4rem, 1.2vw, 0.6rem); } .footer__item, .footer__contact { font-size: clamp(0.6rem, 1.4vw, 0.7rem); } } /* Ensure no overflow and sticky footer foundation */ body, html { min-height: 100vh; display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; }