/* 
# Font Specifications - Complete Reference

## Primary Font System
- Font Name: Lora (Google Fonts)
- Font Type: Serif (elegant, readable serif typeface)
- Character Subset: Latin
- Display Strategy: swap (prevents flash of invisible text)
- Font Fallback: System serif fonts (Times New Roman, serif)

## Font Sizes (Pixel Values)
- xs: 12px
- sm: 14px
- md: 16px (Base size)
- lg: 18px
- xl: 20px
- 2xl: 24px
- 3xl: 30px
- 4xl: 36px

## Font Weights
- light: 300 (body text, headings, navigation)
- normal: 400 (fallback, metadata)
- medium: 500 (blog titles, emphasized content)
- semibold: 600 (active navigation, important labels)
- bold: 700 (section headers, emphasized content)

## Typography Elements
- Page Headings (H1): 28px, weight 300
- Section Headers (H2): 24px, weight 300
- Body Text: 16px, weight 300, line-height 1.6
- Navigation Links: 16px, weight 300 (active: weight 600)
- Blog Post Titles: 18px, weight 500
- Blog Metadata/Dates: 14px, weight 300
- Code Blocks: 14px, Monaco/monospace

## Implementation
- Font Loading: Google Fonts with swap display
- Fallback Stack: Lora -> Times -> serif
- Responsive: Consistent sizes across devices
- Accessibility: 16px+ base for readability
*de/

/* Import Lora font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* Basic reset and font settings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Remove all default list styling */
ul, ol {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

li {
    list-style: none !important;
    list-style-type: none !important;
}

/* Typography Elements - Body Text */
body {
    font-family: 'Lora', 'Times New Roman', serif; /* Primary font with fallbacks */
    font-weight: 300; /* Light weight for elegant appearance */
    font-size: 16px; /* Base size (md) for optimal readability */
    line-height: 1.6; /* Optimized for reading */
    -webkit-font-smoothing: antialiased; /* Smooth font rendering on WebKit browsers */
    -moz-osx-font-smoothing: grayscale; /* Smooth font rendering on Firefox/macOS */
    text-align: justify; /* Justify all text for even margins */
    margin: 0;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    color: #000000;
    background-color: #fffff8;
}

/* Container */
.container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Navigation Elements */
nav {
    margin-bottom: 1.5rem;
    font-family: 'Lora', 'Times New Roman', serif;
}

.nav-links {
    margin: 0;
    font-size: 16px; /* Base size for touch-friendly navigation */
}

.nav-item {
    margin-right: 1rem;
}
/* Post descriptions */
.post-description {
    font-family: 'Lora', 'Times New Roman', serif;
    font-size: 13px; /* Slightly smaller than body text */
    font-weight: 300;
    color: #666; /* Subtle gray color */
    font-style: italic; /* Italic for distinction */
    margin: 0.3rem 0 0.8rem 0; /* Small top margin, larger bottom margin */
    text-align: left; /* Override justify alignment */
    line-height: 1.4;
    padding-left: 0; /* No extra padding */
}
.nav-links a {
    color: #0066cc; /* Primary link color */
    font-weight: 300; /* Light weight for consistency */
    text-decoration: none;
}

.nav-links a:hover {
    text-decoration: underline;
}

/* Current page styling */
.current-page a {
    color: #000000;
    font-weight: 600; /* Semibold for active/current page */
}

/* Bracket styling */
.bracket {
    color: #0066cc; /* Blue brackets by default */
}

/* Black brackets for current page */
.current-page .bracket {
    color: #000000;
}

/* Typography Elements - Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lora', 'Times New Roman', serif; /* Consistent with body font */
    font-weight: 300; /* Light weight for elegant headings */
    text-align: left; /* Override inherited justify alignment */
    margin-top: 0;
    color: #000000;
}

/* Page Headings - Main titles */
h1 {
    font-size: 36px; /* size="xl" equivalent - Page titles */
    margin-bottom: 1rem;
}

/* Section Headers */
h2 {
    font-size: 30px; /* size="lg" equivalent - Section headers */
    margin-bottom: 1rem;
}

/* Sub-section headers */
h3 {
    font-size: 24px; /* size="md" equivalent */
    margin-bottom: 0.75rem;
}

h4 {
    font-size: 20px; /* size="lg" - Blog post title size */
    font-weight: 300;
}

h5 {
    font-size: 16px; /* Base size */
    font-weight: 300;
}

h6 {
    font-size: 14px; /* size="sm" - Metadata size */
    font-weight: 300;
}

