/* ==========================================================================
   SECTION 1: THEME CONFIGURATION (The Control Panel)
   Change these Hex codes to completely reskin your website.
   Current Preset: Gruvbox Dark (Hard Contrast)
   ========================================================================== */
:root {
  /* --- BASE PALETTE (Utility) --- */
  /* These are defined for future use/overrides but not automatically applied */
  --color-white:          #fbf1c7;
  --color-black:          #1d2021;
  --color-red:            #fb4934;
  --color-orange:         #fe8019;
  --color-yellow:         #fabd2f;
  --color-green:          #b8bb26;
  --color-blue:           #83a598;
  --color-purple:         #d3869b;

  /* --- BACKGROUNDS --- */
  /* The deepest background (Body, Footer) - Gruvbox Dark0 Hard */
  --theme-bg-base:        #1d2021; 
  /* Slightly lighter background (Cards, Sidebar, Header) - Gruvbox Dark0 */
  --theme-bg-surface:     #282828; 
  /* Highlighted background (Active inputs, Code blocks) - Gruvbox Dark1 */
  --theme-bg-highlight:   #3c3836; 
  /* Borders and Dividers - Gruvbox Dark2 */
  --theme-border:         #504945; 

  /* --- TYPOGRAPHY --- */
  /* Main body text (High Contrast) - Gruvbox Light1 */
  --theme-text-main:      #ebdbb2; 
  /* General Bold text (Strong) - Gruvbox Light0 */
  --theme-text-bold:      #fbf1c7; 
  /* Subtitles, Nav items, lighter text - Gruvbox Light2 */
  --theme-text-muted:     #d5c4a1; 
  /* Comments, placeholders - Gruvbox Gray */
  --theme-text-dim:       #928374; 

  /* --- INDIVIDUAL HEADING COLORS --- */
  /* Edit these to make specific header levels different colors */
  /* --h1-color:             #fbf1c7; 
  --h2-color:             #fbf1c7; 
  --h3-color:             #fbf1c7; 
  --h4-color:             #fbf1c7; 
  --h5-color:             #fbf1c7; 
  --h6-color:             #fbf1c7;  */

  /* Uncomment this block to make each header level a different color
    /* --- INDIVIDUAL HEADING COLORS (colorful option) --- */
  --h1-color:             var(--color-red);
  --h2-color:             var(--color-orange); 
  --h3-color:             var(--color-yellow); 
  --h4-color:             var(--color-green);  
  --h5-color:             var(--color-blue); 
  --h6-color:             var(--color-purple);  

  /* --- ACCENTS & BRANDING --- */
  /* Primary Action (Buttons, Progress bars) - Gruvbox Orange */
  --theme-accent-main:    #fe8019; 
  /* Secondary Action (Hover states, Toggles) - Gruvbox Yellow */
  --theme-accent-hover:   #fabd2f; 
  /* Links and Clickables - Gruvbox Blue */
  --theme-link:           #83a598; 
  /* Active/Selected Links - Gruvbox Orange */
  --theme-link-active:    #fe8019; 
  /* Nav title color*/
  --theme-nav-title:     var(--color-red);

  /* --- STATUS COLORS (Admonitions/Alerts) --- */
  --status-info:          #83a598; /* Blue */
  --status-success:       #b8bb26; /* Green */
  --status-warning:       #fabd2f; /* Yellow */
  --status-danger:        #fb4934; /* Red */
  --status-special:       #d3869b; /* Purple */

  /* --- HERO SECTION --- */
  --hero-bg-image:        url('../assets/landing-bg-gruvbox.png');
  /* RGB values required for the overlay opacity (Matches theme-bg-base #1d2021) */
  --hero-overlay-rgb:     29, 32, 33; 
  --hero-overlay-alpha:   0.85;

  /* --- CODE SYNTAX HIGHLIGHTING --- */
  --code-keyword:         #fb4934; /* Red */
  --code-function:        #fabd2f; /* Yellow */
  --code-string:          #b8bb26; /* Green */
  --code-number:          #d3869b; /* Purple */
  --code-comment:         #928374; /* Gray */
  --code-class:           #8ec07c; /* Aqua */
  --code-variable:        #83a598; /* Blue */
}


/* ==========================================================================
   SECTION 2: MATERIAL MKDOCS INTERNALS
   This maps your generic variables above to the specific
   internal variables used by the Material theme.
   ========================================================================== */
[data-md-color-scheme="slate"] {

  /* --- 2.1 GLOBAL COLOR MAPPING --- */
  --md-default-bg-color:              var(--theme-bg-base);
  --md-default-bg-color--light:       var(--theme-bg-surface);
  --md-default-bg-color--lighter:     var(--theme-bg-highlight);
  --md-default-bg-color--lightest:    var(--theme-bg-surface);

  --md-default-fg-color:              var(--theme-text-main);
  --md-default-fg-color--light:       var(--theme-text-muted);
  --md-default-fg-color--lighter:     var(--theme-text-dim);
  --md-default-fg-color--lightest:    var(--theme-border);

  /* --- 2.2 LINKS --- */
  --md-typeset-a-color:               var(--theme-link);

  /* --- 2.3 HEADER & NAVIGATION --- */
  /* Background of the top header bar */
  --md-primary-fg-color:              var(--theme-bg-surface);
  /* Text color in the top header bar */
  --md-primary-fg-color--light:       var(--theme-text-bold);
  /* Mobile drawer background / Search overlay */
  --md-primary-fg-color--dark:        var(--theme-bg-base); 
  --md-primary-bg-color:              var(--theme-text-main);

  /* --- 2.4 ACCENTS (Buttons, Tabs, Loading Bar) --- */
  --md-accent-fg-color:               var(--theme-accent-main);
  --md-accent-fg-color--transparent:  rgba(254, 128, 25, 0.1); /* Matches accent-main (Orange) */
  --md-accent-bg-color:               var(--theme-bg-surface);

  /* --- 2.5 FOOTER --- */
  --md-footer-bg-color:               var(--theme-bg-base);
  --md-footer-bg-color--dark:         var(--theme-bg-base);

  /* --- 2.6 INPUTS & SEARCH --- */
  --md-inputs-bg-color:               var(--theme-bg-highlight);
  --md-inputs-fg-color:               var(--theme-text-main);
  
  /* --- 2.7 TABLES --- */
  --md-typeset-table-color:           rgba(235, 219, 178, 0.05); /* Light1 with opacity */

  /* --- 2.8 ADMONITIONS (Alert Boxes) --- */
  --md-admonition-bg-color:           var(--theme-bg-surface);
  --md-admonition-fg-color:           var(--theme-text-main);

}


