/*
 * Nav search — icon trigger (inline with the menu) + modal.
 * Loaded only when the Primary menu carries the trigger; see inc/nav-search.php.
 */

/* ── Trigger ──
 * Sits as a menu <li> so it lands wherever Alain drags it in Appearance > Menus
 * — next to Contact by default. Styled as a utility, not a nav link: no
 * uppercase/letter-spacing inheritance from .nav__menu .menu-item > a. */
.nav__menu-item--search { display: flex; align-items: center; }

.nav__search-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  color: var(--color-navy);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nav__search-toggle:hover { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.nav__search-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── Modal ── */
.kdpc-search-modal { position: fixed; inset: 0; z-index: 1000; }
.kdpc-search-modal[hidden] { display: none; }

.kdpc-search-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(38, 38, 95, 0.6); /* P&C navy at 60% */
  opacity: 0; transition: opacity 0.2s ease;
}
.kdpc-search-modal.is-open .kdpc-search-modal__backdrop { opacity: 1; }

.kdpc-search-modal__panel {
  position: relative;
  max-width: 640px;
  margin: 12vh auto 0;
  background: #fff;
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: translateY(-8px); opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.kdpc-search-modal.is-open .kdpc-search-modal__panel { transform: translateY(0); opacity: 1; }

.kdpc-search-modal__close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--color-navy); font-size: 18px;
  border-radius: 4px;
}
.kdpc-search-modal__close:hover { background: var(--color-border-light); }
.kdpc-search-modal__close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.kdpc-search-modal__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-navy);
  margin-bottom: 16px;
}
.kdpc-search-modal__row { display: flex; gap: 0; }

.kdpc-search-modal__input {
  flex: 1; height: 48px;
  border: 1px solid var(--color-border-light); border-right: none;
  border-radius: 4px 0 0 4px;
  padding: 0 16px;
  font-size: 16px; /* 16px avoids the iOS focus zoom */
  font-family: var(--font-body);
}
.kdpc-search-modal__input:focus { outline: none; border-color: var(--color-primary); }

.kdpc-search-modal__submit {
  height: 48px; padding: 0 24px;
  border: none; border-radius: 0 4px 4px 0;
  background: var(--color-navy); color: #fff;
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.9px;
  font-size: 15px; cursor: pointer;
}
.kdpc-search-modal__submit:hover { background: var(--color-primary); }
.kdpc-search-modal__submit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Lock the page behind the modal */
.kdpc-search-open { overflow: hidden; }

@media (max-width: 768px) {
  .kdpc-search-modal__panel { margin: 8vh 16px 0; padding: 32px 20px; }
  .kdpc-search-modal__label { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .kdpc-search-modal__backdrop,
  .kdpc-search-modal__panel,
  .nav__search-toggle { transition: none; }
}

/* ── Mobile drawer ──
 * The drawer renders the SAME `primary` menu, so the trigger item appears there
 * too — and the drawer footer already has a real inline search form. Showing
 * both is redundant, and a modal stacked on an open drawer is worse than the
 * form that's already visible. Hide the trigger in the drawer; the footer form
 * stays as mobile's search. */
.mobile-menu__list .nav__menu-item--search { display: none; }