/* ============================================
   ARTICLE SYSTEM (2026 redesign)
   The reading experience for blog posts, Feature Friday
   articles and documentation, built on the public design
   system (teal / coral / deep-spruce, Raleway).

   IMPORTANT — where the design lives:
   The article/doc CONTENT files stay pure semantic HTML
   (p / h2 / h3 / ul / img / blockquote). Every design
   decision below targets the wrapper the *builder* PHP
   emits around that content — .blogContent (blog.php),
   .featureContent (features.php) and .docBody (docs.php) —
   so the look is applied entirely in CSS, never in the
   article files. .articleBody is a generic alias used by
   the component library demo.

   Tokens (--teal, --coral, --ink, --pp-*) resolve from
   public-pages.css. Public pages only; the app is
   unaffected. Load this AFTER blog.css / articles.css so
   these refinements win.
   ============================================ */

/* Self-contained token set — the article pages do NOT load public-pages.css,
   so every token this sheet uses is (re)defined here. Values match the public
   design system; redefining them on the components page (which also loads
   public-pages.css) is harmless because the values are identical. */
:root {
    --teal: #02627f;
    --teal-700: #024f66;
    --teal-deep: #0c2b33;
    --coral: #db5461;
    --coral-600: #c8434f;
    --ink: #20272c;
    --pp-body: #3c474d;
    --pp-muted: #6c7a80;
    --pp-line: #e4e9eb;
    --pp-ground: #f4f7f8;
    --pp-shadow-sm: 0 1px 2px rgba(12,43,51,.06), 0 2px 8px rgba(12,43,51,.05);
    --pp-shadow-md: 0 6px 18px -8px rgba(12,43,51,.18), 0 2px 6px rgba(12,43,51,.06);
    --pp-shadow-lg: 0 24px 50px -24px rgba(12,43,51,.35);
    --as-amber: #f4c150;
    --as-amber-ink: #8a6d00;
}

/* Shorthand for the four reading wrappers this sheet styles */
.blogContent,
.featureContent,
.docBody,
.articleBody {
    font-size: 1.14rem;
    line-height: 1.75;
    color: var(--pp-body);
    max-width: 46rem;
}

/* Centre the reading column on blog/feature pages (docs sits in its grid column) */
.blogContent,
.featureContent,
.articleBody {
    margin-left: auto;
    margin-right: auto;
}

/* First paragraph reads as a lede — no article-file change needed */
.blogContent > p:first-of-type,
.featureContent > p:first-of-type,
.articleBody > p.lede {
    font-size: 1.32rem;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
    margin: .2em 0 1.1em;
}

/* Body copy */
.blogContent p,
.featureContent p,
.docBody p,
.articleBody p {
    margin: 0 0 1.25em;
}

/* Headings — a short coral rule sits above each h2 */
/* The page head supplies the single h1; article files that repeat their
   title as a leading heading have it hidden so it isn't shown twice. */
.blogContent > h1:first-child,
.featureContent > h1:first-child,
.docBody > h1:first-child {
    display: none;
}

.blogContent h2,
.featureContent h2,
.docBody h2,
.articleBody h2 {
    font-size: 1.7rem;
    margin: 1.9em 0 .5em;
    padding-top: .5em;
    position: relative;
    border-bottom: none;
}
/* First heading sits close to the top of the reading column */
.blogContent h2:first-of-type,
.featureContent h2:first-of-type,
.docBody h2:first-of-type {
    margin-top: .3em;
}
.blogContent h2::before,
.featureContent h2::before,
.docBody h2::before,
.articleBody h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2.4em;
    height: 3px;
    border-radius: 3px;
    background: var(--coral);
}
.blogContent h3,
.featureContent h3,
.docBody h3,
.articleBody h3 {
    font-size: 1.28rem;
    margin: 1.5em 0 .4em;
    color: var(--ink);
}

/* Links + emphasis */
.blogContent a,
.featureContent a,
.docBody a,
.articleBody a {
    color: var(--teal);
    text-decoration: underline;
    text-decoration-color: rgba(2, 98, 127, .3);
    text-underline-offset: 2px;
}
.blogContent a:hover,
.featureContent a:hover,
.docBody a:hover,
.articleBody a:hover {
    text-decoration-color: var(--teal);
}
.blogContent strong,
.featureContent strong,
.docBody strong,
.articleBody strong {
    color: var(--ink);
}

