/* Shared font/html/input/h1/h2/nav-a/root/reset/body/a/ul/img/.btn
   family moved to base.css (loaded before this file) - see that
   file. This file's own html(16px)/.btn(1rem font) values used to
   conflict with base.css's, but new_footer.css (loaded right after
   this file) always set them back to the standard 62.5%/16px
   values anyway, so removing the conflicting duplicates here does
   not change the final rendered result.

   .container below is intentionally different from base.css's
   version (padding-based edge layout for the sticky header, vs.
   the 90%-width centered layout page content sections use) - kept
   as its own thing, not merged. */
.container {
		max-width: var(--max-width);
		margin: 0 auto;
		padding: 0 24px;
		box-sizing: border-box;
}



/* =========================
	 Header Layout
========================= */

.site_header {
		position: sticky;
		top: 0;
		z-index: 1000;
		width: 100%;
		background: #ffffff;
		border-bottom: 1px solid var(--border);
}


.site_header .container {
		display: flex;
		position: relative;
		align-items: center;
		padding: 16px 24px;
		max-width: 1400px;
		margin: 0 auto;
}


/* =========================
	 Logo
========================= */

.logo img {
		height: 60px;
		width: auto;
		display: block;

}



/* =========================
	 Navigation
========================= */


.main_nav {
		margin-left: auto;
		margin-right: 30px;

}


.nav-links {

		display: flex;
		align-items: center;
		gap: 32px;
		list-style: none;
		margin: 0;
		padding: 0;

}


.nav-links li {
		position: relative;

}


.nav-links > li > a {
		display: flex;
		align-items: center;
		gap: 6px;
		color: var(--text-dark);
		font-size: 16px;
		text-decoration: none;
		padding: 12px 0;
		transition: color .2s ease;

}


.nav-links > li > a:hover {
		color: #0189FF;

}



/* =========================
	 Dropdown Menu
========================= */


.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: 240px;
		background: #ffffff;
		border: 1px solid #e5e7eb;
		box-shadow: 0 10px 25px rgba(0,0,0,.12);
		padding: 8px 0;
		margin: 0;
		list-style: none;
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition:
				opacity .2s ease,
				transform .2s ease;
		z-index: 1000;

}



/* Show dropdown */

.dropdown:hover > .dropdown-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
}

.dropdown > a::after {
		content:"";
		border:solid currentColor;
		border-width:0 1px 1px 0;
		display:inline-block;
		padding:3px;
		transform:rotate(45deg);
		margin-left:8px;
}

@media(max-width:1100px){

		.dropdown-menu {
				position:static;
				width:100%;
				box-shadow:none;
				border:none;
				opacity:1;
				visibility:visible;
				transform:none;
				display:none;

		}


		.dropdown.active .dropdown-menu {

				display:block;

		}

}

/* Dropdown Links */
.dropdown-menu li {
		width: 100%;

}


.dropdown-menu li a {
		font-weight: 300;
		display: block;
		padding: 12px 20px;
		color: var(--text-dark);
		font-size: 15px;
		text-decoration: none;
		transition: background .2s ease, color .2s ease;


}



/* Blue Hover */
.dropdown-menu li a:hover {
		background: #0189FF;
		color: #ffffff;


}




/* =========================
	 Buttons
========================= */


.nav_buttons {
		display:flex;
		align-items:center;
		gap:12px;
		margin-left: 30px;

}

/* =====================================================
	 Mobile Menu Button
===================================================== */

.mobile-menu-btn {
		display:none;
		background:none;
		border:none;
		cursor:pointer;
		width:40px;
		height:40px;
		flex-direction:column;
		justify-content:center;
		gap:6px;
}


.mobile-menu-btn span {
		display:block;
		width:25px;
		height:2px;
		background:#1b2331;
		transition:.3s;
}


/* =====================================================
	 Tablet / Mobile Header
===================================================== */


@media(max-width:1100px) {
		.site_header .container {
				padding:16px 24px;

		}


		/* Logo smaller */

		.logo img {
				height:60px;
		}


		/* Hide desktop menu */

		.main_nav {
				display:none;
		}


		/* Hide buttons */
		.nav_buttons {
				display:none;

		}


		/* Show hamburger */
		.mobile-menu-btn {
				display:flex;
				margin-left:auto;

		}


}

@media(max-width:1100px){

		.main_nav.active {

				display:block;
				position:absolute;
				top:100%;
				left:0;
				width:100%;
				background:white;
				border-top:1px solid var(--border);
				padding:20px 24px;
				z-index:999;

		}


		.nav-links {

				display:flex;
				flex-direction:column;
				align-items:flex-start;
				gap:0;

		}


		.nav-links > li {

				width:100%;

		}


		.nav-links > li > a {

				padding:15px 0;

		}



}