/*!
 * Stirhits — dark theme overrides
 *
 * Layered on top of the compiled New Age theme (styles.css), which ships light-only.
 * Loaded after styles.css so these rules win on equal specificity; !important is used
 * only against Bootstrap utilities that are themselves !important.
 */

:root {
    --sh-bg: #0b0d12;
    --sh-surface: #10131a;
    --sh-surface-raised: #161a24;
    --sh-border: #262c3a;
    --sh-text: #e6e8ee;
    --sh-text-muted: #99a1b3;
    --sh-primary: #5b6bff;
    --sh-secondary: #c04bff;

    color-scheme: dark;
}

body {
    background-color: var(--sh-bg);
    color: var(--sh-text);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--sh-text);
}

/* Bootstrap sets .text-muted with !important, so match it. */
.text-muted {
    color: var(--sh-text-muted) !important;
}

/* Brand gradient: the stock #2937f0 -> #9f1ae2 is too dark to read against a dark
   background, so lift both stops where the gradient paints text or vector marks. */
.text-gradient {
    background: -webkit-linear-gradient(var(--sh-primary), var(--sh-secondary));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.masthead .masthead-device-mockup .circle .gradient-start-color,
.features-device-mockup .circle .gradient-start-color {
    stop-color: var(--sh-primary);
}

.masthead .masthead-device-mockup .circle .gradient-end-color,
.features-device-mockup .circle .gradient-end-color {
    stop-color: var(--sh-secondary);
}

.masthead .masthead-device-mockup .shape-1,
.masthead .masthead-device-mockup .shape-2,
.features-device-mockup .shape-1,
.features-device-mockup .shape-2 {
    fill: var(--sh-primary);
}

/* The gradient fill stays as-is: it already carries white text at good contrast. */

/* Navigation */
#mainNav {
    background-color: var(--sh-surface);
    border-bottom: 1px solid var(--sh-border);
}

#mainNav .navbar-brand {
    color: var(--sh-text);
}

#mainNav .navbar-brand:hover,
#mainNav .navbar-brand:active {
    color: var(--sh-primary);
}

#mainNav .navbar-toggler {
    color: var(--sh-text);
    border-color: var(--sh-border);
}

#mainNav .navbar-nav .nav-item .nav-link {
    color: var(--sh-text);
}

#mainNav .navbar-nav .nav-item .nav-link:hover {
    color: var(--sh-text-muted);
}

#mainNav .navbar-nav .nav-item .nav-link.active {
    color: var(--sh-primary);
}

/* Sections */
.masthead {
    background-color: var(--sh-bg);
}

.bg-light {
    background-color: var(--sh-surface) !important;
}

/* Stock CTA pulls a photo from source.unsplash.com, a service Unsplash retired —
   the request fails and leaves a flat scrim. Paint our own backdrop instead. */
section.cta {
    background-image:
        radial-gradient(circle at 20% 20%, rgba(91, 107, 255, 0.35), transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(192, 75, 255, 0.35), transparent 55%),
        linear-gradient(160deg, #0b0d12, #1a1030);
}

section.cta:before {
    background: rgba(0, 0, 0, 0.35);
}

/* Modal */
.modal-content {
    background-color: var(--sh-surface-raised);
    border: 1px solid var(--sh-border);
    color: var(--sh-text);
}

/* Forms */
.form-floating > .form-control,
.form-floating > .form-select {
    background-color: var(--sh-bg);
    border-color: var(--sh-border);
    color: var(--sh-text);
}

.form-floating > .form-control:focus {
    background-color: var(--sh-bg);
    border-color: var(--sh-primary);
    color: var(--sh-text);
    box-shadow: 0 0 0 0.25rem rgba(91, 107, 255, 0.25);
}

.form-floating > .form-control::placeholder {
    color: transparent;
}

.form-floating > label {
    color: var(--sh-text-muted);
}

/* Bootstrap 5.2 paints the floating label's cut-out with an opaque white pseudo-element. */
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background-color: var(--sh-bg);
}

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--sh-primary);
    --bs-btn-border-color: var(--sh-primary);
    --bs-btn-hover-bg: #4655e6;
    --bs-btn-hover-border-color: #4655e6;
    --bs-btn-active-bg: #3b49cc;
    --bs-btn-active-border-color: #3b49cc;
    --bs-btn-disabled-bg: var(--sh-primary);
    --bs-btn-disabled-border-color: var(--sh-primary);
}

/* Accordion — Bootstrap exposes everything as vars, including the chevron, which
   ships as a data-URI SVG with a hardcoded dark fill that vanishes on our background. */
.accordion {
    --bs-accordion-color: var(--sh-text);
    --bs-accordion-bg: var(--sh-surface);
    --bs-accordion-border-color: var(--sh-border);
    --bs-accordion-btn-color: var(--sh-text);
    --bs-accordion-btn-bg: var(--sh-surface);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6e8ee'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235b6bff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-focus-border-color: var(--sh-primary);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(91, 107, 255, 0.25);
    --bs-accordion-active-color: var(--sh-primary);
    --bs-accordion-active-bg: var(--sh-surface-raised);
}

/* Links in the footer scrim */
footer a {
    color: var(--sh-text-muted);
}

footer a:hover {
    color: var(--sh-text);
}