/**
 * Header layout CSS for Anambas theme
 *
 * Positions the header over the main content with proper spacing
 */

/* Set main content padding-top to accommodate fixed header */
.site-content {
    padding-top: 80px;
    /* Default for mobile */
}

/* Header positioning */
.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 50;
    transition: all 0.3s ease;
}

/* Adjust padding for larger screens where header might be taller */
@media (min-width: 768px) {
    .site-content {
        padding-top: 96px;
        /* Taller header on desktop */
    }
}

/* 
 * For pages with admin bar when logged in
 * WordPress adds 32px margin-top to html when admin bar is present
 */
body.admin-bar .site-header {
    top: 32px;
    /* Adjust for admin bar on desktop */
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
        /* Adjust for admin bar on mobile */
    }
}

/* Ensure transparent overlap for hero sections */
.programme-hero,
.page-hero,
.home-hero {
    margin-top: -80px;
    /* Match default padding-top from site-content */
    padding-top: 120px;
    /* Add extra padding to show content below header */
}

@media (min-width: 768px) {

    .programme-hero,
    .page-hero,
    .home-hero {
        margin-top: -100px;
        /* Match desktop padding-top */
        padding-top: 160px;
        /* Add extra padding to show content below header */
    }
}

/* Ensure the site main content takes up remaining space */
#primary {
    flex: 1;
}