/* ============================================================
   Foundry Workspaces — Blog article body
   ------------------------------------------------------------
   Styles the HTML produced by the admin editor (/admin/posts).
   Loaded LAST on /blog and /blog/:slug, after responsive.css.

   WHY THIS FILE EXISTS
   custom.css sized the article headings at h1 52 / h2 46 / h3 40 /
   h4 30 px, then reduced ONLY h2 inside its media queries (36px at
   <=991, 26px at <=767). h3 stayed at 40px, so on every tablet and
   phone an H3 rendered LARGER than the H2 above it and the two read
   as the same size on desktop. The scale below is fluid, so the
   H1 > H2 > H3 > H4 > H5 > H6 order holds at every viewport width
   from 320px up, with no separate breakpoints to keep in sync.

   Selectors use `.post-entry.post-rich-content` (two classes) so they
   out-specify the single-class `.post-entry` rules in custom.css —
   including the ones inside its media queries — without !important.
   ============================================================ */

.post-entry.post-rich-content {
    /* Long URLs and unbroken strings must not push the page sideways. */
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-size: clamp(16px, 1.15vw, 18px);
    line-height: 1.8;
    color: var(--text-color);
}

/* ------------------------------------------------------------
   1. HEADING HIERARCHY
   Each step is ~1.27x the next, which stays visibly distinct at
   every size. The vw term makes them shrink on small screens; the
   min/max terms stop them crossing over.
   ------------------------------------------------------------ */
.post-entry.post-rich-content h1,
.post-entry.post-rich-content h2,
.post-entry.post-rich-content h3,
.post-entry.post-rich-content h4,
.post-entry.post-rich-content h5,
.post-entry.post-rich-content h6 {
    color: var(--primary-color);
    font-weight: 600;
    letter-spacing: -0.015em;
    scroll-margin-top: 100px;
}

.post-entry.post-rich-content h1 {
    font-size: clamp(30px, 4.6vw, 46px);
    line-height: 1.15;
    margin: 1.1em 0 0.5em;
}

.post-entry.post-rich-content h2 {
    font-size: clamp(25px, 3.4vw, 36px);
    line-height: 1.2;
    margin: 1.5em 0 0.55em;
}

.post-entry.post-rich-content h3 {
    font-size: clamp(21px, 2.5vw, 28px);
    line-height: 1.3;
    margin: 1.5em 0 0.5em;
}

.post-entry.post-rich-content h4 {
    font-size: clamp(18px, 1.9vw, 22px);
    line-height: 1.4;
    margin: 1.5em 0 0.5em;
}

.post-entry.post-rich-content h5 {
    font-size: clamp(16.5px, 1.6vw, 19px);
    line-height: 1.45;
    margin: 1.5em 0 0.5em;
}

.post-entry.post-rich-content h6 {
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.5;
    margin: 1.5em 0 0.5em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-color);
}

/* The first block in the article shouldn't push itself away from the
   cover image. */
.post-entry.post-rich-content > :first-child {
    margin-top: 0;
}

/* ------------------------------------------------------------
   2. TEXT + INLINE FORMATTING
   ------------------------------------------------------------ */
.post-entry.post-rich-content p {
    margin: 0 0 1.15em;
    font-size: inherit;
    line-height: inherit;
}

.post-entry.post-rich-content p:last-child {
    margin-bottom: 0;
}

/* custom.css pinned `.post-entry p strong` to 18px, so bold text inside
   a large or small paragraph jumped to an unrelated size. Bold should
   only change weight. */
.post-entry.post-rich-content strong,
.post-entry.post-rich-content b,
.post-entry.post-rich-content p strong,
.post-entry.post-rich-content li strong {
    font-size: inherit;
    font-weight: 700;
    color: var(--primary-color);
}

.post-entry.post-rich-content em,
.post-entry.post-rich-content i {
    font-style: italic;
}

