/*
 * Jordan Festival — Contact.
 * A compact ivory opening (label with the red rule, the title, a short
 * introduction), then one sheet set over its lower edge: the navy contact
 * panel beside a generous form. The sheet is the Story Detail sheet's
 * material; the navy panel is the footer's.
 */

/* Display serif (SIL OFL, self-hosted), as on the other pages. */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/playfair-display-600-0000.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.ct {
	--ct-ivory: #FBF8F2;
	--ct-ivory-line: #EAE3D7;
	--ct-card: #FFFDF9;
	--ct-line-strong: #CDBFA9;
	--ct-error: #B5161C;
	--ct-ok: #1E6B35;
	--ct-pad: 64px;
	--ct-overlap: 88px;
}

/* Opening ------------------------------------------------------------ */
.ct-open {
	padding: 64px 0 calc(56px + var(--ct-overlap));
	background: var(--ct-ivory);
	border-bottom: 1px solid var(--ct-ivory-line);
}
.ct-open__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 32px;
	align-items: end;
}
.ct-open__head { grid-column: 1 / span 7; min-width: 0; }
.ct-kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--jf-navy);
}
.ct-rule { flex: none; width: 28px; height: 2px; background: var(--jf-red); }
.ct-open__title {
	margin-top: 20px;
	font-family: var(--jf-serif);
	font-size: clamp(44px, 4.6vw, 68px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--jf-navy);
	overflow-wrap: break-word;
	text-wrap: balance;
}
.ct-open__intro {
	grid-column: 8 / span 5;
	max-width: 34em;
	font-size: 18px;
	line-height: 1.7;
	color: var(--jf-ink-2);
	text-wrap: pretty;
}

/* Stage and sheet ------------------------------------------------------ */
.ct-stage { padding-bottom: 104px; }
.ct-sheet {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	margin-top: calc(-1 * var(--ct-overlap));
	background: var(--ct-card);
	border: 1px solid var(--ct-ivory-line);
	box-shadow: 0 1px 2px rgba(13, 30, 65, .04), 0 24px 56px -32px rgba(13, 30, 65, .22);
}

/* Contact panel -------------------------------------------------------- */
.ct-panel {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 56px 48px 72px;
	background: var(--jf-navy);
	color: #fff;
}
/* Keffiyeh selvedge along the panel's foot. */
.ct-panel::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 16px;
	background: url("../images/brand/keffiyeh-selvedge.svg") repeat-x 0 0 / 16px 16px;
}
.ct-panel__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px; }
.ct-panel__title {
	font-family: var(--jf-serif);
	font-size: clamp(28px, 2.4vw, 34px);
	font-weight: 600;
	line-height: 1.15;
	color: #fff;
}
.ct-panel__emblem {
	position: absolute;
	inset-inline-end: -88px;
	bottom: -56px;
	width: 400px;
	height: auto;
	opacity: .075;
	pointer-events: none;
	user-select: none;
}

