/**
 * Contact Us page styles - FUFA theme.
 *
 * Written to match the theme's existing page language rather than introduce a
 * new one. Values are taken from theme-styles.css so this page sits alongside
 * the Executive Committee / Fans templates without looking imported:
 *   container   1050px centred            (.fans-reps)
 *   headings    centred, #222, 2.25rem/600 (.fans-reps h2.entry-title)
 *   cards       1px #f0f0f0, radius 5px    (.fan-item-inner)
 *   body copy   #6a6a6a, 0.92rem/1.58      (.fan-desc)
 *   brand blue  #21439a                    (.section-title)
 *
 * No page hero here - header.php already renders the page banner and
 * breadcrumb, exactly as fans.php relies on.
 *
 * Hand-authored: main.scss compiles from node_modules/bootstrap which is not on
 * the server, so editing main.css would be lost on the next gulp run.
 *
 * @since 2.9.3
 */

/* Hide the breadcrumb ribbon on this template only. It is rendered by
   header.php:263 as <div class="ribbon sub-ribbon">, outside anything this
   template controls, so it has to be hidden from CSS. Scoped to the body class
   so it also applies to page 556 once the template goes live there, and never
   affects any other page. */
body.page-template-contact .ribbon.sub-ribbon {
	display: none;
}

/* ---------- Hero ----------
   Full-bleed navy band with the card row pulled up to overlap its lower edge.
   Scoped to .contact-us because the hero sits outside .fufa-contact so the band
   can span the viewport while the cards stay on the 1050px grid.
   .section-container is width:100% and the theme already sets overflow-x:hidden,
   so no viewport-unit trickery is needed. Colours are FUFA's own navy/blue. */

.contact-us .fc-hero {
	position: relative;
	margin-bottom: 70px;
}

.contact-us .fc-hero-band {
	padding: 66px 20px 170px;
	background: #02264c;
	text-align: center;
}

.contact-us .fc-hero-inner {
	width: 760px;
	max-width: 100%;
	margin: 0 auto;
}

.contact-us .fc-hero-title {
	margin: 0 0 14px;
	color: #fff;
	font-size: 2.7rem;
	font-weight: 700;
	line-height: 1.15;
	text-shadow: none;
}

.contact-us .fc-hero-sub {
	margin: 0;
	color: rgba(255, 255, 255, .78);
	font-size: 1.05rem;
	line-height: 1.6;
}

/* The overlap: band reserves 170px at its foot, cards climb 120px into it. */
.contact-us .fc-hero-cards {
	position: relative;
	z-index: 2;
	width: 1050px;
	max-width: 100%;
	margin: -120px auto 0;
	padding: 0 5px;
}

/* Tighten Bootstrap's default 30px gutter to 20px between the hero cards.
   The row's negative margin has to match the column padding, or the outer
   cards fall out of alignment with the 1050px grid. */
.contact-us .fc-hero-cards .row {
	margin-left: -10px;
	margin-right: -10px;
}

.contact-us .fc-hero-col {
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 20px;
}

.contact-us .fc-hero-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 26px 24px 24px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(2, 38, 76, .08);
}

.contact-us .fc-hero-icon {
	display: block;
	margin-bottom: 16px;
	font-size: 26px;
	line-height: 1;
	color: #21439a;
}

.contact-us .fc-hero-card-title {
	margin: 0 0 10px;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;
	color: #02264c;
}

/* flex:1 keeps the links baseline-aligned across cards of unequal copy length. */
.contact-us .fc-hero-card-body {
	flex: 1 1 auto;
	margin: 0 0 20px;
	font-size: 0.93rem;
	line-height: 1.55;
	color: #6a6a6a;
}

.contact-us .fc-hero-note {
	display: block;
	margin-top: 6px;
	font-size: 0.82rem;
	color: #9a9a9a;
}

/* Stack for cards with more than one action, e.g. both switchboard lines.
   align-items keeps each link only as wide as its own text, so the arrows sit
   right after the number rather than floating at the card's right edge. */
.contact-us .fc-hero-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.contact-us .fc-hero-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.93rem;
	font-weight: 600;
	color: #21439a;
	text-decoration: none;
	word-break: break-word;
}

/* Inline SVG arrow rather than fa-long-arrow-right, which is thin and sits off
   the text baseline. Sized in em so it tracks the link's font-size, and stroked
   with currentColor so it picks up the hover colour for free. */
.contact-us .fc-hero-link .fc-arrow {
	width: 1.15em;
	height: auto;
	flex: 0 0 auto;
	overflow: visible;
	transition: transform .18s ease;
}

.contact-us .fc-hero-link:hover,
.contact-us .fc-hero-link:focus {
	color: #02264c;
	text-decoration: none;
}

.contact-us .fc-hero-link:hover .fc-arrow,
.contact-us .fc-hero-link:focus .fc-arrow {
	transform: translateX(4px);
}

@media (max-width: 991px) {
	.contact-us .fc-hero-band { padding-bottom: 130px; }
	.contact-us .fc-hero-cards { margin-top: -95px; }
	.contact-us .fc-hero-title { font-size: 2.2rem; }
}

