/**
 * FictionX Contact Us - Frontend Styles
 *
 * The page shell below - tokens, hero, scrim, band - is COPIED from
 * assets/css/modules/updates/updates.css, as every module in this pass is. There is no
 * search pill here: this page is a FORM, not a listing, and nothing on it is a list.
 * If one of the shared values is changed, change the others.
 */

:root {
	--fxcu-teal: #26667c;        /* the site's own --bs-primary */
	--fxcu-teal-deep: #0E3D4C;
	--fxcu-ink: #0B2B33;
	--fxcu-muted: #5B7076;
	--fxcu-mist: #EFF3F4;
	--fxcu-rule: #DCE4E6;

	/* The theme's --bs-primary-rgb is 40,84,109, which is NOT --bs-primary (#26667c):
	   every rgba(var(--bs-primary-rgb), …) tint comes out a different blue. */
	--fxcu-primary-rgb: 38, 102, 124;
}

[data-bs-theme="dark"] {
	/* The teal is ink and border in almost every rule below, and on the dark surface
	   #26667c measured 2.85:1 - under the 4.5:1 a 12.5px label needs. Lightened for
	   dark only, which repairs every teal word at once rather than per component.
	   (The sibling sheets pin a background use of it back to the deep teal here; this
	   one has no such rule, because this page has no search button - see the note at the
	   deep teal further down, or that button would invert into pale-on-white. */
	--fxcu-teal: #4FA3BA;
	--fxcu-ink: #E8F0F2;
	--fxcu-muted: #9FB3B9;
	--fxcu-mist: #0F1B1F;
	--fxcu-rule: rgba(255, 255, 255, .10);
}

/* ==============================================================================
   The hero, on the band header.dwt paints behind every module page
   ============================================================================== */
.fxcu-hero {
	position: relative;
	z-index: 3;
	padding: 18px 0 0;
}
/* A one-way ramp: nothing at the top, where the band's video is left alone behind the
   nav, coming on through the lower half and ending opaque under the search pill.

   It was a near-opaque slab from edge to edge, which is the same mistake the library
   made: it read as a dark rectangle dropped on the page and drew a hard line where it
   met the bright band above it. Measured here at every width from 390 to 1920 — the
   scrim started at .87 immediately, so the cut was at the hero's top edge, around y=103
   on a desktop.

   The stops are deliberately uneven. A straight two-stop ramp spends most of its length
   pale, and that is the height at which the band's video changes tone, so the darkening
   is held back and then brought on quickly. These values are the library's, exactly —
   the two pages are meant to be indistinguishable here. */
.fxcu-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(5, 27, 34, 0) 0%,
		rgba(5, 27, 34, .10) 30%,
		rgba(5, 27, 34, .34) 52%,
		rgba(5, 27, 34, .70) 74%,
		rgba(5, 27, 34, .92) 89%,
		rgba(5, 27, 34, 1) 100%);
	pointer-events: none;
}
/* Start-aligned, not centred: a centred column reads as a campaign banner over the
   site's video band, and `text-align: start` resolves to right in Arabic and left in
   English on its own. The 46px below was clearance for a pill that hung off the hero's
   lower edge; this page never had one, so it is the 26px every sibling uses. */
.fxcu-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: start;
	padding-bottom: 26px;
}
/* These rules used to be written for .breadcrumb / .breadcrumb-item, which this module
   never emits: {Nav} is assigned in modules/contactus/index.php as two bare <a> tags
   with an <i> between them, so EVERY crumb rule here matched nothing. The links fell
   through to the theme's own a { color: rgba(var(--bs-link-color-rgb), ...) }, which is
   #28546D - a dark blue - printed on a dark teal hero. Unreadable, and invisible to a
   stylesheet that is aiming at the wrong selector.

   Colour cannot carry the hover here either: the hero is the brand teal, and
   .text-hover-primary resolves to #26667c against it. So, as in the footer bar and the
   library hero, the crumbs rest at 85% and go to full white with an underline. */
.fxcu-hero-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}
.fxcu-hero-crumbs a {
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: color .2s ease, opacity .2s ease;
}
/* Declared on :hover too - the theme's a:hover { transition: color .2s ease } is
   (0,1,1) and replaces the list the moment the pointer lands. */
.fxcu-hero-crumbs a:hover,
.fxcu-hero-crumbs a:focus-visible {
	color: #fff;
	/* !important is required, not stylistic: style.bundle.rtl.css carries
	   body a:active, body a:focus, body a:hover { text-decoration: none !important },
	   which kills the underline on every anchor site-wide. Only another important
	   declaration can beat it, and an opacity shift on its own is too quiet to read
	   as a hover. */
	text-decoration: underline !important;
	text-underline-offset: 3px;
	transition: color .2s ease, opacity .2s ease;
}
.fxcu-hero-crumbs a:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .9);
	outline-offset: 3px;
	border-radius: 4px;
}
/* The separator was #99A1B7 - style.bundle.rtl.css carries i[class] { color: ... } at
   (0,1,1), which beats inheritance, so the arrow did not follow the crumbs. */
