/* Prevent scrollbar layout shift */
html {
    overflow-y: scroll;
}

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:wght@400;500;700;900&display=swap');

/* Apply Roboto to navigation and header elements */
.md-header,
.md-nav,
.md-tabs,
.md-sidebar {
    font-family: "Roboto", Arial, sans-serif;
}

/* Site title in header */
.md-header__title {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
}

/* Navigation items */
.md-nav__item {
    font-family: "Roboto", Arial, sans-serif;
    font-size: 0.9rem;
}

/* Navigation section titles */
.md-nav__title {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 700;
}

/* Top navigation tabs */
.md-tabs__link {
    font-family: "Roboto", Arial, sans-serif;
}

/* Typography customization */
:root {
    --md-text-font: "Merriweather", Georgia, serif !important;
    --md-code-font: "SFMono-Regular", Consolas, Monaco, monospace;
}

/* Headings */
.md-typeset h1, 
.md-typeset h2, 
.md-typeset h3, 
.md-typeset h4, 
.md-typeset h5, 
.md-typeset h6 {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #1a1a1a;
}

/* Body text */
.md-typeset {
    font-size: 0.9375rem !important;  /* Reduced to 15px */
    line-height: 1.6 !important;
    color: #292929;
    font-weight: 400;
    letter-spacing: -0.003em;  /* Subtle kerning adjustment */
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;  /* Smoother text rendering */
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;  /* Ensure consistent width */
}

/* Paragraph refinements */
.md-typeset p {
    font-size: inherit;
    margin-bottom: 1.8em;
    text-rendering: optimizeLegibility;  /* Better kerning and ligatures */
}

/* Custom header styling with gradient */
/* Base styles */
:root {
    --md-text-font: "Merriweather", Georgia, serif;
    --md-code-font: "SFMono-Regular", Consolas, Monaco, monospace;
}

/* Light mode with subtle design elements */
[data-md-color-scheme="default"] {
    --md-primary-fg-color: #4a6fa5;
    --md-default-fg-color: #2c3e50;
    --md-default-fg-color--light: #2c3e50;
    --md-default-bg-color: #ffffff;
    --md-typeset-color: #2c3e50;
    --md-accent-fg-color: #6487c3;
}

/* Dark mode with subtle design elements */
[data-md-color-scheme="slate"] {
    --md-primary-fg-color: #1e2029;
    --md-default-fg-color: #ffffff;
    --md-default-fg-color--light: #ffffff;
    --md-default-bg-color: #1e2029;
    --md-typeset-color: #ffffff;
    --md-accent-fg-color: #4a6fa5;
}

/* Main content container */
.md-content {
    width: 100%;
    max-width: 100%;
}

.md-content__inner {
    margin: 0 auto;
    padding: 0 1rem;
}

/* Subtle background pattern */
.md-main {
    position: relative;
}

/* Light mode background */
[data-md-color-scheme="default"] .md-main::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(120deg, rgba(74, 111, 165, 0.03) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(240deg, rgba(100, 135, 195, 0.02) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
    z-index: -1;
}

/* Dark mode background */
[data-md-color-scheme="slate"] .md-main::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(120deg, rgba(74, 111, 165, 0.05) 0%, rgba(30, 32, 41, 0) 50%),
        linear-gradient(240deg, rgba(61, 90, 128, 0.05) 0%, rgba(30, 32, 41, 0) 50%);
    pointer-events: none;
    z-index: -1;
}

/* Add neural network background effect */
/* Neural network background */
[data-md-component="container"] {
    position: relative !important;
}

/* Light mode neural network */
/* Light mode neural network */
[data-md-color-scheme="default"] [data-md-component="container"]::before {
    content: "";
    position: fixed;
    display: block !important;
    top: 50%;
    right: -150px;
    transform: translateY(-50%);
    width: 1000px;
    height: 1000px;
    background-image: url('../assets/neural-network-light.png');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    pointer-events: none;
    opacity: 0.07;
    z-index: -1;
}

/* Dark mode adjustments */
/* Light mode header colors */
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4,
[data-md-color-scheme="default"] .md-typeset h5,
[data-md-color-scheme="default"] .md-typeset h6 {
    color: #4a5bb9 !important;
}

/* Dark mode text and header colors */
[data-md-color-scheme="slate"] {
    /* Softer text colors for dark mode */
    --md-typeset-color: rgba(255, 255, 255, 0.85);
    --md-default-fg-color: rgba(255, 255, 255, 0.85);
    --md-default-fg-color--light: rgba(255, 255, 255, 0.75);
    --md-default-fg-color--lighter: rgba(255, 255, 255, 0.65);
}

/* Dark mode header colors */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
    color: #f1a599 !important;  /* Medium warm coral */
}

/* Footer customization */
.md-footer {
    background-color: var(--md-default-bg-color);
}

.md-footer-meta {
    background-color: var(--md-default-bg-color);
}

/* Hide the previous navigation footer */
.md-footer__inner {
    display: none;
}

