/* Using system fonts instead of Google Fonts */


/* Code block styling - hugo-book inspired */
code {
    font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.875em;
    direction: ltr;
    unicode-bidi: embed;
    padding: .125em .25em;
    background: var(--gray-100);
    border: var(--padding-1) solid var(--gray-200);
    border-radius: var(--border-radius);
}

pre {
    padding: var(--padding-16);
    background: var(--gray-100);
    border: var(--padding-1) solid var(--gray-200);
    border-radius: var(--border-radius);
    overflow-x: auto;
    font-size: 1em;
}

pre code {
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.875em;
    line-height: 1.4;
}

/* Figures and captions */
figure {
    margin: var(--padding-16) 0;
}

figcaption {
    font-family: var(--font-sans);
    font-size: 0.9em;
    color: var(--text-light);
    font-style: normal;
    text-align: left;
    margin-top: var(--padding-16);
    display: block;
    width: 100%;
}

/* Paragraphs */
p {
    word-wrap: break-word;
}

/* Blockquotes - hugo-book style */
blockquote {
    margin: var(--padding-16) 0;
    padding: var(--padding-8) var(--padding-16) var(--padding-8) calc(var(--padding-16) - var(--padding-4));
    border-left: var(--padding-4) solid var(--gray-200);
    border-radius: var(--border-radius);
}

blockquote :first-child {
    margin-top: 0;
}

blockquote :last-child {
    margin-bottom: 0;
}

/* Lists - hugo-book style */
ul,
ol {
    padding-left: calc(var(--padding-16) * 2);
    word-wrap: break-word;
}

/* Tables - hugo-book style */
table {
    overflow: auto;
    display: block;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: var(--padding-16);
    margin-bottom: var(--padding-16);
}

table tr th,
table tr td {
    padding: var(--padding-8) var(--padding-16);
    border: var(--padding-1) solid var(--gray-200);
    text-align: start;
}

table tr:nth-child(2n) {
    background: var(--gray-100);
}

/* Horizontal rules */
hr {
    height: var(--padding-1);
    border: none;
    background: var(--gray-200);
}

/* Definition lists */
dl dt {
    font-weight: bolder;
    margin-top: var(--padding-16);
}

