/* Hamco blog: post components (BLOG-COMPONENTS-1, 2026-11-01).
   Styles only the hb- classes in docs/sops/blog-classes.md section 3 (plus hb-origin with the shared flag file).
   Every selector carries an hb- class, so posts without component markup look exactly as before.
   Tokens: main site reset.css :root (red, radius, spacing) and blog-reading.css :root (ink, navy, soft, line, chalk).
   Phone rules first; wider screens from 600px and 1024px. Loads after blog-reading.css on single posts. */

.hb-answer,
.hb-takeaways,
.hb-table-wrap,
.hb-table,
.hb-proscons,
.hb-steps,
.hb-checklist,
.hb-callout,
.hb-quote,
.hb-figure,
.hb-source,
.hb-faq,
.hb-related,
.hb-cta,
.hb-origin,
.hb-namelist {
    --hb-red: #FE0000;
    --hb-black: #000000;
    --hb-navy: #0E1A2B;
    --hb-ink: #1B2330;
    --hb-soft: #4A5568;
    --hb-line: #E6EAF0;
    --hb-chalk: #F3F5F8;
    --hb-white: #FFFFFF;
    --hb-radius: 8px;
    --hb-radius-lg: 12px;
    --hb-space-sm: 8px;
    --hb-space-md: 16px;
    --hb-space-lg: 24px;
    --hb-space-xl: 32px;
    --hb-heading: 'Teko', 'Arial Narrow', sans-serif;
    box-sizing: border-box;
}

/* ---------- Shared: boxes sit in the post column, same edges as the paragraphs ---------- */
.post-content .hb-answer,
.post-content .hb-takeaways,
.post-content .hb-callout,
.post-content .hb-cta {
    margin: 0 0 var(--hb-space-xl);
    padding: var(--hb-space-md);
    border-radius: var(--hb-radius-lg);
    background: var(--hb-chalk);
    color: var(--hb-ink);
    font-size: 17px;
    line-height: 1.7;
}

.post-content .hb-answer > :last-child,
.post-content .hb-takeaways > :last-child,
.post-content .hb-callout > :last-child,
.post-content .hb-cta > :last-child,
.post-content .hb-faq__a > :last-child,
.post-content .hb-quote > :last-child {
    margin-bottom: 0;
}

/* Box titles: navy (red text on white is under 4.5 to 1, so red is used for edges, not small text) */
.post-content .hb-answer__label,
.post-content .hb-takeaways__title,
.post-content .hb-callout__title,
.post-content .hb-proscons__title,
.post-content .hb-cta__title {
    margin: 0 0 var(--hb-space-sm);
    font-family: var(--hb-heading);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: 0.2px;
    color: var(--hb-navy);
}

/* ---------- answer-box ---------- */
.post-content .hb-answer {
    border-left: 6px solid var(--hb-red);
    border-radius: 0 var(--hb-radius-lg) var(--hb-radius-lg) 0;
}

/* ---------- key-takeaways ---------- */
.post-content .hb-takeaways {
    background: var(--hb-white);
    border: 1px solid var(--hb-line);
    border-top: 4px solid var(--hb-navy);
}

.post-content .hb-takeaways ul {
    margin: 0;
    padding-left: 1.35em;
    list-style: disc;
}

.post-content .hb-takeaways li {
    margin: 0.35em 0;
}

/* ---------- Tables: comparison, spec, price (scroll inside their own box) ---------- */
.post-content .hb-table-wrap {
    max-width: 100%;
    margin: 0 0 var(--hb-space-xl);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius-lg);
    background: var(--hb-white);
}

/* Writers put hb-table-wrap on the figure.wp-block-table itself. Live blog-reading.css sets
   .post-content figure.wp-block-table { overflow: hidden } (0,2,1), which beats the rule above (0,2,0)
   and cut wide tables off on phones. Same weight here, loaded after blog-reading, so the box scrolls. */
.post-content figure.hb-table-wrap {
    overflow-x: auto;
}

.post-content .hb-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--hb-ink);
}