/* Typography Elements - Body Text and Links */
p {
    font-family: 'Lora', 'Times New Roman', serif;
    margin-bottom: 1rem;
    line-height: 1.6; /* Optimized for reading */
    text-align: justify; /* Justify paragraph text */
    color: #000000;
}

/* Link Elements */
a {
    color: #0066cc; /* Primary link color */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:focus {
    outline: none;
    box-shadow: none;
}

/* Blockquotes */
blockquote {
    display: block;
    margin: 1rem 0;
    padding: 0 1rem;
    border-left: 2px solid #e2e8f0;
    text-align: justify; /* Justify blockquote text */
    color: #718096;
}

/* Lists */
ul {
    list-style-type: none !important;
    list-style: none !important;
    padding-left: 0 !important;
    text-align: justify; /* Justify list text */
    margin: 0 0 1rem 0;
}

li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    text-align: justify; /* Justify list item text */
    list-style: none !important;
}

/* Specifically target our content lists */
section ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

section li {
    list-style: none !important;
    margin-bottom: 0.5rem;
}

/* Note box */
.note-box {
    background-color: #ffffff;
    border: 1px solid ;
    border-radius: 6px;
    padding: 20px;
    margin: 20px 0;
    color: #1a1a1a;
}

.note-box h2 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #6048e6;
    font-weight: 600;
    font-size: 1.2em;
}

.note-box ul {
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 0;
}

.note-box li {
    margin-bottom: 8px;
}

/* Problem box (specifically styled for math problems) */
.problem-box {
    background-color: #e9f1fa;
    border: 1px solid #c8d9eb;
    border-radius: 6px;
    padding: 20px;
    margin: 20px 0;
    color: #1a1a1a;
}

.problem-box h2 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #0066cc;
    font-weight: 600;
    font-size: 1.2em;
}

.problem-box ul {
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 0;
}

.problem-box li {
    margin-bottom: 8px;
}

/* Code Fonts - Monospace Typography */
pre {
    background-color: #ffffff;
    border: 1px solid ;
    border-radius: 6px;
    padding: 16px;
    overflow: auto;
    font-family: 'Monaco', 'Lucida Console', 'SF Mono', 'Consolas', 'Liberation Mono', Menlo, Courier, monospace; /* Comprehensive monospace stack */
    font-size: 14px; /* size="sm" for code readability */
    line-height: 1.45;
    margin: 16px 0;
}

