/*
  -----------------------------------------------------------------------------
  CINEMATIC LAYOUT ENGINE
  -----------------------------------------------------------------------------
  Set Design & Blocking
*/

/* ----------------------------------------------------------------------------
   1. GLOBAL RESET & BASE
   ---------------------------------------------------------------------------- */
body {
    /* Motion handling */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--duration-fade) ease;
    overflow-x: hidden;
    /* Prevent horizontal scroll from effects */
}

/* Custom Scrollbar - The Film Reel Track */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--cinematic-light-fill);
    border-radius: 3px;
    transition: background var(--duration-cut);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cinematic-accent-primary);
}

/* ----------------------------------------------------------------------------
   2. MKDOCS OVERRIDES (Structural)
   ---------------------------------------------------------------------------- */

/* Header - "The Boom" */
.md-header {
    background-color: rgba(var(--md-default-bg-color), 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: none !important;
    /* Remove material shadow */
    transition: transform var(--duration-cut) var(--ease-cinema);
}

/* Make header title dramatic */
.md-header__title {
    font-family: var(--md-text-font-family);
    letter-spacing: var(--tracking-wide);
    font-weight: var(--weight-bold);
}

/* Tabs - "The Clapperboard" */
.md-tabs {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.md-tabs__link {
    transition: opacity var(--duration-cut), transform var(--duration-cut);
}

.md-tabs__link:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Main Content Area - "The Stage" */
.md-main__inner {
    padding-top: 2rem;
}

/* Sidebar - "Backstage" */
.md-sidebar {
    /* Cleaner sidebar */
}

/* Footer - "Credits" */
.md-footer {
    background-color: var(--cinematic-bg-depth) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY HIERARCHY
   ---------------------------------------------------------------------------- */
h1 {
    font-size: var(--font-hero) !important;
    font-weight: var(--weight-heavy) !important;
    line-height: 1.1 !important;
    letter-spacing: var(--tracking-tight);
    margin-bottom: 1.5rem !important;

    /* Day Mode Gradient vs Dark Mode Gradient handled by blend modes usually, 
     but let's keep it clean ink/light for now */
}

h2 {
    font-size: var(--font-title) !important;
    font-weight: var(--weight-bold) !important;
    margin-top: 3rem !important;
    border-bottom: 1px solid rgba(125, 125, 125, 0.2);
    padding-bottom: 0.5rem;
}

h3 {
    font-size: var(--font-subtitle) !important;
    font-weight: var(--weight-bold) !important;
    color: var(--cinematic-accent-primary) !important;
}

/* ----------------------------------------------------------------------------
   4. SELECTION
   ---------------------------------------------------------------------------- */
::selection {
    background: var(--cinematic-accent-primary);
    color: white;
    text-shadow: none;
}