/**
 * WLRE Theme - Global Stylesheet
 *
 * Base styles beyond what theme.json handles.
 * Design tokens are mirrored here for use in custom components.
 */

/* === Reset additions === */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* === Pointer cursor for tappable elements (site-wide) ===
 * Firefox doesn't default <button> to a pointer cursor (only WebKit does),
 * so we set it explicitly on every native and ARIA-role interactive element.
 * Disabled state is normalised to `not-allowed`. Component CSS is free to
 * override (e.g. `cursor: wait` on loading buttons) — it sits later in the
 * cascade and wins. */
button:not(:disabled),
a[href],
summary,
label[for],
select:not(:disabled),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="file"]:not(:disabled),
input[type="image"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
[role="link"]:not([aria-disabled="true"]),
[role="tab"]:not([aria-disabled="true"]),
[role="menuitem"]:not([aria-disabled="true"]),
[role="menuitemcheckbox"]:not([aria-disabled="true"]),
[role="menuitemradio"]:not([aria-disabled="true"]),
[role="option"]:not([aria-disabled="true"]),
[role="checkbox"]:not([aria-disabled="true"]),
[role="radio"]:not([aria-disabled="true"]),
[role="switch"]:not([aria-disabled="true"]) {
	cursor: pointer;
}
button:disabled,
select:disabled,
input:disabled,
textarea:disabled,
[aria-disabled="true"] {
	cursor: not-allowed;
}

/* === Scrollbar suppression (site-wide) ===
 * Hide the native scrollbar chrome on the document and every scrollable
 * element. Scrolling still works via wheel, touch, drag, and keyboard —
 * the bar is simply not rendered. Applied universally so overflow'd
 * components (gallery thumb column, dropdowns, modals, etc.) share the
 * minimalist look without each having to opt in.
 *
 * Per-engine handles:
 *   • `scrollbar-width: none`      — Firefox
 *   • `-ms-overflow-style: none`   — legacy Edge / IE11
 *   • `::-webkit-scrollbar`        — Chrome / Safari / modern Edge
 */
html {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}
*::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}
* {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* === Custom properties (mirrors theme.json for use in custom components) === */
:root {
	/* These are defaults; brand.php overrides them at runtime */
	/* Lotus Casa canonical palette — Figma file HPcLZJIoJKzIqh0TpuGVpS.
	 * brand.php overrides brand-900 / accent-500 / text-900 / surface-50
	 * from the runtime wlre_brand_settings option. The derived tokens
	 * below (brand-700/800 gradient shades and accent-600 hover) stay
	 * in this file since admins don't tune them directly. */
	--wlre-color-brand-900: #0A2438; /* Deep Navy */
	--wlre-color-brand-700: #1E3A54; /* lighter navy — gradient high */
	--wlre-color-brand-800: #132C44; /* mid navy — gradient mid */
	--wlre-color-accent-500: #81D8D0; /* Tiffany Aqua */
	--wlre-color-accent-600: #6EC7BE; /* darker tiffany — hover / pressed */
	--wlre-color-teal-700: #008D84; /* Figma Teal Dark — icon/action accent */
	--wlre-color-surface-50: #FAF8F4; /* Figma Cream — page/section background */
	--wlre-color-surface-cream: #FAF8F4; /* Alias used by older components. */
	--wlre-color-text-900: #0A2438; /* Deep Navy — matches brand-900 per Figma */
	--wlre-color-neutral-800: #222E26;
	--wlre-color-neutral-600: #666666;
	--wlre-color-neutral-500: #999999;
	--wlre-color-neutral-400: #D0D0D0;
	--wlre-color-neutral-300: #D0D0D0;
	--wlre-color-neutral-200: #E7E7E7;
	--wlre-color-neutral-100: #ECECE7;
	--wlre-color-white: #FFFFFF;
	--wlre-color-error: #95231F;
	--wlre-color-green-50: #F3FAF4;   /* Figma Semantic/Success 2 — success toast bg, toggle active tint */
	--wlre-color-success-700: #1A6B2D; /* Figma success text/border */
	--wlre-color-error-50: #FDF3F3;   /* Figma error toast bg */
	--wlre-color-error-700: #95231F;  /* Figma error text/border — same as --wlre-color-error */
	--wlre-color-whatsapp: #60D669; /* WhatsApp brand (Figma variant; lighter than canonical #25D366). */
	/* --wlre-color-text-muted is defined in inc/brand.php (canonical token
	   source so brand overrides apply). 8A918C, WCAG-AA on white. */
	--wlre-shadow-card: 0 8px 24px rgba(149,157,165,0.2);
	--wlre-radius-sm: 8px;
	--wlre-radius-md: 12px;
	--wlre-radius-lg: 16px;
	--wlre-radius-20: 20px;
	--wlre-radius-xl: 24px;
	/* Spacing scale — mirrors Figma Size/* tokens (Real Estate Italy library). */
	--wlre-space-0: 0px;
	--wlre-space-4: 4px;
	--wlre-space-8: 8px;
	--wlre-space-12: 12px;
	--wlre-space-16: 16px;
	--wlre-space-20: 20px;
	--wlre-space-24: 24px;
	--wlre-space-28: 28px;
	--wlre-space-32: 32px;
	--wlre-space-40: 40px;
	--wlre-space-48: 48px;
	--wlre-space-64: 64px;
	--wlre-space-80: 80px;
	--wlre-space-100: 100px;
	/* Type scale — mirrors Figma "Real Estate Italy" typography styles and
	 * the .wlre-body-* / .wlre-h* utility values. Use these tokens in
	 * component CSS instead of raw px so typography stays in sync with the
	 * block-editor preset set in theme.json. */
	--wlre-font-size-xs: 11px;
	--wlre-font-size-s: 12px;
	--wlre-font-size-m: 14px;
	--wlre-font-size-l: 16px;
	--wlre-font-size-xl: 18px;
	--wlre-font-size-h6: 20px;
	--wlre-font-size-h5: 24px;
	--wlre-font-size-h4: 28px;
	--wlre-font-size-h3: 32px;
	--wlre-font-size-h2: 40px;
	--wlre-font-size-h1: 44px;
	--wlre-font-size-display: 48px;
	/* Line heights — body uses 1.48, headings 1.2, tight for single-line UI. */
	--wlre-line-height-tight: 1;
	--wlre-line-height-heading: 1.2;
	--wlre-line-height-body: 1.48;
	--wlre-line-height-comfort: 1.5;
	/* Layout caps — reference these instead of hardcoding 1240/1440.
	 * content = 1240 (Figma inner content zone); wide = 1440 (frame cap). */
	--wlre-content-width: 1240px;
	--wlre-wide-width: 1440px;
	/* WCAG 2.5.5 (AAA) primary + 2.5.8 (AA) inline-text tap targets. Used
	 * across mobile overrides to size buttons, chips, toggle wrappers, etc. */
	--wlre-tap-target: 44px;
	--wlre-tap-target-inline: 32px;
	/* Shared header height — the `.wlre-header` on hero pages is
	 * position:absolute so hero padding-top = header + breathing. */
	--wlre-header-height: 96px;
	--wlre-font-heading: 'DM Sans', sans-serif;
	--wlre-font-body: 'Lato', sans-serif;
}

body {
	font-family: var(--wlre-font-body);
	color: var(--wlre-color-text-900);
	background-color: var(--wlre-color-surface-50);
	line-height: 1.48;
	-webkit-font-smoothing: antialiased;
	/* Prevent horizontal scroll without corrupting the ICB.
	   overflow-x on html in RTL mode makes Chrome expand window.innerWidth
	   (the ICB) to include RTL scroll space, breaking fixed-element sizing and
	   initializing scrollX at a large negative value that hides page content.
	   Clipping on body avoids that — body clips its children, html stays the
	   real viewport, window.innerWidth == device width. clip (not hidden) so
	   position:sticky children still work. */
	overflow-x: clip;
}

/* === A11y foundation (Batch 11) === */

/* Visually-hidden skip link — appears on first Tab, lands focus at #main.
 * Hidden above the viewport via translateY(-100%) rather than left:-9999px.
 * Physical left offsets expand the RTL document width and corrupt the scroll
 * origin on dir="rtl" pages; transform moves only the paint position, not
 * the layout position, so scrollWidth stays at viewport width. */
.wlre-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10000;
	padding: var(--wlre-space-12) var(--wlre-space-16);
	background: var(--wlre-color-brand-900);
	color: var(--wlre-color-white);
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-m);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--wlre-radius-sm) 0;
	/* Visually hidden until keyboard-focused. Clip it to a 1px box rather than
	   using transform: translateY(-100%) — the old approach left the pill sitting
	   just above the viewport, where a trackpad rubber-band / overscroll exposed
	   it. Clipping keeps it out of view in every scroll state while remaining
	   focusable for keyboard + screen-reader users. */
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}
.wlre-skip-link:focus,
.wlre-skip-link:focus-visible {
	clip-path: none;
	width: auto;
	height: auto;
	overflow: visible;
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 0;
}