.post-content .hb-table th,
.post-content .hb-table td {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--hb-line);
    text-align: left;
    vertical-align: top;
    background: var(--hb-white);
    /* break-word, not anywhere: "anywhere" lets a column shrink to one letter, so a 5 column table squeezed
       to 360 px split words ("Lev el", "minu tes") instead of scrolling in .hb-table-wrap (T8992 360 px proof) */
    overflow-wrap: break-word;
}

.post-content .hb-table thead th,
.post-content .hb-table thead td {
    background: var(--hb-navy);
    color: var(--hb-white);
    font-weight: 700;
}

/* Header words in <strong>/<b> keep the white: blog-reading.css sets .post-content strong to navy
   (live line 54), which hid the header text on the navy band (T8992, BLOG-AUDIT-A 360 px proof). */
.post-content .hb-table thead strong,
.post-content .hb-table thead b {
    color: inherit;
}

.post-content .hb-table tbody tr:nth-child(even) td {
    background: var(--hb-chalk);
}

.post-content .hb-table tbody tr:last-child td {
    border-bottom: 0;
}

.post-content .hb-table--compare th,
.post-content .hb-table--compare td {
    min-width: 128px;
}

.post-content .hb-table--spec tbody th,
.post-content .hb-table--spec tbody td:first-child {
    font-weight: 700;
    color: var(--hb-navy);
}

.post-content .hb-table--price td:not(:first-child),
.post-content .hb-table--price th:not(:first-child) {
    white-space: nowrap;
}

.post-content .hb-table__caption {
    caption-side: top;
    padding: 12px 14px;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: var(--hb-navy);
    background: var(--hb-white);
}

/* ---------- stack-table: each row becomes a labelled card on phones ---------- */
.post-content .hb-table--stack {
    margin: 0 0 var(--hb-space-xl);
}

.post-content .hb-table--stack thead {
    display: none;
}

/* Caption on a stacked table: a full-width block above the cards on phones.
   A table caption left inside a block-display table shrink-wraps to one or two
   words per line (T10219-1582, hockey cost post at 360 px). `> caption` also covers
   a caption without the class (hockey-jersey-designer rebuild, T10051-ogjr). */
@media (max-width: 599px) {
    .post-content .hb-table--stack > caption {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0 0 10px;
    }
}

.post-content .hb-table--stack,
.post-content .hb-table--stack tbody,
.post-content .hb-table--stack tr,
.post-content .hb-table--stack td {
    display: block;
    width: 100%;
}

.post-content .hb-table--stack tr {
    margin: 0 0 12px;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius-lg);
    overflow: hidden;
    background: var(--hb-white);
}

.post-content .hb-table--stack td,
.post-content .hb-table--stack tbody tr:nth-child(even) td {
    padding: 10px 14px;
    background: var(--hb-white);
    border-bottom: 1px solid var(--hb-line);
}

.post-content .hb-table--stack td:last-child,
.post-content .hb-table--stack tbody tr:last-child td:last-child {
    border-bottom: 0;
}

.post-content .hb-table--stack td:first-child {
    background: var(--hb-chalk);
    font-weight: 700;
    color: var(--hb-navy);
}

.post-content .hb-table--stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--hb-soft);
}

/* ---------- pros-cons ---------- */
.post-content .hb-proscons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hb-space-md);
    margin: 0 0 var(--hb-space-xl);
}

.post-content .hb-pros,
.post-content .hb-cons {
    padding: var(--hb-space-md);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius-lg);
    background: var(--hb-white);
    font-size: 17px;
    line-height: 1.6;
}

.post-content .hb-pros {
    border-top: 4px solid var(--hb-navy);
}

.post-content .hb-cons {
    border-top: 4px solid var(--hb-red);
}

.post-content .hb-pros ul,
.post-content .hb-cons ul {
    margin: 0;
    padding-left: 1.35em;
    list-style: disc;
}

/* ---------- steps ---------- */
.post-content .hb-steps {
    margin: 0 0 var(--hb-space-xl);
    padding: 0;
    list-style: none;
    counter-reset: hb-step;
}

.post-content .hb-steps__item {
    position: relative;
    margin: 0 0 var(--hb-space-md);
    padding: 2px 0 0 52px;
    min-height: 36px;
    counter-increment: hb-step;
}

