/**
 * Blog reading experience: typography, tables, table of contents, comments.
 * Scoped to single posts + blog archives. Loaded only where needed.
 *
 * @package understrap-child
 */

:root {
    --uw-brand: #268FDE;
    --uw-brand-dark: #1F75B5;
    --uw-brand-deep: #14568a;
    --uw-accent: #FFE000;
    --uw-ink: #1a1a2e;
    --uw-body: #2f3a4a;
    --uw-muted: #6b7a90;
    --uw-tint: #f2f8fd;
    --uw-tint-2: #f8fbfe;
    --uw-line: #e3ecf5;
    --uw-radius: 14px;
}

/* ==========================================================================
   1. ARTICLE SHELL
   ========================================================================== */

.single-post-article {
    padding: 48px 56px 40px;
    max-width: 100%;
}

/* The measure is what makes long-form readable: ~68-75 characters per line. */
.single-post-article .entry-content {
    max-width: 42em;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.78;
    color: var(--uw-body);
    letter-spacing: -0.003em;
}

/* Full-bleed elements escape the measure so tables and images get room. */
.single-post-article .entry-content > .uw-table-wrap,
.single-post-article .entry-content > .wp-block-table,
.single-post-article .entry-content > figure,
.single-post-article .entry-content > .uw-toc {
    max-width: none;
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

.single-post-article .entry-content p {
    margin: 0 0 1.55em;
}

/* Lead paragraph: sets the pace, signals "this is the summary". */
.single-post-article .entry-content > p.uw-lead {
    font-size: 1.25rem;
    line-height: 1.62;
    color: #46536a;
    margin-bottom: 1.4em;
}

/* The bold TL;DR paragraph editors write under the lead. */
.single-post-article .entry-content > p.uw-keytakeaway {
    font-size: 1.0625rem;
    line-height: 1.7;
    background: var(--uw-tint);
    border-left: 4px solid var(--uw-brand);
    border-radius: 0 12px 12px 0;
    padding: 22px 26px;
    margin: 0 0 2.4em;
    color: var(--uw-ink);
}

.single-post-article .entry-content > p.uw-keytakeaway strong {
    font-weight: 600;
}

/* --- Headings: heavy space above, tight space below, so each heading
       visually belongs to the text it introduces. --- */

.single-post-article .entry-content h2 {
    font-size: clamp(1.55rem, 1.15rem + 1.4vw, 2rem);
    line-height: 1.25;
    font-weight: 800;
    color: var(--uw-ink);
    margin: 3.2em 0 0.75em;
    padding-top: 0.9em;
    border-top: 1px solid var(--uw-line);
    position: relative;
    letter-spacing: -0.02em;
    scroll-margin-top: 100px;
}

.single-post-article .entry-content h2::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--uw-brand), var(--uw-accent));
}

.single-post-article .entry-content > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.single-post-article .entry-content > h2:first-child::before {
    display: none;
}

.single-post-article .entry-content h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.45rem);
    line-height: 1.35;
    font-weight: 700;
    color: var(--uw-ink);
    margin: 2.4em 0 0.7em;
    letter-spacing: -0.012em;
    scroll-margin-top: 100px;
}

.single-post-article .entry-content h4 {
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--uw-ink);
    margin: 2em 0 0.6em;
    scroll-margin-top: 100px;
}

.single-post-article .entry-content h2 a,
.single-post-article .entry-content h3 a,
.single-post-article .entry-content h4 a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--uw-brand), var(--uw-brand));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.3s ease;
}

.single-post-article .entry-content h2 a:hover,
.single-post-article .entry-content h3 a:hover,
.single-post-article .entry-content h4 a:hover {
    color: var(--uw-brand-dark);
    background-size: 100% 2px;
}

.single-post-article .entry-content strong,
.single-post-article .entry-content b {
    font-weight: 700;
    color: var(--uw-ink);
}

/* --- Body links: underlined, but quietly. Heavy internal linking is normal
       on this site, so full-strength colour on every link creates the
       "cluttered" look. --- */

.single-post-article .entry-content a:not(.uw-toc a):not(.wp-block-button__link) {
    color: #1668a8;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(38, 143, 222, 0.4);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.single-post-article .entry-content a:hover {
    color: var(--uw-brand-deep);
    text-decoration-color: var(--uw-brand);
}