/* Style the meta footer */
.md-footer-meta__inner {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

/* Hide social icons */
.md-social {
    display: none;
}

/* Style the copyright section */
.md-footer-copyright {
    width: 100%;
    text-align: center;
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif !important;
    font-size: 0.8rem;
    margin: 0;
    padding: 0 1rem;
    max-width: none;
    color: var(--md-default-fg-color--light);
}

/* Hide the Made with Material notice */
.md-footer-copyright__highlight {
    display: none;
}

/* Dark mode neural network */
[data-md-color-scheme="slate"] [data-md-component="container"]::before {
    content: "";
    position: fixed;
    display: block !important;
    top: 50%;
    right: -150px;
    transform: translateY(-50%);
    width: 1000px;
    height: 1000px;
    background-image: url('../assets/neural-network-dark.png');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    pointer-events: none;
    opacity: 0.07;
    z-index: -1;
}

/* Light mode header */
.md-header {
    background-color: #4a6fa5 !important;
}

/* Dark mode header */
[data-md-color-scheme="slate"] .md-header {
    background-color: #2c3e50 !important;
}

/* Force white text and icons in header for both modes */
.md-header__title,
.md-header__button,
.md-header__button.md-icon,
.md-search__icon,
.md-header .md-search__input {
    color: #ffffff !important;
}

/* Make the theme toggle extra visible */
.md-header__button[for="__palette"] {
    color: #ffffff !important;
    font-weight: bold !important;
    opacity: 1 !important;
}

/* Ensure hover states are visible */
.md-header__button:hover {
    opacity: 0.8 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Navigation visibility */
.md-nav__link {
    color: var(--md-default-fg-color) !important;
}

.md-nav__title {
    color: var(--md-default-fg-color) !important;
}

/* Content visibility */
.md-typeset {
    color: var(--md-typeset-color) !important;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    color: var(--md-default-fg-color) !important;
}

/* Enhanced link styling */
.md-typeset a {
    color: var(--md-accent-fg-color) !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.md-typeset a:hover {
    border-bottom-color: var(--md-accent-fg-color);
}

/* Subtle hover effects for navigation */
.md-nav__link:hover {
    color: var(--md-accent-fg-color) !important;
    transform: translateX(2px);
    transition: transform 0.2s ease;
}

/* Ensure dark mode text visibility */
[data-md-color-scheme="slate"] .md-typeset {
    color: rgba(255, 255, 255, 0.87) !important;
}

[data-md-color-scheme="slate"] .md-nav__link {
    color: rgba(255, 255, 255, 0.87) !important;
}

[data-md-color-scheme="slate"] .md-nav__title {
    color: rgba(255, 255, 255, 0.87) !important;
}

/* Ensure text remains readable in both modes */
.md-header__title,
.md-header__topic,
.md-nav__title,
.md-nav__item,
.md-nav__link {
    font-family: "Roboto", Arial, sans-serif !important;
}

/* Style header buttons and icons for better contrast */
.md-header__button {
    color: #2c3e50 !important;
}

/* Subtle hover effect on header elements */
.md-header__button:hover {
    opacity: 0.8;
}

/* Hide the site title in the left navigation */
[dir=ltr] .md-nav--integrated>.md-nav__title, 
[dir=ltr] .md-nav--primary .md-nav__title,
.md-nav--primary .md-nav__title[for="__drawer"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove any extra space from the hidden title */
.md-nav--primary > .md-nav__title {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Adjust top spacing of the first nav item */
.md-nav--primary > .md-nav__list {
    margin-top: 0.25rem !important;
}

/* Additional specificity for navigation */
[dir=ltr] .md-header__title, 
[dir=ltr] .md-nav__title {
    font-family: "Roboto", Arial, sans-serif !important;
    font-weight: 500;
}

/* More specific selectors for navigation items */
.md-nav--primary .md-nav__item,
.md-nav--secondary .md-nav__item {
    font-family: "Roboto", Arial, sans-serif !important;
    font-size: 0.85rem;
}

.md-typeset p {
    font-size: inherit;
    margin-bottom: 1.8em;
}

/* Adjust heading sizes and spacing for better hierarchy */
.md-typeset h1 {
    font-size: 2.25rem;
    margin-bottom: 1.2em;
    letter-spacing: -0.022em;
}

.md-typeset h2 {
    font-size: 1.625rem;
    margin-top: 2em;
    margin-bottom: 1em;
    letter-spacing: -0.018em;
}

.md-typeset h3 {
    font-size: 1.25rem;
    margin-top: 1.8em;
    margin-bottom: 0.8em;
    letter-spacing: -0.015em;
}

/* Paragraph spacing */
.md-content p {
    margin-bottom: 1.5em;
}

/* Article container width and spacing */
.md-content__inner {
    margin: 0 auto;
    padding: 1rem 3rem;
    max-width: 740px;
}

/* Responsive adjustments */
@media screen and (max-width: 76.1875em) {
    .md-content__inner {
        padding: 1rem 1.5rem;
    }
}

/* Link styling */
.md-content a {
    color: #1a73e8;
    text-decoration: none;
    border-bottom: 1px solid rgba(26, 115, 232, 0.2);
}

.md-content a:hover {
    border-bottom-color: #1a73e8;
}