/*
 * iZao brand layer.
 *
 * Loaded AFTER the canonical Realtor X stylesheet and, like it, UNLAYERED.
 * This file does not rewrite the template: it re-points the template's own
 * variables at iZao values and adds the small number of overrides that the
 * accent swap makes unavoidable.
 *
 * Geometry, spacing, typography scale, responsive behaviour and interactions
 * are NOT touched — they belong to the template.
 * (vault: 03 — Design/Canonical Template · iZao_Design_System_Colours)
 */

/* ── 1. The template's 13 variables, re-pointed to iZao ──────────────────── */
:root {
  /* Identity. The template's coral becomes Electric Green. */
  --primary-1: #39ff14;

  /* Neutrals: the template's palette is already white → near-white →
     soft-grey → mid-grey → near-black. iZao's is the same shape, warmer. */
  --neutral-100: #ffffff;
  --neutral-200: #f7f7f4; /* warm white */
  --neutral-300: #f2f2ee;
  --neutral-400: #e7e9e8; /* iZao soft grey */
  --neutral-500: #b4b8b6;
  --neutral-600: #686e6b; /* iZao muted */
  --neutral-700: #3f4542;
  --neutral-800: #111111; /* iZao ink */

  /* The template's shadows are blue-black. Warming them is most of what makes
     the result read as a warm neutral system rather than a grey site. */
  --shadow-card: #1a140b0f;
  --shadow-button-secondary: #2b201412;
  --shadow-image: #1a140b24;
  --shadow-badge: #2b201417;

  /* Accent-as-text substitute. #39FF14 on white is 1.36:1 and fails outright;
     this deeper green is 6.47:1 on white and remains at least 5.30:1 across
     iZao's approved light neutral surfaces. */
  --izao-accent-text: #176b4d;

  /* Semantic (approved) */
  --izao-success: #16a34a;
  --izao-error: #dc2626;
}

/* ── 2. Accent as BACKGROUND → foreground is always ink, never white ──────
   White on #39FF14 measures 1.36:1. Ink on it measures 13.93:1. */
.button-primary.bg-primary-1,
.button-primary:hover,
.button-secondary:hover,
.button-category:hover,
.button-category.w--current,
.social-media-link:hover,
.social-media-link.accent-color,
.menu-button:hover {
  color: var(--neutral-800);
}

/* ── 3. Accent as TEXT → the darker green, never the raw accent ──────────── */
a,
.text-link:hover,
.text-200.text-link.header-nav:hover,
.text-200.text-link.header-dropdown-nav:hover,
.text-300.bold.property-agent-name:hover,
.dropdown-category-toggle:hover,
.header-search-toggle:hover,
.flex.text-200.arrow-link-v2,
.line-rounded-icon.icon-link,
.color-primary,
.rich-text a:hover {
  color: var(--izao-accent-text);
}

/* Webflow's card-title hover interactions carry the donor's coral as an
   inline colour. Keep that interaction, but force its visible state through
   the iZao accent on property, editorial and professional cards. */
.card-link:hover h2,
.card-link:hover h3,
.card-link:hover .h3-size,
.card-link:hover .h5-size,
.card-agent:hover .link-content h2,
.card-agent:hover .link-content h3,
.link-content:hover h2,
.link-content:hover h3 {
  color: var(--izao-accent-text) !important;
}

/* ── 4. Price stays INK ───────────────────────────────────────────────────
   The template renders the featured price in the accent colour — on the most
   repeated element on the page. Deliberate divergence. */
.text-primary-1,
.h5-size.text-primary-1,
.h1-size.text-medium.text-primary-1 {
  color: var(--neutral-800);
}

/* ── 5. Success and error get REAL semantic colours ───────────────────────
   The template routes both through the accent, which only works because its
   brand is red. Errors must never be green. */
.success-message {
  color: var(--izao-success);
  background-color: #16a34a14;
}
.error-message {
  color: var(--izao-error);
}

/* ── 6. Badge discipline ──────────────────────────────────────────────────
   The template's accent-filled badge sits on EVERY card, which alone exceeds
   the ≤5% accent budget. Purpose badges become white pills; the accent pill is
   reserved for the rare, meaningful signal (Verified — the agent role badge). */
/* F4: search/filter architecture is intentionally parked. Keep the one real
   market control centered in the donor filter row after removing unavailable
   controls; its authored dropdown dimensions and responsive behavior remain. */
.split-content.filters-right.izao-market-only-filters {
  justify-content: center;
  margin-right: 0;
  max-width: 100%;
}
.split-content.filters-right.izao-market-only-filters > .dropdown-category {
  margin-right: 0;
}

.badge-v1.card-property {
  background-color: var(--neutral-100);
  color: var(--neutral-800);
}
.badge-v1.card-agent {
  color: var(--neutral-800);
}

/* F5B: reserve the Realtor X card-photo frame before either donor fallback or
   canonical media arrives. Canonical collection projections currently expose
   width but not height, so the stable donor frame is the honest equivalent of
   per-image intrinsic geometry and keeps mixed media from shifting card
   layout. object-fit: cover remains owned by the template. */