.ct-details { display: grid; gap: 28px; }
.ct-detail { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.ct-detail__icon {
	flex: none;
	box-sizing: content-box;
	width: 22px;
	height: 22px;
	padding: 11px;
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
}
.ct-detail__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 3px; }
.ct-detail__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--jf-stone);
}
.ct-detail__value {
	font-size: 18px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.5;
	color: #fff;
	overflow-wrap: anywhere;
	white-space: normal;
}
a.ct-detail__value {
	align-self: flex-start;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .35);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	transition: text-decoration-color .2s, color .2s;
}
a.ct-detail__value:hover { color: #fff; text-decoration-color: var(--jf-red); }
.ct-panel :focus-visible { outline-color: #fff; }

.ct-social { display: grid; gap: 14px; }
.ct-social__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--jf-stone);
}
.ct-social__list { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
	transition: background-color .2s, border-color .2s, color .2s;
}
.ct-social__link:hover { background: var(--jf-red); border-color: var(--jf-red); color: #fff; }

/* Form area ------------------------------------------------------------ */
.ct-form-area {
	position: relative;
	min-width: 0;
	padding: 56px var(--ct-pad) 64px;
	scroll-margin-top: calc(var(--jf-header-h) + 24px);
}
/* The sheet's red rule (as on Story Detail). */
.ct-form-area::before {
	content: "";
	position: absolute;
	top: -1px;
	inset-inline-start: var(--ct-pad);
	width: 56px;
	height: 3px;
	background: var(--jf-red);
}
.ct-form-area__title {
	font-family: var(--jf-serif);
	font-size: clamp(28px, 2.4vw, 34px);
	font-weight: 600;
	line-height: 1.15;
	color: var(--jf-navy);
}
.ct-form-area__note { margin-top: 10px; font-size: 15px; color: var(--jf-muted); }

/* Result / summary message: only takes space when it has something to say. */
.ct-status { display: flex; align-items: flex-start; gap: 12px; }
.ct-status__icon { display: none; flex: none; margin-top: 1px; }
.ct-status__text { font-size: 16px; line-height: 1.6; }
.ct-status.is-success,
.ct-status.is-error {
	margin-top: 28px;
	padding: 16px 20px;
	border: 1px solid;
	border-inline-start-width: 4px;
}
.ct-status.is-success { border-color: #B9D8C2; border-inline-start-color: var(--ct-ok); background: #F1F8F3; color: #174F28; }
.ct-status.is-error { border-color: #F0C3C5; border-inline-start-color: var(--ct-error); background: #FDF2F2; color: #8A1015; }
.ct-status.is-success .ct-status__icon--success,
.ct-status.is-error .ct-status__icon--error { display: block; }
.ct-status.is-success .ct-status__text,
.ct-status.is-error .ct-status__text { font-weight: 600; }

.ct-form { margin-top: 32px; }
.ct-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 24px;
}
.ct-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ct-field--subject,
.ct-field--message { grid-column: 1 / -1; }
.ct-field__label { font-size: 15px; font-weight: 700; color: var(--jf-navy); }
.ct-field__input {
	width: 100%;
	min-height: 56px;
	padding: 14px 18px;
	border: 1px solid var(--ct-line-strong);
	border-radius: 0;
	background: #fff;
	font: inherit;
	font-size: 17px;
	line-height: 1.5;
	color: var(--jf-navy);
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none;
	appearance: none;
}
.ct-field__input--area { min-height: 196px; resize: vertical; }
.ct-field__input:hover { border-color: var(--jf-muted); }
.ct-field__input:focus { outline: none; }
.ct-field__input:focus-visible,
.ct-field__input:focus {
	border-color: var(--jf-navy);
	box-shadow: 0 0 0 1px var(--jf-navy), 0 0 0 5px rgba(13, 30, 65, .14);
}
.ct-field.is-invalid .ct-field__input {
	border-color: var(--ct-error);
	box-shadow: inset 4px 0 0 var(--ct-error);
}
[dir="rtl"] .ct-field.is-invalid .ct-field__input { box-shadow: inset -4px 0 0 var(--ct-error); }
.ct-field.is-invalid .ct-field__input:focus { box-shadow: 0 0 0 1px var(--ct-error), 0 0 0 5px rgba(181, 22, 28, .16); }
.ct-field__error {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ct-error);
}
.ct-field__error[hidden] { display: none; }
.ct-field__error svg { flex: none; margin-top: 2px; }

.ct-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
	margin-top: 32px;
}
.ct-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 58px;
	padding: 0 34px;
	border: 0;
	background: var(--jf-red);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .03em;
	cursor: pointer;
	transition: background-color .2s;
}
.ct-submit:hover { background: var(--jf-red-dark); }
.ct-submit:focus-visible { outline: 2px solid var(--jf-navy); outline-offset: 3px; }
.ct-submit__arrow { transition: transform .2s ease; }
.ct-submit:hover .ct-submit__arrow { transform: translateX(3px); }
[dir="rtl"] .ct-submit:hover .ct-submit__arrow { transform: scaleX(-1) translateX(3px); }
.ct-submit__busy {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ct-spin .8s linear infinite;
}
.ct-form.is-sending .ct-submit { cursor: progress; background: var(--jf-red-dark); }
.ct-form.is-sending .ct-submit__busy { display: inline-block; }
.ct-form.is-sending .ct-submit__arrow { display: none; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.ct-submit__busy { animation-duration: 2.4s; }
	.ct-submit__arrow { transition: none; }
}

