/* ==========================================================================
   MIT Flying Club brand overrides — loaded AFTER main.css so these win.
   Keep this file for small tweaks; structural styles live in the Sass source.
   ========================================================================== */

:root {
	--mit-red: #A31F34;      /* MIT cardinal red */
	--mit-red-dark: #8b1a2c;
	--mit-gray: #8A8B8C;     /* MIT silver gray */
}

/* Primary buttons + submit in MIT red */
#wrapper .button.primary,
#wrapper input[type="submit"].primary,
#wrapper input[type="button"].primary,
#wrapper button.primary {
	background-color: var(--mit-red);
	box-shadow: none;
	color: #ffffff !important;
}
#wrapper .button.primary:hover {
	background-color: var(--mit-red-dark);
}

/* Committee cards: role label in brand red, tighten the grid */
.committee article .role {
	display: block;
	margin-bottom: 0.5em;
	color: var(--mit-red);
	font-size: 0.6em;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.committee article h3 {
	margin-bottom: 0.3em;
}
.committee article .handle {
	color: var(--mit-gray);
	font-size: 0.9em;
}

/* Hero tagline: three words separated by a middot. The separator is dimmed so the
   words carry the line and the dots just keep them apart. */
#intro p.tagline-triad {
	word-spacing: 0.22em;
	letter-spacing: 0.04em;
}
#intro p.tagline-triad span {
	margin: 0 0.15em;
	opacity: 0.55;
	font-style: normal;
}
@media screen and (max-width: 736px) {
	#intro p.tagline-triad { word-spacing: 0.1em; }
}

/* ================================================================
   Pilot pathway, drawn as a runway with taxiway exits.
   The strip, centreline, threshold bars and distance numbers are all
   decorative (aria-hidden). The stops themselves are a real <ol> of
   buttons, so the content works with CSS or images disabled.
   ================================================================ */
.runway {
	position: relative;
	margin: 0 0 1em 0;
	padding: 3.5em 0 4em 0;
}

/* the asphalt */
.runway .rw-strip {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 118px;
	margin-left: -59px;
	background: #2b3037;
	border-left: 3px solid rgba(255, 255, 255, 0.55);
	border-right: 3px solid rgba(255, 255, 255, 0.55);
	overflow: hidden;
}
/* dashed centreline, the "dotted timeline" */
.runway .rw-centerline {
	position: absolute;
	top: 5.2em;
	bottom: 5.2em;
	left: 50%;
	width: 8px;
	margin-left: -4px;
	background-image: linear-gradient(#fff 0 55%, transparent 55% 100%);
	background-size: 100% 62px;
}
/* threshold "piano keys" at each end */
.runway .rw-threshold {
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 7px;
	padding: 0 12px;
}
.runway .rw-threshold-end { top: auto; bottom: 12px; }
.runway .rw-threshold span {
	display: block;
	width: 9px;
	height: 46px;
	background: rgba(255, 255, 255, 0.92);
}
/* runway designators */
.runway .rw-desig {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.92);
	font-family: "Courier New", monospace;
	font-weight: 700;
	font-size: 30px;
	letter-spacing: 0.14em;
}
.runway .rw-desig-top { top: 68px; }
.runway .rw-desig-bottom { bottom: 68px; transform: rotate(180deg); }

/* the exits */
.runway ol.rw-stops {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 2;
}
.runway .rw-stop {
	position: relative;
	width: 50%;
	padding: 0 0 2.1em 0;
	margin: 0;
}
.runway .rw-stop.rw-left { padding-right: 88px; text-align: right; }
.runway .rw-stop.rw-right { margin-left: 50%; padding-left: 88px; text-align: left; }
/* taxiway stub joining the sign to the runway edge */
.runway .rw-stop::after {
	content: '';
	position: absolute;
	top: 1.35em;
	width: 56px;
	height: 3px;
	background: repeating-linear-gradient(to right, rgba(255,255,255,0.85) 0 9px, transparent 9px 16px);
}
.runway .rw-stop.rw-left::after { right: 22px; }
.runway .rw-stop.rw-right::after { left: 22px; }