/* Unordered lists — small teal diamond markers */
.blogContent ul,
.featureContent ul,
.docBody ul,
.articleBody ul {
    list-style: none;
    margin: 0 0 1.3em;
    padding: 0;
}
.blogContent ul li,
.featureContent ul li,
.docBody ul li,
.articleBody ul li {
    position: relative;
    padding: .28em 0 .28em 1.8em;
}
.blogContent ul li::before,
.featureContent ul li::before,
.docBody ul li::before,
.articleBody ul li::before {
    content: "";
    position: absolute;
    left: .15em;
    top: .95em;
    width: .5em;
    height: .5em;
    border-radius: 2px;
    background: var(--teal);
    transform: rotate(45deg);
}

/* Ordered lists — numbered teal chips */
.blogContent ol,
.featureContent ol,
.docBody ol,
.articleBody ol {
    list-style: none;
    counter-reset: as-step;
    margin: 0 0 1.3em;
    padding: 0;
}
.blogContent ol li,
.featureContent ol li,
.docBody ol li,
.articleBody ol li {
    position: relative;
    padding: .28em 0 .28em 2.2em;
    counter-increment: as-step;
}
.blogContent ol li::before,
.featureContent ol li::before,
.docBody ol li::before,
.articleBody ol li::before {
    content: counter(as-step);
    position: absolute;
    left: 0;
    top: .35em;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: rgba(2, 98, 127, .1);
    color: var(--teal);
    font-size: .8rem;
    font-weight: 800;
    display: grid;
    place-items: center;
}

/* Figures — rounded, bordered images with an italic caption.
   Article files often use a bare <img> or <p><img></p>; those
   are also softened here so they read as figures either way. */
.blogContent figure,
.featureContent figure,
.docBody figure,
.articleBody figure {
    margin: 1.8em 0;
}
.blogContent img,
.featureContent img,
.docBody img,
.articleBody img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--pp-line);
    box-shadow: var(--pp-shadow-sm);
}
.blogContent figcaption,
.featureContent figcaption,
.docBody figcaption,
.articleBody figcaption {
    font-size: .85rem;
    color: var(--pp-muted);
    text-align: center;
    margin-top: .7em;
    font-style: italic;
}

/* Pull quotes */
.blogContent blockquote,
.featureContent blockquote,
.docBody blockquote,
.articleBody blockquote {
    margin: 1.8em 0;
    padding: .3em 0 .3em 1.4em;
    border-left: 4px solid var(--coral);
    font-size: 1.32rem;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 600;
    font-style: italic;
}

/* ============================================
   BUILDER-INJECTED COMPONENTS
   These are added by the builder around/after the
   article content — never inside the article file.
   ============================================ */

/* Reading meta row (category chip + date + read time) */
.articleMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin: 0 0 1.2em;
    font-size: .85rem;
    color: var(--pp-muted);
    font-weight: 600;
}
.articleMeta .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--pp-line);
}

/* Category chips */
.chip {
    display: inline-block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .4em .8em;
    border-radius: 999px;
}
.chip.blog { background: rgba(2, 98, 127, .1); color: var(--teal); }
.chip.feature { background: rgba(219, 84, 97, .12); color: var(--coral-600); }
.chip.docs { background: rgba(244, 193, 80, .2); color: var(--as-amber-ink); }

/* Key-takeaways / callout card */
.callout {
    margin: 1.8em 0;
    background: var(--pp-ground);
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    padding: 22px 24px;
}
.callout .calloutHead {
    display: flex;
    align-items: center;
    gap: .6em;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: .7em;
}
.callout ul,
.callout p { margin: 0; font-size: 1rem; }

/* ============================================
   SINGLE-ARTICLE READING CHROME
   Head (breadcrumb + chip + title + meta) shares one centred
   reading column with the body; plus the image hero and the
   neutralised legacy card wrapper.
   ============================================ */

/* Head + body share the same centred column (text measure ~46rem inside 2em gutters) */
.articleReadHead,
article.blogArticle div.coverContainer.white .blogContent,
article.featureArticle .featureContent {
    max-width: calc(46rem + 4em);
    margin-left: auto;
    margin-right: auto;
    padding-left: 2em;
    padding-right: 2em;
    box-sizing: border-box;
    width: 100%;
}

.articleReadHead { padding-top: 34px; padding-bottom: 2px; }
.articleReadHead nav.breadcrumbs { margin: 0 0 1.1em; }
.articleReadHead .chip { margin-bottom: .9em; }
.articleReadHead h1.articleReadTitle {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 .55em;
    text-wrap: balance;
}
.articleReadHead .articleMeta { margin: 0; }

/* Centered head variant (Feature Friday) */
.articleReadHead.center { text-align: center; }
.articleReadHead.center nav.breadcrumbs { justify-content: center; }
.articleReadHead.center .chip { margin-bottom: 1em; }
.articleReadHead .articleReadSub { color: var(--pp-muted); font-size: 1.05rem; margin: .2em 0 0; }

