/* ===========================================================================
   Dencare+ shared stylesheet — used by templated pages (blog / resources).
   The "chrome" rules (reset, header, nav, footer, buttons, mobile menu) mirror
   the homepage's inline CSS so templated pages match it visually. The homepage
   itself still carries its own inline copy and is untouched.
   =========================================================================== */

:root {
    /* One dial for article typography: raise --article-font and the reading
       measure (in em) widens with it, holding line length at ~66 characters.
       Every measured container shares this font-size so their widths align. */
    --article-font: 1.1875rem;   /* ~19px */
    --reading-measure: 36em;     /* ~66 chars, relative to --article-font */
}

/* --- Base --------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: #212121;
    line-height: 1.6;
    overflow-x: hidden;
    /* Warm off-white rather than hard white (softer contrast for reading).
       Only templated pages load this stylesheet; the homepage is unaffected. */
    background: #faf9f6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header / nav ------------------------------------------------------- */
/* Scoped to the site header (a direct child of body) so it never styles the
   <header> element used inside articles (.post-header). */
body > header {
    background: #212121;
    padding: 20px 0;
    /* Sits in normal flow, so on the way down it scrolls away with the page.
       The scroll handler adds .header-pinned on scroll-up to reveal it. */
    position: relative;
    z-index: 100;
}

@keyframes headerSlideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes headerSlideUp {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

/* Both states pin the header to the top; its box stays reserved in flow, so
   pinning causes no content jump. Scrolling up slides it in; scrolling down from
   a pinned state slides it back out, after which the handler returns it to flow.
   (Scrolling down while already in flow just lets it scroll away naturally.) */
body > header.header-pinned,
body > header.header-unpinning {
    position: sticky;
    top: 0;
}

body > header.header-pinned {
    animation: headerSlideDown 0.3s ease;
}

body > header.header-unpinning {
    animation: headerSlideUp 0.3s ease forwards;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo a {
    display: flex;
    align-items: center;
}

.logo svg {
    height: 32px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #00DBFF;
}

.nav-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-demo {
    background: #00DBFF;
    color: #1a1a1a;
    padding: 10px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-demo:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 219, 255, 0.3);
}

.btn-login {
    background: transparent;
    color: white;
    padding: 10px 24px;
    border: 1px solid white;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-login:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-primary {
    background: #00DBFF;
    color: #212121;
    padding: 12px 28px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 219, 255, 0.3);
}

.eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #00899B;
    margin-bottom: 16px;
    text-transform: uppercase;
}

/* --- Mobile menu -------------------------------------------------------- */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #212121;
    z-index: 99;
    padding: 80px 20px 40px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    /* Scroll when the menu is taller than a short viewport, so the buttons at
       the bottom (e.g. "Get a demo") stay reachable. */
    overflow-y: auto;
}

.mobile-nav.active {
    display: flex;
}

.mobile-nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
}

.mobile-nav-links li {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-links a {
    display: block;
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 20px;
    transition: color 0.3s;
}

.mobile-nav-links a:hover {
    color: #00DBFF;
}

.mobile-nav-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
    width: 100%;
    max-width: 280px;
}

.mobile-nav-buttons .btn-demo,
.mobile-nav-buttons .btn-login {
    text-align: center;
    padding: 14px 24px;
}

.mobile-menu-btn.active {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 101;
}

/* --- Footer ------------------------------------------------------------- */
footer {
    background: #212121;
    color: white;
    padding: 60px 0 30px;
}

