/* === TYPOGRAPHY MANIFESTO THEME FOR OBSIDIAN PUBLISH === */
/* Adapted for dark theme with reductive typography principles */

/* === CSS CUSTOM PROPERTIES (VARIABLES) === */
:root {
    /* Color Variables - Dark Theme */
    --bg-color: #0a0a0a;
    --text-color: #e8e8e0;
    --heading-color: hsl(0, 0%, 85%);
    --internal-link-color: hsl(137, 50%, 75%);
    --external-link-color: hsl(137, 50%, 60%);
    --link-hover-color: hsl(77, 80%, 50%);
    --bold-text-color: hsl(77, 80%, 80%);
    --muted-color: hsl(0, 0%, 50%);
    --border-color: hsl(0, 0%, 30%);
    
    /* Font Stack - Typography Manifesto */
    --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --serif: Georgia, 'Times New Roman', Times, serif;
    --mono: 'Courier New', Courier, monospace;
    
    /* Site Name Variables - Giant Title */
    --site-name-font-size: clamp(3rem, 10vw, 8rem);
    --site-name-font-family: var(--sans);
    --site-name-font-weight: 800;
    --site-name-color: hsl(0, 0%, 95%);
    --site-name-letter-spacing: -0.04em;
}

/* === BASE STYLES === */
body,
.published-container {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    line-height: 1.5 !important;
}

/* Generous whitespace for the main content area */
.markdown-preview-view,
.markdown-rendered {
    padding: 4vw !important;
}

/* === SITE NAME STYLING - GIANT TITLE === */
/* Massive, responsive site name with tight tracking - horizontal layout */
.site-body-left-column-site-name,
.published-container .site-header .site-header-text,
.site-header-text,
.site-body-left-column .site-body-left-column-site-name {
    font-size: clamp(2rem, 5vw, 4rem) !important;
    font-family: var(--site-name-font-family) !important;
    font-weight: var(--site-name-font-weight) !important;
    color: var(--site-name-color) !important;
    letter-spacing: var(--site-name-letter-spacing) !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    margin-bottom: 2rem !important;
    white-space: normal !important;
    word-break: keep-all !important;
}

/* Site name link styles */
.site-body-left-column-site-name a,
.published-container .site-header .site-header-text a,
.site-header-text a,
.site-body-left-column .site-body-left-column-site-name a {
    color: var(--site-name-color) !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}

.site-body-left-column-site-name a:hover,
.published-container .site-header .site-header-text a:hover,
.site-header-text a:hover,
.site-body-left-column .site-body-left-column-site-name a:hover {
    color: var(--site-name-color) !important;
    text-decoration: none !important;
}

/* === SITE HEADER HEIGHT FIX === */
.site-header {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    margin-bottom: 6vh !important;
}

/* === SUBTITLE / TAGLINE STYLING === */
/* If you have a site tagline, style it with mono font */
.site-body-left-column-site-logo + *,
.site-header-text + * {
    font-family: var(--mono) !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--muted-color) !important;
}

/* === RESPONSIVE SITE NAME === */
.site-body-left-column-site-name,
.site-body-left-column .site-body-left-column-site-name,
.published-container .site-header .site-header-text,
.site-header-text {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    white-space: normal !important;
}

@media (max-width: 768px) {
    .site-body-left-column-site-name,
    .site-body-left-column .site-body-left-column-site-name,
    .published-container .site-header .site-header-text,
    .site-header-text {
        font-size: clamp(1.5rem, 8vw, 2.5rem) !important;
    }
}

/* === HEADING STYLES - SECTION MARKERS === */
/* H1 - Large statement heading */
h1, .markdown-preview-view h1 {
    font-family: var(--serif) !important;
    font-size: clamp(2rem, 4vw, 3.5rem) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: var(--text-color) !important;
    line-height: 1.2 !important;
    max-width: 28ch !important;
    margin-top: 4rem !important;
    margin-bottom: 8vh !important;
}

/* H2 - Section Markers with overline */
h2, .markdown-preview-view h2 {
    font-family: var(--sans) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--heading-color) !important;
    border-top: 3px solid currentColor !important;
    padding-top: 1rem !important;
    margin-top: 3rem !important;
    margin-bottom: 2rem !important;
}

/* H3 - Subsection markers */
h3, .markdown-preview-view h3 {
    font-family: var(--sans) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--muted-color) !important;
    margin-top: 4rem !important;
    margin-bottom: 1.5rem !important;
}

/* H4-H6 - Minor headings */
h4, .markdown-preview-view h4,
h5, .markdown-preview-view h5,
h6, .markdown-preview-view h6 {
    font-family: var(--sans) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--muted-color) !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}

/* === PARAGRAPH & BODY COPY === */
.markdown-preview-view p {
    font-family: var(--serif) !important;
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    margin-bottom: 2rem !important;
    margin-top: 0 !important;
    max-width: 65ch !important;
}

/* === HERO STATEMENT STYLING === */
/* Only the first paragraph immediately after H1 gets hero styling */
.markdown-preview-view h1 + p {
    font-family: var(--serif) !important;
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    max-width: 24ch !important;
    margin-bottom: 10vh !important;
    color: var(--text-color) !important;
}

/* === BLOCKQUOTES - TYPOGRAPHIC CALLOUTS === */
blockquote,
.markdown-preview-view blockquote {
    font-family: var(--sans) !important;
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    color: var(--text-color) !important;
    border-left: none !important;
    padding-left: 0 !important;
    margin: 4rem 0 4rem 2rem !important;
    max-width: 20ch !important;
}

