/* ============================================================================
 * Card Autocomplete — styling
 * ---------------------------------------------------------------------------
 * Shared by the homepage hero bar and the site header bar. Uses the arcane
 * theme CSS variables defined in templates/header.html :root block.
 * ========================================================================= */

.card-search-form {
    position: relative;
    width: 100%;
}

.card-search-input {
    width: 100%;
    background: var(--bg-elevated, #1a1a28);
    border: 1px solid var(--border-subtle, #2a2a40);
    color: var(--text-primary, #f4f4f5);
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 1rem;
    /* right padding leaves room for the optional help (?) button */
    padding: 0.65rem 2.5rem 0.65rem 2.5rem;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.card-search-input::placeholder {
    color: var(--text-muted, #71717a);
}

.card-search-input:focus {
    border-color: var(--accent-primary, #a855f7);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}

.card-search-icon {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1.1rem;
    color: var(--text-muted, #71717a);
    pointer-events: none;
}

.card-search-advanced-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.55rem;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent-primary, #a855f7);
    text-decoration: none;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

.card-search-advanced-link:hover {
    color: var(--text-accent, #c4b5fd);
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.45);
}

/* Compact variant for the site header. Sits inline to the right of the
   search form inside the flex wrapper. */
.card-search-advanced-link--compact {
    font-size: 0.75rem;
    margin-top: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Inline variant — sits inside the input, between the text and the "?" help
   button. Hidden by default; the laptop-width media query below swaps it in
   place of the external compact link to free horizontal space in the nav. */
.card-search-advanced-inline {
    display: none;
    position: absolute;
    top: 50%;
    right: 2.4rem;
    transform: translateY(-50%);
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--accent-primary, #a855f7);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

.card-search-advanced-inline:hover {
    color: var(--text-accent, #c4b5fd);
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.45);
}

/* -------- Dropdown -------- */

.card-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    /* Explicit opaque color — the homepage deliberately overrides
       --bg-elevated to a 60%-alpha variant so wisps show through section
       cards, and the dropdown must always fully cover what's behind it. */
    background-color: #1a1a28;
    border: 1px solid var(--border-subtle, #2a2a40);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    z-index: 100;
    padding: 0.25rem;
}

.card-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    color: var(--text-primary, #f4f4f5);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease;
}

.card-autocomplete-item:hover,
.card-autocomplete-item.active {
    background: var(--accent-primary-dim, rgba(168, 85, 247, 0.15));
}

.card-autocomplete-thumb {
    width: 34px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: #0a0a0f;
}

.card-autocomplete-thumb.placeholder {
    background: #0a0a0f;
}

.card-autocomplete-info {
    flex: 1;
    min-width: 0;
}

.card-autocomplete-name {
    font-weight: 500;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-autocomplete-meta {
    display: flex;
    gap: 0.6rem;
    font-size: 0.75rem;
    color: var(--text-muted, #71717a);
    margin-top: 2px;
}

.card-autocomplete-mana {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--text-accent, #c4b5fd);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

/* Explicit sizing so the symbols render correctly even on pages that
   don't have Tailwind's h-4/w-4 utility loaded. */
.mana-symbol {
    display: inline-block;
    height: 14px;
    width: 14px;
    vertical-align: middle;
}

.card-autocomplete-type {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-autocomplete-empty {
    padding: 0.75rem 0.9rem;
    color: var(--text-muted, #71717a);
    font-size: 0.9rem;
    text-align: center;
}

/* -------- Scryfall-syntax preview mode -------- */

.card-autocomplete-preview {
    cursor: pointer;
    padding: 0.15rem 0;
    border-radius: 6px;
    transition: background 0.12s ease;
}
.card-autocomplete-preview:hover {
    background: var(--accent-primary-dim, rgba(168, 85, 247, 0.15));
}

.card-autocomplete-preview-header {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-accent, #c4b5fd);
    padding: 0.6rem 0.75rem 0.45rem;
    border-bottom: 1px solid var(--border-subtle, #2a2a40);
    margin-bottom: 0.25rem;
}

.card-autocomplete-preview-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
}

.card-autocomplete-preview-icon {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary, #a855f7);
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.5);
}

.card-autocomplete-preview-label {
    flex: 0 0 108px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #71717a);
}

.card-autocomplete-preview-value {
    flex: 1;
    color: var(--text-primary, #f4f4f5);
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-autocomplete-preview-value.negate {
    color: var(--accent-danger, #ef4444);
}

.card-autocomplete-preview-footer {
    padding: 0.45rem 0.75rem 0.55rem;
    font-size: 0.72rem;
    color: var(--text-muted, #71717a);
    font-style: italic;
    border-top: 1px solid var(--border-subtle, #2a2a40);
    margin-top: 0.25rem;
    text-align: center;
}

/* ============================================
 * Homepage hero variant
 * ============================================ */

.card-search-hero {
    width: 100%;
    max-width: 640px;
    margin: 1.25rem auto 0;
}

.card-search-hero .card-search-input {
    font-size: 1.1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    padding-left: 3rem;
}

.card-search-hero .card-search-icon {
    left: 1rem;
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================
 * Header bar variant — compact, sits in the top nav
 * ============================================ */

/* Wrapper for the desktop header search. Flex row containing the search
   form and the "Advanced Search" link side-by-side. Bottom-aligns within
   the nav flex row so the input's bottom edge lines up with the nav
   buttons' bottom edge — the nav links are a hair taller because of their
   py-2 text padding, so centering them together leaves the input visually
   floating above the nav baseline. */
.card-search-header-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 360px;
    max-width: 38vw;
    align-self: flex-end;
}

.card-search-header {
    flex: 1;
    min-width: 0;
}

.card-search-header .card-search-input {
    font-size: 0.9rem;
    padding: 0.45rem 2rem 0.45rem 2.25rem;
}

.card-search-header .card-search-icon {
    width: 1rem;
    height: 1rem;
    left: 0.7rem;
}

/* Stage A — below 1536px: swap the external "Advanced" link for the inline
   variant inside the input AND start shrinking the search bar so the nav has
   more room before any link text has to wrap. */
@media (max-width: 1535px) {
    .card-search-header-wrap .card-search-advanced-link--compact {
        display: none;
    }
    .card-search-header .card-search-advanced-inline {
        display: inline;
    }
    /* Make room inside the input for "Advanced" + the "?" button. */
    .card-search-header .card-search-input {
        padding-right: 6.25rem;
    }
    /* Shrink the search bar a touch (was 360px). */
    .card-search-header-wrap {
        width: 300px;
    }
}

/* Stage B — below 1280px: shrink the search bar further. */
@media (max-width: 1279px) {
    .card-search-header-wrap {
        width: 260px;
    }
}

/* ============================================
 * Mobile: header bar collapses to a magnifying-glass icon that expands inline.
 * ============================================ */

.card-search-mobile-toggle {
    background: transparent;
    border: none;
    color: var(--text-secondary, #a1a1aa);
    padding: 0.4rem;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.card-search-mobile-toggle:hover {
    color: var(--accent-primary, #a855f7);
}

.card-search-mobile {
    display: none;
    padding: 0.5rem 0.75rem;
    background: var(--bg-surface, #12121a);
    border-bottom: 1px solid var(--border-subtle, #2a2a40);
}

.card-search-mobile.open {
    display: block;
}

/* ============================================
 * Syntax help (?) button + cheat-sheet panel
 * ============================================ */

.card-search-help-btn {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-subtle, #2a2a40);
    color: var(--text-muted, #71717a);
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.card-search-help-btn:hover,
.card-search-help-btn[aria-expanded="true"] {
    color: var(--accent-primary, #a855f7);
    border-color: var(--accent-primary, #a855f7);
    background: var(--accent-primary-dim, rgba(168, 85, 247, 0.15));
}

.card-search-header .card-search-help-btn {
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
    right: 0.4rem;
}

.card-search-help-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 320px;
    max-height: 480px;
    overflow-y: auto;
    /* Opaque — see note on .card-autocomplete-dropdown above. */
    background-color: #1a1a28;
    border: 1px solid var(--border-subtle, #2a2a40);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    z-index: 101;   /* above the autocomplete dropdown */
    display: none;
}

/* Narrow header bar — anchor the panel to the right edge so it doesn't
   shove off-screen when min-width > parent width. */
.card-search-header .card-search-help-panel {
    left: auto;
    right: 0;
    width: 360px;
}

.card-search-help-panel.open {
    display: block;
}

.card-search-help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle, #2a2a40);
    font-family: var(--font-display, 'Cinzel Decorative', serif);
    font-size: 0.85rem;
    color: var(--text-accent, #c4b5fd);
    position: sticky;
    top: 0;
    /* Opaque so the sticky header masks scrolled content underneath. */
    background-color: #1a1a28;
    z-index: 1;
}

.card-search-help-close {
    background: transparent;
    border: none;
    color: var(--text-muted, #71717a);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0 0.25rem;
    transition: color 0.15s ease;
}

.card-search-help-close:hover {
    color: var(--accent-primary, #a855f7);
}

.card-search-help-section {
    padding: 0.55rem 1rem 0.7rem;
    border-bottom: 1px solid var(--border-subtle, #2a2a40);
}

.card-search-help-section:last-child {
    border-bottom: none;
}

.card-search-help-section-title {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #71717a);
    margin-bottom: 0.35rem;
}

.card-search-help-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.22rem 0;
    align-items: baseline;
}

.card-search-help-code {
    flex: 0 0 38%;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.82rem;
    color: var(--text-accent, #c4b5fd);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-search-help-desc {
    flex: 1;
    font-size: 0.82rem;
    color: var(--text-secondary, #a1a1aa);
    font-family: var(--font-body, 'Outfit', sans-serif);
}