.post-entry.post-rich-content u {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-entry.post-rich-content s,
.post-entry.post-rich-content del {
    text-decoration: line-through;
}

.post-entry.post-rich-content sub { vertical-align: sub; font-size: 0.75em; }
.post-entry.post-rich-content sup { vertical-align: super; font-size: 0.75em; }

.post-entry.post-rich-content a {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .2s ease;
}

.post-entry.post-rich-content a:hover {
    color: var(--primary-color);
}

/* Headings that are themselves links keep the heading colour. */
.post-entry.post-rich-content h1 a,
.post-entry.post-rich-content h2 a,
.post-entry.post-rich-content h3 a,
.post-entry.post-rich-content h4 a {
    color: inherit;
}

.post-entry.post-rich-content hr {
    border: 0;
    border-top: 1px solid var(--divider-color);
    margin: 2.4em 0;
}

/* ------------------------------------------------------------
   3. LISTS
   The editor now saves real <ul>/<ol>, including nested levels.
   ------------------------------------------------------------ */
.post-entry.post-rich-content ul,
.post-entry.post-rich-content ol {
    margin: 0 0 1.15em;
    padding-left: 1.5em;
}

.post-entry.post-rich-content ul { list-style: disc; }
.post-entry.post-rich-content ol { list-style: decimal; }
.post-entry.post-rich-content ul ul { list-style: circle; }
.post-entry.post-rich-content ul ul ul { list-style: square; }
.post-entry.post-rich-content ol ol { list-style: lower-alpha; }
.post-entry.post-rich-content ol ol ol { list-style: lower-roman; }

.post-entry.post-rich-content li {
    font-size: inherit;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 0.5em;
}

.post-entry.post-rich-content li:last-child {
    margin-bottom: 0;
}

/* A nested list belongs to the item above it — no double gap. */
.post-entry.post-rich-content li > ul,
.post-entry.post-rich-content li > ol {
    margin: 0.5em 0 0;
}

/* Checklists (Quill's checked/unchecked items) */
.post-entry.post-rich-content ul.post-checklist {
    list-style: none;
    padding-left: 0;
}

.post-entry.post-rich-content ul.post-checklist > li {
    padding-left: 1.85em;
    position: relative;
}

.post-entry.post-rich-content ul.post-checklist > li::before {
    content: "\2610";
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-size: 1.15em;
    line-height: 1.5;
}

.post-entry.post-rich-content ul.post-checklist > li[data-checked="true"]::before {
    content: "\2611";
}

/* ------------------------------------------------------------
   4. MEDIA — never wider than the column
   ------------------------------------------------------------ */
.post-entry.post-rich-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 1.6em 0;
}

/* An inline image inside a paragraph shouldn't force its own block. */
.post-entry.post-rich-content p > img {
    margin-left: auto;
    margin-right: auto;
}

.post-entry.post-rich-content figure {
    margin: 1.6em 0;
    max-width: 100%;
}

.post-entry.post-rich-content figcaption {
    font-size: 0.85em;
    color: var(--text-color);
    opacity: 0.8;
    text-align: center;
    margin-top: 0.7em;
}

.post-entry.post-rich-content iframe,
.post-entry.post-rich-content video,
.post-entry.post-rich-content embed,
.post-entry.post-rich-content object {
    display: block;
    max-width: 100%;
    margin: 1.6em 0;
    border: 0;
    border-radius: 14px;
}

/* Quill video embeds carry no intrinsic ratio. */
.post-entry.post-rich-content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

/* ------------------------------------------------------------
   5. QUOTES, CODE, TABLES
   ------------------------------------------------------------ */
.post-entry.post-rich-content blockquote {
    background: #fbf7f2;
    background-image: none;
    border-left: 4px solid var(--accent-color);
    border-radius: 0 14px 14px 0;
    padding: 1.2em 1.5em;
    margin: 1.6em 0;
}

