/**
 * File Path: assets/css/mbs-compat.css
 * Universal Theme Compatibility Stylesheet — defensive .mbs-wrapper isolation.
 * Loaded when Compatibility Mode is enabled or by a per-theme compat PHP file.
 *
 * Rule discipline:
 *   - All rules scoped to .mbs-wrapper or its children.
 *   - Specificity preferred over !important wherever possible.
 *   - !important used only where themes are known to use it themselves,
 *     or where bare-element selectors cascade through every child.
 *   - No layout changes — corrects cascade bleed only.
 *   - No visual design changes — preserves MBS custom property values.
 *
 * @package MyBookShowroom
 * @since   1.0.0
 */


/* ==========================================================================
   1. Box-model isolation
   Reinforce box-sizing throughout .mbs-wrapper subtree.
   Themes (and Bootstrap) may set * { box-sizing: content-box } or leave
   it inconsistent. .mbs-front.css already sets box-sizing on .mbs-wrapper
   itself; this extends the guarantee to every descendant.
   ========================================================================== */

.mbs-wrapper *,
.mbs-wrapper *::before,
.mbs-wrapper *::after {
    box-sizing: border-box;
}


/* ==========================================================================
   2. .entry-content cascade override — headings
   Themes that wrap the_content() in .entry-content declare heading rules
   that cascade into .mbs-wrapper. The two-selector prefix (.entry-content
   .mbs-wrapper h*) provides the same specificity as the theme rules
   (.entry-content h*) so load order alone resolves the conflict in our
   favor without requiring !important.

   Confirmed bleed source: Graphene Plus style.css lines 1228–1241
     .entry-content h1–h6 { font-weight: bold; line-height: normal;
                             margin: 1em 0 0.5em }
   Same pattern present in virtually all themes — margin values vary.
   Fix: reset to a tight, neutral margin that won't disrupt MBS layouts.
   Font-weight and font-size are left to the theme — MBS has no opinion.
   ========================================================================== */

.entry-content .mbs-wrapper h1,
.entry-content .mbs-wrapper h2,
.entry-content .mbs-wrapper h3,
.entry-content .mbs-wrapper h4,
.entry-content .mbs-wrapper h5,
.entry-content .mbs-wrapper h6 {
    margin: 0 0 0.5em;
    line-height: 1.3;
}


/* ==========================================================================
   3. .entry-content cascade override — paragraphs
   Confirmed bleed: Graphene Plus style.css lines 1244–1259
     .entry-content p { margin-bottom: 1.5em; line-height: 1.5em }
     .entry-content p:last-child { margin-bottom: 0 }
   The 1.5em bottom margin creates excessive gap between paragraphs in
   MBS section content (About the Book, endorsements, etc.).
   Fix: tighter margin, preserve readable line-height.
   ========================================================================== */

.entry-content .mbs-wrapper p {
    margin: 0 0 0.75em;
    line-height: 1.6;
}

.entry-content .mbs-wrapper p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   4. .entry-content cascade override — lists
   Confirmed bleed: Graphene Plus style.css lines 1282–1292
     .entry-content ul, ol { padding: 0.5em 0 0.5em 1.5em; margin: 0 }
     .entry-content li { margin-bottom: 0.5em }
   The left padding pushes list content in MBS sections (format meta,
   endorsement lists). The .mbs-per-format-meta dl is not a ul/ol so is
   unaffected, but any prose lists in About the Book sections are.
   Fix: normalise to standard indentation, reduce per-item margin.
   ========================================================================== */

.entry-content .mbs-wrapper ul,
.entry-content .mbs-wrapper ol {
    padding: 0 0 0 1.25em;
    margin: 0 0 0.75em;
}

.entry-content .mbs-wrapper li {
    margin-bottom: 0.25em;
}

/* Meta list used in per-format details — no indent or bullets wanted */
.entry-content .mbs-wrapper .mbs-per-format-meta {
    padding: 0;
    margin: 0;
    list-style: none;
}


