/* ==========================================================================
   Dreamscapes Development – site styles
   WPCodeBox: CSS snippet · Where: Frontend · Load in: Header
   (or paste into Impreza → Theme Options → Custom CSS)

   1. Colour tokens
   2. Focus
   3. Reasons (IconBox with the class "ds-reason")
   ========================================================================== */

/* ==========================================================================
   1. Colour tokens

   The base colours stay in Impreza → Theme Options → Colors.
   This only adds the shades and roles Impreza doesn't have, worked out from
   those base colours. Change a colour in Impreza and everything here follows.
   ========================================================================== */

:root {
	/* ---- From Impreza ---------------------------------------------------- */

	--ds-primary: var(--color-content-primary, #2b331f);   /* olive */
	--ds-accent: var(--color-content-secondary, #fab73d);  /* amber */
	--ds-brand-alt: var(--color-footer-bg, #08b6ce);       /* cyan */
	--ds-text: var(--color-content-text, #2b331f);
	--ds-text-muted: var(--color-content-faded, #666b5c);
	--ds-bg: var(--color-content-bg, #ffffff);
	--ds-bg-alt: var(--color-content-bg-alt, #f6f4ee);
	--ds-border: var(--color-content-border, #e4e2da);

	/* ---- Shades worked out from the brand colours ------------------------ */

	--ds-primary-hover: color-mix(in srgb, var(--ds-primary) 75%, #000);
	--ds-primary-soft: color-mix(in srgb, var(--ds-primary) 10%, #fff);

	--ds-accent-hover: color-mix(in srgb, var(--ds-accent) 88%, #000);
	--ds-accent-soft: color-mix(in srgb, var(--ds-accent) 18%, #fff);
	--ds-accent-text: color-mix(in srgb, var(--ds-accent) 60%, #000);  /* amber as text on white */

	--ds-brand-alt-dark: color-mix(in srgb, var(--ds-brand-alt) 62%, #000); /* cyan as text, or with white text */
	--ds-brand-alt-soft: color-mix(in srgb, var(--ds-brand-alt) 12%, #fff);

	--ds-danger: #b42318;
	--ds-success: #1e7b34;

	/* ---- Roles ------------------------------------------------------------ */

	--ds-on-primary: #ffffff;        /* text on olive */
	--ds-on-accent: var(--ds-primary); /* text on amber: always olive, never white */
	--ds-on-brand-alt: var(--ds-primary); /* text on cyan: always olive, never white */
	--ds-focus: var(--ds-brand-alt-dark);
	--ds-link-hover: var(--ds-brand-alt-dark);

	/* ---- Dreamscapes Properties plugin ----------------------------------- */

	--dsd-accent: var(--ds-primary);
	--dsd-accent-hover: var(--ds-primary-hover);
	--dsd-accent-contrast: var(--ds-on-primary);
	--dsd-rent: var(--ds-brand-alt-dark);
	--dsd-rent-contrast: #ffffff;
	--dsd-sale: var(--ds-accent);
	--dsd-sale-contrast: var(--ds-on-accent);
	--dsd-status: var(--ds-danger);
	--dsd-featured: var(--ds-primary);
	--dsd-text: var(--ds-text);
	--dsd-muted: var(--ds-text-muted);
	--dsd-border: var(--ds-border);
	--dsd-surface: var(--ds-bg);
	--dsd-surface-2: var(--ds-bg-alt);
}

/* ==========================================================================
   2. Focus – visible keyboard focus everywhere, in the brand colour
   ========================================================================== */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--ds-focus);
	outline-offset: 2px;
}

/* ==========================================================================
   3. Reasons – Impreza IconBox, Extra class: ds-reason
      Icon position: Top · Alignment: Center
   ========================================================================== */

.w-iconbox.ds-reason {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border: 1px solid var(--ds-border);
	border-radius: 16px;
	background: var(--ds-bg);
	text-align: center;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.w-iconbox.ds-reason:hover {
	border-color: transparent;
	box-shadow: 0 14px 32px -12px rgb(43 51 31 / 0.22);
	transform: translateY(-3px);
}

/* Icon in a soft amber circle */
.w-iconbox.ds-reason .w-iconbox-icon {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	background: var(--ds-accent-soft);
	color: var(--ds-primary);
	font-size: 1.75rem !important; /* Overrides the inline size from the element settings. */
	line-height: 1;
	transition: background-color 0.25s ease;
}

.w-iconbox.ds-reason:hover .w-iconbox-icon {
	background: var(--ds-accent);
}

.w-iconbox.ds-reason .w-iconbox-icon i {
	line-height: 1;
}

.w-iconbox.ds-reason .w-iconbox-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.w-iconbox.ds-reason .w-iconbox-title {
	margin: 0 0 0.5rem;
	color: var(--ds-text);
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
	font-weight: 700;
	line-height: 1.3;
}

.w-iconbox.ds-reason .w-iconbox-text {
	max-width: 30ch;
	color: var(--ds-text-muted);
	font-size: 1rem;
	line-height: 1.6;
}

.w-iconbox.ds-reason .w-iconbox-text p {
	margin: 0;
}

/* Equal-height boxes in the row */
.g-cols:has(.ds-reason) > .wpb_column > .vc_column-inner,
.g-cols:has(.ds-reason) > .wpb_column > .vc_column-inner > .wpb_wrapper {
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.w-iconbox.ds-reason,
	.w-iconbox.ds-reason .w-iconbox-icon {
		transition: none;
	}

	.w-iconbox.ds-reason:hover {
		transform: none;
	}
}