/*
 Theme Name:   Desertstar Playhouse Child
 Theme URI:    https://desertstarplayhouse.com
 Description:  Two Guys GeneratePress child theme
 Author:       Two Guys and a Mouse
 Author URI:   https://twoguysandamouse.com
 Template:     generatepress
 Version:      0.2
*/

/* ========================================
   HIDE PAGE/ENTRY TITLES
   ======================================== */
.page .entry-header,
.entry-title,
.main-title {
    display: none !important;
}


.content-area { margin-top: 0px !important; }

/* ========================================
   WPBAKERY ROW/COLUMN ADJUSTMENTS
   ======================================== */
.vc_col-has-fill > .vc_column-inner,
.vc_row-has-fill + .vc_row-full-width + .vc_row > .vc_column_container > .vc_column-inner,
.vc_row-has-fill + .vc_row > .vc_column_container > .vc_column-inner,
.vc_row-has-fill > .vc_column_container > .vc_column-inner {
    padding-top: 10px !important;
    margin-bottom: -38px !important;
}


/* ========================================
   MASTHEAD STYLING
   ======================================== */

/* Masthead background color */
.vc_custom_head_foot {
    margin: 0 !important;
    padding: 1px !important;
    background-color: #162061 !important;
}

/* Cast photo positioning and sizing */
.headergrouppic {
    position: relative;
    bottom: -20px !important;
}

