/* style.css style sheet - Typography inspired by gwern.net */

/* ============================================
   Font Face Declarations
   ============================================ */


/* Source Serif 4 - Primary body font */
@font-face {
    font-family: 'Source Serif 4';
    src: url('/fonts/SourceSerif4-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif 4';
    src: url('/fonts/SourceSerif4-It.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif 4';
    src: url('/fonts/SourceSerif4-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Source Sans 3 - UI and sans-serif elements */
@font-face {
    font-family: 'Source Sans 3';
    src: url('/fonts/SourceSans3-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('/fonts/SourceSans3-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* IBM Plex Mono - Code and monospace */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBMPlexMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBMPlexMono-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   CSS Custom Properties
   ============================================ */

:root {
    /* Font stacks with fallbacks */
    --serif-font: 'Source Serif 4', 'Apple Garamond', 'Baskerville', 'Libre Baskerville',
                  'Droid Serif', 'Times New Roman', 'Times', serif;
    --sans-serif-font: 'Source Sans 3', 'Lucida Sans Unicode', 'Helvetica',
                       'Trebuchet MS', sans-serif;
    --monospace-font: 'IBM Plex Mono', 'Liberation Mono', 'Consolas', 'Courier', monospace;

    /* Typography scale */
    --body-font-size: 20px;
    --line-height: 1.6;
}

/* Mobile responsive typography */
@media all and (max-width: 649px) {
    :root {
        --body-font-size: 18px;
        --line-height: 1.45;
    }
}

/* ============================================
   Base Typography
   ============================================ */

body {
    font-family: var(--serif-font);
    font-size: var(--body-font-size);
    line-height: var(--line-height);
}

/* Code and preformatted text */
code, pre, tt {
    font-family: var(--monospace-font);
    font-size: 0.9em;
}

pre {
    line-height: 1.4;
}

a:visited {
    color: blue;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif-font);
    font-weight: 600;
    line-height: 1.2;
}

/* Sans-serif elements (if needed for UI components) */
button, .button, .ui-element {
    font-family: var(--sans-serif-font);
}

/* Blockquotes */
blockquote {
    border-left: 4px solid #888;
    padding-left: 20px;
    margin-left: 0;
    margin-right: 0;
    color: #444;
    font-style: italic;
}

/* ============================================
   Collapsible Table of Contents (Org-mode)
   ============================================ */

/* Style for the clickable TOC heading */
#table-of-contents h2.toc-heading {
    cursor: pointer;
    color: #0066cc;
    user-select: none;
    margin-bottom: 0.5em;
}

#table-of-contents h2.toc-heading:hover {
    text-decoration: underline;
}

/* Add expand/collapse indicator arrow */
#table-of-contents h2.toc-heading::before {
    content: '▶ ';
    display: inline-block;
    transition: transform 0.2s ease;
    margin-right: 0.3em;
}

#table-of-contents h2.toc-heading.expanded::before {
    transform: rotate(90deg);
}

/* TOC content states */
#text-table-of-contents.toc-collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
}

#text-table-of-contents.toc-expanded {
    max-height: 2000px; /* Arbitrary large value for smooth animation */
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.3s ease-in;
}