/* =====================================================================
   COLORSHADE — css/blog-blocks.css              (S32, 2026-09-04)
   =====================================================================
   THE BLOG BLOCK LIBRARY.

   Ten presentation blocks an author picks from in the admin editor, plus
   the auto table of contents and heading anchors that blog-post.php
   generates on the server.

   ---------------------------------------------------------------------
   WHY A LIBRARY AND NOT A DESIGN PER POST
   ---------------------------------------------------------------------
   Twenty-three posts that are all "heading, paragraph, heading,
   paragraph" read as one page printed twenty-three times, and a reader
   who bounces off the third one never reaches the twentieth.

   The obvious fix — design each post differently — is the wrong one. It
   multiplies the work by the number of posts, it makes the site look
   incoherent, and it guarantees that post 24 gets whatever the writer
   had energy for that day.

   The industry answer is this file. A FIXED, SMALL set of blocks, styled
   once, that an author CHOOSES BETWEEN. Variety comes from which blocks
   a post uses and in what order — never from new CSS. Post 24 costs the
   same as post 3 and cannot drift.

   ---------------------------------------------------------------------
   WHY THESE TEN
   ---------------------------------------------------------------------
   Each one earns its place twice: it helps a human skim, AND it is a
   shape search engines already know how to lift into a result.

     takeaways  a summary box            → the skimmer, and snippets
     callout    note / tip / warning     → the thing they must not miss
     steps      a numbered procedure     → HowTo-shaped
     compare    a comparison table       → the highest-converting shape
     pullquote  a line worth stopping on → rhythm; breaks a wall of grey
     price      a price table            → the question every visitor has
     checklist  things to have ready     → saves a phone call
     faq        question and answer      → FAQPage schema, drawn from THIS
     cta        an end-of-post ask       → the conversion step
     specs      label / value pairs      → at-a-glance facts

   ---------------------------------------------------------------------
   COLOUR AND CONTRAST
   ---------------------------------------------------------------------
   Palette is the site's own: ink #231F20, secondary ink #353032, orange
   #F15A2E, cream #FDFBF7, rule #F3EFE7. No new colours are introduced.

   Body copy inside a block is #353032 on #FDFBF7 — 11.4:1. Muted labels
   are #6B6265 on #FDFBF7 — 5.3:1. Both clear WCAG AA (4.5:1) for body
   text. The orange #F15A2E is used for RULES, MARKERS and BORDERS, and
   for large text only: on cream it measures 3.4:1, which passes AA for
   large text (3:1) and fails it for body — so it is never used for body
   copy anywhere in this file. That limit is the reason the accent reads
   as an accent.

   ---------------------------------------------------------------------
   PORTING THIS TO A SISTER PROJECT
   ---------------------------------------------------------------------
   This file and admin/assets/js/blog-blocks.js are the whole library and
   they are a drop-in pair. To port: copy both, then change ONLY the six
   values in the "THEME" block directly below. Do not restyle the blocks
   themselves — the point is that every project gets the same tested
   mechanics wearing its own face. See METHOD.md §20.
   ===================================================================== */

/* ---------------------------------------------------------------------
   THEME — the only lines a sister project edits.
   --------------------------------------------------------------------- */
.blog-content,
.cs-blocks-scope {
    --csb-ink:      #231F20;
    --csb-body:     #353032;
    --csb-muted:    #6B6265;
    --csb-accent:   #F15A2E;
    --csb-surface:  #FDFBF7;
    --csb-rule:     #F3EFE7;
    --csb-display:  'Playfair Display', Georgia, serif;
    --csb-sans:     'Outfit', system-ui, -apple-system, sans-serif;
    --csb-radius:   1rem;
}

/* =====================================================================
   SHARED
   ===================================================================== */
.blog-content [class^="cs-b-"],
.blog-content [class*=" cs-b-"] {
    margin: 2rem 0;
}

/* Wide things scroll inside themselves. The page body must never scroll
   sideways on a phone — that is the single most common blog-CSS defect. */
