/* ==========================================================================
   AI-Powered Instructional Design - Custom Theme
   GitHub-Inspired Dark Mode from dustinober1.github.io
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties / Design Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Transitions */
    --custom-transition: 0.3s ease;
    --custom-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Light mode overrides */
[data-md-color-scheme="default"] {
    --custom-bg-primary: #FFFFFF;
    --custom-bg-secondary: #F6F8FA;
    --custom-bg-tertiary: #EFF2F5;
    --custom-text-primary: #1F2328;
    --custom-text-secondary: #656D76;
    --custom-text-muted: #6E7781;
    --custom-accent: #0969DA;
    --custom-accent-hover: #1F88FF;
    --custom-accent-glow: rgba(9, 105, 218, 0.15);
    --custom-border: #D0D7DE;
    --custom-border-muted: #D8DEE4;
    --custom-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --custom-header-text: #1F2328;
    --custom-nav-text: #656D76;
    --custom-nav-active: #0969DA;
}

/* Dark mode overrides (GitHub Dark) */
[data-md-color-scheme="slate"] {
    --custom-bg-primary: #0D1117;
    --custom-bg-secondary: #161B22;
    --custom-bg-tertiary: #21262D;
    --custom-text-primary: #F0F6FC;
    --custom-text-secondary: #B1BAC4;
    --custom-text-muted: #8B949E;
    --custom-accent: #2F81F7;
    --custom-accent-hover: #58A6FF;
    --custom-accent-glow: rgba(47, 129, 247, 0.35);
    --custom-border: #30363D;
    --custom-border-muted: #21262D;
    --custom-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --custom-header-text: #FFFFFF;
    --custom-nav-text: #C0C8D0;
    --custom-nav-active: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Google Fonts Import
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   Global Base Styles
   -------------------------------------------------------------------------- */
body {
    font-family: var(--custom-font-family) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Material Theme Overrides - Dark Mode
   -------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
    --md-default-bg-color: var(--custom-bg-primary);
    --md-default-fg-color: var(--custom-text-primary);
    --md-default-fg-color--light: var(--custom-text-secondary);
    --md-default-fg-color--lighter: var(--custom-text-muted);
    --md-primary-fg-color: var(--custom-accent);
    --md-primary-fg-color--light: var(--custom-accent-hover);
    --md-primary-bg-color: var(--custom-bg-primary);
    --md-accent-fg-color: var(--custom-accent);
    --md-accent-fg-color--transparent: var(--custom-accent-glow);
    --md-typeset-color: var(--custom-text-primary);
    --md-typeset-a-color: var(--custom-accent);
    --md-code-bg-color: var(--custom-bg-secondary);
    --md-code-fg-color: var(--custom-text-primary);
}

/* Make dark theme the default */
[data-md-color-scheme="default"] {
    --md-default-bg-color: var(--custom-bg-primary);
    --md-default-fg-color: var(--custom-text-primary);
    --md-default-fg-color--light: var(--custom-text-secondary);
    --md-default-fg-color--lighter: var(--custom-text-muted);
    --md-primary-fg-color: var(--custom-accent);
    --md-primary-fg-color--light: var(--custom-accent-hover);
    --md-primary-bg-color: var(--custom-bg-primary);
    --md-accent-fg-color: var(--custom-accent);
    --md-accent-fg-color--transparent: var(--custom-accent-glow);
    --md-typeset-color: var(--custom-text-primary);
    --md-typeset-a-color: var(--custom-accent);
    --md-code-bg-color: var(--custom-bg-secondary);
    --md-code-fg-color: var(--custom-text-primary);
}

/* --------------------------------------------------------------------------
   Header Styles
   -------------------------------------------------------------------------- */
.md-header {
    background: var(--custom-bg-secondary) !important;
    border-bottom: 1px solid var(--custom-border);
    box-shadow: var(--custom-shadow-md);
}

.md-header__title {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--custom-header-text) !important;
}

/* Make header topic text bright as well */
.md-header__topic {
    color: var(--custom-header-text) !important;
}

.md-header__button.md-logo {
    filter: brightness(1.2);
}

/* Header icons and buttons */
.md-header__button {
    color: var(--custom-header-text) !important;
    opacity: 0.8;
}

.md-header__button:hover {
    color: var(--custom-header-text) !important;
    opacity: 1;
}

/* Search input placeholder */
.md-search__input {
    color: var(--custom-text-primary) !important;
}

.md-search__input::placeholder {
    color: var(--custom-text-muted) !important;
}

/* GitHub Repository Link Visibility */
.md-source__repository {
    color: var(--custom-header-text) !important;
}

.md-source__icon {
    color: var(--custom-header-text) !important;
    filter: brightness(1);
}

[data-md-color-scheme="slate"] .md-source__icon {
    filter: brightness(1.2);
}

/* Navigation tabs */
.md-tabs {
    background: var(--custom-bg-secondary) !important;
    border-bottom: 1px solid var(--custom-border);
}

.md-tabs__link {
    color: var(--custom-nav-text) !important;
    font-weight: 500;
    transition: var(--custom-transition);
}

