/* /Components/SiteFooter.razor.rz.scp.css */
/* ============================================
   FILE: Components/SiteFooter.razor.css
   INSTALL TO: StokeMarketing.Web/Components/SiteFooter.razor.css
   PURPOSE: Scoped styles for SiteFooter component
   MOBILE: 375px base, Bootstrap grid handles columns
   SM-3: Public shell
   ============================================ */

/* ── FOOTER SHELL ────────────────────────────────────────────────────────────── */
.stoke-footer[b-nndz7lcfzb] {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 64px 0 40px;
}

/* ── FOOTER GRID ─────────────────────────────────────────────────────────────── */
.stoke-footer-grid[b-nndz7lcfzb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 48px;
}

@media (min-width: 576px) {
    .stoke-footer-grid[b-nndz7lcfzb] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .stoke-footer-grid[b-nndz7lcfzb] {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 48px;
    }
}

/* ── BRAND COLUMN ────────────────────────────────────────────────────────────── */
.stoke-footer-logo[b-nndz7lcfzb] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 16px;
}

.stoke-footer-logo img[b-nndz7lcfzb] {
    mix-blend-mode: screen;
    height: 32px;
    width: auto;
}

.stoke-footer-wordmark[b-nndz7lcfzb] {
    font-family: var(--font-family);
    font-weight: 800;
    font-size: 18px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.stoke-footer-tagline[b-nndz7lcfzb] {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 280px;
    margin: 0;
}

/* ── FOOTER COLUMNS ──────────────────────────────────────────────────────────── */
.stoke-footer-heading[b-nndz7lcfzb] {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.stoke-footer-links[b-nndz7lcfzb] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stoke-footer-links li[b-nndz7lcfzb] {
    margin-bottom: 10px;
}

.stoke-footer-links a[b-nndz7lcfzb] {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.stoke-footer-links a:hover[b-nndz7lcfzb] {
    color: var(--text-secondary);
}

/* ── FOOTER BOTTOM ───────────────────────────────────────────────────────────── */
.stoke-footer-bottom[b-nndz7lcfzb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.stoke-footer-bottom p[b-nndz7lcfzb] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.stoke-footer-bottom a[b-nndz7lcfzb] {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.stoke-footer-bottom a:hover[b-nndz7lcfzb] {
    color: var(--text-secondary);
}

/* ── FOOTER CONTACT DETAILS ───────────────────────────────────────────────── */
.stoke-footer-contact[b-nndz7lcfzb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.stoke-footer-contact-item[b-nndz7lcfzb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.stoke-footer-contact-item:hover[b-nndz7lcfzb] {
    color: var(--text-secondary);
}
/* /Components/SiteHeader.razor.rz.scp.css */
/* ============================================
   FILE: Components/SiteHeader.razor.css
   INSTALL TO: StokeMarketing.Web/Components/SiteHeader.razor.css
   PURPOSE: Scoped styles for SiteHeader nav component
   MOBILE: 375px base, lg breakpoint additive
   SM-3: Public shell
   ============================================ */

/* ── NAV SHELL ───────────────────────────────────────────────────────────────── */
.stoke-nav[b-3tijyjqtod] {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    height: var(--nav-height);
    background: rgba(10, 12, 16, 0.90);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.stoke-nav-inner[b-3tijyjqtod] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    gap: 24px;
}

/* ── LOGO ────────────────────────────────────────────────────────────────────── */
.stoke-nav-logo[b-3tijyjqtod] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.stoke-nav-logo img[b-3tijyjqtod] {
    mix-blend-mode: screen;
    height: 36px;
    width: auto;
}

.stoke-nav-wordmark[b-3tijyjqtod] {
    font-family: var(--font-family);
    font-weight: 800;
    font-size: 20px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* ── DESKTOP NAV LINKS ───────────────────────────────────────────────────────── */
.stoke-nav-links[b-3tijyjqtod] {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: center;
}

.stoke-nav-links a[b-3tijyjqtod] {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 400;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.stoke-nav-links a:hover[b-3tijyjqtod] {
    color: var(--text-primary);
}

/* ── DESKTOP CTA ─────────────────────────────────────────────────────────────── */
.stoke-nav-cta[b-3tijyjqtod] {
    padding: 10px 22px;
    font-size: 14px;
    flex-shrink: 0;
}

/* ── HAMBURGER ───────────────────────────────────────────────────────────────── */
.stoke-hamburger[b-3tijyjqtod] {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 8px 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stoke-hamburger:hover[b-3tijyjqtod] {
    border-color: var(--border-accent);
    color: var(--accent-primary);
}

/* ── MOBILE ACTIONS (CTA + HAMBURGER GROUP) ──────────────────────────────────── */
.stoke-nav-mobile-actions[b-3tijyjqtod] {
    gap: 10px;
    flex-shrink: 0;
}

.stoke-nav-cta-mobile[b-3tijyjqtod] {
    padding: 8px 14px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── MOBILE MENU ─────────────────────────────────────────────────────────────── */
.stoke-mobile-menu[b-3tijyjqtod] {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 24px 0;
}

.stoke-mobile-links[b-3tijyjqtod] {
    list-style: none;
    margin: 0 0 24px 0;
    padding: 0;
}

.stoke-mobile-links li[b-3tijyjqtod] {
    border-bottom: 1px solid var(--border);
}

.stoke-mobile-links a[b-3tijyjqtod] {
    display: block;
    padding: 14px 0;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.stoke-mobile-links a:hover[b-3tijyjqtod] {
    color: var(--text-primary);
}

.stoke-mobile-cta[b-3tijyjqtod] {
    width: 100%;
    justify-content: center;
}

/* ── ACTIVE NAV STATE ─────────────────────────────────────────────────────── */
.stoke-nav-links a.nav-active[b-3tijyjqtod],
.stoke-mobile-links a.nav-active[b-3tijyjqtod] {
    color: var(--text-primary);
    font-weight: 500;
}
/* /Layout/AdminLayout.razor.rz.scp.css */
/* ── Shell ── */
.admin-shell[b-epyvinheu6] {
    display: flex;
    min-height: 100vh;
    background: var(--bg-primary);
}

/* ── Sidebar ── */
.admin-sidebar[b-epyvinheu6] {
    width: 240px;
    min-width: 240px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
}

/* ── Brand ── */
.sidebar-brand[b-epyvinheu6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 20px 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.sidebar-logo-dot[b-epyvinheu6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 8px var(--accent-primary);
    flex-shrink: 0;
}

.sidebar-logo-text[b-epyvinheu6] {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: var(--text-primary);
}

/* ── Section labels ── */
.sidebar-section-label[b-epyvinheu6] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 16px 20px 6px;
}

/* ── Nav ── */
.sidebar-nav[b-epyvinheu6] {
    list-style: none;
    padding: 0 10px;
    margin: 0 0 8px;
}

.sidebar-link[b-epyvinheu6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
}

.sidebar-link:hover[b-epyvinheu6] {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.sidebar-link.active[b-epyvinheu6] {
    background: var(--accent-subtle);
    color: var(--accent-primary);
    font-weight: 500;
}

.sidebar-icon[b-epyvinheu6] {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.sidebar-link.active .sidebar-icon[b-epyvinheu6] {
    opacity: 1;
}

/* ── Sidebar footer / user ── */
.sidebar-footer[b-epyvinheu6] {
    margin-top: auto;
    padding: 16px 10px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-user[b-epyvinheu6] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.sidebar-user-avatar[b-epyvinheu6] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-subtle);
    border: 1px solid var(--border-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.sidebar-user-info[b-epyvinheu6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user-email[b-epyvinheu6] {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role[b-epyvinheu6] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sidebar-logout[b-epyvinheu6] {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 5px 8px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.sidebar-logout:hover[b-epyvinheu6] {
    border-color: var(--border-accent);
    color: var(--accent-primary);
}

/* ── Content area ── */
.admin-content[b-epyvinheu6] {
    margin-left: 240px;
    flex: 1;
    min-width: 0;
}

.admin-main[b-epyvinheu6] {
    padding: 40px 48px;
    max-width: 1200px;
}

/* ── Mobile — sidebar collapses ── */
@media (max-width: 768px) {
    .admin-sidebar[b-epyvinheu6] {
        width: 100%;
        min-width: unset;
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .admin-shell[b-epyvinheu6] {
        flex-direction: column;
    }

    .admin-content[b-epyvinheu6] {
        margin-left: 0;
    }

    .admin-main[b-epyvinheu6] {
        padding: 24px 16px;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
main[b-gtd5ol0ap3] {
    /* Push content below fixed nav */
    padding-top: var(--nav-height);
    min-height: calc(100vh - var(--nav-height));
    position: relative;
    z-index: 1;
    /* Minimum horizontal gutter — prevents content bleeding to edges */
    padding-left: 8px;
    padding-right: 8px;
}
/* /Pages/Admin/AdminBlogPostEditor.razor.rz.scp.css */
/* ============================================
   FILE: Web/Pages/Admin/AdminBlogPostEditor.razor.css
   PURPOSE: Split-pane markdown editor layout
   PROJECT: StokeMarketing.Web — SM-7b
   ============================================ */

/* ── Split pane container ── */
.blog-editor-panes[b-ldj11erzws] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-top: 24px;
    background: var(--border);
    border-radius: 12px;
    overflow: hidden;
    min-height: 520px;
}

.blog-editor-pane[b-ldj11erzws] {
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
}

.pane-label[b-ldj11erzws] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

/* ── Markdown textarea ── */
.blog-body-editor[b-ldj11erzws] {
    flex: 1;
    width: 100%;
    min-height: 480px;
    padding: 20px;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
    tab-size: 2;
}

.blog-body-editor[b-ldj11erzws]::placeholder {
    color: var(--text-muted);
}

/* ── Preview pane ── */
.blog-body-preview[b-ldj11erzws] {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.preview-empty[b-ldj11erzws] {
    color: var(--text-muted);
    font-style: italic;
}

/* ── Rendered markdown styles ── */
.blog-body-preview h1[b-ldj11erzws],
.blog-body-preview h2[b-ldj11erzws],
.blog-body-preview h3[b-ldj11erzws] {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
    margin: 24px 0 12px;
    line-height: 1.3;
}

.blog-body-preview h1[b-ldj11erzws] { font-size: 22px; }
.blog-body-preview h2[b-ldj11erzws] { font-size: 18px; }
.blog-body-preview h3[b-ldj11erzws] { font-size: 16px; }

.blog-body-preview p[b-ldj11erzws] {
    margin-bottom: 16px;
}

.blog-body-preview a[b-ldj11erzws] {
    color: var(--accent-primary);
    text-decoration: none;
}

.blog-body-preview a:hover[b-ldj11erzws] {
    text-decoration: underline;
}

.blog-body-preview strong[b-ldj11erzws] {
    color: var(--text-primary);
    font-weight: 600;
}

.blog-body-preview ul[b-ldj11erzws],
.blog-body-preview ol[b-ldj11erzws] {
    margin: 0 0 16px 24px;
}

.blog-body-preview li[b-ldj11erzws] {
    margin-bottom: 6px;
}

.blog-body-preview blockquote[b-ldj11erzws] {
    border-left: 3px solid var(--accent-primary);
    margin: 16px 0;
    padding: 8px 16px;
    color: var(--text-secondary);
    background: var(--accent-subtle);
    border-radius: 0 6px 6px 0;
}

.blog-body-preview code[b-ldj11erzws] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--accent-secondary);
}

.blog-body-preview pre[b-ldj11erzws] {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin-bottom: 16px;
}

.blog-body-preview pre code[b-ldj11erzws] {
    background: transparent;
    padding: 0;
    color: var(--text-primary);
}

.blog-body-preview hr[b-ldj11erzws] {
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}

/* ── Form field helpers ── */
.form-field-grow[b-ldj11erzws] {
    flex: 1;
}

.field-optional[b-ldj11erzws] {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

/* ── Mobile: stack panes ── */
@media (max-width: 768px) {
    .blog-editor-panes[b-ldj11erzws] {
        grid-template-columns: 1fr;
    }

    .blog-body-editor[b-ldj11erzws] {
        min-height: 300px;
    }
}
/* /Pages/Admin/AdminDashboard.razor.rz.scp.css */
.dashboard-header[b-jpcezwwes4] {
    margin-bottom: 40px;
}

.dashboard-eyebrow[b-jpcezwwes4] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 8px;
}

.dashboard-title[b-jpcezwwes4] {
    font-family: 'Syne', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.dashboard-subtitle[b-jpcezwwes4] {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Cards ── */
.dashboard-cards[b-jpcezwwes4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.dashboard-card[b-jpcezwwes4] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px 24px;
    transition: border-color 0.15s;
}

.dashboard-card:hover[b-jpcezwwes4] {
    border-color: var(--border-accent);
}

.dashboard-card-label[b-jpcezwwes4] {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.dashboard-card-value[b-jpcezwwes4] {
    font-family: 'Syne', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.dashboard-card-badge[b-jpcezwwes4] {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-primary);
    background: var(--accent-subtle);
    border: 1px solid var(--border-accent);
    border-radius: 100px;
    padding: 3px 10px;
    margin-bottom: 12px;
}

.dashboard-card-link[b-jpcezwwes4] {
    display: block;
    font-size: 13px;
    color: var(--accent-primary);
    text-decoration: none;
    transition: gap 0.15s;
}

.dashboard-card-link:hover[b-jpcezwwes4] {
    color: var(--accent-secondary);
}

@media (max-width: 768px) {
    .dashboard-cards[b-jpcezwwes4] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/AdminLeads.razor.rz.scp.css */
/* ============================================
   FILE: Web/Pages/Admin/AdminLeads.razor.css
   PURPOSE: Leads admin page styles
   PROJECT: StokeMarketing.Web — SM-7d
   ============================================ */

/* ── Filter row ── */
.leads-filter-row[b-ohm1diud10] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-label[b-ohm1diud10] {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.filter-pills[b-ohm1diud10] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-pill[b-ohm1diud10] {
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-pill:hover[b-ohm1diud10] {
    border-color: var(--border-accent);
    color: var(--text-primary);
}

.filter-pill.active[b-ohm1diud10] {
    background: var(--accent-subtle);
    border-color: var(--border-accent);
    color: var(--accent-primary);
}

/* ── Email link ── */
.lead-email[b-ohm1diud10] {
    color: var(--accent-primary);
    font-size: 14px;
    text-decoration: none;
}

.lead-email:hover[b-ohm1diud10] {
    color: var(--accent-secondary);
    text-decoration: underline;
}

/* ── Status select ── */
.status-select[b-ohm1diud10] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    appearance: auto;
    outline: none;
    transition: border-color 0.2s;
}

.status-select:focus[b-ohm1diud10] {
    border-color: var(--border-accent);
}

/* Status colour coding */
.status-new[b-ohm1diud10]        { border-color: var(--border-accent); color: var(--accent-primary); }
.status-contacted[b-ohm1diud10]  { border-color: rgba(59,130,246,0.4); color: #60a5fa; }
.status-qualified[b-ohm1diud10]  { border-color: rgba(34,197,94,0.4);  color: #4ade80; }
.status-unqualified[b-ohm1diud10]{ border-color: rgba(107,114,128,0.4);color: var(--text-muted); }
.status-converted[b-ohm1diud10]  { border-color: rgba(168,85,247,0.4); color: #c084fc; }

/* ── Utility ── */
.text-secondary[b-ohm1diud10] { color: var(--text-secondary); }
.text-muted[b-ohm1diud10]     { color: var(--text-muted); }
/* /Pages/Admin/AdminLogin.razor.rz.scp.css */
.login-container[b-zl4rz36plv] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: var(--bg-primary);
    background-image: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 92, 43, 0.07), transparent 70%);
}

.login-card[b-zl4rz36plv] {
    width: 100%;
    max-width: 400px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 36px;
}

/* ── Brand ── */
.login-brand[b-zl4rz36plv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
}

.login-logo-dot[b-zl4rz36plv] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-primary);
    flex-shrink: 0;
}

.login-logo-text[b-zl4rz36plv] {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: var(--text-primary);
}

/* ── Heading ── */
.login-title[b-zl4rz36plv] {
    font-family: 'Syne', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.login-subtitle[b-zl4rz36plv] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 28px;
}

/* ── Error ── */
.login-error[b-zl4rz36plv] {
    background: rgba(255, 92, 43, 0.08);
    border: 1px solid rgba(255, 92, 43, 0.3);
    border-radius: 8px;
    color: var(--accent-secondary);
    font-size: 14px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

/* ── Form ── */
.login-form[b-zl4rz36plv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-zl4rz36plv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-zl4rz36plv] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.form-input[b-zl4rz36plv] {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    padding: 12px 16px;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
}

.form-input[b-zl4rz36plv]::placeholder {
    color: var(--text-muted);
}

.form-input:focus[b-zl4rz36plv] {
    border-color: var(--border-accent);
}

.form-input:disabled[b-zl4rz36plv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-input.input-error[b-zl4rz36plv] {
    border-color: rgba(255, 92, 43, 0.5);
}

/* ── Button ── */
.btn-login[b-zl4rz36plv] {
    background: var(--accent-primary);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: 13px 20px;
    box-shadow: 0 4px 20px rgba(255, 92, 43, 0.3);
    transition: all 0.15s;
    width: 100%;
    margin-top: 4px;
}

.btn-login:hover:not(:disabled)[b-zl4rz36plv] {
    background: var(--accent-secondary);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(255, 92, 43, 0.4);
}

.btn-login:disabled[b-zl4rz36plv] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ── Spinner ── */
.btn-spinner[b-zl4rz36plv] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

@@keyframes spin {
    to[b-zl4rz36plv] { transform: rotate(360deg); }
}
/* /Pages/Admin/AdminPageEditor.razor.rz.scp.css */
/* AdminPageEditor.razor.css
   Editor-specific styles only.
   Shared admin utilities (buttons, table, states, toggle) live in stoke.css. */

/* ── Editor form ── */

.editor-form[b-6hoaoh5g9e] {
    max-width: 720px;
}

.slug-preview[b-6hoaoh5g9e] {
    display: flex;
    align-items: center;
    gap: 0;
}

.slug-base[b-6hoaoh5g9e] {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
}

.slug-preview input[b-6hoaoh5g9e] {
    border-radius: 0 8px 8px 0;
    flex: 1;
}

.field-hint[b-6hoaoh5g9e] {
    font-size: 12px;
    color: var(--text-muted);
    margin: 6px 0 0;
}

.form-row[b-6hoaoh5g9e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.toggle-row[b-6hoaoh5g9e] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.toggle-label[b-6hoaoh5g9e] {
    font-size: 14px;
    color: var(--text-secondary);
}

.form-actions[b-6hoaoh5g9e] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 8px;
}

/* ── Sections panel ── */

.sections-panel[b-6hoaoh5g9e] {
    margin-top: 48px;
    max-width: 100%;
}

.sections-panel-header[b-6hoaoh5g9e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.sections-panel-title[b-6hoaoh5g9e] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sections-count[b-6hoaoh5g9e] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 2px 10px;
}

/* ── Add section form ── */

.add-section-form[b-6hoaoh5g9e] {
    background: var(--bg-card);
    border: 1px solid var(--border-accent);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.add-section-row[b-6hoaoh5g9e] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.add-section-label[b-6hoaoh5g9e] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.add-section-select[b-6hoaoh5g9e] {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-family);
    padding: 7px 12px;
    outline: none;
    transition: border-color 0.2s;
    cursor: pointer;
    min-width: 240px;
}

.add-section-select:focus[b-6hoaoh5g9e] {
    border-color: var(--border-accent);
}

/* Per-mode explainer beneath the dropdown — flips copy as Dan changes type.
   Sits inside .add-section-form so it inherits the accent border framing. */
.add-section-explainer[b-6hoaoh5g9e] {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.add-section-explainer strong[b-6hoaoh5g9e] {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── Section table columns ── */

.col-sort[b-6hoaoh5g9e] {
    width: 48px;
    color: var(--text-muted);
    font-size: 13px;
}

.col-type[b-6hoaoh5g9e] {
    font-size: 14px;
    color: var(--text-primary);
}

.col-actions[b-6hoaoh5g9e] {
    width: 220px;
    text-align: right;
    white-space: nowrap;
}

/* Inline badge on the section type cell — marks RawHtml rows at a glance.
   The </> glyph reads instantly as "code" without needing a legend. */
.section-mode-badge[b-6hoaoh5g9e] {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 8px;
    border-radius: 4px;
    background: rgba(255, 92, 43, 0.12);
    border: 1px solid var(--border-accent);
    color: var(--accent-primary);
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* ── Reorder buttons ── */

.reorder-btns[b-6hoaoh5g9e] {
    display: inline-flex;
    gap: 2px;
    margin-right: 8px;
}

/* Square icon button — used for ↑ ↓ */
.btn-icon[b-6hoaoh5g9e] {
    width: 28px !important;
    padding: 4px !important;
    text-align: center;
    justify-content: center;
}

/* ── Inline delete confirm ── */

.confirm-label[b-6hoaoh5g9e] {
    font-size: 12px;
    color: var(--text-secondary);
    margin-right: 8px;
}

.row-confirm-delete td[b-6hoaoh5g9e] {
    background: rgba(255, 92, 43, 0.04);
}

.row-editing td[b-6hoaoh5g9e] {
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid var(--accent-primary);
}

/* RawHtml rows get a faint accent tint so Dan can see at a glance which
   sections on a page are custom HTML vs structured. The .row-editing
   left border still wins visually when both classes apply. */
.row-rawhtml td[b-6hoaoh5g9e] {
    background: rgba(255, 92, 43, 0.025);
}

/* ── Edit panel — outside the table, full width ── */

.edit-panel[b-6hoaoh5g9e] {
    margin-top: 2px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-accent);
    border-radius: 0 0 10px 10px;
    padding: 20px 24px 24px;
}

.edit-panel-header[b-6hoaoh5g9e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.edit-panel-label[b-6hoaoh5g9e] {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.edit-panel-label strong[b-6hoaoh5g9e] {
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.edit-panel-textarea[b-6hoaoh5g9e] {
    width: 100%;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.65;
    resize: vertical;
    min-height: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 14px 16px;
    outline: none;
    transition: border-color 0.2s;
}

.edit-panel-textarea:focus[b-6hoaoh5g9e] {
    border-color: var(--border-accent);
}

.edit-panel-actions[b-6hoaoh5g9e] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
}
/* /Pages/Admin/AdminPages.razor.rz.scp.css */
/* AdminPages.razor.css
   Page-specific styles only.
   All shared admin utilities (buttons, table, states, toggle, badges, modal)
   now live in stoke.css as global styles. */

/* ── Column widths specific to the pages list table ── */
.col-title[b-8dfjq7u0ae] { font-weight: 500; }

.col-slug[b-8dfjq7u0ae] {
    color: var(--text-secondary);
    font-family: monospace;
    font-size: 13px;
}

.col-date[b-8dfjq7u0ae] {
    color: var(--text-secondary);
    white-space: nowrap;
}

.col-actions[b-8dfjq7u0ae] {
    text-align: right;
    white-space: nowrap;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}
/* /Pages/Admin/AdminSandbox.razor.rz.scp.css */
/* ============================================
   FILE: Web/Pages/Admin/AdminSandbox.razor.css
   PURPOSE: Scoped styles for AdminSandbox page
   PROJECT: StokeMarketing.Web — SB-1

   LAYOUT NOTES:
   - Iframe wrapper uses position: fixed to break out of .admin-main padding.
   - left: 240px matches AdminLayout sidebar width (.admin-sidebar).
   - On mobile (<=768px) the sidebar becomes a top bar (per AdminLayout.razor.css
     responsive rules), so the iframe wrapper switches to left: 0.
   - z-index: 50 sits BELOW the sidebar's z-index: 100, so sidebar remains
     accessible — but since left:240px starts at sidebar's right edge, there
     is no overlap anyway.
   ============================================ */

/* ── ENTRY FORM STATE ─────────────────────────────────────────────────────── */

.sandbox-form-wrapper[b-9416sko7jg] {
    max-width: 720px;
}

.sandbox-form[b-9416sko7jg] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
}

.sandbox-form-field[b-9416sko7jg] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sandbox-form-label[b-9416sko7jg] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.sandbox-form-input[b-9416sko7jg] {
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s;
    width: 100%;
}

.sandbox-form-input:focus[b-9416sko7jg] {
    outline: none;
    border-color: var(--border-accent);
}

/* ── ERROR STATE ──────────────────────────────────────────────────────────── */

.sandbox-error[b-9416sko7jg] {
    background: rgba(248, 113, 113, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.30);
    color: #f87171;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}

/* ── WHITELIST DISPLAY ────────────────────────────────────────────────────── */

.sandbox-whitelist[b-9416sko7jg] {
    margin-top: 24px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.sandbox-whitelist-label[b-9416sko7jg] {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.sandbox-whitelist-list[b-9416sko7jg] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sandbox-whitelist-list code[b-9416sko7jg] {
    background: var(--bg-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    display: inline-block;
}

.sandbox-empty-whitelist[b-9416sko7jg] {
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--accent-subtle);
    border: 1px solid var(--border-accent);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.sandbox-empty-whitelist code[b-9416sko7jg] {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
}

/* ── IFRAME STATE (full-bleed within admin content area) ──────────────────── */

.sandbox-iframe-wrapper[b-9416sko7jg] {
    position: fixed;
    top: 0;
    left: 240px;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    z-index: 50;
}

.sandbox-iframe[b-9416sko7jg] {
    flex: 1;
    width: 100%;
    border: 0;
    background: #ffffff;
}

/* ── BOTTOM STRIP ─────────────────────────────────────────────────────────── */

.sandbox-strip[b-9416sko7jg] {
    height: 40px;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.sandbox-strip-back[b-9416sko7jg],
.sandbox-strip-link[b-9416sko7jg] {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
}

.sandbox-strip-back:hover[b-9416sko7jg],
.sandbox-strip-link:hover[b-9416sko7jg] {
    color: var(--accent-primary);
}

.sandbox-strip-brand[b-9416sko7jg] {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    flex: 1;
}

/* ── MOBILE — sidebar collapses to top bar; iframe takes full width ───────── */

@media (max-width: 768px) {
    .sandbox-iframe-wrapper[b-9416sko7jg] {
        left: 0;
    }

    .sandbox-form[b-9416sko7jg] {
        flex-direction: column;
        align-items: stretch;
    }

    .sandbox-strip[b-9416sko7jg] {
        padding: 0 12px;
        gap: 8px;
    }

    .sandbox-strip-brand[b-9416sko7jg] {
        display: none;
    }
}
/* /Pages/Admin/AdminSettings.razor.rz.scp.css */
/* ============================================
   FILE: Web/Pages/Admin/AdminSettings.razor.css
   PURPOSE: Settings page group layout
   PROJECT: StokeMarketing.Web — SM-8b
   ============================================ */

.settings-group[b-avscm6abq1] {
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--border);
}

.settings-group:last-of-type[b-avscm6abq1] {
    border-bottom: none;
    margin-bottom: 0;
}

.settings-group-label[b-avscm6abq1] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.admin-form-title[b-avscm6abq1] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
}
/* /Pages/Contact.razor.rz.scp.css */
/* ── Two-column form row ── */
.form-row-two[b-jq9uem0f7a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .form-row-two[b-jq9uem0f7a] {
        grid-template-columns: 1fr;
    }
}

/* ── Full-width button ── */
.btn-full[b-jq9uem0f7a] {
    width: 100%;
    justify-content: center;
}

/* ── Required field indicator ── */
.required[b-jq9uem0f7a] {
    color: var(--accent-primary);
}

/* ── Success state ── */
.contact-success[b-jq9uem0f7a] {
    text-align: center;
    padding: 48px 0;
}

.success-icon-large[b-jq9uem0f7a] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 92, 43, 0.12);
    border: 1px solid var(--border-accent);
    color: var(--accent-primary);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* ── Calendly placeholder ── */
.calendly-placeholder[b-jq9uem0f7a] {
    min-height: 120px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

/* ── Input error state ── */
.input-error[b-jq9uem0f7a] {
    border-color: var(--border-accent) !important;
}

/* ── Form actions ── */
.form-actions[b-jq9uem0f7a] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ── CONTACT TWO-COLUMN LAYOUT ───────────────────────────────────────────── */
.contact-layout[b-jq9uem0f7a] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: start;
}

@media (min-width: 900px) {
    .contact-layout[b-jq9uem0f7a] {
        grid-template-columns: 1.4fr 1fr;
    }
}

/* ── CONTACT DETAILS CARD ────────────────────────────────────────────────── */
.contact-details-card[b-jq9uem0f7a] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 36px;
    margin-top: 80px;
}

@media (max-width: 899px) {
    .contact-details-card[b-jq9uem0f7a] {
        margin-top: 0;
    }
}

.contact-detail-item[b-jq9uem0f7a] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.contact-detail-item:last-of-type[b-jq9uem0f7a] {
    border-bottom: none;
}

.contact-detail-icon[b-jq9uem0f7a] {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-detail-label[b-jq9uem0f7a] {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 4px 0;
}

.contact-detail-value[b-jq9uem0f7a] {
    font-size: 15px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

a.contact-detail-value:hover[b-jq9uem0f7a] {
    color: var(--accent-primary);
}

/* ── ROI GUARANTEE CALLOUT ───────────────────────────────────────────────── */
.contact-guarantee[b-jq9uem0f7a] {
    background: var(--accent-subtle);
    border: 1px solid var(--border-accent);
    border-radius: 10px;
    padding: 16px 20px;
    text-align: center;
}

.contact-guarantee p[b-jq9uem0f7a] {
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-secondary);
    margin: 0;
}

/* ── ASSESSMENT FEATURE LIST ─────────────────────────────────────────────── */
.assessment-what-you-get[b-jq9uem0f7a] {
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 36px;
}

.assessment-features[b-jq9uem0f7a] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.assessment-feature[b-jq9uem0f7a] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.assessment-feature-number[b-jq9uem0f7a] {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--accent-primary);
    flex-shrink: 0;
    margin-top: 2px;
    min-width: 24px;
}

.assessment-feature strong[b-jq9uem0f7a] {
    display: block;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.assessment-feature p[b-jq9uem0f7a] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}
/* /Pages/ResourceDetail.razor.rz.scp.css */
/* ============================================
   FILE: Pages/ResourceDetail.razor.css
   PURPOSE: Single blog post styles — /resources/{slug}
   PROJECT: StokeMarketing.Web — SM-7c
   ============================================ */

/* ── Header ── */
.post-back[b-53hndt0gw2] {
    display: inline-block;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 32px;
    transition: color var(--transition-fast);
}

.post-back:hover[b-53hndt0gw2] {
    color: var(--accent-primary);
}

.post-meta[b-53hndt0gw2] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.post-title[b-53hndt0gw2] {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 20px;
    max-width: 820px;
}

.post-excerpt[b-53hndt0gw2] {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 700px;
    margin-bottom: 24px;
}

.post-byline[b-53hndt0gw2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-muted);
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 48px;
}

.post-author[b-53hndt0gw2] {
    color: var(--text-secondary);
    font-weight: 500;
}

/* ── Body — rendered markdown ── */
.post-body[b-53hndt0gw2] {
    max-width: 740px;
    font-size: 17px;
    line-height: 1.85;
    color: var(--text-secondary);
    margin-bottom: 64px;
}

.post-body h1[b-53hndt0gw2],
.post-body h2[b-53hndt0gw2],
.post-body h3[b-53hndt0gw2],
.post-body h4[b-53hndt0gw2] {
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 40px 0 16px;
}

.post-body h1[b-53hndt0gw2] { font-size: 32px; }
.post-body h2[b-53hndt0gw2] { font-size: 26px; }
.post-body h3[b-53hndt0gw2] { font-size: 21px; }
.post-body h4[b-53hndt0gw2] { font-size: 18px; }

.post-body p[b-53hndt0gw2] {
    margin-bottom: 20px;
}

.post-body a[b-53hndt0gw2] {
    color: var(--accent-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.post-body a:hover[b-53hndt0gw2] {
    color: var(--accent-secondary);
}

.post-body strong[b-53hndt0gw2] {
    color: var(--text-primary);
    font-weight: 600;
}

.post-body ul[b-53hndt0gw2],
.post-body ol[b-53hndt0gw2] {
    margin: 0 0 20px 28px;
}

.post-body li[b-53hndt0gw2] {
    margin-bottom: 8px;
    line-height: 1.7;
}

.post-body blockquote[b-53hndt0gw2] {
    border-left: 3px solid var(--accent-primary);
    margin: 28px 0;
    padding: 12px 20px;
    background: var(--accent-subtle);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    font-style: italic;
}

.post-body code[b-53hndt0gw2] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    background: var(--bg-secondary);
    padding: 2px 7px;
    border-radius: 4px;
    color: var(--accent-secondary);
}

.post-body pre[b-53hndt0gw2] {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    overflow-x: auto;
    margin-bottom: 24px;
}

.post-body pre code[b-53hndt0gw2] {
    background: transparent;
    padding: 0;
    color: var(--text-primary);
    font-size: 14px;
}

.post-body hr[b-53hndt0gw2] {
    border: none;
    border-top: 1px solid var(--border);
    margin: 40px 0;
}

.post-body img[b-53hndt0gw2] {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: 24px 0;
}

/* ── Footer ── */
.post-footer[b-53hndt0gw2] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
/* /Pages/Resources.razor.rz.scp.css */
/* ============================================
   FILE: Pages/Resources.razor.css
   PURPOSE: Blog index page styles — /resources
   PROJECT: StokeMarketing.Web — SM-7c
   ============================================ */

.resources-header[b-i4o94j4s8e] {
    margin-bottom: 64px;
}

.resources-loading[b-i4o94j4s8e],
.resources-empty[b-i4o94j4s8e] {
    padding: 48px 0;
    color: var(--text-muted);
    font-size: 15px;
}

/* ── Post grid ── */
.resources-grid[b-i4o94j4s8e] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ── Post card ── */
.resource-card[b-i4o94j4s8e] {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-med), transform var(--transition-med), box-shadow var(--transition-med);
}

.resource-card:hover[b-i4o94j4s8e] {
    border-color: var(--border-accent);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    color: inherit;
}

.resource-card-meta[b-i4o94j4s8e] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.resource-tag[b-i4o94j4s8e] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-primary);
    background: var(--accent-subtle);
    border: 1px solid var(--border-accent);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

.resource-date[b-i4o94j4s8e] {
    font-size: 13px;
    color: var(--text-muted);
}

.resource-card-title[b-i4o94j4s8e] {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.resource-card-excerpt[b-i4o94j4s8e] {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    flex: 1;
    margin-bottom: 24px;
}

.resource-card-footer[b-i4o94j4s8e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.resource-author[b-i4o94j4s8e] {
    color: var(--text-muted);
}

.resource-read-more[b-i4o94j4s8e] {
    color: var(--accent-primary);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.resource-card:hover .resource-read-more[b-i4o94j4s8e] {
    color: var(--accent-secondary);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .resources-grid[b-i4o94j4s8e] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .resources-grid[b-i4o94j4s8e] {
        grid-template-columns: 1fr;
    }
}