/**
 * Download Gate — front-end styles.
 *
 * Tokens live on :root so a child theme can override them without competing with
 * component-root specificity.
 */

:root {
	--tddg-max-width: 56rem;
	--tddg-radius: 6px;
	--tddg-pad: clamp(1.25rem, 4vw, 2.5rem);
	--tddg-bg: #fff;
	--tddg-fg: var(--ironwood-secondary-color, #13294b); /* UNC navy */
	--tddg-accent: var(--ironwood-primary-color, #4b9cd3); /* Carolina blue */
	--tddg-field-border: #c3cedc;
	/*
	 * UNC's text-link blue, NOT Carolina blue. The brand colour (#4b9cd3) only
	 * reaches ~2.3:1 on white and fails WCAG AA for body text; #007FAE clears it.
	 * The theme hard-codes this on `.entry-content a`, and the modal renders in the
	 * footer — outside that selector — so it has to be restated here.
	 */
	/*
	 * Hover background for every control: Carolina blue darkened to 40% lightness.
	 *
	 * The theme generates a ramp of the primary colour as hsl(h, s, L) — same hue
	 * (204) and saturation (61%) as #4b9cd3, only darker — so this IS Carolina blue,
	 * not a new colour. Full-strength #4b9cd3 carries white text at just 3.0:1;
	 * the 40% step reaches 5.21:1.
	 *
	 * Note what it is NOT: the link blue below. #007FAE is a utility colour for
	 * inline text links, deliberately outside the brand palette, and using it as a
	 * surface fill puts a non-Carolina teal into the UI.
	 *
	 * And the text stays white through the hover rather than inverting to navy.
	 * Crossing both colours collapsed contrast to 1.20:1 mid-transition — the label
	 * vanished for ~100ms. With one colour fixed, contrast is monotonic and cannot
	 * dip below the worse endpoint.
	 */
	--tddg-hover: var(--ironwood-primary-color-40, hsl(204, 61%, 40%));

	/*
	 * Focus ring. WCAG 2.2 SC 1.4.11 wants 3:1 against the surrounding colour, and no
	 * single value clears that on every ground this component uses: Carolina blue is
	 * 2.67:1 on the light spotlight tint, and the darkened Carolina below is 2.79:1
	 * on navy. So it is a token, overridden per context rather than picked once.
	 * Darkened Carolina is the default — 5.21:1 on white, 4.63:1 on the light tint.
	 */
	--tddg-focus-ring: var(--ironwood-primary-color-40, hsl(204, 61%, 40%));

	/* Inline text links ONLY. See the note above before reusing this anywhere. */
	--tddg-link: #007fae;
	--tddg-link-hover: var(--ironwood-black, hsl(204, 61%, 5%));
	--tddg-tint: #eef2f7;
	--tddg-accent-ink: #13294b;
	--tddg-backdrop: rgba(19, 41, 75, 0.65);
}

/*
 * A closed <dialog> is hidden only by the UA rule `dialog:not([open]){display:none}`.
 * Genesis ships an unscoped `dialog { display: block }` and the flex rule below would
 * override [hidden] too, so declare the closed state explicitly and win both.
 */
.tddg-modal:not([open]) {
	display: none !important;
}

.tddg-modal {
	/* Native dialog centres itself with margin:auto; the theme's reset zeroes it. */
	margin: auto;
	width: min(var(--tddg-max-width), calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 0;
	border-radius: var(--tddg-radius);
	background: var(--tddg-bg);
	color: var(--tddg-fg);
	box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.3);
	overflow: visible;
}

.tddg-modal::backdrop {
	background: var(--tddg-backdrop);
}

.tddg-modal__inner {
	display: grid;
	grid-template-columns: 1fr;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	position: relative;
}

@media (min-width: 48rem) {
	.tddg-modal__inner:has(.tddg-modal__media) {
		grid-template-columns: 2fr 3fr;
	}
}

.tddg-modal__media {
	display: none;
}

@media (min-width: 48rem) {
	.tddg-modal__media {
		display: block;
		height: 100%;
	}

	.tddg-modal__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--tddg-radius) 0 0 var(--tddg-radius);
		display: block;
	}
}

.tddg-modal__body {
	padding: var(--tddg-pad);
}

