/**
 * Coffee Trade — Advisory modal (handoff §7.8)
 * ----------------------------------------------------------------------------
 * Styles the shared native <dialog> rendered by inc/advisory-modal.php. Quiet
 * cream panel, espresso veil, thin uppercase title — the same voice as the rest
 * of the site. Focus-trapping, ESC and backdrop behaviour are handled natively
 * by <dialog> + header.js.
 */

dialog.ctc-modal {
	width: min(92vw, 520px);
	max-width: 92vw;
	max-height: 90vh;
	padding: 0;
	border: 0;
	border-radius: var(--ctc-radius-lg);
	background: var(--ctc-cream);
	color: var(--ctc-text);
	box-shadow: 0 32px 80px -32px rgba(39, 23, 14, 0.55);
	overflow: visible;
}

dialog.ctc-modal::backdrop {
	background: rgba(39, 23, 14, 0.55);
}

.ctc-modal__inner {
	position: relative;
	max-height: 90vh;
	overflow-y: auto;
	padding: clamp(1.75rem, 1rem + 3vw, 3rem);
}

.ctc-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 0;
	background: transparent;
	color: var(--ctc-espresso);
	border-radius: var(--ctc-radius);
	cursor: pointer;
	transition: color var(--ctc-transition), background-color var(--ctc-transition);
}

.ctc-modal__close:hover,
.ctc-modal__close:focus {
	color: var(--ctc-walnut);
	background: var(--ctc-sand);
}

.ctc-modal__head {
	margin-bottom: var(--ctc-space-5);
	padding-right: 2.5rem;
}

.ctc-modal__title {
	margin: 0 0 var(--ctc-space-3);
	font-family: var(--ctc-font-heading);
	font-weight: var(--ctc-weight-display);
	font-size: var(--ctc-text-title);
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ctc-espresso);
}

.ctc-modal__intro {
	margin: 0;
	color: var(--ctc-text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.ctc-modal__body {
	margin-bottom: var(--ctc-space-4);
}

/* Keep the embedded WPForms compact and full-width inside the dialog. */
.ctc-modal__body .wpforms-container {
	margin: 0;
}

.ctc-modal__body input[type="text"],
.ctc-modal__body input[type="email"],
.ctc-modal__body input[type="tel"],
.ctc-modal__body input[type="number"],
.ctc-modal__body select,
.ctc-modal__body textarea {
	width: 100%;
}

.ctc-modal__fallback {
	text-align: center;
	padding: var(--ctc-space-4) 0;
}

.ctc-modal__fallback p {
	margin: 0 0 var(--ctc-space-4);
	color: var(--ctc-text-muted);
}

.ctc-modal__phone {
	margin: var(--ctc-space-4) 0 0;
	padding-top: var(--ctc-space-4);
	border-top: var(--ctc-border-width) solid var(--ctc-hairline);
	font-size: 0.9rem;
	color: var(--ctc-text-muted);
}

.ctc-modal__phone a {
	color: var(--ctc-walnut);
	font-weight: var(--ctc-weight-ui);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Open animation (display can't transition; animate on [open]). */
dialog.ctc-modal[open] {
	animation: ctc-modal-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

dialog.ctc-modal[open]::backdrop {
	animation: ctc-backdrop-in 220ms ease;
}

@keyframes ctc-modal-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ctc-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	dialog.ctc-modal[open],
	dialog.ctc-modal[open]::backdrop {
		animation: none;
	}
}