/* Minimal custom styles for Accessibility up to 11! */

/* Essential theme variables only */
:root {
    --bs-navbar-bg: #FAEBD7;
}

/* CSS fallback for immediate dark mode application */
@media (prefers-color-scheme: dark) {
    :root {
        --bs-navbar-bg: #2D2D2D;
        --bs-body-bg: #1A1A1A;
        --bs-border-color: #FAEBD7;
        --bs-primary: #FAEBD7;
        --bs-link-color: #FAEBD7;
    }

    .sticky-bottom {
        background-color: var(--bs-secondary-bg) !important;
        border-top-color: #FAEBD7 !important;
    }

    .navbar {
        border-bottom-color: #FAEBD7 !important;
    }

    .badge {
        color: #333333 !important;
        background-color: #FAEBD7 !important;
    }

    .btn-primary {
        color: #333333 !important;
        background-color: #FAEBD7 !important;
        border-color: #FAEBD7 !important;
    }

    a {
        color: #FAEBD7 !important;
    }

    .nav-link {
        color: #FAEBD7 !important;
    }

    .logo-light {
        display: none;
    }

    .logo-dark {
        display: block;
    }

    /* Additional fixes for elements with inline styles */
    .navbar-brand img {
        border: none !important;
    }

    /* Fix navbar toggler (hamburger menu) for dark mode */
    .navbar-toggler {
        border-color: #FAEBD7 !important;
    }

    .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%28250, 235, 215, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    header nav.navbar {
        border-bottom: 1px solid #FAEBD7 !important;
    }

    .sticky-bottom {
        background-color: var(--bs-secondary-bg) !important;
        border-top: 1px solid #FAEBD7 !important;
    }

    .text-body-secondary {
        color: #FAEBD7 !important;
    }

    .badge {
        background-color: #FAEBD7 !important;
        color: #333333 !important;
    }

    /* Remove borders from app icons in Apps page */
    body[data-current-page="/apps"] img {
        border: none !important;
    }

    /* Fix Social links box background in About page */
    body[data-current-page="/about"] div[style*="background-color: rgb(250 235 215"] {
        background-color: #2D2D2D !important;
        border-color: #FAEBD7 !important;
    }
}


[data-bs-theme="accessibility-up-to11-dark-dark"] {
    --bs-navbar-bg: #2D2D2D;
    --bs-body-bg: #1A1A1A;
    --bs-border-color: #FAEBD7;
    --bs-primary: #FAEBD7;
    --bs-link-color: #FAEBD7;
}

/* Navigation active state accessibility enhancement */
.nav-link.active {
    font-weight: bold !important;
}

/* More Content dropdown active state */
body[data-current-page="/more-content"] .navbar .nav-item.dropdown .dropdown-toggle.nav-link {
    font-weight: bold !important;
}

/* Remove hover effects from tags */
.badge, .tag {
    transition: none !important;
}

/* Dark mode styling for tags and buttons */
[data-bs-theme="accessibility-up-to11-dark-dark"] .badge {
    color: #333333 !important;
    background-color: #FAEBD7 !important;
}

[data-bs-theme="accessibility-up-to11-dark-dark"] .btn-primary {
    color: #333333 !important;
    background-color: #FAEBD7 !important;
    border-color: #FAEBD7 !important;
}

[data-bs-theme="accessibility-up-to11-dark-dark"] .btn-primary:hover {
    color: #333333 !important;
    background-color: #E8D4B7 !important;
    border-color: #E8D4B7 !important;
}

/* Dark mode styling for links */
[data-bs-theme="accessibility-up-to11-dark-dark"] a {
    color: #FAEBD7 !important;
}

[data-bs-theme="accessibility-up-to11-dark-dark"] a:hover {
    color: #E8D4B7 !important;
}

[data-bs-theme="accessibility-up-to11-dark-dark"] .nav-link {
    color: #FAEBD7 !important;
}

[data-bs-theme="accessibility-up-to11-dark-dark"] .nav-link:hover {
    color: #E8D4B7 !important;
}

/* Logo theme switching */
.logo-light {
    display: block;
}

.logo-dark {
    display: none;
}

[data-bs-theme="accessibility-up-to11-dark-dark"] .logo-light {
    display: none;
}

[data-bs-theme="accessibility-up-to11-dark-dark"] .logo-dark {
    display: block;
}

/* Fixed navbar spacing */
body {
    padding-top: 76px;
}

