/* ==========================================================================
   Design2Code Blocks: styles for the section patterns and block styles.
   ========================================================================== */

:root {
	--d2c-red: #b30101;
	--d2c-red-dark: #8a0101;
	--d2c-red-light: #ff5a5a; /* red text on dark backgrounds only */
	--d2c-tint: #fdf1f1;
	--d2c-cream: #faf8f6;
	--d2c-sand: #efe8e2;
	--d2c-line: #e4ddd6;
	--d2c-ink: #1a1a1a;
	--d2c-body: #44403c;
	--d2c-muted: #57534e;
	--d2c-display: "Fraunces", Georgia, serif;
	--d2c-sans: "Figtree", "Helvetica Neue", Helvetica, sans-serif;
	--d2c-hand: "Caveat", "Bradley Hand", cursive;
	--d2c-mono: "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ---------- Sections ---------- */

body .d2c-section {
	margin-block: 0;
	padding-top: clamp(72px, 9vw, 120px);
	padding-bottom: clamp(72px, 9vw, 120px);
	font-family: var(--d2c-sans);
}
.d2c-section--cream { background: var(--d2c-cream); color: var(--d2c-ink); }
.d2c-section--white { background: #fff; color: var(--d2c-ink); }
.d2c-section--red   { background: var(--d2c-red); color: #fff; }
.d2c-section--dark  { background: var(--d2c-ink); color: #fff; }

.d2c-section :is(h1, h2, h3) {
	font-family: var(--d2c-display);
	font-weight: 600;
	color: inherit;
	margin-top: 0;
}
.d2c-section h1 { font-size: clamp(3rem, 6vw, 5.25rem); line-height: 1.02; letter-spacing: -0.03em; }
.d2c-section h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; }
.d2c-section h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.25; }

.d2c-section--red p,
.d2c-section--red h3 { color: #fff5f5; }
.d2c-section--red a:not(.wp-element-button) { color: #fff; }
.d2c-section--dark p { color: #e7e2dc; }
.d2c-section--dark a:not(.wp-element-button) { color: var(--d2c-red-light); }

.d2c-lead {
	font-size: clamp(1.125rem, 1.6vw, 1.3rem);
	line-height: 1.6;
	max-width: 36em;
}
.d2c-section--cream .d2c-lead,
.d2c-section--white .d2c-lead,
.d2c-section--cream .wp-block-column > p:not([class*="is-style"]),
.d2c-section--white .wp-block-column > p:not([class*="is-style"]) { color: var(--d2c-body); }

.d2c-microcopy { font-size: 0.95rem; color: var(--d2c-muted); }
.d2c-section--red .d2c-microcopy { color: #ffe3e3; }

/* ---------- Red-pen circle (text format) ---------- */

.d2c-circle {
	position: relative;
	display: inline-block;
	color: var(--d2c-red);
}
.d2c-circle::after {
	content: "";
	position: absolute;
	inset: -0.16em -0.26em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M24 44C20 14 112 4 172 16C206 24 200 64 150 72C88 82 14 72 10 46C6 28 44 14 76 10' fill='none' stroke='%23b30101' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	pointer-events: none;
}

/* ---------- Paragraph styles ---------- */

.is-style-d2c-eyebrow {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--d2c-red-dark);
}
.is-style-d2c-eyebrow a { color: inherit !important; text-decoration: none; }
.d2c-section--red .is-style-d2c-eyebrow {
	width: fit-content;
	padding: 6px 14px;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	color: #fff;
}
.d2c-section--dark .is-style-d2c-eyebrow { color: #ff8a8a; }

.is-style-d2c-badge {
	width: fit-content;
	margin: 0;
	padding: 4px 12px;
	background: var(--d2c-red);
	color: #fff !important;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.is-style-d2c-pen-note {
	width: fit-content;
	font-family: var(--d2c-hand);
	font-size: clamp(1.6rem, 2.2vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--d2c-red) !important;
	transform: rotate(-3deg);
	transform-origin: left center;
}
.d2c-section--dark .is-style-d2c-pen-note { color: var(--d2c-red-light) !important; }
.d2c-section--red .is-style-d2c-pen-note { color: #fff !important; }

.is-style-d2c-step-number {
	position: relative;
	z-index: 1;
	width: 56px;
	height: 56px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--d2c-red);
	color: #fff !important;
	font-size: 1.375rem;
	font-weight: 700;
}

.d2c-step-index {
	margin: 0;
	font-family: var(--d2c-display);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1;
	color: #ffd0d0 !important;
}

.d2c-quote-mark {
	margin: 0;
	font-family: var(--d2c-display);
	font-size: 4rem;
	line-height: 0.6;
	color: var(--d2c-red) !important;
}

/* ---------- Group styles ---------- */

.is-style-d2c-card,
.is-style-d2c-card-featured,
.is-style-d2c-placeholder {
	box-sizing: border-box;
	padding: clamp(24px, 3vw, 36px);
	border-radius: 20px;
}
.is-style-d2c-card { background: #fff; border: 1px solid var(--d2c-line); }
.d2c-section--white .is-style-d2c-card { background: var(--d2c-cream); border-color: transparent; }
.is-style-d2c-card-featured {
	position: relative;
	background: var(--d2c-tint);
	border: 2px solid var(--d2c-red);
}
.is-style-d2c-card-featured > .is-style-d2c-badge {
	position: absolute;
	top: -14px;
	left: 32px;
}
.is-style-d2c-placeholder { border: 2px dashed #c9bdb2; background: transparent; }

.wp-block-column > .is-style-d2c-card,
.wp-block-column > .is-style-d2c-card-featured,
.wp-block-column > .is-style-d2c-placeholder,
.wp-block-column > .is-style-d2c-outline-light { height: 100%; }

.is-style-d2c-outline-light {
	box-sizing: border-box;
	padding: 28px;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	border-radius: 18px;
}

.is-style-d2c-callout {
	padding: 36px 40px;
	background: #fff;
	color: var(--d2c-ink);
	border-radius: 20px;
}
.d2c-section .is-style-d2c-callout h3 { color: var(--d2c-ink); font-style: italic; }
.d2c-section .is-style-d2c-callout p { color: var(--d2c-body); }

.is-style-d2c-form-card {
	padding: clamp(28px, 3.5vw, 44px);
	background: #fff;
	color: var(--d2c-ink);
	border-radius: 24px;
}

/* ---------- Icons (Spacer block + class) ---------- */

.d2c-icon {
	position: relative;
	width: 60px !important;
	height: 60px !important;
	margin: 0;
	border-radius: 16px;
	background: var(--d2c-tint);
}
.d2c-icon::before {
	content: "";
	position: absolute;
	inset: 16px;
	background: var(--d2c-red);
	-webkit-mask: var(--d2c-icon-svg) center / contain no-repeat;
	mask: var(--d2c-icon-svg) center / contain no-repeat;
}
.d2c-icon--solid { background: var(--d2c-red); }
.d2c-icon--solid::before { background: #fff; }
.d2c-icon--monitor { --d2c-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.d2c-icon--database { --d2c-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6'/%3E%3C/svg%3E"); }
.d2c-icon--shield { --d2c-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }

/* ---------- Images & code ---------- */

.is-style-d2c-photo img {
	width: 100%;
	aspect-ratio: 13 / 15;
	object-fit: cover;
	border-radius: 24px;
}

.wp-block-code.is-style-d2c-code-card {
	position: relative;
	margin: 0;
	padding: 22px 24px;
	border: 0;
	border-radius: 16px;
	background: var(--d2c-ink);
	color: #e7e2dc;
	font-family: var(--d2c-mono);
	font-size: 0.875rem;
	line-height: 1.8;
	white-space: pre-wrap;
	box-shadow: 0 24px 48px rgba(26, 26, 26, 0.18);
}
.is-style-d2c-code-card code { font-family: inherit; }
.is-style-d2c-code-card s {
	text-decoration-color: var(--d2c-red-light);
	text-decoration-thickness: 2px;
}

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

.d2c-section .wp-block-button:not(.is-style-outline):not(.is-style-d2c-light):not(.is-style-d2c-text-link) .wp-block-button__link {
	background: var(--d2c-red);
	color: #fff;
	border-radius: 12px;
	padding: 1em 1.75em;
	font-weight: 600;
}
.d2c-section .wp-block-button:not(.is-style-outline):not(.is-style-d2c-light):not(.is-style-d2c-text-link) .wp-block-button__link:hover {
	background: var(--d2c-red-dark);
}

.is-style-d2c-light .wp-block-button__link {
	background: #fff !important;
	color: var(--d2c-red) !important;
	border-radius: 12px;
	padding: 1.1em 2em;
	font-weight: 700;
}
.is-style-d2c-light .wp-block-button__link:hover { background: var(--d2c-tint) !important; }

.is-style-d2c-text-link .wp-block-button__link {
	padding: 0.6em 0;
	background: transparent !important;
	color: var(--d2c-ink) !important;
	border-radius: 0;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--d2c-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.d2c-section--dark .is-style-d2c-text-link .wp-block-button__link { color: var(--d2c-red-light) !important; text-decoration-color: currentColor; }
.d2c-section--red .is-style-d2c-text-link .wp-block-button__link { color: #fff !important; text-decoration-color: currentColor; }

.d2c-section .is-style-outline .wp-block-button__link {
	border: 2px solid var(--d2c-ink);
	color: var(--d2c-ink);
	border-radius: 12px;
	padding: 0.9em 1.5em;
	font-weight: 600;
}

.d2c-section a:focus-visible,
.d2c-section .wp-element-button:focus-visible {
	outline: 3px solid var(--d2c-red);
	outline-offset: 3px;
}
.d2c-section--red a:focus-visible,
.d2c-section--red .wp-element-button:focus-visible { outline-color: #fff; }
.d2c-section--dark a:focus-visible,
.d2c-section--dark .wp-element-button:focus-visible { outline-color: var(--d2c-red-light); }

/* ---------- Section-specific ---------- */

.is-style-d2c-card > p:last-child a,
.is-style-d2c-card-featured > p:last-child a {
	font-weight: 600;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.d2c-trust {
	gap: 12px 28px !important;
	padding-top: 24px;
	border-top: 1px solid var(--d2c-line);
}
.d2c-trust p { margin: 0; font-size: 0.95rem; font-weight: 600; }

.d2c-process { position: relative; }

.d2c-case { padding: 0 !important; overflow: hidden; }
.d2c-case > .wp-block-columns { gap: 0; margin: 0; }
.d2c-case .is-style-d2c-photo { margin: 0; height: 100%; }
.d2c-case .is-style-d2c-photo img { height: 100%; min-height: 360px; aspect-ratio: auto; border-radius: 0; }
.d2c-case__body { padding: clamp(28px, 4vw, 48px); }

.d2c-posts .wp-block-post-title { font-size: 1.5rem; line-height: 1.3; }
.d2c-posts .wp-block-post-title a { color: var(--d2c-ink); text-decoration: none; }
.d2c-posts .wp-block-post-title a:hover { color: var(--d2c-red); }
.d2c-posts .wp-block-post-excerpt__more-link { font-weight: 600; }

.d2c-contact-details { padding-top: 24px; border-top: 1px solid #3a3634; }
.d2c-contact-details p { margin: 0.25em 0; }
.d2c-section--dark .d2c-contact-details a { color: #fff; text-decoration: none; }

.d2c-header { padding-block: 16px; border-bottom: 1px solid var(--d2c-line); background: var(--d2c-cream); }
.d2c-footer { padding-block: 40px; background: #111; color: #b8b0a8; font-size: 0.95rem; }
.d2c-footer a { color: #d6cfc8; text-decoration: none; }
.d2c-footer a:hover { color: #fff; }

/* ---------- Contact Form 7 inside the form card ---------- */

.is-style-d2c-form-card .wpcf7-form { display: flex; flex-direction: column; gap: 18px; }
.is-style-d2c-form-card .d2c-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.is-style-d2c-form-card label { display: block; font-size: 0.95rem; font-weight: 600; color: var(--d2c-ink); }
.is-style-d2c-form-card :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	margin-top: 8px;
	padding: 0 16px;
	border: 1.5px solid #cfc6bd;
	border-radius: 10px;
	background: var(--d2c-cream);
	color: var(--d2c-ink);
	font: inherit;
	font-weight: 400;
}
.is-style-d2c-form-card textarea { padding: 14px 16px; min-height: 120px; resize: vertical; }
.is-style-d2c-form-card :is(input, select, textarea):focus-visible {
	outline: 3px solid var(--d2c-red);
	outline-offset: 1px;
	border-color: var(--d2c-red);
}
.is-style-d2c-form-card input[type="submit"] {
	width: 100%;
	min-height: 58px;
	border: 0;
	border-radius: 12px;
	background: var(--d2c-red);
	color: #fff;
	font: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	cursor: pointer;
}
.is-style-d2c-form-card input[type="submit"]:hover { background: var(--d2c-red-dark); }
.is-style-d2c-form-card .wpcf7-not-valid-tip { margin-top: 6px; font-size: 0.9rem; font-weight: 600; color: var(--d2c-red-dark); }
.is-style-d2c-form-card .wpcf7-not-valid-tip::before { content: "⚠ "; }
.is-style-d2c-form-card .d2c-form-note { margin: 0; text-align: center; font-size: 0.875rem; color: var(--d2c-muted); }
.is-style-d2c-form-card .wpcf7-spinner { display: block; margin: 8px auto 0; }

/* ---------- Desktop-only flourishes ---------- */

@media (min-width: 782px) {
	.d2c-hero .is-style-d2c-code-card {
		margin-top: -140px;
		margin-left: -24px;
		width: 72%;
	}
	.d2c-process::before {
		content: "";
		position: absolute;
		left: 28px;
		right: 28px;
		top: 27px;
		height: 2px;
		background: #ebd3d3;
	}
}

@media (max-width: 781px) {
	.is-style-d2c-form-card .d2c-form-row { grid-template-columns: 1fr; }
	.is-style-d2c-card-featured { margin-top: 14px; }
}