.post-content .hb-steps__item::marker {
    content: "";
}

.post-content .hb-steps__item::before {
    content: counter(hb-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hb-navy);
    color: var(--hb-white);
    font-family: var(--hb-heading);
    font-weight: 600;
    font-size: 24px;
    line-height: 38px;
    text-align: center;
}

/* ---------- checklist ---------- */
.post-content .hb-checklist {
    margin: 0 0 var(--hb-space-xl);
    padding: 0;
    list-style: none;
}

.post-content .hb-checklist__item {
    position: relative;
    margin: 0 0 10px;
    padding: 0 0 0 36px;
}

.post-content .hb-checklist__item::marker {
    content: "";
}

.post-content .hb-checklist__item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.45em;
    width: 8px;
    height: 14px;
    border: solid var(--hb-red);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* ---------- tip and warning ---------- */
.post-content .hb-callout {
    border-left: 6px solid var(--hb-navy);
    border-radius: 0 var(--hb-radius-lg) var(--hb-radius-lg) 0;
}

.post-content .hb-callout--warning {
    border-left-color: var(--hb-red);
    background: var(--hb-white);
    border-top: 1px solid var(--hb-line);
    border-right: 1px solid var(--hb-line);
    border-bottom: 1px solid var(--hb-line);
}

/* ---------- quote ---------- */
.post-content .hb-quote {
    margin: 0 0 var(--hb-space-xl);
    padding: var(--hb-space-md) var(--hb-space-md) var(--hb-space-md) 20px;
    border: 0;
    border-left: 4px solid var(--hb-red);
    border-radius: 0 var(--hb-radius) var(--hb-radius) 0;
    background: var(--hb-chalk);
    color: var(--hb-ink);
    font-size: 18px;
    font-style: normal;
    line-height: 1.7;
}

.post-content .hb-quote__cite {
    display: block;
    margin-top: var(--hb-space-sm);
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    color: var(--hb-soft);
}

/* ---------- image ---------- */
.post-content .hb-figure {
    margin: 0 0 var(--hb-space-xl);
    max-width: 100%;
}

.post-content .hb-figure img,
.post-content .hb-figure svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: var(--hb-radius-lg);
}

.post-content .hb-figure__caption {
    margin-top: var(--hb-space-sm);
    font-size: 14px;
    line-height: 1.5;
    color: var(--hb-soft);
    text-align: left;
}

/* ---------- name-list: plain names in columns (1 on phones, 2 from 600px, 3 from 1024px); no links inside ---------- */
.post-content .hb-namelist {
    list-style: none;
    padding-left: 0;
    margin: 0 0 var(--hb-space-xl);
    columns: 1;
}

.post-content .hb-namelist li {
    break-inside: avoid;
    padding: 3px 0;
    margin: 0;
}

/* ---------- source-note ---------- */
.post-content .hb-source {
    margin: 0 0 var(--hb-space-xl);
    font-size: 14px;
    line-height: 1.5;
    color: var(--hb-soft);
}

.post-content .hb-table-wrap + .hb-source,
.post-content .hb-table--stack + .hb-source {
    margin-top: -16px;
}

/* ---------- faq ---------- */
.post-content .hb-faq {
    margin: 0 0 var(--hb-space-xl);
    border-top: 1px solid var(--hb-line);
}

.post-content .hb-faq__item {
    padding: var(--hb-space-md) 0;
    border-bottom: 1px solid var(--hb-line);
}

.post-content .hb-faq__q {
    margin: 0 0 var(--hb-space-sm);
    font-size: 19px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--hb-navy);
}

.post-content .hb-faq__a {
    font-size: 17px;
    line-height: 1.7;
    color: var(--hb-ink);
}

/* ---------- related-posts ---------- */
.post-content .hb-related {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 var(--hb-space-xl);
}

