/*===============================================
HEADER
================================================*/
#header {
	z-index: 2;
	background-color: var(--near-white);
}
#header::before {
	z-index: -2;
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	transform: translateY(10px);
	height: 10px;
	border-bottom: var(--transparent-white-dashed-border);
	transition: var(--transition);
}


/*==================== HEADER TOPBAR ====================*/
#header-topbar {
	justify-content: stretch;
	justify-items: stretch;
	align-content: center;
	width: 100%;
	height: 34px;
	color: var(--black);
	border-bottom: 1px solid var(--nice-gray);
}
	#header-topbar .container {
		grid-template-columns: repeat(2, auto);
		grid-gap: var(--universal-gap);
		justify-content: space-between;
		padding: 0 var(--body-gap);
	}
		#header-topbar .container .column {
			width: 100%;
		}
		#header-topbar .container #social-contact {
			grid-template-columns: repeat(3, auto);
			grid-gap: var(--universal-gap);
			justify-content: start;
		}
		#header-topbar .container #social-networks {
			grid-template-columns: repeat(4, auto);
			grid-gap: var(--block-gap);
			justify-content: end;
		}
			#header-topbar .container #social-contact .item {
				grid-template-columns: auto 1fr;
				grid-gap: 8px;
				align-items: end;
			}
			#header-topbar .container #social-networks .item {
				grid-template-columns: auto;
			}
				#header-topbar .container .item span {
					font-size: .9em;
					line-height: 1;
					color: var(--black);
				}
				#header-topbar .container #social-networks .item span {
					display: none;
				}
				#header-topbar .container #social-contact .item:hover span {
					text-decoration: underline;
					text-decoration-color: var(--green);
				}
				#header-topbar .container .item svg {
					position: relative;
				}
				#header-topbar .container #social-contact .item svg {
					top: -1px;
					width: calc(var(--p-size) * .9);
					height: calc(var(--p-size) * .9);
				}
				#header-topbar .container #social-networks .item svg {
					position: relative;
					width: var(--p-size);
					height: var(--p-size);
				}
					#header-topbar .container #social-contact .item svg path,
					#header-topbar .container #social-networks .item svg path {
						transition: var(--transition);
					}
					#header-topbar .container #social-networks .item svg path {
						fill: var(--black);
					}
					#header-topbar .container #social-contact .item:hover svg path,
					#header-topbar .container #social-networks .item:hover svg path {
						fill: var(--green);
					}

/*==================== HEADER MAIN ====================*/
#header-main {
	align-content: center;
	width: 100%;
	transition: height 150ms ease;
}
	#header-main .container {
		grid-template-columns: auto 1fr;
		width: 100%;
		padding: 0 var(--body-gap);
	}
		#header-main a.logo.ordinacijas {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: calc(var(--universal-gap) / 1.5);
			align-items: center;
		}
			#header-main a.logo.ordinacijas svg {
				width: calc(var(--p-size) * 3.25);
			}
			#header-main a.logo.ordinacijas .wrap {
				justify-content: start;
				justify-items: start;
			}
				#header-main a.logo.ordinacijas .wrap p {
					margin: 0;
					line-height: 1;
				}
				#header-main a.logo.ordinacijas .wrap p:nth-child(1) {
					font-family: "Raleway", sans-serif;
					font-weight: 800;
				}
				#header-main a.logo.ordinacijas .wrap p:nth-child(2) {
					font-size: calc(var(--p-size) * .9);
					font-weight: 400;
					letter-spacing: .75px;
				}


/*==================== NAVIGATION ====================*/
#navigation,
#navigation ul#nav {
	display: grid;
	position: relative;
	color: var(--black);
}
	#navigation ul#nav li::before,
	#navigation ul#nav li::after {
		display: none;
	}
	#navigation ul#nav li a {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-gap: var(--block-gap);
		align-items: center;
	}
		#navigation ul#nav li a span {
			line-height: 1.15;
		}
			#navigation ul#nav li a span.link-title {
				font-size: .9em;
				font-weight: 600;
			}
			#navigation ul#nav li a span.link-title-attribute {
				font-size: .8em;
				font-style: italic;
				color: var(--green);
			}

/*====================================================================================================
ADJUSTMENTS
header
====================================================================================================*/

