/*
╔══════════════════════════════════════════════════════════════════════════════╗
║           FULLSCREEN CAT COLONY APP - WORDPRESS CUSTOM CSS                   ║
╚══════════════════════════════════════════════════════════════════════════════╝

INSTRUCTIONS:
1. Find your page ID:
   - Edit your page in WordPress
   - Look at the URL: post.php?post=796
   - The number (796) is your page ID

2. Replace ALL instances of "796" below with your actual page ID

3. Copy ALL the CSS below

4. Go to: Appearance → Customize → Additional CSS

5. Paste the CSS and click "Publish"

6. Your page will now be fullscreen without WordPress header/footer!

*/

/* ============================================================================
   REPLACE 796 WITH YOUR PAGE ID IN ALL LINES BELOW
   ============================================================================ */

/* Hide WordPress elements */
.page-id-796 .site-header,
.page-id-796 .site-footer,
.page-id-796 .sidebar,
.page-id-796 .breadcrumbs,
.page-id-796 .site-navigation,
.page-id-796 nav,
.page-id-796 #wpadminbar,
.page-id-796 .entry-header,
.page-id-796 .entry-footer,
.page-id-796 .post-navigation,
.page-id-796 .comments-area {
    display: none !important;
}

/* Make body and html fullscreen */
.page-id-796 body,
.page-id-796 html {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
}

/* Make content containers fullscreen */
.page-id-796 .site-content,
.page-id-796 .entry-content,
.page-id-796 main,
.page-id-796 article,
.page-id-796 .content-area,
.page-id-796 .site-main {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Ensure iframe is fullscreen */
.page-id-796 iframe {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border: none !important;
    z-index: 9999 !important;
}

/* Hide any remaining WordPress elements */
.page-id-796 .site-branding,
.page-id-796 .site-title,
.page-id-796 .site-description,
.page-id-796 .menu,
.page-id-796 .widget-area {
    display: none !important;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .page-id-796 body,
    .page-id-796 html {
        height: 100vh !important;
        height: -webkit-fill-available !important;
    }
    
    .page-id-796 iframe {
        height: 100vh !important;
        height: -webkit-fill-available !important;
    }
}

/*
╔══════════════════════════════════════════════════════════════════════════════╗
║                              EXAMPLE                                         ║
╚══════════════════════════════════════════════════════════════════════════════╝

If your page ID is 456, change all instances of "796" to "456":

.page-id-456 .site-header,
.page-id-456 .site-footer,
etc.

╔══════════════════════════════════════════════════════════════════════════════╗
║                         ALTERNATIVE METHOD                                   ║
╚══════════════════════════════════════════════════════════════════════════════╝

If you don't know your page ID, you can use the page slug instead:

Replace .page-id-796 with .page-cat-colony-tracker

(where "cat-colony-tracker" is your page slug/permalink)

Example:
.page-cat-colony-tracker .site-header,
.page-cat-colony-tracker .site-footer,
etc.

╚══════════════════════════════════════════════════════════════════════════════╝
*/