/* Focus ring scoped to form inputs only — buttons and links manage their own
   focus states via component-level CSS to avoid unintended outlines on CTAs. */
:where(input, select, textarea):focus-visible {
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 2px;
	border-radius: var(--wlre-radius-sm);
}

/* Hidden main jump target shouldn't show a visible outline when reached via skip link. */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible {
	outline: none;
}

/* Kill WordPress default 24px block gap that creates white stripe above header */
html, body {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body {
	--wp--style--block-gap: 0px;
}

.wp-site-blocks {
	padding-block-start: 0 !important;
	margin-block-start: 0 !important;
}

.wp-site-blocks > * {
	margin-block-start: 0 !important;
}

.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}

/* Fallback WordPress pages do not have the custom Figma hero/header
   sections that define their own breathing room. Keep the generic template
   from starting underneath the fixed visual header. */
.wlre-default-main {
	padding-block: calc(var(--wlre-header-height) + var(--wlre-space-40)) var(--wlre-space-64);
	padding-inline: var(--wlre-space-20);
}

@media (min-width: 768px) {
	.wlre-default-main {
		padding-inline: var(--wlre-space-40);
	}
}

@media (min-width: 1024px) {
	.wlre-default-main {
		padding-inline: var(--wlre-space-100);
	}
}