.tddg-modal__title {
	margin: 0 0 0.75em;
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	line-height: 1.2;
}

.tddg-modal__copy {
	margin-bottom: 1.5em;
}

.tddg-modal__copy > :last-child {
	margin-bottom: 0;
}

.tddg-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	/* Fixed box: theme rules on `button` otherwise stretch this into an ellipse. */
	flex: none;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 2.5rem;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tddg-fg);
	color: #fff;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}

.tddg-modal__close:hover,
.tddg-modal__close:focus-visible {
	background: var(--tddg-hover);
	color: #fff;
}

/*
 * Triggers and the download button share one look: a solid navy pill, matching the
 * pill button already in the site header rather than inventing a third button style.
 */
.tddg-trigger,
.tddg-download {
	display: inline-block;
	padding: 0.9em 1.9em;
	border: 0;
	border-radius: 999px;
	background: var(--tddg-fg);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 140ms cubic-bezier(0.65, 0, 0.35, 1), transform 140ms ease;
}

.tddg-trigger:hover,
.tddg-trigger:focus-visible,
.tddg-download:hover,
.tddg-download:focus-visible {
	background: var(--tddg-hover);
	color: #fff;
	transform: translateY(-1px);
}

/* On a navy ground the pill inverts: Carolina blue on navy clears AA at 4.9:1. */
.tddg-spotlight--navy .tddg-trigger {
	background: var(--tddg-accent);
	color: var(--tddg-accent-ink);
}

.tddg-spotlight--navy .tddg-trigger:hover,
.tddg-spotlight--navy .tddg-trigger:focus-visible {
	background: #fff;
	color: var(--tddg-fg);
}

/* ---------- Spotlight ---------- */

/*
 * Light ground by default. The sticky table-of-contents bar directly above is navy,
 * and a navy band under it merges the two into one slab with the TOC text floating
 * in the middle of it. A light band keeps that bar reading as a divider.
 */
.tddg-spotlight {
	background: var(--tddg-tint);
	color: var(--tddg-fg);
	padding: clamp(2.25rem, 5vw, 4rem) 1.25rem;
}

/* Opt-in navy, for placements that are not sitting under the TOC bar. */
.tddg-spotlight--navy {
	background: var(--tddg-fg);
	color: #fff;
	border-top: 4px solid var(--tddg-accent);
}

.tddg-spotlight__inner {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	max-width: 68rem;
	margin: 0 auto;
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}

@media (min-width: 48rem) {
	.tddg-spotlight__inner {
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		justify-items: start;
		text-align: left;
	}
}

/* The cover reads as a printed document: white edge, grounded shadow. */
.tddg-spotlight__cover {
	display: block;
	max-width: 15rem;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform 160ms ease;
}

.tddg-spotlight__cover:hover,
.tddg-spotlight__cover:focus-visible {
	transform: translateY(-3px);
}

.tddg-spotlight__img {
	display: block;
	width: 100%;
	height: auto;
	border: 6px solid #fff;
	border-radius: 2px;
	box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.45);
}