.cs-b-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cs-b-label {
    font-family: var(--csb-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--csb-muted);
    margin: 0 0 0.6rem;
    display: block;
}

/* =====================================================================
   1. KEY TAKEAWAYS
   ---------------------------------------------------------------------
   Sits directly under the intro. A reader who reads only this box should
   still leave knowing the answer — that is the test for whether the copy
   inside it is any good.
   ===================================================================== */
.cs-b-takeaways {
    background: var(--csb-surface);
    border: 1px solid var(--csb-rule);
    border-left: 4px solid var(--csb-accent);
    border-radius: 0 var(--csb-radius) var(--csb-radius) 0;
    padding: 1.4rem 1.6rem 1.2rem;
}

.cs-b-takeaways__title {
    font-family: var(--csb-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--csb-ink);
    margin: 0 0 0.85rem;
}

.cs-b-takeaways ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cs-b-takeaways li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.6rem;
    line-height: 1.7;
    color: var(--csb-body);
}

.cs-b-takeaways li:last-child { margin-bottom: 0; }

/* A drawn tick, not an emoji and not an icon font: it cannot fail to
   load, it cannot render as a tofu box, and it costs no request. */
.cs-b-takeaways li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.55rem;
    width: 0.42rem;
    height: 0.72rem;
    border: solid var(--csb-accent);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(42deg);
}

/* =====================================================================
   2. CALLOUT — note / tip / warning
   ===================================================================== */
.cs-b-callout {
    display: flex;
    gap: 0.95rem;
    align-items: flex-start;
    padding: 1.1rem 1.3rem;
    border-radius: 0.85rem;
    border: 1px solid var(--csb-rule);
    background: var(--csb-surface);
    color: var(--csb-body);
    line-height: 1.7;
}

.cs-b-callout p { margin: 0 0 0.6rem; }
.cs-b-callout p:last-child { margin-bottom: 0; }

.cs-b-callout__mark {
    flex: 0 0 auto;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--csb-sans);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1;
    margin-top: 0.1rem;
}

.cs-b-callout__body { min-width: 0; }

.cs-b-callout__title {
    font-family: var(--csb-sans);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--csb-ink);
    margin: 0 0 0.3rem;
}

