/* ============================================================
   NICHE PAGE — Shared design system for enriched province x niche pages
   Prefix: np-
   Typography: DM Serif Display (headings) + DM Sans (body)
   Pattern: dark gradient hero, stats strip, editorial sections

   Usage: Set CSS variables in a page-level <style> block:
     --np-gradient, --np-glow, --np-accent, --np-accent-light,
     --np-secondary, --np-secondary-light
   ============================================================ */

/* ===== BASE ===== */
html { overflow-x: hidden; }

body.np-body {
    font-family: 'DM Sans', sans-serif;
    color: #1e293b;
    background: #f8fafc;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* ===== HERO ===== */
.np-hero {
    background: var(--np-gradient, linear-gradient(160deg, #0f172a 0%, #1e293b 40%, #1e40af 100%));
    padding: calc(72px + 56px) 24px 88px;
    position: relative;
    overflow: hidden;
}

.np-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--np-glow, radial-gradient(ellipse at 25% 40%, rgba(37,99,235,.15) 0%, transparent 50%), radial-gradient(ellipse at 75% 70%, rgba(180,83,9,.08) 0%, transparent 45%));
    pointer-events: none;
    animation: np-glow-pulse 10s ease-in-out infinite alternate;
}

@keyframes np-glow-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.np-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h48v48H0z' fill='none'/%3E%3Cpath d='M48 0v48M0 0v48M0 0h48M0 48h48' stroke='%23fff' stroke-width='.5'/%3E%3C/svg%3E");
    background-size: 48px 48px;
    pointer-events: none;
}

.np-hero-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Breadcrumb */
.np-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,.5);
    margin-bottom: 1.5rem;
}
.np-breadcrumb a {
    color: rgba(255,255,255,.6);
    text-decoration: none;
    transition: color 0.2s;
}
.np-breadcrumb a:hover { color: rgba(255,255,255,.9); }

/* Tag badge */
.np-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--np-accent-light, #93c5fd);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 0.35rem 1rem;
    margin-bottom: 1.25rem;
}
.np-hero-tag-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--np-accent, #3b82f6);
    animation: np-dot-pulse 2s ease-in-out infinite;
}
@keyframes np-dot-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Heading */
.np-hero h1 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 400;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 1rem;
}
.np-hero h1 em {
    font-style: italic;
    color: var(--np-accent-light, #93c5fd);
}

.np-hero-sub {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255,255,255,.75);
    max-width: 640px;
    margin: 0 0 1.5rem;
}

/* Hero CTAs */
.np-hero-ctas {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.np-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: #fff;
    background: var(--np-accent, #2563eb);
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    transition: all 0.2s;
}
.np-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.np-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    transition: all 0.2s;
}
.np-btn-secondary:hover {
    background: rgba(255,255,255,.14);
    color: #fff;
}