/*========== ▲ 1280 pixels or wider ==========*/
@media (min-width: 1280px) {
	#header-main {
		height: calc(var(--base-unit) * 11);
	}
		#header-main .row.main {
			grid-gap: var(--body-gap);
			align-items: center;
		}
			#header-main a.logo.ordinacijas svg {
				height: calc(var(--base-unit) * 6.5);
			}
			#header a.logo.ordinacijas .wrap p:nth-child(1) {
				font-size: calc(var(--p-size) * 1.25);
			}
			#header a.logo.ordinacijas .wrap p:nth-child(2) {
				font-size: calc(var(--p-size) * .8);
			}

	#navigation ul#nav li a img {
		width: 25px;
	}
}

/*========== ▼ 1279 pixels or smaller ==========*/
@media (max-width: 1279px) {
	#header-main {
		height: calc(var(--base-unit) * 9);
	}
		#header-main .row.main {
			grid-gap: calc(var(--body-gap) / 1.5);
			align-items: center;
		}
			#header-main a.logo.ordinacijas {
				grid-gap: calc(var(--universal-gap) / 2);
			}
				#header-main a.logo.ordinacijas svg {
					height: calc(var(--base-unit) * 5.5);
				}
				#header a.logo.ordinacijas .wrap p:nth-child(1) {
					font-size: calc(var(--p-size) * 1.15);
				}
				#header a.logo.ordinacijas .wrap p:nth-child(2) {
					font-size: calc(var(--p-size) * .8);
				}
		#navigation ul#nav li a img {
			width: 20px;
		}
}

/*========== ▲ 1080 pixels or wider ==========*/
@media (min-width: 1080px) {
	#header-main .row.main {
		grid-template-columns: auto 1fr;
		transition: var(--transition);
	}

		#toggle-menu {
			display: none;
		}
		#navigation ul#nav {
			grid-template-columns: repeat(4, auto);
			grid-gap: var(--universal-gap);
		}

}

/*========== ▼ 1079 pixels or smaller ==========*/
@media (max-width: 1079px) {
	#header-main .row.main {
		grid-template-columns: 1fr auto;
		align-items: center;
		width: 100%;
	}

		#toggle-menu {
			z-index: 99;
			display: grid;
			width: var(--toggle-menu-width);
			height: var(--toggle-menu-width);
			padding: calc(var(--base-unit) * .8);
			background-color: var(--transparentWhite);
			border: 1px solid var(--black);
			cursor: pointer;
		}
			#toggle-menu svg {
				width: 100%;
			}
				#toggle-menu svg .cls-1 {
					fill: var(--green);
				}
		#navigation {
			width: var(--toggle-menu-width);
			height: var(--toggle-menu-width);
		}
			#navigation > ul#nav {
				pointer-events: none;
				opacity: 0;
				display: grid;
				grid-template-columns: 1fr;
				grid-gap: var(--base-unit);
				justify-content: start;
				justify-items: start;
				position: absolute;
				left: 0;
				transform: translateX(calc(-100% - 20px));
				width: auto;
				padding: calc(var(--universal-gap) / 1.5);
				color: var(--black);
				background-color: var(--white);
				border-radius: calc(var(--base-unit) * .8);
				border-top-right-radius: unset;
				box-shadow: 5px 5px 19px rgba(0,0,0,.25);
			}
			#navigation.active > ul#nav {
				pointer-events: unset;
				opacity: 1;
				transition: var(--transition);
				transition-property: opacity;
			}
				#navigation > ul#nav > li {
					width: 300px;
				}
				#navigation > ul#nav > li:last-child {
					padding: 0 !important;
					border-bottom: 0;
				}

}

/*========== ▼ 900 pixels or smaller ==========*/
@media (max-width: 900px) {
	#header-topbar .container,
	#header-topbar .container #social-contact,
	#header-topbar .container #social-networks {
		grid-gap: var(--block-gap);
	}
	#header-topbar .container {
		justify-content: center;
	}
		#header-topbar .container #social-contact .item {
			grid-template-columns: auto;
		}
			#header-topbar .container #social-contact .item span {
				display: none
			}
			#header-topbar .container #social-contact .item svg,
			#header-topbar .container #social-networks .item svg {
				width: var(--p-size);
				height: var(--p-size);
			}
			#header-topbar .container #social-contact .item svg path {
				fill: var(--black);
			}

	#footer .container {
		grid-template-columns: 1fr;
		grid-gap: var(--universalGap);
	}
}

/*========== ▼ 479 pixels or smaller ==========*/
@media (max-width: 539px) {
	#navigation > ul#nav {
		overflow-y: scroll;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transform: none;
		width: auto;
		height: 100vh;
		padding: calc(var(--universal-gap) + 24px);
		background-color: var(--white);
		border-radius: 0;
		box-shadow: none;
	}
}