/* =========================================================
   Hardware Database – Page-specific styling
   File: /css/hardware-list.css
   Notes: No linear-gradient heroes (site rule)
   ========================================================= */


/* =========================================================
   Hero – Hardware Database
   ========================================================= */

.hero-hardware {
    position: relative;
    border-bottom: 3px solid rgba(25, 135, 84, 0.55);
    overflow: hidden;
}

/* Solid overlay for contrast (NO gradients) */
.hero-hardware::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-hardware > .container {
    position: relative;
}

/* Breadcrumb inside hero (if/when you add it) */
.hero-hardware .breadcrumb {
    font-size: 0.95rem;
}

.hero-hardware .breadcrumb a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

.hero-hardware .breadcrumb a:hover,
.hero-hardware .breadcrumb a:focus {
    color: #9dffcf;
    text-decoration: underline;
}

.hero-hardware .breadcrumb .active {
    color: rgba(255, 255, 255, 0.60);
}

.hero-hardware .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.45);
}

/* Tagline under H1 (optional) */
.hero-hardware-tagline {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
}

/* Intro text (optional) */
.hero-hardware-intro {
    color: rgba(255, 255, 255, 0.85);
}


/* =========================================================
   Filters / Search / Tags polish
   ========================================================= */

/* Make the filters area feel tighter and consistent */
#filter-type,
#filter-generation,
#sort-order,
#hardware-search {
    border-color: rgba(0, 0, 0, 0.18);
}

/* Improve focus visibility to match site style */
#filter-type:focus,
#filter-generation:focus,
#sort-order:focus,
#hardware-search:focus {
    border-color: rgba(77, 255, 154, 0.75);
    box-shadow: 0 0 0 0.25rem rgba(77, 255, 154, 0.18);
}

/* Clear filters button parity */
#clear-filters.btn {
    border-width: 2px;
}

/* Tag buttons: active state clearer */
#hardware-tags .btn.btn-outline-secondary {
    border-width: 2px;
}

#hardware-tags .btn.btn-outline-secondary.active {
    background-color: rgba(77, 255, 154, 0.18);
    border-color: rgba(77, 255, 154, 0.85);
    color: #0b0f0b;
}

#hardware-tags .btn.btn-outline-secondary:focus-visible {
    outline: 2px solid rgba(77, 255, 154, 0.80);
    outline-offset: 2px;
}


/* =========================================================
   Hardware Cards (parity with route panels)
   Target: <div class="card h-100 hardware-card route-panel">
   ========================================================= */

.hardware-card.route-panel {
    position: relative;
    overflow: hidden;

    border-left: 8px solid rgba(20, 108, 67, 0.80);
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.18);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-left-color 0.15s ease;

    cursor: pointer;
}

/* Subtle watermark (optional, safe even if missing) */
.hardware-card.route-panel::after {
    content: "";
    position: absolute;
    inset: 0;

    /* If you don’t have this asset, it simply won’t display */
    background-image: url('/img/gaming/hardware/hardware-bg.png');
    background-repeat: no-repeat;
    background-position: right -6px center;
    background-size: 220px auto;

    opacity: 0.05;
    filter: contrast(1.03);
    pointer-events: none;
}

@media (min-width: 992px) {
    .hardware-card.route-panel::after {
        opacity: 0.06;
        background-size: 250px auto;
    }
}

@media (max-width: 575px) {
    .hardware-card.route-panel::after {
        display: none;
    }
}

/* Hover */
@media (hover: hover) {
    .hardware-card.route-panel:hover {
        transform: translateY(-4px);
        border-left-color: rgba(77, 255, 154, 0.95);
        box-shadow: 0 0.85rem 1.6rem rgba(0, 0, 0, 0.22);
    }

    .hardware-card.route-panel:hover::after {
        opacity: 0.09;
        filter: contrast(1.06);
    }
}

/* Keyboard focus (card is clicked; supports focus-within if you later add links/buttons) */
.hardware-card.route-panel:focus-within {
    border-left-color: rgba(77, 255, 154, 0.95);
    outline: 3px solid rgba(77, 255, 154, 0.60);
    outline-offset: 2px;
    box-shadow:
        0 0 0 0.25rem rgba(77, 255, 154, 0.18),
        0 0.85rem 1.6rem rgba(0, 0, 0, 0.22);
}

/* Typography tweaks inside cards */
.hardware-card .card-title {
    margin-bottom: 0.25rem;
}

.hardware-card .card-text.small {
    line-height: 1.25rem;
}


/* =========================================================
   Loading / empty state polish
   ========================================================= */

#hardware-list p.text-muted,
#hardware-list p.text-danger {
    margin-bottom: 0;
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .hardware-card.route-panel {
        transition: none;
    }
}


/* =========================================================
   Mobile tuning
   ========================================================= */

@media (max-width: 576px) {
    .hero-hardware .display-5 {
        font-size: calc(1.6rem + 2vw);
    }
}


/* =========================================================
   Visual hierarchy improvements (ADDITIVE)
   Notes:
   - Does NOT remove/override working behaviour.
   - Improves scannability and contrast on dark pages.
   ========================================================= */

/* -------------------------
   Results count bar
   ------------------------- */

#results-count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Error state */
#results-count.text-danger {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.35);
}

/* -------------------------
   Collapsible section headers
   (Filters / Tags headers)
   Works if you add class="section-head" to those header rows.
   Safe even if class is not present.
   ------------------------- */

.section-head {
    padding: 0.35rem 0;
    margin-bottom: 0.75rem;
}

.section-head .h5 {
    letter-spacing: 0.2px;
}

/* Toggle buttons - higher contrast (keeps btn-outline-success) */
.section-head .btn {
    border-width: 2px;
}

/* -------------------------
   Hardware cards - clearer hierarchy
   ------------------------- */

.hardware-card .card-title {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.hardware-card .card-text.small {
    opacity: 0.9;
}

.hardware-card .card-text.small.text-muted {
    opacity: 0.75;
}

/* =========================================================
   Keyboard focus polish for hardware cards (ADDITIVE)
   Requires tabindex=0 on .hardware-card (added in JS)
   ========================================================= */

.hardware-card.route-panel:focus {
    outline: none;
}

/* Only show the strong ring for keyboard focus */
.hardware-card.route-panel:focus-visible {
    border-left-color: rgba(77, 255, 154, 0.95);
    outline: 3px solid rgba(77, 255, 154, 0.70);
    outline-offset: 3px;
    box-shadow:
        0 0 0 0.25rem rgba(77, 255, 154, 0.18),
        0 0.85rem 1.6rem rgba(0, 0, 0, 0.22);
}