/* === Layout utilities ===
 * .wlre-container is the canonical layout primitive. Inner content zone
 * lands at --wlre-content-width (1240px) because the padding compresses the
 * 1440px cap. Components should prefer nesting inside .wlre-container over
 * inventing their own max-width. If a component needs a narrower inner
 * zone (e.g. forms), use max-width: NNNpx on its own wrapper. */
.wlre-container {
	max-width: var(--wlre-wide-width);
	margin-inline: auto;
	padding-inline: var(--wlre-space-20);
}
@media (min-width: 768px) { .wlre-container { padding-inline: var(--wlre-space-40); } }
@media (min-width: 1024px) { .wlre-container { padding-inline: var(--wlre-space-100); } }

.wlre-section {
	padding-block: 80px;
}

/* === Typography utilities ===
 * These utilities are thin wrappers around the --wlre-font-size-* and
 * --wlre-line-height-* tokens defined above. Component CSS should reference
 * the tokens directly; HTML-level callers use the utility classes. Single
 * source of truth is the token layer. */
.wlre-heading { font-family: var(--wlre-font-heading); font-weight: 600; line-height: var(--wlre-line-height-heading); }
.wlre-h1 { font-size: var(--wlre-font-size-h1); }
.wlre-h3 { font-size: var(--wlre-font-size-h3); }
.wlre-h4 { font-size: var(--wlre-font-size-h4); }
.wlre-h5 { font-size: var(--wlre-font-size-h5); }
.wlre-h6 { font-size: var(--wlre-font-size-h6); }
.wlre-body-xl { font-size: var(--wlre-font-size-xl); line-height: var(--wlre-line-height-body); }
.wlre-body-l  { font-size: var(--wlre-font-size-l);  line-height: var(--wlre-line-height-body); }
.wlre-body-m  { font-size: var(--wlre-font-size-m);  line-height: var(--wlre-line-height-body); }
.wlre-body-s  { font-size: var(--wlre-font-size-s);  line-height: var(--wlre-line-height-body); }
.wlre-label-l { font-family: var(--wlre-font-body); font-weight: 700; font-size: var(--wlre-font-size-l); line-height: var(--wlre-line-height-body); }
.wlre-label-m { font-family: var(--wlre-font-body); font-weight: 700; font-size: var(--wlre-font-size-m); line-height: var(--wlre-line-height-body); }
.wlre-label-s { font-family: var(--wlre-font-body); font-weight: 700; font-size: var(--wlre-font-size-s); line-height: var(--wlre-line-height-body); }
/* Overline L — matches Figma "Real Estate Italy/Desktop/Overline L" (Lato 400, 16px, lh 1.2, letter-spacing 0).
   Figma does not apply text-transform here; callers add uppercase if a surface specifies it. */
.wlre-overline-l { font-family: var(--wlre-font-body); font-weight: 400; font-size: var(--wlre-font-size-l); line-height: var(--wlre-line-height-heading); letter-spacing: 0; }

