/**
 * File Path: assets/css/mbs-front.css
 * All rules scoped under .mbs-wrapper per TC-1–TC-10. Full dark mode support.
 * Native CSS nesting (Chrome 112+, Firefox 117+, Safari 16.5+); state variants and
 * responsive @media queries nested inside their components.
 * FSE bridge (:where() wrapper) and unscoped components (.mbs-modal, .mbs-term-list)
 * remain flat — see compat.css §9 and AUDIT-HISTORY.md architecture decisions.
 * @package MyBookShowroom
 * @since   1.0.0
 */

/* ==========================================================================
   Core wrapper, CSS custom properties, and all .mbs-wrapper-scoped rules
   ========================================================================== */
.mbs-wrapper {
    --mbs-accent:        #4AABB8;
    --mbs-button-bg:     #2C3E6B;
    --mbs-button-text:   #FFFFFF;
    --mbs-button-hover:  #1f2a4f;
    --mbs-link:          #4AABB8;
    --mbs-card-bg:       #FFFFFF;
    --mbs-border:        #ECF0F1;
    --mbs-border-ui:     #ccc;
    --mbs-surface-muted: #f1f1f1;
    --mbs-hero-bg:       #f8f9fa;
    --mbs-text:          #2C3E6B;
    --mbs-text-light:    #7F8C8D;
    --mbs-text-muted:    #555;
    --mbs-text-strong:   #111;
    --mbs-text-dark:     #ECF0F1;
    --mbs-ink:           #1f2937;

    /* Admin token name aliases — D-6 cross-surface bridge.
     * Allows var(--mbs-navy) and var(--mbs-teal) to resolve inside
     * .mbs-wrapper the same way they do in the admin token scope.
     * Added Phase 5 Task 5.1, Session 197.
     */
    --mbs-navy:          var(--mbs-button-bg);
    --mbs-teal:          var(--mbs-accent);
    --mbs-slate:         #5a6472;

    /* ── F-002: Layout geometry custom properties ─────────────────────────── */
    --mbs-layout-gap:    1.5rem;
    --mbs-columns:       3;
    --mbs-card-radius:   8px;
    --mbs-cover-max-width: clamp(110px, 18%, 200px); /* CVR-FE-001: standalone cover cap */

    box-sizing: border-box;

    /* ── General containers ──────────────────────────────────────────────── */

    .mbs-book-display,
    .mbs-single-book {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    /* ── Taxonomy archive container ──────────────────────────────────────── */
    /* FE-011: .mbs-taxonomy-archive IS the .mbs-wrapper node (same element).  */
    /* Use & self-reference so max-width binds to .mbs-wrapper.mbs-taxonomy-   */
    /* archive without a child selector — matches the .mbs-book-display rule.  */

    &.mbs-taxonomy-archive {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        box-sizing: border-box;
    }

    /* ── FREE Layout Base Styles ─────────────────────────────────────────── */

    .mbs-layout-grid {
        display: grid;
        grid-template-columns: repeat(var(--mbs-columns, 3), minmax(0, 1fr));
        gap: var(--mbs-layout-gap, 1.5rem);
    }

    .mbs-layout-list {
        display: flex;
        flex-direction: column;
        gap: var(--mbs-layout-gap, 1.5rem);
    }

    .mbs-layout-masonry {
        column-count: var(--mbs-columns, 3);
        column-gap: var(--mbs-layout-gap, 1.5rem);
    }

    .mbs-layout-hero {
        display: flex;
        gap: 32px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .mbs-layout-card {
        display: grid;
        grid-template-columns: repeat(var(--mbs-columns, 3), minmax(0, 1fr));
        gap: var(--mbs-layout-gap, 1.5rem);
    }

    /* FE-014: taxonomy-mbs-tag.php uses .mbs-book-grid (not .mbs-layout-*). */
    /* Without a grid rule covers are unconstrained. Rule below adds the grid. */

    .mbs-book-grid {
        display: grid;
        grid-template-columns: repeat(var(--mbs-columns, 3), minmax(0, 1fr));
        gap: var(--mbs-layout-gap, 1.5rem);
    }

    /* ── Book card ───────────────────────────────────────────────────────── */

    .mbs-book-card {
        border: 1px solid var(--mbs-border);
        border-radius: var(--mbs-card-radius, 8px);
        overflow: hidden;
        background: var(--mbs-card-bg);
        transition: box-shadow 0.2s ease;

        &:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        }

        img,
        .mbs-cover {
            width: 100%;
            height: auto;
            display: block;
        }
    }

    /* CVR-FE-001: Constrain .mbs-cover in standalone block contexts
       (mbs/book-cover with link_to_book=false, mbs/book-teaser with
       show_cover=true). Layout contexts override via higher specificity:
       .mbs-book-card .mbs-cover (3-class) beats this 2-class rule, and
       mbs-front-list-layout.css pins the list item wrapper to 150px.
       Value driven by --mbs-cover-max-width (defined above in F-002). */
    .mbs-cover {
        max-width: var(--mbs-cover-max-width);
        margin-left: auto;
        margin-right: auto;
    }

    /* CVR-FE-002: Enforce aspect-ratio preservation on every cover image.
       Without height:auto the browser may anchor height to the HTML width/height
       attributes emitted by wp_get_attachment_image(), distorting the image when
       max-width clamps the width below the attribute value. */
    .mbs-cover img {
        width: 100%;
        height: auto;
        display: block;
    }


    /* Hero specific */
    .mbs-hero-content {
        flex: 1;
        min-width: 280px;
        padding: 20px 0;
    }

    /* ── Order Now button ────────────────────────────────────────────────── */

    .mbs-order-now-btn {
        background: var(--mbs-button-bg);
        color: var(--mbs-button-text);
        padding: 12px 24px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 600;
        transition: background 0.2s;

        &:hover {
            background: var(--mbs-button-hover, var(--mbs-navy-dark));
        }

        &:focus-visible,
        &:focus {
            outline: 3px solid #fff;
            outline-offset: 2px;
            box-shadow: 0 0 0 5px var(--mbs-accent, var(--mbs-teal));
        }
    }

    /* ── Retailer buttons ────────────────────────────────────────────────── */

    .mbs-retailer-buttons {
        margin-top: 12px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        &.active {
            max-height: 600px;
        }
    }

    .mbs-retailer-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: var(--mbs-card-bg, #f5f5f5);
        border: 1px solid var(--mbs-border, #ddd);
        border-radius: 4px;
        text-decoration: none;
        color: var(--mbs-text, #333);
        transition: all 0.2s;

        &:hover {
            background: var(--mbs-accent);
            color: #fff;
            border-color: var(--mbs-accent);
        }

        &:focus-visible,
        &:focus {
            outline: 3px solid var(--mbs-accent, var(--mbs-teal));
            outline-offset: 2px;
        }
    }

    /* ── Section ─────────────────────────────────────────────────────────── */

    .mbs-section {
        margin: 40px 0;
        padding: 24px 0;
        border-top: 1px solid var(--mbs-border, #ECF0F1);
    }

    /* ── Format Selector (.mbs-format-tabs) ──────────────────────────────── */
    /* TC-1 / TC-2: all rules scoped under .mbs-wrapper                       */

    .mbs-format-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 12px 0;
    }

    .mbs-format-tab {
        display: inline-flex;
        align-items: center;
        padding: 6px 16px;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.4;
        border: 2px solid var(--mbs-border-ui, #ccc);
        border-radius: 4px;
        background: #fff;
        color: var(--mbs-text, #333);
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s, color 0.15s;

        &:hover {
            border-color: var(--mbs-accent);
            color: var(--mbs-accent);
        }

        &.active {
            border-color: var(--mbs-accent);
            background: var(--mbs-accent);
            color: #fff;
        }

        &:focus-visible,
        &:focus {
            outline: 3px solid var(--mbs-accent, var(--mbs-teal));
            outline-offset: 2px;
        }
    }

    /* ── Per-Format Details ──────────────────────────────────────────────── */

    .mbs-per-format-details {
        margin: 12px 0;
    }

    .mbs-per-format-subtitle {
        font-size: 1rem;
        font-style: italic;
        color: var(--mbs-text-muted, #555);
        margin-bottom: 8px;
    }

    .mbs-per-format-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 20px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mbs-meta-row {
        display: flex;
        align-items: baseline;
        gap: 4px;

        dt {
            font-weight: 600;
            font-size: 0.8125rem;
            color: var(--mbs-text-muted, #555);
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        dd {
            margin: 0;
            font-size: 0.9375rem;
            color: var(--mbs-text-strong, #111);
        }
    }

    .mbs-isbn10-wrap {
        font-size: 0.8125rem;
        color: var(--mbs-text-light, #666);
        margin-left: 6px;
    }

    /* ── AJAX Search (S13-8) ─────────────────────────────────────────────── */

    .mbs-search-wrapper {
        position: relative;
        margin-bottom: 24px;
    }

    .mbs-search-input {
        width: 100%;
        padding: 10px 40px 10px 14px;
        font-size: 1rem;
        border: 2px solid var(--mbs-border, #ECF0F1);
        border-radius: 4px;
        color: var(--mbs-text, var(--mbs-navy));
        background: #fff;
        box-sizing: border-box;
        transition: border-color 0.2s;

        &:focus {
            outline: 3px solid var(--mbs-accent, var(--mbs-teal));
            outline-offset: 2px;
            border-color: var(--mbs-accent, var(--mbs-teal));
        }
    }

    .mbs-search-spinner {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        border: 2px solid var(--mbs-border, #ECF0F1);
        border-top-color: var(--mbs-accent, var(--mbs-teal));
        border-radius: 50%;
        animation: mbs-spin 0.6s linear infinite;
    }

    .mbs-search-results {
        position: relative;
        margin-top: 8px;
    }

    .mbs-search-result-card {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        padding: 12px 0;
        border-bottom: 1px solid var(--mbs-border, #ECF0F1);

        &:last-child {
            border-bottom: none;
        }
    }

    .mbs-search-result-cover {
        width: 48px;
        height: auto;
        border-radius: 3px;
        flex-shrink: 0;
        object-fit: cover;
    }

    .mbs-search-result-body {
        flex: 1;
        min-width: 0;
    }

    .mbs-search-result-title {
        display: block;
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--mbs-link, var(--mbs-teal));
        text-decoration: none;
        margin-bottom: 4px;
    }

    /* ── Search live-results dropdown (Spec 5 / Phase 3) ─────────────────── */

    .mbs-search-result-list {
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: #fff;
        border: 1px solid var(--mbs-border, #ECF0F1);
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        max-height: 380px;
        overflow-y: auto;
    }

    .mbs-search-result-list li {
        border-bottom: 1px solid var(--mbs-border, #ECF0F1);
    }

    .mbs-search-result-list li:last-child {
        border-bottom: none;
    }

    .mbs-search-result-list a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        text-decoration: none;
        color: var(--mbs-text, var(--mbs-navy));
        transition: background 0.15s;
    }

    .mbs-search-result-list a:hover,
    .mbs-search-result-list a:focus {
        background: var(--mbs-surface-muted, #f1f1f1);
        outline: none;
    }

    .mbs-search-result-thumb {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 3px;
        flex-shrink: 0;
    }

    .mbs-result-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .mbs-result-title {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--mbs-link, var(--mbs-teal));
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mbs-result-teaser {
        font-size: 0.8125rem;
        color: var(--mbs-text-light, var(--mbs-mist));
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Awards & Accolades section (Spec 1 / CE-1) ──────────────────────── */

    .mbs-section-awards {
        margin-bottom: 2rem;
    }

    .mbs-awards-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mbs-awards-list li {
        padding: 6px 0;
        font-size: 0.9375rem;
        color: var(--mbs-text-muted, #555);
        border-bottom: 1px solid var(--mbs-border, #ECF0F1);
    }

    .mbs-awards-list li:last-child {
        border-bottom: none;
    }

    .mbs-award-status {
        font-size: 0.8125rem;
        color: var(--mbs-text-light, var(--mbs-mist));
        text-transform: capitalize;
    }

    .mbs-award-status--winner {
        color: var(--mbs-award-winner-color, #B8860B);
        font-weight: 600;
    }
}

/* ==========================================================================
   CVR-FE-001: Standalone block cover constraints — outside .mbs-wrapper scope
   ========================================================================== */

/* mbs/book-cover with link_to_book=true wraps MBS_Cover_Renderer output in
   <a class="mbs-cover-link"> which sits outside .mbs-wrapper. Without this
   rule the cover renders at the natural image width (potentially 800px+). */
.mbs-cover-link {
    display: block;
    max-width: clamp(110px, 18%, 200px); /* mirrors --mbs-cover-max-width; var() unavailable here (parent of .mbs-wrapper) */
    margin: 0 auto;
}

/* mbs/featured-book block wrapper — mirrors the editor's 420px cap from
   blocks-editor.css. The .mbs-cover inside fills the block width (100%);
   the 3-class specificity (.mbs-block-featured-book .mbs-wrapper .mbs-cover)
   already beats the 2-class .mbs-wrapper .mbs-cover rule above. */
.mbs-block-featured-book {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.mbs-block-featured-book .mbs-cover {
    max-width: clamp(160px, 40%, 220px);
}

/* ==========================================================================
   Genre Cloud — .mbs-genre-cloud-wrapper > .mbs-genre-cloud (CSS-CLOUD-1)
   ========================================================================== */

/* CSS-CLOUD-1: Genre cloud links had no spacing, causing all genre names to
   run together ('FictionHumorScience Fiction'). Flex-wrap with gap separates
   items. Five size-bucket classes (xs–xl) map to font-size values proportional
   to the min_size / max_size shortcode attributes (default 12–22 px). */
.mbs-genre-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: baseline;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mbs-genre-cloud a {
    color: var(--mbs-link);
    text-decoration: none;
    line-height: 1.3;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.mbs-genre-cloud a:hover {
    color: var(--mbs-button-hover);
    text-decoration: underline;
}

/* Size buckets: xs=12px, sm=14px, md=16px, lg=19px, xl=22px */
.mbs-genre-cloud .mbs-cloud-xs { font-size: 0.75rem;  }
.mbs-genre-cloud .mbs-cloud-sm { font-size: 0.875rem; }
.mbs-genre-cloud .mbs-cloud-md { font-size: 1rem;     }
.mbs-genre-cloud .mbs-cloud-lg { font-size: 1.1875rem; }
.mbs-genre-cloud .mbs-cloud-xl { font-size: 1.375rem; }

/* ==========================================================================
   @keyframes — must be global scope; cannot be nested
   ========================================================================== */
@keyframes mbs-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* ARC-032: Search spinner — hidden by default; shown via JS during AJAX fetch. */
.mbs-search-spinner {
    display: none;
}