/* Note (default) */
.cs-b-callout--note              { border-left: 3px solid #9AA0A6; }
.cs-b-callout--note .cs-b-callout__mark  { background: #EDEFF1; color: #4A5054; }

/* Tip */
.cs-b-callout--tip               { border-left: 3px solid #2E7D5B; background: #F4FAF7; }
.cs-b-callout--tip .cs-b-callout__mark   { background: #D9EDE4; color: #1F5C42; }

/* Warning — the one people must not scroll past */
.cs-b-callout--warn              { border-left: 3px solid #C9761B; background: #FFF9F0; }
.cs-b-callout--warn .cs-b-callout__mark  { background: #FBE6C8; color: #8A4E08; }

/* =====================================================================
   3. STEPS — a numbered procedure
   ===================================================================== */
.cs-b-steps { padding: 0; }

.cs-b-steps__title {
    font-family: var(--csb-display);
    font-size: 1.3rem;
    color: var(--csb-ink);
    margin: 0 0 1.1rem;
}

.cs-b-steps ol {
    list-style: none;
    counter-reset: csb-step;
    margin: 0;
    padding: 0;
}

.cs-b-steps li {
    counter-increment: csb-step;
    position: relative;
    padding: 0 0 1.25rem 3.1rem;
    line-height: 1.75;
    color: var(--csb-body);
}

.cs-b-steps li::before {
    content: counter(csb-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--csb-ink);
    color: #fff;
    font-family: var(--csb-sans);
    font-weight: 700;
    font-size: 0.9rem;
    display: grid;
    place-items: center;
}

/* The connecting rail — makes it read as one sequence, not five notes. */
.cs-b-steps li::after {
    content: "";
    position: absolute;
    left: 1.03rem;
    top: 2.35rem;
    bottom: 0.35rem;
    width: 2px;
    background: var(--csb-rule);
}

.cs-b-steps li:last-child { padding-bottom: 0; }
.cs-b-steps li:last-child::after { display: none; }

.cs-b-steps__head {
    display: block;
    font-family: var(--csb-sans);
    font-weight: 700;
    color: var(--csb-ink);
    margin-bottom: 0.2rem;
}

/* =====================================================================
   4. COMPARISON TABLE
   ---------------------------------------------------------------------
   The first column is sticky so a reader scrolling a wide table on a
   phone never loses track of which row they are reading.
   ===================================================================== */
.cs-b-compare__caption {
    font-family: var(--csb-sans);
    font-size: 0.85rem;
    color: var(--csb-muted);
    margin: 0 0 0.6rem;
}

.cs-b-compare table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
    min-width: 34rem;
    margin: 0;
}

.cs-b-compare th,
.cs-b-compare td {
    padding: 0.7rem 0.95rem;
    text-align: left;
    border-bottom: 1px solid var(--csb-rule);
    vertical-align: top;
}

.cs-b-compare thead th {
    background: var(--csb-ink);
    color: #fff;
    font-family: var(--csb-sans);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 2;
}

.cs-b-compare thead th:first-child { border-radius: 0.6rem 0 0 0; }
.cs-b-compare thead th:last-child  { border-radius: 0 0.6rem 0 0; }

.cs-b-compare tbody th {
    font-family: var(--csb-sans);
    font-weight: 600;
    color: var(--csb-ink);
    background: var(--csb-surface);
    position: sticky;
    left: 0;
    z-index: 1;
}

.cs-b-compare tbody tr:last-child th,
.cs-b-compare tbody tr:last-child td { border-bottom: none; }

.cs-b-compare td { color: var(--csb-body); }

/* Numbers line up when they are tabular. */
.cs-b-compare td { font-variant-numeric: tabular-nums; }

/* =====================================================================
   5. PULL QUOTE
   ---------------------------------------------------------------------
   Deliberately NOT the same as <blockquote>, which style.css already
   styles for quoting a source. This one is for lifting a line out of the
   author's OWN copy to break a long stretch of grey.
   ===================================================================== */
.cs-b-pullquote {
    border: none;
    border-top: 2px solid var(--csb-rule);
    border-bottom: 2px solid var(--csb-rule);
    padding: 1.5rem 0;
    margin: 2.5rem 0;
    text-align: center;
    background: none;
}

.cs-b-pullquote__text {
    font-family: var(--csb-display);
    font-size: 1.45rem;
    line-height: 1.45;
    font-style: italic;
    color: var(--csb-ink);
    margin: 0;
    text-wrap: balance;
}

.cs-b-pullquote__by {
    display: block;
    margin-top: 0.85rem;
    font-family: var(--csb-sans);
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--csb-muted);
}

/* =====================================================================
   6. PRICE TABLE
   ===================================================================== */
.cs-b-price {
    border: 1px solid var(--csb-rule);
    border-radius: var(--csb-radius);
    overflow: hidden;
    background: #fff;
}

.cs-b-price__caption {
    font-family: var(--csb-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--csb-ink);
    padding: 0.9rem 1.2rem;
    background: var(--csb-surface);
    border-bottom: 1px solid var(--csb-rule);
    margin: 0;
}

.cs-b-price__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.85rem 1.2rem;
    border-bottom: 1px solid var(--csb-rule);
}

.cs-b-price__row:last-child { border-bottom: none; }

.cs-b-price__item {
    font-family: var(--csb-sans);
    color: var(--csb-ink);
    min-width: 0;
}

.cs-b-price__note {
    display: block;
    font-size: 0.8rem;
    color: var(--csb-muted);
    font-weight: 400;
    margin-top: 0.15rem;
}

.cs-b-price__amount {
    font-family: var(--csb-sans);
    font-weight: 700;
    color: var(--csb-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The honesty line. A price block without one invites a complaint. */
.cs-b-price__foot {
    padding: 0.75rem 1.2rem;
    background: var(--csb-surface);
    border-top: 1px solid var(--csb-rule);
    font-size: 0.8rem;
    color: var(--csb-muted);
    margin: 0;
}

/* =====================================================================
   7. CHECKLIST
   ===================================================================== */
.cs-b-checklist {
    background: #fff;
    border: 1px dashed #D8D2C4;
    border-radius: var(--csb-radius);
    padding: 1.3rem 1.5rem;
}

.cs-b-checklist__title {
    font-family: var(--csb-sans);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--csb-ink);
    margin: 0 0 0.85rem;
}

.cs-b-checklist ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cs-b-checklist li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: 0.65rem;
    line-height: 1.7;
    color: var(--csb-body);
}

.cs-b-checklist li:last-child { margin-bottom: 0; }

/* An empty drawn box. Printable, and it reads as "you do this". */
.cs-b-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid #C7BFAE;
    border-radius: 0.25rem;
    background: #fff;
}

/* =====================================================================
   8. FAQ ACCORDION
   ---------------------------------------------------------------------
   These <details> elements are ALSO the source of the FAQPage schema —
   blog-post.php reads the questions and answers out of this markup, so
   the structured data cannot drift from what a visitor can see. That is
   deliberate and it is why the schema is not stored in its own field.
   ===================================================================== */
.cs-b-faq__title {
    font-family: var(--csb-display);
    font-size: 1.45rem;
    color: var(--csb-ink);
    margin: 0 0 1rem;
}

.cs-b-faq details {
    border: 1px solid var(--csb-rule);
    border-radius: 0.75rem;
    background: #fff;
    margin-bottom: 0.7rem;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.cs-b-faq details:last-child { margin-bottom: 0; }
.cs-b-faq details[open]      { border-color: rgba(241, 90, 46, 0.30); }
.cs-b-faq details:hover      { border-color: rgba(241, 90, 46, 0.22); }

.cs-b-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 0.95rem 3rem 0.95rem 1.15rem;
    position: relative;
    font-family: var(--csb-sans);
    font-weight: 600;
    color: var(--csb-ink);
    line-height: 1.55;
}

.cs-b-faq summary::-webkit-details-marker { display: none; }

/* A CSS-drawn chevron. No icon font, no SVG request, cannot fail. */
.cs-b-faq summary::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--csb-accent);
    border-bottom: 2px solid var(--csb-accent);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}

