/*
 * JasjeDasje 2026 - supplemental styles.
 * Only what theme.json / block supports cannot express. Loaded on the front end
 * and in the block editor (add_editor_style).
 */

/* Fonts (also enqueued from Google in functions.php; keep the stacks in sync with theme.json). */
body,
.editor-styles-wrapper {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── Header ──────────────────────────────────────────── */
.jd-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(140%) blur(6px);
}

.jd-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
	transition: color 160ms ease;
}

.jd-nav .wp-block-navigation-item__content:hover,
.jd-nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold);
}

.jd-topbar a {
	transition: color 160ms ease;
}

/* ── Hero ────────────────────────────────────────────── */
.jd-goldline {
	width: 92px;
	min-height: 3px;
	height: 3px;
	background: var(--wp--preset--color--gold);
}

.jd-hero-img img {
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: contain;
	filter: drop-shadow(0 40px 70px rgba(8, 21, 44, 0.22));
}

.jd-quote-card {
	position: relative;
	z-index: 3;
	margin-top: 1rem;
	box-shadow: 0 24px 70px rgba(8, 21, 44, 0.13);
}

/* ── Cards (benefits / showcase) ─────────────────────── */
.jd-card {
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 18px 50px rgba(8, 21, 44, 0.08);
	height: 100%;
}

.jd-tie-card {
	overflow: hidden;
	transition: transform 300ms ease, box-shadow 300ms ease;
}

.jd-tie-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 60px rgba(8, 21, 44, 0.15);
}

.jd-tie-img,
.jd-tie-img img {
	margin: 0;
	width: 100%;
	display: block;
}

/* ── Client logos ───────────────────────────────────── */
.jd-logo-row {
	row-gap: 2.5rem;
}

.jd-logo img {
	max-height: 46px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%) opacity(0.5);
	transition: filter 300ms ease;
}

.jd-logo img:hover {
	filter: grayscale(0%) opacity(1);
}

/* ── Process steps ──────────────────────────────────── */
.jd-step-num {
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	margin: 0;
	border: 1.5px solid var(--wp--preset--color--navy);
	border-radius: 50%;
	color: var(--wp--preset--color--navy);
	background: #fff;
}

/* ── Buttons ────────────────────────────────────────── */
.wp-block-button__link {
	transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
	box-shadow: 0 14px 30px rgba(6, 26, 58, 0.18);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.jd-btn-ghost .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--navy) !important;
	border: 1px solid var(--wp--preset--color--navy);
	box-shadow: none;
}

.jd-btn-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy) !important;
	color: var(--wp--preset--color--gold-2) !important;
}

.jd-btn-gold .wp-block-button__link {
	background: linear-gradient(135deg, #f3d992, var(--wp--preset--color--gold)) !important;
	color: #061a3a !important;
	font-weight: 800;
}

/* ── CTA panel ──────────────────────────────────────── */
.jd-cta :where(h2, p) {
	color: inherit;
}

/* ── WPForms in the quote card ──────────────────────── */
.jd-quote-card .wpforms-field-label {
	color: var(--wp--preset--color--navy);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.jd-quote-card .wpforms-form input[type="text"],
.jd-quote-card .wpforms-form input[type="email"],
.jd-quote-card .wpforms-form input[type="tel"],
.jd-quote-card .wpforms-form input[type="url"],
.jd-quote-card .wpforms-form input[type="number"],
.jd-quote-card .wpforms-form select,
.jd-quote-card .wpforms-form textarea {
	min-height: 60px;
	padding: 0 18px;
	border: 1px solid #dcd7d1;
	border-radius: 4px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	box-shadow: none;
}

.jd-quote-card .wpforms-form textarea {
	min-height: 120px;
	padding-top: 16px;
}

.jd-quote-card .wpforms-form input:focus,
.jd-quote-card .wpforms-form textarea:focus,
.jd-quote-card .wpforms-form select:focus {
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 4px rgba(214, 170, 95, 0.13);
	outline: none;
}

.jd-quote-card .wpforms-form button[type="submit"] {
	width: 100%;
	min-height: 64px;
	border: 0;
	border-radius: 6px;
	color: var(--wp--preset--color--gold-2);
	background: linear-gradient(135deg, var(--wp--preset--color--navy), #03112a);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 160ms ease;
}

.jd-quote-card .wpforms-form button[type="submit"]:hover {
	transform: translateY(-2px);
}

/* ── Editor niceties ────────────────────────────────── */
.editor-styles-wrapper .jd-goldline {
	min-height: 3px;
}

/* ── Small screens ──────────────────────────────────── */
@media (max-width: 781px) {
	.jd-header {
		position: static;
	}

	.jd-hero-img img {
		max-height: 380px;
	}
}