blockquote p,
.markdown-preview-view blockquote p {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    margin: 0 !important;
}

/* === LISTS === */
.markdown-preview-view ul,
.markdown-preview-view ol {
    font-family: var(--serif) !important;
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
    padding-left: 1.5rem !important;
}

.markdown-preview-view li {
    margin-bottom: 0.75rem !important;
}

/* === CODE BLOCKS === */
code,
.markdown-preview-view code {
    font-family: var(--mono) !important;
    font-size: 0.9em !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    padding: 0.2em 0.4em !important;
    border-radius: 2px !important;
}

pre,
.markdown-preview-view pre {
    font-family: var(--mono) !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    padding: 2rem !important;
    margin: 3rem 0 !important;
    overflow-x: auto !important;
}

pre code,
.markdown-preview-view pre code {
    background-color: transparent !important;
    padding: 0 !important;
}

/* === HORIZONTAL RULES === */
hr,
.markdown-preview-view hr {
    border: none !important;
    border-top: 1px solid var(--border-color) !important;
    margin: 6rem 0 !important;
}

/* === LINK COLORS AND STYLES === */
/* Internal links */
.internal-link,
.markdown-preview-view .internal-link,
.markdown-rendered .internal-link {
    color: var(--internal-link-color) !important;
    text-decoration: none !important;
}

/* External links */
.external-link,
.markdown-preview-view .external-link,
.markdown-preview-view a:not(.internal-link),
.markdown-preview-view a[href^="http"],
.markdown-preview-view a[href^="https"] {
    color: var(--external-link-color) !important;
    text-decoration: none !important;
}

/* Navigation bar links */
.site-body-left-column a,
.tree-item-self,
.tree-item-self .tree-item-inner,
.nav-folder-title,
.nav-file-title,
.outline .tree-item-self {
    font-family: var(--mono) !important;
    font-size: 1rem !important;
    letter-spacing: 0.05em !important;
    color: var(--internal-link-color) !important;
    text-decoration: none !important;
}

/* Unresolved links */
.internal-link.is-unresolved,
.markdown-preview-view .internal-link.is-unresolved {
    color: var(--internal-link-color) !important;
    text-decoration: none !important;
    opacity: 0.5;
}

/* Link hover effects */
.internal-link:hover,
.external-link:hover,
.markdown-preview-view a:hover,
.site-body-left-column a:hover,
.tree-item-self:hover,
.nav-folder-title:hover,
.nav-file-title:hover,
.outline .tree-item-self:hover {
    color: var(--link-hover-color) !important;
    text-decoration: none !important;
}

/* === BOLD TEXT COLOR === */
strong,
.markdown-preview-view strong {
    color: var(--bold-text-color);
    font-weight: 700;
}

/* === EMPHASIS === */
em,
.markdown-preview-view em {
    font-style: italic !important;
}

/* === IMAGES === */
.markdown-preview-view img {
    max-width: 100% !important;
    margin: 4rem 0 !important;
}

/* === TABLES === */
.markdown-preview-view table {
    font-family: var(--mono) !important;
    font-size: 0.85rem !important;
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 3rem 0 !important;
}

.markdown-preview-view th {
    font-family: var(--sans) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-bottom: 2px solid var(--border-color) !important;
    padding: 1rem !important;
    text-align: left !important;
}

.markdown-preview-view td {
    border-bottom: 1px solid var(--border-color) !important;
    padding: 1rem !important;
}

/* === FOOTER STYLING === */
.site-footer,
footer {
    font-family: var(--mono) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    color: var(--muted-color) !important;
    border-top: 1px solid var(--border-color) !important;
    padding-top: 2rem !important;
    margin-top: 15vh !important;
}

/* === GENEROUS WHITESPACE ADJUSTMENTS === */
.markdown-preview-view {
    max-width: 1000px !important;
}

/* Left column / sidebar spacing */
.site-body-left-column {
    padding: 4vw !important;
}

/* === CUSTOM CLASSES FOR MARKDOWN === */

/* Callout class - for emphasis blocks */
.callout,
.markdown-preview-view .callout {
    font-family: var(--sans) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 4rem 0 4rem 2rem !important;
}

.callout .callout-content,
.callout .callout-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    font-weight: 800 !important;
}

/* === SOCIAL BUTTONS === */
/* Style links in paragraphs with pipe separators as buttons */
.markdown-preview-view p a[href*="linkedin"],
.markdown-preview-view p a[href*="github"],
.markdown-preview-view p a[href$=".pdf"] {
    display: inline-block !important;
    font-family: var(--sans) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--text-color) !important;
    background-color: transparent !important;
    border: 2px solid var(--text-color) !important;
    padding: 0.75rem 1.5rem !important;
    margin-right: 1rem !important;
    margin-top: 2rem !important;
    margin-bottom: 0.5rem !important;
    transition: all 0.2s ease !important;
}

.markdown-preview-view p a[href*="linkedin"]:hover,
.markdown-preview-view p a[href*="github"]:hover,
.markdown-preview-view p a[href$=".pdf"]:hover {
    background-color: var(--text-color) !important;
    color: var(--bg-color) !important;
}

/* Hide the pipe separator between buttons */
.markdown-preview-view h2 + p {
    font-size: 0 !important;
}

.markdown-preview-view h2 + p a {
    font-size: 0.875rem !important;
}

/* === PRINT STYLES === */
@media print {
    body,
    .published-container {
        background-color: white !important;
        color: black !important;
    }
    
    .site-body-left-column {
        display: none !important;
    }
}