/* ------------------------------------------------------- */
/* 1. CUSTOM FONT DEFINITION                               */
/* ------------------------------------------------------- */
@font-face {
  font-family: "Velociti Brand Font";
  /* NOTE: The path starts with "../" to go up out of the 
     stylesheets folder and into the assets folder.
  */
  src: url("../assets/25998.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------- */
/* 2. GLOBAL VARIABLES & FONT APPLICATION                  */
/* ------------------------------------------------------- */
:root {
  /* Define your Brand Colors */
  --velociti-red:    #F9423A;
  --velociti-blue:   #3780F4;
  --velociti-bg:     #1d2b37; /* Dark Blue */

  /* Apply the Custom Font to the whole site */
  --md-text-font: "Velociti Brand Font", sans-serif;
  
  /* Optional: Apply to headings specifically if needed */
  /* --md-heading-font: "Velociti Brand Font", sans-serif; */
}

/* ------------------------------------------------------- */
/* 3. SLATE (DARK) THEME BODY CUSTOMIZATION                */
/* ------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  /* Set the Main Page Background to your specific Dark Blue */
  --md-default-bg-color:        var(--velociti-bg); 
  --md-default-bg-color--light: var(--velociti-bg); /* Sidebar matches body */
  
  /* Set Main Text to White */
  --md-default-fg-color:        #ffffff; 
  --md-default-fg-color--light: #dddddd; /* Secondary text */

  /* Links & Accents */
  --md-primary-fg-color:        var(--velociti-red); /* Headers/Titles */
  --md-accent-fg-color:         var(--velociti-blue); /* UI Elements */
  --md-typeset-a-color:         var(--velociti-red); /* Inline Links */
}

/* ------------------------------------------------------- */
/* 4. HEADER OVERRIDE (FORCE WHITE HEADER ON DARK BODY)    */
/* ------------------------------------------------------- */
/* Target the header specifically to invert colors */
[data-md-color-scheme="slate"] .md-header {
  /* Background: White */
  --md-primary-fg-color: #ffffff; 
  
  /* Text & Icons: Black (to be visible on white) */
  --md-primary-bg-color: #000000; 
  
  /* Search Placeholder Text: Dark Gray */
  --md-primary-fg-color--light: #555555; 
  
  /* Shadow to separate white header from white page content */
  box-shadow: 0 0 .2rem rgba(0,0,0,.1), 0 .2rem .4rem rgba(0,0,0,.1);
}

/* ------------------------------------------------------- */
/* 5. SEARCH BAR VISIBILITY FIX                            */
/* ------------------------------------------------------- */
/* Make search input light gray so it is visible against the white header */
[data-md-color-scheme="slate"] .md-search__input {
  background-color: #f2f2f2; 
}

/* Hover state for search input */
[data-md-color-scheme="slate"] .md-search__input:hover {
  background-color: #e6e6e6; 
}