/* ==========================================================================
   5. Link color isolation
   Themes set a bare `a { color: <theme-color> }` at the lowest specificity
   (0,0,1). MBS currently has no bare `.mbs-wrapper a` color rule, so theme
   link colors bleed through to any undecorated anchor inside .mbs-wrapper
   (author name links, section read-more links, term-list items, etc.).

   Confirmed bleed: Graphene Plus style.css line 52
     a { color: #783d98 }   /* purple — unrelated to MBS palette */

   Fix: assert .mbs-wrapper a to use the MBS accent token. Specificity
   (0,1,1) beats all bare `a {}` theme rules. Buttons and retailer links
   override this via their own higher-specificity color rules in
   mbs-front.css, so this default only affects genuinely bare anchors.
   ========================================================================== */

.mbs-wrapper a {
    color: var(--mbs-link, var(--mbs-teal));
}

.mbs-wrapper a:hover,
.mbs-wrapper a:focus {
    color: var(--mbs-accent, var(--mbs-teal));
}

/* Buttons and retailer links declare their own colors — restore them
   explicitly so they are not affected by the bare-anchor rule above. */
.mbs-wrapper .mbs-order-now-btn,
.mbs-wrapper .mbs-order-now-btn:hover,
.mbs-wrapper .mbs-order-now-btn:focus {
    color: var(--mbs-button-text, #FFFFFF);
}

.mbs-wrapper .mbs-retailer-btn {
    color: var(--mbs-text, #333);
}

.mbs-wrapper .mbs-retailer-btn:hover,
.mbs-wrapper .mbs-retailer-btn:focus {
    color: #fff;
}

.mbs-wrapper .mbs-format-tab {
    color: var(--mbs-text, #333);
}

/* Active tab — white text on accent background */
.mbs-wrapper .mbs-format-tab.active {
    color: #fff;
}
/* .mbs-format-tab:hover now uses var(--mbs-accent) teal text on white
   background (mbs-front.css P-001) — no compat override needed. */


/* ==========================================================================
   6. Image containment
   Themes (and Bootstrap) commonly declare:
     img { max-width: 100%; height: auto }
   This is generally desirable for MBS cover images and poses no conflict.
   However some themes add borders, box-shadow, or float rules to
   .entry-content img that would apply to MBS covers.

   Confirmed pattern: Graphene Plus style.css lines 1216–1225
     .entry-content img { max-width: 100%; height: auto }
     .entry-content img { border: 0 none }       /* harmless */
     .entry-content p img { margin-top: 6px }     /* could nudge covers */

   Fix: assert explicit neutral values on MBS images so theme per-image
   rules do not alter cover presentation.
   ========================================================================== */

.mbs-wrapper img {
    border: 0 none;
    box-shadow: none;
    float: none;
    margin: 0;
    vertical-align: middle;
}

/* Cover images specifically: ensure max-width is capped at 110px per the
   global book-cover constraint, overriding any conflicting theme rules. */
.mbs-wrapper .mbs-cover,
.mbs-wrapper .mbs-book-card img {
    max-width: 110px;
    height: auto;
    display: block;
}


/* ==========================================================================
   7. Button element reset
   Themes often carry a global `button, input[type="button"] { ... }` reset
   that overrides cursor, font, and border on all button elements, including
   MBS's .mbs-order-now-btn and .mbs-tab-button which are <button> elements.
   Fix: re-assert the properties MBS relies on so theme button resets cannot
   undo them.
   ========================================================================== */

.mbs-wrapper button {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}


/* ==========================================================================
   8. Z-index / stacking context guard
   Some themes create stacking contexts on .entry-content or content wrappers
   (e.g. position: relative + z-index) that trap MBS modals and dropdowns
   below the theme's own header or navigation layer.
   The .mbs-modal is positioned fixed on <body>, outside .mbs-wrapper, so
   it is not trapped — no fix needed there.
   The retailer dropdown (.mbs-retailer-buttons) is position: static and
   uses max-height animation, so no stacking context issue.
   This section is reserved for future per-theme stacking fixes identified
   during live testing.
   ========================================================================== */

/* Reserved — no universal rule needed yet. */


/* ==========================================================================
   9. Term list isolation
   .mbs-term-list and .mbs-term-list__* are not nested inside .mbs-wrapper
   in the current architecture. These rules provide the same isolation
   guarantee for that component independently.
   ========================================================================== */

.mbs-term-list__item {
    text-decoration: none;
}

.mbs-term-list__item:hover {
    text-decoration: none;
}