.post-content a.hb-related__item {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 12px var(--hb-space-md);
    border: 1px solid var(--hb-line);
    border-left: 4px solid var(--hb-red);
    border-radius: var(--hb-radius);
    background: var(--hb-white);
    color: var(--hb-navy);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.post-content a.hb-related__item:hover,
.post-content a.hb-related__item:focus-visible {
    background: var(--hb-chalk);
    color: var(--hb-navy);
    text-decoration: underline;
    text-decoration-color: var(--hb-red);
}

/* ---------- end-cta ---------- */
.post-content .hb-cta {
    padding: var(--hb-space-lg) var(--hb-space-md);
    border-top: 4px solid var(--hb-red);
    background: var(--hb-chalk);
}

.post-content .hb-cta__title {
    font-size: 30px;
}

.post-content .hb-cta__text {
    margin: 0 0 var(--hb-space-md);
}

/* Button: main site pattern (category-pages.css .intro-content .btn-primary). White on #FE0000 is about 4 to 1,
   so the text is 19px bold (large text, 3 to 1 needed). Full width on phones, 44px or more to tap. */
.post-content a.hb-cta__btn,
.post-content a.hb-cta__btn:visited {
    display: block;
    width: 100%;
    min-height: 52px;
    margin: 0 0 var(--hb-space-md);
    padding: 14px 32px;
    border: 0;
    border-radius: var(--hb-radius);
    background: var(--hb-red);
    color: var(--hb-white);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}

.post-content a.hb-cta__btn:hover,
.post-content a.hb-cta__btn:focus-visible {
    background: var(--hb-black);
    color: var(--hb-white);
    text-decoration: none;
}

.post-content a.hb-cta__btn:focus-visible {
    outline: 3px solid var(--hb-navy);
    outline-offset: 3px;
}

.post-content .hb-cta__note {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--hb-soft);
}

/* ---------- origin line with the shared US flag (main site .origin-line and .hq-flag, scoped) ---------- */
.post-content .hb-origin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 7px 14px;
    background: #F3F5F9;
    border: 1px solid #DDE3EE;
    border-radius: 999px;
    color: #1F2A44;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.post-content .hb-origin .hq-flag {
    display: inline-block;
    width: 26px;
    height: auto;
    aspect-ratio: 19 / 10;
    margin: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    vertical-align: middle;
}

/* ---------- 600px and wider ---------- */
@media (min-width: 600px) {
    .post-content .hb-answer,
    .post-content .hb-takeaways,
    .post-content .hb-callout {
        padding: 20px var(--hb-space-lg);
        font-size: 18px;
    }

    .post-content .hb-cta {
        padding: var(--hb-space-xl);
    }

    .post-content a.hb-cta__btn,
    .post-content a.hb-cta__btn:visited {
        display: inline-block;
        width: auto;
    }

    .post-content .hb-related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .post-content .hb-table--stack {
        display: table;
        border: 1px solid var(--hb-line);
        border-radius: var(--hb-radius-lg);
        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;
    }

    .post-content .hb-table--stack thead {
        display: table-header-group;
    }

    .post-content .hb-table--stack tbody {
        display: table-row-group;
    }

    .post-content .hb-table--stack tr {
        display: table-row;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .post-content .hb-table--stack td {
        display: table-cell;
        width: auto;
    }

    .post-content .hb-table--stack td[data-label]::before {
        content: none;
    }

    .post-content .hb-table--stack td:first-child {
        background: var(--hb-white);
    }

    .post-content .hb-table--stack tbody tr:nth-child(even) td {
        background: var(--hb-chalk);
    }

    .post-content .hb-table--stack tbody tr:last-child td {
        border-bottom: 0;
    }

    .post-content .hb-origin {
        gap: 10px;
        padding: 8px 16px;
    }

    .post-content .hb-origin .hq-flag {
        width: 30px;
    }

    .post-content .hb-namelist {
        columns: 2;
        column-gap: var(--hb-space-lg);
    }
}

/* ---------- 768px and wider: pros and cons side by side ---------- */
@media (min-width: 768px) {
    .post-content .hb-proscons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- 1024px and wider ---------- */
@media (min-width: 1024px) {
    .post-content .hb-cta {
        padding: 36px 40px;
    }

    .post-content .hb-cta__title {
        font-size: 34px;
    }

    .post-content .hb-namelist {
        columns: 3;
    }
}

@media print {
    .post-content a.hb-cta__btn {
        background: none;
        color: var(--hb-navy);
        border: 2px solid var(--hb-navy);
    }
}