/* ==========================================================================
   3. LISTS
   ========================================================================== */

.single-post-article .entry-content ul,
.single-post-article .entry-content ol {
    margin: 0 0 1.7em;
    padding: 0;
    list-style: none;
}

.single-post-article .entry-content li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.75em;
    line-height: 1.72;
}

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

.single-post-article .entry-content ul > li::before {
    content: "";
    position: absolute;
    left: 0.35em;
    top: 0.72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--uw-brand);
}

.single-post-article .entry-content ol {
    counter-reset: uw-ol;
}

.single-post-article .entry-content ol > li {
    counter-increment: uw-ol;
}

.single-post-article .entry-content ol > li::before {
    content: counter(uw-ol);
    position: absolute;
    left: 0;
    top: 0.18em;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: var(--uw-brand);
    color: #fff;
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1.5em;
    text-align: center;
}

.single-post-article .entry-content li > ul,
.single-post-article .entry-content li > ol {
    margin: 0.7em 0 0;
}

/* ==========================================================================
   4. BLOCKQUOTES
   ========================================================================== */

.single-post-article .entry-content blockquote {
    position: relative;
    margin: 2.2em 0;
    padding: 28px 32px 28px 76px;
    background: linear-gradient(135deg, #f7fbff 0%, var(--uw-tint) 100%);
    border: 1px solid var(--uw-line);
    border-left: 4px solid var(--uw-brand);
    border-radius: 0 var(--uw-radius) var(--uw-radius) 0;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #33405a;
}

.single-post-article .entry-content blockquote::before {
    content: "\201C";
    position: absolute;
    left: 24px;
    top: 2px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.5rem;
    line-height: 1;
    color: rgba(38, 143, 222, 0.28);
}

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

.single-post-article .entry-content blockquote cite {
    display: block;
    margin-top: 12px;
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
    color: var(--uw-muted);
}

/* Inside a list item a blockquote should not run to the bezel. */
.single-post-article .entry-content li > blockquote {
    margin: 1em 0 0.5em;
}

.single-post-article .entry-content li > blockquote br {
    display: none;
}

/* ==========================================================================
   5. TABLES  — the comparison tables are the money content on this site
   ========================================================================== */

.single-post-article .entry-content .uw-table-wrap {
    position: relative;
    margin: 2.6em 0;
}

.single-post-article .entry-content .uw-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--uw-radius);
    box-shadow: 0 4px 24px rgba(20, 86, 138, 0.10);
    border: 1px solid var(--uw-line);
    background: #fff;
}

.single-post-article .entry-content table,
.single-post-article .entry-content .wp-block-table table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-size: 0.9875rem;
    line-height: 1.6;
    background: #fff;
    color: var(--uw-body);
}

.single-post-article .entry-content table.has-fixed-layout {
    table-layout: auto;
}

