/* ============================================================
   Inar Guide Child Theme — assets/firmware.css
   Styles every .ig-fw-* class used in inc/firmware-helpers.php and
   firmware-templates/*.php. Structural approach and the two
   responsive breakpoints mirror AFF/assets/css/firmware.css, but
   re-themed to inarguide's own dark UI tokens (read from
   assets/header.css: --ig-dark, --ig-inv, --ig-accent, etc.) instead
   of AFF's light theme. This file depends on ig-header being enqueued
   first (see functions.php) for the --ig-* tokens below.
   ============================================================ */

:root {
    --ig-fw-surface:      var(--ig-dark-2, #161820);
    --ig-fw-surface-2:    var(--ig-dark-3, #1c1e27);
    --ig-fw-page-bg:      var(--ig-dark, #0f1117);
    --ig-fw-border:       var(--ig-border-dark, rgba(255,255,255,0.1));
    --ig-fw-text:         var(--ig-inv, #f4f3f1);
    --ig-fw-text-muted:   var(--ig-inv-muted, #c4c6d0);
    --ig-fw-accent:       var(--ig-accent, #c2410c);
    --ig-fw-accent-hover: var(--ig-accent-hover, #9a3412);
    --ig-fw-accent-bright:var(--ig-accent-bright, #ea580c);
    --ig-fw-danger:       #dc3545;
    --ig-fw-danger-bg:    #2a1613;
    --ig-fw-warning-bg:   #2a2410;
    --ig-fw-warning-border: #b45309;
    --ig-fw-radius-md:    var(--r-md, .5rem);
    --ig-fw-radius-sm:    var(--r-md, .5rem);
    --ig-fw-space-2:      var(--s2, .5rem);
    --ig-fw-space-3:      var(--s3, .75rem);
    --ig-fw-space-4:      var(--s4, 1rem);
    --ig-fw-space-5:      var(--s5, 1.25rem);
    --ig-fw-space-6:      var(--s6, 1.5rem);
    --ig-fw-wide:         var(--ig-wide, 1200px);
}

.ig-fw-page {
    background: var(--ig-fw-page-bg);
    color: var(--ig-fw-text);
    font-family: var(--font-body, 'Satoshi', 'Helvetica Neue', sans-serif);
}

.ig-fw-container {
    max-width: var(--ig-fw-wide);
    margin: 0 auto;
    padding: 0 var(--ig-fw-space-4);
}

/* ---- Breadcrumbs ---- */

.ig-fw-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px;
    margin: var(--ig-fw-space-4) 0 0;
    background: var(--ig-fw-surface);
    border: 1px solid var(--ig-fw-border);
    border-radius: 999px;
    font-size: 0.82rem;
    width: fit-content;
}

.ig-fw-breadcrumb a {
    color: var(--ig-fw-text-muted);
    text-decoration: none;
    font-weight: 500;
}

.ig-fw-breadcrumb a:hover {
    color: var(--ig-fw-accent-bright);
    text-decoration: underline;
}

.ig-fw-crumb-current {
    color: var(--ig-fw-text);
    font-weight: 700;
}

.ig-fw-crumb-sep {
    color: var(--ig-fw-text-muted);
    font-size: 0.75rem;
    opacity: 0.6;
}

/* ---- Hero ---- */

.ig-fw-hero {
    background: var(--ig-fw-surface);
    border-bottom: 1px solid var(--ig-fw-border);
    padding: var(--ig-fw-space-6) 0;
}

.ig-fw-hero-inner {
    max-width: var(--ig-fw-wide);
    margin: 0 auto;
    padding: 0 var(--ig-fw-space-4);
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--ig-fw-space-6);
    align-items: stretch;
}

.ig-fw-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--ig-fw-space-3);
    min-width: 0;
}

.ig-fw-brand-badge {
    display: inline-block;
    width: fit-content;
    background: rgba(194, 65, 12, 0.16);
    color: var(--ig-fw-accent-bright);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 12px;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--font-display, 'Cabinet Grotesk', 'Arial Black', sans-serif);
}
a.ig-fw-brand-badge:hover,
a.ig-fw-brand-badge:focus-visible {
    background: rgba(194, 65, 12, 0.3);
}

.ig-fw-hero-title {
    font-family: var(--font-display, 'Cabinet Grotesk', 'Arial Black', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.25;
    font-weight: 800;
    color: var(--ig-fw-text);
    margin: 0;
}

.ig-fw-hero-sub {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ig-fw-text-muted);
    margin: 0;
}

.ig-fw-hero-sub + .ig-fw-hero-sub {
    margin-top: var(--ig-fw-space-3);
}

/* ---- Spec card ---- */

.ig-fw-spec-card {
    background: var(--ig-fw-surface-2);
    border: 1px solid var(--ig-fw-border);
    border-radius: var(--ig-fw-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ig-fw-spec-card-header {
    display: flex;
    align-items: center;
    gap: var(--ig-fw-space-2);
    padding: var(--ig-fw-space-4);
    border-bottom: 1px solid var(--ig-fw-border);
    font-size: 1rem;
    color: var(--ig-fw-text);
}

.ig-fw-spec-card-emoji {
    font-size: 1.25rem;
}

.ig-fw-spec-list {
    margin: 0;
    padding: var(--ig-fw-space-2) 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ig-fw-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ig-fw-space-3);
    padding: 8px var(--ig-fw-space-4);
    font-size: 0.85rem;
    border-bottom: 1px solid var(--ig-fw-border);
    flex-grow: 1;
}

.ig-fw-spec-row:last-child {
    border-bottom: none;
}

.ig-fw-spec-row dt {
    color: var(--ig-fw-text-muted);
    font-weight: 500;
}

.ig-fw-spec-row dd {
    margin: 0;
    color: var(--ig-fw-text);
    font-weight: 600;
    text-align: right;
}

/* ---- Main layout ---- */

.ig-fw-main {
    padding: var(--ig-fw-space-6) 0;
}

.ig-fw-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--ig-fw-space-6);
    align-items: start;
}

.ig-fw-content {
    display: flex;
    flex-direction: column;
    gap: var(--ig-fw-space-5);
    min-width: 0;
}

.ig-fw-section h2 {
    font-family: var(--font-display, 'Cabinet Grotesk', 'Arial Black', sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ig-fw-text);
    margin: 0 0 var(--ig-fw-space-3);
    padding-bottom: var(--ig-fw-space-2);
    border-bottom: 2px solid var(--ig-fw-border);
}

.ig-fw-prose p {
    line-height: 1.7;
    color: var(--ig-fw-text);
}

/* ---- Warning box ---- */

.ig-fw-warning {
    display: flex;
    gap: var(--ig-fw-space-3);
    align-items: flex-start;
    background: var(--ig-fw-danger-bg);
    border-left: 4px solid var(--ig-fw-danger);
    border-radius: var(--ig-fw-radius-sm);
    padding: var(--ig-fw-space-4);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ig-fw-text);
}

.ig-fw-warning p {
    margin: 0;
}

/* ---- Preparation checklist ---- */

.ig-fw-prep-checklist {
    background: var(--ig-fw-surface);
    border: 1px solid var(--ig-fw-border);
    border-left: 4px solid var(--ig-fw-accent);
    border-radius: var(--ig-fw-radius-md);
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ig-fw-prep-checklist summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--ig-fw-space-4) var(--ig-fw-space-5);
    background: rgba(194, 65, 12, 0.1);
    color: var(--ig-fw-text);
    font-size: 1.02rem;
    font-weight: 700;
    transition: background 0.15s;
}

