/* ==========================================================================
   Design System — Search Overlay
   Feature: 006-navigation-header
   Task: T008 (FR-011, FR-013)
   Satisfies: TS-006, TS-009, TS-010, TS-011, TS-012
   ========================================================================== */

/* --------------------------------------------------------------------------
   Screen-reader only utility
   -------------------------------------------------------------------------- */

.magica-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Search trigger button (injected into header by JS)
   -------------------------------------------------------------------------- */

.magica-search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.magica-search-trigger:hover,
.magica-search-trigger:focus-visible {
    background: var(--color-primary);
    color: var(--color-light);
    outline: none;
}

/* --------------------------------------------------------------------------
   Overlay backdrop
   -------------------------------------------------------------------------- */

.magica-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(30, 27, 75, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.magica-search-overlay[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

/* --------------------------------------------------------------------------
   Inner panel
   -------------------------------------------------------------------------- */

.magica-search-inner {
    position: relative;
    background: var(--color-bg);
    border-radius: 12px;
    padding: var(--space-md);
    width: min(640px, calc(100vw - var(--space-md) * 2));
    box-shadow: 0 20px 60px rgba(30, 27, 75, 0.18);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Search form
   -------------------------------------------------------------------------- */

.magica-search-form {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex: 1;
    min-width: 0;
}

.magica-search-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px var(--space-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-bg);
    outline: none;
    transition: border-color 0.2s;
}

.magica-search-input:focus {
    border-color: var(--color-primary);
}

.magica-search-input::placeholder {
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Submit button
   -------------------------------------------------------------------------- */

.magica-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: var(--color-primary);
    color: var(--color-light);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.magica-search-submit:hover,
.magica-search-submit:focus-visible {
    background: var(--color-primary-dark);
    outline: none;
}

/* --------------------------------------------------------------------------
   Close button
   -------------------------------------------------------------------------- */

.magica-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.magica-search-close:hover,
.magica-search-close:focus-visible {
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion — disable all overlay transitions (FR-011, SC-008)
   Satisfies: TS-012
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .magica-search-overlay,
    .magica-search-trigger,
    .magica-search-submit,
    .magica-search-close,
    .magica-search-input {
        transition: none !important;
    }
}