.single-post-article .entry-content thead th {
    background: linear-gradient(135deg, var(--uw-brand) 0%, var(--uw-brand-dark) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    padding: 16px 20px;
    border: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.single-post-article .entry-content thead th:first-child {
    border-top-left-radius: var(--uw-radius);
}

.single-post-article .entry-content thead th:last-child {
    border-top-right-radius: var(--uw-radius);
}

.single-post-article .entry-content thead th a {
    color: #fff !important;
    text-decoration-color: rgba(255, 255, 255, 0.5) !important;
}

.single-post-article .entry-content tbody td {
    padding: 15px 20px;
    border: 0;
    border-bottom: 1px solid #eef3f9;
    vertical-align: top;
}

.single-post-article .entry-content tbody tr:nth-child(even) {
    background: var(--uw-tint-2);
}

.single-post-article .entry-content tbody tr:hover {
    background: #eaf4fd;
}

.single-post-article .entry-content tbody tr:last-child td {
    border-bottom: 0;
}

/* First column reads as the row label. */
.single-post-article .entry-content tbody td:first-child {
    font-weight: 600;
    color: var(--uw-ink);
}

.single-post-article .entry-content tbody td strong {
    font-weight: 600;
}

.single-post-article .entry-content .wp-block-table figcaption,
.single-post-article .entry-content .uw-table-wrap figcaption {
    margin-top: 12px;
    font-size: 0.875rem;
    color: var(--uw-muted);
    text-align: center;
}

/* Scroll affordance — only shown while the table actually overflows. */
.single-post-article .entry-content .uw-table-hint {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--uw-brand-dark);
}

.single-post-article .entry-content .uw-table-wrap.is-scrollable .uw-table-hint {
    display: flex;
}

/* Reset Gutenberg's own figure margins so ours win. */
.single-post-article .entry-content .wp-block-table {
    margin: 0;
    overflow: visible;
}

/* --- Mobile: turn each row into a self-contained card. A 3-column
       comparison table is unreadable at 375px otherwise. --- */

@media (max-width: 600px) {
    .single-post-article .entry-content .uw-table-scroll {
        overflow: visible;
        border: 0;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
    }

    .single-post-article .entry-content .uw-table-wrap.is-scrollable .uw-table-hint {
        display: none;
    }

    .single-post-article .entry-content table.uw-stack,
    .single-post-article .entry-content table.uw-stack tbody,
    .single-post-article .entry-content table.uw-stack tr,
    .single-post-article .entry-content table.uw-stack td {
        display: block;
        width: 100%;
    }

    .single-post-article .entry-content table.uw-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .single-post-article .entry-content table.uw-stack tr {
        margin-bottom: 16px;
        border: 1px solid var(--uw-line);
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 12px rgba(20, 86, 138, 0.08);
    }

    .single-post-article .entry-content table.uw-stack tbody tr:nth-child(even),
    .single-post-article .entry-content table.uw-stack tbody tr:hover {
        background: #fff;
    }

    /* First cell becomes the card header. */
    .single-post-article .entry-content table.uw-stack td:first-child {
        background: linear-gradient(135deg, var(--uw-brand) 0%, var(--uw-brand-dark) 100%);
        color: #fff;
        font-weight: 700;
        font-size: 0.9375rem;
        padding: 12px 16px;
        border-bottom: 0;
    }

    .single-post-article .entry-content table.uw-stack td:first-child strong {
        color: #fff;
        font-weight: 700;
    }

    .single-post-article .entry-content table.uw-stack td:first-child::before {
        display: none;
    }

    .single-post-article .entry-content table.uw-stack td:first-child a {
        color: #fff !important;
    }

    .single-post-article .entry-content table.uw-stack td {
        padding: 12px 16px;
        border-bottom: 1px solid #eef3f9;
        font-size: 0.9375rem;
    }

    .single-post-article .entry-content table.uw-stack td:last-child {
        border-bottom: 0;
    }

    .single-post-article .entry-content table.uw-stack td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--uw-brand-dark);
    }
}

/* ==========================================================================
   6. TABLE OF CONTENTS
   ========================================================================== */

.uw-toc {
    margin: 0 0 2.8em;
    padding: 24px 28px;
    background: linear-gradient(135deg, #f7fbff 0%, var(--uw-tint) 100%);
    border: 1px solid var(--uw-line);
    border-radius: var(--uw-radius);
}

/* Rendered as a <span> - reset anything inherited from content headings. */
.uw-toc__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--uw-brand-dark);
}

.uw-toc__title i {
    color: var(--uw-brand);
}

.uw-toc__list,
.uw-toc__sublist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.uw-toc__list > li {
    margin: 0;
    padding: 0;
}

.uw-toc__list > li + li {
    border-top: 1px solid rgba(38, 143, 222, 0.12);
}