/* Neutralise the old white card wrapper so the body sits flush in the column */
article.blogArticle div.coverContainer.white {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    max-width: none;
    margin: 0;
}

/* Image hero: gradient wash + title bottom-left (mockup panel B) */
article.blogArticle div#blogHero {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
article.blogArticle div#blogHero div.bhImage {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
article.blogArticle div#blogHero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 43, 51, .85), rgba(12, 43, 51, .2));
}
article.blogArticle div#blogHero div#blogCover {
    position: relative;
    z-index: 2;
    max-width: 70rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 2em 40px;
}
article.blogArticle div#blogHero div#blogCover h1 {
    color: #fff;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    max-width: 24ch;
    text-wrap: balance;
    margin: 0;
}

/* Inline CTA band the builder can append after any article */
.inlineCta {
    background: var(--teal-deep);
    color: #fff;
    border-radius: 16px;
    padding: 34px 30px;
    text-align: center;
    margin: 34px auto;
    max-width: 46rem;
}
/* id-qualified so it beats section#mainContent h3 { color: var(--ink) } on the dark band */
section#mainContent .inlineCta h3,
.inlineCta h3 { color: #fff; font-size: 1.4rem; margin-bottom: .3em; }
.inlineCta p { color: rgba(255, 255, 255, .82); margin: 0 0 1.1em; }
/* Button for article CTAs (public-pages.css defines the site-wide .pp-btn,
   but article pages don't load that sheet, so define it here too) */
.inlineCta .pp-btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    background: var(--coral);
    color: #fff;
    font-weight: 700;
    padding: .8em 1.6em;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.inlineCta .pp-btn:hover { background: var(--coral-600); transform: translateY(-1px); }

/* ============================================
   DOCUMENTATION — full-width head band + sticky TOC.
   Targets the real docs.php classes; overrides the older
   articles-docs.css rules because this sheet loads after it.
   ============================================ */

/* Head band (breadcrumb + chip + title) */
.docReadHead {
    background: var(--pp-ground);
    border-bottom: 1px solid var(--pp-line);
    padding: 30px 2em;
}
.docReadHead .docReadHeadIn {
    max-width: 70rem;
    margin: 0 auto;
}
.docReadHead nav.breadcrumbs { margin: 0 0 1em; }
.docReadHead .chip { margin-bottom: .7em; }
.docReadHead h1 {
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    line-height: 1.14;
    letter-spacing: -.02em;
    margin: .1em 0 0;
}

/* Two-column layout */
.docLayout {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 44px;
    max-width: 70rem;
    margin: 0 auto;
    padding: 36px 2em 50px;
}

/* Sidebar table of contents */
.docSidebar { align-self: start; }
.docSidebar .docSidebarSticky {
    position: sticky;
    top: 20px;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}
.docSidebar .docSidebarSticky h3 {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-muted);
    font-weight: 800;
    margin: 0 0 .8em;
    border: none;
    padding: 0;
}
#docTOC ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--pp-line);
}
#docTOC ul ul { border-left: none; }
#docTOC li { margin: 0; }
#docTOC a {
    display: block;
    padding: .4em 0 .4em 1em;
    margin-left: -2px;
    color: var(--pp-body);
    font-size: .9rem;
    font-weight: 600;
    border-left: 2px solid transparent;
    text-decoration: none;
}
#docTOC a:hover { color: var(--teal); }
#docTOC a.active {
    color: var(--teal);
    border-left-color: var(--teal);
}
#docTOC ul ul a {
    padding-left: 1.8em;
    font-size: .85rem;
    font-weight: 500;
    color: var(--pp-muted);
}
#docTOC ul ul a:hover,
#docTOC ul ul a.active { color: var(--teal); }

/* Neutralise the old white card around the doc body */
.docArticle .docContent {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

@media (max-width: 60rem) {
    .docLayout { grid-template-columns: 1fr; }
    .docSidebar .docSidebarSticky {
        position: static;
        border: 1px solid var(--pp-line);
        border-radius: 12px;
        padding: 16px;
        background: #fff;
    }
}

/* ============================================
   LIST / HUB VIEWS
   Only listing pages render .resourceHeader now (single-article
   views use .articleReadHead), so it becomes the dark hub hero.
   Article cards, category nav and category cards match the mockup.
   ============================================ */

/* Full-bleed dark hub hero: the negative margins cancel .resourceWrapper's 2em padding */
.resourceHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin: -2em -2em 28px;
    padding: 60px 2em 66px;
    background: var(--teal-deep);
}
.resourceHeader .rhCategory span {
    background: rgba(127, 208, 224, .15);
    color: #7fd0e0;
    border-radius: 999px;
}
.resourceHeader .rhTitle {
    color: #fff;
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    letter-spacing: -.02em;
}
.resourceHeader .rhSubtitle {
    color: rgba(255, 255, 255, .85);
    font-size: 1.1rem;
    max-width: 54ch;
}
.resourceHeader .rhSearch { width: 100%; max-width: 32rem; margin-top: .4em; }

