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

/* --- GLOBAL VARIABLES --- */
:root {
  /* Button Colors */
  --btn-primary-bg: #4F46E5;       /* Indigo 600 */
  --btn-primary-bg-hover: #4338CA; /* Indigo 700 */
  
  /* UNIVERSAL NAVBAR CONFIGURATION */
  /* This matches the 'Slate' dark mode header color */
  --universal-header-bg: #1e293b;  /* Dark Slate Blue */
  --universal-header-text: #ffffff;
  
  /* SEARCH BAR CONFIGURATION */
  --universal-search-bg: #ffffff;   /* White background */
  --universal-search-text: #334155; /* Slate text */
}

body {
    font-family: 'Inter', sans-serif;
}

/* =========================================
   UNIVERSAL NAVBAR STYLING (Both Modes)
   ========================================= */

/* 1. Header Container */
.md-header {
    background-color: var(--universal-header-bg) !important;
    color: var(--universal-header-text) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Subtle white separator */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}

/* 2. Site Title (Top Left) */
.md-header__topic {
    color: var(--universal-header-text) !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 3. Header Icons (Menu, Repo, Toggle) */
.md-header__button, 
.md-header__source {
    color: rgba(255, 255, 255, 0.85) !important;
}

.md-header__button:hover,
.md-header__source:hover {
    color: #ffffff !important;
}

/* =========================================
   UNIVERSAL SEARCH BAR FIXES
   ========================================= */

/* Fix: Make the outer wrapper transparent to remove "dark corners" */
.md-search__form {
    background-color: transparent !important;
    border-radius: 4px;
}

/* Search Input Box Styling */
.md-search__input {
    /* Shape & Size */
    border-radius: 4px !important; /* Standard consistent radius */
    height: 36px !important; /* Ensure consistent height */
    padding-left: 40px !important; /* Space for icon */
    
    /* Colors (Light Style) */
    background-color: var(--universal-search-bg) !important;
    color: var(--universal-search-text) !important;
    border: 2px solid transparent !important; /* Prevent border layout shift */
    transition: all 0.2s ease;
}

/* Hover State */
.md-search__input:hover {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Focus State (Active) */
.md-search__input:focus {
    background-color: #ffffff !important;
    /* Add a subtle glow/border to match theme */
    border-color: rgba(79, 70, 229, 0.5) !important; 
}

/* Placeholder Text */
.md-search__input::placeholder {
    color: #64748b; /* Slate 500 */
    opacity: 0.8;
}

/* Search Icon Color (Magnifying Glass) */
.md-search__icon {
    color: #475569 !important; /* Dark grey icon to match light bg */
}

/* =========================================
   GENERAL UI COMPONENTS
   ========================================= */

/* --- Buttons --- */
.md-button {
    background: var(--btn-primary-bg);
    color: white !important;
    border-radius: 6px;
    padding: 0.5em 1.2em;
    font-weight: 600;
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
}

.md-button:hover {
    background-color: var(--btn-primary-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 12px -1px rgba(79, 70, 229, 0.3);
}

/* Secondary Button */
.md-button--secondary {
    background: transparent !important;
    border: 1px solid var(--btn-primary-bg);
    color: var(--btn-primary-bg) !important;
    box-shadow: none;
}

[data-md-color-scheme="slate"] .md-button--secondary {
    border-color: #818cf8;
    color: #818cf8 !important;
}

/* --- Tables --- */
.md-typeset table:not([class]) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
}

.md-typeset table:not([class]) th {
    background-color: rgba(0,0,0,0.03);
    font-weight: 600;
}

/* =========================================
   FOOTER ALIGNMENT FIX
   ========================================= */

/* 1. Constrain the footer width to match the main content grid */
.md-footer__inner {
    max-width: 61rem; /* This matches the width of your main content area */
    margin: 0 auto;   /* This centers the footer in the middle of the screen */
    padding: 0.8rem;  /* Adds standard padding so it aligns perfectly with text */
}

/* 2. Optional: Remove the background color difference to blend it in */
/* Uncomment the lines below if you want the footer to look like part of the page body */
/*
.md-footer {
    background-color: transparent !important;
}
*/