/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Work+Sans:wght@400;500;600&display=swap");

/* Global Styles */
body {
    font-family: "Work Sans", sans-serif !important;
    background-color: #FDFCF8;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: "Outfit", sans-serif !important;
}

/* Header Styles - Glassmorphism */
header.wp-block-template-part {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    padding: 16px 0 !important;
}

/* Site Title */
.wp-block-site-title a {
    font-family: "Outfit", sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    color: #111827 !important;
    text-decoration: none !important;
}

/* Navigation Links */
.wp-block-navigation a {
    font-family: "Work Sans", sans-serif !important;
    font-weight: 500 !important;
    color: #374151 !important;
    transition: color 0.3s ease !important;
    padding: 8px 16px !important;
}

.wp-block-navigation a:hover {
    color: #1D5C96 !important;
}

/* Remove page title on homepage */
body.home .wp-block-post-title,
body.page-template-default.page .entry-title:first-of-type {
    display: none !important;
}

.page-id-13 h1.wp-block-post-title {
    display: none !important;
}

/* Button Hover Effects */
.wp-block-button__link {
    transition: all 0.3s ease !important;
}

.wp-block-button__link:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Service Cards Hover */
.wp-block-column {
    transition: all 0.3s ease !important;
}

/* Links in content */
.wp-block-paragraph a {
    text-decoration: none !important;
}

.wp-block-paragraph a:hover {
    text-decoration: underline !important;
}