.md-tabs__link:hover,
.md-tabs__link--active {
    color: var(--custom-nav-active) !important;
}

/* --------------------------------------------------------------------------
   Sidebar Styles
   -------------------------------------------------------------------------- */
.md-sidebar {
    background: var(--custom-bg-primary);
}

.md-sidebar__scrollwrap {
    scrollbar-color: var(--custom-border) transparent;
}

.md-nav__title {
    color: var(--custom-text-primary);
    font-weight: 600;
}

.md-nav__link {
    color: var(--custom-text-secondary) !important;
    transition: var(--custom-transition);
    border-radius: 6px;
    margin: 2px 0;
}

.md-nav__link:hover {
    color: var(--custom-text-primary) !important;
    background: var(--custom-bg-tertiary);
}

.md-nav__link--active {
    color: var(--custom-accent) !important;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Content Area
   -------------------------------------------------------------------------- */
.md-content {
    background: var(--custom-bg-primary);
}

.md-content__inner {
    margin-bottom: 4rem;
}

/* Typography - Accessible Headers */
.md-typeset h1 {
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--custom-text-primary) !important;
}

.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    color: var(--custom-text-primary);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.md-typeset h2 {
    border-bottom: 1px solid var(--custom-border);
    padding-bottom: 0.5rem;
}

/* Links */
.md-typeset a {
    color: var(--custom-accent);
    text-decoration: none;
    transition: var(--custom-transition);
}