.uw-toc__list > li > a {
    display: block;
    padding: 9px 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: #2b3a52;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

.uw-toc__list > li > a:hover {
    color: var(--uw-brand-dark);
}

.uw-toc__sublist {
    padding: 0 0 10px 12px;
}

.uw-toc__sublist a {
    display: block;
    padding: 5px 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: #56657f;
    text-decoration: none !important;
    border-left: 2px solid rgba(38, 143, 222, 0.2);
    padding-left: 14px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.uw-toc__sublist a:hover {
    color: var(--uw-brand-dark);
    border-color: var(--uw-brand);
}

.uw-toc a.is-active,
.uw-toc__sublist a.is-active {
    color: var(--uw-brand-dark);
}

.uw-toc__sublist a.is-active {
    border-color: var(--uw-accent);
}

/*
 * The TOC is injected inside .entry-content, so the prose list rules in
 * section 3 also match it: they were painting a numbered bullet on every
 * item and hijacking the counter. The TOC is navigation, not prose - opt it
 * out explicitly. These selectors are one class more specific than the
 * .entry-content ol/ul rules they override.
 */
.single-post-article .entry-content .uw-toc ol,
.single-post-article .entry-content .uw-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.single-post-article .entry-content .uw-toc li {
    position: static;
    margin: 0;
    padding-left: 0;
    counter-increment: none;
}

.single-post-article .entry-content .uw-toc li::before {
    content: none;
    display: none;
}

/* Must out-specify the `.uw-toc ul` reset directly above (0,3,1). */
.single-post-article .entry-content ul.uw-toc__sublist {
    padding: 0 0 10px 12px;
}

/* ==========================================================================
   7. READING PROGRESS
   ========================================================================== */

.uw-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100%;
    height: 3px;
    background: transparent;
    pointer-events: none;
}

.uw-progress__bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--uw-brand), var(--uw-accent));
    transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
    .uw-progress__bar {
        transition: none;
    }
}

/* ==========================================================================
   8. IMAGES & MEDIA IN CONTENT
   ========================================================================== */

.single-post-article .entry-content figure:not(.wp-block-table) {
    margin: 2.4em 0;
}

.single-post-article .entry-content figure img,
.single-post-article .entry-content > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--uw-radius);
    box-shadow: 0 6px 26px rgba(20, 86, 138, 0.12);
}

.single-post-article .entry-content figcaption {
    margin-top: 12px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--uw-muted);
    text-align: center;
}

.single-post-article .entry-content hr {
    margin: 3em 0;
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--uw-line), transparent);
}

.single-post-article .entry-content iframe {
    max-width: 100%;
    border-radius: var(--uw-radius);
}

/* ==========================================================================
   9. COMMENTS
   ========================================================================== */

.comments-area {
    max-width: 100%;
    margin: 48px 0 0;
    padding: 40px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.comments-area .comments-title,
.comments-area .comment-reply-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--uw-ink);
}

.comments-area .comments-title i,
.comments-area .comment-reply-title i {
    color: var(--uw-brand);
    font-size: 1.25rem;
}

.comments-area .comments-intro {
    margin: 0 0 28px;
    font-size: 0.9375rem;
    color: var(--uw-muted);
}

/* --- Comment list --- */

.comment-list {
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.comment-list ol.children {
    margin: 20px 0 0;
    padding: 0 0 0 32px;
    list-style: none;
    border-left: 2px solid var(--uw-line);
}

.comment-list > li.comment,
.comment-list > li.pingback {
    margin-bottom: 20px;
    padding: 0;
    list-style: none;
}

/* The global `article { max-width: 768px }` rule must not clamp comments. */
.uw-comment {
    max-width: none;
    display: flex;
    gap: 18px;
    padding: 22px 24px;
    background: var(--uw-tint-2);
    border: 1px solid var(--uw-line);
    border-radius: var(--uw-radius);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.uw-comment:hover {
    border-color: rgba(38, 143, 222, 0.35);
    box-shadow: 0 4px 18px rgba(20, 86, 138, 0.08);
}

.comment-list .children .uw-comment {
    background: #fff;
}

/* Highlight the site's own replies — trust signal on an affiliate site. */
.uw-comment.is-author {
    background: linear-gradient(135deg, #f7fbff 0%, var(--uw-tint) 100%);
    border-color: rgba(38, 143, 222, 0.4);
}

.uw-comment__avatar img {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.uw-comment__body {
    flex: 1;
    min-width: 0;
}

.uw-comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 10px;
}

.uw-comment__author {
    font-size: 1rem;
    font-weight: 700;
    color: var(--uw-ink);
}

.uw-comment__author a {
    color: var(--uw-ink);
    text-decoration: none;
}

.uw-comment__author a:hover {
    color: var(--uw-brand-dark);
}

.uw-comment__badge {
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--uw-brand);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.uw-comment__date {
    font-size: 0.8125rem;
    color: var(--uw-muted);
}

.uw-comment__date a {
    color: inherit;
    text-decoration: none;
}

.uw-comment__date a:hover {
    color: var(--uw-brand-dark);
}

.uw-comment__text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--uw-body);
}

.uw-comment__text p {
    margin: 0 0 0.9em;
}

.uw-comment__text p:last-child {
    margin-bottom: 0;
}

.uw-comment__moderation {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 14px;
    border-radius: 20px;
    background: #fff6d6;
    border: 1px solid #f2d98a;
    color: #806100;
    font-size: 0.8125rem;
    font-weight: 600;
}

.uw-comment__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
}