.footer-grid-new {
    display: grid;
    grid-template-columns: 1.5fr 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-logo {
    display: flex;
    align-items: flex-start;
}

.footer-column h4 {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
}

.footer-about {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

.footer-email {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-email:hover {
    color: #00DBFF;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.terms-link {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s;
}

.terms-link:hover {
    color: white;
}

/* ===========================================================================
   Blog / resources
   =========================================================================== */

/* --- Blog index --------------------------------------------------------- */
.blog-hero {
    padding: 80px 0 40px;
    text-align: center;
}

.blog-hero h1 {
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 16px;
    color: #212121;
}

.blog-hero p {
    font-size: 18px;
    color: #666;
    max-width: 640px;
    margin: 0 auto;
}

.blog-list-section {
    padding: 20px 0 100px;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.post-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #EDEDED;
    border-radius: 12px;
    padding: 28px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

.post-card-category {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #00899B;
    margin-bottom: 14px;
}

.post-card h2 {
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 12px;
    color: #212121;
}

.post-card p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
}

.post-card-more {
    font-size: 14px;
    font-weight: 600;
    color: #00899B;
}

.blog-empty {
    text-align: center;
    color: #666;
    padding: 40px 0 80px;
}

/* --- Single post -------------------------------------------------------- */
.post {
    max-width: var(--reading-measure);
    font-size: var(--article-font);
    padding-top: 60px;
    padding-bottom: 100px;
}

.post-header {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid #EDEDED;
}

.post-header h1 {
    font-size: 38px;
    line-height: 1.2;
    margin: 8px 0 16px;
    color: #212121;
}

.post-meta {
    font-size: 14px;
    color: #999;
}

/* Article body (rendered Markdown) */
.prose {
    font-size: var(--article-font);
    color: #333;
}

.prose > * + * {
    margin-top: 24px;
}

.prose h2 {
    font-size: 26px;
    line-height: 1.3;
    color: #212121;
    margin-top: 48px;
}

.prose h3 {
    font-size: 20px;
    line-height: 1.3;
    color: #212121;
    margin-top: 36px;
}

.prose p {
    line-height: 1.6;
}

.prose ul,
.prose ol {
    padding-left: 24px;
    line-height: 1.7;
}

.prose li + li {
    margin-top: 8px;
}

.prose a {
    color: #00899B;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: #212121;
}

.prose blockquote {
    border-left: 3px solid #00DBFF;
    padding-left: 20px;
    color: #555;
    font-style: italic;
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.prose code {
    background: #F6F6FC;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.prose pre {
    background: #212121;
    color: #f5f5f5;
    padding: 20px;
    border-radius: 12px;
    overflow-x: auto;
}

.prose pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.prose hr {
    border: none;
    border-top: 1px solid #EDEDED;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 968px) {
    .post-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid-new {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .footer-logo {
        grid-column: 1 / -1;
    }

    .nav-links,
    .nav-buttons {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .blog-hero h1 {
        font-size: 34px;
    }

    .post-header h1 {
        font-size: 30px;
    }
}

@media (max-width: 640px) {
    .post-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid-new {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-logo {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* ===========================================================================
   Feature article (rich blog post) — dencare+ brand adaptation of the
   Rock/Pebble/Sand layout. Body component rules are scoped under .article-wrap
   so they outrank the generic ".article-wrap p" base and never leak elsewhere.
   =========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.post-hero {
    background: #212121;
    color: #fff;
    padding: 64px 0 56px;
}

.post-hero-inner {
    max-width: var(--reading-measure);
    font-size: var(--article-font);
    text-align: center;
}

.hero-category {
    display: inline-block;
    color: #00DBFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.post-hero h1 {
    font-size: clamp(30px, 5vw, 44px);
    line-height: 1.15;
    margin-bottom: 18px;
}

.post-hero-sub {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.post-hero-meta {
    margin-top: 24px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.5px;
}

/* --- Article body ------------------------------------------------------- */
.article-wrap {
    max-width: var(--reading-measure);
    margin: 0 auto;
    padding: 56px 24px 96px;
    font-size: var(--article-font);
    color: #333;
}

.article-wrap h2 {
    font-size: 27px;
    line-height: 1.25;
    color: #212121;
    margin: 52px 0 16px;
}

.article-wrap h3 {
    font-size: 20px;
    color: #212121;
    margin: 34px 0 12px;
}

.article-wrap p {
    margin-bottom: 22px;
    line-height: 1.6;
    color: #333;
}

/* Prose lists and links (the global reset strips list padding, so restore it). */
.article-wrap ul,
.article-wrap ol {
    margin: 0 0 22px;
    padding-left: 1.4em;
    line-height: 1.6;
    color: #333;
}

.article-wrap li + li {
    margin-top: 8px;
}

.article-wrap a {
    color: #00899B;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-wrap a:hover {
    color: #212121;
}

/* Component lists come from Markdown lists inside ::: containers — strip the
   default list chrome and prose item-spacing so each component owns its layout. */
.article-wrap .step-list ol,
.article-wrap .checklist ul,
.article-wrap .tl-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: inherit;
}

.article-wrap .step-list li + li,
.article-wrap .checklist li + li,
.article-wrap .tl-card li + li {
    margin-top: 0;
}

.article-wrap .intro-text {
    font-size: 20px;
    color: #444;
    border-left: 4px solid #00DBFF;
    padding-left: 22px;
    margin-bottom: 44px;
    font-style: italic;
    line-height: 1.6;
}

.article-wrap .intro-text p {
    margin: 0;
    color: inherit;
    line-height: inherit;
}

/* --- Method cards ------------------------------------------------------- */
.article-wrap .method-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0 48px;
}

.article-wrap .method-card {
    border-radius: 12px;
    padding: 28px 22px;
    text-align: center;
}

.article-wrap .method-card.rock {
    background: #212121;
    color: #fff;
}

.article-wrap .method-card.pebble {
    background: #00899B;
    color: #fff;
}

.article-wrap .method-card.sand {
    background: #E6F9FF;
    color: #212121;
}

.article-wrap .method-card .icon {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 14px;
}

.article-wrap .method-card .icon svg {
    width: 100%;
    height: 100%;
}

.article-wrap .method-card .label {
    font-size: 20px;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

.article-wrap .method-card p {
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.article-wrap .method-card.rock p,
.article-wrap .method-card.pebble p {
    color: rgba(255, 255, 255, 0.9);
}

.article-wrap .method-card.sand p {
    color: #333;
}

.article-wrap .method-card .value-tag {
    display: inline-block;
    margin-top: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
}

.article-wrap .method-card.sand .value-tag {
    background: rgba(0, 137, 155, 0.12);
    color: #00899B;
}

/* --- Calculation box ---------------------------------------------------- */
.article-wrap .calc-box {
    background: #F1FDFF;
    border: 1px solid rgba(0, 219, 255, 0.35);
    border-radius: 12px;
    padding: 26px 30px;
    margin: 36px 0;
}

.article-wrap .calc-box h4 {
    font-size: 17px;
    color: #00899B;
    margin-bottom: 14px;
}

/* Rows are authored as a Markdown table; the header row is hidden and each row
   is styled to read as a label / value pair. */
.article-wrap .calc-box table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.article-wrap .calc-box thead {
    display: none;
}

.article-wrap .calc-box td {
    padding: 10px 0;
    border-bottom: 1px dashed rgba(0, 137, 155, 0.25);
    vertical-align: top;
}

.article-wrap .calc-box td:last-child {
    text-align: right;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    padding-left: 16px;
}

.article-wrap .calc-box tr:last-child td {
    border-bottom: none;
    font-weight: 700;
    color: #00899B;
}

/* --- Takeaway quote ----------------------------------------------------- */
.article-wrap .takeaway {
    background: #212121;
    color: #fff;
    border-radius: 14px;
    padding: 40px 36px;
    margin: 56px 0 24px;
    position: relative;
    overflow: hidden;
}

.article-wrap .takeaway::after {
    content: '\275D';
    position: absolute;
    right: 24px;
    top: 8px;
    font-size: 110px;
    color: rgba(255, 255, 255, 0.06);
    line-height: 1;
}

.article-wrap .takeaway p {
    font-size: 22px;
    font-style: italic;
    line-height: 1.5;
    color: #fff;
    margin-bottom: 16px;
    position: relative;
}

.article-wrap .takeaway cite {
    font-size: 12px;
    color: #00DBFF;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-style: normal;
}

/* --- CTA button (shared by the CTA box) --------------------------------- */
.article-wrap .cta-btn {
    background: #00DBFF;
    color: #212121;
    padding: 13px 26px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.article-wrap .cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 219, 255, 0.3);
}

@media (max-width: 620px) {
    .article-wrap .method-cards {
        grid-template-columns: 1fr;
    }

    .post-hero {
        padding: 48px 0 40px;
    }
}

/* ===========================================================================
   Traffic-light treatment-plan article — dencare+ adaptation. Literal
   red/amber/green retained (the metaphor needs them) but tuned deep enough to
   sit calmly against the dark/cyan chrome and off-white page.
   =========================================================================== */

.article-wrap .tl-cards {
    display: grid;
    gap: 20px;
    margin: 36px 0 48px;
}

.article-wrap .tl-card {
    border-radius: 14px;
    padding: 26px 26px 26px 22px;
    border-left: 6px solid transparent;
}

.article-wrap .tl-card.red {
    background: #FDECEA;
    border-color: #B71C1C;
}

.article-wrap .tl-card.amber {
    background: #FEF3C7;
    border-color: #B45309;
}

.article-wrap .tl-card.green {
    background: #DCFCE7;
    border-color: #14532D;
}

.article-wrap .tl-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.article-wrap .tl-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.article-wrap .tl-card.red .tl-badge {
    background: #B71C1C;
}

.article-wrap .tl-card.amber .tl-badge {
    background: #B45309;
}

.article-wrap .tl-card.green .tl-badge {
    background: #14532D;
}

.article-wrap .tl-card h3 {
    margin: 0;
    font-size: 1.05em;
}

.article-wrap .tl-card.red h3 {
    color: #7B0000;
}

.article-wrap .tl-card.amber h3 {
    color: #78350F;
}

.article-wrap .tl-card.green h3 {
    color: #14532D;
}

.article-wrap .tl-card p {
    margin-bottom: 12px;
    font-size: 0.95em;
    color: #333;
}

.article-wrap .tl-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-wrap .tl-card li {
    font-size: 0.9em;
    padding: 5px 0 5px 20px;
    position: relative;
    color: #333;
}

.article-wrap .tl-card li::before {
    content: '→';
    position: absolute;
    left: 0;
    font-weight: 600;
}

.article-wrap .tl-card.red li::before {
    color: #7B0000;
}

.article-wrap .tl-card.amber li::before {
    color: #78350F;
}

.article-wrap .tl-card.green li::before {
    color: #14532D;
}

/* --- Info box (brand) --------------------------------------------------- */
.article-wrap .info-box {
    background: #F1FDFF;
    border: 1px solid rgba(0, 219, 255, 0.35);
    border-radius: 12px;
    padding: 22px 26px;
    margin: 36px 0;
}

.article-wrap .info-box strong {
    display: block;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #00899B;
    margin-bottom: 10px;
}

.article-wrap .info-box p {
    margin: 0;
    font-size: 0.95em;
    color: #333;
}

/* --- Titled step list --------------------------------------------------- */
.article-wrap .step-list {
    counter-reset: steps;
    list-style: none;
    padding: 0;
    margin: 24px 0 36px;
}

.article-wrap .step-list li {
    counter-increment: steps;
    padding: 16px 0 16px 56px;
    position: relative;
    border-bottom: 1px solid #e6e3dd;
    font-size: 0.97em;
}

.article-wrap .step-list li:last-child {
    border-bottom: none;
}

.article-wrap .step-list li::before {
    content: counter(steps);
    position: absolute;
    left: 0;
    top: 14px;
    width: 34px;
    height: 34px;
    background: #212121;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85em;
}

.article-wrap .step-list li strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1em;
    color: #212121;
}

.article-wrap .step-list li p {
    margin: 0;
}

/* --- Pull quote --------------------------------------------------------- */
.article-wrap .pull-quote {
    font-size: 1.35em;
    font-style: italic;
    color: #00899B;
    border-top: 2px solid #00DBFF;
    border-bottom: 2px solid #00DBFF;
    padding: 26px 0;
    margin: 44px 0;
    text-align: center;
    line-height: 1.5;
}

.article-wrap .pull-quote p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-style: inherit;
}

/* --- Checklist ---------------------------------------------------------- */
.article-wrap .checklist {
    list-style: none;
    padding: 0;
    margin: 20px 0 36px;
}

.article-wrap .checklist li {
    padding: 12px 0 12px 32px;
    border-bottom: 1px solid #e6e3dd;
    position: relative;
    font-size: 0.96em;
}

.article-wrap .checklist li:last-child {
    border-bottom: none;
}

.article-wrap .checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #14532D;
    font-weight: 700;
}

/* --- Centered CTA box (reuses .cta-btn) --------------------------------- */
.article-wrap .cta-box {
    background: #212121;
    color: #fff;
    border-radius: 16px;
    padding: 40px 36px;
    text-align: center;
    margin: 56px 0 20px;
}

.article-wrap .cta-box h2 {
    color: #fff;
    font-size: 1.5em;
    margin: 0 0 12px;
}

.article-wrap .cta-box p {
    color: rgba(255, 255, 255, 0.75);
    max-width: 460px;
    margin: 0 auto 24px;
    font-size: 1em;
}

/* Larger screens are read from further away — size the body copy up a step.
   Bumping the one variable also widens the em-based measure in lockstep. */
@media (min-width: 1080px) {
    :root {
        --article-font: 1.25rem; /* ~20px */
    }
}