wp-bootstrap/src/scss/_custom.scss

// Custom theme styles
// Add theme-specific styles here that go beyond Bootstrap defaults

// Dark mode toggle button
.wp-bootstrap-dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.375rem;
    color: currentColor;
    line-height: 1;
    transition: opacity 0.15s ease-in-out;

    &:hover {
        opacity: 0.75;
    }

    &:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
        border-radius: 0.25rem;
    }
}

// Transparent header variant
.header-transparent {
    position: absolute;
    width: 100%;
    z-index: $zindex-fixed;

    .navbar {
        background: transparent !important;
    }
}

// Force Bootstrap dark mode body colors past any WordPress global styles.
// WordPress may output body { background-color: ...; color: ...; } via
// global-styles that overrides Bootstrap's variable-based body styling.
html[data-bs-theme="dark"] body {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

// Dark mode for all form elements — catches plugin-generated controls
// that lack Bootstrap's .form-select / .form-control classes.
[data-bs-theme="dark"] {
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
    textarea {
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
        border-color: var(--bs-border-color);
    }

    .offcanvas {
        --bs-offcanvas-bg: var(--bs-body-bg);
    }
}

// Dark mode overrides for block styles with hardcoded colors
[data-bs-theme="dark"] {
    .is-style-alert-info {
        background-color: #032830;
        border-color: #055160;
        color: #6edff6;
    }

    .is-style-alert-success {
        background-color: #051b11;
        border-color: #0a3622;
        color: #75b798;
    }

    .is-style-alert-warning {
        background-color: #332701;
        border-color: #664d03;
        color: #ffda6a;
    }

    .is-style-alert-danger {
        background-color: #2c0b0e;
        border-color: #58151c;
        color: #ea868f;
    }

    .is-style-card,
    .is-style-card-shadow {
        border-color: $gray-600;
        background: var(--bs-body-bg);
    }
}

// Skip link (accessibility)
.wp-bootstrap-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: $zindex-fixed + 10;
    padding: 0.5rem 1rem;
    background: var(--bs-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;

    &:focus {
        top: 0;
    }
}

// Post featured image
.post-thumbnail {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

// Card thumbnail
.card-thumbnail {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

// Sidebar heading
.sidebar-heading {
    letter-spacing: 1.6px;
}

// Hero overlay
.hero-overlay {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.3;
}