/* === Button base styles === */
.wlre-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wlre-space-8);
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: var(--wlre-font-size-l);
	line-height: var(--wlre-line-height-body);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.wlre-btn--primary {
	background-color: var(--wlre-color-accent-500);
	color: var(--wlre-color-text-900);
	border-radius: var(--wlre-radius-sm);
	padding: var(--wlre-space-12) var(--wlre-space-24);
}
.wlre-btn--primary:hover {
	background-color: var(--wlre-color-accent-600);
	box-shadow: var(--wlre-shadow-card);
}
.wlre-btn--secondary {
	background-color: transparent;
	color: var(--wlre-color-white);
	border: 1px solid var(--wlre-color-white);
	border-radius: var(--wlre-radius-sm);
	padding: 0 var(--wlre-space-24);
	height: var(--wlre-tap-target);
	min-width: 100px;
}
.wlre-btn--secondary:hover {
	background-color: rgba(255, 255, 255, 0.1);
}
/* Figma: Size=M, Type=Secondary, Surface=On Whites — white fill, dark text */
.wlre-btn--light {
	background-color: var(--wlre-color-white);
	color: var(--wlre-color-brand-900);
	border: none;
	border-radius: var(--wlre-radius-sm);
	padding: 0 var(--wlre-space-16);
	height: var(--wlre-tap-target);
	min-width: 100px;
}
.wlre-btn--light:hover {
	background-color: var(--wlre-color-neutral-200);
}

/* Figma: outline button on light surfaces — dark border + dark text */
.wlre-btn--outline {
	background-color: transparent;
	color: var(--wlre-color-text-900);
	border: 1px solid var(--wlre-color-text-900);
	border-radius: var(--wlre-radius-sm);
	padding: 0 var(--wlre-space-24);
}
.wlre-btn--outline:hover {
	background-color: var(--wlre-color-surface-50);
}

/* Utility: vertical spec divider (1px × 12px) — shared by card + detail.
   Figma spec: Neutrals/Grey 4 (#E0E3E2) = --wlre-color-neutral-200. */
.wlre-spec-divider {
	width: 1px;
	height: 12px;
	background: var(--wlre-color-neutral-200);
	flex-shrink: 0;
}

.wlre-btn--icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	padding: 0;
	background-color: var(--wlre-color-white);
	color: var(--wlre-color-text-900);
	border: 1px solid var(--wlre-color-neutral-200);
}
.wlre-btn--icon:hover {
	background-color: var(--wlre-color-surface-50);
}

/* === Card base === */
.wlre-card {
	background: var(--wlre-color-white);
	border-radius: var(--wlre-radius-20);
	box-shadow: var(--wlre-shadow-card);
	overflow: hidden;
}

/* === Dark section (header, footer, hero) === */
.wlre-dark {
	background-color: var(--wlre-color-brand-900);
	color: var(--wlre-color-white);
}

/* === Screen reader only === */
.wlre-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* === Carousel base === */
.wlre-carousel {
	display: flex;
	gap: var(--wlre-space-20);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-block: var(--wlre-space-4); /* space for card shadows */
}
.wlre-carousel::-webkit-scrollbar { display: none; }
.wlre-carousel > * {
	scroll-snap-align: start;
	flex-shrink: 0;
}

/* === 404 / not-found page (Batch 11) === */
.wlre-not-found {
	min-height: calc(100vh - 320px); /* push the footer toward the bottom on tall viewports */
	display: flex;
	align-items: center;
	justify-content: center;
}

.wlre-not-found__secondary {
	margin: calc(var(--wlre-space-8) * -1) 0 var(--wlre-space-32);
	font-size: var(--wlre-font-size-m);
	text-align: center;
	color: var(--wlre-color-neutral-600);
}

.wlre-not-found__secondary a {
	color: inherit;
	text-decoration: underline;
}

.wlre-not-found__links {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	gap: var(--wlre-space-24);
	justify-content: center;
	flex-wrap: wrap;
	font-size: var(--wlre-font-size-m);
}

.wlre-not-found__links a {
	color: var(--wlre-color-brand-900);
	text-decoration: none;
	font-weight: 600;
}

.wlre-not-found__links a:hover,
.wlre-not-found__links a:focus-visible {
	text-decoration: underline;
}

