/* Site overrides on top of Hyperspace (HTML5 UP).
   Keep theme files untouched so the theme can be re-downloaded/diffed.

   Hyperspace ships as a dark purple theme; this file recolours it to a white
   page with a navy header, and aligns the header and page body to a single
   horizontal gutter. */

/* Palette + layout tokens */

	:root {
		--navy: #071841;
		--page-gutter: 12em;
		--rule: rgba(7, 24, 65, 0.12);
	}

	@media screen and (max-width: 1680px) {
		:root { --page-gutter: 8em; }
	}

	@media screen and (max-width: 736px) {
		:root { --page-gutter: 4em; }
	}

/* Shared left/right margin for header, body and footer.
   Only the horizontal padding is set so the theme keeps its vertical rhythm. */

	#header {
		padding-left: var(--page-gutter);
		padding-right: var(--page-gutter);
	}

	.wrapper > .inner {
		padding-left: var(--page-gutter);
		padding-right: var(--page-gutter);
	}

/* Fullscreen hero

   The theme gives .fullscreen a flat 100vh, but the header sits above it
   rather than overlapping, so the hero always overflowed the viewport and its
   vertically-centred content sat far below the fold. Subtracting the header
   height makes the first screen fit exactly.

   Header height = 1.75em top padding + 3.25em logo + 1.75em bottom padding.
   The em math is written here rather than in a :root custom property on
   purpose: em on :root resolves against html's 16px, while #header and this
   section both inherit body's font size, so keeping it local keeps them in
   step across breakpoints. */

	.wrapper.fullscreen {
		min-height: calc(100vh - 6.75em);
	}

	@media screen and (max-width: 736px) {

		/* Header padding drops to 1em here. */
		.wrapper.fullscreen {
			min-height: calc(100vh - 5.25em);
		}

	}

	@media screen and (max-width: 480px) {

		/* Header stacks into a tall block; a full-height hero stops being
		   useful, so let the section size to its content. */
		.wrapper.fullscreen {
			min-height: 0;
		}

	}

/* Light theme: white page, navy ink */

	body {
		background: #ffffff;
	}

	body, input, select, textarea {
		color: rgba(7, 24, 65, 0.7);
	}

	/* Every content band and the footer become white; the theme coloured
	   these individually (style1/2/3 and their -alt variants). */
	.wrapper.alt,
	.wrapper.style1,
	.wrapper.style1-alt,
	.wrapper.style2,
	.wrapper.style2-alt,
	.wrapper.style3,
	.wrapper.style3-alt {
		background-color: #ffffff;
	}

	h1, h2, h3, h4, h5, h6,
	strong, b,
	label {
		color: var(--navy);
	}

	a {
		border-bottom-color: rgba(7, 24, 65, 0.35);
	}

		a:hover {
			color: var(--navy);
		}

	hr,
	blockquote {
		border-color: var(--rule);
	}

	code, pre {
		background: rgba(7, 24, 65, 0.04);
		border-color: var(--rule);
	}

	.features section {
		border-top-color: var(--rule);
		border-left-color: var(--rule);
	}

	#footer {
		border-top: solid 1px var(--rule);
	}

	/* Default button: white fill, navy text. The theme hard-codes
	   `color: #ffffff !important`, so the override needs !important too. */
	.button {
		background-color: #ffffff;
		border-color: #071841 !important;
		color: var(--navy) !important;
	}

		/* Theme's hover wash is white, i.e. invisible on a white button. */
		.button:after {
			background: var(--navy);
		}

		.button:hover {
			border-color: #07184177 !important;
		}

		.button:hover:active {
			border-color: var(--navy) !important;
		}

		/* Primary is the inverse: navy fill, white text. */
		.button.primary {
			background-color: var(--navy);
			color: #ffffff !important;
		}

