/* ============================================================
   FREE INVOICE GENERATOR — public, unauthenticated PLG tool
   Loaded alongside base.css + home.css: reuses the shared header,
   footer, .container, .btn, and design tokens from those two files.
   The form/preview component classes below (.invoice-editor,
   .invoice-preview-card, .form-input, etc.) are ported from
   public/css/invoicing.css, which is only loaded inside the
   authenticated app shell (app.css) — marketing pages don't load
   it, so this page needs its own copy. Ported classes are drawn
   from base.css tokens only, so they carry over unmodified.
   ============================================================ */

/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */
.gen-hero { padding-block: var(--space-16) var(--space-8); }
.gen-hero__inner {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.gen-hero__eyebrow {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent);
}
.gen-hero h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); font-weight: 700; line-height: var(--leading-tight); }
.gen-hero__sub { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: var(--leading-normal); }

/* ----------------------------------------------------------
   INTRO / SEO COPY
   ---------------------------------------------------------- */
.gen-intro { padding-bottom: var(--space-8); }
.gen-intro__inner {
    max-width: 700px;
    margin-inline: auto;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-loose);
    text-align: center;
}
.gen-intro__inner strong { color: var(--color-text-primary); }

/* ----------------------------------------------------------
   DRAFT RESTORED BANNER
   ---------------------------------------------------------- */
.gen-draft-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-accent-light);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-8);
    font-size: var(--text-sm);
    color: var(--color-accent-dark, var(--color-text-primary));
}
.gen-draft-banner svg { flex-shrink: 0; color: var(--color-accent); }
.gen-draft-banner span { flex: 1; }
.gen-draft-banner__action {
    flex-shrink: 0;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}
.gen-draft-banner__action:hover { color: var(--color-accent-hover); }
.gen-draft-banner__action:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (max-width: 480px) {
    .gen-draft-banner { flex-wrap: wrap; }
}

/* ----------------------------------------------------------
   TOOL SECTION WRAPPER
   ---------------------------------------------------------- */
.gen-tool { padding-bottom: var(--space-20); }

