/* ----------------------------------------------------
   BASE TYPOGRAPHY (NO COLOR CHANGES)
---------------------------------------------------- */

html {
    font-size: 19px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
                 sans-serif;
    line-height: 1.7;
    /* do NOT set color */
}

/* HEADINGS (paper-like serif but no color override) */
h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

h1 { font-size: 2.2rem; }  
h2 { font-size: 1.9rem; }  
h3 { font-size: 1.5rem; }

/* PARAGRAPHS */
p {
    font-size: 1rem;
    margin: 1.5rem 0;
    /* no color */
}

/* LISTS */
li {
    margin: 0.5rem 0;
}

/* LINKS — do NOT override color (Material defaults used) */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* BLOCKQUOTES */
blockquote {
    font-style: italic;
    border-left: 4px solid #ddd;  /* light neutral, does not affect theme */
    padding-left: 1rem;
    margin: 1.5rem 0;
    background-color: #f9f9f9;
    border-radius: 4px;
}

/* CODE */
code, pre {
    font-family: "Fira Code", monospace;
    font-size: 0.9rem;
}

pre {
    
    border-radius: 8px;
    overflow-x: auto;
}

code {
    background-color: #f2f4f6;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

/* ----------------------------------------------------
   INLINE CODE BACKGROUND COLOR OVERRIDE (DARK THEME)
---------------------------------------------------- */

/* Target the dark theme color scheme selector */
[data-md-color-scheme="slate"] {
    /* Set the CSS variable that controls the code background color */
    --md-code-bg-color: #0d1323;
}

/* Optional: Direct override if the variable above doesn't fully apply to inline code */
[data-md-color-scheme="slate"] .md-typeset code {
    background-color: #0d1323 !important;
}

/* IMAGES */
img {
    max-width: 100%;
    border-radius: 8px;
    margin: 1.5rem 0;
}

/* ----------------------------------------------------
   CONTENT WIDTH (layout only, no color)
---------------------------------------------------- */

.md-grid {
    max-width: 94% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.md-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.md-main .md-content {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 1200px) {
    .md-main .md-content {
        max-width: 1200px;
    }
}

/* ----------------------------------------------------
   KEEP MATERIAL DEFAULT THEME COLORS
   (no overrides below this line)
---------------------------------------------------- */


/* TABLES */
table {
    border-collapse: collapse;
    margin: 1.5rem 0;
    width: 100%;
}

th, td {
    border: 1px solid #ddd;
    padding: 0.75rem 1rem;
}

/* HR */
hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 2rem 0;
}

/* RESPONSIVE */
@media (min-width: 768px) {
    body {
        font-size: 19px;
        line-height: 1.75;
    }

    h1 { font-size: 2.5rem; }
    h2 { font-size: 2.1rem; }
    h3 { font-size: 1.7rem; }
}

@media (min-width: 1200px) {
    body {
        font-size: 18.5px;
        line-height: 1.8;
    }

    h1 { font-size: 2.7rem; }
    h2 { font-size: 2.3rem; }
    h3 { font-size: 1.9rem; }
}

/* Keep block elements centered */
blockquote, pre {
    max-width: 95%;
 
}
/* Top-level folders (Git, Docker, DSA, Guides, etc.) */
.md-nav__item--nested > label.md-nav__link .md-ellipsis {
    color: #8b5cf6 !important; /* purple-ish — change as you like */
}

/* Hover state (optional but looks cleaner) */
.md-nav__item--nested > label.md-nav__link:hover .md-ellipsis {
    color: #a78bfa !important;
}

/* A more general selector for all top-level clickable links within nested items */
.md-nav__list > .md-nav__item--nested > .md-nav__link > a.md-nav__link {
    color: #8b5cf6 !important; /* purple-ish — change as you like */
}

/* This selector targets the first list item (<li>) in the primary navigation 
   which is the autogenerated link to the site root ("Welcome"). */
.md-nav--primary > .md-nav__list > .md-nav__item:first-child {
    display: none;
}

.md-nav__link {
    font-size: 0.85rem; /* Slightly larger than the paragraph font-size: 1rem */
}

@media screen and (min-width: 768px) {
    .md-nav__title {
        display: none;
    }
}


/* ----------------------------------------------------
   COLOR VARIABLE OVERRIDE: PURE BLACK TEXT
---------------------------------------------------- */
[data-md-color-scheme="default"] h1 {
    /* Set the main foreground text color to pure black (#000000) */
    --md-default-fg-color--light: #000000;
}
/* Target the light theme color scheme selector */
[data-md-color-scheme="default"] {
    /* Set the main foreground text color to pure black (#000000) */
    --md-default-fg-color--light: #f8f8f885;
}


/* ----------------------------------------------------
   COLOR VARIABLE OVERRIDE: PURE WHITE TEXT
---------------------------------------------------- */

/* Target the dark theme color scheme selector */
[data-md-color-scheme="slate"] h1 {
    /* Set the main foreground text color to pure white (#FFFFFF) for high visibility */
    --md-default-fg-color: #ffffff;
    /* Also override the 'light' variable as a precaution, if it's used in the dark scheme */
    --md-default-fg-color--light: #ffffff; 
}

/* ----------------------------------------------------
   MOBILE SCREEN CONTENT PADDING OVERRIDE
---------------------------------------------------- */

@media screen and (max-width: 768px) {
    /* Target the main content wrapper */
    .md-main .md-content {
        /* Set horizontal padding to 0 for small screens */
        padding-left: 0 !important;
        padding-right: 0 !important;
        
        /* Ensure max-width doesn't limit the content on mobile */
        max-width: 100% !important; 
    }

    /* Optional: If the entire grid is constrained, this helps */
    .md-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ----------------------------------------------------
   FONT SIZE FIXES FOR LISTS AND TABLES
---------------------------------------------------- */

/* Targets the list of benefits (ul) to ensure font size matches paragraphs (1rem) */
.md-content ul {
    font-size: 1rem;
}

/* Targets the table headers (th) and table data (td) to ensure font size matches paragraphs (1rem) */
.md-content table th,
.md-content table td {
    font-size: 1rem;
}

/* ----------------------------------------------------
   FIX: ENSURE PASSED LINKS ARE DARK IN LIGHT THEME
---------------------------------------------------- */
/* ----------------------------------------------------
   FIX 1: RESTORE LIGHT THEME BODY TEXT/TOC COLOR
   (This is crucial and likely the core issue)
---------------------------------------------------- */
[data-md-color-scheme="default"] {
    /* Set the light theme's primary text color to a dark grey/black */
    --md-default-fg-color--light: #333333; 
}

/* ----------------------------------------------------
   INLINE CODE BACKGROUND COLOR OVERRIDE (LIGHT THEME)
---------------------------------------------------- */

/* Target the light theme color scheme selector */
[data-md-color-scheme="default"] {
    /* Set the CSS variable that controls the code background color */
    --md-code-bg-color: #eaeef2;
}

/* Optional: Direct override for inline code if the variable above doesn't fully apply */
[data-md-color-scheme="default"] .md-typeset code {
    background-color: #eaeef2 !important;
}