/* This Theme is called "Reverie" and Obsidian Theme created by Santi Younger */
@import url('https://fonts.googleapis.com/css2?family=Modern+Antiqua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

/* Reset and base styles */
:root {
    --text-color: #000000;
    --bg-color: #fff;
    --link-color: #000;
    --link-hover-color: #000;
    --sidebar-width: 100px;
    --font-family: "Times New Roman", Times, serif;
    --font-monospace: 'Times New Roman';
    --wws-font-modern: "Times New Roman";
    --wws-font-raleway: "Times New Roman";
    --wws-font-text: 'Times New Roman';
    --wws-font-monospace: 'Times New Roman', Jetbrains Mono;
    --wws-header-font: 'Times New Roman';
    --wws-header-font-caps-variant: normal;
    --wws-font-tags: var(--wws-header-font);
    --wws-font-callout-title: var(--wws-header-font);
    --font-text-size: 16px;
    --h1-font: var(--wws-header-font);
    --h2-font: var(--wws-header-font);
    --h3-font: var(--wws-header-font);
    --h4-font: var(--wws-header-font);
    --h5-font: var(--wws-header-font);
    --h6-font: var(--wws-header-font);
    --font-text-theme: var(--wws-font-text);
    --font-monospace-theme: var(--wws-font-monospace);
    --font-interface-theme: var(--wws-font-text);
    --font-mermaid: var(--wws-font-monospace);
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-color);
    background: var(--bg-color);
    font-size: 12px;
}

.site-footer a {
    display: none;
}

/* Container layout */
.container {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
    margin-left: var(--sidebar-width);
}

header {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    padding: 2rem 1.5rem;
    border-right: 1px solid #eee;
    background: var(--bg-color);
    box-sizing: border-box;
}

nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.nav-left {
    margin-bottom: 2rem;
}

.nav-title {
    font-family: var(--font-family);
    font-size: 1.5rem;
    font-weight: normal;
    color: var(--text-color);
    text-decoration: none;
}

.nav-center {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.nav-center a {
    font-family: var(--font-family);
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.nav-center a:hover {
    color: var(--link-hover-color);
}

main {
    grid-column: 2;
    padding: 2rem 3rem 2rem 0.5rem;
    max-width: 800px;
}

h1, h2, h3 {
    font-family: var(--font-family);
    line-height: 1.2;
    font-weight: normal;
}

h1 {
    font-size: 2rem;
    margin-top: 0;
}

a {
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid var(--text-color);
    transition: color 0.2s ease, border-color 0.2s ease;
}

a:hover {
    color: var(--link-hover-color);
    border-color: var(--link-hover-color);
}

/* Navigation links should not have underline */
nav a {
    border-bottom: none;
}

.published-container {
    /* These are the Default Ones that Come with App.css */

    /* Page width and padding */
    --page-width: 70%;
    --page-side-padding: 0px;

    /* Page titles */
    --page-title-color: var(--h1-color);
    --page-title-font: var(--h1-font);
    --page-title-line-height: var(--h1-line-height);
    --page-title-size: 2.6em;
    --page-title-style: var(--h1-style);
    --page-title-variant: var(--h1-variant);
    --page-title-weight: var(--h1-weight);

    /* Component Titles */
    --component-title-color: var(--text-normal);
    --component-title-font: inherit;
    --component-title-size: var(--font-ui-small);
    --component-title-style: inherit;
    --component-title-transform: uppercase;
    --component-title-variant: inherit;
    --component-title-weight: var(--font-semibold);

    /* Inputs */
    --input-height: 32px;

    /* Graph */
    --graph-height: 260px;

    /* Sidebar */
    --sidebar-font-size: 12px;
    --sidebar-left-width: 140px;
    --sidebar-left-background: var(--background-primary);
    --sidebar-left-border-width: 0px;
    --sidebar-left-border-color: var(--background-modifier-border);
    --sidebar-right-width: 100px;
    --sidebar-right-background: transparent;
    --sidebar-right-border-width: 0px;
    --sidebar-right-border-color: var(--background-modifier-border);

    /* headers */
    --logo-width: auto;
    --logo-height: auto;
    --logo-max-width: calc(100% - 18px);
    --logo-max-height: 200px;
    --logo-radius: 8px;
    --header-height: 50px;
    --site-name-color: var(--text-normal);
    --site-name-color-hover: var(--text-muted);
    --site-name-font: var(--wws-header-font);
    --site-name-size: 22px;
    --site-name-weight: var(--font-semibold);
    --site-menu-icon-color: var(--text-faint);
    --site-menu-icon-color-hover: var(--text-normal);
    --site-menu-icon-size: 24px;

    /* Navigation */
    --nav-collapse-icon-color: var(--text-faint);
    --nav-collapse-icon-color-hover: var(--text-muted);
    --nav-parent-item-color: var(--text-normal);
    --nav-parent-item-color-active: var(--text-accent);
    --nav-parent-item-weight: var(--font-medium);
    --nav-item-color: var(--text-muted);
    --nav-item-color-hover: var(--text-normal);
    --nav-item-color-active: var(--text-accent);
    --nav-item-border-color: var(--background-modifier-border);
    --nav-item-border-color-active: var(--text-accent);
    --nav-item-weight-active: var(--font-medium);

    /* Outline */
    --outline-heading-color: var(--text-muted);
    --outline-heading-color-hover: var(--text-normal);
    --outline-heading-color-active: var(--text-accent);
    --outline-heading-weight-active: var(--font-semibold);

    /* Footer */
    --footer-display: block;
}

.workspace-split.mod-horizontal.mod-left-split {
    width: 100% !important;
}

h1,
.markdown-rendered h1,
.cm-line:not(.HyperMD-codeblock) .cm-header-1,
.HyperMD-list-line .cm-header-1 {
    font-variant-caps: var(--wws-header-font-caps-variant);
}

.cm-header-1,
.markdown-preview-section h1 {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-title-h1);
}

.cm-header-2,
.markdown-preview-section h2 {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-title-h2);
}

