/* =================================================================
   RAXE - Section System
   Reusable section backgrounds, transitions, and dark/light patterns.
   Loaded globally via base.html.
   ================================================================= */

/* ===== SECTION BACKGROUNDS ===== */

/* Dark section (navy) - for heroes and emphasis blocks */
.section-dark {
    background: var(--bg-dark);
    color: var(--text-on-dark);
    position: relative;
}

.section-dark .section-title {
    color: var(--text-on-dark);
}

.section-dark .section-subtitle {
    color: var(--text-on-dark-muted);
}

/* Light section (white) - primary content */
.section-light {
    background: var(--bg-primary);
}

/* Alternate light section (off-white) - visual rhythm */
.section-alt {
    background: var(--bg-secondary);
}

/* ===== SECTION TRANSITIONS ===== */
/*
   Gradient accent line (3px, cyan→magenta) between dark and light sections.
   Opt-in via .section-gradient-top — add to any section to get the line.
   Consistent with the footer's top gradient line.
*/

.section-gradient-top {
    position: relative;
}

.section-gradient-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-magenta));
    z-index: 1;
}

/* ===== DARK SECTION CONTENT HELPERS ===== */

/* Cards inside dark sections */
.section-dark .card {
    background: var(--bg-dark-card);
    border-color: var(--border-dark-subtle);
}

/* Trust badges in dark sections */
.section-dark .trust-badge {
    background: rgba(255,255,255,0.08);
    color: var(--text-on-dark-muted);
}

/* Install box in dark sections */
.section-dark .install-box {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
}

/* ===== SECTION SPACING ===== */

.section-padded {
    padding: var(--space-3xl) 0;
}

.section-padded-sm {
    padding: var(--space-2xl) 0;
}