/* ============================================================
   BLEND PIXEL STUDIO — faq.css v1.1
   FAQ page styling — dark theme, matches licenses.css conventions

   CHANGELOG v1.1 (audit pass 21 — search box rendering fix):
   The search input was reported rendering as a plain, unstyled
   browser default: white background, black text, magnifying-glass
   icon overlapping the placeholder text instead of sitting cleanly
   to its left. That's not a design/polish issue — it means none of
   this file's .bps-faq-search rules were actually taking effect on
   the live page, which points to either a caching layer serving a
   stale copy of this file, or something else on the page carrying
   higher CSS specificity/!important than the original rules had.
   Rewritten to be defensively robust either way: every declaration
   that controls the visible white-vs-dark appearance now carries
   !important, and selectors are scoped through .bps-faq-page (the
   page's own root wrapper class) rather than bare class names, so
   this reliably wins the cascade regardless of what else loads.
   Icon sizing/position was also tightened so it can't visually
   collide with typed or placeholder text even at small viewport
   widths.
   ============================================================ */

/* ============================================================
   PAGE WRAPPER — same token-chaining pattern as licenses.css:
   references the shared --ith-* tokens (functions.php) with a
   hardcoded fallback, so a site-wide color change here follows
   automatically instead of needing a separate edit.
   ============================================================ */
