/* =============================================================================
   FIRMWAREFILE.UK — firmware-structured.css
   File: firmware-structured.css
   Loaded on: structured firmware pages ONLY (is_single() && ff_is_structured_page())

   Adds only the component styles the new structured template needs
   ON TOP OF header.css / single.css, which still load normally for
   these pages (is_single() stays true — only the template FILE
   changed). .ff-hero / .ff-crumbs / .ff-h1 / .ff-btn / .ff-notice /
   .ff-entry etc. are NOT redefined here — see single.css.

   Uses the same light-mode design tokens defined in header.css
   (--color-*, --space-*, --radius-*, --text-*, --shadow-*). This is
   the opposite palette from inar-guide-child's dark ig-fw-* system —
   do not copy those dark tokens here.
============================================================================= */

.ff-sf-section {
    margin: var(--space-12, 3rem) 0;
}
.ff-sf-section h2 {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: var(--text-lg, 1.5rem);
    font-weight: 700;
    color: var(--color-text, #141820);
    margin-bottom: var(--space-4, 1rem);
}

/* ── Curated download cards ─────────────────────────────────── */
.ff-sf-downloads {
    margin-bottom: var(--space-4, 1rem);
}
.ff-sf-downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4, 1rem);
}
.ff-sf-dl-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,.08));
    border-radius: var(--radius-lg, .75rem);
    padding: var(--space-4, 1rem);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.07));
    display: flex;
    flex-direction: column;
    gap: var(--space-2, .5rem);
    transition: var(--transition, 200ms cubic-bezier(.16,1,.3,1));
}
.ff-sf-dl-card:hover {
    border-color: var(--color-border-strong, rgba(0,0,0,.15));
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.09));
}
.ff-sf-dl-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, .5rem);
}
.ff-sf-dl-model {
    font-weight: 700;
    font-size: var(--text-sm, .875rem);
    color: var(--color-text, #141820);
}
.ff-sf-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs, .75rem);
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary-dim, rgba(37,99,235,.08));
    color: var(--color-primary, #2563eb);
    white-space: nowrap;
}
.ff-sf-dl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, .75rem);
}
.ff-sf-dl-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs, .75rem);
    color: var(--color-text-muted, #5a6380);
}
.ff-sf-dl-meta-item svg {
    flex-shrink: 0;
    opacity: .7;
}
.ff-sf-dl-actions {
    margin-top: auto;
    padding-top: var(--space-2, .5rem);
}
.ff-sf-dl-btn {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── AFF cross-link line ────────────────────────────────────── */
.ff-sf-crosslink {
    margin-top: var(--space-4, 1rem);
    padding: var(--space-3, .75rem) var(--space-4, 1rem);
    background: var(--color-surface-2, #f0f3fb);
    border: 1px solid var(--color-border, rgba(0,0,0,.08));
    border-radius: var(--radius-md, .5rem);
    font-size: var(--text-sm, .875rem);
    color: var(--color-text-muted, #5a6380);
}
.ff-sf-crosslink a {
    color: var(--color-primary, #2563eb);
    font-weight: 600;
    text-decoration: none;
}
.ff-sf-crosslink a:hover {
    color: var(--color-primary-hover, #1d4ed8);
    text-decoration: underline;
}

/* ── Numbered flashing methods ──────────────────────────────── */
.ff-sf-methods-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 1.5rem);
}
.ff-sf-method {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,.08));
    border-radius: var(--radius-lg, .75rem);
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.07));
}
.ff-sf-method-title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: var(--text-base, 1rem);
    font-weight: 700;
    color: var(--color-text, #141820);
    margin-bottom: var(--space-3, .75rem);
}
.ff-sf-method-steps {
    list-style: none;
    counter-reset: ff-sf-step;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, .75rem);
}
.ff-sf-method-steps li {
    counter-increment: ff-sf-step;
    position: relative;
    padding-left: 2.4rem;
    font-size: var(--text-sm, .875rem);
    color: var(--color-text, #141820);
    line-height: 1.6;
}
.ff-sf-method-steps li::before {
    content: counter(ff-sf-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.7rem;
    height: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary-dim, rgba(37,99,235,.08));
    color: var(--color-primary, #2563eb);
    font-weight: 700;
    font-size: var(--text-xs, .75rem);
}

/* ── Condensed universal-tool methods (QFIL, SP Flash Tool, etc.) ──
 * Same card shell as .ff-sf-method, but device-specific prep is a
 * plain list (no numbered-step styling, since it is not a walkthrough)
 * and the section ends in a CTA out to FlashGuideHub instead of more
 * steps — see ff_sf_render_methods() in firmware-structured.php.
 */
.ff-sf-method-note {
    font-size: var(--text-sm, .875rem);
    color: var(--color-text-muted, #5b6472);
    line-height: 1.6;
    margin-bottom: var(--space-3, .75rem);
}
.ff-sf-method-prep {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, .5rem);
    margin-bottom: var(--space-4, 1rem);
}
.ff-sf-method-prep li {
    position: relative;
    padding-left: 1.4rem;
    font-size: var(--text-sm, .875rem);
    color: var(--color-text, #141820);
    line-height: 1.6;
}
.ff-sf-method-prep li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary, #2563eb);
    font-weight: 700;
}
.ff-sf-method-cta {
    display: inline-flex;
}

/* ── FAQ accordion ───────────────────────────────────────────── */
.ff-sf-faq-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, .75rem);
}
.ff-sf-faq-item {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,.08));
    border-radius: var(--radius-md, .5rem);
    padding: var(--space-3, .75rem) var(--space-4, 1rem);
}
.ff-sf-faq-q {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-sm, .875rem);
    color: var(--color-text, #141820);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ff-sf-faq-q::-webkit-details-marker { display: none; }
.ff-sf-faq-q::after {
    content: '+';
    font-size: 1.1rem;
    color: var(--color-text-faint, #a8b0c8);
    margin-left: var(--space-3, .75rem);
    transition: var(--transition, 200ms cubic-bezier(.16,1,.3,1));
}
.ff-sf-faq-item[open] .ff-sf-faq-q::after {
    transform: rotate(45deg);
}
.ff-sf-faq-a {
    margin-top: var(--space-3, .75rem);
    font-size: var(--text-sm, .875rem);
    color: var(--color-text-muted, #5a6380);
    line-height: 1.7;
}
.ff-sf-faq-a p:not(:last-child) {
    margin-bottom: var(--space-2, .5rem);
}