/* ==========================================================================
   PAGE TEMPLATE: Full Background - Center Form
   Load order:  LAST (after webforms.core.css and theme.css)
   Purpose:     Defines the page AROUND the form only: body reset, header,
                navbar, footer, logo, and the app container that holds the form.
                The look of the form itself (fonts, fields, buttons, radio
                buttons, section titles) belongs in the theme.

   CONTENTS
     1. Base
     2. Page structure
     3. Header, navbar & logo
     4. App container
     5. Footer
     6. Responsive
   ========================================================================== */


/* ==========================================================================
   1. BASE
   ========================================================================== */

body {
    margin: 0;
}


/* ==========================================================================
   2. PAGE STRUCTURE
   ========================================================================== */

#pageContainer {
    display: flex;
    flex-direction: column;
}

#layoutContainer {
    display: flex;
    flex-direction: column;
}

#header,
#footer {
    padding: 15px;
}


/* ==========================================================================
   3. HEADER, NAVBAR & LOGO
   ========================================================================== */

#ceNavbar {
    position: relative;
    padding: 10px 20px;
    border-radius: 0;
    background-color: #f9f9fb;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0 7px 0 #bdbdbd;
}

#orgLogoContainer {
    display: flex;
    align-items: center;
    height: 100px;
}

    #orgLogoContainer #orgLogo {
        max-width: 100%;
        max-height: 72px;
        height: auto;
    }

#header {
    color: var(--app-theme-font-primary-color);
}

#title {
    margin: 0 0 1.25rem;
    font-size: 24pt;
}


/* ==========================================================================
   4. APP CONTAINER (the box that holds the form)
   ========================================================================== */

#ceApp-container {
    padding: 100px;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

#ceApp {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-inline: auto;
    padding: 30px;
    background-color: #fff;
    box-shadow: 0 0 10px 0 #777;
    max-width: 1140px;
}

/* ==========================================================================
   5. FOOTER
   ========================================================================== */

#footerLogoContainer {
    margin-top: 15px;
}

#footerSocialContainer ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 200px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

    #footerSocialContainer ul a {
        font-size: 30px;
    }

#footerTwitter {
    display: flex;
}

#footer {
    color: var(--app-theme-font-primary-color);
}


/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    #ceApp-container {
        padding: 0;
    }
}

/* Mobile break */
@media (max-width: 500px) {
    #ceApp {
        width: 100%;
        padding: 0;
    }
}