.md-typeset a:hover {
    color: var(--custom-accent-hover);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Code Blocks
   -------------------------------------------------------------------------- */
.md-typeset code {
    background: var(--custom-bg-secondary);
    border: 1px solid var(--custom-border);
    border-radius: 6px;
    padding: 0.125em 0.375em;
    font-size: 0.875em;
}

.md-typeset pre {
    background: var(--custom-bg-secondary) !important;
    border: 1px solid var(--custom-border);
    border-radius: 12px;
    box-shadow: var(--custom-shadow-md);
}

.md-typeset pre code {
    border: none;
    padding: 0;
}

/* Code copy button */
.md-clipboard {
    color: var(--custom-text-muted);
    transition: var(--custom-transition);
}

.md-clipboard:hover {
    color: var(--custom-accent);
}

/* --------------------------------------------------------------------------
   Admonitions (Tips, Notes, Warnings, etc.)
   -------------------------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
    background: var(--custom-bg-secondary);
    border: 1px solid var(--custom-border);
    border-radius: 12px;
    box-shadow: var(--custom-shadow-sm);
    overflow: hidden;
}

.md-typeset .admonition-title,
.md-typeset details summary {
    background: var(--custom-bg-tertiary);
    font-weight: 600;
}

/* Note admonition */
.md-typeset .admonition.note,
.md-typeset details.note {
    border-left: 4px solid var(--custom-accent);
}

/* Tip admonition */
.md-typeset .admonition.tip,
.md-typeset details.tip {
    border-left: 4px solid #3FB950;
}

/* Warning admonition */
.md-typeset .admonition.warning,
.md-typeset details.warning {
    border-left: 4px solid #D29922;
}

/* Danger admonition */
.md-typeset .admonition.danger,
.md-typeset details.danger {
    border-left: 4px solid #F85149;
}

/* Info admonition */
.md-typeset .admonition.info,
.md-typeset details.info {
    border-left: 4px solid #58A6FF;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.md-typeset table:not([class]) {
    background: var(--custom-bg-secondary);
    border: 1px solid var(--custom-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--custom-shadow-sm);
}

.md-typeset table:not([class]) th {
    background: var(--custom-bg-tertiary);
    color: var(--custom-text-primary);
    font-weight: 600;
    border-bottom: 1px solid var(--custom-border);
}

.md-typeset table:not([class]) td {
    border-bottom: 1px solid var(--custom-border-muted);
}

.md-typeset table:not([class]) tr:hover {
    background: var(--custom-bg-tertiary);
}

/* --------------------------------------------------------------------------
   Blockquotes
   -------------------------------------------------------------------------- */
.md-typeset blockquote {
    background: var(--custom-bg-secondary);
    border-left: 4px solid var(--custom-accent);
    border-radius: 0 12px 12px 0;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    color: var(--custom-text-primary);
    /* Use primary for better readability */
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Cards (Custom Class for Content)
   -------------------------------------------------------------------------- */
.card {
    background: var(--custom-bg-secondary);
    border: 1px solid var(--custom-border);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin: 1.5rem 0;
    box-shadow: var(--custom-shadow-sm);
    transition: var(--custom-transition);
}

.card:hover {
    border-color: var(--custom-accent);
    box-shadow: var(--custom-glow);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.md-footer {
    background: var(--custom-bg-secondary) !important;
    border-top: 1px solid var(--custom-border);
}

.md-footer-meta {
    background: var(--custom-bg-primary) !important;
}

.md-footer__link {
    color: var(--custom-text-secondary);
    transition: var(--custom-transition);
}

.md-footer__link:hover {
    color: var(--custom-text-primary);
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */
.md-search__form {
    background: var(--custom-bg-secondary);
    border: 1px solid var(--custom-border);
    border-radius: 32px;
}

.md-search__input {
    color: var(--custom-text-primary);
}

.md-search__input::placeholder {
    color: var(--custom-text-muted);
}

.md-search-result {
    background: var(--custom-bg-secondary);
}

.md-search-result__item {
    border-bottom: 1px solid var(--custom-border);
}

.md-search-result__link:hover {
    background: var(--custom-bg-tertiary);
}

/* --------------------------------------------------------------------------
   Task Lists
   -------------------------------------------------------------------------- */
.md-typeset [type="checkbox"] {
    accent-color: var(--custom-accent);
}

.md-typeset .task-list-indicator::before {
    background-color: var(--custom-accent);
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.md-typeset .tabbed-set>label {
    color: var(--custom-text-secondary);
    border-bottom: 2px solid transparent;
    transition: var(--custom-transition);
}

.md-typeset .tabbed-set>label:hover {
    color: var(--custom-text-primary);
}

.md-typeset .tabbed-set>input:checked+label {
    color: var(--custom-accent);
    border-bottom-color: var(--custom-accent);
}

/* --------------------------------------------------------------------------
   Mermaid Diagrams
   -------------------------------------------------------------------------- */
.mermaid {
    background: var(--custom-bg-secondary);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--custom-border);
}

/* --------------------------------------------------------------------------
   Edge Glow Effect (Signature Style)
   -------------------------------------------------------------------------- */
.md-main {
    position: relative;
}

.md-main::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    box-shadow: inset 0 0 150px 50px rgba(47, 129, 247, 0.05);
    z-index: 999;
}

/* --------------------------------------------------------------------------
   Focus States (Accessibility)
   -------------------------------------------------------------------------- */
:focus {
    outline: 3px solid var(--custom-accent);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--custom-accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Selection
   -------------------------------------------------------------------------- */
::selection {
    background-color: var(--custom-accent-glow);
    color: var(--custom-text-primary);
}

/* --------------------------------------------------------------------------
   Scrollbar Styling
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--custom-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--custom-border);
    border-radius: 5px;
    border: 2px solid var(--custom-bg-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--custom-text-muted);
}

/* --------------------------------------------------------------------------
   Responsive Adjustments
   -------------------------------------------------------------------------- */
@media screen and (max-width: 76.25em) {
    .md-nav__title {
        background: var(--custom-bg-secondary);
    }

    .md-nav--primary .md-nav__item--active>.md-nav__link {
        color: var(--custom-accent);
    }
}

@media screen and (max-width: 60em) {
    .md-typeset h1 {
        font-size: 1.75rem;
    }
}

@media screen and (max-width: 30em) {
    .md-header__title {
        font-size: 0.8rem;
    }
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */
@media print {

    .md-sidebar,
    .md-header,
    .md-footer,
    .md-nav__title,
    .md-main::before {
        display: none !important;
    }

    body {
        background-color: white !important;
        color: black !important;
    }

    .md-typeset h1 {
        background: none;
        -webkit-text-fill-color: black;
        color: black !important;
    }
}

/* --------------------------------------------------------------------------
   Accessibility: Reduced Motion
   For users who prefer reduced motion (vestibular disorders, etc.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .md-main::before {
        box-shadow: none;
    }
}

/* --------------------------------------------------------------------------
   Accessibility: High Contrast Mode
   For users who need increased contrast
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
    :root {
        --custom-text-primary: #FFFFFF;
        --custom-text-secondary: #E0E0E0;
        --custom-text-muted: #C0C0C0;
        --custom-border: #808080;
        --custom-accent: #6CB6FF;
    }

    .md-typeset a {
        text-decoration: underline;
    }

    .md-nav__link {
        border: 1px solid transparent;
    }

    .md-nav__link:hover,
    .md-nav__link--active {
        border-color: var(--custom-accent);
    }
}

/* --------------------------------------------------------------------------
   Accessibility: Improved Link Visibility
   Ensure links are distinguishable beyond just color
   -------------------------------------------------------------------------- */
.md-typeset a:not(.md-button):not(.md-nav__link) {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.md-typeset a:not(.md-button):not(.md-nav__link):hover {
    text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Accessibility: Skip to Content Link
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--custom-accent);
    color: #FFFFFF;
    padding: 8px 16px;
    z-index: 10000;
    transition: top 0.3s;
    font-weight: 600;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    top: 0;
}

/* --------------------------------------------------------------------------
   Accessibility: Ensure Minimum Touch Target Size (44x44px)
   -------------------------------------------------------------------------- */
.md-nav__link,
.md-tabs__link,
.md-header__button {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
   Accessibility: Screen Reader Only Text
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Cover Image Styling
   Target the first image on the home page (logo)
   -------------------------------------------------------------------------- */
.md-typeset p:first-of-type img:first-child {
    display: block;
    max-width: 100%;
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 16px;
    margin: 0 auto 2rem auto;
    box-shadow: var(--custom-shadow-lg);
    border: 1px solid var(--custom-border);
}

@media screen and (max-width: 60em) {
    .md-typeset p:first-of-type img:first-child {
        max-height: 250px;
        border-radius: 12px;
    }
}