/* ===== STATS STRIP ===== */
.np-stats {
    max-width: 800px;
    margin: -48px auto 2.5rem;
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    box-shadow: 0 12px 48px rgba(0,0,0,.08);
    position: relative;
    z-index: 10;
}
.np-stat { text-align: center; }
.np-stat-num {
    font-family: 'DM Serif Display', serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0.3rem;
}
.np-stat-num.accent { color: var(--np-accent, #2563eb); }
.np-stat-num.secondary { color: var(--np-secondary, #b45309); }
.np-stat-num.green { color: #059669; }
.np-stat-num.slate { color: #475569; }
.np-stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== CONTENT AREA ===== */
.np-content {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px 3rem;
}

/* Section cards */
.np-section {
    background: #fff;
    border-radius: 14px;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.np-section h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #0f172a;
    margin: 0 0 1rem;
}

.np-section h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    margin: 1.25rem 0 0.4rem;
}

.np-section p {
    color: #334155;
    line-height: 1.7;
    margin: 0 0 0.75rem;
}

.np-section a {
    color: var(--np-accent, #2563eb);
    text-decoration: none;
    font-weight: 500;
}
.np-section a:hover { text-decoration: underline; }

/* Comparison tables */
.np-section table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.92rem;
}
.np-section thead tr {
    background: #f8fafc;
    text-align: left;
}
.np-section th {
    padding: 0.65rem 0.85rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #e2e8f0;
}
.np-section td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}
.np-section tbody tr:hover { background: #f8fafc; }
.np-section table a { font-weight: 600; }

/* FAQ items */
.np-faq-item {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}
.np-faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Ordered lists (How to Apply) */
.np-section ol {
    padding-left: 1.25rem;
    color: #334155;
}
.np-section ol li {
    margin-bottom: 0.75rem;
    line-height: 1.7;
}
.np-section ol li strong {
    color: #0f172a;
}

/* Grant cards grid (existing content, re-styled) */
.np-programs-heading {
    font-family: 'DM Serif Display', serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #0f172a;
    margin: 0 0 1.25rem;
}

.np-grant-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

.np-grant-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
    transition: box-shadow 0.2s, transform 0.2s;
}
.np-grant-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    transform: translateY(-1px);
}

.np-grant-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.np-amount {
    color: #059669;
    font-weight: 700;
    font-size: 0.95rem;
}

.np-tag {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    margin: 0.5rem 0.4rem 0 0;
}

/* Related links */
.np-related {
    background: #f0f7ff;
    border-radius: 14px;
    padding: 1.75rem 2rem;
    margin-top: 2rem;
}
.np-related h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0 0 1rem;
    color: #0f172a;
}
.np-related a {
    color: var(--np-accent, #2563eb);
    text-decoration: none;
    font-weight: 500;
    margin-right: 1.5rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.np-related a:hover { text-decoration: underline; }

/* Email capture */
.np-email-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0ecff 100%);
    border-radius: 14px;
    padding: 1.75rem 2rem;
    margin: 2rem 0;
    text-align: center;
}

/* ===== OLD TEMPLATE COMPAT =====
   These rules restyle old class names from the generic template
   so pages work without renaming every grant card element. */

/* Override old body max-width and padding (was constrained to 1200px) */
.np-body { max-width: none; padding: 0; }

/* Old grant cards */
.np-content .grant-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}
.np-content .grant-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
    transition: box-shadow 0.2s, transform 0.2s;
}
.np-content .grant-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    transform: translateY(-1px);
}
.np-content .grant-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}
.np-content .amount {
    color: #059669;
    font-weight: 700;
    font-size: 0.95rem;
}
.np-content .tag {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    margin: 0.5rem 0.4rem 0 0;
}
.np-content .cta-button {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    background: var(--np-accent, #2563eb);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    margin-top: 0.75rem;
    transition: all 0.2s;
}
.np-content .cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Old editorial sections (enrichment used inline styles) */
.np-content section[id] {
    background: #fff;
    border-radius: 14px;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.np-content section[id] h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #0f172a;
    margin-top: 0;
}
.np-content section[id] h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
}
.np-content section[id] p {
    color: #334155;
    line-height: 1.7;
}
.np-content section[id] a {
    color: var(--np-accent, #2563eb);
    text-decoration: none;
    font-weight: 500;
}
.np-content section[id] a:hover { text-decoration: underline; }
.np-content section[id] table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.92rem;
}
.np-content section[id] thead tr { background: #f8fafc; text-align: left; }
.np-content section[id] th {
    padding: 0.65rem 0.85rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #e2e8f0;
}
.np-content section[id] td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}
.np-content section[id] tbody tr:hover { background: #f8fafc; }
.np-content section[id] table a { font-weight: 600; }
.np-content section[id] ol { padding-left: 1.25rem; color: #334155; }
.np-content section[id] ol li { margin-bottom: 0.75rem; line-height: 1.7; }
.np-content section[id] ol li strong { color: #0f172a; }

/* Old related links */
.np-content .related-links {
    background: #f0f7ff;
    border-radius: 14px;
    padding: 1.75rem 2rem;
    margin-top: 2rem;
}
.np-content .related-links h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 0;
    color: #0f172a;
}
.np-content .related-links a {
    color: var(--np-accent, #2563eb);
    text-decoration: none;
    font-weight: 500;
    margin-right: 1.5rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.np-content .related-links a:hover { text-decoration: underline; }

/* Old intro section */
.np-content .intro-section {
    background: #fff;
    border-radius: 14px;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ===== VERDICT BAR THEME ===== */
.np-body {
    --verdict-cta-bg: var(--np-accent, #2563eb);
    --verdict-cta-color: #fff;
}

/* ===== SCROLL SPY THEME ===== */
.np-body {
    --spy-active: var(--np-accent, #2563eb);
    --spy-muted: #94a3b8;
    --spy-bg: #f8fafc;
    --spy-line: rgba(0,0,0,0.06);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .np-hero {
        padding: calc(56px + 40px) 20px 64px;
    }
    .np-hero h1 {
        font-size: 1.7rem;
    }
    .np-stats {
        flex-wrap: wrap;
        padding: 1.25rem 1rem;
        margin: -32px 16px 2rem;
        gap: 0.5rem;
    }
    .np-stat { flex: 1 1 40%; }
    .np-stat-num { font-size: 1.4rem; }
    .np-content {
        padding: 0 16px 2rem;
    }
    .np-section {
        padding: 1.5rem;
        border-radius: 10px;
    }
    .np-section table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .np-hero-ctas {
        flex-direction: column;
    }
    .np-btn-primary, .np-btn-secondary {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .np-stat { flex: 1 1 100%; }
    .np-stats { flex-direction: column; align-items: center; }
}