/**
 * Exit Page Styles
 *
 * @package Exit_Pages
 * 
 * Minimal styles for exit-page specific elements.
 * Main styling should come from theme's CSS for WordPress standard classes.
 * No colors are defined - all colors come from theme.
 * Same classes work for both cases - with and without header/footer.
 */

/* ============================================
   Vertical and Horizontal Centering - Unified for Both Cases
   ============================================ */

/* Body - full viewport height for vertical centering */
body.exit-page {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    margin: 0;
    padding: 0;
}

/* Primary content area - vertical and horizontal centering */
body.exit-page #primary.content-area {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Main content - max width and centering */
body.exit-page #main.site-main {
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Article - full width within main */
body.exit-page article {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* All exit page sections at same level with 1rem spacing between them */
body.exit-page .entry-header,
body.exit-page .exit-page-message,
body.exit-page .exit-page-countdown,
body.exit-page .exit-page-footer {
    margin-bottom: 1rem;
}

/* Remove margin from last element */
body.exit-page .exit-page-footer {
    margin-bottom: 0;
}

/* Exit page message - ensure proper paragraph spacing */
.exit-page-message p {
    margin: 1em 0;
}

.exit-page-message p:first-child {
    margin-top: 0;
}

.exit-page-message p:last-child {
    margin-bottom: 0;
}

/* Exit page actions (continue button) - 2rem margin top and bottom */
body.exit-page .exit-page-actions {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Button styling - minimal override */
body.exit-page .button {
    margin: 0;
}

/* Hide countdown when manually stopped */
.exit-page-countdown-hidden {
    display: none !important;
}

/* ============================================
   Responsive Styles
   ============================================ */

@media (max-width: 768px) {
    body.exit-page #primary.content-area {
        padding: 15px;
    }
}