/* =========================================
header
   ========================================= */

.main-header {
    background-color: var(--dark-blue);
    padding: 10px 20px; /* Using S spacing (16px) from your scale */
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-container {
    display: flex;
    justify-content: space-between; /* Pushes logo left, "menu" right */
    align-items: center;
    max-width: 1400px; /* Matches your Desktop Grid */
    margin: 0 auto;
}
.logo img {
    display: block;
}

.nav-toggle {
    display: none;
}
/* 1. Hide the navigation menu by default on mobile */
.main-nav {
    display: none; /* Keep our hidden state */

    position: absolute;
    top: 100%; /* Pushes the menu exactly to the bottom edge of the header */
    left: 0;
    width: 100%;

    background-color: var(--dark-blue); /* Matches your header */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle line to separate it from the header */
    padding: 24px 20px; /* Gives the links some breathing room */
}
/* 2. THE MAGIC: When the invisible checkbox is checked,
      select its sibling (.main-nav) and show it */
.nav-toggle:checked ~ .main-nav {
    display: block;
}

/* Make the list look clean */
.main-nav ul {
    list-style: none; /* Removes bullet points */
    margin: auto;
    padding: 0;
    display: flex;
    flex-direction: column; /* Stacks the links vertically */
    gap: 24px; /* Space between each link */
    text-align: center;
}

.main-nav a {
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;

    /* NEW: Anchor the underline to the text */
    position: relative;
    /* NEW: Smooth text color fade */
    transition: color 220ms ease;
}

/* 2. Create the hidden underline */
.main-nav a::after {
    content: "";
    color: --main-red;
    position: absolute;
    bottom: -10px; /* Sits just below the text */
    left: 0;
    width: 100%;
    height: 4px;

    background-color: var(--gray-text-light); /* Using your brand red */

    /* The Animation Magic */
    transform: scaleX(0); /* Shrinks the line to 0 width */
    transform-origin: right; /* Sets the anchor point */
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
}

/* 3. The Hover State */
.main-nav a:hover {
    color: var(--gray-text-light); /* Softens the text color slightly */
}

/* Make the line grow on hover */
.main-nav a:hover::after {
    transform: scaleX(1); /* Expands the line to full width */
    transform-origin: left; /* Changes anchor so it "swipes" in */
}

/* =========================================
Footer
   ========================================= */
.main-footer {
    background-color: var(--dark-blue);
    color: var(--gray-text-light); /* Softer text color for readability */
    text-align: center; /* Centers everything for mobile */
    padding-top: 64px; /* XL Spacing */
}
.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px; /* L Spacing between sections */
}

.footer-title {
    font-family: var(--font-display);
    color: var(--white);
    font-size: 18px;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    text-transform: capitalize;
}

.footer-address {
    font-style: normal; /* Removes the default browser italics from <address> */
    line-height: 1.6;
}

/* Make phone numbers and links clickable and styled */
.footer-address a,
.social-links a {
    color: var(--white);
    text-decoration: underline;
    transition: color var(--t-base); /* Smooth hover transition */
}
.footer-address a:hover,
.social-links a:hover {
    color: var(--main-red);
}

/* Social Links layout */
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.map-link {
    padding: 20px;
    display: block;
    width: 100%;

    overflow: hidden; /* Clips the image perfectly to the rounded corners */

    /* Hardware-accelerated hover setup */
    transition:
        transform var(--t-base),
        box-shadow var(--t-base); /* */
}
.map-image {
    width: 100%;

    object-fit: cover; /* Acts like background-size: cover, ensuring no weird squishing */
    display: block;
}

/* The Bottom Bar */
.footer-bottom {
    margin-top: 64px;
    padding: 24px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle divider */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    font-size: 12px;
}
.footer-logo {
    opacity: 0.8; /* Makes the logo sit slightly back in the visual hierarchy */
}
/* =========================================
   DESKTOP STYLES (768px and wider)
   ========================================= */
@media (min-width: 768px) {
    .main-header {
        padding: 15px 20px; /* Using S spacing (15px) from your scale */
    }
    .logo img {
        display: block;
    }
    /* 1. Hide the Burger Icon */
    .burger-label {
        display: none;
    }

    /* 2. Reset the Nav Container */
    .main-nav {
        display: block !important; /* Force it to show, ignoring the checkbox state */
        position: static; /* Removes the absolute dropdown behavior */
        width: auto; /* Shrinks it to fit just the links */
        background-color: transparent; /* Removes the dark blue block */
        border: none; /* Removes the border */
        padding: 0;
    }

    /* 3. Make the list horizontal */
    .main-nav ul {
        flex-direction: row; /* Flips from column to row */
        align-items: center;
        gap: 40px; /* Space between links using your L spacing token */
    }

    /* =========================================
    Footer
       ========================================= */
    .flexy {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        gap: 40px; /* L Spacing between sections */
    }
}