.post-entry.post-rich-content blockquote p {
    font-size: 1.05em;
    font-weight: 500;
    font-style: italic;
    line-height: 1.6;
    color: var(--primary-color);
    margin-bottom: 0.6em;
}

.post-entry.post-rich-content blockquote p:last-child {
    margin-bottom: 0;
}

.post-entry.post-rich-content code {
    background: rgba(15, 15, 15, 0.06);
    border-radius: 4px;
    padding: 0.15em 0.4em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    color: var(--primary-color);
}

.post-entry.post-rich-content pre {
    background: #14161d;
    color: #e5e7eb;
    border-radius: 12px;
    padding: 1.1em 1.3em;
    margin: 1.6em 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.88em;
    line-height: 1.65;
}

.post-entry.post-rich-content pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    white-space: pre;
}

/* A wide table must scroll inside itself rather than widen the page. */
.post-entry.post-rich-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin: 1.6em 0;
    font-size: 0.95em;
}

.post-entry.post-rich-content th,
.post-entry.post-rich-content td {
    border: 1px solid var(--divider-color);
    padding: 0.6em 0.9em;
    text-align: left;
}

.post-entry.post-rich-content th {
    background: rgba(15, 15, 15, 0.04);
    color: var(--primary-color);
    font-weight: 600;
}

/* ------------------------------------------------------------
   6. ALIGNMENT (saved by the editor's align control)
   ------------------------------------------------------------ */
.post-entry.post-rich-content .ql-align-center { text-align: center; }
.post-entry.post-rich-content .ql-align-right  { text-align: right; }
.post-entry.post-rich-content .ql-align-justify { text-align: justify; }

.post-entry.post-rich-content img.ql-align-center { margin-left: auto; margin-right: auto; }
.post-entry.post-rich-content img.ql-align-right  { margin-left: auto; margin-right: 0; }

/* ------------------------------------------------------------
   7. ARTICLE SHELL — tablet and phone
   ------------------------------------------------------------ */
@media only screen and (max-width: 991px) {

    .post-entry.post-rich-content {
        line-height: 1.75;
    }

    .post-entry.post-rich-content img,
    .post-entry.post-rich-content iframe,
    .post-entry.post-rich-content figure {
        margin: 1.3em 0;
        border-radius: 12px;
    }
}

@media only screen and (max-width: 767px) {

    .page-single-post {
        padding: 40px 0;
    }

    .post-entry.post-rich-content blockquote {
        padding: 1em 1.1em;
        border-radius: 0 10px 10px 0;
    }

    .post-entry.post-rich-content ul,
    .post-entry.post-rich-content ol {
        padding-left: 1.25em;
    }

    .post-entry.post-rich-content pre {
        padding: 0.9em 1em;
        border-radius: 10px;
    }

    /* The share row and tag list stack instead of colliding. */
    .post-tag-links .post-social-sharing ul {
        text-align: left;
        padding-left: 0;
    }
}

/* ------------------------------------------------------------
   8. POST META / SHELL FIXES (single + list pages)
   ------------------------------------------------------------ */

/* The single-post byline row is a plain <ol> from the template; keep it
   from inheriting list bullets or wrapping badly on phones. */
.post-single-meta ol.breadcrumb {
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-single-meta ol.breadcrumb li {
    margin-right: 0;
}

/* Cover image: the template forces a 2:1 crop, which is a letterbox slit
   on a phone. Give it a taller ratio as the screen narrows. */
@media only screen and (max-width: 767px) {

    .post-image img {
        aspect-ratio: 3 / 2;
    }
}

@media only screen and (max-width: 480px) {

    .post-image img {
        aspect-ratio: 4 / 3;
    }

    .post-image figure,
    .post-image img {
        border-radius: 12px;
    }
}

/* Blog index cards: the excerpt and title must not overflow their card. */
.post-item-content h2,
.post-item-content p {
    overflow-wrap: break-word;
}

.post-item-content h2 {
    line-height: 1.3;
}