/* ============================================================
   FEATHERWORK INVOICING — GUIDE ARTICLE PAGE
   Loaded alongside base.css + home.css: reuses the shared header,
   footer, .container, .btn, .guides-cta, and design tokens from
   those files. Only adds the article-reading layout and prose
   typography unique to this page.
   ============================================================ */

.guide-article { padding-block: var(--space-12) var(--space-16); }
.guide-article__container {
    max-width: 700px;
    margin-inline: auto;
}

.guide-article__back {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-8);
}
.guide-article__back:hover { color: var(--color-accent); }

.guide-article__head { margin-bottom: var(--space-8); }
.guide-article__eyebrow {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}
.guide-article__head h1 {
    font-size: clamp(1.7rem, 4vw, 2.35rem);
    font-weight: 700;
    line-height: 1.2;
}

/* ----------------------------------------------------------
   PROSE — the article body itself, hand-authored HTML per
   guide (views/guides/articles/*.ejs), styled here
   ---------------------------------------------------------- */
.guide-article__body {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text-secondary);
}

.guide-article__body h2 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
}
.guide-article__body h2:first-child { margin-top: 0; }

.guide-article__body p { margin: 0 0 var(--space-5); }

.guide-article__body ul,
.guide-article__body ol {
    margin: 0 0 var(--space-5);
    padding-left: 1.3em;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.guide-article__body li { padding-left: 0.2em; }
.guide-article__body li strong { color: var(--color-text-primary); }

.guide-article__body a {
    color: var(--color-accent);
    font-weight: 600;
    border-bottom: 1px solid var(--color-accent);
}
.guide-article__body a:hover { color: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.guide-article__body strong { color: var(--color-text-primary); font-weight: 600; }

.guide-article__body pre {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin: 0 0 var(--space-6);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--color-text-primary);
}

.guide-article__body blockquote {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-left: 3px solid var(--color-border-strong);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.guide-article__body blockquote.is-bad { border-left-color: var(--color-error); }
.guide-article__body blockquote.is-good { border-left-color: var(--color-accent); }

.guide-article__body hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-8) 0;
}

/* ----------------------------------------------------------
   INVOICE MOCKUP — a static illustration, not the live editable
   preview. Markup/classes (.invoice-preview-card, .preview-*) are
   ported from invoice-generator.css so the two look like the same
   component; kept here rather than sharing that stylesheet so each
   marketing page's CSS stays self-contained, per this site's usual
   pattern. Capped narrower than the prose column — a full-width
   700px "invoice" would read as an oversized, unrealistic page.
   ---------------------------------------------------------- */
.guide-article__mock { margin: 0 0 var(--space-6); display: flex; justify-content: center; }

.invoice-preview-card {
    width: 100%;
    max-width: 460px;
    background-color: var(--color-white-50);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-secondary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Facsimile of a printed/emailed invoice — pinned to light-mode
   tokens in every theme, same rationale as invoice-generator.css's
   own preview card. */
:root[data-theme="dark"] .invoice-preview-card {
    --color-border:         #E8E6E1;
    --color-border-strong:  #D4D0C8;
    --color-text-primary:   #1A1916;
    --color-text-secondary: #504F4A;
    --color-text-tertiary:  #908B82;
    --color-accent:         #2F6B47;
}

.preview-header { display: flex; align-items: flex-start; justify-content: space-between; }
.preview-wordmark { font-family: var(--font-heading); font-size: var(--text-md); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--color-text-primary); }
.preview-invoice-label { display: block; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-wide); color: var(--color-text-primary); text-align: right; }
.preview-invoice-number { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); text-align: right; }

.preview-meta { display: flex; gap: var(--space-6); flex-wrap: wrap; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.preview-meta__item { display: flex; flex-direction: column; gap: var(--space-1); }
.preview-meta__key { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-tertiary); }
.preview-meta__val { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-primary); }

.preview-bill-to { display: flex; flex-direction: column; gap: var(--space-1); }
.preview-bill-to__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: var(--space-1); }
.preview-bill-to__client { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); }
.preview-bill-to__job { font-size: var(--text-sm); color: var(--color-text-secondary); }

.preview-line-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.preview-line-table thead tr { border-bottom: 1.5px solid var(--color-border-strong); }
.preview-line-table th { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-tertiary); padding-bottom: var(--space-2); text-align: left; }
.preview-line-table tbody tr { border-bottom: 1px solid var(--color-border); }
.preview-line-table td { padding-block: var(--space-2); color: var(--color-text-primary); }

.preview-col--desc   { text-align: left;  width: 100%; }
.preview-col--amount { text-align: right; white-space: nowrap; padding-left: var(--space-3); font-weight: 500; }

.preview-totals { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.preview-totals__row { display: flex; justify-content: space-between; gap: var(--space-8); width: 100%; max-width: 220px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.preview-totals__row--total { border-top: 1.5px solid var(--color-border-strong); padding-top: var(--space-2); font-weight: 700; font-size: var(--text-base); color: var(--color-text-primary); }

.preview-notes { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.preview-notes__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: var(--space-2); }
.preview-notes__text { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }

/* ----------------------------------------------------------
   CTA BAND — ported from guides.css. This page never actually
   loaded that stylesheet, so .guides-cta was rendering completely
   unstyled (hence unstyled == left-aligned) on every article page;
   defined here instead, matching this site's per-page CSS pattern.
   ---------------------------------------------------------- */
.guides-cta { padding-block: var(--space-20); text-align: center; background: var(--color-surface-raised); border-top: 1px solid var(--color-border); }
.guides-cta__inner { max-width: 480px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.guides-cta h2 { font-size: var(--text-2xl); }
.guides-cta p { color: var(--color-text-secondary); }