/* =============================================================================
   CURIO DOCUMENTATION CUSTOM STYLES
   =============================================================================
   Custom CSS overrides for Material for MkDocs theme
   
   Table of Contents:
   1. CSS Variables & Brand Colors
   2. Typography & Text Sizing
   3. Header & Navigation
   4. Layout & Content Width
   5. Components & Elements
   ============================================================================= */

/* =============================================================================
   1. CSS VARIABLES & BRAND COLORS
   ============================================================================= */

   :root > * {
  /* Primary brand colors */
  --md-primary-fg-color: #983932;        /* Main theme color */
  --md-primary-fg-color--dark: #64030c;  /* Darker color for hover states */
  
  /* Typography */
  --md-typeset-font-size: 0.8rem;        /* Base font size for all text */
  
  /* Link and accent colors */
  --md-accent-fg-color: #983932;         /* Link color */
  --md-accent-fg-color--transparent: rgba(152, 57, 50, 0.1);  /* Link background */
}

/* Dark mode color overrides */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #983932;        /* Main theme color for dark mode */
  --md-primary-fg-color--dark: #64030c;  /* Darker color for hover states */
  --md-accent-fg-color: #ff6b6b;         /* Lighter red for dark mode links */
  --md-accent-fg-color--transparent: rgba(255, 107, 107, 0.1);
  --md-typeset-a-color: #ff6b6b;         /* Link color in content */
}
  
  /* =============================================================================
     2. TYPOGRAPHY & TEXT SIZING
     ============================================================================= */
  
  /* Base typography settings */
  .md-typeset {
    font-size: var(--md-typeset-font-size);
    line-height: 1.5;
    max-width: none !important;
  }
  
  /* Heading hierarchy */
  .md-typeset h1 { 
    font-size: 2.2em;  /* Page titles */
  }
  
  .md-typeset h2 { 
    font-size: 1.8em;  /* Section headers */
  }
  
  .md-typeset h3 { 
    font-size: 1.5em;  /* Subsection headers */
  }
  
  .md-typeset h4 { 
    font-size: 1.3em;  /* Minor headers */
  }
  
  /* Body text */
  .md-typeset p,
  .md-typeset li {
    font-size: 1.05em;  /* Slightly larger for better readability */
  }
  
  /* Code formatting */
  .md-typeset code {
    font-size: 0.9em;   /* Inline code */
  }
  
  .md-typeset pre code {
    font-size: 0.85em;  /* Code blocks */
  }
  
  /* =============================================================================
     3. HEADER & NAVIGATION
     ============================================================================= */
  
  /* Main header container */
  .md-header {
    background-color: var(--md-primary-fg-color);
    box-shadow: 0 0 0.2rem transparent, 0 0.2rem 0.4rem transparent;
    color: var(--md-primary-bg-color);
    display: block;
    left: 0;
    position: sticky;
    right: 0;
    top: 0;
    z-index: 4;
    transform: scale(1.05) !important;
    transform-origin: top center !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Header shadow on scroll */
  .md-header--shadow {
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1), 
                0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
    transition: transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1), 
                box-shadow 0.25s;
  }
  
  /* Header text elements */
  .md-header__title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
  }
  
  .md-header__button {
    font-size: 1.05rem !important;
  }
  
  .md-header-nav__title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
  }
  
  .md-header-nav__topic {
    font-size: 1.05rem !important;
  }
  
  /* Navigation tabs */
  .md-tabs__link {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
  }
  
  /* Logo styling */
  .md-header__button.md-logo {
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin: 0.2rem 0.4rem !important;
  }
  
  .md-header__button.md-logo img,
  .md-header__button.md-logo svg {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
  }
  
  /* =============================================================================
     4. LAYOUT & CONTENT WIDTH
     ============================================================================= */
  
  /* Main layout container */
  .md-main__inner {
    max-width: 63.75rem !important;  /* Wider than default 61rem */
  }
  
  /* Content area */
  .md-content__inner {
    max-width: none !important;
    padding: 0 !important;
  }
  
  /* =============================================================================
     5. COMPONENTS & ELEMENTS
     ============================================================================= */
  
  /* Sidebar navigation link hover states */
  .md-nav__link:hover,
  .md-nav__link:focus {
    color: var(--md-primary-fg-color) !important;
  }
  
  .md-nav__link--active {
    color: var(--md-primary-fg-color) !important;
  }
  
  /* General link hover states */
  .md-typeset a:hover,
  .md-typeset a:focus {
    color: var(--md-primary-fg-color-dark) !important;
  }
  
  /* Navigation tabs hover */
  .md-tabs__link:hover,
  .md-tabs__link:focus {
    color: rgba(255, 255, 255, 0.9) !important;
    opacity: 0.8;
  }
  
  /* Table of contents links */
  .md-nav--secondary .md-nav__link:hover,
  .md-nav--secondary .md-nav__link:focus {
    color: var(--md-primary-fg-color) !important;
  }
  
  /* Dark mode specific link overrides */
  [data-md-color-scheme="slate"] .md-nav__link:hover,
  [data-md-color-scheme="slate"] .md-nav__link:focus,
  [data-md-color-scheme="slate"] .md-nav__link--active {
    color: #ff6b6b !important;  /* Lighter red for dark mode */
  }
  
  [data-md-color-scheme="slate"] .md-typeset a:hover,
  [data-md-color-scheme="slate"] .md-typeset a:focus,
  [data-md-color-scheme="slate"] .md-typeset a {
    color: #ff6b6b !important;  /* Lighter red for dark mode content links */
  }
  
  [data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link:hover,
  [data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link:focus {
    color: #ff6b6b !important;  /* Lighter red for dark mode TOC */
  }
  
  /* Badges and shields (GitHub badges, etc.) */
  .md-typeset img[src*="shields.io"],
  .md-typeset img[src*="badge"] {
    height: auto;
    transform: scale(1.2);
    margin: 6px 12px;
    display: inline-block;
    transform-origin: center;
  }