.cs-b-faq details[open] summary::after {
    transform: rotate(-135deg);
    top: 1.45rem;
}

.cs-b-faq summary:focus-visible {
    outline: 2px solid var(--csb-accent);
    outline-offset: -2px;
    border-radius: 0.6rem;
}

.cs-b-faq details > *:not(summary) {
    padding: 0 1.15rem;
    color: var(--csb-body);
    line-height: 1.75;
}

.cs-b-faq details > *:not(summary):last-child { padding-bottom: 1.1rem; }

/* =====================================================================
   9. CTA — the end-of-post ask
   ===================================================================== */
.cs-b-cta {
    background: var(--csb-ink);
    border-radius: var(--csb-radius);
    padding: 1.9rem 1.8rem;
    text-align: center;
    color: #fff;
}

.cs-b-cta__title {
    font-family: var(--csb-display);
    font-size: 1.5rem;
    color: #fff;
    margin: 0 0 0.55rem;
    text-wrap: balance;
}

.cs-b-cta__text {
    color: rgba(255, 255, 255, 0.82);
    margin: 0 auto 1.25rem;
    max-width: 34rem;
    line-height: 1.7;
}

.cs-b-cta__btn {
    display: inline-block;
    background: var(--csb-accent);
    color: #fff !important;
    font-family: var(--csb-sans);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.8rem 1.9rem;
    border-radius: 999px;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.15s ease;
}

.cs-b-cta__btn:hover {
    background: #d94a20;
    transform: translateY(-1px);
    color: #fff !important;
}

.cs-b-cta__btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* =====================================================================
   10. SPECS — label / value pairs
   ===================================================================== */