/* === Atomic utilities — keep patterns free of inline styles ===
 *
 * Anything repeated across >2 patterns belongs here, not as `style="..."`.
 * Names mirror the tokens so intent is readable at a glance:
 *   .wlre-text-center / .wlre-text-start / .wlre-text-end
 *   .wlre-m-0 / .wlre-mt-4…32 / .wlre-mbs-4…32 (logical margin-block-start)
 *   .wlre-flex / .wlre-grid-2 / .wlre-inline-flex
 *   .wlre-items-center / .wlre-items-start
 *   .wlre-justify-center / .wlre-justify-start / .wlre-justify-between
 *   .wlre-gap-4 / .wlre-gap-8 / .wlre-gap-12 / .wlre-gap-16 / .wlre-gap-24
 *
 * Use these in patterns instead of inline-style overrides so brand
 * adjustments cascade correctly and RTL/locale tuning applies.
 */
.wlre-text-center { text-align: center; }
.wlre-text-start  { text-align: start; }
.wlre-text-end    { text-align: end; }

.wlre-m-0 { margin: 0 !important; }
.wlre-mt-0  { margin-block-start: 0; }
.wlre-mt-4  { margin-block-start: var(--wlre-space-4); }
.wlre-mt-8  { margin-block-start: var(--wlre-space-8); }
.wlre-mt-12 { margin-block-start: var(--wlre-space-12); }
.wlre-mt-16 { margin-block-start: var(--wlre-space-16); }
.wlre-mt-24 { margin-block-start: var(--wlre-space-24); }
.wlre-mt-32 { margin-block-start: var(--wlre-space-32); }

.wlre-flex        { display: flex; }
.wlre-inline-flex { display: inline-flex; }
.wlre-flex-col    { flex-direction: column; }

.wlre-items-center { align-items: center; }
.wlre-items-start  { align-items: flex-start; }

.wlre-justify-center  { justify-content: center; }
.wlre-justify-start   { justify-content: flex-start; }
.wlre-justify-between { justify-content: space-between; }

.wlre-gap-4  { gap: var(--wlre-space-4); }
.wlre-gap-8  { gap: var(--wlre-space-8); }
.wlre-gap-12 { gap: var(--wlre-space-12); }
.wlre-gap-16 { gap: var(--wlre-space-16); }
.wlre-gap-24 { gap: var(--wlre-space-24); }

/* Grid with auto-auto columns, common in metadata rows. */
.wlre-grid-auto-auto {
	display: grid;
	grid-template-columns: auto auto;
}

/* === Range slider — shared base styling for every custom range input.
 *   Consistent track thickness + thumb styling across mortgage calc,
 *   search filters, and any future range UI. Overrides still allowed
 *   via `.wlre-range--lg` or component-specific classes. */
.wlre-range,
input[type="range"].wlre-form__input,
.wlre-mortgage-range input[type="range"] {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 6px;
	background: linear-gradient(
		to right,
		var(--wlre-color-accent-500) 0,
		var(--wlre-color-accent-500) var(--wlre-range-progress, 50%),
		var(--wlre-color-neutral-200) var(--wlre-range-progress, 50%),
		var(--wlre-color-neutral-200) 100%
	);
	border-radius: 999px;
	outline: none;
	cursor: pointer;
}
.wlre-range::-webkit-slider-thumb,
input[type="range"].wlre-form__input::-webkit-slider-thumb,
.wlre-mortgage-range input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wlre-color-accent-500);
	border: 3px solid var(--wlre-color-white);
	box-shadow: 0 2px 6px rgba(8, 56, 25, 0.24);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wlre-range::-webkit-slider-thumb:hover,
input[type="range"].wlre-form__input::-webkit-slider-thumb:hover,
.wlre-mortgage-range input[type="range"]::-webkit-slider-thumb:hover,
.wlre-range:focus-visible::-webkit-slider-thumb,
input[type="range"].wlre-form__input:focus-visible::-webkit-slider-thumb,
.wlre-mortgage-range input[type="range"]:focus-visible::-webkit-slider-thumb {
	transform: scale(1.08);
	box-shadow: 0 4px 10px rgba(8, 56, 25, 0.32);
}
.wlre-range::-moz-range-thumb,
input[type="range"].wlre-form__input::-moz-range-thumb,
.wlre-mortgage-range input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wlre-color-accent-500);
	border: 3px solid var(--wlre-color-white);
	box-shadow: 0 2px 6px rgba(8, 56, 25, 0.24);
	cursor: pointer;
}

/* === Responsive breakpoints === */
@media (max-width: 767px) {
	.wlre-h1 { font-size: var(--wlre-font-size-h3); }
	.wlre-h3 { font-size: var(--wlre-font-size-h5); }
	.wlre-section { padding-block: var(--wlre-space-48); }
	.wlre-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
	.wlre-hide-desktop { display: none !important; }
}