/* -------------------------- Global Font -------------------------- */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    font-family: 'Poppins', 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- App Container (top-level) ---------- */
.app-container {
    width: 90%;
    max-width: 1000px;
    min-height: 100dvh;       
    margin: 0px auto 5px;        /* top & bottom spacing */
    padding: 20px;
	padding-bottom: 80px;
    box-sizing: border-box;
    border: 1px solid #d1d1d1;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;    
    align-items: stretch;
    gap: 0;
}


/* ================================
   SITE CONTAINER - GLOBAL HORIZONTAL SETTINGS
================================= */
.site-container {
    max-width: 1000px;           /* fixed desktop width */
    width: 100%;                 /* scales down on smaller screens */
    margin: 0 auto;              /* center horizontally */
    box-sizing: border-box;      /* include padding in width */
    padding: 0 15px;             /* default horizontal padding */
    padding-top: 10px;           /* optional small vertical padding */
    /* border: 1px solid grey; */
}

/* ================================
   FLEX HELPERS
================================= */
.flex-grow {
    flex: 1;                      /* main content grows to push footer down */
}

/* ================================
   FOOTER STYLING
================================= */
.site-footer {
    border-top: none;             /* remove the border */
    padding: 15px 0;
    text-align: center;
    background-color: transparent;
}

/* Ensure the footer content matches the site container width */
.site-footer .site-container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}


/* Footer styling */
.site-footer {
    text-align: center;       /* center text */
    font-size: 1rem;          /* small, readable font */
    color: #222;              /* standard text color */
    margin: 5px 0 0 0;        /* small spacing above, none below */
    padding: 5px 0;           /* small vertical padding */
    background-color: transparent; /* no background color */
    border: none;             /* no borders */
}

body.modal-open {
    overflow: hidden;
    height: 100vh;
}