/**
 * CONTENTS
 *
 * HEADER...............(()).
 *
 * ALV-HEADER
 * alv-header...........(()).
 * alv-brand............(()).
 * alv-themes...........(()).
 *
 */

/*------------------------------------*\
  #HEADER
\*------------------------------------*/

body {
	margin-top: calc(#{$header-navbar-height} + #{$header-mobile-margin}); // alv-header 30px, navbar 60px

	@media screen and (min-width: 480px){
		margin-top: calc(#{$header-navbar-height} + #{$header-margin}); // alv-header 30px, navbar 60px

		&.has-jumbotron {
			margin-top: ($header-navbar-height); // alv-header 30px, navbar 60px NO toolbar!
		}

		&.has-toolbar {
			margin-top: calc(#{$header-navbar-height + $toolbar-height} + #{$toolbar-margin-bottom}); // alv-header 30px, navbar 60px + toolbar 110px + margin 24px
		}

		&:not(.has-jumbotron) .jumbotron {
			margin-top: -($header-margin);
		}
	}

	@media screen and (max-width: 479px) {
		&.has-smartbanner {
			margin-top: 0;

			.header {
				margin-bottom: $header-mobile-margin;
			}

			.fixed-top {
				position: sticky;
			}
		}
	}
}

.fixed-top {

	@media screen and (min-width: 480px){
		&.has-toolbar ~ .toolbar,
		~ .toolbar{
			top: #{$header-navbar-height};
			position: fixed;
			width: 100%;
		}
	}
}

.has-mainnavigation {
	border-bottom: 1px solid #CFCFCF;
}

/**
 * Themes
 * Styles for switching between alvs with light or dark background.
 *
 * Dark links against a light background
 */

.alv-header--light {
	background: theme-color('light');

	.alv-header__brand {
		color: $body-color;
	}
}

/**
 * White links against a dark background
 */
.alv-header--inverse {
	background: $main-color-black;

	.alv-header__brand {
		color: $white;
	}
}