/* =========================================================
   Luxury Moving Solutions - one-page layout additions (v3)
   Loaded AFTER style.css. Nothing in style.css is changed, so
   privacy.html, enterprise-app.html and 404.html keep working as they are.
   ========================================================= */

/* Smooth jumping between sections (off for people who ask for less motion) */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Anchors land just below the sticky header. onepage.js sets --anchor-offset
   to the real header height; 130px is the fallback when JavaScript is off. */
.page-section { scroll-margin-top: var(--anchor-offset, 130px); }

/* Keyboard users: first Tab stop jumps past the header */
.skip-link {
    position: absolute;
    left: -10000px;
    top: 0;
    background: #C09E32;
    color: #000;
    padding: 10px 16px;
    font-weight: bold;
    z-index: 2000;
}
.skip-link:focus { left: 10px; top: 10px; }

/* Section banners: same look as the old sub-page banners, but the title is an h2 */
.section-banner {
    background-size: cover;
    background-position: center;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 3px solid #C09E32;
    border-bottom: 3px solid #C09E32;
    padding: 0 20px;
}
.section-banner h2 {
    color: #ffffff !important;
    font-size: 3.5em;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 0 0 5px rgba(192, 158, 50, 0.28), 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin: 0;
}
/* Headings inside a section were h2 on the old pages; they are h3 now.
   These rules give them the exact same look as the old h2 treatment. */
.section-heading {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 30px;
    display: inline-block;
    font-size: 1.5em;
}
.section-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    height: 3px;
    background-color: #C09E32;
}
.services-list-section .section-heading {
    color: #C09E32;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: none;
}
.welcome-section .section-heading { margin-top: 0; }

/* Paragraph spacing now that some sections hold two paragraphs */
.welcome-section p + p, .closing-section p + p { margin-top: 18px; }
.closing-section p { max-width: 950px; margin-left: auto; margin-right: auto; font-size: 1.1rem; line-height: 1.5; color: #333; }

/* Call-to-action button on a light background: the base button text/hover is built for dark photos */
.section-cta { margin-top: 30px !important; padding-bottom: 40px; }
.cta-on-light { padding: 12px 35px; color: #000; }
.cta-on-light:hover { background-color: #111; color: #C09E32; }

/* Each section contains its own margins. Without this, the 20px margin under the home page's
   photo cards escaped the white block and showed the page's black background as a bar. */
.home-page, .page-section { display: flow-root; }
.home-page { background: #fff; }

/* Current section highlighted in the menu */
.primary-nav a.is-active { color: #C09E32; box-shadow: 0 2px 0 #C09E32; }

/* A little breathing room between a banner and the first block under it */
.section-banner + .theme-wrapper .welcome-section { padding-top: 40px !important; }

/* Contact block inside the one-page layout */
#contact .contact-form-section { padding-bottom: 60px; }

/* The footer line now holds two links; spread them slightly */
.site-footer a + a { margin-left: 8px; }

/* Phones: slimmer banners, compact sticky header while scrolling */
@media (max-width: 768px) {
    .section-banner { height: 130px; }
    .section-banner h2 { font-size: 1.8rem !important; }
    .section-heading { font-size: 1.35em; }

    /* The header sticks with its phone/social strip pushed up off the screen, so once the
       visitor scrolls, only the logo and Menu button stay pinned. Nothing changes size, so
       the page never jumps. onepage.js sets --topbar-h to the strip's real height. */
    .main-header { top: calc(-1 * var(--topbar-h, 44px)); }
    /* Social links on top (they scroll away), the Call line right above the logo (it stays pinned) */
    .top-bar { flex-direction: column-reverse !important; gap: 4px !important; }
}

@media (max-width: 480px) {
    .cta-on-light { padding: 12px 24px; }
}

/* Alternating blocks: down the page, no two light blocks and no two dark blocks ever touch
   (a banner between them does not count as a separator). Sections marked "flip" swap light and dark. */
.flip .theme-wrapper { background: #111 !important; box-shadow: none; }
.flip .theme-wrapper .section-heading { color: #C09E32; }
.flip .theme-wrapper p { color: #fff; }
.flip .services-list-section {
    background: linear-gradient(135deg, #ffffff 0%, #f9f8f4 50%, #f0ebd8 100%);
    color: #333;
}
.flip .services-list-section .section-heading { color: #111; text-shadow: none; }
.flip .service-bullets { color: #7A5C08; }
.flip .service-bullets li span, .flip .services-list-section a,
.flip .services-list-section [style*="color: #fff"] { color: #111 !important; }
.flip .services-list-section [style*="color: #C09E32"] { color: #7A5C08 !important; }

/* More room between the three photo cards and the Concierge Services banner */
.home-page .services-section { margin-bottom: 60px; }

/* Footer: copyright on its own line, links on a tidy row beneath (fixes the crowded "Back to Top" wrap on phones) */
.site-footer { padding: 14px 20px 16px !important; }
.site-footer p { padding: 0 !important; line-height: 1.5 !important; }
.site-footer .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 28px; margin-top: 8px !important; }
.site-footer .footer-links a { padding: 8px 4px; margin: 0 !important; }
@media (min-width: 700px) {
    .site-footer { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 32px; }
    .site-footer .footer-links { margin-top: 0 !important; }
}