/* ============================================================
   BSMM Glossary Components — v2.5.0
   Class prefix: bsmm-

   Components:
   1. Term Card        — pick a platform variant per card via the
                         modifier class .bsmm-term--<platform> (one of 8).
                         Add .bsmm-term--compact for A-Z list style.
   2. Letter Divider   — big A/B/C section divider for A-Z glossaries.
   3. Quick Jump Chips — single style, brand cyan hover.
   4. FAQ Block        — native <details>/<summary>, no JS needed.
   ============================================================ */

/* ---------- Anchor / smooth scroll ---------- */
html { scroll-behavior: smooth; }
.bsmm-anchor { scroll-margin-top: 90px; }


/* ============================================================
   1. TERM CARD — DEFAULT LAYOUT
   ============================================================ */
.bsmm-term {
    background: #fafbfc;
    border: 1px solid #f1f5f9;
    border-left: 4px solid #94a3b8;
    border-image: none !important;
    border-radius: 12px;
    padding: 22px 26px;
    margin: 24px 0 32px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}
.bsmm-term > p {
    margin: 0 0 12px;
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
}

/* ---------- Head row layout ----------
 * Force flex with left-alignment. Three selectors cover:
 *   - frontend (direct children)
 *   - older Gutenberg (wraps inside .wp-block-group__inner-container)
 *   - block editor iframe (wraps inside .block-editor-block-list__layout)
 *
 * The platform tag is pushed to the right via .bsmm-term__tag itself
 * (NOT via :last-child) — because Gutenberg injects an inner-container
 * wrapper that becomes the only child of .bsmm-term__head, and a
 * :last-child rule would move the wrapper instead of the tag.
 * --------------------------------------- */
.bsmm-term__head,
.bsmm-term__head > .wp-block-group__inner-container,
.bsmm-term__head > .block-editor-block-list__layout {
    display: flex !important;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    margin-bottom: 14px;
}

.bsmm-term__head > *,
.bsmm-term__head > .wp-block-group__inner-container > *,
.bsmm-term__head > .block-editor-block-list__layout > * {
    margin: 0 !important;
}

/* Push the tag pill to the right by targeting it directly.
   Works regardless of any wrapper Gutenberg may inject.
   In compact layout this is overridden below. */
.bsmm-term__tag {
    margin-left: auto !important;
}