/* Cover block text improvements */
.wp-block-cover h1 {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Footer improvements */
footer.wp-block-template-part {
    background-color: #111827 !important;
    padding: 60px 0 30px !important;
}

footer a {
    color: #9CA3AF !important;
}

footer a:hover {
    color: #ffffff !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Dropdown menu styling */
.wp-block-navigation__submenu-container {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
    padding: 8px !important;
}

.wp-block-navigation__submenu-container a {
    border-radius: 8px !important;
}

.wp-block-navigation__submenu-container a:hover {
    background-color: #F3F4F6 !important;
}

/* Full width hero fix */
.wp-block-cover.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* Remove default page title */
.wp-block-post-title {
    display: none !important;
}

/* Hero section full width */
.wp-site-blocks > .wp-block-group:first-child {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Ensure cover takes full width */
.wp-block-cover {
    margin-top: 0 !important;
}

/* Better hero text readability */
.wp-block-cover__inner-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* Service cards with better hover */
.wp-block-columns .wp-block-column[style*="background-color:#ffffff"] {
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.wp-block-columns .wp-block-column[style*="background-color:#ffffff"]:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

/* Contact cards hover */
.wp-block-column[style*="background-color:#EAF2E3"]:hover,
.wp-block-column[style*="background-color:#FFF5D1"]:hover,
.wp-block-column[style*="background-color:#FDECEB"]:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

/* Make content full width */
.wp-site-blocks {
    padding: 0 !important;
}

.wp-site-blocks > * {
    max-width: 100% !important;
}

.entry-content > * {
    max-width: 100% !important;
}

/* Hero full width override */
.wp-block-cover.alignfull,
.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Groups should be full width */
.wp-block-group.has-background {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Constrain inner content */
.wp-block-group.has-background > * {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Fix sticky header */
header, .wp-block-template-part[slug="header"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
}

/* Remove gap between header and content */
.wp-site-blocks > header + * {
    margin-top: 0 !important;
}

.wp-site-blocks > .wp-block-template-part + * {
    margin-top: 0 !important;
}

body .wp-site-blocks {
    gap: 0 !important;
}

/* Smaller logo */
header .wp-block-image img {
    max-width: 65px !important;
    height: auto !important;
}

/* Remove any top margin from cover blocks */
.wp-block-cover.alignfull {
    margin-top: 0 !important;
}

/* Fix homepage hero gap */
.home .wp-site-blocks > * + * {
    margin-top: 0 !important;
}

/* === Force-kill header->hero gap (v2) === */
.wp-site-blocks > main,
main.wp-block-group,
.wp-site-blocks > main.wp-block-group {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding-top: 0 !important;
}

main.wp-block-group > .wp-block-group:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.wp-block-post-title {
    display: none !important;
}

.wp-block-post-content,
.wp-block-post-content > :first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Force smaller logo (the previous 100px rule targets wp-block-image, not site-logo) */
.wp-block-site-logo img,
header .wp-block-site-logo img,
.wp-block-template-part .wp-block-site-logo img {
    max-width: 65px !important;
    max-height: 55px !important;
    width: auto !important;
    height: auto !important;
}

/* Smaller logo v3 */
header .wp-block-image img,
header .wp-block-site-logo img,
.wp-block-template-part .wp-block-image img,
.wp-block-template-part .wp-block-site-logo img {
    max-width: 65px !important;
    max-height: 55px !important;
    width: auto !important;
    height: auto !important;
}


/* ===== Modern compact LIGHT footer ===== */
.site-footer-modern {
    font-family: "Work Sans", sans-serif !important;
    background-color: #F7F5EE !important;
}

/* Force light bg even when an ancestor sets dark */
footer .site-footer-modern,
footer.wp-block-template-part .site-footer-modern,
.wp-block-template-part:last-of-type .site-footer-modern,
.wp-block-template-part:last-of-type {
    background-color: #F7F5EE !important;
}

.site-footer-modern .footer-link-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-footer-modern .footer-link-list li { margin: 0 !important; }

.site-footer-modern .footer-link-list a,
.site-footer-modern a {
    color: #4B5563 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.site-footer-modern .footer-link-list a:hover,
.site-footer-modern a:hover {
    color: #1D5C96 !important;
}

.site-footer-modern h4 { line-height: 1 !important; }

/* ===== Kill cream gap above/below header bar ===== */
.wp-site-blocks > header,
header.wp-block-template-part {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: #ffffff !important;
}

/* ===== Mobile-friendly header (<=900px) ===== */
@media (max-width: 900px) {
    /* Header inner: stay as a single horizontal flex row, never stack vertically */
    header .wp-block-group.has-background {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Convert the columns block from stack-on-mobile to inline-on-mobile */
    header .wp-block-columns,
    header .wp-block-columns.are-vertically-aligned-center {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    /* Each column adapts to its content */
    header .wp-block-column {
        flex: 0 0 auto !important;
        width: auto !important;
        flex-basis: auto !important;
        margin: 0 !important;
    }

    /* Logo column on left */
    header .wp-block-column:first-child {
        order: 1 !important;
    }

    /* Navigation column → push to far right and let WP show its hamburger toggle */
    header .wp-block-column:nth-child(2) {
        order: 3 !important;
        flex: 0 0 auto !important;
    }

    /* Call Us column in the middle/right of the row */
    header .wp-block-column:nth-child(3) {
        order: 2 !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    /* Force navigation responsive container to be collapsed on mobile (hamburger mode) */
    header .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    /* Show the open/hamburger toggle button */
    header .wp-block-navigation__responsive-container-open {
        display: flex !important;
        background: transparent !important;
        border: 0 !important;
        padding: 8px !important;
        color: #111827 !important;
        cursor: pointer !important;
    }

    header .wp-block-navigation__responsive-container-open svg {
        width: 28px !important;
        height: 28px !important;
        fill: #111827 !important;
    }

    /* When the menu is open as a modal, make it full-screen and readable */
    header .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
        background-color: rgba(255,255,255,0.98) !important;
        backdrop-filter: blur(12px) !important;
        padding: 24px !important;
    }

    header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: flex-start !important;
        font-size: 18px !important;
    }

    /* Smaller Call Us button on mobile */
    header .wp-block-button__link {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* Logo: keep small on mobile */
    header .wp-block-image img,
    header .wp-block-site-logo img {
        max-width: 55px !important;
        max-height: 48px !important;
    }
}

/* Extra-narrow phones */
@media (max-width: 380px) {
    header .wp-block-button__link {
        padding: 7px 12px !important;
        font-size: 11px !important;
    }
    header .wp-block-image img {
        max-width: 48px !important;
    }
}

/* ===== Mobile: force full-width content (<=900px) ===== */
@media (max-width: 900px) {

    /* Prevent any horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Main content + all top-level groups span full viewport */
    main,
    main.wp-block-group,
    .wp-site-blocks > main,
    .wp-site-blocks > .wp-block-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Override the theme content-size constraint (645px) for inner content */
    main .wp-block-post-content,
    main .wp-block-group.is-layout-constrained,
    main .wp-block-cover .wp-block-cover__inner-container,
    .wp-block-post-content {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* Cover blocks (hero) full width and reasonable height */
    .wp-block-cover,
    .wp-block-cover.alignfull {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 420px !important;
    }

    /* Hero headline shrinks for mobile */
    .wp-block-cover h1,
    .wp-block-cover h2,
    main h1 {
        font-size: 32px !important;
        line-height: 1.15 !important;
    }
    .wp-block-cover p,
    main p {
        font-size: 15px !important;
    }

    /* Service / property column blocks stack to single column */
    main .wp-block-columns,
    main .wp-block-columns.are-vertically-aligned-center {
        flex-direction: column !important;
        gap: 16px !important;
    }
    main .wp-block-column {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
    }

    /* Section paddings: tighter top/bottom on mobile */
    .wp-block-group[style*="padding-top:100px"],
    .wp-block-group[style*="padding-top: 100px"] {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* Footer columns also stack */
    .site-footer-modern .wp-block-columns {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .site-footer-modern .wp-block-column {
        flex: 1 1 100% !important;
        width: 100% !important;
        flex-basis: auto !important;
    }

    /* Buttons in hero shouldn't overflow */
    .wp-block-buttons,
    .wp-block-buttons.is-layout-flex {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* Override the older 100vw + translateX rule that misbehaves on mobile */
    .wp-block-group.has-background {
        margin-left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}