/**
 * Route-aware CTA styles.
 *
 * Deliberately neutral. Phoenix brand colours, type and spacing are expected
 * to come from the theme by overriding these custom properties, so no brand
 * decision is baked in here.
 */

.pdsrac-cta {
	--pdsrac-cta-bg: #14213d;
	--pdsrac-cta-fg: #ffffff;
	--pdsrac-cta-accent: #f28c28;
	--pdsrac-cta-radius: 4px;
	--pdsrac-cta-gap: 0.75rem;
	--pdsrac-cta-shadow: 0 0 0 1px rgba(242, 140, 40, 0.42), 0 3px 14px rgba(242, 140, 40, 0.24), 0 8px 22px rgba(0, 0, 0, 0.22);
	--pdsrac-cta-offset: 1rem;
	/*
	 * Deliberately below a cookie or consent dialog. A call to action that
	 * cannot be closed must not cover a consent control.
	 */
	--pdsrac-cta-layer: 40;
}

.pdsrac-cta__button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--pdsrac-cta-radius);
	background: var(--pdsrac-cta-bg);
	color: var(--pdsrac-cta-fg);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	/* A modal-action CTA is a <button>, a link-action CTA is an <a>; this
	   keeps both looking identical regardless of element. */
	appearance: none;
}

.pdsrac-cta__button:hover,
.pdsrac-cta__button:focus {
	text-decoration: underline;
}

.pdsrac-cta__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pdsrac-cta__description {
	margin: 0 0 var(--pdsrac-cta-gap);
}

.pdsrac-cta--inline {
	margin: 1.5rem 0;
}

.pdsrac-cta--persistent {
	position: fixed;
	bottom: var(--pdsrac-cta-offset);
	z-index: var(--pdsrac-cta-layer);
	max-width: calc(100vw - (var(--pdsrac-cta-offset) * 2));
}

.pdsrac-cta--persistent.pdsrac-cta--right {
	right: var(--pdsrac-cta-offset);
	left: auto;
}

.pdsrac-cta--persistent.pdsrac-cta--left {
	left: var(--pdsrac-cta-offset);
	right: auto;
}

.pdsrac-cta--persistent .pdsrac-cta__inner {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem;
	border: 1px solid var(--pdsrac-cta-accent);
	border-radius: var(--pdsrac-cta-radius);
	background: var(--pdsrac-cta-bg);
	box-shadow: var(--pdsrac-cta-shadow);
}

.pdsrac-cta--persistent .pdsrac-cta__button {
	box-shadow: none;
}

.pdsrac-cta--persistent .pdsrac-cta__button:hover {
	background: #203454;
	color: var(--pdsrac-cta-fg);
	text-decoration: none;
	box-shadow: inset 0 0 0 1px rgba(242, 140, 40, 0.65);
}

.pdsrac-cta--persistent .pdsrac-cta__button:focus-visible {
	outline: 3px solid var(--pdsrac-cta-accent);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px rgba(242, 140, 40, 0.22);
}

/*
 * The persistent call to action keeps the same corner at every
 * width. Small screens only tighten the offset and allow the label to wrap
 * rather than push the button off-screen.
 */
@media (max-width: 600px) {
	.pdsrac-cta--persistent {
		--pdsrac-cta-offset: 0.75rem;
	}

	.pdsrac-cta--persistent .pdsrac-cta__button {
		padding: 0.7rem 1.1rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.pdsrac-cta--persistent {
		transition: opacity 150ms ease-in-out;
	}
}

/*
 * Modal dialog. Deliberately neutral, like the rest of this stylesheet:
 * colours, radius and spacing come from custom properties the theme can
 * override. --pdsrac-modal-layer sits above the persistent CTA's own layer
 * so an open dialog is never hidden behind it.
 */
.pdsrac-modal {
	--pdsrac-modal-bg: #ffffff;
	--pdsrac-modal-fg: #14213d;
	--pdsrac-modal-backdrop: rgba(15, 23, 32, 0.6);
	--pdsrac-modal-radius: 8px;
	--pdsrac-modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	--pdsrac-modal-layer: 100;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--pdsrac-modal-layer);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	overflow-y: auto;
}

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

.pdsrac-modal__backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--pdsrac-modal-backdrop);
}

.pdsrac-modal__dialog {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: min(560px, 100%);
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: 2rem 1.5rem 1.5rem;
	border-radius: var(--pdsrac-modal-radius);
	background: var(--pdsrac-modal-bg);
	color: var(--pdsrac-modal-fg);
	box-shadow: var(--pdsrac-modal-shadow);
}

.pdsrac-modal__dialog:focus {
	outline: none;
}

.pdsrac-modal__dialog:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.pdsrac-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	appearance: none;
}

.pdsrac-modal__close:hover,
.pdsrac-modal__close:focus {
	background: rgba(0, 0, 0, 0.08);
}