.cs-b-specs {
    border: 1px solid var(--csb-rule);
    border-radius: var(--csb-radius);
    background: var(--csb-surface);
    padding: 1.2rem 1.4rem;
}

.cs-b-specs__title {
    font-family: var(--csb-sans);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--csb-ink);
    margin: 0 0 0.9rem;
}

.cs-b-specs dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(7rem, 12rem) 1fr;
    gap: 0.55rem 1.2rem;
}

.cs-b-specs dt {
    font-family: var(--csb-sans);
    font-size: 0.85rem;
    color: var(--csb-muted);
    margin: 0;
}

.cs-b-specs dd {
    margin: 0;
    color: var(--csb-body);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 30rem) {
    .cs-b-specs dl { grid-template-columns: 1fr; gap: 0.15rem; }
    .cs-b-specs dd { margin-bottom: 0.6rem; }
}

/* =====================================================================
   TABLE OF CONTENTS + HEADING ANCHORS
   ---------------------------------------------------------------------
   Both are GENERATED by blog-post.php from the H2s already in the post.
   An author writes nothing and cannot forget to update them. A post with
   fewer than three H2s gets no TOC at all — a two-item contents list is
   noise, not navigation.
   ===================================================================== */
.cs-b-toc {
    background: var(--csb-surface);
    border: 1px solid var(--csb-rule);
    border-radius: var(--csb-radius);
    padding: 1.15rem 1.4rem;
    margin: 0 0 2rem;
}

.cs-b-toc__title {
    font-family: var(--csb-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--csb-muted);
    margin: 0 0 0.7rem;
}

.cs-b-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: csb-toc;
}

.cs-b-toc li {
    counter-increment: csb-toc;
    margin-bottom: 0.42rem;
    line-height: 1.55;
    padding-left: 1.7rem;
    position: relative;
}

.cs-b-toc li:last-child { margin-bottom: 0; }

.cs-b-toc li::before {
    content: counter(csb-toc) ".";
    position: absolute;
    left: 0;
    font-family: var(--csb-sans);
    font-size: 0.8rem;
    color: var(--csb-muted);
    font-variant-numeric: tabular-nums;
}

.cs-b-toc a {
    color: var(--csb-body);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.cs-b-toc a:hover,
.cs-b-toc a:focus-visible {
    color: var(--csb-ink);
    border-bottom-color: var(--csb-accent);
}

/* Anchor link on each H2. Hidden until the heading is hovered or the
   link itself is focused, so it never clutters the reading experience
   but is always reachable by keyboard. */
.blog-content h2 { position: relative; scroll-margin-top: 6rem; }
.blog-content h3 { scroll-margin-top: 6rem; }

.cs-b-anchor {
    position: absolute;
    left: -1.35rem;
    top: 0.1em;
    width: 1.1rem;
    text-align: center;
    font-family: var(--csb-sans);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--csb-accent);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.blog-content h2:hover .cs-b-anchor,
.cs-b-anchor:focus-visible { opacity: 1; }

@media (max-width: 48rem) {
    /* No room for a hanging anchor on a phone, and no hover either. */
    .cs-b-anchor { display: none; }
}

/* =====================================================================
   MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cs-b-faq details,
    .cs-b-faq summary::after,
    .cs-b-cta__btn {
        transition: none;
    }
    .cs-b-cta__btn:hover { transform: none; }
}

/* =====================================================================
   PRINT
   ---------------------------------------------------------------------
   People print price lists and checklists. Accordions must be open on
   paper — a printed FAQ that shows only the questions is a bug.
   ===================================================================== */
@media print {
    .cs-b-faq details { border: 1px solid #ccc; }
    .cs-b-faq details > *:not(summary) { display: block !important; }
    .cs-b-faq summary::after { display: none; }
    .cs-b-toc,
    .cs-b-cta { display: none; }
    .cs-b-takeaways,
    .cs-b-checklist,
    .cs-b-price { break-inside: avoid; }
}