/* =========================================================================
   Propeka design tokens
   =========================================================================
   Values adapted from the Propeka brand token set of the earlier Propeka
   implementation (decision matrix LEG-16, LEGACY_ADAPT): the values carry over,
   the names and structure are new. The Houzez vendor navy was never a Propeka
   color and is not carried over.

   Contrast notes (on white): red text #C50021 and link #5366C9 pass WCAG AA
   for normal text; #ED0028 is for fills and large text; tertiary text #67717D
   measures about 4.96:1.
   ========================================================================= */

/* While Plus Jakarta Sans downloads (font-display: swap), text shows in a
   local sans-serif sized to the same width and line height, so first visits
   no longer flash a serif and the swap barely moves a line (owner, 2026-10-29). */
@font-face {
	font-family: "Plus Jakarta Sans Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto");
	size-adjust: 106%;
	ascent-override: 98%;
	descent-override: 21%;
	line-gap-override: 0%;
}

:root {
	/* Brand */
	--pk-red: #ed0028;           /* fills, primary buttons, badges */
	--pk-red-dark: #c50021;      /* red as text, hover, active */
	--pk-red-soft: #fff1f3;
	--pk-ink: #0d2338;           /* near-black brand ink */
	--pk-link: #5366c9;

	/* Status */
	--pk-success: #1d8a43;
	--pk-success-soft: #eaf7ef;
	--pk-warning: #9a6700;
	--pk-warning-soft: #fff8e6;
	--pk-error: #b3261e;
	--pk-error-soft: #fdecea;
	--pk-sold: #4d5c6b;
	--pk-sold-soft: #eef1f4;

	/* Neutrals */
	--pk-n0: #ffffff;
	--pk-n25: #fbfcfd;
	--pk-n50: #f4f6f8;
	--pk-n100: #e9edf1;
	--pk-n200: #dbe1e8;
	--pk-n300: #c2ccd6;
	--pk-n400: #94a3b1;
	--pk-n500: #6b7b8c;
	--pk-n600: #4d5c6b;
	--pk-n700: #33414f;
	--pk-text: #14212e;
	--pk-text-secondary: #566573;
	--pk-text-tertiary: #67717d;

	/* Typography */
	--pk-font: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* W11: the typeface the site actually loads (Houzez typography option); "Open Sans" here was stale */
	--pk-fs-xs: 0.75rem;   --pk-lh-xs: 1rem;       /* badges, labels */
	--pk-fs-sm: 0.875rem;  --pk-lh-sm: 1.25rem;    /* metadata, supporting text */
	--pk-fs-base: 1rem;    --pk-lh-base: 1.5rem;   /* body, card title and price */
	--pk-fs-lg: 1.25rem;   --pk-lh-lg: 1.75rem;    /* result counts, subtitles */
	--pk-fs-xl: 1.75rem;   --pk-lh-xl: 2.25rem;    /* section headings */
	--pk-fs-hero: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
	--pk-lh-hero: 1.15;
	--pk-fw-normal: 400;
	--pk-fw-semi: 600;
	--pk-fw-bold: 700;

	/* Spacing (4px scale) */
	--pk-s1: 4px;
	--pk-s2: 8px;
	--pk-s3: 12px;
	--pk-s4: 16px;
	--pk-s5: 20px;
	--pk-s6: 24px;
	--pk-s8: 32px;
	--pk-s10: 40px;
	--pk-s12: 48px;
	--pk-s16: 64px;

	/* Controls */
	--pk-control-sm: 36px;
	--pk-control: 44px;
	--pk-control-lg: 52px;

	/* Radius */
	--pk-radius-sm: 6px;
	--pk-radius: 10px;
	--pk-radius-lg: 14px;
	--pk-radius-xl: 20px;
	--pk-radius-pill: 999px;

	/* Elevation */
	--pk-shadow-1: 0 1px 2px rgba(13, 35, 56, 0.06), 0 1px 3px rgba(13, 35, 56, 0.05);
	--pk-shadow-2: 0 2px 4px rgba(13, 35, 56, 0.06), 0 4px 12px rgba(13, 35, 56, 0.07);
	--pk-shadow-3: 0 8px 24px rgba(13, 35, 56, 0.10), 0 2px 6px rgba(13, 35, 56, 0.06);
	--pk-focus-ring: 0 0 0 3px var(--pk-link); /* opaque: about 5:1 on white (cycle 2) */

	/* Layout */
	--pk-content-width: 1200px;
	--pk-gutter: var(--pk-s6);
	--pk-transition: 140ms cubic-bezier(0.2, 0.7, 0.4, 1);
}

@media (max-width: 1024px) { :root { --pk-gutter: var(--pk-s5); } }
@media (max-width: 640px)  { :root { --pk-gutter: var(--pk-s4); } }
@media (max-width: 380px)  { :root { --pk-gutter: var(--pk-s3); } }

/* ------------------------------------------------------------------
   Homepage and listing-grid layout (presentation only)

   Two Houzez behaviours need correcting for the Propeka homepage:

   1. The "Houzez Page Builder" template wraps content in .container only
      when WPBakery is active. Propeka does not use WPBakery, so page
      content would otherwise run edge to edge. These rules give the
      homepage the same measured width and gutters as the rest of the site.

   2. .listing-view.grid-view.card-deck carries the 3-column classes but
      Houzez only styles them as a grid on its own listing templates, so
      the cards stack full width inside a page. This restores the intended
      responsive grid: three columns, two on tablets, one on phones.
   ------------------------------------------------------------------ */

.page-template-template-homepage .content-wrap > * {
	max-width: var(--pk-content-width);
	margin-inline: auto;
	padding-inline: var(--pk-gutter);
}

.page-template-template-homepage .content-wrap > .property-cards-module {
	padding-inline: var(--pk-gutter);
}

.listing-view.grid-view.card-deck {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pk-gutter);
	align-items: start;
}

.listing-view.grid-view.card-deck.grid-view-2-cols {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.listing-view.grid-view.card-deck > * {
	min-width: 0;
	margin: 0;
}

@media (max-width: 1024px) {
	.listing-view.grid-view.card-deck,
	.listing-view.grid-view.card-deck.grid-view-2-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.listing-view.grid-view.card-deck,
	.listing-view.grid-view.card-deck.grid-view-2-cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------
   Form field errors

   Houzez marks an invalid field with .is-invalid but never shows what is
   wrong: the inquiry form has no client-side validation at all, and the
   listing wizard suppresses jQuery Validate's messages. propeka-forms.js
   restores the messages; these rules make them legible and keep them
   attached to the field they describe.
   ------------------------------------------------------------------ */

.propeka-field-error {
	display: block;
	margin-top: var(--pk-s2, 0.375rem);
	color: var(--pk-error, #b3261e);
	font-size: 0.875rem;
	line-height: 1.4;
}

.form-group .propeka-field-error:empty {
	display: none;
}

/* The field itself. Houzez already applies .is-invalid; make sure the cue is
   not colour alone by keeping a visible border weight change too. */
.form-control.is-invalid,
.is-invalid > .dropdown-toggle {
	border-color: var(--pk-error, #b3261e);
	border-width: 2px;
}

.form-control.is-invalid:focus,
.is-invalid > .dropdown-toggle:focus {
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.25);
	outline: none;
}