/* ============================================================================
 * RBB Description Polish — typography reset + craftsman styling
 * for the product description tab.
 *
 * Strategy:
 *   1. Aggressive reset on inline-style pollution (font-family, font-size, color)
 *      using `!important` so even Word/Google Docs paste garbage gets overridden.
 *   2. Real body typography (16-18px, line-height 1.65, max-width 70ch)
 *   3. Visual rhythm — proper paragraph spacing, list bullets, section feel
 *   4. Brand-consistent first-letter styling (drop cap optional)
 *
 * Selector targets the standard OpenCart 3 product description tab
 * (#tab-description). If your theme uses a different ID, see the JS file
 * which also sets data-rbb-polished="1" on whichever container matches.
 * ============================================================================ */

/* ---- Wrapper (set by either OC's default theme or our JS) ---- */
#tab-description,
[data-rbb-polished="1"] {
    /* Box / layout */
    max-width: 70ch;            /* ~720px — readable line length */
    margin: 0 auto;
    padding: 24px 8px 32px;

    /* Typography */
    font-family: Georgia, "Iowan Old Style", "Source Serif Pro", "PT Serif",
                 "Times New Roman", serif !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
    color: #2a2a2a !important;
    text-align: left;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Defensive: kill Word's color-on-everything */
    background: transparent;
}

/* ---- Override every nested inline-styled element ---- */
#tab-description *,
[data-rbb-polished="1"] * {
    font-family: inherit !important;
    color: inherit !important;
    background-color: transparent !important;
}

/* Allow font-size to scale per element type (don't override h tags etc.) */
#tab-description p, #tab-description li, #tab-description span, #tab-description div,
[data-rbb-polished="1"] p, [data-rbb-polished="1"] li,
[data-rbb-polished="1"] span, [data-rbb-polished="1"] div {
    font-size: inherit !important;
}

/* ---- Paragraph rhythm ---- */
#tab-description p,
[data-rbb-polished="1"] p {
    margin: 0 0 1.1em 0 !important;
    padding: 0 !important;
}
#tab-description p:last-child,
[data-rbb-polished="1"] p:last-child {
    margin-bottom: 0 !important;
}

/* ---- Headings ---- */
#tab-description h1, #tab-description h2, #tab-description h3,
#tab-description h4, #tab-description h5, #tab-description h6,
[data-rbb-polished="1"] h1, [data-rbb-polished="1"] h2, [data-rbb-polished="1"] h3,
[data-rbb-polished="1"] h4, [data-rbb-polished="1"] h5, [data-rbb-polished="1"] h6 {
    font-family: Georgia, serif !important;
    font-weight: 700 !important;
    color: #0a2548 !important;            /* RBB brand navy */
    margin: 1.6em 0 0.6em 0 !important;
    line-height: 1.25 !important;
}
#tab-description h2, [data-rbb-polished="1"] h2 { font-size: 1.5em !important; }
#tab-description h3, [data-rbb-polished="1"] h3 { font-size: 1.25em !important; }
#tab-description h4, [data-rbb-polished="1"] h4 { font-size: 1.1em !important; }

/* ---- Drop cap on first letter of first paragraph (optional, controlled by class) ---- */
.rbb-polished--dropcap p:first-of-type::first-letter {
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 3.6em !important;
    line-height: 0.85 !important;
    float: left;
    margin: 0.06em 0.08em 0 0;
    color: #1d4f91;                       /* RBB brand accent blue */
    background: linear-gradient(180deg, #ffd83a 0%, #ffec74 100%);
    padding: 4px 8px 2px;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* ---- Lists ---- */
#tab-description ul, #tab-description ol,
[data-rbb-polished="1"] ul, [data-rbb-polished="1"] ol {
    margin: 0 0 1.2em 0 !important;
    padding-left: 1.6em !important;
}
#tab-description ul li, #tab-description ol li,
[data-rbb-polished="1"] ul li, [data-rbb-polished="1"] ol li {
    margin: 0 0 0.4em 0 !important;
    padding: 0 !important;
}
#tab-description ul,
[data-rbb-polished="1"] ul {
    list-style-type: disc !important;
}

/* ---- Strong / emphasis ---- */
#tab-description strong, #tab-description b,
[data-rbb-polished="1"] strong, [data-rbb-polished="1"] b {
    font-weight: 700 !important;
    color: #0a2548 !important;
}
#tab-description em, #tab-description i,
[data-rbb-polished="1"] em, [data-rbb-polished="1"] i {
    font-style: italic !important;
}

/* ---- Links ---- */
#tab-description a,
[data-rbb-polished="1"] a {
    color: #1d4f91 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
    transition: color 120ms;
}
#tab-description a:hover,
[data-rbb-polished="1"] a:hover {
    color: #0a2548 !important;
}

/* ---- Images inside descriptions ---- */
#tab-description img,
[data-rbb-polished="1"] img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 1.2em auto !important;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ---- Blockquotes ---- */
#tab-description blockquote,
[data-rbb-polished="1"] blockquote {
    border-left: 4px solid #ffd83a !important;
    margin: 1.4em 0 !important;
    padding: 0.4em 1.2em !important;
    color: #444 !important;
    font-style: italic !important;
    background: #fffdf0;
}

/* ---- Tables (Word loves to dump tables) ---- */
#tab-description table,
[data-rbb-polished="1"] table {
    border-collapse: collapse !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 1.2em 0 !important;
    font-size: 0.95em !important;
}
#tab-description table td, #tab-description table th,
[data-rbb-polished="1"] table td, [data-rbb-polished="1"] table th {
    border: 1px solid #ddd !important;
    padding: 6px 10px !important;
    text-align: left !important;
}
#tab-description table th,
[data-rbb-polished="1"] table th {
    background: #f5f5f5 !important;
    font-weight: 700 !important;
}

/* ---- Horizontal rules ---- */
#tab-description hr,
[data-rbb-polished="1"] hr {
    border: 0 !important;
    border-top: 1px solid #ddd !important;
    margin: 2em 0 !important;
}

/* ---- Mobile: tighter padding ---- */
@media (max-width: 640px) {
    #tab-description, [data-rbb-polished="1"] {
        font-size: 16px !important;
        padding: 16px 4px 24px;
    }
    .rbb-polished--dropcap p:first-of-type::first-letter {
        font-size: 3em !important;
    }
}