/*
 * Theme overrides
 *
 * Hand-written CSS loaded after assets/main.css. The Sass build can't run
 * because src/sass/_settings.scss (Foundation settings) is missing from the
 * theme, so fixes live here until that file is recovered. Once it is, move
 * these rules into src/sass and delete this file.
 */

/* Projects of Note: equal-height cards with the link pinned to the bottom.
 * Slides already stretch to the tallest card; the card fills its slide.
 * (Can't set display on .splide__slide: Foundation's .is-visible forces
 * display:block !important on Splide's visible slides.) */
.card-feed .splide__slide > .card {
	height: 100%;
	margin-bottom: 0;
}

.card-feed .card-section > .block-link {
	margin-top: auto;
}

/* Restore the gap the card margin used to provide, so the button's
 * focus ring (::before, inset -9px) doesn't touch the cards. */
.card-feed .splide__arrows {
	margin-top: 18px;
}

/* Pre-footer callout: grid-margin-x adds -15px side margins, which made the
 * full-width band 30px wider than the viewport and caused horizontal scroll. */
.pre-footer.grid-margin-x {
	margin-left: 0;
	margin-right: 0;
}

/* Pre-footer on small screens: more vertical padding, and room between the
 * heading and the button's focus ring (::before, inset -9px). */
@media screen and (max-width: 39.99875em) {
	.pre-footer.padding-1 {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.pre-footer p.h4 {
		line-height: 1.3;
		margin-bottom: 28px;
	}
}

/* Areas of Focus: on small screens the ring (.big-link-image) is a
 * full-width small-12 cell, so it stretched into a pill. Shrink it to the
 * image and center it. 39.99875em = Foundation's below-medium breakpoint. */
@media screen and (max-width: 39.99875em) {
	.big-link.grid-margin-x > .big-link-image {
		width: auto;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Homepage Areas of Focus heading hidden under the hero on small/medium
 * screens. Customizer "Additional CSS" pulls this .focus-section up 4rem
 * beneath the hero (which has z-index 8). Below the large breakpoint the
 * hero's callout box reaches into that overlap and covers the heading. Push
 * the content down instead of removing the pull-up, which would expose a
 * seam. Scoped to the homepage, the only place the pull-up applies. */
@media screen and (max-width: 63.99875em) {
	.callout-block-wrapper + .focus-section .focus-section-inner {
		padding-top: 4rem;
	}
}

/* Inner-page hero (.split-hero-inner): line the heading and intro up with
 * the logo's visible left edge. The logo SVG has ~10px of built-in left
 * whitespace at full size, so the box edges matched (18px) but the ink
 * didn't. */
@media screen and (min-width: 64em) {
	.split-hero-inner {
		padding-left: 28px;
	}
}

/* Homepage hero on desktop: the slider was a fixed 730px tall, which put the
 * "See Our Work" button ~919px down, below the fold on most laptops. Size it
 * to the viewport so the button lands ~30px above the bottom edge, never
 * taller than the original 730px and never shorter than 420px.
 * (215px = header + the part of the callout below the image + 30px gap.)
 * 730px is set in _full-bg-background.scss (.hero-block min-height and
 * .hero-slider .orbit-figure height); Customizer "Additional CSS" also caps
 * the orbit wrappers at 600px with !important. */
@media screen and (min-width: 64em) {
	.hero-block {
		--hero-h: clamp(420px, calc(100vh - 215px), 730px);
		min-height: var(--hero-h);
	}

	.hero-slider .orbit-figure {
		height: var(--hero-h);
	}

	.hero-block .orbit.hero-slider,
	.hero-block .orbit-wrapper,
	.hero-block .orbit-container {
		height: var(--hero-h) !important;
		max-height: var(--hero-h) !important;
	}
}

/* Homepage hero heading is an h1 (parts/callout.php). Customizer "Additional
 * CSS" styles it via ".cell h2.h2"; mirror that for the h1 so it looks the
 * same. Must come before the small-screen rules below. */
.callout-block-inner .cell h1.h2 {
	white-space: pre-wrap;
	line-height: 1.3;
}

/* Homepage hero on small screens: Customizer "Additional CSS" pulls the
 * callout up -300px, which exactly covers the 300px-tall slider on mobile.
 * Reduce the overlap so ~200px of the image shows, and shrink/reflow the
 * text so image, headline and button fit on the first screen.
 * Selectors are deliberately more specific than the Customizer rules,
 * which load after this file and also use !important. */
@media screen and (max-width: 39.99875em) {
	.content > .callout-block-wrapper.has-overlapping-tertiary-background {
		margin-top: -100px !important;
	}

	.callout-block-wrapper .callout-block-inner {
		padding: 28px 20px;
	}

	.callout-block-inner .cell h1.h2,
	.callout-block-inner .cell h2.h2 {
		font-size: 1.75rem;
		line-height: 1.25 !important;
		white-space: normal !important;
		margin-bottom: 12px;
	}

	.callout-block-inner .container-copy p.lead {
		font-size: 1.125rem;
		line-height: 1.6;
		white-space: normal !important;
		margin-bottom: 20px;
	}
}

/* Project cards everywhere (homepage/focus sliders and the /project/ archive):
 * pin "Take a Look" to the bottom so links line up across a row. */
.project-card .card-section > .block-link {
	margin-top: auto;
}

/* Accordions: Foundation positions the +/- icon absolutely at the right, but
 * the title has no right padding, so long titles ran into the icon. */
.accordion-title {
	padding-right: 2.75rem;
}

/* "All Projects" next to the slider arrows wrapped to two lines on phones. */
.splide__arrows .button {
	white-space: nowrap;
}

/* 404 page (404.php) */
.not-found {
	min-height: 50vh;
}

.not-found h1 em {
	font-style: normal;
	color: #1b4571; /* $primary-color; accent word as in "Projects of Note" */
}

.not-found-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 32px;
}

/* Contact page (page-contact.php): Careers-style two-panel layout. */
.contact-split .split-hero-inner {
	justify-content: flex-start;
	gap: 24px;
}

.contact-split .split-hero-inner h1,
.contact-split .split-hero-inner .lead {
	margin-bottom: 0;
}

@media screen and (min-width: 64em) {
	.contact-split .split-hero-inner {
		padding-top: 54px;
		padding-bottom: 40px;
	}
}

/* .follow-callout uses grid-margin-x, whose negative margins pushed it out
 * of line with the text above it. */
.contact-split .follow-callout {
	margin-left: 0;
	margin-right: 0;
}

.contact-details,
.contact-focus ul {
	list-style: none;
	margin: 0;
	display: grid;
}

.contact-details {
	gap: 8px;
	font-size: 1.125rem;
}

.contact-details li {
	display: flex;
	gap: 16px;
}

.contact-details li > span {
	min-width: 4rem;
}

.contact-focus h2 {
	margin-bottom: 8px;
}

.contact-focus ul {
	gap: 6px;
}

.contact-focus a {
	border-bottom: 2px solid transparent;
}

.contact-focus a:hover,
.contact-focus a:focus {
	border-bottom-color: currentColor;
}

/* Gravity Forms on dark panels (Contact and Careers/Blog sign-up): typed text
 * was #333 on navy, and the select was white unlike the other fields. */
.has-tertiary-background .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.has-tertiary-background .gform_wrapper textarea,
.has-tertiary-background .gform_wrapper select {
	color: #fff;
	background-color: transparent;
	border-radius: 4px;
}

.has-tertiary-background .gform_wrapper select option {
	color: #333;
}