.ct-privacy {
	flex: 1 1 260px;
	max-width: 44em;
	font-size: 14px;
	line-height: 1.6;
	color: var(--jf-muted);
}
.ct-privacy a {
	color: var(--jf-navy);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: normal;
}
.ct-privacy a:hover { color: var(--jf-red); }

/* Arabic: Tajawal, no tracking or capitals, more line height. */
[dir="rtl"] .ct-kicker { font-size: 16px; }
[dir="rtl"] .ct-open__title,
[dir="rtl"] .ct-panel__title,
[dir="rtl"] .ct-form-area__title { font-family: var(--jf-arabic); font-weight: 700; letter-spacing: 0; }
[dir="rtl"] .ct-open__title { font-size: clamp(42px, 4.4vw, 64px); line-height: 1.3; }
[dir="rtl"] .ct-open__intro { font-size: 19px; line-height: 1.9; }
[dir="rtl"] .ct-panel__title,
[dir="rtl"] .ct-form-area__title { font-size: clamp(28px, 2.4vw, 32px); line-height: 1.45; }
[dir="rtl"] .ct-detail__label,
[dir="rtl"] .ct-social__label { font-size: 14px; }
[dir="rtl"] .ct-field__label { font-size: 16px; }
[dir="rtl"] .ct-form-area__note,
[dir="rtl"] .ct-privacy { font-size: 15px; line-height: 1.8; }
[dir="rtl"] .ct-status__text { font-size: 17px; }
[dir="rtl"] .ct-field__error { font-size: 16px; }
[dir="rtl"] .ct-submit { font-size: 17px; }

/* Responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
	.ct { --ct-pad: 48px; }
	.ct-panel { padding-inline: 40px; }
}

@media (max-width: 980px) {
	.ct { --ct-pad: 40px; --ct-overlap: 64px; }
	.ct-open { padding-top: 48px; }
	.ct-open__head { grid-column: 1 / -1; }
	.ct-open__intro { grid-column: 1 / span 10; margin-top: 20px; }
	.ct-stage { padding-bottom: 80px; }

	/* Stacked: panel on top (compact), the form below. */
	.ct-sheet { grid-template-columns: minmax(0, 1fr); }
	.ct-panel { padding: 40px var(--ct-pad) 56px; }
	.ct-panel__inner { gap: 28px; }
	.ct-details { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 32px; }
	.ct-panel__emblem { width: 220px; bottom: -48px; inset-inline-end: -40px; }
	.ct-form-area { padding: 48px var(--ct-pad) 56px; }
	.ct-form-area::before { display: none; }
}

@media (max-width: 640px) {
	.ct { --ct-pad: var(--jf-gutter); --ct-overlap: 0px; }
	.ct-open { padding: 40px 0 40px; }
	.ct-open__grid { grid-template-columns: minmax(0, 1fr); }
	.ct-open__title { font-size: clamp(36px, 10vw, 44px); }
	[dir="rtl"] .ct-open__title { font-size: clamp(34px, 9.4vw, 42px); }
	.ct-open__intro { grid-column: 1 / -1; font-size: 17px; }
	[dir="rtl"] .ct-open__intro { font-size: 18px; }
	.ct-stage { padding-bottom: 56px; }

	/* Full-bleed on phones, as Story Detail: no frame. */
	.ct-sheet {
		margin-inline: calc(-1 * var(--jf-gutter));
		border: 0;
		box-shadow: none;
	}
	.ct-panel { padding: 36px var(--jf-gutter) 52px; }
	.ct-panel__emblem { display: none; }
	.ct-details { grid-template-columns: minmax(0, 1fr); }
	.ct-form-area { padding: 40px var(--jf-gutter) 8px; }
	.ct-form__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.ct-form__foot { flex-direction: column; align-items: stretch; }
	.ct-submit { width: 100%; }
	.ct-privacy { flex: none; }
}