.ig-fw-prep-checklist summary:hover {
    background: rgba(194, 65, 12, 0.18);
}

.ig-fw-prep-checklist summary::-webkit-details-marker {
    display: none;
}

.ig-fw-prep-checklist summary::before {
    content: "\1F4CB";
    margin-right: 2px;
}

.ig-fw-prep-checklist summary::after {
    content: "\25B8";
    color: var(--ig-fw-accent-bright);
    font-size: 1.1rem;
    font-weight: 700;
    transition: transform 0.15s;
    margin-left: auto;
}

.ig-fw-prep-checklist[open] summary::after {
    transform: rotate(90deg);
}

.ig-fw-prep-checklist ul {
    margin: 0;
    padding: var(--ig-fw-space-4) var(--ig-fw-space-4) var(--ig-fw-space-4) 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--ig-fw-space-3);
}

.ig-fw-prep-checklist li {
    position: relative;
    padding-left: calc(var(--ig-fw-space-4) + 22px);
    line-height: 1.6;
    font-size: 0.9rem;
    color: var(--ig-fw-text);
}

.ig-fw-prep-checklist li::before {
    content: "\2713";
    position: absolute;
    left: var(--ig-fw-space-4);
    top: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: var(--ig-fw-accent);
    border-radius: 50%;
}

/* ---- Quick flashing steps (condensed overview) ---- */

.ig-fw-quick-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ig-fw-space-2);
}

.ig-fw-quick-step {
    display: flex;
    align-items: center;
    gap: var(--ig-fw-space-3);
    background: var(--ig-fw-surface);
    border: 1px solid var(--ig-fw-border);
    border-radius: var(--ig-fw-radius-sm);
    padding: var(--ig-fw-space-3) var(--ig-fw-space-4);
}

