/**
 * Footer layout refinement — precise alignment/spacing/hierarchy for the
 * two-column footer (built previously; see docs/FEATURES.md).
 *
 * Loaded after main.css/tokens.css, so these rules can override a
 * handful of existing footer declarations (container width, footer's
 * own top padding, .socials spacing, .footer-bottom spacing) via normal
 * cascade order — main.css itself is not edited. Colors, font-family/
 * font-weight scale, icons, and the responsive breakpoint (991px,
 * matching every other media query in this theme) are all untouched.
 *
 * Numbers below map directly to the spec: container 1280px/32px h-pad/
 * 72px+32px v-pad; logo→name 20px, name→description 12px,
 * description→social 24px, social→contact 36px; contact rows 16px icon
 * gap (already existed) + 16px row spacing (new); Quick Links heading
 * 24px margin-bottom, links 18px apart; bottom-bar 56px margin-top,
 * 32px padding-top. The mobile (max-width:991px) block keeps most of
 * these same values rather than scaling them down further — see its own
 * comments for the handful that do differ (icon gap, the 40px gap above
 * Quick Links, and the credit link's own display/margin).
 */

/* ---- Container ---- */
footer {
    padding-top: 0; /* was 84px in main.css — the container now owns top spacing precisely */
}

footer .container {
    max-width: 1280px;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 72px;
    padding-bottom: 32px;
}

/* ---- Left column ---- */
.tm-footer-left {
    max-width: 480px;
}

.tm-footer-logo {
    display: inline-block;
    margin-bottom: 20px;
}

.tm-footer-name {
    margin: 0 0 12px;
}

.tm-footer-description {
    margin: 0 0 24px;
    opacity: 0.75;
}

/* Description → Social Icons is now owned entirely by .tm-footer-description's
   margin-bottom above; main.css's own `footer .socials { margin-top: 12px; }`
   would otherwise add an extra, unwanted 12px on top of that. */
footer .socials {
    margin-top: 0;
}

.tm-footer-contact {
    margin-top: 36px;
}

.tm-footer-contact .cont-div + .cont-div {
    margin-top: 16px;
}

/* ---- Right column ---- */
.tm-footer-right {
    /* Pushes "Quick Links" down to align with the Resort Name rather
       than the logo: logo height (42px, the footer logo SVG's own
       intrinsic size) + the 20px logo→name gap. */
    padding-top: 62px;
}

.tm-footer-quick-links-heading {
    margin: 0 0 24px;
}

.tm-quick-links li {
    margin-bottom: 18px;
}

.tm-quick-links li:last-child {
    margin-bottom: 0;
}

.tm-quick-links-link {
    transition: var(--transition-base);
}

.tm-quick-links-link:hover {
    color: var(--green);
}

/* ---- Bottom bar ---- */
footer .footer-bottom {
    align-items: center;
    margin-top: 56px;
    padding: 32px 0 0;
}

@media screen and (max-width: 991px) {
    footer .container {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .tm-footer-left {
        max-width: none;
    }

    .tm-footer-logo {
        margin-bottom: 20px;
    }

    .tm-footer-name {
        margin-bottom: 8px;
    }

    .tm-footer-description {
        margin-bottom: 24px;
    }

    .tm-footer-contact {
        margin-top: 32px;
    }

    .tm-footer-contact .cont-div + .cont-div {
        margin-top: 16px;
    }

    /* Icon-to-text gap is 16px sitewide (main.css `.cont-div img`);
       tightened slightly on mobile only. */
    footer .cont-div img {
        margin-right: 12px;
    }

    .tm-footer-right {
        padding-top: 0;
        margin-top: 40px;
    }

    .tm-footer-quick-links-heading {
        margin-bottom: 20px;
    }

    .tm-quick-links li {
        margin-bottom: 16px;
    }

    footer .footer-bottom {
        margin-top: 40px;
        padding-top: 20px;
        padding-bottom: 24px;
    }

    /* The credit link is inline by default (main.css doesn't change its
       display), so a margin-top alone would be ignored — inline-block
       makes it participate in the block-stacked (copyright, then this)
       layout main.css's `.footer-bottom { display:block; }` already
       produces at this breakpoint. */
    footer .footer-bottom a {
        display: inline-block;
        margin-top: 12px;
    }
}