/* Head row text styles */
.bsmm-term__acronym {
    font-size: 26px !important;
    font-weight: 800;
    color: #304B65;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.bsmm-term__sub {
    font-style: italic;
    color: #64748b;
    font-size: 14px !important;
    line-height: 1.4;
}
.bsmm-term__tag {
    background: #94a3b8;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Example box — dashed border in platform accent color */
.bsmm-term__example {
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 10px 0 0;
}
.bsmm-term__example p {
    margin: 0;
    font-size: 14px;
    color: #4a5d6a;
    line-height: 1.55;
}
.bsmm-term__example b,
.bsmm-term__example strong { color: #94a3b8; }

/* Heading immediately preceding a default-variant term card — bolder weight.
   Class added automatically by the_content filter in PHP (compact cards
   render their own internal heading and are excluded from the filter). */
.bsmm-term-heading {
    font-weight: 800 !important;
    color: #1a1a1a;
}


/* ============================================================
   1b. TERM CARD — COMPACT VARIANT (A-Z list style)
   Renders its own internal H4 with question + sub + tag inline.
   No external H3 needed.
   ============================================================ */
.bsmm-term--compact {
    background: transparent !important;
    border: none !important;
    border-left: 2px solid #eef2f5 !important;
    border-radius: 0 !important;
    padding: 14px 0 14px 18px !important;
    margin: 12px 0 !important;
    box-shadow: none !important;
    transition: border-left-color .2s ease, background .2s ease;
}
.bsmm-term--compact:hover {
    background: rgba(5, 166, 219, 0.02) !important;
}

/* Internal heading row: question + italic sub + tag pill, all baseline-aligned */
.bsmm-term--compact .bsmm-term__heading {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px !important;
    padding: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    line-height: 1.4;
    scroll-margin-top: 90px;
}
.bsmm-term--compact .bsmm-term__heading-text {
    /* the question text */
}
.bsmm-term--compact .bsmm-term__sub-inline {
    font-weight: 500;
    font-style: italic;
    color: #6b7c87;
    font-size: 14px;
    line-height: 1.4;
}

/* Tag pill in compact: smaller, NOT pushed to the right (stays inline) */
.bsmm-term--compact .bsmm-term__tag {
    margin-left: 0 !important;
    font-size: 10px !important;
    padding: 2px 9px !important;
    align-self: center;
}

/* Compact body paragraphs — smaller, tighter */
.bsmm-term--compact > p {
    font-size: 14.5px;
    color: #4a5d6a;
    margin: 0 0 4px;
    line-height: 1.55;
}

/* Compact example — smaller, lighter background */
.bsmm-term--compact .bsmm-term__example {
    background: #fafbfc;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
}
.bsmm-term--compact .bsmm-term__example p {
    font-size: 13.5px;
}

@media (max-width: 600px) {
    .bsmm-term--compact .bsmm-term__heading {
        gap: 6px;
    }
    .bsmm-term--compact .bsmm-term__tag {
        flex-basis: 100%;
        align-self: flex-start;
    }
}


/* ---------- Platform variants (apply to BOTH default and compact) ---------- */

/* Instagram — pink left border (gradient kept on the tag pill only).
   Solid color so border-radius is respected (border-image breaks it). */
.bsmm-term--instagram {
    border-left-color: #E1306C !important;
    border-image: none !important;
}
.bsmm-term--instagram .bsmm-term__tag {
    background: linear-gradient(135deg, #F56040, #833AB4);
}
.bsmm-term--instagram .bsmm-term__example { border-color: #E1306C; }
.bsmm-term--instagram .bsmm-term__example b,
.bsmm-term--instagram .bsmm-term__example strong { color: #E1306C; }

/* TikTok — black */
.bsmm-term--tiktok { border-left-color: #000; }
.bsmm-term--tiktok .bsmm-term__tag { background: #000; }
.bsmm-term--tiktok .bsmm-term__example { border-color: #000; }
.bsmm-term--tiktok .bsmm-term__example b,
.bsmm-term--tiktok .bsmm-term__example strong { color: #000; }

/* YouTube — red */
.bsmm-term--youtube { border-left-color: #FF0000; }
.bsmm-term--youtube .bsmm-term__tag { background: #FF0000; }
.bsmm-term--youtube .bsmm-term__example { border-color: #FF0000; }
.bsmm-term--youtube .bsmm-term__example b,
.bsmm-term--youtube .bsmm-term__example strong { color: #FF0000; }

/* Facebook — blue */
.bsmm-term--facebook { border-left-color: #1877F2; }
.bsmm-term--facebook .bsmm-term__tag { background: #1877F2; }
.bsmm-term--facebook .bsmm-term__example { border-color: #1877F2; }
.bsmm-term--facebook .bsmm-term__example b,
.bsmm-term--facebook .bsmm-term__example strong { color: #1877F2; }

/* Spotify — green */
.bsmm-term--spotify { border-left-color: #1DB954; }
.bsmm-term--spotify .bsmm-term__tag { background: #1DB954; }
.bsmm-term--spotify .bsmm-term__example { border-color: #1DB954; }
.bsmm-term--spotify .bsmm-term__example b,
.bsmm-term--spotify .bsmm-term__example strong { color: #1DB954; }

/* X — black */
.bsmm-term--x { border-left-color: #000; }
.bsmm-term--x .bsmm-term__tag { background: #000; }
.bsmm-term--x .bsmm-term__example { border-color: #000; }
.bsmm-term--x .bsmm-term__example b,
.bsmm-term--x .bsmm-term__example strong { color: #000; }

/* Threads — black */
.bsmm-term--threads { border-left-color: #000; }
.bsmm-term--threads .bsmm-term__tag { background: #000; }
.bsmm-term--threads .bsmm-term__example { border-color: #000; }
.bsmm-term--threads .bsmm-term__example b,
.bsmm-term--threads .bsmm-term__example strong { color: #000; }

/* SoundCloud — orange */
.bsmm-term--soundcloud { border-left-color: #FF5500; }
.bsmm-term--soundcloud .bsmm-term__tag { background: #FF5500; }
.bsmm-term--soundcloud .bsmm-term__example { border-color: #FF5500; }
.bsmm-term--soundcloud .bsmm-term__example b,
.bsmm-term--soundcloud .bsmm-term__example strong { color: #FF5500; }

@media (max-width: 600px) {
    .bsmm-term__head { flex-direction: column; align-items: flex-start; }
    .bsmm-term__tag { margin-left: 0 !important; }
}


/* ============================================================
   2. LETTER DIVIDER — A/B/C section divider for A-Z glossaries
   ============================================================ */
.bsmm-letter-divider {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 36px 0 8px;
    scroll-margin-top: 90px;
}
.bsmm-letter-divider__badge {
    width: 44px;
    height: 44px;
    background: linear-gradient(106.11deg, #20a7ee -5.94%, #0ed5e1 112.84%);
    color: #fff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -4px rgba(5, 166, 219, 0.4);
}
.bsmm-letter-divider__heading {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    line-height: 1 !important;
    padding: 0 !important;
}


/* ============================================================
   3. QUICK JUMP CHIPS
   Flex layout (not grid) so wpautop's invisible <br> / empty <p>
   between chips can't take up grid cells. The :not(a) rule below
   hides them entirely.
   ============================================================ */
.bsmm-chips {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 32px;
    list-style: none;
    padding: 0;
    justify-content: flex-start;
}

/* Hide anything that isn't a chip — neutralizes wpautop <br> and empty <p> */
.bsmm-chips > :not(a) {
    display: none !important;
}

.bsmm-chips a,
.bsmm-chips a:link,
.bsmm-chips a:visited {
    flex: 1 1 calc((100% - 32px) / 5);
    min-width: 90px;
    display: block;
    background: #fff;
    color: #304B65;
    border: 1px solid #e2e8f0;
    text-align: center;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: background .2s ease, color .2s ease, border-color .2s ease,
                transform .2s ease, box-shadow .2s ease;
}

.bsmm-chips a:hover,
.bsmm-chips a:hover:link,
.bsmm-chips a:hover:visited,
.bsmm-chips a:focus-visible {
    background: linear-gradient(106.11deg, #20a7ee -5.94%, #0ed5e1 112.84%) !important;
    color: #fff !important;
    border-color: transparent !important;
    text-decoration: none;
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -4px rgba(5, 166, 219, 0.5);
}

@media (max-width: 700px) {
    .bsmm-chips a { flex: 1 1 calc((100% - 16px) / 3); }
}

@media (max-width: 460px) {
    .bsmm-chips a { flex: 1 1 calc((100% - 8px) / 2); }
}

/* ---------- Letters mode (.bsmm-chips--letters) ----------
   Single-character chips for A-Z navigation. Narrower than acronym chips
   (so they don't stretch to 5-per-row), and sticky to the top of the
   viewport so readers can jump letters at any scroll position. */
.bsmm-chips--letters {
    position: sticky;
    top: 86px;
    z-index: 5;
    background: #f4f7fa;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin: 18px 0 28px;
}

.bsmm-chips--letters a,
.bsmm-chips--letters a:link,
.bsmm-chips--letters a:visited {
    flex: 0 0 auto;
    min-width: 44px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 800;
}

/* Offset for the WP admin bar when a logged-in editor is viewing the post. */
.admin-bar .bsmm-chips--letters { top: 122px; }
@media (max-width: 782px) {
    .admin-bar .bsmm-chips--letters { top: 46px; }
}


/* ============================================================
   4. FAQ BLOCK — native <details>/<summary>, no JS needed
   ============================================================ */
.bsmm-faq { margin: 36px 0; }

.bsmm-faq h2 {
    font-size: 26px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 18px;
    letter-spacing: -0.3px;
}

.bsmm-faq__item {
    border-bottom: 1px solid #eef2f5;
    padding: 16px 0;
}
.bsmm-faq__item:last-child { border-bottom: none; }

.bsmm-faq__q {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 15.5px;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    line-height: 1.4;
    transition: color .2s ease;
}
.bsmm-faq__q::-webkit-details-marker { display: none; }
.bsmm-faq__q::before {
    content: '+';
    color: #05A6DB;
    font-size: 22px;
    font-weight: 400;
    width: 16px;
    flex-shrink: 0;
    display: inline-block;
    line-height: 1;
    transition: transform .2s ease;
}
.bsmm-faq__item[open] .bsmm-faq__q::before { content: '–'; }

.bsmm-faq__a {
    font-size: 14.5px;
    color: #4a5d6a;
    padding-left: 26px;
    line-height: 1.6;
    margin-top: 10px;
}
.bsmm-faq__a a { color: #05A6DB; }
.bsmm-faq__a p { margin: 0 0 10px; }
.bsmm-faq__a p:last-child { margin-bottom: 0; }