/**
 * ICpEP-Qatar Contact page — a single centered column
 * (template-parts/contact-form.php): a direct-channels row (copy-to-
 * clipboard email + icon-only Facebook/LinkedIn/WhatsApp) inside the
 * message form card, under its heading. Page-header band reuses
 * css/page.css; buttons/section rhythm/tokens reuse css/components.css.
 * Enqueued only for the Contact page (see inc/scripts.php).
 *
 * The form card is a solid white surface — `border: 1px solid #E2E8F0`
 * (== --icpep-card-border, already the sitewide card-border token),
 * `border-radius: 18px`, a soft shadow, `padding: 2.5rem`.
 */

.icpep-contact {
	position: relative;
	overflow: hidden;
	background-color: #ffffff;
}

/* ==========================================================
   Compact page-header band — contact page only. The quick-bar
   (email/social/WhatsApp) now lives inside the form card itself
   (see .icpep-contact__channels below), so the header above it
   doesn't need to carry the same tall clearance every other
   page's header uses.
   ========================================================== */

.icpep-page-header--contact {
	padding-top: calc( var( --icpep-header-height, 76px ) + clamp( 1.5rem, 4vw, 2.5rem ) );
	padding-bottom: clamp( 1.5rem, 4vw, 2rem );
}

.icpep-page-header--contact .icpep-page-header__eyebrow {
	margin-bottom: 0.85rem;
}

.icpep-page-header--contact .icpep-page-header__subtitle {
	margin-top: 0.75rem;
}

.icpep-contact__mesh {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient( circle at 15% 20%, rgba( 0, 163, 224, 0.12 ) 0%, rgba( 0, 163, 224, 0 ) 45% ),
		radial-gradient( circle at 85% 80%, rgba( 138, 21, 56, 0.08 ) 0%, rgba( 138, 21, 56, 0 ) 45% ),
		radial-gradient( circle at 1.5px 1.5px, rgba( 11, 19, 43, 0.06 ) 1.5px, transparent 0 );
	background-size: auto, auto, 28px 28px;
	background-repeat: no-repeat, no-repeat, repeat;
}

.icpep-contact__inner {
	position: relative;
	z-index: 1;
	max-width: 680px;
	margin-inline: auto;
}

/* ==========================================================
   Direct-channels row — inside the card, under the heading
   ========================================================== */

.icpep-contact__channels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: clamp( 1.75rem, 4vw, 2.5rem );
	padding-bottom: clamp( 1.75rem, 4vw, 2.5rem );
	border-bottom: 1px solid var( --icpep-card-border );
}

/* Tag+class (button.icpep-contact__copy-email, not just the class alone)
   for the same reason documented on .icpep-btn.icpep-contact__submit
   below: Hello Elementor's reset.css targets `[type="button"], button`
   at equal (0,1,0) specificity to a single class selector and can win
   the tie on load order. (0,1,1) wins unconditionally.
 *
 * The :hover/:focus pair below is a second, separate fight with that
 * same reset.css: it also has `button:hover, button:focus {
 * background-color: #c36; color: #fff; }` at (0,1,1) — a plain mouse
 * click focuses a button WITHOUT matching :focus-visible, so a
 * :focus-visible-only override (as used elsewhere in this file) isn't
 * enough here; both :hover and plain :focus need this class's own
 * background-color/color restated explicitly, per-property, or the
 * reset's declaration wins on the properties this rule doesn't set. */
button.icpep-contact__copy-email {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 44px;
	padding: 0.55em 1.1em;
	border: 1px solid var( --icpep-card-border );
	border-radius: 999px;
	background-color: #ffffff;
	color: inherit;
	box-shadow: var( --icpep-shadow-sm );
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

button.icpep-contact__copy-email:hover,
button.icpep-contact__copy-email:focus {
	background-color: #ffffff;
	color: inherit;
	border-color: rgba( 0, 163, 224, 0.4 );
}

button.icpep-contact__copy-email:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 2px;
}