dl dd {
    margin-left: 0;
    margin-bottom: var(--padding-16);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Utility classes */
small,
.text-small {
    font-size: 0.875em;
}

/* Markdown content utilities */
.markdown> :first-child,
.markdown-inner> :first-child {
    margin-top: 0;
}

.markdown-inner> :last-child {
    margin-bottom: 0;
}

:root {
    /* Hugo-book base sizing */
    --font-size: 16px;
    --font-size-smaller: 0.875rem;
    --font-size-smallest: 0.75rem;

    /* Hugo-book spacing */
    --padding-1: 1px;
    --padding-4: 0.25rem;
    --padding-8: 0.5rem;
    --padding-16: 1rem;

    /* Colors */
    --accent-color: #2563EB;
    --accent-hover: #1D4ED8;
    --text-color: #1F2937;
    --text-light: #4B5563;
    --background: #F8FAFC;
    --border-color: #E2E8F0;
    --gradient-start: #2563EB;
    --gradient-end: #3B82F6;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-500: #adb5bd;
    --border-radius: 0.25rem;

    /* Layout */
    --content-width: 550px;
    --content-margin: 6rem;
    --body-min-width: 20rem;
    --container-max-width: 80rem;

    /* Fonts */
    --font-sans: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-primary: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-display: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --body-font-weight: 400;

    /* Legacy */
    --left-margin: 40px;
}

body {
    font-family: var(--font-primary);
    background: var(--background);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    font-size: var(--font-size);
    line-height: 1.6;
    min-width: var(--body-min-width);
    font-weight: var(--body-font-weight);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

.navbar {
    background: var(--background);
    padding: var(--padding-16) 0;
    border-bottom: none;
    margin-bottom: var(--padding-16);
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    font-family: var(--font-sans);
}

.logo:hover {
    color: var(--accent-color);
    text-decoration: none;
}

.nav-links {
    margin-left: auto;
}

.nav-links a {
    margin-left: calc(var(--padding-16) * 1.5);
    color: var(--text-color);
    text-decoration: none;
    font-family: var(--font-sans);
}

/* Hide logo on homepage */
.navbar-home .logo {
    display: none;
}

/* Ensure nav-links are right-aligned on homepage */
.navbar-home .nav-content {
    justify-content: flex-end;
}

.nav-links a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #222222;
    font-weight: inherit;
    line-height: 1;
    margin-top: 1.5em;
    margin-bottom: var(--padding-16);
}

h1 {
    font-size: 2rem;
    font-family: 'Plus Jakarta Sans', var(--font-display);
}

h2 {
    font-size: 1.5rem;
    font-family: var(--font-display);
}

h3 {
    font-size: 1.25rem;
    font-family: var(--font-display);
}

h4 {
    font-size: 1.125rem;
    font-family: var(--font-display);
}

h5 {
    font-size: 1rem;
    font-family: var(--font-display);
}

h6 {
    font-size: 0.875rem;
    font-family: var(--font-display);
}

a {
    color: var(--accent-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Touch-friendly tap targets for mobile - only for navigation and buttons */
@media (hover: none) and (pointer: coarse) {
    .nav-links a {
        min-height: calc(var(--padding-16) * 2.75);
        padding: calc(var(--padding-16) * 0.75) var(--padding-8);
        display: inline-flex;
        align-items: center;
    }

    .social-link {
        min-height: calc(var(--padding-16) * 2.75);
        min-width: calc(var(--padding-16) * 2.75);
        padding: var(--padding-8);
    }

    button {
        min-height: calc(var(--padding-16) * 2.75);
        min-width: calc(var(--padding-16) * 2.75);
        padding: var(--padding-8);
    }
}

.blog-list {
    margin-top: calc(var(--padding-16) * 2);
}

.hero-heading {
    font-family: var(--font-sans);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: calc(var(--padding-16) * 2);
    color: var(--text-color);
}

.site-footer {
    margin-top: auto;
    padding: calc(var(--padding-16) * 2) 0;
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: var(--font-size-smaller);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-left,
.footer-right {
    font-size: 0.7em;
}

.site-footer a {
    color: var(--accent-color);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* Mobile Optimization - Responsive Design */
@media (max-width: 768px) {
    :root {
        --font-size: 14px;
        --left-margin: var(--padding-16);
        --content-margin: calc(var(--padding-16) * 2);
    }

    body {
        line-height: 1.6;
    }

    .container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 var(--padding-16);
    }

    /* Typography adjustments for mobile */
    h1 {
        font-size: 1.5rem;
        margin-top: 1em;
    }

    h2 {
        font-size: 1.25rem;
        margin-top: 1em;
    }

    h3 {
        font-size: 1.125rem;
        margin-top: 1em;
    }

    h4 {
        font-size: 1rem;
        margin-top: 1em;
    }

    h5 {
        font-size: 0.875rem;
        margin-top: 1em;
    }

    h6 {
        font-size: 0.75rem;
        margin-top: 1em;
    }

    .hero-heading {
        font-size: 1.5rem;
        margin-bottom: var(--padding-16);
    }

    /* Navigation responsive */
    .navbar {
        padding: var(--padding-8) 0;
        margin-bottom: var(--padding-8);
    }

    .nav-content {
        flex-wrap: wrap;
        gap: var(--padding-8);
    }

    .logo {
        font-size: 1.125rem;
    }

    .nav-links {
        display: flex;
        gap: var(--padding-8);
    }

    .nav-links a {
        margin-left: 0;
        font-size: var(--font-size-smaller);
    }

    /* Code blocks responsive */
    pre {
        padding: var(--padding-8);
        margin: var(--padding-8) 0;
    }

    code {
        font-size: 0.8em;
    }

    /* Figures and images */
    figure {
        margin: var(--padding-8) 0;
        width: 100%;
    }

    /* Make all images full width on mobile */
    figure img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Make formula images larger on mobile */
    figure img[style*="max-width: 70%"],
    figure img[style*="max-width: 60%"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Override main figure images for mobile */
    figure img[style*="max-width: 80%"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    figcaption {
        font-size: 0.9em;
        padding: 0 var(--padding-4);
    }

    /* Footer responsive */
    .site-footer {
        padding: calc(var(--padding-16) * 1.5) 0;
    }

    .footer-content {
        justify-content: center;
    }

    /* Lists */
    ul,
    ol {
        padding-left: var(--padding-16);
    }

    /* Tables */
    table tr th,
    table tr td {
        padding: var(--padding-4) var(--padding-8);
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    :root {
        --font-size: 13px;
        --left-margin: var(--padding-8);
    }

    body {
        line-height: 1.6;
    }

    .container {
        padding: 0 var(--padding-8);
    }

    h1 {
        font-size: 1.375rem;
    }

    h2 {
        font-size: 1.125rem;
    }

    h3 {
        font-size: 1rem;
    }

    h4 {
        font-size: 0.9375rem;
    }

    h5 {
        font-size: 0.8125rem;
    }

    h6 {
        font-size: 0.6875rem;
    }

    .hero-heading {
        font-size: 1.375rem;
        margin-bottom: var(--padding-16);
    }

    /* Make all images full width on small mobile */
    figure img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Make formula images even larger on small mobile */
    figure img[style*="max-width: 70%"],
    figure img[style*="max-width: 60%"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    .logo {
        font-size: 1.0625rem;
    }

    .nav-links {
        gap: var(--padding-4);
    }

    .nav-links a {
        font-size: var(--font-size-smallest);
    }

    pre {
        padding: var(--padding-8);
        font-size: 0.875em;
    }

    figcaption {
        font-size: 0.9em;
    }

    /* Blockquotes */
    blockquote {
        padding: var(--padding-4) var(--padding-8) var(--padding-4) calc(var(--padding-8) - var(--padding-4));
    }
}