/* =============================================================================
   08-header.css — site header and main navigation

   Everything is scoped to .site_header, the class on <header> in header.php.
   It used to be the bare `header` element, which caught EVERY <header> on the
   site — archive, 404, search, blog post — and since the rule is absolutely
   positioned, each one was yanked to the top of its nearest positioned
   ancestor and landed on the content. If you add a rule here, give it the
   class: a bare `header` selector puts the trap straight back.
   ============================================================================= */

.site_header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin-top: 6.25rem;
}

/* --- Nav ------------------------------------------------------------------ */
.site_header nav {
	position: absolute;
	right: 1rem;
	top: 1rem;
	opacity: 1;
	pointer-events: auto;
	transition: all 0.25s ease;
}

.site_header nav ul {
	margin: 0;
	padding: 0;
}

.site_header nav ul li {
	display: inline-block;
	position: relative;
	font-family: var(--js-font);
	font-size: 1.25rem;
	line-height: 1.35;
	color: var(--js-white);
}

.site_header nav ul li a {
	margin: 0 5px;
	font-family: var(--js-font);
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--js-white);
	text-decoration: none;
}

/* The thin divider between nav items, drawn after each one. */
.site_header nav ul li::after {
	content: "";
	position: absolute;
	top: 7px;
	right: -3px;
	width: 2px;
	height: 15px;
	background-color: var(--js-white);
}

/* No divider after the last item. menu-item-135 is the ID WordPress gives that
   menu entry — if the menu is rebuilt in wp-admin this number changes. */
.site_header nav ul li.menu-item-135::after {
	display: none;
}

/* --- Burger (phones only) -------------------------------------------------
   Three bars that rotate 90° as a set when the menu opens; cycle.js toggles
   .active. Hidden until 750px, where the nav collapses behind it.
   -------------------------------------------------------------------------- */
.site_header .menu {
	display: none;
	position: relative;
	width: 50px;
	height: 41px;
	transition: all 0.25s ease;
}

.menu.right.active {
	transform: rotate(90deg);
}

.site_header .menu .bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 7px;
	border-radius: 20px;
	background-color: var(--js-white);
	transform-origin: 50% 50%;
	transition: transform 400ms ease-out;
}

.site_header .menu .bar.one   { top: 0; }
.site_header .menu .bar.two   { top: 16px; }
.site_header .menu .bar.three { top: 32px; }

/* =============================================================================
   DARK HEADER
   The logo and nav are white by default, which works over the coloured banner
   images. Templates that open on a white background need them black instead.
   Add a body class here rather than a new rule per template.
   ============================================================================= */
body.post-template-default .site_header svg path,
body.page-template-default .site_header svg path,
body.page-template-template_jobs .site_header svg path,
body.page-template-template_m_jobs .site_header svg path,
body.page-template-template_ms_jobs .site_header svg path,
body.single-job_listing .site_header svg path {
	fill: var(--js-black);
}

body.post-template-default .site_header nav ul li a,
body.page-template-default .site_header nav ul li a,
body.page-template-template_jobs .site_header nav ul li a,
body.page-template-template_m_jobs .site_header nav ul li a,
body.page-template-template_ms_jobs .site_header nav ul li a,
body.single-job_listing .site_header nav ul li a {
	color: var(--js-black);
}

body.post-template-default .site_header nav ul li::after,
body.page-template-default .site_header nav ul li::after,
body.page-template-template_jobs .site_header nav ul li::after,
body.page-template-template_m_jobs .site_header nav ul li::after,
body.page-template-template_ms_jobs .site_header nav ul li::after,
body.single-job_listing .site_header nav ul li::after,
body.post-template-default .site_header .menu .bar,
body.page-template-default .site_header .menu .bar,
body.page-template-template_jobs .site_header .menu .bar,
body.page-template-template_m_jobs .site_header .menu .bar,
body.page-template-template_ms_jobs .site_header .menu .bar,
body.single-job_listing .site_header .menu .bar {
	background-color: var(--js-black);
}

/* ============================================================================= */

@media (max-width: 750px) {
	/* The nav collapses behind the burger: taken out of the corner, made
	   click-through and faded out, with .menu appearing in its place.
	   cycle.js adds .active to fade it back in. */
	.site_header nav {
		top: auto;
		right: auto;
		padding-top: 1.25rem;
		opacity: 0;
		pointer-events: none;
	}

	.site_header nav.active {
		opacity: 1;
		pointer-events: auto;
	}

	.site_header .menu {
		display: block;
	}
}

@media (max-width: 500px) {
	.site_header svg {
		height: 41px;
	}

	.site_header nav ul li a {
		font-size: 0.625rem;
	}
}