.ig-fw-qs-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ig-fw-accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 50%;
}

.ig-fw-qs-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ig-fw-text);
}

/* ---- Firmware download cards ---- */

.ig-fw-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ig-fw-space-4);
}

.ig-fw-card {
    display: flex;
    flex-direction: column;
    gap: var(--ig-fw-space-3);
    background: var(--ig-fw-surface);
    border: 1px solid var(--ig-fw-border);
    border-radius: var(--ig-fw-radius-md);
    padding: var(--ig-fw-space-4);
}

.ig-fw-card-header {
    padding-bottom: var(--ig-fw-space-3);
    border-bottom: 1px solid var(--ig-fw-border);
}

.ig-fw-card-filename {
    display: block;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ig-fw-text);
    background: var(--ig-fw-surface-2);
    padding: 6px 8px;
    border-radius: 4px;
    word-break: break-word;
}

.ig-fw-card-meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ig-fw-card-row {
    display: flex;
    justify-content: space-between;
    gap: var(--ig-fw-space-3);
    font-size: 0.82rem;
}

.ig-fw-card-row dt {
    color: var(--ig-fw-text-muted);
}

.ig-fw-card-row dd {
    margin: 0;
    color: var(--ig-fw-text);
    font-weight: 600;
    text-align: right;
}

.ig-fw-dl-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ig-fw-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: var(--ig-fw-radius-sm);
    white-space: nowrap;
    transition: background 0.15s;
}

.ig-fw-dl-link:hover {
    background: var(--ig-fw-accent-hover);
}

.ig-fw-dl-link__label {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ig-fw-dl-na {
    color: var(--ig-fw-text-muted);
    font-size: 0.8rem;
    font-style: italic;
}

/* ---- Flashing CTA (links to FlashGuideHub) ---- */

.ig-fw-flash-cta {
    background: var(--ig-fw-surface-2);
    border: 1px solid var(--ig-fw-border);
    border-radius: var(--ig-fw-radius-md);
    padding: var(--ig-fw-space-5);
    color: var(--ig-fw-text);
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.ig-fw-flash-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ig-fw-space-3);
}

.ig-fw-flash-cta-text {
    width: 100%;
    min-width: 0;
}

.ig-fw-flash-cta h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-family: var(--font-display, 'Cabinet Grotesk', 'Arial Black', sans-serif);
}

.ig-fw-flash-cta p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ig-fw-text-muted);
    line-height: 1.5;
    overflow-wrap: break-word;
}

.ig-fw-flash-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    background: var(--ig-fw-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 18px;
    border-radius: var(--ig-fw-radius-sm);
    transition: transform 0.15s, background 0.15s;
}

.ig-fw-flash-cta-btn:hover {
    background: var(--ig-fw-accent-hover);
    transform: translateY(-1px);
}

.ig-fw-flash-cta-alt {
    margin: var(--ig-fw-space-3) 0 0;
    padding-top: var(--ig-fw-space-3);
    border-top: 1px solid var(--ig-fw-border);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ig-fw-text-muted);
}

.ig-fw-flash-cta-alt a {
    color: var(--ig-fw-accent-bright);
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

/* ---- Related firmware ---- */

.ig-fw-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ig-fw-space-3);
}

@media (max-width: 768px) {
    .ig-fw-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ig-fw-related-grid {
        grid-template-columns: 1fr;
    }
}

.ig-fw-related-card {
    display: flex;
    align-items: center;
    gap: var(--ig-fw-space-3);
    background: var(--ig-fw-surface);
    border: 1px solid var(--ig-fw-border);
    border-radius: var(--ig-fw-radius-sm);
    padding: var(--ig-fw-space-3);
    color: var(--ig-fw-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: border-color 0.15s, transform 0.15s;
}

.ig-fw-related-card:hover {
    border-color: var(--ig-fw-accent);
    transform: translateY(-2px);
}

.ig-fw-related-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--ig-fw-radius-sm);
    background: var(--ig-fw-surface-2);
    font-size: 1.15rem;
}

.ig-fw-related-name {
    flex: 1;
}

.ig-fw-related-empty {
    color: var(--ig-fw-text-muted);
    font-size: 0.9rem;
}

/* ---- FAQ accordion ---- */

.ig-fw-faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--ig-fw-space-2);
}

.ig-fw-faq-item {
    background: var(--ig-fw-surface);
    border: 1px solid var(--ig-fw-border);
    border-radius: var(--ig-fw-radius-sm);
    overflow: hidden;
}