/* the sign itself, styled like airfield signage */
.runway .rw-sign {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	max-width: 100%;
	padding: 0.65em 1em;
	border: 2px solid #d8bb2a;
	border-radius: 4px;
	background: #f2d949;
	color: #1d2127;
	text-align: left;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.runway .rw-sign:hover,
.runway .rw-sign:focus-visible {
	background: #f7e572;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.runway .rw-stop.is-open .rw-sign {
	background: #fff3a6;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}
/* conditional exit (non-US citizens) reads as a hold-short sign */
.runway .rw-optional .rw-sign {
	border-color: #7d1620;
	background: #a3242f;
	color: #fff;
}
.runway .rw-optional .rw-sign:hover,
.runway .rw-optional .rw-sign:focus-visible { background: #b82a37; }
.runway .rw-optional .rw-num { background: rgba(255,255,255,0.9); color: #7d1620; }

.runway .rw-num {
	flex: 0 0 auto;
	min-width: 2.2em;
	padding: 0.2em 0.35em;
	border-radius: 3px;
	background: #1d2127;
	color: #f2d949;
	font-family: "Courier New", monospace;
	font-size: 0.62em;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.06em;
}
.runway .rw-text { display: block; }
.runway .rw-label {
	display: block;
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.3;
}
.runway .rw-kicker {
	display: block;
	margin-top: 0.15em;
	font-size: 0.6em;
	letter-spacing: 0.04em;
	opacity: 0.75;
}

/* the detail panel */
.runway .rw-panel {
	position: relative;
	margin-top: 0.7em;
	padding: 1.3em 1.5em;
	border: 1px solid #dfe1e4;
	border-top: 3px solid var(--mit-red);
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	text-align: left;
	z-index: 3;
}
.runway .rw-panel .rw-body { font-size: 0.82em; line-height: 1.6; margin-bottom: 1em; }
.runway .rw-facts {
	margin: 0 0 1em 0;
	padding: 0.8em 0 0 0;
	border-top: 1px solid #eceef0;
	font-size: 0.74em;
}
.runway .rw-facts dt {
	float: left;
	clear: left;
	width: 52%;
	padding: 0.25em 0;
	color: #5f666d;
	font-weight: 400;
}
.runway .rw-facts dd {
	margin: 0;
	padding: 0.25em 0;
	text-align: right;
	font-weight: 700;
	color: #1f242c;
}
.runway .rw-facts::after { content: ''; display: block; clear: both; }
.runway .rw-club {
	display: flex;
	gap: 0.7em;
	margin: 0 0 1em 0;
	padding: 0.8em 1em;
	border-left: 3px solid var(--mit-red);
	background: #faf7f7;
	font-size: 0.74em;
	line-height: 1.55;
}
.runway .rw-club .icon { color: var(--mit-red); }
.runway ul.rw-links { margin: 0; padding: 0; list-style: none; font-size: 0.74em; }
.runway ul.rw-links li { display: inline-block; margin: 0 1.1em 0 0; }

/* single column on narrow screens: runway moves left, exits all go right */
@media screen and (max-width: 860px) {
	.runway { padding: 2.5em 0 3em 0; }
	.runway .rw-strip { left: 26px; margin-left: 0; width: 72px; }
	.runway .rw-desig { font-size: 20px; }
	.runway .rw-threshold span { width: 6px; height: 30px; }
	.runway .rw-threshold { gap: 5px; }
	.runway .rw-stop,
	.runway .rw-stop.rw-left,
	.runway .rw-stop.rw-right {
		width: 100%;
		margin-left: 0;
		padding: 0 0 1.8em 122px;
		text-align: left;
	}
	.runway .rw-stop::after,
	.runway .rw-stop.rw-left::after,
	.runway .rw-stop.rw-right::after { left: 98px; right: auto; width: 20px; }
	.runway .rw-facts dt { width: 100%; float: none; padding-bottom: 0; }
	.runway .rw-facts dd { text-align: left; padding-top: 0; margin-bottom: 0.4em; }
}
@media (prefers-reduced-motion: reduce) {
	.runway .rw-sign { transition: none; }
	.runway .rw-sign:hover, .runway .rw-sign:focus-visible { transform: none; }
}

/* ---- Landing page events summary ---- */
#events-home { margin: 0 0 2em 0; }
#events-home .eh-block + .eh-block { margin-top: 1.8em; }
#events-home h3 {
	font-size: 0.72em;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #4a505a;
	margin-bottom: 0.9em;
}
#events-home h3 .icon { margin-right: 0.6em; color: var(--mit-red); }
#events-home ul.eh-list { margin: 0; padding: 0; list-style: none; }
#events-home ul.eh-list li {
	display: flex;
	gap: 1.2em;
	align-items: baseline;
	padding: 0.75em 0;
	border-top: 1px solid #ebecee;
}
#events-home ul.eh-list li:first-child { border-top: none; }
#events-home .eh-date {
	flex: 0 0 6.2em;
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mit-red);
	white-space: nowrap;
}
#events-home .eh-body { display: block; }
#events-home .eh-title { display: block; font-size: 0.92em; line-height: 1.4; }
#events-home .eh-loc {
	display: block;
	margin-top: 0.2em;
	font-size: 0.72em;
	color: #5f666d;
}
#events-home .eh-loc .icon { margin-right: 0.45em; color: #8a9099; }
@media screen and (max-width: 480px) {
	#events-home ul.eh-list li { flex-direction: column; gap: 0.25em; }
	#events-home .eh-date { flex-basis: auto; }
}