/* Header */

	#header {
		background-color: var(--navy);
	}

		/* Logo replaces the wordmark; cap by height so any source size works. */
		#header > .title {
			border-bottom: 0;
			display: flex;
			align-items: center;
		}

			/* Source is only 107x50, so this renders above native size and will
			   look soft; a 2x export would fix it. */
			#header > .title img {
				display: block;
				height: 3.25em;
				max-height: 65px;
				width: auto;
			}

		/* Theme default is 0.6em, which is very small for a primary nav. */
		#header > nav > ul > li a {
			color: rgba(255, 255, 255, 0.65);
			font-size: 0.85em;
			letter-spacing: 0.15em;
		}

			#header > nav > ul > li a:hover,
			#header > nav > ul > li a.active {
				color: #ffffff;
			}

/* Top-nav submenu ("Programs" dropdown) */

	#header > nav > ul > li.has-submenu {
		position: relative;
	}

		/* Caret drawn with borders so it needs no icon font. */
		#header > nav > ul > li.has-submenu > a:after {
			border-left: 0.3em solid transparent;
			border-right: 0.3em solid transparent;
			border-top: 0.3em solid currentColor;
			content: '';
			display: inline-block;
			margin-left: 0.5em;
			vertical-align: middle;
		}

		/* Invisible bridge across the gap so the menu survives the mouse
		   travelling from the "Programs" link down to the panel. */
		#header > nav > ul > li.has-submenu:after {
			content: '';
			height: 0.75em;
			left: 0;
			position: absolute;
			right: 0;
			top: 100%;
		}

	#header .submenu {
		background-color: #0d2557;
		border-radius: 4px;
		box-shadow: 0 0.5em 1.5em rgba(7, 24, 65, 0.35);
		list-style: none;
		margin: 0;
		min-width: 14em;
		opacity: 0;
		padding: 0.5em 0;
		position: absolute;
		right: 0;
		text-align: left;
		top: calc(100% + 0.75em);
		transition: opacity 0.2s ease, visibility 0.2s ease;
		visibility: hidden;
		z-index: 10000;
	}

		#header .submenu li {
			margin: 0;
			padding: 0;
		}

		#header .submenu a {
			color: rgba(255, 255, 255, 0.65);
			display: block;
			font-size: 0.8em;
			font-weight: bold;
			letter-spacing: 0.15em;
			padding: 0.85em 2em;
			text-transform: uppercase;
			white-space: nowrap;
		}

			#header .submenu a:hover {
				background-color: rgba(255, 255, 255, 0.075);
				color: #ffffff;
			}

	/* :focus-within keeps the menu reachable by keyboard. */
	#header > nav > ul > li.has-submenu:hover > .submenu,
	#header > nav > ul > li.has-submenu:focus-within > .submenu {
		opacity: 1;
		visibility: visible;
	}

	@media screen and (max-width: 480px) {

		/* Nav goes full-width and left-aligned at this breakpoint. */
		#header .submenu {
			left: 0;
			right: auto;
		}

			#header .submenu a {
				height: auto;
				line-height: inherit;
			}

	}

/* Inline images

   `.image.half` is ours; the theme only ships fit/main (100% wide) and
   left/right (40%, floated). Sized as a share of the content column and capped
   at the teaser's native 686px, since 100% width upscales it roughly 2x on a
   large screen. */

	.image.half {
		display: block;
		margin: 0 auto 2em auto;
		max-width: 686px;
		width: 50%;
	}

		.image.half img {
			width: 100%;
		}

	@media screen and (max-width: 736px) {

		/* Half a phone screen is too small to read. */
		.image.half {
			width: 100%;
		}

	}

/* Placeholder image boxes, used until real assets land. */

	.placeholder-image {
		align-items: center;
		background-color: rgba(7, 24, 65, 0.03);
		border: 1px dashed rgba(7, 24, 65, 0.25);
		border-radius: 4px;
		color: rgba(7, 24, 65, 0.45);
		display: flex;
		font-size: 0.8em;
		font-style: italic;
		justify-content: center;
		letter-spacing: 0.1em;
		margin: 0 0 2em 0;
		min-height: 14em;
		text-align: center;
		width: 100%;
	}