@media (max-width: 576px) {
    body {
        padding-top: 80px;
    }
}

/* Article images centered with proper spacing */
article img,
article p img,
.content img {
    display: block !important;
    margin: 2rem auto !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Ensure consecutive images have proper spacing */
article img + img,
article p img + img,
.content img + img {
    margin-top: 3rem !important;
}

/* Dark mode image styling */
[data-bs-theme="accessibility-up-to11-dark-dark"] article img,
[data-bs-theme="accessibility-up-to11-dark-dark"] article p img,
[data-bs-theme="accessibility-up-to11-dark-dark"] .content img {
    box-shadow: 0 2px 8px rgba(250, 235, 215, 0.1);
}

/* Card header and footer styling - NECESSARY EXCEPTION: Ignite's Card component
   doesn't provide modifiers for header/footer background colors, so we use CSS
   to apply theme-aware backgrounds using Bootstrap's CSS variables */
.card .card-header {
    background-color: var(--bs-secondary-bg) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
}

.card .card-footer {
    background-color: var(--bs-secondary-bg) !important;
    border-top: 1px solid var(--bs-border-color) !important;
}

/* Footer styling for dark theme */
[data-bs-theme="accessibility-up-to11-dark-dark"] .sticky-bottom {
    background-color: var(--bs-secondary-bg) !important;
    border-top: 1px solid var(--bs-border-color) !important;
}

/* Navbar border styling for dark theme */
[data-bs-theme="accessibility-up-to11-dark-dark"] .navbar {
    border-bottom: 1px solid var(--bs-border-color) !important;
}

/* Minimal border fixes for dark mode - using Ignite's CSS variables */
[data-bs-theme="accessibility-up-to11-dark-dark"] .card {
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="accessibility-up-to11-dark-dark"] .card-header {
    border-bottom-color: var(--bs-border-color) !important;
}

[data-bs-theme="accessibility-up-to11-dark-dark"] .card-footer {
    border-top-color: var(--bs-border-color) !important;
}


/* Remove border from logo in navbar */
.navbar-brand img {
    border: none !important;
}

/* Fix navbar toggler (hamburger menu) for dark mode */
[data-bs-theme="accessibility-up-to11-dark-dark"] .navbar-toggler {
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="accessibility-up-to11-dark-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%28250, 235, 215, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

header nav.navbar {
    border-bottom: 1px solid var(--bs-border-color) !important;
}

/* Fix Ignite footer background and border */
[data-bs-theme="accessibility-up-to11-dark-dark"] .sticky-bottom {
    background-color: var(--bs-secondary-bg) !important;
    border-top: 1px solid var(--bs-border-color) !important;
}

/* Make metadata text lighter in Article Preview Cards */
[data-bs-theme="accessibility-up-to11-dark-dark"] .text-body-secondary {
    color: #FAEBD7 !important;
}

/* Remove borders from app icons in Apps page */
[data-bs-theme="accessibility-up-to11-dark-dark"] body[data-current-page="/apps"] img {
    border: none !important;
}

/* Fix Social links box background in About page */
[data-bs-theme="accessibility-up-to11-dark-dark"] body[data-current-page="/about"] div[style*="background-color: rgb(250 235 215"] {
    background-color: var(--bs-navbar-bg) !important;
    border-color: var(--bs-border-color) !important;
}

/* Ensure consistent card heights in More Content - temporarily disabled to test width issue */
/* .more-content .card {
    height: 100% !important;
} */

/* Hashtag link styling */
.hashtag-link {
    color: var(--bs-primary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    transition: all 0.2s ease !important;
}

.hashtag-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    color: var(--bs-primary) !important;
    text-decoration: none !important;
}

/* Dark mode hashtag styling */
[data-bs-theme="accessibility-up-to11-dark-dark"] .hashtag-link {
    color: #FAEBD7 !important;
    background-color: rgba(250, 235, 215, 0.1) !important;
}

[data-bs-theme="accessibility-up-to11-dark-dark"] .hashtag-link:hover {
    background-color: rgba(250, 235, 215, 0.2) !important;
    color: #FAEBD7 !important;
}

/* Responsive improvements for 365 Days pages */
/* Responsive image handling in markdown content */
.markdown-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* Ensure tags wrap properly on all screen sizes */
.flex-wrap {
    flex-wrap: wrap !important;
}

/* Make sure badges have proper spacing when wrapped */
.badge {
    margin-bottom: 0.25rem !important;
}