/* section-label icons (the small "Our Mission" / "Gallery" kickers).
   Deliberately not scoped to .post: two of the landing cards are plain
   <article> elements and need the same treatment. */
#main .date .icon { margin-right: 0.55em; color: var(--mit-red); }

/* footer heading icons */
#footer h3 .icon { margin-right: 0.5em; color: var(--mit-red); font-size: 0.9em; }

/* ---- Flight school cards (replaces a very wide, hard to scan table) ---- */
.schools {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.6em;
	margin: 0 0 2.5em 0;
}
@media screen and (max-width: 980px) { .schools { grid-template-columns: 1fr; } }

.school {
	position: relative;
	padding: 1.6em 1.6em 1.2em 1.8em;
	border: 1px solid #dfe1e4;
	border-left: 4px solid var(--mit-red);
	border-radius: 3px;
	background: #fff;
}
.school h3 { margin-bottom: 0.15em; font-size: 1.05em; }
.school h3 a { border-bottom: none; }
.school .school-tag {
	margin: 0 0 0.6em 0;
	font-size: 0.62em;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6a7079;
}
.school .school-dist { margin: 0.5em 0 1em 0; }
.school .pill {
	display: inline-block;
	margin: 0 0.4em 0.4em 0;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	background: #f0f1f3;
	color: #3d434b;
	font-size: 0.62em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.school ul.school-facts { margin: 0 0 1.1em 0; padding: 0; list-style: none; }
.school ul.school-facts li {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	padding: 0.4em 0;
	font-size: 0.85em;
	line-height: 1.5;
	border-top: 1px solid #f0f1f3;
}
.school ul.school-facts li:first-child { border-top: none; }
.school ul.school-facts .icon {
	flex: 0 0 auto;
	width: 1.1em;
	color: var(--mit-red);
	font-size: 0.9em;
	line-height: 1.7;
}
.school ul.school-facts small { color: #6a7079; }
.school ul.actions { margin-bottom: 0; }

/* ---- Dense comparison table (flight schools page) ----
   Ten columns of real detail. Tightened padding and type so it reads as a
   spec sheet rather than a spaced-out list, and scrolls sideways when narrow. */
.schools-table { margin-bottom: 0.8em; }
table.alt.dense { font-size: 0.72em; line-height: 1.4; }
table.alt.dense th {
	padding: 0.5em 0.65em;
	font-size: 0.82em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: bottom;
}
table.alt.dense td {
	padding: 0.55em 0.65em;
	vertical-align: top;
}
table.alt.dense tbody tr:nth-child(odd) td { background: #fafafb; }
table.alt.dense td small { color: #6a7079; font-size: 0.88em; }
table.alt.dense td.nw { white-space: nowrap; }
table.alt.dense a { border-bottom: none; }
table.alt.dense .unk {
	display: inline-block;
	min-width: 1.3em;
	text-align: center;
	border-radius: 3px;
	background: #eceef0;
	color: #6a7079;
	font-weight: 700;
	cursor: help;
}
.table-legend { color: #5f666d; margin-bottom: 2.5em; }
.table-legend .unk {
	display: inline-block;
	padding: 0 0.35em;
	border-radius: 3px;
	background: #eceef0;
	color: #6a7079;
	font-weight: 700;
}
@media screen and (max-width: 980px) {
	table.alt.dense { font-size: 0.68em; }
	.schools-table { overflow-x: auto; }
}

/* steam vs glass comparison */
.compare { padding: 1.4em 1.6em; border: 1px solid #dfe1e4; border-radius: 3px; height: 100%; }
.compare h3 { font-size: 0.95em; margin-bottom: 0.8em; }
.compare h3 .icon { margin-right: 0.5em; color: var(--mit-red); }
.compare p.good, .compare p.bad {
	margin: 0.9em 0 0.4em 0;
	font-size: 0.6em;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #4a505a;
}
.compare ul { margin: 0; padding-left: 1.1em; font-size: 0.85em; line-height: 1.55; }
.compare ul li { padding-left: 0.2em; }
.figcap { text-align: center; margin-top: 0.6em; color: #5f666d; }

/* Small callout box for notes/disclaimers */
.note {
	border-left: 4px solid var(--mit-red);
	padding: 1em 1.5em;
	background: rgba(255, 255, 255, 0.03);
	margin: 0 0 2em 0;
}
.note p:last-child { margin-bottom: 0; }

/* Placeholder tag for content still being gathered */
.tbd {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: 3px;
	background: var(--mit-red);
	color: #fff;
	font-size: 0.55em;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* ---- Hero: darken the DA-42 background so white intro text stays readable ---- */
#wrapper > .bg {
	background-image:
		url("../../images/overlay.png"),
		linear-gradient(0deg, rgba(18, 22, 27, 0.55), rgba(18, 22, 27, 0.30)),
		url("../../images/bg.jpg") !important;
	background-size: auto, auto, cover !important;
	background-position: center, center, center center !important;
	background-repeat: repeat, no-repeat, no-repeat !important;
}

/* ---- Committee: uniform square photos regardless of source aspect ---- */
.committee article .image.fit {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 100%;      /* square */
	overflow: hidden;
	border-radius: 4px;
	margin: 0 0 1.25em 0;
}
.committee article .image.fit img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;  /* default: favor faces near the top */
}

/* ---- radar traffic canvas (drawn in radar.js) ----
       Sits ABOVE the intro text so the aircraft fly over everything;
       pointer-events:none keeps the buttons underneath clickable. ---- */
.radarscope {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 6;
}
#intro h1,
#intro > p,
#intro .actions { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
	.radarscope { opacity: 0.55; }   /* radar.js draws a single static frame */
}

/* ---- Header logo image (transparent PNG, white text — sits on the dark header).
       Massively frames .logo in a 5px white box; drop it so the mark floats clean. ---- */
#header .logo {
	display: inline-flex;
	align-items: center;
	border: none !important;
	background: none;
	padding: 0;
}
#header .logo img {
	height: 54px;
	width: auto;
	display: block;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}
#header .logo:hover img { opacity: 0.85; }

/* ---- Gallery carousel ---- */
#gallery {
	position: relative;
	margin: 0 0 3em 0;
	outline: none;
}
#gallery .gal-window {
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	background: #10161f;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
#gallery .gal-track {
	display: flex;
	transition: transform 0.55s cubic-bezier(0.4, 0.02, 0.2, 1);
	will-change: transform;
}
#gallery .gal-slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #10161f;
}
/* contain, not cover: the gallery mixes landscape and portrait photos, and
   cropping a portrait shot to 16:9 cuts the subject in half */