.headergrouppic,
.headergrouppic img {
    max-height: 76px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Responsive image sizes */
@media (min-width: 768px) {
    .headergrouppic,
    .headergrouppic img {
        max-height: 100px !important;
    }
}

@media (min-width: 1200px) {
    .headergrouppic,
    .headergrouppic img {
        max-height: 115px !important;
    }
}

@media (min-width: 1600px) {
    .headergrouppic,
    .headergrouppic img {
        max-height: 125px !important;
    }
}

/* ========================================
   NEWSLETTER PANEL
   ======================================== */
#newsletter-panel {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


/* ========================================
   SPECIAL BACKGROUNDS
   ======================================== */
.vc_special_row_girl {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    background-image: url(/wp-content/uploads/sites/2/2022/06/panel-split-color-girl.png) !important;
    background-position: 0 0 !important;
    background-repeat: repeat !important;
}


/* ========================================
   HIDE THE EMPTY WHITE BAR
   ======================================== */
.inside-header.grid-container {
    display: none !important;
}

/* ========================================
   HIDE FOOTER COPYRIGHT AND SITE INFO
   ======================================== */
.site-info {
    display: none !important;
}

/* ========================================
   COMPLETE STICKY HEADER SOLUTION
   Silver Star Theater
   ======================================== */

:root {
    --masthead-height: 128px;  /* Your measured masthead height */
    --nav-height: 52px;        /* Measure your navigation height and update */
    --total-height: calc(var(--masthead-height) + var(--nav-height));
}


/* ========================================
   1. MASTHEAD: STICKY AT TOP
   ======================================== */
.sticky-masthead {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10020 !important;
}

@media screen and (max-width: 1024px) {
    .sticky-masthead,
    .sticky-masthead .vc_row,
    .vc_custom_head_foot {
        min-height: 0 !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}


/* ========================================
   2. NAVIGATION: CENTERED AND POSITIONED BELOW MASTHEAD
   ======================================== */
.site-header,
.main-navigation {
    position: fixed !important;
    top: var(--masthead-height) !important;  /* 128px - positions it below masthead */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10010 !important;
    background-color: #f62d18 !important; /* Red background - adjust color as needed */
    margin: 0 !important;
}

/* Ensure the navigation content is centered */
.site-header .inside-navigation,
.site-header .main-nav,
.main-navigation .inside-navigation,
.main-navigation .main-nav {
    margin: 0 auto !important;
    text-align: center !important;
}

/* Center the menu items */
.main-navigation .main-nav ul {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}


/* ========================================
   3. PUSH PAGE CONTENT DOWN
   ======================================== */
/* This prevents content from hiding under the fixed headers */
#page,
.site,
body > .site {
    padding-top: var(--total-height) !important;
}

/* Alternative selectors in case the above don't work */
.site-content,
#content,
main.site-main {
    margin-top: 0 !important; /* Reset any existing margin */
}

/* Make sure the body doesn't overlap */
body {
    margin-top: 0 !important;
}


/* ========================================
   ADJUST FOR WORDPRESS ADMIN BAR
   ======================================== */
.admin-bar .sticky-masthead {
    top: 32px !important;
}

.admin-bar .site-header,
.admin-bar .main-navigation {
    top: calc(var(--masthead-height) + 32px) !important;
}

.admin-bar #page,
.admin-bar .site {
    padding-top: calc(var(--total-height) + 32px) !important;
}

/* Mobile admin bar */
@media screen and (max-width: 782px) {
    .admin-bar .sticky-masthead {
        top: 46px !important;
    }
    
    .admin-bar .site-header,
    .admin-bar .main-navigation {
        top: calc(var(--masthead-height) + 46px) !important;
    }
    
    .admin-bar #page,
    .admin-bar .site {
        padding-top: calc(var(--total-height) + 46px) !important;
    }
}


/* ========================================
   HIDE EMPTY HEADER CONTAINER (if exists)
   ======================================== */
.inside-header.grid-container {
    display: none !important;
}




/* Define heights for different screen sizes */
:root {
    --masthead-height: 140px;  /* Desktop masthead height */
    --nav-height: 52px;        /* Navigation height - adjust as needed */
    --total-height: calc(var(--masthead-height) + var(--nav-height));
}


/* ========================================
   MASTHEAD: STICKY AT TOP
   ======================================== */
.sticky-masthead {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10020 !important;
}


/* ========================================
   NAVIGATION: STICKY DIRECTLY BELOW MASTHEAD
   ======================================== */
.site-header,
.main-navigation {
    position: fixed !important;
    top: var(--masthead-height) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10010 !important;
    background-color: #d32f2f !important;
    margin: 0 !important;
}

/* Center navigation content */
.site-header .inside-navigation,
.main-navigation .main-nav {
    margin: 0 auto !important;
    text-align: center !important;
}

.main-navigation .main-nav ul {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}


/* ========================================
   PUSH PAGE CONTENT DOWN
   ======================================== */
#page,
.site {
    padding-top: var(--total-height) !important;
}


/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablet/Medium screens - Masthead starts shrinking */
@media screen and (max-width: 1024px) {
    :root {
        --masthead-height: 110px;  /* Adjust based on actual shrink */
    }
}

@media screen and (max-width: 1100px) {
    :root {
        --masthead-height: 110px;
    }
    
    .site-content > .wpb_row:first-child,
    #content > .wpb_row:first-child {
        margin-top: -15px !important;
    }
}

@media screen and (max-width: 900px) {
    :root {
        --masthead-height: 100px;  /* Adjust based on actual shrink */
    }
}

@media screen and (max-width: 782px) {
    :root {
        --masthead-height: 90px;   /* Adjust based on actual shrink */
    }
}

@media screen and (max-width: 600px) {
    :root {
        --masthead-height: 80px;   /* Mobile - elements stack or shrink more */
    }
}

@media screen and (max-width: 480px) {
    :root {
        --masthead-height: 70px;   /* Smaller mobile */
    }
}



/* ========================================
   ADMIN BAR ADJUSTMENTS
   ======================================== */
.admin-bar .sticky-masthead {
    top: 32px !important;
}

.admin-bar .site-header,
.admin-bar .main-navigation {
    top: calc(var(--masthead-height) + 32px) !important;
}

.admin-bar #page,
.admin-bar .site {
    padding-top: calc(var(--total-height) + 32px) !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .sticky-masthead {
        top: 46px !important;
    }
    
    .admin-bar .site-header,
    .admin-bar .main-navigation {
        top: calc(var(--masthead-height) + 46px) !important;
    }
    
    .admin-bar #page,
    .admin-bar .site {
        padding-top: calc(var(--total-height) + 46px) !important;
    }
}

/* Hide desktop navigation on mobile only */
@media screen and (max-width: 768px) {
    .main-navigation .main-nav {
        display: none !important;
    }
    
    /* But allow it to show when mobile menu is open */
    .main-navigation.toggled .main-nav,
    .main-navigation.has-active-toggled .main-nav {
        display: block !important;
        position: relative !important;
        top: auto !important;
    }
}

/* Remove fixed positioning from nav on mobile only */
@media screen and (max-width: 768px) {
    .site-header,
    .main-navigation {
        position: relative !important;
        top: auto !important;
    }
    
    /* But keep masthead sticky */
    .sticky-masthead {
        position: fixed !important;
        top: 0 !important;
    }
}

/* Desktop - correct padding and remove gap */
@media screen and (min-width: 769px) {
    #page, .site {
        padding-top: 191px !important;
    }
    
    /* Pull first content row up to eliminate white space */
    .site-content > .wpb_row:first-child,
    #content > .wpb_row:first-child {
        margin-top: -40px !important;
    }
}

/* Tablet - adjust for smaller header */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #page, .site {
        padding-top: 160px !important;
    }
    
    .site-content > .wpb_row:first-child,
    #content > .wpb_row:first-child {
        margin-top: -30px !important;
    }
}

/* Mobile - no padding needed, header not fixed */
@media screen and (max-width: 768px) {
    #page, .site {
        padding-top: 0 !important;
    }
}

/* Desktop - remove white space */
@media screen and (min-width: 1025px) {
    .site-content > .wpb_row:first-child,
    #content > .wpb_row:first-child {
        margin-top: -20px !important;
    }
}

/* Desktop - target the actual content wrapper */
@media screen and (min-width: 1025px) {
    #page {
        padding-top: 191px !important;
    }
    
    /* Target the site-content wrapper */
    .site-content,
    #content,
    .content-area {
        margin-top: -10px !important;
    }
    
    /* Also target main element if it exists */
    main.site-main {
        margin-top: -10px !important;
    }
}
 
/* Only make top-level menu flex (horizontal) */
.main-navigation .main-nav > ul {
    display: flex !important;
    justify-content: center !important;
}

/* Force submenus to stack vertically */
.main-navigation .sub-menu {
    display: block !important;
    flex-direction: column !important;
}

.main-navigation .sub-menu li {
    display: block !important;
    width: 100% !important;
}