.icpep-contact__copy-email-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: var( --icpep-cyan-deep );
}

.icpep-contact__copy-email-address {
	font-weight: 600;
	font-size: var( --icpep-fs-sm );
	color: var( --e-global-color-primary, #0b132b );
}

.icpep-contact__copy-email-divider {
	width: 1px;
	height: 16px;
	background-color: var( --icpep-card-border );
	flex: 0 0 auto;
}

.icpep-contact__copy-email-action {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
	font-size: var( --icpep-fs-xs );
	color: #64748b;
}

.icpep-contact__copy-email-glyph {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.icpep-contact__copy-email-glyph--check {
	display: none;
}

/* Copied state — icon swaps to a checkmark, label swaps to "Copied!",
   both driven by assets/js/contact-page.js toggling this class for 2s. */
.icpep-contact__copy-email.is-copied {
	border-color: rgba( 22, 163, 74, 0.35 );
}

.icpep-contact__copy-email.is-copied .icpep-contact__copy-email-action {
	color: #16a34a;
}

.icpep-contact__copy-email.is-copied .icpep-contact__copy-email-glyph--copy {
	display: none;
}

.icpep-contact__copy-email.is-copied .icpep-contact__copy-email-glyph--check {
	display: inline-flex;
}

.icpep-contact__channels-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Icon-only — Facebook/LinkedIn/WhatsApp. aria-label carries the
   destination for assistive tech since there's no visible text label. */
.icpep-contact__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var( --icpep-card-border );
	background-color: #ffffff;
	box-shadow: var( --icpep-shadow-sm );
	color: var( --e-global-color-primary, #0b132b );
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.icpep-contact__social-icon svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.icpep-contact__social-icon:hover,
.icpep-contact__social-icon:focus-visible {
	background-color: var( --icpep-cyan-deep );
	border-color: var( --icpep-cyan-deep );
	color: #ffffff;
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-contact__copy-email,
	.icpep-contact__social-icon {
		transition: none;
	}
}

/* ==========================================================
   Form card
   ========================================================== */

.icpep-contact__card {
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	box-shadow: var( --icpep-shadow-lg );
	padding: 2.5rem;
}

@media ( max-width: 560px ) {
	.icpep-contact__card {
		padding: clamp( 1.5rem, 6vw, 2rem );
	}
}

.icpep-contact__header {
	text-align: center;
	display: block;
	margin-bottom: 1.75rem;
}

.icpep-contact__header .icpep-section__subheading {
	max-width: none;
	margin-inline: auto;
}

/* ==========================================================
   Notices
   ========================================================== */

.icpep-contact__notice {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
	padding: 0.85em 1.1em;
	border-radius: 12px;
	font-size: var( --icpep-fs-sm );
	font-weight: 600;
}

.icpep-contact__notice-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 0.1em;
}

.icpep-contact__notice--success {
	background-color: rgba( 0, 163, 224, 0.1 );
	color: var( --icpep-cyan-deep );
	border: 1px solid rgba( 0, 163, 224, 0.25 );
}

.icpep-contact__notice--error {
	background-color: rgba( 138, 21, 56, 0.08 );
	color: var( --e-global-color-accent, #8a1538 );
	border: 1px solid rgba( 138, 21, 56, 0.25 );
}

/* ==========================================================
   Form
   ========================================================== */

.icpep-contact__form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.icpep-contact__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

@media ( max-width: 560px ) {
	.icpep-contact__row {
		grid-template-columns: 1fr;
	}
}

.icpep-contact__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.icpep-contact__field label {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-sm );
	color: var( --e-global-color-primary, #0b132b );
}

/* input[type="text"|"email"], not the bare `input` type selector — Hello
   Elementor's reset.css targets `input[type=text], input[type=email], …`
   at (0,1,1), tied with a bare `.icpep-contact__field input` on the same
   specificity; the tie previously fell to load order and reset.css won,
   leaving these two fields visibly less rounded than the select/textarea
   below (whose reset.css counterparts are bare `select`/`textarea` at
   (0,0,1) and always lose regardless). Naming the type here raises this
   rule to (0,2,1), beating reset unconditionally. */
.icpep-contact__field input[type="text"],
.icpep-contact__field input[type="email"],
.icpep-contact__field select,
.icpep-contact__field textarea {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-base );
	color: var( --e-global-color-text, #1f2937 );
	background-color: #ffffff;
	border: 1.5px solid var( --icpep-card-border );
	border-radius: 12px;
	padding: 0.75em 0.9em;
	min-height: 48px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.icpep-contact__field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.9em center;
	background-size: 16px;
	padding-right: 2.5em;
}

.icpep-contact__field textarea {
	min-height: auto;
	resize: vertical;
	line-height: 1.6;
}

.icpep-contact__field input[type="text"]:hover,
.icpep-contact__field input[type="email"]:hover,
.icpep-contact__field select:hover,
.icpep-contact__field textarea:hover {
	border-color: rgba( 0, 163, 224, 0.45 );
}

.icpep-contact__field input[type="text"]:focus-visible,
.icpep-contact__field input[type="email"]:focus-visible,
.icpep-contact__field select:focus-visible,
.icpep-contact__field textarea:focus-visible {
	outline: none;
	/* cyan-deep, not raw Secondary — with `outline: none`, this border is
	   the field's only focus indicator, so it needs the same 3:1 non-text
	   contrast a focus ring would (#00A3E0 only clears 2.87:1 on white). */
	border-color: var( --icpep-cyan-deep );
	box-shadow: 0 0 0 4px rgba( 0, 163, 224, 0.15 );
}

/* ---------- Cloudflare Turnstile widget ---------- */

.cf-turnstile {
	margin-top: 0.25rem;
}

/* Deliberately its own color treatment, not .icpep-btn--primary's
   sitewide cyan-base/cyan-deeper-hover — this button is Deep Navy by
   default with an Electric Cyan hover, the opposite direction.
 *
 * Double-classed (.icpep-btn.icpep-contact__submit, not just
 * .icpep-contact__submit) for the same reason documented on
 * .icpep-btn.icpep-btn--primary in css/components.css: Hello Elementor's
 * reset.css targets `[type="submit"], button` at equal (0,1,0)
 * specificity to a single class selector, which it can win on load-order
 * ties. The compound selector's (0,2,0) wins unconditionally. */
.icpep-btn.icpep-contact__submit {
	align-self: flex-start;
	margin-top: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background-color: var( --e-global-color-primary, #0b132b );
	color: #ffffff;
	border: 2px solid transparent;
	box-shadow: var( --icpep-shadow-md );
	transition: gap 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.icpep-btn.icpep-contact__submit:hover,
.icpep-btn.icpep-contact__submit:focus-visible {
	gap: 0.65rem;
	background-color: var( --icpep-cyan-deep );
	color: #ffffff;
	transform: translateY( -2px );
	box-shadow: var( --icpep-shadow-lg ), 0 12px 24px -6px rgba( 0, 163, 224, 0.4 );
}

.icpep-btn.icpep-contact__submit:active {
	transform: translateY( 0 ) scale( 0.98 );
	box-shadow: var( --icpep-shadow-sm );
}

@media ( max-width: 560px ) {
	.icpep-contact__submit {
		align-self: stretch;
		justify-content: center;
	}
}

/* Visually hidden, not display:none — a bot that fills every field it can
   find in the DOM (rather than only what a screen renders) still trips
   this, which display:none-based hiding doesn't reliably catch. */
.icpep-contact__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-contact__field input,
	.icpep-contact__field select,
	.icpep-contact__field textarea,
	.icpep-contact__submit {
		transition: none;
	}
}