#gallery .gal-slide img,
#gallery .gal-slide video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: #10161f;
}

/* arrows */
#gallery .gal-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(16, 22, 31, 0.62);
	color: #fff;
	font-size: 1.1rem;
	line-height: 44px;
	cursor: pointer;
	z-index: 3;
	transition: background 0.2s ease, opacity 0.2s ease;
}
/* the template's button colour wins over the declaration above, which left the
   arrows dark-on-dark (about 1.2:1). Force white. */
#gallery .gal-nav,
#gallery .gal-nav:visited { color: #ffffff !important; }
#gallery .gal-nav:hover { background: var(--mit-red); color: #ffffff !important; }
#gallery .gal-prev { left: 12px; }
#gallery .gal-next { right: 12px; }
#gallery.gal-single .gal-nav,
#gallery.gal-single .gal-dots { display: none; }

/* caption + dots */
#gallery .gal-caption {
	margin: 0.9em 0 0.4em 0;
	text-align: center;
	font-size: 0.8em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* --mit-gray (#8A8B8C) is only about 3.4:1 on white and fails AA at this size,
	   so the caption uses a darker gray. */
	color: #5f666d;
	min-height: 1.4em;
}
#gallery .gal-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 0;
	margin: 0;
	list-style: none;
}
#gallery .gal-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(138, 139, 140, 0.45);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
#gallery .gal-dot:hover { background: rgba(138, 139, 140, 0.8); }
#gallery .gal-dot.active { background: var(--mit-red); transform: scale(1.25); }