.uw-comment__actions a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--uw-brand-dark);
    text-decoration: none;
}

.uw-comment__actions a:hover {
    color: var(--uw-brand-deep);
    text-decoration: underline;
}

/* --- Comment form --- */

.comment-respond {
    margin-top: 8px;
    padding: 32px;
    background: linear-gradient(135deg, #f7fbff 0%, var(--uw-tint) 100%);
    border: 1px solid var(--uw-line);
    border-radius: var(--uw-radius);
}

.comment-list .comment-respond {
    margin: 20px 0 0;
}

.comment-respond .comment-reply-title {
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.comment-respond .comment-reply-title small {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 600;
}

.comment-respond .comment-reply-title small a {
    color: #b4453c;
    text-decoration: none;
}

.comment-form .comment-form-intro {
    margin: 0 0 22px;
    font-size: 0.9375rem;
    color: var(--uw-muted);
}

.comment-form .uw-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.comment-form p {
    margin: 0 0 18px;
}

.comment-form .uw-form-grid p {
    margin: 0;
}

.comment-form label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--uw-ink);
}

.comment-form label .required {
    color: #d9534f;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 13px 16px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--uw-ink);
    background: #fff;
    border: 1.5px solid #d9e4ef;
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.comment-form textarea {
    min-height: 150px;
    line-height: 1.65;
    resize: vertical;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline: 0;
    border-color: var(--uw-brand);
    box-shadow: 0 0 0 3px rgba(38, 143, 222, 0.15);
}

.comment-form input::placeholder,
.comment-form textarea::placeholder {
    color: #a3b1c2;
}

.comment-form .comment-form-cookies-consent,
.comment-form .comment-form-uw-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.comment-form .comment-form-cookies-consent input[type="checkbox"],
.comment-form .comment-form-uw-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--uw-brand);
}

.comment-form .comment-form-cookies-consent label,
.comment-form .comment-form-uw-consent label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--uw-muted);
}

.comment-form .form-submit {
    margin: 4px 0 0;
}

.comment-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    padding: 14px 34px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--uw-brand) 0%, var(--uw-brand-dark) 100%);
    border: 0;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(38, 143, 222, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.comment-form input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(38, 143, 222, 0.4);
}

.comment-form input[type="submit"]:active {
    transform: translateY(0);
}

/* Honeypot — must stay reachable to bots but invisible to people. */
.comment-form .uw-hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.comments-area .comment-notes,
.comments-area .logged-in-as {
    font-size: 0.875rem;
    color: var(--uw-muted);
}

.comments-area .no-comments,
.comments-area .comments-closed {
    padding: 20px 24px;
    background: var(--uw-tint);
    border-radius: 12px;
    font-size: 0.9375rem;
    color: var(--uw-muted);
}

.comment-navigation {
    margin: 0 0 24px;
    font-size: 0.9375rem;
}

.comment-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
    .single-post-article {
        padding: 36px 32px 32px;
    }

    .comments-area {
        padding: 32px 28px;
    }
}

@media (max-width: 767px) {
    .single-post-article {
        padding: 28px 20px 24px;
        border-radius: 12px;
    }

    .single-post-article .entry-content {
        font-size: 1.0625rem;
        line-height: 1.72;
    }

    .single-post-article .entry-content > p.uw-lead {
        font-size: 1.125rem;
    }

    .single-post-article .entry-content > p.uw-keytakeaway {
        padding: 18px 20px;
    }

    .single-post-article .entry-content h2 {
        margin-top: 2.4em;
    }

    .single-post-article .entry-content blockquote {
        padding: 22px 22px 22px 24px;
    }

    .single-post-article .entry-content blockquote::before {
        display: none;
    }

    .uw-toc {
        padding: 20px;
    }

    .comments-area {
        padding: 24px 18px;
        border-radius: 12px;
    }

    .comment-respond {
        padding: 22px 18px;
    }

    .comment-form .uw-form-grid {
        grid-template-columns: 1fr;
    }

    .uw-comment {
        gap: 14px;
        padding: 18px 16px;
    }

    .uw-comment__avatar img {
        width: 42px;
        height: 42px;
    }

    .comment-list ol.children {
        padding-left: 16px;
    }
}