.ig-fw-faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ig-fw-space-3);
    background: none;
    border: none;
    text-align: left;
    padding: var(--ig-fw-space-4);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ig-fw-text);
    cursor: pointer;
}

.ig-fw-faq-chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
    color: var(--ig-fw-text-muted);
}

.ig-fw-faq-trigger[aria-expanded="true"] .ig-fw-faq-chevron {
    transform: rotate(180deg);
}

.ig-fw-faq-answer {
    padding: 0 var(--ig-fw-space-4) var(--ig-fw-space-4);
}

.ig-fw-faq-answer p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--ig-fw-text-muted);
}

/* ---- Hero featured image (with lightbox) ---- */

.ig-fw-hero-image-wrap {
    margin-top: var(--ig-fw-space-4);
    width: 100%;
}

.ig-fw-hero-image-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 380px;
    padding: 0;
    border: 1px solid var(--ig-fw-border);
    border-radius: var(--ig-fw-radius-md);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--ig-fw-surface-2);
}

.ig-fw-hero-image-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.ig-fw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    padding: var(--ig-fw-space-5);
}

.ig-fw-lightbox[hidden] {
    display: none;
}

.ig-fw-lightbox-img {
    max-width: min(92vw, 900px);
    max-height: 88vh;
    border-radius: var(--ig-fw-radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.ig-fw-lightbox-close {
    position: absolute;
    top: var(--ig-fw-space-5);
    right: var(--ig-fw-space-5);
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}

.ig-fw-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* ---- Sidebar: browse-by-brand + resources ---- */

.ig-fw-sidebar-brand-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: var(--ig-fw-space-3) var(--ig-fw-space-4) var(--ig-fw-space-4);
}

.ig-fw-sidebar-brand-chip {
    display: block;
    text-align: center;
    background: var(--ig-fw-surface-2);
    border: 1px solid var(--ig-fw-border);
    border-radius: var(--ig-fw-radius-sm);
    padding: 8px 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ig-fw-text);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.ig-fw-sidebar-brand-chip:hover {
    border-color: var(--ig-fw-accent);
    color: var(--ig-fw-accent-bright);
}

.ig-fw-sidebar-resource-list {
    display: flex;
    flex-direction: column;
    padding: var(--ig-fw-space-2) 0 var(--ig-fw-space-2);
}

.ig-fw-sidebar-resource-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px var(--ig-fw-space-4);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ig-fw-text);
    text-decoration: none;
}

.ig-fw-sidebar-resource-list a:hover {
    color: var(--ig-fw-accent-bright);
    background: rgba(194, 65, 12, 0.08);
}

/* ---- Sidebar ---- */

.ig-fw-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--ig-fw-space-4);
    position: sticky;
    top: calc(58px + var(--ig-fw-space-4));
}

.ig-fw-sidebar-widget {
    background: var(--ig-fw-surface);
    border: 1px solid var(--ig-fw-border);
    border-radius: var(--ig-fw-radius-md);
    overflow: hidden;
}

.ig-fw-sidebar-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ig-fw-text-muted);
    padding: var(--ig-fw-space-3) var(--ig-fw-space-4);
    margin: 0;
    background: var(--ig-fw-surface-2);
    border-bottom: 1px solid var(--ig-fw-border);
}

.ig-fw-sidebar-links {
    list-style: none;
    margin: 0;
    padding: var(--ig-fw-space-2) 0;
}

.ig-fw-sidebar-links li a {
    display: block;
    padding: 8px var(--ig-fw-space-4);
    font-size: 0.85rem;
    color: var(--ig-fw-text);
    text-decoration: none;
    border-left: 2px solid transparent;
}

.ig-fw-sidebar-links li a:hover,
.ig-fw-sidebar-links li a.is-active {
    color: var(--ig-fw-accent-bright);
    border-left-color: var(--ig-fw-accent);
    background: rgba(194, 65, 12, 0.08);
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
    .ig-fw-hero-inner { grid-template-columns: 1fr; }
    .ig-fw-layout { grid-template-columns: 1fr; }
    /* Hidden rather than left static — a static sidebar drops "On This
       Page" and "Browse by Brand" to the bottom of the content, right
       before the footer, which reads as a stray footer nav block on
       mobile. */
    .ig-fw-sidebar { display: none; }
    .ig-fw-hero-image-btn { max-height: 260px; }
}

@media (max-width: 600px) {
    .ig-fw-flash-cta-inner { flex-direction: column; align-items: flex-start; }
    .ig-fw-spec-row { flex-direction: column; gap: 2px; }
    .ig-fw-spec-row dd { text-align: left; }
}