/* =========================================================================
   INAA utilities
   ========================================================================= */

/* -------------------------------------------------------------------------
 * Angled edge ("notch")
 *
 * The signature diagonal where one band cuts into the next. Implemented as an
 * overlaid triangle rather than clip-path on the section itself, so it never
 * clips dropdowns, focus rings, or absolutely positioned children.
 *
 * Usage — add to any Elementor container via Advanced → CSS Classes:
 *
 *   inaa-angle inaa-angle--bl
 *
 * and set the colour to whatever the *next* section shows through as:
 *
 *   --inaa-angle-color: #bcd8ef;
 *
 * Modifiers: --bl (default) --br --tl --tr
 * Size:      --inaa-angle-w / --inaa-angle-h
 * ---------------------------------------------------------------------- */

.inaa-angle {
	--inaa-angle-w: 92px;
	--inaa-angle-h: 68px;
	--inaa-angle-color: var(--inaa-navy, #14275c);

	position: relative;
}

.inaa-angle::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: var(--inaa-angle-w);
	height: var(--inaa-angle-h);
	background: var(--inaa-angle-color);
	pointer-events: none;
}

/* Hangs below the band, right angle at its top-left. */
.inaa-angle--bl::after {
	top: 100%;
	left: 0;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

.inaa-angle--br::after {
	top: 100%;
	right: 0;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Sits above the band, biting into the section before it. */
.inaa-angle--tl::after {
	bottom: 100%;
	left: 0;
	clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.inaa-angle--tr::after {
	bottom: 100%;
	right: 0;
	clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* Shrink the wedge on small screens so it stays a detail, not a shape. */
@media (max-width: 767px) {
	.inaa-angle {
		--inaa-angle-w: 54px;
		--inaa-angle-h: 40px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.inaa-angle::after {
		transition: width 240ms ease, height 240ms ease;
	}
}


/* =========================================================================
   Filter chips
   Shared by the Projects archive and the Team page, so they live here rather
   than in either one's stylesheet.
   ========================================================================= */

.inaa-projects__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}

.inaa-chip {
	display: inline-flex;
	align-items: center;
	padding: 9px 20px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 99px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.inaa-chip:hover,
.inaa-chip:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
	color: #fff;
}

.inaa-chip.is-active {
	background: #fff;
	border-color: #fff;
	color: var(--inaa-navy, #14275c);
}


/* =========================================================================
   Long-form prose
   Shared by project pages, blog posts and the team bio modal, so it lives here
   rather than in any one of their stylesheets.
   ========================================================================= */

.inaa-prose {
	max-width: 68ch;
	color: var(--inaa-text, #1b2333);
	font-size: 1.0625rem;
	line-height: 1.72;
}

.inaa-prose > * + * {
	margin-top: 1.15em;
}

.inaa-prose h2,
.inaa-prose h3,
.inaa-prose h4 {
	margin-top: 1.8em;
	color: var(--inaa-navy, #14275c);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.015em;
}

.inaa-prose h2 { font-size: 1.625rem; }
.inaa-prose h3 { font-size: 1.3125rem; }
.inaa-prose h4 { font-size: 1.125rem; }

.inaa-prose a {
	color: var(--inaa-navy, #14275c);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.inaa-prose a:hover,
.inaa-prose a:focus-visible {
	color: var(--inaa-red, #d0111b);
}

.inaa-prose ul,
.inaa-prose ol {
	padding-left: 1.3em;
}

.inaa-prose li + li {
	margin-top: 0.4em;
}

.inaa-prose img,
.inaa-prose figure img {
	max-width: 100%;
	height: auto;
	border-radius: 3px;
}

.inaa-prose figcaption {
	margin-top: 8px;
	color: var(--inaa-text-muted, #5b6478);
	font-size: 0.875rem;
}

.inaa-prose blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--inaa-red, #d0111b);
	color: var(--inaa-navy, #14275c);
	font-size: 1.1875rem;
	font-style: italic;
	line-height: 1.55;
}

/* =========================================================================
   Head-band artwork

   Any section's head band can wear .inaa-head--image alongside a
   --inaa-head-image custom property, and the navy gradient moves off the
   element onto ::after so it becomes a wash over the photograph instead of
   replacing it. The wash is heaviest on the left, where the eyebrow, title
   and intro sit, and thins out to the right so the picture stays visible.

   Text is lifted above both layers here rather than in each component, so a
   band only has to add the class.
   ========================================================================= */

.inaa-head--image {
	position: relative;
	overflow: hidden;
	background: none;
}

.inaa-head--image > * {
	position: relative;
	z-index: 1;
}

.inaa-head--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--inaa-head-image);
	background-size: cover;

	/* These bands are far wider than they are tall, so a 3:2 photograph loses
	   most of its height. Centring the crop reliably decapitates people —
	   faces sit above the middle of almost every group shot — so the window
	   is biased towards the top. Override per band with --inaa-head-focus. */
	background-position: var(--inaa-head-focus, center 28%);
}

.inaa-head--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(110% 150% at 86% 6%, rgba(208, 17, 27, 0.34) 0%, rgba(208, 17, 27, 0) 58%),
		linear-gradient(100deg, rgba(9, 18, 43, 0.94) 0%, rgba(9, 18, 43, 0.84) 46%, rgba(9, 18, 43, 0.66) 100%);
}

/* Give the band room to read as a picture rather than a stripe. */
.inaa-head--image {
	padding-block: 76px 80px;
}

@media (max-width: 767px) {
	.inaa-head--image {
		padding-block: 56px 60px;
	}

	/* A narrow screen leaves the left-to-right fade no room to work in — the
	   title, intro and chips all sit over the picture — so the wash turns
	   vertical and gets heavier. The photograph still reads underneath. */
	.inaa-head--image::after {
		background:
			radial-gradient(120% 90% at 84% 4%, rgba(208, 17, 27, 0.32) 0%, rgba(208, 17, 27, 0) 62%),
			linear-gradient(180deg, rgba(9, 18, 43, 0.90) 0%, rgba(9, 18, 43, 0.84) 100%);
	}
}

/* =========================================================================
   Honeypot

   Bot-trap fields must never be visible or focusable. This lives in
   utilities.css — loaded on every page — because the rule previously sat in
   sections.css, which is registered only for the Elementor newsletter widget.
   On /membership-join/ that stylesheet never loaded, so the trap rendered as a
   real "Leave this field empty" input, and anyone who typed in it was silently
   treated as a bot: the handler bails with an "ok" status and creates nothing.

   The two legacy class names are kept alongside so no form regresses.
   ========================================================================= */

.inaa-hp,
.inaa-newsletter__hp,
.inaa-auth__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;

	/* Belt and braces: even if a layout rule wins on position, this hides it. */
	opacity: 0 !important;
	pointer-events: none !important;
}