/* Responsive — shared breakpoints. */
/* RESPONSIVE - SHARED BREAKPOINTS */
/* Tablets: the clock leaves its absolute center so it cannot run into the nav. */
@media (max-width: 1024px) {
    .header-location {
        position: static;
        transform: none;
    }
}

@media (max-width: 768px) {
    .site-header .container {
        flex-wrap: nowrap;
        gap: 0;
    }

    .header-location {
        display: none;
    }

    .header-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
        margin-left: auto;
    }

    .mobile-menu-overlay {
        display: flex;
    }

    /* Hero — mobile layout */
    .hero {
        padding: 1.5rem 0 0;
    }

    .hero-headline {
        font-size: clamp(2.5rem, 12vw, 4.5rem);
        line-height: 1.05;
    }

    /* On phones the rule clears the headline's descenders: 8px below the box instead of the desktop overlap. */
    .hero::after {
        margin-top: 8px;
    }

    /* Footer */
    .site-footer {
        padding: 2rem 0 1.5rem;
    }

    /* Phones: the whole footer centered */
    .footer-content,
    .footer-top,
    .footer-bottom {
        align-items: center;
    }

    .footer-top {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }

    .footer-email {
        font-size: clamp(1.5rem, 5vw, 2rem);
        text-align: center;
    }

    .footer-plate {
        font-size: 16px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }

    .footer-copyright {
        font-size: 0.7rem;
    }

    .footer-social {
        gap: 8px;
    }

    /* Disable hover effects on mobile */
    .footer-email:hover {
        opacity: 1;
    }
}