/* Site-specific styles layered on top of Ignite's generated CSS. */

/* Bootstrap keys .navbar-toggler-icon off data-bs-theme="dark", but Ignite
   stores its own theme ID in that attribute, so neither variant ever applies
   and the mobile hamburger renders as an empty box. Supply both variants,
   matching dark themes by substring. */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33, 37, 41, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme*="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Softer card corners, echoing the apps' rounded aesthetic. */
.card {
    border-radius: 12px;
}

/* Design pass ported from the personal site, adapted to theme variables:
   accents use --bs-primary so they follow the flame accent site-wide and
   re-tint automatically inside the per-app scopes below. */

/* Readable column for text-heavy pages (privacy, contact): the page wraps
   its content in class="prose". Marketing pages keep their full width. */
.prose {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}

/* Section headings carry a small accent bar. Accordion headers are also
   h2s and are excluded. */
.ig-main-content h2:not(.accordion-header) {
    position: relative;
    padding-bottom: 0.4rem;
    margin-top: 1rem;
}

.ig-main-content h2:not(.accordion-header)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.25rem;
    height: 3px;
    background: var(--bs-primary);
    border-radius: 2px;
}

/* Pull-quote: italic with an accent rule. */
blockquote {
    border-left: 4px solid var(--bs-primary);
    padding: 0.25rem 0 0.25rem 1.25rem;
    font-style: italic;
}

/* Slightly lowered underlines read cleaner. */
a { text-underline-offset: 0.2em; }

/* Section dividers: thin, quiet rules. */
.ig-main-content hr {
    margin: 2.5rem 0;
    opacity: 0.15;
}

/* Inline code: soft accent-tinted pill. */
code {
    padding: 0.15em 0.4em;
    border-radius: 0.35rem;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-link-color);
}

/* Code blocks: rounded bordered cards; inner code resets the pill. */
pre {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.6rem;
    padding: 1rem 1.25rem;
    overflow-x: auto;
}

pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* Per-app accent scopes. The site-wide theme is the Semper Phoenix flame;
   each app page wraps its content in a theme class that re-tints links and
   primary-accent components (e.g. the FAQ accordion) to the app's brand.
   Dark selectors match by substring, since Ignite stores its own theme ID
   (not "dark") in data-bs-theme. */
.theme-whatsdue {
    --bs-primary: #6B46C1;
    --bs-primary-rgb: 107, 70, 193;
    --bs-primary-text-emphasis: #2E1E56;
    --bs-primary-bg-subtle: #E8E1F7;
    --bs-primary-border-subtle: #C3AEE8;
    --bs-link-color: #6B46C1;
    --bs-link-color-rgb: 107, 70, 193;
    --bs-link-hover-color: #55379E;
    --bs-link-hover-color-rgb: 85, 55, 158;
}

[data-bs-theme*="dark"] .theme-whatsdue {
    --bs-primary: #A78BFA;
    --bs-primary-rgb: 167, 139, 250;
    --bs-primary-text-emphasis: #D6C7FC;
    --bs-primary-bg-subtle: #2A2140;
    --bs-primary-border-subtle: #4C3B78;
    --bs-link-color: #A78BFA;
    --bs-link-color-rgb: 167, 139, 250;
    --bs-link-hover-color: #C4B5FD;
    --bs-link-hover-color-rgb: 196, 181, 253;
}

.theme-justhangman {
    --bs-primary: #3454C0;
    --bs-primary-rgb: 52, 84, 192;
    --bs-primary-text-emphasis: #18245C;
    --bs-primary-bg-subtle: #E2E8F8;
    --bs-primary-border-subtle: #B4C3EE;
    --bs-link-color: #3454C0;
    --bs-link-color-rgb: 52, 84, 192;
    --bs-link-hover-color: #27409A;
    --bs-link-hover-color-rgb: 39, 64, 154;
}

[data-bs-theme*="dark"] .theme-justhangman {
    --bs-primary: #7E9BF7;
    --bs-primary-rgb: 126, 155, 247;
    --bs-primary-text-emphasis: #C4D2FB;
    --bs-primary-bg-subtle: #1E2740;
    --bs-primary-border-subtle: #3A4C82;
    --bs-link-color: #7E9BF7;
    --bs-link-color-rgb: 126, 155, 247;
    --bs-link-hover-color: #A9BCFA;
    --bs-link-hover-color-rgb: 169, 188, 250;
}

.theme-smaq {
    --bs-primary: #005FBF;
    --bs-primary-rgb: 0, 95, 191;
    --bs-primary-text-emphasis: #003166;
    --bs-primary-bg-subtle: #D9E9F9;
    --bs-primary-border-subtle: #99C4EC;
    --bs-link-color: #005FBF;
    --bs-link-color-rgb: 0, 95, 191;
    --bs-link-hover-color: #00478F;
    --bs-link-hover-color-rgb: 0, 71, 143;
}

[data-bs-theme*="dark"] .theme-smaq {
    --bs-primary: #4DA3FF;
    --bs-primary-rgb: 77, 163, 255;
    --bs-primary-text-emphasis: #B3D7FF;
    --bs-primary-bg-subtle: #12283F;
    --bs-primary-border-subtle: #2A567F;
    --bs-link-color: #4DA3FF;
    --bs-link-color-rgb: 77, 163, 255;
    --bs-link-hover-color: #80BDFF;
    --bs-link-hover-color-rgb: 128, 189, 255;
}

/* On small screens, screenshot grids become horizontal swipe strips with
   snap points instead of a long vertical stack. Desktop keeps the grid. */
@media (max-width: 767.98px) {
    .screenshot-strip .row {
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .screenshot-strip .row::-webkit-scrollbar {
        display: none;
    }

    .screenshot-strip .row > * {
        flex: 0 0 75%;
        scroll-snap-align: start;
    }
}