.bps-faq-page {
    --faq-bg:    var(--ith-bg, #0b0a0e);
    --faq-s1:    var(--ith-s1, #121118);
    --faq-s2:    var(--ith-s2, #1a1924);
    --faq-s3:    var(--ith-s3, #22202e);
    --faq-bd:    var(--ith-bd, #2e2c3e);
    --faq-bdh:   var(--ith-bdh, #3e3c52);
    --faq-acc:   var(--ith-accent, #efb07d);
    --faq-acc-g: var(--ith-accent-glow, rgba(239,176,125,0.18));
    --faq-t1:    var(--ith-text, #f0ede8);
    --faq-t2:    var(--ith-text-secondary, #9a8e7e);
    --faq-t3:    var(--ith-text-muted, #8f8271);
    --faq-ok:    var(--ith-success, #4ade80);
    background:  var(--faq-bg);
    color:       var(--faq-t1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   KILL KADENCE CHROME — same pattern as page-licenses.php
   ============================================================ */
.page-template-page-faq .entry-header,
.page-template-page-faq .page-title-wrap,
.page-template-page-faq .hero-section,
.page-template-page-faq .entry-title,
.page-template-page-faq h1.page-title,
.page-template-page-faq .bps-page-hero,
.page-template-page-faq .kadence-breadcrumbs,
.page-template-page-faq .woocommerce-breadcrumb { display: none !important; }

.page-template-page-faq #primary,
.page-template-page-faq .site-main,
.page-template-page-faq .content-container,
.page-template-page-faq .entry-content-wrap,
.page-template-page-faq .entry-content,
.page-template-page-faq article.page,
.page-template-page-faq .wp-block-group {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* ============================================================
   HERO — matches .bps-lic-hero exactly for visual consistency
   across the two "info" pages
   ============================================================ */
.bps-faq-hero {
    background: linear-gradient(135deg, var(--faq-s2) 0%, var(--faq-bg) 100%);
    border-bottom: 1px solid var(--faq-bd);
    padding: 72px 32px 40px;
    text-align: center;
}
.bps-faq-hero-inner { max-width: 640px; margin: 0 auto; }
.bps-faq-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--faq-acc); margin-bottom: 16px;
}
.bps-faq-eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--faq-acc);
    flex-shrink: 0; box-shadow: 0 0 8px var(--faq-acc-g);
    animation: faq-dot-pulse 2s ease-in-out infinite;
}
@keyframes faq-dot-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.6; transform:scale(1.3); } }
.bps-faq-hero-title {
    font-family: 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: clamp(32px, 5vw, 56px); font-weight: 800;
    color: var(--faq-t1); letter-spacing: -0.03em; line-height: 1.1;
    margin: 0 0 18px;
}
.bps-faq-hero-sub {
    font-size: 16px; color: var(--faq-t2); line-height: 1.7;
    margin: 0 auto 28px; max-width: 480px;
}

/* ============================================================
   SEARCH BOX (v1.1 — hardened + restyled)
   Every rule that controls the visible appearance (background,
   text color, border) carries !important and is scoped through
   .bps-faq-page so it reliably wins the cascade regardless of
   load order or anything else targeting a plain input element.
   ============================================================ */
.bps-faq-page .bps-faq-search-wrap {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}
.bps-faq-page .bps-faq-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--faq-t3) !important;
    pointer-events: none;
    z-index: 1;
}
.bps-faq-page .bps-faq-search-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}
.bps-faq-page input.bps-faq-search,
.bps-faq-page input#bps-faq-search {
    width: 100% !important;
    background: var(--faq-s1) !important;
    background-color: var(--faq-s1) !important;
    border: 1.5px solid var(--faq-bd) !important;
    border-radius: 12px !important;
    padding: 15px 18px 15px 50px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: var(--faq-t1) !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.bps-faq-page input.bps-faq-search::placeholder {
    color: var(--faq-t3) !important;
    opacity: 1 !important;
}
.bps-faq-page input.bps-faq-search:focus {
    outline: none !important;
    border-color: var(--faq-acc) !important;
    box-shadow: 0 0 0 3px var(--faq-acc-g) !important;
}
/* Chrome/Edge/Safari autofill forces its own white background +
   black text via an internal UA style that normal CSS properties
   can't override directly -- this is the standard workaround,
   using a huge inset box-shadow the same color as our own
   background to visually replace the autofill highlight, plus a
   very long transition delay trick to override the forced text
   color. Without this, a field the browser has "remembered" would
   revert to white/black exactly like the reported bug even with
   every rule above in place. */
.bps-faq-page input.bps-faq-search:-webkit-autofill,
.bps-faq-page input.bps-faq-search:-webkit-autofill:hover,
.bps-faq-page input.bps-faq-search:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--faq-t1) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--faq-s1) inset !important;
    box-shadow: 0 0 0 1000px var(--faq-s1) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}
.bps-faq-search-empty {
    display: none; text-align: center; color: var(--faq-t2);
    padding: 40px 20px; font-size: 14px;
}
.bps-faq-search-empty.is-visible { display: block; }

/* ============================================================
   CONTENT LAYOUT
   ============================================================ */
.bps-faq-content { max-width: 760px; margin: 0 auto; padding: 48px 32px 80px; }

.bps-faq-category { margin-bottom: 40px; }
.bps-faq-category:last-child { margin-bottom: 0; }
.bps-faq-category-title {
    font-family: 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--faq-acc);
    margin: 0 0 16px; padding-bottom: 12px;
    border-bottom: 1px solid var(--faq-bd);
    display: flex; align-items: center; gap: 8px;
}

/* -- Accordion items — native <details>/<summary>: works with
   zero JS, has built-in keyboard support, and can't be broken
   by a script that fails to load. -- */
.bps-faq-item {
    background: var(--faq-s1);
    border: 1px solid var(--faq-bd);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color .2s ease;
}
.bps-faq-item[open] { border-color: var(--faq-bdh); }
.bps-faq-item[data-match="0"] { display: none; }

.bps-faq-q {
    list-style: none;
    cursor: pointer;
    padding: 18px 50px 18px 20px;
    font-size: 15px; font-weight: 600; color: var(--faq-t1);
    line-height: 1.5;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.bps-faq-q::-webkit-details-marker { display: none; }
.bps-faq-q::marker { content: ""; }
.bps-faq-q:hover { color: var(--faq-acc); }
.bps-faq-q:focus-visible { outline: 2px solid var(--faq-acc); outline-offset: -2px; }

.bps-faq-chevron {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    color: var(--faq-t3); transition: transform .25s ease, color .2s ease;
    pointer-events: none;
}
.bps-faq-item[open] .bps-faq-chevron { transform: translateY(-50%) rotate(180deg); color: var(--faq-acc); }

.bps-faq-a {
    padding: 0 20px 20px 20px;
    font-size: 14px; color: var(--faq-t2); line-height: 1.75;
}
.bps-faq-a p { margin: 0 0 12px; }
.bps-faq-a p:last-child { margin-bottom: 0; }
.bps-faq-a a { color: var(--faq-acc); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.bps-faq-a a:hover { border-color: var(--faq-acc); }

/* ============================================================
   DISCORD CTA
   ============================================================ */
.bps-faq-cta {
    max-width: 760px; margin: 0 auto 80px; padding: 0 32px;
}
.bps-faq-cta-card {
    background: linear-gradient(135deg, var(--faq-s2) 0%, var(--faq-s1) 100%);
    border: 1px solid var(--faq-bd);
    border-radius: 16px;
    padding: 36px 32px;
    text-align: center;
}
.bps-faq-cta-title {
    font-family: 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    font-size: 22px; font-weight: 700; color: var(--faq-t1);
    margin: 0 0 8px;
}
.bps-faq-cta-sub { font-size: 14px; color: var(--faq-t2); margin: 0 0 20px; }
.bps-faq-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--faq-acc); color: #000; font-weight: 700; font-size: 14px;
    padding: 12px 24px; border-radius: 10px; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.bps-faq-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--faq-acc-g); color: #000; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .bps-faq-hero { padding: 56px 20px 32px; }
    .bps-faq-content { padding: 36px 20px 60px; }
    .bps-faq-cta { padding: 0 20px; }
    .bps-faq-q { padding: 16px 44px 16px 16px; font-size: 14px; }
    .bps-faq-a { padding: 0 16px 16px 16px; }
    .bps-faq-page input.bps-faq-search {
        padding: 13px 16px 13px 44px !important;
        font-size: 14px !important;
    }
    .bps-faq-page .bps-faq-search-icon { left: 15px; }
}