/* ============================================================================
   Lite Blog — user-entered article content (Madroña Vineyards skin)
   ONE set of rules for everything the editor can produce, applied wherever a
   post body renders: the post page (.blog-post-body), the full article on the
   listing (.blog-article-full), the expand-in-place fragment, and the TinyMCE
   editor itself (content_css + body_class in admin/edit.php), so the writer
   sees what the visitor sees. Wrapper class: .blog-content
   Audit 2026-09-25 (owner): body text #2e2e2e, list markers flush with the
   paragraph edge, nested lists, tables, rules, code, long-word wrapping.
   ============================================================================ */

.blog-content {
    line-height: 1.6;
    color: #2e2e2e;
    overflow-wrap: break-word;   /* pasted URLs never widen the column */
}

/* --- Links ------------------------------------------------------------- */
.blog-content a {
    color: #346cb4;
    text-decoration: underline;
}
.blog-content a:hover,
.blog-content a:active,
.blog-content a:focus-visible {
    color: #346cb4;
    text-decoration: none;
}

/* --- Headings: charcoal + smaller so they read as chapters of the post,
       never as new posts (burgundy = post titles only) ------------------- */
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
    color: #2e2e2e;
    margin: 30px 0 10px;
}
.blog-content h2 { font-size: 26px; }
.blog-content h3 { font-size: 22px; }
.blog-content h4 { font-size: 19px; }
.blog-content h5,
.blog-content h6 { font-size: 17px; }
.blog-content > h2:first-child,
.blog-content > h3:first-child,
.blog-content > h4:first-child { margin-top: 0; }

/* --- Lists: the marker sits flush with the paragraph edge and wrapped
       lines hang under the text, not under the number ------------------- */
.blog-content ul,
.blog-content ol {
    margin: 0 0 10px;            /* same rhythm as paragraphs */
    /* no padding-left here: the page rules give ol/ul the same left padding
       as p (theme 15px on the post page, 0 on the listing), so a list starts
       exactly where a paragraph does */
    list-style-position: inside;
}
.blog-content li {
    padding-left: 1.6em;
    text-indent: -1.6em;         /* hanging indent: number at the edge,
                                    continuation lines under the text */
    margin-bottom: 4px;
}
.blog-content li > p,
.blog-content li > div,
.blog-content li > ul,
.blog-content li > ol {
    text-indent: 0;              /* block children keep their own indent */
}
.blog-content li > p { margin-bottom: 4px; }
.blog-content li > ul,
.blog-content li > ol {
    margin: 4px 0 0;
    padding-left: 0;             /* nested list: markers align with the
                                    parent item's text, via the 1.6em above */
}
.blog-content ul { list-style-type: disc; }
.blog-content ul ul { list-style-type: circle; }
.blog-content ol ol { list-style-type: lower-alpha; }

/* --- Paragraph-level extras --------------------------------------------- */
.blog-content blockquote {
    border-left: 4px solid #702c3c;
    margin: 25px 0;
    padding: 15px 25px;
    background: #f5f5f5;
    font-style: italic;
    font-size: inherit;
}
.blog-content blockquote p:last-child { margin-bottom: 0; }
.blog-content hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 30px 0;
}
.blog-content pre,
.blog-content code {
    font-family: Menlo, Consolas, monospace;
    font-size: 14px;
    color: #2e2e2e;
    background: #f5f5f5;
}
.blog-content pre {
    padding: 12px 15px;
    overflow-x: auto;
    white-space: pre-wrap;
}
.blog-content code { padding: 1px 4px; }
.blog-content sup,
.blog-content sub { font-size: 75%; line-height: 0; }

/* --- Tables --------------------------------------------------------------- */
.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: 15px;
}
.blog-content th,
.blog-content td {
    text-align: left;
    vertical-align: top;
    padding: 8px 10px;
    border: 1px solid #ddd;
    color: #2e2e2e;
}
.blog-content th {
    background: #f5f5f5;
    font-weight: 700;
}
.blog-content .table-wrap { overflow-x: auto; }

/* --- Photos --------------------------------------------------------------- */
.blog-content img {
    max-width: 100%;
    height: auto;
}
/* Inline photos from the editor: optional figcaption renders as a solid
   color bar; placement classes come from the Add Photo wizard. */
.blog-content figure.image {
    display: table;
    max-width: 100%;
    margin: 5px 0 15px;
}
.blog-content figure.image img {
    display: block;
}
.blog-content figure.image figcaption {
    display: table-caption;
    caption-side: bottom;
    /* same palette as the banner caption: burgundy on light gray */
    background: #f5f5f5;
    color: #702c3c;
    text-align: center;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
}
/* figure.image variants outrank the figure.image base rule, whose
   max-width/margin otherwise beat these classes on captioned photos */
.blog-content .img-float-left,
.blog-content figure.image.img-float-left {
    float: left;
    max-width: 45%;
    margin: 5px 30px 10px 0;
}
.blog-content .img-float-right,
.blog-content figure.image.img-float-right {
    float: right;
    max-width: 45%;
    margin: 5px 0 10px 30px;
}
/* legacy inline-styled floats from converted newsletters: widen the
   text gap to match (their inline margin-left is 15px) */
.blog-content img[style*="float: right"] {
    margin-left: 25px !important;
}
.blog-content .img-full,
.blog-content figure.image.img-full {
    float: none;
    width: 100%;
    max-width: 100%;
}
/* the share row and anything after the body clears floated photos */
.blog-content::after {
    content: "";
    display: table;
    clear: both;
}

/* --- Video embeds: full width, 16:9, no phone-width overflow -------------- */
.blog-content iframe[src*="youtube"],
.blog-content iframe[src*="youtu.be"],
.blog-content iframe[src*="vimeo"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}
.blog-content iframe { max-width: 100%; }

@media (max-width: 600px) {
    .blog-content .img-float-left,
    .blog-content .img-float-right,
    .blog-content figure.image.img-float-left,
    .blog-content figure.image.img-float-right {
        float: none;
        max-width: 100%;
        margin: 5px 0 15px;
    }
    /* legacy inline-styled floats from converted newsletters */
    .blog-content img[style*="float"] {
        float: none !important;
        max-width: 100% !important;
        margin: 5px 0 15px !important;
    }
    .blog-content table { font-size: 14px; }
}