////
/// Custom header styles.
///
/// @group  Components\Header
/// @author Sky Shabatura <theme@sky.camp>
/// @link   https://taproot-theme.com
////

.app-header {
    &--has-custom-header {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas:
            'header-topnav'
            'header-main'
            'header-content'
            'header-navbar';

        .menu--top {
            grid-area: header-topnav;
        }

        .app-header__main {
            grid-area: header-main;
        }

        .app-header__content {
            grid-area: header-content;
        }

        .menu--navbar {
            grid-area: header-navbar;
        }

        &:not(.app-header--fixed) {
            color: var(--header--image--text-color);
        }
    }
}