@media (max-width: 767px) {
	.contact-us .fc-hero { margin-bottom: 45px; }
	.contact-us .fc-hero-band { padding: 46px 20px 95px; }
	.contact-us .fc-hero-title { font-size: 1.85rem; }
	.contact-us .fc-hero-sub { font-size: 0.98rem; }

	/* Edge gutter. The row's -10px margin cancels the column's 10px padding, so
	   the card edge lands at exactly this container padding: 18 - 10 + 10 = 18px
	   from the screen edge, up from ~5px before. */
	.contact-us .fc-hero-cards {
		margin-top: -68px;
		padding-left: 18px;
		padding-right: 18px;
	}

	.contact-us .fc-hero-col { margin-bottom: 14px; }
	.contact-us .fc-hero-card { padding: 22px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.contact-us .fc-hero-link .fc-arrow { transition: none; }
	.contact-us .fc-hero-link:hover .fc-arrow,
	.contact-us .fc-hero-link:focus .fc-arrow { transform: none; }
}

/* ---------- Page body ---------- */

.fufa-contact {
	--fc-blue: #21439a;
	--fc-navy: #02264c;
	--fc-red: #d3182f;
	--fc-ink: #222;
	--fc-body: #6a6a6a;
	--fc-line: #f0f0f0;
	--fc-line-strong: #e1e1e1;
	--fc-wash: #f8f8f8;

	width: 1050px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 5px 90px;
	color: var(--fc-body);
}

.fufa-contact *,
.fufa-contact *::before,
.fufa-contact *::after {
	box-sizing: border-box;
}

/* ---------- Blocks ---------- */

.fufa-contact .fc-block {
	margin-bottom: 60px;
}

.fufa-contact .fc-block:last-child {
	margin-bottom: 0;
}

/* Matches .fans-reps h2.entry-title exactly. */
.fufa-contact h2.entry-title {
	font-size: 2.25rem;
	color: var(--fc-ink);
	text-shadow: none;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 30px;
}

.fufa-contact .fc-block-intro {
	max-width: 640px;
	margin: -12px auto 30px;
	text-align: center;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--fc-body);
}

/* Bootstrap columns need bottom spacing when they wrap. */
.fufa-contact .fc-col {
	margin-bottom: 25px;
}

/* ---------- Cards ---------- */

.fufa-contact .fc-card {
	border: 1px solid var(--fc-line);
	border-radius: 5px;
	background: #fff;
	padding: 18px 20px 20px;
}

/* Equal-height only where cards sit side by side in a grid. Applying this to
   the aside stretched it to the form's full height and left a large empty gap. */
.fufa-contact .fc-dept {
	height: 100%;
}

/* Panel around the form so it reads as a block rather than loose fields. */
.fufa-contact .fc-form-panel {
	border: 1px solid var(--fc-line);
	border-radius: 5px;
	background: #fff;
	padding: 26px 28px 28px;
}

.fufa-contact .fc-card-title {
	margin: 0 0 10px;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--fc-ink);
	line-height: 1.3;
}

.fufa-contact .fc-card-body {
	margin: 0 0 8px;
	font-size: 0.92rem;
	line-height: 1.58;
	color: var(--fc-body);
	letter-spacing: -0.25px;
}

.fufa-contact .fc-card-body a {
	color: var(--fc-blue);
	text-decoration: none;
}

.fufa-contact .fc-card-body a:hover,
.fufa-contact .fc-card-body a:focus {
	text-decoration: underline;
}

.fufa-contact .fc-card-note {
	display: block;
	font-size: 0.82rem;
	line-height: 1.5;
	color: #8a8a8a;
}

.fufa-contact .fc-inline-link {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--fc-blue);
	text-decoration: none;
}

.fufa-contact .fc-inline-link:hover,
.fufa-contact .fc-inline-link:focus {
	color: var(--fc-red);
	text-decoration: none;
}

/* Department hover: no accent bar. The border warms toward brand blue, the fill
   lifts a hair off white and a whisper of shadow appears. Nothing moves and no
   box dimensions change, so the grid stays perfectly still. */
.fufa-contact .fc-dept {
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.fufa-contact .fc-dept:hover,
.fufa-contact .fc-dept:focus-within {
	border-color: #ccd6ea;
	background: #fcfdff;
	box-shadow: 0 2px 7px rgba(2, 38, 76, .06);
}

.fufa-contact .fc-aside {
	margin-bottom: 20px;
}

.fufa-contact .fc-address {
	margin: 0 0 16px;
	font-style: normal;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--fc-body);
}

/* ---------- Social list ---------- */

.fufa-contact .fc-social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fufa-contact .fc-social li + li {
	border-top: 1px solid var(--fc-line);
}

.fufa-contact .fc-social a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	font-size: 0.9rem;
	color: var(--fc-ink);
	text-decoration: none;
}

.fufa-contact .fc-social a:hover,
.fufa-contact .fc-social a:focus {
	color: var(--fc-blue);
	text-decoration: none;
}

.fufa-contact .fc-social .fa {
	width: 18px;
	text-align: center;
	color: #9a9a9a;
	font-size: 15px;
}

