/* ==========================================================================
   1. GLOBAL RESET & TYPOGRAPHY
   ========================================================================== */
html {
    scroll-behavior: smooth;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--md-background);
    color: var(--md-on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 0;
    padding-bottom: 90px; /* Mobile Nav Space */
}

h1, h2, h3 {
    color: var(--md-on-surface);
    font-weight: 700;
}

h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
}

section {
    scroll-margin-top: 80px;
    padding: 4rem 0;
    position: relative; /* Context for Fog/Glass effects */
}

/* ==========================================================================
   2. RESPONSIVE CONTAINER & SCALING
   ========================================================================== */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    max-width: 1200px; /* Default Laptop */
}

/* 1440p Screens */
@media (min-width: 1440px) {
    .container { max-width: 1400px; }
}

/* Ultrawide (1920p+) */
@media (min-width: 1920px) {
    html { font-size: 18px; } /* 12.5% Zoom */
    .container { max-width: 1800px; }
    h2 { margin-bottom: 4rem; }
}

/* 4K Screens (2560p+) */
@media (min-width: 2560px) {
    html { font-size: 22px; } /* 37.5% Zoom */
    .container { max-width: 2400px; }
}

/* Desktop Layout Adjustments */
@media (min-width: 769px) {
    body { padding-bottom: 0; } /* Remove Mobile Nav Space */
}

/* ==========================================================================
   3. UTILITIES: TECH BADGES
   ========================================================================== */
/* Mobile/Flutter Technologies */
.tech-flutter { background-color: #02569B; color: white; }
.tech-dart { background-color: #0175C2; color: white; }
.tech-riverpod { background: linear-gradient(135deg, #4285F4, #4fc2f7); color: white; border: 1px solid #34A853; }
.tech-hive { background: linear-gradient(135deg, #7F52FF, #E44857); color: white; }
.tech-db { background-color: #8E44AD; color: white; }
.tech-intl { background-color: #2ECC71; color: white; }
.tech-fonts { background-color: #E67E22; color: white; }
.tech-url_launcher { background-color: #3F51B5; color: white; }
.tech-utils { background-color: #16A085; color: white; }

/* Kotlin/Android Technologies */
.tech-kotlin { background: linear-gradient(135deg, #7F52FF, #FF8E00); color: white; }
.tech-compose { background: linear-gradient(135deg, #4285F4, #34A853, #FBBC05, #EA4335); color: white; border: 1px solid #34A853; }
.tech-material3 { background: linear-gradient(135deg, #6200EE, #BB86FC); color: white; }
.tech-viewmodel { background: linear-gradient(135deg, #03DAC6, #018786); color: white; }
.tech-stateflow { background: linear-gradient(135deg, #03DAC6, #018786); color: white; }
.tech-ktor { background: linear-gradient(135deg, #1C1C1C, #4A4A4A); color: white; }
.tech-coil { background: linear-gradient(135deg, #FF6F91, #845EC2); color: white; }
.tech-navigation { background: linear-gradient(135deg, #4285F4, #00ACC1); color: white; }
.tech-json { background: linear-gradient(135deg, #F4B400, #FADA5E); color: black; }

/* Web Technologies */
.tech-react { background-color: #20232A; color: #61DAFB; }
.tech-ts { background-color: #3178C6; color: white; }
.tech-python { background-color: #3776AB; color: #FFD43B; }
.tech-flask { background-color: #444444; color: #FFFFFF; }
.tech-fastapi { background-color: #009688; color: white; }
.tech-django { background-color: #092E20; color: #44B78B; }
.tech-tensorflow { background-color: #FF6F00; color: white; }
.tech-pillow { background-color: #9B59B6; color: white; }
.tech-numpy { background-color: #013243; color: white; }
.tech-plotly { background-color: #3F51B5; color: white; }
.tech-html { background-color: #E34F26; color: white; }
.tech-css { background-color: #1572B6; color: white; }
.tech-js { background-color: #F7DF1E; color: black; }
.tech-sql { background-color: #00758F; color: white; }
.tech-sqlite { background-color: #003B57; color: white; }
.tech-pygame { background-color: #6E9C45; color: white; }
.tech-nextjs { background-color: #111111; color: #FFFFFF; }
.tech-framermotion { background-color: #2D1A38; color: #9F40FF; }
.tech-tsparticles { background-color: #0d1117; color: #38BDF8; }
.tech-git { background-color: #F05033; color: #FFFFFF; }
.tech-cli { background-color: #2D2D2D; color: #FFFFFF; }
.tech-github { background-color: #24292e; color: #ffffff; }
.tech-tailwind { background-color: #38B2AC; color: #ffffff; }

/* Badge Theme Overrides */
body:not([data-theme='light']) .tech-react { background-color: #282c34; }
body:not([data-theme='light']) .tech-django { background-color: #0c4b33; }
body:not([data-theme='light']) .tech-nextjs { background-color: #222; } 
body:not([data-theme='light']) .tech-flask { background-color: #555; }

body[data-theme='light'] .tech-github { background-color: #111111; color: #ffffff; }
body[data-theme='light'] .tech-tailwind { background-color: #0ea5a4; color: #ffffff; }
body[data-theme='light'] .tech-nextjs { background-color: #000; }

/* ==========================================================================
   4. UTILITIES: NO-SCRIPT FALLBACK
   ========================================================================== */
.no-js-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); z-index: 99999;
    display: flex; justify-content: center; align-items: center;
}
.no-js-modal {
    background: rgba(30, 31, 33, 0.70);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    color: #e8eaed; padding: 2rem; border-radius: 16px;
    text-align: center; max-width: 450px; margin: 0 1rem;
}
.no-js-modal h2 { margin-top: 0; color: #8ab4f8; margin-bottom: 1rem; }
.no-js-modal p { color: #9aa0a6; line-height: 1.5; margin-bottom: 1rem; }
.no-js-list { text-align: left; color: #9aa0a6; margin: 0 auto 1.5rem auto; width: fit-content; line-height: 1.6; }
.no-js-actions { display: flex; justify-content: center; gap: 1rem; }
.no-js-btn {
    padding: 0.6rem 1.2rem; border-radius: 20px; text-decoration: none;
    font-weight: 500; cursor: pointer; transition: filter 0.2s;
}
.btn-yes { background-color: #8ab4f8; color: #202124; border: none; }
.btn-no { background-color: transparent; border: 1px solid #5f6368; color: #e8eaed; }
.no-js-btn:hover { filter: brightness(1.1); }
#no-js-toggle { display: none; }
#no-js-toggle:checked+.no-js-overlay { display: none; }