/**
 * Griffon Enquiry Form - front-end styles.
 * Scoped entirely under .gef-* so nothing leaks into the theme.
 */

.gef-wrap,
.gef-card,
.gef-modal {
	--gef-navy: #0b1c39;
	--gef-navy-deep: #060f21;
	--gef-gold: #a2823c;
	--gef-gold-soft: #c9a961;
	--gef-border: #dfe3e8;
	--gef-text: #16202e;
	--gef-muted: #6b7480;
	--gef-error: #c62828;
	--gef-success: #1b7a45;
	--gef-radius: 10px;
	--gef-radius-lg: 22px;
}

/* ------------------------------------------------------------------ */
/* Card shell                                                          */
/* ------------------------------------------------------------------ */

.gef-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 10px;
	background: #fff;
	border-radius: var(--gef-radius-lg);
	box-shadow: 0 26px 60px rgba( 11, 28, 57, 0.16 );
	font-size: 15px;
	line-height: 1.5;
	color: var(--gef-text);
}

.gef-card *,
.gef-card *::before,
.gef-card *::after {
	box-sizing: border-box;
}

.gef-card--solo {
	grid-template-columns: 1fr;
	max-width: 560px;
}

.gef-card__form {
	padding: 24px 26px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

/* Responsive rules for the card live at the end of this file, after the panel
   is defined, so a later display:flex cannot win on equal specificity. */

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

.gef-form__title {
	margin: 0 0 5px;
	color: var(--gef-text);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.gef-form__intro {
	margin: 0 0 15px;
	color: var(--gef-muted);
	font-size: 13.5px;
	line-height: 1.5;
	max-width: 42ch;
}

/* ------------------------------------------------------------------ */
/* Grid                                                                */
/* ------------------------------------------------------------------ */

.gef-section {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.gef-section__title {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 0 0 7px;
	border-bottom: 1px solid var(--gef-border);
	color: var(--gef-navy);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gef-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -6px;
}

.gef-col {
	padding: 0 6px 9px;
	min-width: 0;
}

.gef-col--full {
	flex: 0 0 100%;
	max-width: 100%;
}

.gef-col--half {
	flex: 0 0 50%;
	max-width: 50%;
}

/* ------------------------------------------------------------------ */
/* Labels and controls                                                 */
/* ------------------------------------------------------------------ */

.gef-label,
.gef-label--group {
	display: block;
	margin: 0 0 4px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--gef-text);
}

.gef-label--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.gef-req {
	color: var(--gef-error);
	margin-left: 2px;
}

.gef-input {
	display: block;
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--gef-border);
	border-radius: var(--gef-radius);
	background: #fff;
	color: var(--gef-text);
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.gef-input::placeholder {
	color: #a6adb6;
}

.gef-select {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7480' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 34px;
	cursor: pointer;
}

.gef-input:focus {
	outline: none;
	border-color: var(--gef-navy);
	box-shadow: 0 0 0 3px rgba( 11, 28, 57, 0.1 );
}

.gef-textarea {
	min-height: 88px;
	resize: vertical;
}

.gef-sublabel,
.gef-desc,
.gef-counter {
	display: block;
	margin-top: 3px;
	color: var(--gef-muted);
	font-size: 11.5px;
}

.gef-counter.is-over {
	color: var(--gef-error);
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Chips                                                               */
/* ------------------------------------------------------------------ */

.gef-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.gef-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	min-height: 26px;
	padding: 4px 10px 4px 8px;
	border: 1px solid var(--gef-border);
	border-radius: 7px;
	background: #fff;
	color: #3b4654;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.gef-chip:hover {
	border-color: #9aa6b6;
	background: #fafbfd;
}

/* The native control is hidden but still focusable and still the thing that
   gets submitted. The visible box below is drawn on the label's span. */

.gef-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.gef-chip span {
	display: inline-flex;
	align-items: center;
}

.gef-chip span::before {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	margin-right: 7px;
	border: 1.5px solid #c3c9d1;
	border-radius: 4px;
	background: #fff no-repeat center center;
	background-size: 10px 10px;
	transition: background-color 0.14s ease, border-color 0.14s ease;
}

.gef-chip:hover span::before {
	border-color: #9aa6b6;
}

/* Weight and padding deliberately stay identical to the unselected state.
   Bolding a selected chip changes its width, which reflows every chip after
   it and makes the whole group jump on each click. */

.gef-chip.is-selected {
	background: #eef3fb;
	border-color: var(--gef-navy);
	color: var(--gef-navy);
}

.gef-chip.is-selected span::before {
	background-color: var(--gef-navy);
	border-color: var(--gef-navy);
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.4l3.4 3.4L13 5.2'/%3E%3C/svg%3E" );
}

.gef-chip input:focus-visible + span::before {
	outline: 2px solid var(--gef-gold);
	outline-offset: 2px;
}

/* Plain checkbox list, kept for any field declared as "checkbox" */

.gef-checks:not( .gef-chips ) {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 7px 16px;
}

.gef-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

.gef-check input {
	margin: 3px 0 0;
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	accent-color: var(--gef-navy);
}

/* ------------------------------------------------------------------ */
/* Standing note                                                       */
/* ------------------------------------------------------------------ */

.gef-note {
	margin: 0;
	padding-left: 10px;
	border-left: 2px solid var( --gef-gold );
	color: var( --gef-muted );
	font-size: 12px;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Qualifying notice                                                   */
/* ------------------------------------------------------------------ */

.gef-qualify {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid #e6c877;
	border-left: 3px solid var( --gef-gold );
	border-radius: 8px;
	background: #fdf8ec;
	color: #6b5320;
	font-size: 12.5px;
	line-height: 1.5;
}

.gef-qualify::before {
	content: "!";
	flex: 0 0 16px;
	height: 16px;
	margin-top: 1px;
	border-radius: 50%;
	background: var( --gef-gold );
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* The whole grid row is removed while the notice is hidden, so it costs no
   height and cannot open a gap between the fields above and below it. */
.gef-qualify-row[hidden] {
	display: none;
}

.gef-submit.is-blocked {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* ------------------------------------------------------------------ */
/* Errors and notices                                                  */
/* ------------------------------------------------------------------ */

.gef-error {
	display: block;
	margin-top: 5px;
	color: var(--gef-error);
	font-size: 12px;
	line-height: 1.4;
}

.gef-error:empty {
	display: none;
}

.gef-col.is-invalid .gef-input {
	border-color: var(--gef-error);
}

.gef-col.is-invalid .gef-chip {
	border-color: rgba( 198, 40, 40, 0.45 );
}

.gef-form__notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-left: 3px solid;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
}

.gef-form__notice.is-error {
	border-color: var(--gef-error);
	background: #fdecea;
	color: #8c1d18;
}

.gef-form__notice.is-success {
	border-color: var(--gef-success);
	background: #e8f5ed;
	color: #14532d;
}

/* ------------------------------------------------------------------ */
/* Honeypot                                                            */
/* ------------------------------------------------------------------ */

.gef-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

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

.gef-form__actions {
	padding-top: 4px;
}

.gef-submit {
	display: block;
	width: 100%;
	padding: 11px 24px;
	border: 0;
	border-radius: var(--gef-radius);
	background: linear-gradient( 180deg, #1b3055 0%, var(--gef-navy) 45%, var(--gef-navy-deep) 100% );
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba( 11, 28, 57, 0.22 );
	transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.gef-submit:hover {
	box-shadow: 0 9px 22px rgba( 11, 28, 57, 0.3 );
	transform: translateY( -1px );
}

.gef-submit:active {
	transform: none;
}

.gef-submit:disabled {
	opacity: 0.65;
	cursor: progress;
	transform: none;
}

.gef-open-btn {
	display: inline-block;
	padding: 13px 30px;
	border: 0;
	border-radius: var(--gef-radius);
	background: var(--gef-navy);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.gef-open-btn:hover {
	background: var(--gef-gold);
}

.gef-submit:focus-visible,
.gef-open-btn:focus-visible {
	outline: 3px solid var(--gef-gold);
	outline-offset: 2px;
}

.gef-form__legal {
	margin: 10px 0 0;
	color: var(--gef-muted);
	font-size: 11px;
	line-height: 1.5;
}

.gef-form__legal a {
	color: var(--gef-muted);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Right panel                                                         */
/* ------------------------------------------------------------------ */

.gef-card__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 380px;
	padding: 22px;
	border-radius: 16px;
	overflow: hidden;
	background-color: var(--gef-navy-deep);
	background-size: cover;
	background-position: center;
	color: #fff;
}

/* Fallback texture when no image is set, so the panel never looks broken. */

.gef-card__panel--plain::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient( 95% 62% at 74% 14%, rgba( 201, 169, 97, 0.55 ) 0%, rgba( 201, 169, 97, 0 ) 62% ),
		radial-gradient( 78% 55% at 16% 44%, rgba( 58, 106, 184, 0.62 ) 0%, rgba( 58, 106, 184, 0 ) 66% ),
		radial-gradient( 110% 70% at 88% 96%, rgba( 12, 33, 68, 0.9 ) 0%, rgba( 12, 33, 68, 0 ) 60% ),
		linear-gradient( 158deg, #1a3a6b 0%, #0e2145 60%, #04091a 100% );
	z-index: 0;
}

/* With the generated gradient the veil only needs to darken the bottom third,
   enough for the wordmark and arrows to stay readable over any photograph. */

.gef-card__panel--plain .gef-panel__veil {
	background: linear-gradient( 180deg, rgba( 4, 9, 26, 0 ) 0%, rgba( 4, 9, 26, 0.15 ) 46%, rgba( 4, 9, 26, 0.82 ) 100% );
}

.gef-panel__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( 180deg, rgba( 6, 15, 33, 0.55 ) 0%, rgba( 6, 15, 33, 0.15 ) 38%, rgba( 6, 15, 33, 0.88 ) 100% );
	pointer-events: none;
}

.gef-panel__wordmark {
	position: relative;
	z-index: 2;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}

.gef-panel__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.gef-panel__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.gef-panel__slide.is-active {
	opacity: 1;
}

.gef-panel__nav {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: auto;
}

.gef-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	border-radius: 9px;
	background: rgba( 255, 255, 255, 0.08 );
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.gef-nav-btn:hover {
	background: rgba( 255, 255, 255, 0.2 );
	border-color: rgba( 255, 255, 255, 0.4 );
}

.gef-nav-btn:focus-visible {
	outline: 2px solid var(--gef-gold);
	outline-offset: 2px;
}

.gef-nav-btn svg {
	width: 17px;
	height: 17px;
	display: block;
}

@media ( prefers-reduced-motion: reduce ) {
	.gef-panel__slide,
	.gef-submit {
		animation: none;
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Modal                                                               */
/* ------------------------------------------------------------------ */

.gef-modal[hidden] {
	display: none;
}

/* The popup has to sit above everything else a site keeps on top: a sticky
   header, a chat button, a cookie bar. Those commonly carry a z-index in the
   millions, so the popup takes a place near the top of the range. */

.gef-modal {
	position: fixed;
	inset: 0;
	z-index: 1999999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 14px;
	overflow-y: auto;
}

.gef-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 6, 15, 33, 0.66 );
	-webkit-backdrop-filter: blur( 3px );
	backdrop-filter: blur( 3px );
}

.gef-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1000px;
	margin: auto;
	animation: gef-pop 0.2s ease-out;
}

/* The close button is pinned to the dialog, so the dialog has to be exactly as
   wide as the card inside it. Around a form-only card, which is 560px wide, a
   1000px dialog leaves the button floating well clear of the corner it belongs
   to. The same applies below 900px, where every card narrows to 560px: see the
   responsive rules at the end of this file. */

.gef-modal--solo .gef-modal__dialog {
	max-width: 560px;
}

/* On a phone 100vh is the height with the browser's bars tucked away, which
   is taller than what is on screen while they are showing. Where the browser
   knows the dvh unit, the card is measured against what is really visible, so
   the Send button is not left underneath the toolbar. */

.gef-modal .gef-card {
	max-height: calc( 100vh - 32px );
	max-height: calc( 100dvh - 32px );
	overflow-y: auto;
}

.gef-modal .gef-card__panel {
	min-height: 100%;
}

@keyframes gef-pop {
	from {
		opacity: 0;
		transform: translateY( 14px ) scale( 0.985 );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.gef-modal__dialog {
		animation: none;
	}
}

.gef-modal__close {
	position: absolute;
	top: -12px;
	right: -12px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gef-navy);
	color: #fff;
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.3 );
}

.gef-modal__close:hover {
	background: var(--gef-gold);
}

.gef-modal__close:focus-visible {
	outline: 3px solid var(--gef-gold);
	outline-offset: 2px;
}

body.gef-modal-open {
	overflow: hidden;
}

/* Anything given the class that opens the popup reads as something to press,
   whatever kind of element it is. */

.gef-open {
	cursor: pointer;
}

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

/* Below 900px the card drops to one column and the panel is dropped
   entirely. Stacking it under the form would double the height of the
   popup on a phone, which is the opposite of what a popup needs. */

@media ( max-width: 900px ) {
	.gef-card {
		grid-template-columns: 1fr;
		max-width: 560px;
	}

	.gef-card__panel {
		display: none;
	}

	/* Kept in step with the card, so the close button stays on its corner. */
	.gef-modal__dialog {
		max-width: 560px;
	}
}

@media ( max-width: 560px ) {
	.gef-card {
		padding: 6px;
		border-radius: 16px;
	}

	.gef-card__form {
		padding: 18px 15px 15px;
	}

	.gef-form__title {
		font-size: 20px;
	}

	.gef-form__intro {
		margin-bottom: 11px;
		font-size: 13px;
	}

	.gef-col {
		padding-bottom: 7px;
	}

	.gef-chips {
		gap: 4px;
	}

	.gef-chip {
		padding: 4px 8px 4px 7px;
	}

	.gef-form__legal {
		margin-top: 7px;
		font-size: 10.5px;
	}

	.gef-submit {
		padding: 10px 20px;
	}

	.gef-chip {
		min-height: 25px;
	}

	.gef-modal {
		padding: 16px 10px;
	}

	.gef-modal__close {
		top: 4px;
		right: 4px;
	}

	.gef-checks:not( .gef-chips ) {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 340px ) {
	.gef-col--half {
		flex: 0 0 100%;
		max-width: 100%;
	}
}