/* Syntax highlighting */
.keyword { color: #0000FF; } /* Blue for keywords */
.string { color: #e32535; } /* Magenta for strings */
.comment { color: #6a737d; font-style: italic; } /* Comments - Grey */
.function { color: #000000; font-weight: bold; } /* Black bold for functions */
.variable { color: #000000; } /* Default text color for variables */
.number { color: #FF6600; } /* Orange for numbers */
.operator { color: #d43c3c; } /* Red for operators */
.boolean { color: #0000FF; } /* Blue for True/False/None */

/* Code Typography - Inline and Block Elements */
code {
    font-family: 'Monaco', 'Lucida Console', 'SF Mono', 'Consolas', 'Liberation Mono', Menlo, Courier, monospace; /* Consistent monospace stack */
    font-size: 14px; /* size="sm" */
}

/* Python-specific syntax highlighting */
code.python .keyword { color: #0000FF; font-weight: bold; } /* def, class, import, etc - Blue */
code.python .builtin { color: #800080; } /* print, len, etc - Purple for built-ins */
code.python .string { color: #FF00FF; } /* String literals - Magenta */
code.python .comment { color: #6a737d; font-style: italic; } /* Comments - Grey */
code.python .function { color: #000000; font-weight: bold; } /* Function names - Black bold */
code.python .class { color: #000000; font-weight: bold; } /* Class names - Black bold */
code.python .decorator { color: #FF6600; } /* Decorators - Orange */
code.python .number { color: #FF6600; } /* Numeric literals - Orange */
code.python .self { color: #0000FF; font-style: italic; } /* self keyword - Blue italic */
code.python .operator { color: #FF0000; } /* Operators - Red */
code.python .punctuation { color: #24292e; } /* Parentheses, brackets, etc - Default */
code.python .docstring { color: #800080; font-style: italic; } /* Triple-quoted strings - Dark magenta */

/* Make syntax highlighting work with Prism or highlight.js */
.token.keyword { color: #0000FF; font-weight: bold; } /* Keywords - Blue */
.token.string { color: #FF00FF; } /* Strings - Magenta */
.token.comment { color: #6a737d; font-style: italic; } /* Comments - Grey */
.token.function { color: #000000; font-weight: bold; } /* Functions - Black bold */
.token.number { color: #FF6600; } /* Numbers - Orange */
.token.operator { color: #FF0000; } /* Operators - Red */
.token.boolean { color: #0000FF; } /* True/False/None - Blue */
.token.class-name { color: #000000; font-weight: bold; } /* Class names - Black bold */
.token.punctuation { color: #24292e; } /* Punctuation - Default */
.token.builtin { color: #800080; } /* Built-in functions - Purple */
.token.decorator { color: #FF6600; } /* Decorators - Orange */
.token.docstring { color: #800080; font-style: italic; } /* Docstrings - Dark magenta */

pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    display: block;
    color: #24292e; /* Default text color */
}

/* Inline code */
:not(pre) > code {
    background-color: rgba(27, 31, 35, 0.05);
    border-radius: 3px;
    font-size: 85%;
    padding: 0.2em 0.4em;
    color: #d73a49;
}

/* HR Separator */
hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 1.5rem 0;
}

/* Blog and Content-Specific Typography */
.date {
    color: #718096; /* gray.600 for metadata */
    font-size: 10px; /* size="sm" for metadata */
    font-family: 'Lora', 'Times New Roman', serif;
    font-weight: 300; /* Light weight for consistency */
}

/* Social Links Typography */
.social-item {
    margin-right: 1rem;
    font-size: 14px; /* size="sm" */
    font-family: 'Lora', 'Times New Roman', serif;
}

.social-item a {
    color: #0066cc; /* Primary link color */
    text-decoration: none;
    font-weight: 300; /* Light weight for consistency */
}

/* Social links brackets */
.social-item .bracket {
    color: #0066cc; /* Blue brackets for social links */
}

.social-links a:hover {
    text-decoration: underline;
}

/* Sections */
section {
    margin: 1.5rem 0;
}

section h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Profile Image */
.image-with-caption {
    display: flex;
    align-items: center;
    margin: 25px 0;
    gap: 20px;
}

.profile-image {
    width: 200px;
    height: 200px;
    border-radius: 0;
    object-fit: cover;
    border: 1px solid #ddd;
    margin: 0;
}

.caption {
    flex: 1;
    text-align: center;
}

.caption p {
    margin: 0;
    font-style: italic;
    font-size: 0.9em;
    color: #555;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    body {
        padding: 1rem;
    }
    
    h1 {
        font-size: 24px;
    }
    
    h2 {
        font-size: 20px;
    }
    
    .nav-links a {
        margin-right: 0.5rem;
    }
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem 0 1rem 0;
    margin-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

footer p {
    font-size: 14px;
    color: #718096;
    text-align: center;
    margin: 0;
}

/* Tooltip Styles */
.tooltip-link {
    position: relative;
}

.tooltip-link:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    bottom: 100%;
    min-width: 200px;
    max-width: 300px;
    background-color: #f9f9f9;
    color: #333;
    text-align: left;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1;
    font-style: italic;
    font-size: 0.9em;
    line-height: 1.4;
    margin-bottom: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Image Container */
.image-container {
    margin: 20px 0;
    text-align: center;
}

.blog-image {
    max-width: 100%;
    height: auto;
}

.image-caption {
    margin-top: 8px;
    color: #666;
    font-size: 0.9em;
    text-align: center;
}

.discussion-links a:hover {
    text-decoration: underline;
}

/* Date and Metadata Styles (following Lora style guide) */
.date {
    font-family: 'Lora', serif;
    font-size: 1.0rem; /* Small size for dates */
    color: #000000; /* gray.400 */
    font-weight: 400;
}

.metadata {
    font-family: 'Lora', serif;
    color: #718096;
    font-size: 14px;
}

.secondary-text {
    font-family: 'Lora', serif;
    color: #718096;
    font-size: 14px;
}

.author-info {
    font-family: 'Lora', serif;
    color: #718096;
    font-size: 14px;
}

.book-title {
    font-family: 'Lora', serif;
    font-size: 1.25rem; /* size="md" for book titles */
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Social links styling */
.social-links {
    font-family: 'Lora', serif;
    margin: 1rem 0;
    font-size: 14px;
}

.social-links a {
    color: #0066cc;
    margin-right: 1rem;
}

/* Responsive container following style guide */
@media (max-width: 768px) {
    body {
        margin-top: 4rem; /* mt={{ base: 16 }} equivalent */
        padding-bottom: 2rem; /* pb={{ base: 8 }} equivalent */
    }
}

@media (min-width: 768px) {
    body {
        padding-bottom: 10rem; /* pb={{ md: "10em" }} equivalent */
    }
}

.vertical-dash {
    font-size: 1.5em;
    font-weight: normal;
    color: #888;
    margin-right: 5px;
    vertical-align: middle;
}