/* ========================================
   ATL Kalsel - Shared Styles
   ======================================== */

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Base Typography */
body {
    font-family: 'Manrope', sans-serif;
}
h1, h2, h3 {
    font-family: 'Noto Serif', serif;
}
.font-noto-serif { font-family: 'Noto Serif', serif; }
.font-manrope { font-family: 'Manrope', sans-serif; }
.serif-italic { font-family: 'Noto Serif', serif; font-style: italic; }

/* Hero Pattern */
.hero-pattern {
    background-image: radial-gradient(rgba(0, 53, 39, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Dark mode hero pattern */
.dark .hero-pattern {
    background-image: radial-gradient(rgba(149, 211, 186, 0.08) 1px, transparent 1px);
}

/* Grainy Overlay */
.grainy-overlay {
    opacity: 0.05;
}

/* Pattern Overlay */
.pattern-overlay {
    opacity: 0.05;
}

/* Selection */
::selection {
    background-color: #ffdbcc;
}

/* Smooth transitions for dark mode */
body, header, footer, nav, main, section, aside, div, a, button, input, select, textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Mobile menu */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.mobile-menu.open {
    transform: translateX(0);
}

/* Scrollbar (subtle) */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f6f3f0;
}
::-webkit-scrollbar-thumb {
    background: #bfc9c3;
    border-radius: 4px;
}
.dark ::-webkit-scrollbar-track {
    background: #1a1a1a;
}
.dark ::-webkit-scrollbar-thumb {
    background: #404944;
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Dark Mode Overrides */
.dark body {
    background-color: #121212;
    color: #e5e2df;
}