/* ============================================================================
   Lite Blog — user-entered article content
   ONE set of rules for everything the editor can produce, applied wherever a
   post body renders: the post page, the full article on the listing
   (expand-in-place), the expand 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
   Colors come from the site's --color-* tokens (includes/head.php); the
   fallbacks only matter inside the editor iframe, which has no site CSS.
   Ported from madronavineyards.com (v1.2, October 2026): list markers flush
   with the paragraph edge, nested lists, tables, rules, code, long-word
   wrapping, 30px under block photos, side photos on their own line <768px.
   ============================================================================ */

/* idahocf.org: the site defines no --color-* tokens, so they are set here
   for the article wrapper (and so the editor canvas matches). Links keep the
   Bootstrap default the live v1.0 post page has always shown; headings and
   the blockquote match the post page's own rules in post.php. */
.blog-content {
    --color-text: #333;
    --color-light: #f7f8e8;
    --color-border: #ddd;
    --font-heading: 'Lora', Georgia, serif;
}
.blog-content h2,
.blog-content h3,
.blog-content h4 { color: #1d3b3b; }
.blog-content blockquote { border-left-color: #c8cc7a; }

.blog-content {
    line-height: 1.7;
    color: var(--color-text, #2e2e2e);
    overflow-wrap: break-word;   /* pasted URLs never widen the column */
}

/* --- Links ------------------------------------------------------------- */
.blog-content a {
    color: var(--color-primary, #0d6efd);
    text-decoration: underline;
}
.blog-content a:hover { color: var(--color-secondary, var(--color-primary, #0a58ca)); }
.blog-content a:focus-visible { text-decoration: none; }

/* --- Headings: chapters of the post, smaller than the post title ------- */
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
    font-family: var(--font-heading, inherit);
    color: var(--color-primary, #212529);
    margin: 2rem 0 0.625rem;
}
.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 1rem;            /* same rhythm as paragraphs */
    padding-left: 0;
    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 var(--color-secondary, #6c757d);
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: var(--color-light, #f5f5f5);
    font-style: italic;
    font-size: inherit;
}
.blog-content blockquote p:last-child { margin-bottom: 0; }
.blog-content > :last-child { margin-bottom: 0; }
.blog-content hr {
    border: 0;
    border-top: 1px solid var(--color-border, #ddd);
    margin: 2rem 0;
    opacity: 1;
}
.blog-content pre,
.blog-content code {
    font-family: Menlo, Consolas, monospace;
    font-size: 0.875em;
    color: var(--color-text, #2e2e2e);
    background: var(--color-light, #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 1.25rem;
    font-size: 0.9375em;
}
.blog-content th,
.blog-content td {
    text-align: left;
    vertical-align: top;
    padding: 8px 10px;
    border: 1px solid var(--color-border, #ddd);
    color: var(--color-text, #2e2e2e);
}
.blog-content th {
    background: var(--color-light, #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
   bar under the photo; placement classes come from the Add Photo wizard. */
.blog-content figure.image {
    display: table;
    max-width: 100%;
    margin: 5px 0 30px; /* a block photo above text: 30px (floats keep their own margins) */
}
.blog-content figure.image img {
    display: block;
}
.blog-content figure.image figcaption {
    display: table-caption;
    caption-side: bottom;
    background: var(--color-light, #f5f5f5);
    color: var(--color-text, #2e2e2e);
    text-align: center;
    padding: 8px 12px;
    font-size: 0.8125rem;
    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;
}
.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%; }

/* Below 768px (where Bootstrap columns stack) a side photo gets its own
   line. A bare <img> needs display:block as well as float:none: un-floated
   it is still inline, and the paragraph's first words sit beside it on its
   baseline (madronavineyards.com 2026-10-04). A captioned figure stays
   display:table so the caption bar keeps the photo's width. Both center at
   natural size, never wider than the column, 30px to the text. */
@media (max-width: 767px) {
    .blog-content img.img-float-left,
    .blog-content img.img-float-right {
        float: none;
        display: block;
        max-width: 100%;
        margin: 5px auto 30px;
    }
    .blog-content figure.image.img-float-left,
    .blog-content figure.image.img-float-right {
        float: none;
        display: table;
        max-width: 100%;
        margin: 5px auto 30px;
    }
    /* inline-styled floats pasted from newsletters or older editors */
    .blog-content img[style*="float"] {
        float: none !important;
        display: block !important;
        max-width: 100% !important;
        margin: 5px auto 30px !important;
    }
}
@media (max-width: 600px) {
    .blog-content table { font-size: 0.875em; }
}