/* ---- Footer / copyright contrast (WCAG 1.4.3 Contrast Minimum) ----
   The Massively template renders #copyright text and links at 25% white, which
   composites to about 2.3:1 on the dark footer and fails AA for normal text.
   These raise it to roughly 9:1 (links) and 7:1 (text). Do not lower them:
   the accessibility link required by IS&T lives in this block. */
#copyright { color: rgba(255, 255, 255, 0.62); }
#copyright a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: underline;
	text-underline-offset: 2px;
}
#copyright a:hover,
#copyright a:focus-visible { color: #ffffff; }

/* #footer sits on a LIGHT background (#f5f5f5), unlike #copyright which is on the
   dark body. The template's gray text on that light panel fails AA, so darken it.
   Buttons are excluded: .primary is white-on-red and already fine. */
#footer { color: #4a505a; }
#footer h3 { color: #1f242c; }
#footer p,
#footer li { color: #4a505a; }
#footer a:not(.button) {
	color: #333a43;
	text-decoration: underline;
	text-underline-offset: 2px;
}
#footer a:not(.button):hover { color: var(--mit-red); }
/* the template sets .button colour with high specificity, so override it */
#footer .button:not(.primary) { color: #1f242c !important; box-shadow: inset 0 0 0 2px #6c737d; }
#footer .icons.alt a { color: #333a43; }

/* play/pause for the auto-advance (WCAG 2.2.2 Pause, Stop, Hide) */
#gallery .gal-toggle {
	display: block;
	margin: 0 auto 0.7em auto;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba(138, 139, 140, 0.5);
	border-radius: 50%;
	background: transparent;
	color: var(--mit-gray);
	font-size: 0.62em;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}
#gallery .gal-toggle:hover,
#gallery .gal-toggle:focus-visible {
	color: var(--mit-red);
	border-color: var(--mit-red);
}
#gallery.gal-single .gal-toggle { display: none; }

@media screen and (max-width: 736px) {
	#gallery .gal-nav { width: 36px; height: 36px; line-height: 36px; font-size: 0.95rem; }
	#gallery .gal-prev { left: 6px; }
	#gallery .gal-next { right: 6px; }
}

/* ---- MIT FC logo centered under the Our Mission text (real black-text logo on a card) ---- */
.mission-logo-card {
	text-align: center;
	margin: 2.5em 0 1em 0;
}
.mission-logo-card img {
	display: inline-block;
	width: 480px;
	max-width: 90%;
	height: auto;
	background: #ffffff;
	padding: 1.75em 2.25em;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}