/*
 * maconda Search
 *
 * Two presentations of one DOM tree, switched by a class that JS sets from the
 * element's `data-breakpoint` (NOT a media query — the breakpoint is a Bricks
 * control, and media queries can't read custom properties):
 *
 *   .is-desktop  the icon expands inline into a search bar
 *   .is-mobile   the icon opens a sheet below the header
 *   .is-inline   (PHP, not JS) always-open full-width bar, no toggle/overlay
 *
 * The resting state of both is identical (icon only), so the styles below
 * default to the collapsed desktop layout and there is no flash before JS runs.
 *
 * ── Overriding Relevanssi Live Ajax Search ──────────────────────────────────
 * The plugin fights us in three places, all handled at the end of this file:
 *
 *  1. wp_footer <style> block  — sets position/display/opacity on
 *     .relevanssi-live-search-results. It loads after this file, so we win on
 *     specificity (.maconda-search .foo beats .foo) rather than order.
 *  2. assets/styles/style.css  — visual defaults (315px wide, 175px min-height,
 *     white card, blue spinner). Same specificity fix.
 *  3. Inline styles from position_results() — left/top always, and width when
 *     the config uses width:'auto'. Inline declarations lose to !important
 *     author rules, which is why the geometry overrides carry !important.
 *     (The config registered in hooks.php uses width:'css' so the inline width
 *     is not written at all; the !important there is belt and braces.)
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

.maconda-search {
  /* Every --mcs-* below is a mapping onto the site's own design tokens, not a
     parallel palette. Bricks overwrites these with scoped #brxe-{id} rules when
     the style panel controls are used; the var() fallbacks are last-resort only
     (e.g. the element previewed outside the theme).

     Colour tokens match the set the mega menu already uses — they are defined
     site-side, not in the Bricks variables export.

     Sizes are in rem against the site's 10px root (1.6rem = 16px), the same
     convention as the mega menu. */
  --mcs-icon-size: 2rem;
  --mcs-stroke: 50;
  --mcs-width: min(34rem, 55vw);
  --mcs-radius: var(--radius, 5px);
  --mcs-ink: var(--color-ink, #14161a);
  --mcs-muted: var(--color-muted, #6b7280);
  --mcs-surface: var(--color-surface, #fff);
  --mcs-border: var(--color-border, rgba(20, 22, 26, .14));
  --mcs-accent: var(--brand-indigo, #3b3ce0);
  --mcs-focus: var(--color-focus, var(--mcs-accent));
  /* No token exists for a filled input, so derive one from ink rather than
     inventing a new site-level variable. */
  --mcs-field-bg: color-mix(in srgb, var(--mcs-ink) 5%, transparent);

  --mcs-tap: 4.4rem;            /* WCAG 2.2 target size floor (44px) */
  --mcs-gap: var(--space-2xs, .7rem);
  --mcs-results-max: 42vh;
  --mcs-z: 1000;
  /* Enter decelerates, which feels responsive on the way in. Reusing that same
     curve for the collapse spent 39% of the duration on the final 3% of the
     distance — the field appeared to stick just before disappearing. The exit
     curve is symmetric instead: measured across candidates it was both the
     quickest to start moving and left only a single frame of tail. A pure
     accelerate curve removed the tail too, but was slower off the mark. */
  --mcs-ease: cubic-bezier(.16, 1, .3, 1);
  --mcs-ease-exit: cubic-bezier(.4, 0, .6, 1);
  --mcs-duration: 420ms;
  --mcs-duration-exit: 260ms;

  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  color: var(--mcs-ink);
  font-family: var(--font-body, inherit);
}

/* The root's own z-index opens a stacking context, so a z-index on .mcs-surface
   can never lift it past a *sibling* — the mega menu sits at 20. The escape has
   to happen on the root itself, and only while open so the resting icon does not
   float above the page for no reason. */
.maconda-search.is-open { z-index: var(--mcs-z); }

.maconda-search *,
.maconda-search *::before,
.maconda-search *::after { box-sizing: border-box; }

.maconda-search [hidden] { display: none !important; }

.maconda-search button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.maconda-search :focus-visible {
  outline: 2px solid var(--mcs-focus);
  outline-offset: 2px;
}

.mcs-visually-hidden {
  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;
}

/* ── Icons ──────────────────────────────────────────────────────────────── */

.maconda-search .mcs-icon {
  display: block;
  width: var(--mcs-icon-size);
  height: var(--mcs-icon-size);
  flex: none;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--mcs-stroke);
  stroke-miterlimit: 10;
}

/* ── Toggle ─────────────────────────────────────────────────────────────── */

.mcs-toggle {
  display: grid;
  place-items: center;
  width: var(--mcs-tap);
  height: var(--mcs-tap);
  flex: none;
  border-radius: 50%;
  transition: background-color 200ms var(--mcs-ease), color 200ms var(--mcs-ease);
}

/* Hover only for real pointers: on touch, :hover sticks after a tap and left
   a grey circle behind the X. */
@media (hover: hover) {
  .mcs-toggle:hover { background-color: var(--mcs-field-bg); }
}

/* Search and close share one grid cell and cross-fade through a quarter turn. */
.mcs-toggle__icons {
  display: grid;
  width: var(--mcs-icon-size);
  height: var(--mcs-icon-size);
}

.mcs-toggle__icons .mcs-icon {
  grid-area: 1 / 1;
  transition: opacity 220ms var(--mcs-ease), transform 320ms var(--mcs-ease);
}

.mcs-toggle .mcs-icon--close {
  opacity: 0;
  transform: rotate(-90deg) scale(.55);
}

.maconda-search.is-open .mcs-toggle .mcs-icon--search {
  opacity: 0;
  transform: rotate(90deg) scale(.55);
}

.maconda-search.is-open .mcs-toggle .mcs-icon--close {
  opacity: 1;
  transform: none;
}

/* ── Surface (desktop: the expanding bar) ───────────────────────────────── */

.mcs-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mcs-bar {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* The width animation happens here. .mcs-form keeps its full width throughout
   so the field contents never reflow mid-transition. */
/* visibility, not just zero width: a 0px overflow-hidden input is still
   focusable, and it is the only tab-order guard on browsers without `inert`
   (the markup ships inert on the surface for browsers that do support it).
   The 0s delay holds it visible for the duration of the collapse animation. */
.mcs-clip {
  width: 0;
  overflow: hidden;
  /* Load-bearing: the visually-hidden button labels inside the field are
     position:absolute. Without a positioned ancestor *inside* this clipper
     their containing block resolves to .mcs-surface, which sits outside it —
     absolutely positioned boxes escape an ancestor's overflow:hidden in that
     case, so the collapsed field leaked ~330px of page-wide scroll as soon as
     the clear button appeared. */
  position: relative;
  visibility: hidden;
  /* This rule is the *closed* state, so its timing governs the collapse.
     Opacity finishes at 75% of the width duration on purpose: the last stretch
     of the collapse is a narrow, hard-edged panel with a 1px border sitting
     right next to the toggle, which stays conspicuous for as long as it is on
     screen no matter how fast the width tail is. Fading it out first means the
     field is visually gone before the geometry finishes settling.
     The visibility delay still tracks the full width duration, so the field
     stops being focusable exactly when it finishes shrinking. */
  opacity: 0;
  transition:
    width var(--mcs-duration-exit) var(--mcs-ease-exit),
    opacity calc(var(--mcs-duration-exit) * .75) var(--mcs-ease-exit),
    visibility 0s linear var(--mcs-duration-exit);
}

.maconda-search.is-open .mcs-clip {
  width: var(--mcs-width);
  visibility: visible;
  opacity: 1;
  transition:
    width var(--mcs-duration) var(--mcs-ease),
    opacity calc(var(--mcs-duration) * .4) var(--mcs-ease),
    visibility 0s;
}

/* Desktop: the field overlays whatever sits to its left instead of pushing it.
   Absolute positioning collapses the root to the toggle's width, so expanding
   costs no layout at all — `right: 100%` then pins the field's right edge just
   left of the toggle and the width animation grows it leftwards. */
.maconda-search.is-desktop .mcs-surface {
  position: absolute;
  top: 50%;
  right: calc(100% + var(--mcs-gap));
  transform: translateY(-50%);
}

/* ── Form ───────────────────────────────────────────────────────────────── */

.mcs-form {
  display: flex;
  align-items: center;
  gap: .2rem;
  width: var(--mcs-width);
  height: var(--mcs-tap);
  padding-inline: .4rem;
  border-radius: var(--mcs-radius);
  /* The field must be opaque: on desktop it is absolutely positioned and
     overlays the nav, and --mcs-field-bg is a translucent tint. Painting the
     tint as an image layer over an opaque surface keeps the token-derived
     colour while making the field solid. */
  background-color: var(--mcs-surface);
  background-image: linear-gradient(var(--mcs-field-bg), var(--mcs-field-bg));
  /* Inset so the ring is not clipped by .mcs-clip's overflow: hidden. */
  box-shadow: inset 0 0 0 1px var(--mcs-border);
  transition: box-shadow 200ms var(--mcs-ease);
}

.mcs-form:focus-within { box-shadow: inset 0 0 0 2px var(--mcs-focus); }

/* The field already shows its own ring on focus-within. */
.mcs-form :focus-visible { outline-offset: -2px; }
.mcs-input:focus-visible { outline: none; }

.mcs-submit,
.mcs-clear {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  flex: none;
  border-radius: 50%;
  color: var(--mcs-muted);
  transition: color 180ms var(--mcs-ease), background-color 180ms var(--mcs-ease);
}

@media (hover: hover) {
  .mcs-submit:hover,
  .mcs-clear:hover {
    color: var(--mcs-ink);
    background-color: rgba(20, 22, 26, .06);
  }
}

.mcs-submit .mcs-icon,
.mcs-clear .mcs-icon {
  width: calc(var(--mcs-icon-size) * .8);
  height: calc(var(--mcs-icon-size) * .8);
}

.mcs-input {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 .2rem;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-weight: var(--font-weight-regular, 400);
  /* max(16px, …) is deliberate: iOS Safari zooms the viewport when a focused
     input is under 16px, and --text-0 bottoms out at 15.2px. */
  font-size: max(16px, var(--text-0, 1.6rem));
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
}

.mcs-input::placeholder { color: var(--mcs-muted); opacity: 1; }

/* Chrome/Safari draw their own clear affordance; we ship our own button. */
.mcs-input::-webkit-search-decoration,
.mcs-input::-webkit-search-cancel-button,
.mcs-input::-webkit-search-results-button { -webkit-appearance: none; display: none; }

/* ── Results shell ──────────────────────────────────────────────────────── */

.mcs-results {
  position: absolute;
  top: calc(100% + var(--mcs-gap));
  right: 0;
  width: var(--mcs-width);
  max-height: var(--mcs-results-max);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .4rem;
  border-radius: min(var(--mcs-radius), 1.4rem); /* caps a pill radius on the card */
  background-color: var(--mcs-surface);
  box-shadow: 0 .2rem .8rem rgba(20, 22, 26, .06), 0 1.6rem 4rem rgba(20, 22, 26, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.4rem);
  pointer-events: none;
  transition: opacity 200ms var(--mcs-ease), transform 260ms var(--mcs-ease), visibility 200ms;
}

.maconda-search.has-results .mcs-results {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* ── Mobile: full-screen overlay ────────────────────────────────────────── */

/* The sheet starts below the header (JS measures --mcs-sheet-top on open), so
   the logo stays in view and the header toggle, now an X, is the close control. */
.maconda-search.is-mobile .mcs-surface {
  position: fixed;
  inset: var(--mcs-sheet-top, 0) 0 0;
  z-index: var(--mcs-z);
  display: flex;
  flex-direction: column;
  background-color: var(--mcs-surface);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.2rem);
  transition: opacity 240ms var(--mcs-ease), transform 320ms var(--mcs-ease), visibility 240ms;
}

.maconda-search.is-mobile.is-open .mcs-surface {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.maconda-search.is-mobile .mcs-bar {
  gap: var(--mcs-gap);
  padding: var(--space-xs, 1.1rem) var(--space-s, 1.5rem);
  border-bottom: 1px solid var(--mcs-border);
}

.maconda-search.is-mobile .mcs-clip {
  width: auto;
  flex: 1 1 auto;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  transition: none;
}

.maconda-search.is-mobile .mcs-form { width: 100%; }

.maconda-search.is-mobile .mcs-results {
  position: static;
  width: auto;
  max-height: none;
  flex: 1 1 auto;
  padding: var(--space-2xs, .7rem) var(--space-s, 1.5rem) var(--space-l, 3.8rem);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  -webkit-overflow-scrolling: touch;
}

/* ── Inline: always-open bar for page content ───────────────────────────── */
/* No toggle, no close, no breakpoint. The bar fills its container and the
   suggestions still drop below it, full width, so they overlay whatever sits
   underneath (e.g. a sidebar) rather than pushing it down. */

.maconda-search.is-inline {
  display: block;
  width: 100%;
  --mcs-width: 100%;
}

.maconda-search.is-inline .mcs-clip {
  width: 100%;
  visibility: visible;
  opacity: 1;
  transition: none;
}

.maconda-search.is-inline .mcs-results {
  right: auto;
  left: 0;
}

/* Scroll lock while the overlay is up. */
html.mcs-lock,
html.mcs-lock body { overflow: hidden !important; }

/* The mega menu's toggle would sit beside the search X with nothing to open
   above the sheet. visibility keeps its slot, so the logo and X do not shift. */
html.mcs-lock .maconda-menu-toggle { visibility: hidden; }

/* ── Relevanssi Live Ajax Search markup ─────────────────────────────────── */
/* See the header comment for why these carry the specificity/!important they
   do. Every selector here is scoped to .maconda-search, so search forms
   elsewhere on the site keep the plugin's own presentation. */

.maconda-search .relevanssi-live-search-results {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  max-height: none;
  overflow: visible !important;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  transition: none;
}

.maconda-search .live-ajax-messages:empty { display: none; }

.maconda-search .rlv-has-spinner {
  width: 2rem;
  height: 2rem;
  margin: 1.6rem auto;
  border: 2px solid var(--mcs-border);
  border-right-color: transparent;
}

.maconda-search .rlv-has-spinner::after { display: none; }

.maconda-search .relevanssi-live-search-result-status p,
.maconda-search .relevanssi-live-search-no-results,
.maconda-search .relevanssi-live-search-didyoumean {
  margin: 0;
  padding: var(--space-2xs, .7rem) var(--space-xs, 1rem);
  border: 0;
  color: var(--mcs-muted);
  font-size: var(--text-label, 1.2rem);
}

.maconda-search .relevanssi-live-search-result p {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
}

/* The plugin's own stylesheet truncates titles to a single line. Clamping to
   two lines instead keeps long post titles readable without letting one result
   dominate the list. */
.maconda-search .relevanssi-live-search-result a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  padding: var(--space-xs, 1rem);
  font-size: var(--text-action, 1.4rem);
  line-height: 1.35;
  border-radius: min(var(--mcs-radius), 1rem);
  color: inherit;
  text-decoration: none;
  white-space: normal !important;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 140ms var(--mcs-ease), color 140ms var(--mcs-ease);
}

.maconda-search.is-mobile .relevanssi-live-search-result a {
  padding: var(--space-s, 1.4rem) var(--space-xs, 1rem);
}

.maconda-search .relevanssi-live-search-result a:hover,
.maconda-search .relevanssi-live-search-result a:focus-visible {
  background-color: var(--mcs-field-bg);
  color: var(--mcs-ink);
}

/* The plugin adds this class as arrow keys move through the list. */
.maconda-search .relevanssi-live-search-result--focused { background: none; }

.maconda-search .relevanssi-live-search-result--focused a {
  background-color: var(--mcs-field-bg);
  color: var(--mcs-ink);
}

/* ── "All results" row ──────────────────────────────────────────────────── */
/* Appended by JS after the plugin's results wrapper, so it always reads as the
   last row of the list. */

.mcs-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs, .7rem);
  margin-top: .4rem;
  padding: var(--space-xs, 1rem);
  border-top: 1px solid var(--mcs-border);
  border-radius: min(var(--mcs-radius), 1rem);
  color: var(--mcs-accent);
  font-size: var(--text-action, 1.4rem);
  font-weight: var(--font-weight-medium, 500);
  text-decoration: none;
  transition: background-color 140ms var(--mcs-ease);
}

.mcs-all:hover,
.mcs-all:focus-visible { background-color: var(--mcs-field-bg); }

.mcs-all__arrow {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  transition: transform 220ms var(--mcs-ease);
}

.mcs-all:hover .mcs-all__arrow { transform: translateX(.3rem); }

.maconda-search.is-mobile .mcs-all {
  padding: var(--space-s, 1.4rem) var(--space-xs, 1rem);
  margin-top: var(--space-2xs, .7rem);
}

/* ── Builder ────────────────────────────────────────────────────────────── */

.maconda-search .mcs-builder-notice {
  margin: 0;
  padding: var(--space-xs, 1.1rem);
  color: var(--mcs-muted);
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .maconda-search,
  .maconda-search * {
    transition-duration: .01ms !important;
  }
}