/* ==========================================================================
   Transparent Header Template Styles

   The page-transparent-header.php template overlays the site header on top
   of the first content block (typically a hero). The first child of <main>
   gets a negative margin-top (pulls it up under the header) plus a
   compensating padding-top (keeps inner content at natural flow).
   ========================================================================== */

.transparent-header-template .site-header:not(.sticky-header) {
    border-bottom: none;
    background: transparent;
}

.transparent-header-template .site-header {
    position: relative;
    z-index: 100;
}

.transparent-header-template #main > :first-child {
    margin-top: -80px;
    padding-top: 80px;
}

/* Mobile: no transparent effect, no pulled-up first section */
@media screen and (max-width: 1023px) {
    .transparent-header-template #main > :first-child {
        margin-top: 0;
        padding-top: 0;
    }

    .transparent-header-template .site-header .header-content {
        background: #fff;
    }

    .transparent-header-template .site-header {
        border-bottom: 1px solid #e6e6e6;
    }
}

/* Admin bar adjustments */
.admin-bar .transparent-header-template .site-header.sticky-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .transparent-header-template .site-header.sticky-header {
        top: 46px;
    }
}