.cm-header-3,
.markdown-preview-section h3 {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-title-h3);
}

.cm-header-4,
.markdown-preview-section h4 {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-title-h4);
}

.cm-header-5,
.markdown-preview-section h5 {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-title-h5);
}

.cm-header-6,
.markdown-preview-section h6 {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-title-h5);
}

.theme-dark code[class*='language-'],
.theme-dark pre[class*='language-'],
.theme-light code[class*='language-'],
.theme-light pre[class*='language-'] {
    text-shadow: none;
    background-color: var(--pre-code);
}

.graph-view.color-circle,
.graph-view.color-fill-highlight,
.graph-view.color-line-highlight {
    color: var(--interactive-accent-rgb);
}

.graph-view.color-text {
    color: var(--text-a-hover);
}

strong {
    font-weight: 600;
}

a,
.cm-hmd-internal-link {
    color: var(--text-a);
    text-decoration: none;
}

a:hover,
.cm-hmd-internal-link:hover,
.cm-url {
    color: var(--text-a-hover);
    text-decoration: none;
}

mark {
    color: #e5a200;
    background-color: var(--text-mark);
}

.view-actions a {
    color: var(--text-normal);
}

.view-actions a:hover {
    color: var(--text-a);
}

.HyperMD-codeblock-bg {
    background-color: var(--pre-code);
}

.HyperMD-codeblock {
    line-height: 1.4em;
    color: var(--code-block);
}

