/**
 * Search modal — structural baseline only.
 *
 * Everything here is what the overlay needs to *work*: it covers the viewport,
 * it sits above the page, the page behind it cannot scroll, and the trigger
 * swaps to its close state when open. Looks — the trigger's chrome, the
 * overlay's background, where it starts under a sticky header, which close
 * affordance shows at which breakpoint — are left to the theme, so every
 * selector below is a single class it can outrank without a fight.
 *
 * Two hooks are provided for the common theme adjustments:
 *   --tas-search-modal-top    where the overlay starts, below any admin bar
 *   --tas-search-modal-z      stacking order against the site header
 */

.tas__search-modal-widget {
    position: relative;
}

/* ── Trigger ────────────────────────────────────────────────────── */

.tas__search-modal-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.tas__search-modal-trigger__state {
    display: inline-flex;
    align-items: center;
    gap: inherit;
}

.tas__search-modal-trigger-icon {
    display: inline-flex;
}

/* The trigger carries both states so a theme can use it as the close control
   (mobile headers usually do) or hide the close state and close from inside
   the dialog instead (usual on desktop, where the overlay covers the trigger).

   The close state also ships with the `hidden` attribute, which covers the
   moment before this stylesheet arrives — Elementor prints widget styles in
   the body. Revealing it below deliberately overrides that attribute: author
   rules outrank the UA's `[hidden] { display: none }` whatever the
   specificity. */
.tas__search-modal-trigger__state--close {
    display: none;
}

.tas__search-modal-trigger[aria-expanded='true'] .tas__search-modal-trigger__state--open {
    display: none;
}

.tas__search-modal-trigger[aria-expanded='true'] .tas__search-modal-trigger__state--close {
    display: inline-flex;
}

/* ── Overlay ────────────────────────────────────────────────────── */

/* The admin bar offset is measured and set by the script on open, so a logged-in
   editor gets the overlay below the toolbar rather than under it. A theme's
   --tas-search-modal-top is its own offset (a sticky header, say) and stacks on
   top of it. */
.tas__search-modal {
    position: fixed;
    top: calc(var(--tas-search-modal-top, 0px) + var(--tas-admin-bar-offset, 0px));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--tas-search-modal-z, 99999);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tas__search-modal[hidden] {
    display: none;
}

.tas__search-modal--open {
    opacity: 1;
}

.tas__search-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.tas__search-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow-y: auto;
    background: #fff;
}

.tas__search-modal__header {
    display: flex;
    justify-content: flex-end;
    flex: none;
}

.tas__search-modal-close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.tas__search-modal__body {
    padding: 0 16px 24px;
}

/* ── Page behind the overlay ────────────────────────────────────── */

/* Pinned rather than `overflow: hidden`, which iOS Safari ignores. The script
   sets `top` to the body's measured position so pinning does not jump the page,
   and pads the right by the scrollbar's width so losing it does not slide the
   layout — border-box keeps that padding inside the 100%. */
body.tas-search-modal-open {
    position: fixed;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}