.image-wrapper.card-property {
  aspect-ratio: 1832 / 1030;
}

/* ── 7. iZao logo ─────────────────────────────────────────────────────────
   The template's licensed logo file is replaced by <IZaoLogo /> — the traced
   vector of the approved master artwork — inside the template's own
   .header-logo / .footer-logo slots, so header and footer layout is unchanged
   and the template goes on setting the width responsively (156/140/130px in
   the header, 190/170/150px in the footer).

   All this layer adds is the height. An <svg> given only a width needs
   `height: auto` to take its height from the viewBox; without it the browser
   falls back to the 150px default and the mark stretches.

   Colour is NOT here. A logo does not inherit, so the ink and the Electric
   Green i-dot are fixed inside the component. This replaces the provisional
   text wordmark (dotless ı plus a positioned dot), whose offsets moved with
   the webfont — the dot is now part of the vector. */
.header-logo,
.footer-logo {
  height: auto;
}
.izao-logo {
  display: block;
}

/* ── 8. Language switcher ─────────────────────────────────────────────────
   BUILD NEW — proven absent from the template (hreflang: 0 files across all
   57 pages). Styled from the template's own neutrals and radii so it reads as
   part of the chrome rather than an addition to it. */
.izao-locale-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--neutral-400);
  border-radius: 12px;
  padding: 3px;
  margin-right: 18px;
}
.izao-locale-switch a {
  color: var(--neutral-600);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 11px;
  border-radius: 9px;
  transition: color 0.3s, background-color 0.3s;
}
.izao-locale-switch a:hover {
  color: var(--neutral-800);
}
.izao-locale-switch a[aria-current="true"] {
  background-color: var(--neutral-800);
  color: var(--neutral-100);
}
@media screen and (max-width: 991px) {
  .izao-locale-switch {
    margin-right: 12px;
  }
}

/* ── 9. Typography — Manrope ──────────────────────────────────────────────
 * APPROVED 2026-08-28. Replaces the template's Thicccboi.
 *
 * WHY (measured, canvas ink test at 50px): Thicccboi renders every accented
 * character as a completely blank glyph —
 *     À É é ç à ù ı  → 0 ink pixels   (Arial: 388–604)
 * and draws U+00B2 at full size, identical to "2", so "m²" showed as "m2".
 * The glyphs exist-but-are-blank, so the browser never falls back on its own.
 * That broke two locked decisions: EN+FR from day one, and m² as the V1 area
 * unit. It also removed the unresolved licence question, since Thicccboi is
 * commercial and self-hosting it was never settled.
 *
 * Manrope: SIL Open Font License, full Latin Extended, geometric with a large
 * x-height — the closest of the candidates to the template's own feel.
 * Loaded and self-hosted by next/font in the locale layout.
 *
 * The template sets `font-family: Thicccboi, sans-serif` on body; this
 * re-points it. Headings, buttons and inputs inherit. Geometry, weights and
 * type scale remain the template's.
 */
body,
button,
input,
select,
textarea,
.w-button {
  font-family: var(--font-izao), -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

/* ── 10. Page-load fade ───────────────────────────────────────────────────
 * The template opens every page with an IX2 PAGE_FINISH fade on
 * `.page-wrapper`. MEASURED: that trigger never fires under Next.js, so the
 * page previously appeared instantly (and before that, not at all).
 *
 * Re-created as a real CSS animation. A CSS animation outranks an inline
 * style in the cascade, so this also wins if IX2 applies `opacity: 0` at bind
 * time — no JavaScript unblocking needed.
 *
 * 400ms, just under the template's own 500ms reveal duration, so the page
 * ground settles before its contents arrive.
 */
@keyframes izao-page-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.page-wrapper {
  animation: izao-page-in 400ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .page-wrapper {
    animation-duration: 1ms;
  }
}

/* ── 11. Mobile donor-navigation containment ──────────────────────────────
 * Webflow owns the navbar state and animation. The F3 controller supplies
 * the measured header height before the menu opens; these rules only keep
 * the donor panel inside the dynamic viewport and let it scroll internally.
 */
@media screen and (max-width: 991px) {
  .header.w-nav .w-nav-overlay {
    height: calc(
      100dvh - var(--izao-mobile-nav-header-height, 106px)
    ) !important;
    max-height: calc(
      100dvh - var(--izao-mobile-nav-header-height, 106px)
    ) !important;
    overflow: hidden;
  }

  .header.w-nav .nav-menu.w-nav-menu {
    height: calc(100dvh - var(--izao-mobile-nav-header-height, 106px));
    max-height: calc(100dvh - var(--izao-mobile-nav-header-height, 106px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

/* ── 12. French homepage-hero containment ────────────────────────────────
 * The donor kept only a short English tail on one line. Its longer French
 * translation is wider than the phone content wrapper, so allow that same
 * phrase to wrap naturally without changing copy or typography.
 */
@media screen and (max-width: 479px) {
  html[lang="fr"] .section.hero .text-breaking-no-wrap {
    white-space: normal;
  }
}

/* ── 13. Accessible text available without changing donor geometry ─────── */
.izao-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}