.fufa-contact .fc-social a:hover .fa {
	color: var(--fc-blue);
}

/* ---------- Form ---------- */

.fufa-contact .fc-field {
	margin-bottom: 18px;
}

.fufa-contact .fc-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--fc-ink);
}

.fufa-contact .fc-req {
	color: var(--fc-red);
}

.fufa-contact .fc-optional {
	font-weight: 400;
	color: #9a9a9a;
}

.fufa-contact .fc-field input,
.fufa-contact .fc-field select,
.fufa-contact .fc-field textarea {
	width: 100%;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 0.92rem;
	color: var(--fc-ink);
	background: #fff;
	border: 1px solid var(--fc-line-strong);
	border-radius: 4px;
}

.fufa-contact .fc-field textarea {
	resize: vertical;
	min-height: 150px;
}

.fufa-contact .fc-field input:focus,
.fufa-contact .fc-field select:focus,
.fufa-contact .fc-field textarea:focus {
	outline: none;
	border-color: var(--fc-blue);
}

/* Brief highlight on the subject field after a department card is clicked, so it
   is obvious which value was preselected once the scroll lands. */
.fufa-contact .fc-field select.is-flash {
	border-color: var(--fc-blue);
	box-shadow: 0 0 0 3px rgba(33, 67, 154, .18);
	transition: box-shadow .25s ease, border-color .25s ease;
}

.fufa-contact .fc-field.has-error input,
.fufa-contact .fc-field.has-error select,
.fufa-contact .fc-field.has-error textarea {
	border-color: var(--fc-red);
}

.fufa-contact .fc-error {
	display: block;
	margin-top: 5px;
	font-size: 0.8rem;
	color: var(--fc-red);
}

/* Off-screen rather than display:none, which some bots detect. */
.fufa-contact .fc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fufa-contact .fc-submit {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.fufa-contact .fc-consent {
	font-size: 0.8rem;
	color: #8a8a8a;
}

/* ---------- Buttons ---------- */

.fufa-contact .fc-btn {
	display: inline-block;
	padding: 11px 22px;
	border: 1px solid var(--fc-blue);
	border-radius: 4px;
	background: var(--fc-blue);
	color: #fff;
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.fufa-contact .fc-btn:hover,
.fufa-contact .fc-btn:focus {
	background: var(--fc-navy);
	border-color: var(--fc-navy);
	color: #fff;
	text-decoration: none;
}

.fufa-contact .fc-btn-outline {
	background: transparent;
	color: var(--fc-blue);
}

.fufa-contact .fc-btn-outline:hover,
.fufa-contact .fc-btn-outline:focus {
	background: var(--fc-blue);
	border-color: var(--fc-blue);
	color: #fff;
}

/* ---------- Alerts ---------- */

.fufa-contact .fc-alert {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid;
	border-radius: 4px;
	font-size: 0.9rem;
	line-height: 1.6;
}

.fufa-contact .fc-alert strong {
	display: block;
}

.fufa-contact .fc-alert-success {
	background: #f1f8f3;
	border-color: #cfe6d7;
	color: #1d6b3d;
}

.fufa-contact .fc-alert-error {
	background: #fdf2f4;
	border-color: #eccdd3;
	color: #9c1223;
}

/* ---------- Map ---------- */

.fufa-contact .fc-map {
	position: relative;
	padding-bottom: 42%;
	border: 1px solid var(--fc-line);
	border-radius: 5px;
	overflow: hidden;
}

.fufa-contact .fc-map-caption {
	margin: 12px 0 0;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--fc-body);
}

.fufa-contact .fc-map-caption strong {
	color: var(--fc-ink);
	font-weight: 600;
}

.fufa-contact .fc-map-caption a {
	margin-left: 6px;
	color: var(--fc-blue);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.fufa-contact .fc-map-caption a:hover,
.fufa-contact .fc-map-caption a:focus {
	text-decoration: underline;
}

.fufa-contact .fc-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Media / accreditation ---------- */

.fufa-contact .fc-press {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	padding: 26px 28px;
	background: var(--fc-wash);
	border: 1px solid var(--fc-line);
	border-radius: 5px;
}

.fufa-contact .fc-press-copy {
	flex: 1 1 420px;
}

.fufa-contact .fc-press-title {
	margin: 0 0 8px;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--fc-ink);
}

.fufa-contact .fc-press-copy p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.58;
	color: var(--fc-body);
}

.fufa-contact .fc-press-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
	/* Same 18px edge gutter as the hero so the whole page lines up on mobile.
	   Bootstrap's default row (-15px) / column (15px) pair nets to this too. */
	.fufa-contact { padding: 0 18px 60px; }
	.fufa-contact h2.entry-title { font-size: 1.75rem; }
	.fufa-contact .fc-block { margin-bottom: 45px; }
	.fufa-contact .fc-map { padding-bottom: 70%; }
	.fufa-contact .fc-press { padding: 22px; }
	.fufa-contact .fc-submit { flex-direction: column; align-items: stretch; }
	.fufa-contact .fc-btn { width: 100%; text-align: center; }
	.fufa-contact .fc-press-actions .fc-btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.fufa-contact * { transition: none !important; }
}