/* ============================================================
   FORM PRIMITIVES — ported from invoicing.css
   ============================================================ */

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.form-input {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    height: 40px;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.form-input::placeholder { color: var(--color-text-tertiary); }

.form-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.form-input--textarea {
    height: auto;
    resize: vertical;
    line-height: var(--leading-normal);
    padding-block: var(--space-2);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   INVOICE EDITOR — two-column layout, ported from invoicing.css
   ============================================================ */

.invoice-editor {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.invoice-editor__form { min-width: 0; }

.invoice-editor__preview {
    min-width: 0;
    position: sticky;
    top: calc(60px + var(--space-8));
}

@media (max-width: 900px) {
    .invoice-editor { grid-template-columns: 1fr; }
    .invoice-editor__preview { position: static; }
}

.invoice-section { margin-bottom: var(--space-6); }

.invoice-section__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-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

/* ---- Line items ---- */
.invoice-line-items { display: flex; flex-direction: column; gap: var(--space-2); }

.invoice-line-headers { display: flex; align-items: center; gap: var(--space-2); padding-inline: 0; }

.line-header {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.line-header--desc  { flex: 1 1 0; min-width: 0; }
.line-header--qty   { width: 70px;  flex-shrink: 0; }
.line-header--price { width: 100px; flex-shrink: 0; text-align: right; }
.line-header--amount{ width: 80px;  flex-shrink: 0; text-align: right; }
.line-header--remove{ width: 28px;  flex-shrink: 0; }

.invoice-line-row { display: flex; align-items: center; gap: var(--space-2); }
.invoice-line-row .line-desc { flex: 1 1 0; min-width: 0; }
.invoice-line-row .line-qty { width: 70px; flex-shrink: 0; text-align: right; }
.invoice-line-row .line-price { width: 100px; flex-shrink: 0; text-align: right; }

.line-amount {
    width: 80px;
    flex-shrink: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    text-align: right;
}

.btn-remove-line {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0;
    cursor: pointer;
    color: var(--color-text-tertiary);
    transition: color 0.15s ease, background-color 0.15s ease;
}
.btn-remove-line:hover { color: var(--color-error); background-color: color-mix(in srgb, var(--color-error) 8%, transparent); }
.btn-remove-line:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.btn-add-line {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: var(--space-1) 0;
    margin-top: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-accent);
    cursor: pointer;
    transition: color 0.15s ease;
}
.btn-add-line:hover { color: var(--color-accent-hover); }
.btn-add-line:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---- Summary ---- */
.invoice-summary { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); margin-bottom: var(--space-6); }
.invoice-summary__row { display: flex; align-items: center; gap: var(--space-4); width: 100%; max-width: 320px; justify-content: flex-end; }
.invoice-summary__label { font-size: var(--text-sm); color: var(--color-text-secondary); white-space: nowrap; }
.invoice-summary__value { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-primary); min-width: 80px; text-align: right; }
.invoice-summary__row--tax .invoice-summary__label { margin-right: auto; }
.invoice-summary__tax-input { display: inline-flex; align-items: center; gap: var(--space-1); }
.invoice-summary__tax-input .form-input { width: 64px; height: 32px; padding: var(--space-1) var(--space-2); text-align: right; }
.invoice-summary__pct { font-size: var(--text-sm); color: var(--color-text-secondary); }
.invoice-summary__row--total { border-top: 1px solid var(--color-border-strong); padding-top: var(--space-2); margin-top: var(--space-1); }
.invoice-summary__value--total { font-size: var(--text-md); font-weight: 700; color: var(--color-text-primary); }

/* ============================================================
   PREVIEW PANEL + CARD — ported from invoicing.css
   ============================================================ */

.invoice-preview-panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.btn-preview-print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    background-color: transparent;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    height: 36px;
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
    width: 100%;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-preview-print:hover { background-color: var(--color-surface-raised); color: var(--color-text-primary); border-color: var(--color-gray-300, var(--color-border-strong)); }
.btn-preview-print:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

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

/* The card is a facsimile of the printed/emailed invoice, so it stays
   pinned to light-mode tokens in every theme — same rationale as the
   @media print override in base.css, just scoped to this 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 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; letter-spacing: var(--tracking-wide); color: var(--color-text-primary); }

.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--qty   { text-align: right; white-space: nowrap; padding-left: var(--space-3); }
.preview-col--price { text-align: right; white-space: nowrap; padding-left: var(--space-3); }
.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); white-space: pre-wrap; }

.preview-footer { font-size: var(--text-xs); color: var(--color-text-tertiary); text-align: center; border-top: 1px solid var(--color-border); padding-top: var(--space-4); }

/* ============================================================
   RESPONSIVE — ≤600px: line items reflow into stacked cards
   (identical behavior to the authenticated invoice editor)
   ============================================================ */

@media (max-width: 600px) {
    .invoice-line-headers { display: none; }

    .invoice-line-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: var(--space-2);
        padding: var(--space-3);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        align-items: unset;
    }
    .invoice-line-row .line-desc { grid-column: 1 / -1; grid-row: 1; flex: unset; min-width: unset; }
    .invoice-line-row .line-qty { grid-column: 1; grid-row: 2; width: auto; flex-shrink: unset; text-align: left; }
    .invoice-line-row .line-price { grid-column: 2; grid-row: 2; width: auto; flex-shrink: unset; text-align: right; }
    .invoice-line-row .line-amount { display: none; }
    .invoice-line-row .btn-remove-line { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; width: 28px; height: 28px; flex-shrink: unset; }

    .invoice-summary__row { max-width: 100%; }

    .invoice-preview-panel { padding: var(--space-4); }
    .invoice-preview-card { padding: var(--space-5); }
    .preview-col--qty, .preview-col--price { display: none; }

    .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   CTA BAND — matches the .faq-cta / .hiw-cta / .guides-cta pattern
   used across the other marketing pages
   ============================================================ */
.gen-cta { padding-block: var(--space-20); text-align: center; background: var(--color-surface-raised); border-top: 1px solid var(--color-border); }
.gen-cta__inner { max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.gen-cta h2 { font-size: var(--text-2xl); }
.gen-cta p { color: var(--color-text-secondary); line-height: var(--leading-normal); }

/* ============================================================
   HOW-TO STEPS — short SEO recap beneath the CTA
   ============================================================ */
.gen-steps { padding-block: var(--space-20); }
.gen-steps__title { font-size: var(--text-2xl); text-align: center; margin-bottom: var(--space-10); }
.gen-steps__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.gen-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-text-primary);
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}
.gen-step__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-base); margin-bottom: var(--space-2); }
.gen-step__body { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }

@media (max-width: 720px) {
    .gen-steps__list { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ============================================================
   @MEDIA PRINT — hide everything except the invoice preview card
   ============================================================ */
/* @page must live at the stylesheet's top level, not nested inside
   @media print — some browsers silently ignore it when nested, which
   left the printed page with no margin at all regardless of this rule.
   Kept as a floor; .invoice-preview-card below adds real padding too,
   since a browser's print dialog (e.g. a "Margins: None" setting left
   over from a previous print job) can override @page independent of
   this stylesheet. */
@page { margin: 0.75in; }

@media print {
    .site-header,
    .site-footer,
    .gen-hero,
    .gen-intro,
    .gen-draft-banner,
    .gen-cta,
    .gen-steps,
    .invoice-editor__form,
    .btn-preview-print {
        display: none !important;
    }

    .gen-tool { padding: 0; }
    .gen-tool .container { padding-inline: 0; max-width: none; }
    .invoice-editor { display: block; }
    .invoice-editor__preview { position: static; }

    .invoice-preview-panel { border: none; box-shadow: none; padding: 0; border-radius: 0; }
    .invoice-preview-card { border: none; border-radius: 0; padding: 0.5in; box-shadow: none; width: 100%; box-sizing: border-box; }

    body {
        background: white;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}