/* ==========================================================================
   SECTION 3: COMPONENT OVERRIDES
   Fine-tuning specific UI elements to ensure they look perfect.
   ========================================================================== */

/* --- 3.1 TYPOGRAPHY ENHANCEMENTS --- */

/* Generic Bold Text & Nav Titles */
[data-md-color-scheme="slate"] strong,
[data-md-color-scheme="slate"] .md-nav__title {
  color: var(--theme-text-bold);
}

/*Set nav section title color */ 
[data-md-color-scheme="slate"] .md-nav__item--section>.md-nav__link[for] {
  color: var(--theme-nav-title);
}

/* Individual Headings Configuration */
[data-md-color-scheme="slate"] h1 {
  color: var(--h1-color);
  font-weight: 800;
}

    
[data-md-color-scheme="slate"] h2 {
  color: var(--h2-color);
  font-weight: 700;
}


[data-md-color-scheme="slate"] h3 {
  color: var(--h3-color);
  font-weight: 600;
}

[data-md-color-scheme="slate"] h4 {
  color: var(--h4-color);
  font-weight: 600;
}

[data-md-color-scheme="slate"] h5 {
  color: var(--h5-color);
  font-weight: 600;
}

[data-md-color-scheme="slate"] h6 {
  color: var(--h6-color);
  font-weight: 600;
}

/* Link Hover Animation */
.md-typeset a {
  transition: color 0.2s ease;
}
.md-typeset a:hover {
  color: var(--theme-accent-hover);
}

/* --- 3.2 CODE BLOCKS --- */
/* Custom syntax highlighting mapping */
[data-md-color-scheme="slate"] {
  --md-code-bg-color:             var(--theme-bg-surface); /* Lighter bg for code to stand out from bg */
  --md-code-fg-color:             var(--theme-text-main);
  
  --md-code-hl-color:             var(--theme-bg-highlight);
  --md-code-hl-keyword-color:     var(--code-keyword);
  --md-code-hl-function-color:    var(--code-function);
  --md-code-hl-string-color:      var(--code-string);
  --md-code-hl-number-color:      var(--code-number);
  --md-code-hl-special-color:     var(--status-special);
  --md-code-hl-comment-color:     var(--code-comment);
  --md-code-hl-variable-color:    var(--code-variable);
  --md-code-hl-name-color:        var(--code-class);
  --md-code-hl-operator-color:    var(--theme-text-main);
  --md-code-hl-punctuation-color: var(--theme-text-muted);
}

/* --- 3.3 ADMONITION BORDERS --- */
/* Applies the Status Colors to the left border of alert boxes */
[data-md-color-scheme="slate"] .md-typeset .admonition {
  border-width: 0 0 0 .4rem;
}
[data-md-color-scheme="slate"] .md-typeset .admonition.note,
[data-md-color-scheme="slate"] .md-typeset .admonition.info {
  border-color: var(--status-info);
}
[data-md-color-scheme="slate"] .md-typeset .admonition.success,
[data-md-color-scheme="slate"] .md-typeset .admonition.tip {
  border-color: var(--status-success);
}
[data-md-color-scheme="slate"] .md-typeset .admonition.warning {
  border-color: var(--status-warning);
}
[data-md-color-scheme="slate"] .md-typeset .admonition.failure,
[data-md-color-scheme="slate"] .md-typeset .admonition.danger {
  border-color: var(--status-danger);
}


/* ==========================================================================
   SECTION 4: HERO SECTION (Landing Page)
   Layout for the full-width splash screen.
   ========================================================================== */
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden; 
}

.hero-container {
  /* Layout Strategy: Breakout (Full Width) */
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  
  /* Flexbox Alignment */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; 
  align-items: flex-start;
  
  /* Spacing */
  padding: 4rem; 
  min-height: 100vh;
  margin-top: -5rem;    /* Pull up behind header */
  margin-bottom: -5rem; /* Pull down content */
  box-sizing: border-box; 
  
  /* Visuals: Gradient Overlay + Image */
  background: linear-gradient(
    rgba(var(--hero-overlay-rgb), var(--hero-overlay-alpha)), 
    rgba(var(--hero-overlay-rgb), var(--hero-overlay-alpha))
  ), var(--hero-bg-image);
  
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero-container h1 {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--h1-color); 
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.hero-container p {
  font-size: 1.4rem;
  color: var(--theme-text-main);
  max-width: 600px;
  margin-bottom: 2rem;
  line-height: 1.6;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}