/**
 * Opal AI search overlay (handoff spec §8). Namespaced under `ais-` so it
 * never collides with the theme's existing styles; mounted alongside the
 * current floating header.
 */
.ais-root {
  --ais-purple: #4900D5;
  --ais-ink: #1C004F;
  --ais-muted: #454849;
  --ais-faint: #8D7FA6;
  --ais-wash: #F6F2FD;
  --ais-lav: #E9E6EE;
  --ais-line: #F0F0F0;
  --ais-page: #FFFFFF;
  --ais-font: "Red Hat Display", Helvetica, Arial, sans-serif;
}

/* search trigger button in the site header.
   NOTE: this button lives in the header (region--primary-menu), which is NOT
   a descendant of .ais-root where the --ais-* custom properties are defined.
   CSS variables only inherit DOWN the tree, so var(--ais-wash) is UNRESOLVED
   here and the pale circle silently disappeared (OHCHF-1376). Use literal
   colours (matching the --ais- palette) so the button is self-contained, with
   the var as a progressive-enhancement first choice and a hard hex fallback.
   !important keeps the theme's global button/element resets in style.css
   (aggregated AFTER this file) from stripping the fill/shape. */
.ais-open {
  flex: none;
  color: #4900D5;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 50% !important;
  background: var(--ais-wash, #F6F2FD) !important;
  transition: background .15s;
}
.ais-open:hover { background: var(--ais-lav, #E9E6EE) !important; }
.ais-open svg { width: 26px; height: 28px; }

/* OHCHF-1394: below the 1080px nav breakpoint the search trigger lives in the
   header bar, between the CTA and the hamburger, instead of inside the opened
   menu panel (where it sat on its own row with excess space). Above 1080px the
   in-panel trigger is used and the header one is hidden. */
.ais-open--mobile { display: none !important; }
@media (max-width: 1079.98px) {
  .ais-open--mobile {
    display: grid !important;
    width: 40px;
    height: 40px;
    margin: 0 4px;
  }
  .ais-open--mobile svg { width: 20px; height: 22px; }
  .search--wrapper .ais-open:not(.ais-open--mobile) { display: none !important; }
}

/* On a SIGNATURE page the nav search-trigger glyph takes the signature colour
   instead of the default purple (OHCHF-1402). The body carries `signature`
   (burgundy default) plus, when a home pillar is set, `signature--<pillar>`
   (architecture/geography/water/parklands). The glyph is currentColor, so
   recolouring `.ais-open` colour is enough. Scoped to `body.signature` so a
   normal page stays purple. These override the literal `#4900D5` above, so the
   later/more-specific rule wins without needing !important. */
body.signature .ais-open { color: #801337; }
body.signature--architecture .ais-open { color: #801337; }
body.signature--parklands .ais-open { color: #004E3D; }
body.signature--geography .ais-open { color: #2E4B6F; }
body.signature--water .ais-open { color: #29808F; }

/* OHCHF-1395: when search is opened from a SIGNATURE page, the whole results
   overlay takes the signature palette (burgundy accents on a black/neutral
   base) instead of the default purple/blue. Signature pages carry
   `body.signature` (+ `signature--<pillar>` for pillar homes). The overlay sits
   inside <body>, so re-pointing the --ais-* variables recolours the labels,
   links, buttons, hover washes and the loading bar in one place. Non-signature
   pages are untouched. */
body.signature .ais-root {
  --ais-purple: #801337;
  --ais-ink: #1A1A1A;
  --ais-faint: #8A7B80;
  --ais-wash: #F9F1F3;
  --ais-lav: #EFE4E7;
}
body.signature--architecture .ais-root { --ais-purple: #801337; }
body.signature--parklands .ais-root { --ais-purple: #004E3D; --ais-wash: #F0F5F3; --ais-lav: #E2ECE8; }
body.signature--geography .ais-root { --ais-purple: #2E4B6F; --ais-wash: #F1F4F8; --ais-lav: #E3E9F0; }
body.signature--water .ais-root { --ais-purple: #29808F; --ais-wash: #EFF6F7; --ais-lav: #E0EDEF; }
body.signature .ais-root .ais-btn:hover { background: var(--ais-purple) !important; filter: brightness(0.92); }
body.signature .ais-root .ais-col .ais-chip { background: var(--ais-lav) !important; }
body.signature .ais-root .ais-col .ais-chip:hover,
body.signature .ais-root .ais-col .ais-chip:focus-visible { background: var(--ais-wash) !important; box-shadow: inset 0 0 0 1px var(--ais-purple); }

/* lock page scroll while the overlay is open */
html.ais-open-lock, html.ais-open-lock body { overflow: hidden; }

/* scrim behind the full-width surface.
   The site navbar is position:fixed; z-index:1400, so the overlay + scrim
   must sit above it (handoff: the panel covers the header while searching). */
.ais-scrim {
  position: fixed;
  inset: 0;
  background: rgba(246, 244, 251, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1500;
  display: none;
}
.ais-scrim.open { display: block; animation: ais-scrim-in .28s ease-out both; }
.ais-scrim.closing { animation: ais-scrim-out .22s ease-in both; }
@keyframes ais-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ais-scrim-out { to { opacity: 0; } }

/* full-width overlay surface (bar + results column) */
.ais-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  max-height: 100vh;
  z-index: 1501;
  display: none;
  flex-direction: column;
  background: var(--ais-page);
  box-shadow: 0 12px 40px rgba(28, 0, 79, .10);
  overflow: hidden;
  font-family: var(--ais-font);
}
.ais-overlay.open { display: flex; animation: ais-panel-in .3s cubic-bezier(.2, .7, .2, 1) both; transform-origin: top center; }
.ais-overlay.closing { animation: ais-panel-out .18s cubic-bezier(.4, 0, .6, 1) both; transform-origin: top center; }
@keyframes ais-panel-in {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes ais-panel-out {
  from { opacity: 1; clip-path: inset(0 0 0 0); }
  to { opacity: 0; clip-path: inset(0 0 100% 0); }
}

/* top bar: logo, full-width field, Clear, close */
.ais-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  min-height: 72px;
  position: relative;
  background: var(--ais-page);
}
.ais-brand {
  flex: none;
  display: grid;
  justify-items: center;
  line-height: 1;
  text-decoration: none;
}
.ais-brand svg { display: block; }
.ais-brand-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ais-purple);
  margin-top: 2px;
}
.ais-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.ais-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font: inherit;
  font-family: var(--ais-font);
  font-size: 22px;
  font-weight: 500;
  color: var(--ais-ink);
  background: transparent;
  caret-color: var(--ais-purple);
}
.ais-field input::placeholder { color: var(--ais-faint); font-weight: 400; }
input[type=search].ais-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ais-clear {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--ais-purple);
  border: 0;
  background: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.ais-clear:hover { background: var(--ais-lav); }
.ais-close {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ais-purple);
  border: 0;
  background: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.ais-close:hover { background: var(--ais-wash); }

/* loading sweep under the bar */
.ais-overlay.ais-loading .ais-bar::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 2px;
  background: var(--ais-purple);
  border-radius: 2px;
  animation: ais-sweep 1.1s ease-in-out infinite;
}
@keyframes ais-sweep { 0% { left: 0; width: 10%; } 50% { width: 40%; } 100% { left: 100%; width: 10%; } }

/* centred results column */
.ais-col {
  background: var(--ais-page);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  width: 100%;
  margin: 0;
  padding: 36px max(24px, calc((100vw - 940px) / 2)) 64px;
  border-top: 1px solid var(--ais-line);
  position: relative;
  color: var(--ais-ink);
  line-height: 1.45;
  display: grid;
  gap: 36px;
  align-content: start;
}
.ais-col h1, .ais-col h2, .ais-col h3, .ais-col h4, .ais-col p { margin: 0; }
.ais-col button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ais-col a { color: inherit; text-decoration: none; }

/* type roles */
.ais-h-title { font-size: 32px; font-weight: 900; color: var(--ais-ink); }
.ais-h-sec { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ais-purple); font-weight: 700; }
.ais-lead { font-size: 17px; color: var(--ais-muted); margin-top: 4px; }

/* actions + chips */
/* Pill-defining props are !important so the theme's global a/button resets in
   style.css (aggregated after this file) can't strip the padding/shape/fill —
   same override class that hit the chips and nav icon (OHCHF-1376). */
.ais-btn { display: inline-block; font-weight: 700; font-size: 15px; padding: 11px 20px !important; border-radius: 999px !important; background: var(--ais-purple, #4900D5) !important; color: #fff !important; white-space: nowrap; line-height: 1.2; }
.ais-btn:hover { background: #3B00AD !important; }
.ais-btn.ais-o { background: transparent !important; color: var(--ais-purple, #4900D5) !important; box-shadow: inset 0 0 0 1.5px var(--ais-purple, #4900D5); }
.ais-lnk { color: var(--ais-purple); font-weight: 700; font-size: 15px; white-space: nowrap; cursor: pointer; }
.ais-lnk:hover { text-decoration: underline; }
.ais-lnk.ais-sm { font-size: 13px; letter-spacing: 0; text-transform: none; }
.ais-col .ais-chips { display: flex; flex-wrap: wrap; gap: 12px; }
/* Scoped to .ais-col and marked !important so the resting fill always wins
   over the theme's global button/element resets in style.css (aggregation
   can load that after this file, which otherwise left chips unfilled). */
.ais-col .ais-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ECEAF3 !important;
  color: var(--ais-ink);
  font-family: var(--ais-font);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  padding: 11px 18px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}
.ais-col .ais-chip:hover,
.ais-col .ais-chip:focus-visible { background: #DED9EC !important; }
.ais-col .ais-chip:focus-visible { outline: 3px solid var(--ais-purple); outline-offset: 2px; }
.ais-col .ais-chip svg { color: var(--ais-purple); flex: none; }

/* metadata */
.ais-meta { font-size: 15px; color: var(--ais-muted); }
.ais-km { white-space: nowrap; }
.ais-km::before { content: "|"; margin: 0 8px; color: var(--ais-faint); }
.ais-km b { font-weight: 400; }
.ais-dot::before { content: "·"; margin: 0 7px; color: var(--ais-faint); }

/* best match */
.ais-best { display: grid; grid-template-columns: 180px 1fr; gap: 24px; background: var(--ais-wash); border-radius: 20px; padding: 20px; cursor: pointer; }
.ais-best .ais-img { align-self: stretch; min-height: 180px; border-radius: 12px; background: var(--ais-lav) center / cover; max-width: 100%; }
.ais-best .ais-in { display: grid; gap: 10px; min-width: 0; align-content: start; }
.ais-ai { display: flex; align-items: center; gap: 8px; }
.ais-ai svg { flex: none; }
.ais-best-label { margin-bottom: 14px; }
.ais-best h2 { font-size: 28px; font-weight: 900; color: var(--ais-ink); line-height: 1.15; }
.ais-best .ais-meta { margin-top: 4px; }
.ais-best .ais-why { font-size: 17px; line-height: 1.5; max-width: 56ch; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ais-best .ais-acts { display: flex; align-items: center; gap: 20px; margin-top: 6px; flex-wrap: wrap; }
.ais-best.ais-page .ais-img { display: none; }
.ais-best.ais-page { grid-template-columns: 1fr; }
/* Signature home best-match: title takes the signature colour (matches the
   signature community rows). Default signature colour = architecture maroon. */
.ais-best.ais-sig { --ais-sig: #801337; }
.ais-best.ais-sig.ais-architecture { --ais-sig: #801337; }
.ais-best.ais-sig.ais-parklands { --ais-sig: #004E3D; }
.ais-best.ais-sig.ais-geography { --ais-sig: #2E4B6F; }
.ais-best.ais-sig.ais-water { --ais-sig: #29808F; }
.ais-best.ais-sig h2 { color: var(--ais-sig); }
/* The whole signature best-match card takes the signature colour, not just the
   title: the "View community" button (fill) and the "Enquire now" secondary
   link (text) must be burgundy too, not the default purple (OHCHF-1396).
   !important because the base .ais-btn sets background/color !important (the
   earlier pill-hardening fix), so a plain override would not win. */
.ais-best.ais-sig .ais-btn { background: var(--ais-sig) !important; color: #fff !important; }
.ais-best.ais-sig .ais-btn:hover { filter: brightness(0.92); }
.ais-best.ais-sig .ais-lnk { color: var(--ais-sig); }

/* community rows */
.ais-sec { display: grid; gap: 4px; }
.ais-col > :not(.ais-status):not(.ais-seeall) + .ais-sec,
.ais-col > .ais-seeall + .ais-sec { border-top: 1px solid var(--ais-line); padding-top: 32px; }
.ais-list { display: grid; }
.ais-list > :first-child { padding-top: 12px; }
.ais-list > .ais-cc:first-child { padding-top: 18px; }
.ais-sec > .ais-chips { margin-top: 10px; }
.ais-cc { display: grid; grid-template-columns: 168px 1fr 24px; gap: 22px; padding: 22px 16px; margin: 0 -16px; border-radius: 12px; align-items: start; cursor: pointer; transition: background .15s; }
.ais-list .ais-cc + .ais-cc { border-top: 1px solid var(--ais-line); }
.ais-cc:hover { background: var(--ais-wash); }
.ais-cc .ais-pic { aspect-ratio: 4 / 3; border-radius: 12px; background: var(--ais-lav) center / cover; max-width: 100%; }
.ais-cc .ais-in { display: grid; gap: 4px; min-width: 0; }
.ais-cc h4 { font-size: 21px; font-weight: 900; color: var(--ais-ink); margin-bottom: 2px; }
.ais-cc .ais-desc { margin-top: 8px; font-size: 16px; line-height: 1.5; max-width: 60ch; color: var(--ais-muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ais-cc .ais-chev { grid-column: 3; align-self: center; color: var(--ais-ink); display: grid; place-items: center; }
.ais-cc.ais-sig { --ais-sig: #801337; }
.ais-cc.ais-sig.ais-architecture { --ais-sig: #801337; }
.ais-cc.ais-sig.ais-parklands { --ais-sig: #004E3D; }
.ais-cc.ais-sig.ais-geography { --ais-sig: #2E4B6F; }
.ais-cc.ais-sig.ais-water { --ais-sig: #29808F; }
.ais-cc.ais-sig h4 { color: var(--ais-sig); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; font-size: 18px; margin-top: 2px; }
.ais-cc.ais-sig .ais-chev { color: var(--ais-sig); }

/* page / news rows */
.ais-row { display: grid; gap: 5px; padding: 18px 0; cursor: pointer; }
.ais-list .ais-row + .ais-row { border-top: 1px solid var(--ais-line); }
.ais-row h4 { font-size: 19px; font-weight: 700; color: var(--ais-ink); }
.ais-row h4:hover { color: var(--ais-purple); }
.ais-row .ais-d { font-size: 15.5px; color: var(--ais-muted); max-width: 64ch; }
.ais-row.ais-news .ais-cat { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ais-muted); margin-bottom: 2px; }
.ais-hide { font-size: 15px; color: var(--ais-muted); padding-top: 12px; }
.ais-hide b { color: var(--ais-purple); font-weight: 700; cursor: pointer; }
.ais-seeall { margin-top: -14px; }

/* hand-off card */
.ais-findcard { background: var(--ais-wash); border-radius: 16px; padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.ais-findcard > div { flex: 1; min-width: 0; }
.ais-findcard h3 { font-size: 19px; font-weight: 900; color: var(--ais-ink); }
.ais-findcard p { font-size: 15px; color: var(--ais-muted); max-width: 52ch; margin-top: 3px; }
/* Keep the CTA at its natural pill size: never let the flex row squeeze or
   clip the "Find a Care Community" label (OHCHF-1376 styling). */
.ais-findcard .ais-btn { flex: none; align-self: center; }

/* support banner */
.ais-help { background: var(--ais-ink); color: #fff; border-radius: 20px; padding: 26px 28px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.ais-help h3 { color: #fff; font-size: 21px; font-weight: 900; }
.ais-help p { color: #CFC6EA; font-size: 15.5px; margin-top: 3px; max-width: 44ch; }
.ais-hbtn { display: inline-flex; color: #fff; white-space: nowrap; }
.ais-hb-d { display: grid; justify-items: end; gap: 2px; text-align: right; }
.ais-hb-l { font-size: 14px; font-weight: 700; color: #CFC6EA; }
.ais-hb-n { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 900; color: #fff; line-height: 1.1; }
.ais-hb-n svg { width: 20px; height: 20px; color: #fff; }
.ais-hb-m { display: none; }

/* status + skeleton */
.ais-status { font-size: 16px; color: var(--ais-muted); margin-top: -10px; margin-bottom: -6px; line-height: 1.5; }
.ais-status b { color: var(--ais-ink); font-weight: 700; }
.ais-status em { font-style: normal; color: var(--ais-purple); font-weight: 700; }
.ais-status .ais-dots { display: inline-flex; align-items: center; margin-right: 8px; vertical-align: middle; }
.ais-status .ais-dots i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ais-purple); margin-right: 3px; animation: ais-dot 1.2s infinite; }
.ais-status .ais-dots i:nth-child(2) { animation-delay: .2s; }
.ais-status .ais-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ais-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ais-sk { background: linear-gradient(90deg, var(--ais-lav) 25%, #F6F2FD 50%, var(--ais-lav) 75%); background-size: 200% 100%; border-radius: 6px; height: 14px; animation: ais-shimmer 1.4s linear infinite; margin-top: 6px; }
@keyframes ais-shimmer { to { background-position: -200% 0; } }
.ais-skel > :not(.ais-status) { animation: ais-breathe 1.8s ease-in-out infinite; }
@keyframes ais-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.ais-skel .ais-cc .ais-pic, .ais-skel .ais-best .ais-img { background: linear-gradient(90deg, var(--ais-lav) 25%, #F6F2FD 50%, var(--ais-lav) 75%); background-size: 200% 100%; animation: ais-shimmer 1.4s linear infinite; min-height: 0; }
.ais-skel .ais-cc:hover { background: none; }

/* motion */
.ais-fade { animation: ais-fade .35s ease-out both; }
@keyframes ais-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ais-col > .ais-fade:nth-child(2) { animation-delay: .06s; }
.ais-col > .ais-fade:nth-child(3) { animation-delay: .12s; }
.ais-col > .ais-fade:nth-child(4) { animation-delay: .18s; }
.ais-col > .ais-fade:nth-child(5) { animation-delay: .24s; }

/* focus */
.ais-col [tabindex="0"]:focus-visible { outline: 3px solid var(--ais-purple); outline-offset: 3px; border-radius: 12px; }
.ais-col .ais-row[tabindex="0"]:focus-visible { outline-offset: -3px; }
.ais-hd-row { display: flex; justify-content: space-between; align-items: baseline; }

@media (max-width: 860px) {
  .ais-bar { padding: 12px 14px; gap: 10px; min-height: 60px; }
  .ais-brand svg { width: 38px; height: 43px; }
  .ais-brand-sub { display: none; }
  .ais-col { padding: 24px 16px 40px; gap: 22px; }
  .ais-h-sec { font-size: 12px; }
  .ais-field input { font-size: 17px; }
  .ais-best { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .ais-best .ais-img { aspect-ratio: 16 / 9; min-height: 0; align-self: auto; }
  .ais-best h2 { font-size: 21px; }
  .ais-best .ais-why { font-size: 15px; }
  .ais-cc { grid-template-columns: 1fr 20px; gap: 10px 8px; padding: 18px 0; margin: 0; border-radius: 0; }
  .ais-cc .ais-pic { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .ais-cc .ais-in { grid-column: 1; }
  .ais-cc .ais-chev { grid-column: 2; grid-row: 2; align-self: start; margin-top: 4px; }
  .ais-cc h4 { font-size: 19px; }
  .ais-cc .ais-desc { font-size: 15px; max-width: none; }
  .ais-km { display: block; margin-top: 2px; }
  .ais-km::before { content: ""; margin: 0; }
  .ais-help { padding: 20px 18px; display: grid; gap: 14px; }
  .ais-hbtn { background: transparent; color: #fff; border: 3px solid #fff; border-radius: 72px; height: 42px; padding: 0 16px; font-size: 12px; justify-content: center; align-items: center; gap: 8px; width: max-content; }
  .ais-hb-d { display: none; }
  .ais-hb-m { display: inline-flex; align-items: center; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ais-overlay.open, .ais-overlay.closing, .ais-scrim.open, .ais-scrim.closing,
  .ais-fade, .ais-sk, .ais-skel > *, .ais-status .ais-dots i,
  .ais-overlay.ais-loading .ais-bar::after { animation: none; }
}