// 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;
    }
}

// Offcanvas navigation dark mode compatibility
[data-bs-theme="dark"] {
    .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);
    }
}