/* Search bar */
.resourceSearchBar {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--pp-shadow-lg);
}
.resourceSearchInput {
    flex: 1;
    border: none;
    border-radius: 0;
    padding: .95em 1.1em;
    font-size: 1rem;
    font-family: inherit;
    color: var(--ink);
}
.resourceSearchInput:focus { outline: none; }
.resourceSearchBtn {
    border: none;
    border-radius: 0;
    margin: 0;
    background: var(--coral);
    color: #fff;
    padding: 0 1.5em;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.resourceSearchBtn:hover { background: var(--coral-600); }

/* Category navigation pills */
.categoryNav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 0 8px;
}
.categoryNav a {
    padding: .5em 1.1em;
    border-radius: 999px;
    border: 1.5px solid var(--pp-line);
    background: #fff;
    color: var(--pp-body);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
}
.categoryNav a.selected,
.categoryNav a:hover {
    border-color: var(--teal);
    color: var(--teal);
    background: rgba(2, 98, 127, .05);
}

/* Section headings */
.latestSection h2,
.categoryCardsSection h2,
.allArticlesSection h2 {
    font-size: 1.5rem;
    margin: 1.6em 0 .15em;
    color: var(--ink);
}
.articleCount { color: var(--pp-muted); font-size: .95rem; margin: 0 0 1em; }

/* Article cards */
div.articleGrid {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 20px;
    margin: 24px 0;
}
.articleCard {
    background: #fff;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    box-shadow: var(--pp-shadow-sm);
}
.articleCard:hover {
    box-shadow: var(--pp-shadow-md);
    transform: translateY(-4px);
}
.articleCard h4 { color: var(--ink); font-size: 1.05rem; line-height: 1.3; }
.articleCardDesc { color: var(--pp-muted); }
.articleCardMeta { color: var(--pp-muted); font-weight: 600; }
.articleCardCat {
    border-radius: 999px;
    font-size: .68rem;
    letter-spacing: .1em;
    padding: .4em .8em;
}
.articleCardCat.cat-blog { background: rgba(2, 98, 127, .1); color: var(--teal); }
.articleCardCat.cat-docs { background: rgba(244, 193, 80, .22); color: var(--as-amber-ink); }

/* Category cards: white card, coloured top border, count, preview list */
.categoryCardsGrid { gap: 20px; }
.categoryCard {
    background: #fff;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--pp-shadow-sm);
}
.categoryCard:hover { box-shadow: var(--pp-shadow-md); }
.categoryCardHeader {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 16px 20px;
    background: #fff !important;
    border-top: 3px solid var(--teal);
    color: var(--ink) !important;
}
.categoryCardHeader.cat-blog { border-top-color: var(--coral); }
.categoryCardHeader.cat-docs { border-top-color: var(--as-amber); }
.categoryCardHeader h3 { font-size: 1.1rem; color: var(--ink); margin: 0; }
.categoryCardCount { font-size: .75rem; color: var(--pp-muted); font-weight: 700; }
.categoryCardPreview { padding: 6px 20px 8px; margin: 0; list-style: none; }
.categoryCardPreview li { padding: 6px 0; border-bottom: 1px solid var(--pp-ground); }
.categoryCardPreview li:last-child { border-bottom: none; }
.categoryCardPreview a { color: var(--pp-body); font-weight: 600; font-size: .92rem; text-decoration: none; }
.categoryCardPreview a:hover { color: var(--teal); }
.categoryCardLink {
    display: block;
    padding: 12px 20px;
    color: var(--teal);
    font-weight: 700;
    font-size: .88rem;
    border-top: 1px solid var(--pp-line);
    text-decoration: none;
}

/* Back-to-resources button */
.backLink { margin: 2.4em 0 0; }
.backLink a.button {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    background: #fff;
    color: var(--teal);
    border: 1.5px solid var(--pp-line);
    border-radius: 10px;
    padding: .7em 1.3em;
    font-weight: 700;
    text-decoration: none;
}
.backLink a.button:hover { border-color: var(--teal); background: rgba(2, 98, 127, .05); }