.HyperMD-codeblock-begin {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.HyperMD-codeblock-end {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

th {
    font-weight: 600;
}

thead {
    border-bottom: 2px solid var(--background-modifier-border);
}

.HyperMD-table-row {
    padding-right: 4px;
    padding-left: 4px;
    line-height: normal;
    /*     background-color: var(--pre-code); */
}

.HyperMD-table-row-0 {
    /* padding-top: 4px; */
}

.nav-file-tag {
    color: var(--text-a);
}

.is-active .nav-file-title {
    color: var(--text-a);
    background-color: var(--background-primary-alt);
}

.nav-file-title {
    border-radius : 0;
}

img {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.HyperMD-list-line {
    padding-top: 0;
}

.markdown-preview-section pre code,
.markdown-preview-section code {
    font-size: 0.9em;
    background-color: var(--pre-code);
}

.markdown-preview-section pre code {
    display: block;
    padding: 4px;
    line-height: 1.4em;
    color: var(--code-block);
}

.markdown-preview-section code {
    color: var(--inline-code);
}

.cm-inline-code {
    padding: 1px;
    color: var(--inline-code);
    background-color: var(--pre-code);
}

.workspace-leaf-header-title {
    font-weight: 600;
}

.side-dock-title {
    padding-top: 15px;
    font-size: 20px;
}

.side-dock-ribbon-tab:hover,
.side-dock-ribbon-action:hover,
.side-dock-ribbon-action.is-active:hover,
.nav-action-button:hover,
.side-dock-collapse-btn:hover {
    color: var(--text-a);
}

.side-dock {
    border-right: 0;
}

.cm-s-obsidian,
.markdown-preview-view {
    padding-right: 10px;
    padding-left: 10px;
}

/* vertical resize-handle */
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
.workspace-split.mod-left-split > .workspace-leaf-resize-handle,
.workspace-split.mod-right-split > .workspace-leaf-resize-handle {
    width: 1px;
    background-color: var(--background-secondary-alt);
}

/* horizontal resize-handle */
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle {
    height: 1px;
    background-color: var(--background-secondary-alt);
}

/* Remove vertical split padding */
.workspace-split.mod-root,
.workspace-split.mod-vertical,
.workspace-leaf-content,
.workspace-split.mod-vertical > .workspace-split,
.workspace-split.mod-vertical > .workspace-leaf,
.workspace-tabs {
    padding-right: 0;
}

.markdown-embed-title {
    font-weight: 600;
}

.markdown-embed {
    margin-right: 10px;
    margin-left: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

.suggestion-item.is-selected {
    background-color: var(--background-secondary);
}

.empty-state-container:hover {
    background-color: var(--background-secondary-alt);
    border: 5px solid var(--interactive-accent);
}

.checkbox-container {
    background-color: var(--interactive-before);
}

.checkbox-container:after {
    background-color: var(--background-secondary-alt);
}

.mod-cta {
    font-weight: 600;
    color: var(--background-secondary-alt);
}

.mod-cta:hover {
    font-weight: 600;
    background-color: var(--interactive-before);
}

input.task-list-item-checkbox {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #7c6f64;
}

input.task-list-item-checkbox:checked {
    background-color: #7c6f64;
    box-shadow: inset 0 0 0 2px var(--background-primary);
}

.cm-fat-cursor .CodeMirror-cursor {
    width: 9px;
    visibility: visible;
    opacity: 60%;
    background-color: #2ccab7;
}

.theme-light {
    --text-accent: #335145;
    --text-accent-hover: #335145;
    --text-normal: #2e3338;
    --text-muted: #888888;
    --text-muted-rgb: 136, 136, 136;
    --text-faint: #999999;
    --text-error: #800000;
    --text-error-hover: #990000;
    --text-highlight-bg: rgba(255, 255, 0, 0.4);
    --text-highlight-bg-active: rgba(255, 128, 0, 0.4);
    --text-selection: rgba(204, 230, 255, 0.99);
    --text-on-accent: #f2f2f2;
    --interactive-normal: #f1f1f1;
    --interactive-hover: #e9e9e9;
    --interactive-accent: #247aa1;
    --interactive-accent-rgb: 123, 108, 217;
    --interactive-accent-hover: #6B7557;
    --interactive-success: #197300;
    --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
    --scrollbar-bg: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);
    --highlight-mix-blend-mode: darken;
    --custom-external: #a14b24;
}

.theme-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-color);
    font-family: var(--font-family);
}

.theme-toggle:hover {
    color: var(--link-hover-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        margin-left: 0;
    }
    
    header {
        position: relative;
        width: 100%;
        height: auto;
        padding: 1rem;
    }
    
    nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .nav-left {
        margin-bottom: 0;
    }
    
    .nav-center {
        flex-direction: row;
        gap: 1rem;
    }
    
    main {
        grid-column: 1;
        padding: 1rem;
    }
}

/* Dark theme */
.theme-dark {
    --text-color: #fff;
    --bg-color: #1a1a1a;
    --link-color: #ddd;
    --link-hover-color: #fff;
}