/* Apply Space Grotesk to the Footer via class-font */
.class-font {
    font-family: 'Space Grotesk', sans-serif !important;
}

/* Specific styling for links and text inside the footer */
.class-font p, 
.class-font a, 
.class-font h1, 
.class-font h2, 
.class-font h3, 
.class-font h4 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 400; /* Regular for paragraphs */
    letter-spacing: 0.4px;
}

/* If you want the footer titles to be bold like the menu */
.class-font h3, 
.class-font h4 {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.class-font {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.2px; /* This "breath" makes it look high-end */
    font-size: 8px; /* Slightly smaller size looks better with bold fonts */
}
/*End  Apply Space Grotesk to the Footer via class-font */


/* 1. Establish your clean, full-height Flexbox root */
html, body.home {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.home {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

/* 2. Force every single nested theme wrapper to stretch completely */
body.home #page,
body.home #page-wrapper,
body.home #page-content,
body.home #content,
body.home #main,
body.home .site-main,
body.home article,
body.home .entry-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 0 auto !important; /* Tells every container to grow and eat empty space */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. Anchor your dark blue footer block to the absolute bottom of the chain */
body.home .wc-blocks-pattern-footer-large {
    margin-top: auto !important; /* Pushes the block flush against the floor of the flex layout */
    margin-bottom: 0 !important;
    position: relative !important;
    bottom: 0 !important; /* Ensures the -100vh calculation is cleared */
}