.tddg-spotlight__eyebrow {
	margin: 0 0 0.5em;
	/* Carolina blue on the light tint is ~2:1 — navy carries the eyebrow instead. */
	color: var(--tddg-fg);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tddg-spotlight--navy .tddg-spotlight__eyebrow {
	color: var(--tddg-accent);
}

.tddg-spotlight__title {
	margin: 0 0 0.4em;
	color: inherit;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	line-height: 1.15;
}

.tddg-spotlight__teaser {
	margin: 0 0 1.6em;
	max-width: 34em;
	color: inherit;
	opacity: 0.9;
	font-size: 1.0625rem;
	line-height: 1.55;
}

/* ---------- Focus ---------- */

/*
 * Nothing in the theme or Genesis defines a focus style, so these controls were
 * inheriting the browser's default ring — which differs per browser and lingers
 * after a mouse click as a stray outline.
 *
 * The fix is NOT to delete it. A keyboard user needs a clear indicator, and WCAG
 * 2.2 SC 1.4.11 wants 3:1 against what surrounds it. So: define the ring
 * explicitly on :focus-visible, and suppress it only for :focus WITHOUT
 * :focus-visible — that is precisely the mouse-click case.
 */
.tddg-trigger:focus-visible,
.tddg-download:focus-visible,
.tddg-modal__close:focus-visible,
.tddg-spotlight__cover:focus-visible {
	outline: 3px solid var(--tddg-focus-ring);
	outline-offset: 3px;
}

/* On the navy band only white clears 3:1 (14.52:1); the default would be 2.79:1. */
.tddg-spotlight--navy {
	--tddg-focus-ring: #fff;
}

.tddg-trigger:focus:not(:focus-visible),
.tddg-download:focus:not(:focus-visible),
.tddg-modal__close:focus:not(:focus-visible),
.tddg-spotlight__cover:focus:not(:focus-visible) {
	outline: none;
}

/*
 * The confirmation heading is given tabindex="-1" and focused by script purely so
 * the swap is announced. The user did not navigate to it, so a ring there reads as
 * a stray box rather than a position indicator.
 */
.tddg-confirmation__title:focus,
.tddg-confirmation__title:focus-visible {
	outline: none;
}

/* Inline links in the gate follow the site's content-link treatment. */
.tddg-modal__copy a,
.tddg-confirmation__copy a {
	color: var(--tddg-link);
	text-decoration: underline;
}

.tddg-modal__copy a:hover,
.tddg-modal__copy a:focus-visible,
.tddg-confirmation__copy a:hover,
.tddg-confirmation__copy a:focus-visible {
	color: var(--tddg-link-hover);
	text-decoration: underline;
}

.tddg-confirmation__title {
	margin-top: 0;
}

.tddg-confirmation__actions {
	margin-bottom: 0;
}

/* The download pill carries an icon, the label, and what you are about to get. */
.tddg-download {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	text-align: left;
}

/*
 * The icon follows the theme's own fa-light convention, served by the site's Font
 * Awesome PRO kit. The kit runs in SVG-with-JS mode, so it REPLACES the <i> with an
 * <svg> after load — style the svg, not just the <i>, or the rule stops applying the
 * moment the kit finishes.
 */
.tddg-download .fa-file-arrow-down,
.tddg-download .svg-inline--fa {
	font-size: 1.2em;
	width: 1.2em;
	line-height: 1;
	/*
	 * Duotone exposes both layers as custom properties. On the navy pill the page
	 * reads white, so the document body takes Carolina blue and the arrow — the part
	 * that says "this downloads" — takes white and leads.
	 */
	--fa-primary-color: #fff;
	--fa-secondary-color: var(--tddg-accent);
	--fa-secondary-opacity: 1;
}

/* The arrow stays white through the hover so it never crosses the background. */
.tddg-download:hover .svg-inline--fa,
.tddg-download:focus-visible .svg-inline--fa {
	--fa-secondary-color: rgba(255, 255, 255, 0.55);
}

.tddg-download__meta {
	padding-left: 0.6em;
	border-left: 1px solid rgba(255, 255, 255, 0.35);
	font-size: 0.8125em;
	font-weight: 600;
	letter-spacing: 0.04em;
	opacity: 0.85;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The divider has to follow the text colour when the pill inverts on hover. */
.tddg-download:hover .tddg-download__meta,
.tddg-download:focus-visible .tddg-download__meta {
	border-left-color: rgba(19, 41, 75, 0.35);
}

/* ---------- Gravity Forms, inside the modal only ---------- */

/*
 * Every rule here is scoped to .tddg-modal so other Gravity Forms on the site keep
 * their own look, and every selector is a class: GF injects its honeypot with the
 * next free numeric field id, so id-based selectors drift the moment a field is
 * added or removed and can silently end up styling the invisible honeypot.
 */
.tddg-modal .gform_wrapper {
	margin: 0;
}

.tddg-modal .gform_wrapper .gform_fields {
	row-gap: 1.15rem;
}

.tddg-modal .gform_wrapper .gfield_label {
	margin-bottom: 0.4em;
	color: var(--tddg-fg);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.tddg-modal .gform_wrapper .gfield_required {
	color: #9a3412;
	font-weight: 600;
}

.tddg-modal .gform_wrapper .ginput_container input[type="text"],
.tddg-modal .gform_wrapper .ginput_container input[type="email"],
.tddg-modal .gform_wrapper .ginput_container input[type="tel"],
.tddg-modal .gform_wrapper .ginput_container input[type="number"],
.tddg-modal .gform_wrapper .ginput_container select,
.tddg-modal .gform_wrapper .ginput_container textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7em 0.85em;
	border: 1px solid var(--tddg-field-border);
	border-radius: 4px;
	background: #fff;
	color: var(--tddg-fg);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.tddg-modal .gform_wrapper .ginput_container input:focus,
.tddg-modal .gform_wrapper .ginput_container select:focus,
.tddg-modal .gform_wrapper .ginput_container textarea:focus {
	border-color: var(--tddg-fg);
	box-shadow: 0 0 0 3px rgba(75, 156, 211, 0.45);
	outline: none;
}

/*
 * The submit button, driven through Gravity Forms' own custom properties rather than
 * by out-specifying its stylesheet. Two things to know:
 *   - GF's Orbital theme names the footer `gform-footer` (hyphen). The legacy
 *     `gform_footer` (underscore) selector silently matches nothing on GF 2.7+, which
 *     is why a rule written against it leaves the button GF-blue with no error.
 *   - Setting --gf-ctrl-btn-* makes GF's own rules paint our colours, so no !important
 *     and no specificity race.
 */
.tddg-modal .gform_wrapper {
	--gf-ctrl-btn-bg-color-primary: var(--tddg-fg);
	--gf-ctrl-btn-bg-color-hover-primary: var(--tddg-hover);
	--gf-ctrl-btn-bg-color-focus-primary: var(--tddg-hover);
	--gf-ctrl-btn-color-primary: #fff;
	--gf-ctrl-btn-color-hover-primary: #fff;
	--gf-ctrl-btn-color-focus-primary: #fff;
	--gf-ctrl-btn-border-color-primary: var(--tddg-fg);
	--gf-ctrl-btn-border-color-hover-primary: var(--tddg-hover);
	--gf-ctrl-btn-border-color-focus-primary: var(--tddg-hover);
	--gf-ctrl-btn-radius: 999px;
	--gf-ctrl-btn-padding-x: 1.9em;
	--gf-ctrl-btn-padding-y: 0.9em;
	--gf-ctrl-btn-size: auto;
}

/* Legacy markup (GF themes before Orbital) still needs the explicit rule. */
.tddg-modal .gform_wrapper .gform-footer input[type="submit"],
.tddg-modal .gform_wrapper .gform-footer .gform_button,
.tddg-modal .gform_wrapper .gform_footer input[type="submit"],
.tddg-modal .gform_wrapper .gform_footer .gform_button {
	width: auto;
	font-family: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.tddg-modal .gform_wrapper .gform-footer,
.tddg-modal .gform_wrapper .gform_footer {
	margin: 1.5rem 0 0;
	padding: 0;
}

/* Validation: GF's defaults are loud red panels; keep the signal, lose the shouting. */
.tddg-modal .gform_wrapper .gform_validation_errors {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid #e6b8b0;
	border-radius: 4px;
	background: #fdf3f1;
	box-shadow: none;
}

.tddg-modal .gform_wrapper .gform_validation_errors h2 {
	margin: 0;
	color: #8a2c1b;
	font-size: 0.95rem;
	font-weight: 600;
}

.tddg-modal .gform_wrapper .gfield_error .ginput_container input {
	border-color: #c0563f;
}

.tddg-modal .gform_wrapper .validation_message {
	margin-top: 0.35em;
	padding: 0;
	border: 0;
	background: none;
	color: #8a2c1b;
	font-size: 0.875rem;
}

@media (prefers-reduced-motion: no-preference) {
	.tddg-modal[open] {
		animation: tddg-in 160ms ease-out;
	}
}

/* Someone who asked for less motion should not get colour crossfades either. */
@media (prefers-reduced-motion: reduce) {
	.tddg-trigger,
	.tddg-download,
	.tddg-modal__close,
	.tddg-spotlight__cover {
		transition: none;
	}
}

@keyframes tddg-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
}

/*
 * Gravity Forms swaps only the form element for the confirmation, so the form-side
 * headline and intro copy would otherwise sit above a confirmation that repeats them.
 */
.tddg-modal__body:has(.tddg-confirmation) .tddg-modal__title,
.tddg-modal__body:has(.tddg-confirmation) .tddg-modal__copy {
	display: none;
}