/* ==========================================================================
   11. HEADER + HERO ON SINGLE POSTS
   ========================================================================== */

/*
 * The standalone logo block costs 207px of vertical space before the hero
 * even starts. On a post the hero already carries the branding, so the block
 * is hidden here and the mark moves inside the hero instead.
 */
body.single-post.uw-has-hero .logo {
    display: none;
}

/* Two nested .wrapper divs each contribute 30px of top padding, which with
   the logo block gone is just an empty white band. Drop both and let the hero
   sit directly under the fixed top bar. The 47px margin is covered by the bar
   itself, so no white strip shows. */
body.single-post.uw-has-hero #page-wrapper,
body.single-post.uw-has-hero #single-wrapper {
    padding-top: 0;
}

/*
 * Let the hero start at the very top and run *under* the fixed bar, then pad
 * its content clear of it. The bar is opaque, so any mismatch between this
 * padding and the bar's real height hides behind the bar instead of showing
 * as a white strip - which a margin-based offset cannot do.
 */
body.single-post.uw-has-hero .single-post-hero {
    margin-top: 0;
    padding-top: 47px;
    min-height: 596px;
}

.hero-logo {
    display: inline-block;
    margin: 0 0 22px;
    line-height: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Vertical lockup (196.87 x 152.36, ratio 1.292), scaled down from the 196px
   used in the standalone header block. */
.hero-logo img {
    width: 130px;
    height: auto;
    filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.4));
}

.hero-logo:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

/* --- Hero meta row --------------------------------------------------------
 * The avatar is 40px inside a row of ~21px text, so the row is centred on the
 * avatar rather than the text baseline. Give every item a consistent box.
 */

.hero-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    line-height: 1.2;
}

/*
 * The hero meta element carries BOTH classes: class="post-meta hero-meta".
 * In style.css the light-on-dark `.hero-meta …` rules and the dark-on-light
 * `.post-meta …` rules have equal specificity (0,2,0), and `.post-meta` is
 * declared later - so it silently wins and the hero rules are dead:
 *
 *   .hero-meta .meta-item { color: rgba(255,255,255,.95) }  <- lost
 *   .post-meta .meta-item { color: #666 }                   <- applied
 *   .hero-meta i          { color: #FFE000 }                <- lost
 *   .post-meta i          { color: #268FDE }                <- applied
 *
 * The author name, date and comment count only look right because they carry
 * their own `!important` white rules. Anything without one - such as the
 * reading time - renders #666 on a dark hero.
 *
 * Compounding both classes (0,3,0) restores the intended hero styling for the
 * whole row, so future items inherit white by default.
 */
.post-meta.hero-meta .meta-item,
.post-meta.hero-meta .meta-item span,
.post-meta.hero-meta .meta-item time {
    color: #fff;
}

.post-meta.hero-meta i {
    color: var(--uw-accent);
}

.hero-meta .author-meta {
    gap: 12px;
}

.post-meta .author-avatar,
.hero-meta .author-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    /* Undo any inherited absolute positioning from the hero background rule. */
    position: static;
    top: auto;
    left: auto;
}

.hero-meta .author-avatar {
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.15);
}

.hero-meta .author-name {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

.hero-meta .meta-divider {
    flex: 0 0 auto;
    align-self: center;
}

@media (max-width: 991px) {
    body.single-post.uw-has-hero .single-post-hero {
        min-height: 500px;
    }
}

@media (max-width: 767px) {
    body.single-post.uw-has-hero .single-post-hero {
        padding-top: 56px;
        min-height: 476px;
    }

    .hero-logo {
        margin-bottom: 16px;
    }

    .hero-logo img {
        width: 96px;
    }

    .hero-meta .meta-item {
        min-height: 32px;
    }

    .post-meta .author-avatar,
    .hero-meta .author-avatar {
        width: 32px;
        height: 32px;
    }
}