.pdsrac-modal__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pdsrac-modal__title {
	margin: 0 2rem 1rem 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

.pdsrac-modal__body {
	font-size: 0.95rem;
	line-height: 1.5;
}

.pdsrac-modal__body p {
	margin: 0 0 0.75rem;
}

.pdsrac-modal__body p:last-child {
	margin-bottom: 0;
}

.pdsrac-modal__body code {
	padding: 0.1em 0.35em;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.06);
	font-size: 0.9em;
}

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

@media (max-width: 480px) {
	.pdsrac-modal {
		padding: 0.5rem;
	}

	.pdsrac-modal__dialog {
		max-height: calc(100vh - 1rem);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.pdsrac-modal__dialog {
		animation: pdsrac-modal-in 150ms ease-out;
	}
}

@keyframes pdsrac-modal-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*
 * Lead forms (the modal's embedded form and the [pdsrac_lead_form]
 * shortcode's inline form). Styled for Phoenix Digital Systems: the accent
 * colour is Phoenix's own orange, not a neutral placeholder, since these
 * forms only ever appear on the Phoenix site rather than being themed per
 * installation like the CTA button above.
 */
.pdsrac-lead-form,
.pdsrac-lead-form-wrap {
	--pdsrac-form-accent: #f28c28;
	--pdsrac-form-ink: #17212b;
	--pdsrac-form-muted: #5f6b76;
	--pdsrac-form-line: #d9e1e8;
	--pdsrac-form-panel: #f4f7f9;
	--pdsrac-form-radius: 8px;
	--pdsrac-form-error: #b3261e;
	--pdsrac-form-success: #137333;
	color: var(--pdsrac-form-ink);
	font-size: 0.95rem;
}

/*
 * Compact layout: one field set, everywhere - enquiry type, name, an
 * email/phone pair, an optional message, then the submit action - laid out
 * with a single consistent gap instead of per-field margins.
 */
.pdsrac-lead-form {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.pdsrac-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem;
}

.pdsrac-field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.pdsrac-field label {
	font-weight: 600;
	font-size: 0.82rem;
	color: var(--pdsrac-form-ink);
}

.pdsrac-field input,
.pdsrac-field select,
.pdsrac-field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--pdsrac-form-line);
	border-radius: var(--pdsrac-form-radius);
	background: #fff;
	color: var(--pdsrac-form-ink);
	font: inherit;
	font-size: 0.95rem;
	transition: border-color 120ms ease-in-out, box-shadow 120ms ease-in-out;
}

.pdsrac-field select {
	appearance: none;
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235f6b76' d='M4 6l4 4 4-4' stroke='%235f6b76' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 0.85rem;
}

.pdsrac-field textarea {
	min-height: 4.5rem;
	resize: vertical;
}

.pdsrac-field input:focus,
.pdsrac-field select:focus,
.pdsrac-field textarea:focus {
	outline: none;
	border-color: var(--pdsrac-form-accent);
	box-shadow: 0 0 0 3px rgba(242, 140, 40, 0.25);
}

.pdsrac-form-note {
	margin: 0;
	padding-top: 0.4rem;
	border-top: 1px solid var(--pdsrac-form-line);
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--pdsrac-form-muted);
}

.pdsrac-form-note a {
	color: var(--pdsrac-form-ink);
}

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

.pdsrac-form-actions {
	display: flex;
	justify-content: flex-end;
}

.pdsrac-form-actions .pdsrac-cta__button {
	background: var(--pdsrac-form-accent);
	color: #ffffff;
	padding: 0.65rem 1.75rem;
}

.pdsrac-form-actions .pdsrac-cta__button:hover,
.pdsrac-form-actions .pdsrac-cta__button:focus {
	background: #c96312;
	text-decoration: none;
}

.pdsrac-form-actions .pdsrac-cta__button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.pdsrac-notice {
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--pdsrac-form-radius);
	border: 1px solid var(--pdsrac-form-line);
	background: var(--pdsrac-form-panel);
	font-size: 0.88rem;
}

.pdsrac-notice p {
	margin: 0 0 0.4rem;
}

.pdsrac-notice p:last-child {
	margin-bottom: 0;
}

.pdsrac-notice--success {
	border-color: var(--pdsrac-form-success);
	background: rgba(19, 115, 51, 0.08);
	color: var(--pdsrac-form-success);
}

.pdsrac-notice--error {
	border-color: var(--pdsrac-form-error);
	background: rgba(179, 38, 30, 0.08);
	color: var(--pdsrac-form-error);
}

/*
 * The shortcode's standalone form gets its own compact card (the modal
 * dialog already provides equivalent chrome around the same field markup).
 */
.pdsrac-lead-form-wrap {
	margin: 1.5rem 0;
	max-width: 480px;
	padding: 1.5rem;
	border: 1px solid var(--pdsrac-form-line);
	border-radius: calc(var(--pdsrac-form-radius) + 4px);
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(23, 33, 43, 0.06);
}

@media (max-width: 480px) {
	.pdsrac-field-grid {
		grid-template-columns: 1fr;
	}

	.pdsrac-lead-form-wrap {
		padding: 1.15rem;
	}

	.pdsrac-form-actions {
		justify-content: stretch;
	}

	.pdsrac-form-actions .pdsrac-cta__button {
		width: 100%;
		text-align: center;
	}
}