/*
 * components/search-drawer.css — the header search drawer.
 *
 * Root classes: .fcs-search-toggle (the utility bar magnifier),
 * .fcs-search-drawer (the drawer itself).
 *
 * Markup: fcs_search_toggle_button() and fcs_search_drawer() in functions.php.
 * Behaviour: "Search drawer" in assets/js/header.js.
 *
 * No Figma frame exists for the drawer — the design only has a hidden 448px
 * field in the Utility Bar. Layout follows the reference agreed for the build:
 * a white bar dropping from the top of the viewport over the utility bar, a
 * bordered input with a square submit button joined to it, and the close X
 * beside them. A light scrim covers the page and closes the drawer on click.
 *
 * Open/closed: the drawer is [hidden] until header.js opens it, then .is-open
 * runs the slide. base/reset.css zeroes the transitions under
 * prefers-reduced-motion, and header.js does not wait for them in that case.
 */

/* ====== TOGGLE (utility bar) ====== */

/*
 * The <figure> around it keeps .fcs-utility-bar__search-icon, so the icon size
 * and the hover fade come from layout/header.css. This only resets the button.
 */
.fcs-search-toggle {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.fcs-search-toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--link);
  outline-offset: 4px;
}

/* ====== DRAWER ====== */

.fcs-search-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--fcs-z-dialog);
}

/* An explicit rule, so no display value set on the root can override it. */
.fcs-search-drawer[hidden] {
  display: none;
}

.fcs-search-drawer__scrim {
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 30%);
  opacity: 0;
  transition: opacity var(--fcs-transition-slow);
}

/*
 * Pinned below the WordPress admin bar when it is showing. Core sets this
 * variable on <html> only for logged-in users, so the fallback is flush at 0.
 */
.fcs-search-drawer__panel {
  position: absolute;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  background-color: var(--wp--preset--color--background);
  box-shadow: var(--fcs-shadow-md);
  transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px)));
  transition: transform var(--fcs-transition-slow);
}

.fcs-search-drawer.is-open .fcs-search-drawer__scrim {
  opacity: 1;
}

.fcs-search-drawer.is-open .fcs-search-drawer__panel {
  transform: translateY(0);
}

/*
 * Derived mobile behaviour (no mobile design): at Small the row is 64px with
 * the site's 20px gutter — the same height as the utility bar it covers — and
 * the input takes whatever width the X leaves it.
 */
.fcs-search-drawer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 64px;
  max-width: var(--fcs-wide);
  margin-inline: auto;
  padding: 8px 20px;
}

.fcs-search-drawer__form {
  display: flex;
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* Visually hidden; the placeholder is not a label for assistive tech. */
.fcs-search-drawer__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * The input and the submit button read as one control: rounded on the outer
 * left (here) and outer right (the button), square where they meet.
 *
 * Two classes deep on purpose — forms.css styles every
 * `input[type="search"]`, which outranks a single class, so with one class
 * its radius and right border won and the field showed rounded on both ends.
 */
.fcs-search-drawer .fcs-search-drawer__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--wp--preset--color--stroke);
  border-right: 0;
  border-radius: var(--wp--preset--border-radius--medium) 0 0 var(--wp--preset--border-radius--medium);
  font-size: var(--wp--preset--font-size--medium);
  -webkit-appearance: none;
  appearance: none;
}

.fcs-search-drawer .fcs-search-drawer__input:focus {
  outline: 2px solid var(--wp--preset--color--link);
  outline-offset: -2px;
}

/*
 * Submit — a 48px square joined to the input. The magnifier is Search.svg used
 * as a mask, so it is drawn white without a second copy of the icon.
 */
.fcs-search-drawer__submit {
  flex-shrink: 0;
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 var(--wp--preset--border-radius--medium) var(--wp--preset--border-radius--medium) 0;
  background-color: var(--wp--preset--color--button-primary);
  cursor: pointer;
  transition: background-color var(--fcs-transition);
}

.fcs-search-drawer__submit::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  background-color: #ffffff;
  -webkit-mask: url("../../images/icons/Search.svg") center / contain no-repeat;
  mask: url("../../images/icons/Search.svg") center / contain no-repeat;
}

.fcs-search-drawer__submit:hover,
.fcs-search-drawer__submit:focus-visible {
  background-color: var(--wp--preset--color--primary);
}

.fcs-search-drawer__submit:focus-visible {
  outline: 2px solid var(--wp--preset--color--link);
  outline-offset: 2px;
}

/* Close X — the same asset and 40px target as the mobile menu's close button. */
.fcs-search-drawer__close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: url("../../images/icons/FCS_Close.svg") center / 24px 24px no-repeat;
  cursor: pointer;
  transition: opacity var(--fcs-transition);
}

.fcs-search-drawer__close:hover,
.fcs-search-drawer__close:focus-visible {
  opacity: 0.7;
}

.fcs-search-drawer__close:focus-visible {
  outline: 2px solid var(--wp--preset--color--link);
  outline-offset: 2px;
}

/* --- Medium (768px+): the field stops stretching --- */

@media (min-width: 768px) {
  /* The Figma field is 448px wide; the button makes up the rest of the row. */
  .fcs-search-drawer__form {
    flex: 0 1 calc(448px + 48px);
  }
}

/* --- Large (1024px+): the utility bar's 80px row --- */

@media (min-width: 1024px) {
  .fcs-search-drawer__inner {
    min-height: 80px;
  }
}