.fxcu-hero-crumbs i {
	color: rgba(255, 255, 255, .55);
	font-size: 11px;
}
/* The last crumb is the page you are on, so it is a span, not a link. */
.fxcu-hero-crumbs .fxcu-crumb-current {
	color: rgba(255, 255, 255, .70);
	font-size: 13px;
	font-weight: 500;
}
.fxcu-hero-title {
	margin: 0;
	color: #fff;
	font-size: clamp(32px, 18px + 3.2vw, 56px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

/* --------------------------------------------------------------- the pill ---- */
/* 86px used to clear a search pill hanging off the hero. This page is a form, not a
   listing - there is nothing to search and nothing straddles the seam - so the top
   padding is the 40px the rest of the modules carry. */
.fxcu-band {
	position: relative;
	z-index: 2;
	background: var(--fxcu-mist);
	padding: 40px 0 56px;
}


/* ==============================================================================
   The form and the contact cards
   ============================================================================== */
.fxcu-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 24px;
	align-items: start;
}
.fxcu-card {
	border: 1px solid var(--fxcu-rule);
	border-radius: 14px;
	background: var(--bs-body-bg);
	/* No shadow, like every other card in this pass. */
	padding: 28px;
}
.fxcu-card + .fxcu-card {
	margin-top: 16px;
}
.fxcu-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	color: var(--fxcu-ink);
	font-size: 17px;
	font-weight: 700;
}
.fxcu-card-head i {
	/* A section icon is grey, not a status colour: this form has no state to report. */
	color: var(--fxcu-muted);
	font-size: 17px;
}
.fxcu-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}
.fxcu-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.fxcu-label {
	color: var(--fxcu-ink);
	font-size: 13.5px;
	font-weight: 600;
}
/* The asterisk marks what the SERVER will refuse, nothing else - the phone is
   optional and carries none. */
.fxcu-label.is-required::after {
	content: ' *';
	color: #B32020;
}
.fxcu-input,
.fxcu-textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--fxcu-rule);
	border-radius: 10px;
	background: var(--bs-body-bg);
	color: var(--fxcu-ink);
	font-size: 14px;
	font-family: inherit;
	transition: border-color .2s ease;
}
.fxcu-textarea {
	min-height: 150px;
	resize: vertical;
	line-height: 1.8;
}
.fxcu-input::placeholder,
.fxcu-textarea::placeholder {
	color: var(--fxcu-muted);
	opacity: .75;
}
.fxcu-input:focus,
.fxcu-textarea:focus {
	outline: none;
	border-color: var(--fxcu-teal);
	box-shadow: 0 0 0 3px rgba(var(--fxcu-primary-rgb), .14);
}
/* The captcha asks a sum, so its field is short and its numbers are tabular. */
.fxcu-captcha {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 16px;
	border: 1px solid var(--fxcu-rule);
	border-radius: 10px;
	background: rgba(var(--fxcu-primary-rgb), .05);
}
.fxcu-captcha-q {
	color: var(--fxcu-ink);
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	/* The sum reads left-to-right in both languages: it is arithmetic, not prose. */
	direction: ltr;
	unicode-bidi: isolate;
}
.fxcu-captcha .fxcu-input {
	width: 110px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.fxcu-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 32px;
	border: 0;
	border-radius: 999px;
	background: var(--fxcu-teal-deep);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease;
}
.fxcu-submit:hover:not(:disabled) {
	background: var(--fxcu-teal);
}
.fxcu-submit:disabled {
	opacity: .6;
	cursor: default;
}
.fxcu-actions {
	margin-top: 24px;
}

/* The contact details beside the form. */
.fxcu-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.fxcu-item + .fxcu-item {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--fxcu-rule);
}
.fxcu-item-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(var(--fxcu-primary-rgb), .10);
	color: var(--fxcu-teal);
}
.fxcu-item-icon i {
	font-size: 17px;
	color: inherit;
}
.fxcu-item-body {
	min-width: 0;
}
.fxcu-item-label {
	display: block;
	color: var(--fxcu-muted);
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 2px;
}
.fxcu-item-value {
	display: block;
	color: var(--fxcu-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	overflow-wrap: anywhere;
}
a.fxcu-item-value {
	text-decoration: none;
	/* The theme's --bs-link-color is ORANGE in a teal panel, and any <a> given no
	   colour of its own takes it. */
	color: var(--fxcu-ink);
	transition: color .2s ease;
}
a.fxcu-item-value:hover {
	color: var(--fxcu-teal);
	transition: color .2s ease;
}
/* A phone number and an email address read left-to-right in both languages. */
.fxcu-ltr {
	direction: ltr;
	unicode-bidi: isolate;
	/* RTL: inline-start is the RIGHT edge, which is where these should still begin. */
	text-align: start;
}

@media (max-width: 991.98px) {
	.fxcu-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	/* The off-canvas drawer sits outside the viewport; without this the page can be
	   scrolled sideways to reach it. */
	.wrapper {
		overflow-x: clip;
	}
}

@media (max-width: 575.98px) {
	.fxcu-card {
		padding: 20px;
	}
}

@keyframes fxcu-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
.fxcu-hero-title {
	animation: fxcu-rise .55s cubic-bezier(.22, .7, .3, 1) both;
}

/* This sheet had two media queries and neither touched the header, so the hero was the
   one part of the page that never responded at narrow widths. The title's clamp shrinks
   on its own; what it could not do is give back the vertical space. */
@media (max-width: 767.98px) {
	.fxcu-hero {
		padding-top: 6px;
	}
	.fxcu-hero-inner {
		padding-bottom: 20px;
	}
	.fxcu-band {
		padding-top: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Reduced motion means no MOVEMENT, not a dead page: the travel goes and the short
	   colour and opacity fades above are kept. */
	.fxcu-hero-title {
		animation: none;
	}
	.fxcu-hero-crumbs a {
		transition: none;
	}
}