/* 1. Fonts
   NOTE: Fonts are now loaded via <link> in document <head> for better performance.
*/

/* 2. Global Body Settings */
body {
    background-color: #050505;
    color: #e2e8f0;
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.6;
}

/* 3. Scrollbar Styling */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* 4. Utilities */
html { scroll-behavior: smooth; }
section { scroll-margin-top: 100px; }

.glass-nav {
    background: rgba(5, 5, 5, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card {
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}
.glass-card:hover { border-color: rgba(59, 130, 246, 0.3); transform: translateY(-4px); }

/* 6. Keyboard focus & accessible interactive elements */
a:focus, button:focus, [role="button"]:focus {
    outline: 3px solid rgba(59,130,246,0.45);
    outline-offset: 3px;
}

/* Ensure elements that act like buttons but are not <button> look/behave nicely */
[role="button"] { cursor: pointer; }

/* 5. Professional Typography (The "Not Looking Good" Fix) */
.prose { color: #94a3b8; font-size: 1.125rem; line-height: 1.8; }

.prose h1 { color: white; font-family: 'Outfit', sans-serif; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.2; }
.prose h2 { color: white; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.8rem; margin-top: 3rem; margin-bottom: 1.2rem; border-bottom: 1px solid #222; padding-bottom: 0.5rem; }
.prose h3 { color: #e2e8f0; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.4rem; margin-top: 2rem; margin-bottom: 1rem; }

.prose p { margin-bottom: 1.5rem; }

/* Lists */
.prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.prose ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.prose li { margin-bottom: 0.5rem; padding-left: 0.5rem; }
.prose li::marker { color: #3b82f6; } /* Blue bullets */

/* Emphasis */
.prose strong { color: white; font-weight: 700; }
.prose a { color: #3b82f6; text-decoration: underline; text-underline-offset: 4px; transition: color 0.2s; }
.prose a:hover { color: #60a5fa; }

/* Blockquotes */
.prose blockquote { 
    border-left: 4px solid #3b82f6; 
    padding-left: 1.5rem; 
    font-style: italic; 
    color: #cbd5e1; 
    background: rgba(59, 130, 246, 0.05);
    padding: 1.5rem;
    border-radius: 0 12px 12px 0;
    margin: 2rem 0;
}

/* Tables */
.prose table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 1rem; }
.prose th { text-align: left; padding: 16px; border-bottom: 1px solid #444; color: #3b82f6; font-weight: 700; }
.prose td { padding: 16px; border-bottom: 1px solid #222; color: #cbd5e1; }
.prose tr:last-child td { border-bottom: none; }

/* Utility for resetting native button styles if you convert elements to <button> */
.card-button { background: transparent; border: none; padding: 0; display: block; text-align: inherit; }

/* Social links footer */
.social-links { display:flex; gap:12px; justify-content:center; align-items:center; }
.social-links a { display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:10px; color: #cbd5e1; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); text-decoration:none; transition:transform .15s, background .15s; }
.social-links a:hover { transform:translateY(-3px); background: rgba(59,130,246,0.06); color: white; }
.social-links .label { font-size:0.9rem; color: #94a3b8; }