/* tad_v01 for Obsidian */
/* by Teodor Andonov */
/* https://teodorandonov.com/ */



@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Source+Code+Pro:wght@200..900&display=swap');
body { --font-text-theme: 'JetBrains Mono'; --font-interface-theme: 'JetBrains Mono'; }



/*
=
=
=
=====================================================================================
COLOR
=====================================================================================
=
=
=
*/


/* CUSTOM VARIABLES ======================================== */
.theme-light, .theme-dark {
    --ax1-h: 230;
    --ax2-h: 140;
    --ax3-h: 320;
    --hl-h: 50;

    --ax1: hsl(var(--ax1-h) 50% 50%);
    --ax2: hsl(var(--ax2-h) 50% 50%);
    --ax3: hsl(var(--ax3-h) 50% 50%);

    /* --color-red:;
    --color-orange:;
    --color-yellow:;
    --color-green:;
    --color-cyan:;
    --color-blue:;
    --color-purple:;
    --color-pink:; */

    --ta-coltheme-h: 50;
    --ta-coltheme-s: 10%;


    --ta-coltheme-tx1-l: 15%;
    --ta-coltheme-tx2-l: 55%;
    --ta-coltheme-ui1-l: 75%;
    --ta-coltheme-bg2-l: 85%;
    --ta-coltheme-bg1-l: 90%;    

}

.theme-light {
    --bg1: hsl(  var(--ta-coltheme-h)  var(--ta-coltheme-s)  var(--ta-coltheme-bg1-l)  );
    --bg2: hsl(  var(--ta-coltheme-h)  var(--ta-coltheme-s)  var(--ta-coltheme-bg2-l)  );
    --bg3: var(--bg2);

    --ui1: hsl(  var(--ta-coltheme-h)  var(--ta-coltheme-s)  var(--ta-coltheme-ui1-l)  );
    --ui2: var(--bg2);
    --ui3: var(--ui2);

    --tx1: hsl(  var(--ta-coltheme-h)  var(--ta-coltheme-s)  var(--ta-coltheme-tx1-l)  );
    --tx2: hsl(  var(--ta-coltheme-h)  var(--ta-coltheme-s)  var(--ta-coltheme-tx2-l)  );
    --tx3: var(--tx2);
}

.theme-dark { 
    --bg1: hsl(  var(--ta-coltheme-h)  var(--ta-coltheme-s)  calc(100% - var(--ta-coltheme-bg1-l))  );
    --bg2: hsl(  var(--ta-coltheme-h)  var(--ta-coltheme-s)  calc(100% - var(--ta-coltheme-bg2-l))  );
    --bg3: var(--bg2);

    --ui1: hsl(  var(--ta-coltheme-h)  var(--ta-coltheme-s)  calc(100% - var(--ta-coltheme-ui1-l))  );
    --ui2: var(--bg2);
    --ui3: var(--ui2);

    --tx1: hsl(  var(--ta-coltheme-h)  var(--ta-coltheme-s)  calc(100% - var(--ta-coltheme-tx1-l)) );
    --tx2: hsl(  var(--ta-coltheme-h)  var(--ta-coltheme-s)  calc(100% - var(--ta-coltheme-tx2-l))  );
    --tx3: var(--tx2);
}


/* OV - FOUNDATIONS - COLORS ======================================== */

.theme-dark, .theme-light {
    --background-primary: var(--bg1);
    --background-primary-alt: var(--bg3);
    --background-secondary: var(--bg2);
    --background-secondary-alt: var(--bg3);
    --background-table-rows: var(--bg2);

    --background-modifier-form-field: var(--bg1);
    --background-modifier-form-field-highlighted: var(--bg1);
    --background-modifier-accent: var(--ax3);
    --background-modifier-border: var(--ui1);
    --background-modifier-border-hover: var(--ui2);
    --background-modifier-border-focus: var(--ui3);
    --background-modifier-success: var(--color-green);
    --background-divider: var(--ui1);

    --interactive-hover: var(--ui1);
    --interactive-accent: var(--ax3);
    --interactive-accent-hover: var(--ax3);

    --quote-opening-modifier: var(--ui2);

    --modal-border: var(--ui2);

    --icon-color: var(--tx2);
    --icon-color-hover: var(--tx2);
    --icon-color-active: var(--tx1);
    --icon-hex: var(--mono0);
}

/* MISC - MP, INTERACTIVE, SHADOWS ======================================== */
.theme-light {
    --interactive-normal: var(--bg1);
    --interactive-accent-rgb: 220, 220, 220;
    /* Errors */
    --background-modifier-error: rgba(255, 0, 0, 0.14);
    --background-modifier-error-hover: rgba(255, 0, 0, 0.08);
    /* Shadows */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --btn-shadow-color: rgba(0, 0, 0, 0.05);
}
.theme-dark {
    --interactive-normal: var(--bg3);
    --interactive-accent-rgb: 66, 66, 66;
    /* Errors */
    --background-modifier-error: rgba(255, 20, 20, 0.12);
    --background-modifier-error-hover: rgba(255, 20, 20, 0.18);
    /* Shadows */
    --background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --btn-shadow-color: rgba(0, 0, 0, 0.2);
}

/*
=
=
=
=====================================================================================
TYPOGRAPHY
=====================================================================================
=
=
=
*/

/**/ html { font-size: var(--text-size-m) !important; } 

body {
    /* CUSTOM VARIABLES ======================================== */
    --text-size-xl:	40px;
    --text-size-l:	24px;
    --text-size-m:	16px;
    --text-size-s:	12px;
    --text-size-xs:	10px;

    /* OV - FOUNDATION - TYPOGRAPHY ======================================== */
	--font-text-size: var(--text-size-m);
	--font-small:     var(--text-size-s);
	--font-smaller:   var(--text-size-s);
	--font-smallest:  var(--text-size-xs);
	--font-inputs:    var(--text-size-m);

    --font-weight: 400;
	--bold-weight: 800;
    --heading-weight: 800;
    /* --bold-color: var(--tx3); */
    /**/ --italic-color: var(--tx3); 
	--link-weight: inherit;
    
}

/* TEXT COLORS ======================================== */

.theme-dark, .theme-light {
    
    --title-color: var(--tx1);
    --title-color-inactive: var(--tx2);

    --text-normal: var(--tx1);
    --text-bold: var(--tx1);
    --text-italic: var(--tx1);
    --text-muted: var(--tx2);
    --text-faint: var(--tx3);

    --text-accent: var(--ax1);
    --text-accent-hover: var(--ax2);
    --text-on-accent: white;
    
    --text-selection: hsla(var(--ax2-h) 50% 50% / 0.5);

    --text-highlight-bg: hsla(var(--hl-h) 50% 50% / 0.5);
    --text-highlight-bg-active: hsl(var(--hl-h) 50% 50%);

    --text-code: var(--tx2);
    --text-error: var(--color-red);
    --text-blockquote: var(--tx2);
}


/* HEADINGS ======================================== */
body {
	--h1-color: var(--text-normal);
    --h2-color: var(--text-normal);
    --h3-color: var(--text-normal);
    --h4-color: var(--text-normal);
    --h5-color: var(--text-normal);
    --h6-color: var(--text-normal);

    --h1-size: var(--text-size-xl);
	--h2-size: var(--text-size-l);
	--h3-size: var(--text-size-m);
	--h4-size: var(--text-size-m);
	--h5-size: var(--text-size-s);
	--h6-size: var(--text-size-xs);

	--h1-weight: var(--heading-weight);
	--h2-weight: var(--heading-weight);
	--h3-weight: var(--heading-weight);
	--h4-weight: var(--heading-weight);
	--h5-weight: var(--heading-weight);
	--h6-weight: var(--heading-weight);

	--h1-variant:     normal;
	--h2-variant:     normal;
	--h3-variant:     normal;
	--h4-variant:     normal;
	--h5-variant:     normal;
	--h6-variant:     normal;

	--h1-style:       normal;
	--h2-style:       normal;
	--h3-style:       normal;
	--h4-style:       normal;
	--h5-style:       normal;
	--h6-style:       normal;
}

h1, h2, h3, h4 {
  margin: 1rem 0 1rem;
  padding-bottom: 0;
  border-bottom: none !important;
}


/* TAGS ======================================== */
body {
    --tag-size: var(--text-size-s);
    --tag-color: var(--tx2);
    --tag-color-hover: var(--tx2);
    --tag-background: var(--bg2);
    --tag-background-hover: hsla(var(--ax2-h) 50 50 / 0.5);
    --tag-border-color: var(--ui1);
    --tag-border-color-hover: var(--ui1);
    --tag-border-width: --var(--border-width);
    --tag-padding-x:5px;
    --tag-padding-y:0px;
    --tag-radius: 8px;
    --tag-weight:400;
}

/*
=
=
=
=====================================================================================
PUBLISH
=====================================================================================
=
=
=
*/


.published-container {

    /* OV - PUBLISH - HEADER ======================================== */
    --logo-max-height: 50px;
    --site-name-size: 0;

    /* OV - PUBLISH - NAVIGATION ======================================== */
    --nav-parent-item-color: var(--tx2);
    --nav-parent-item-color-active: var(--ax1);
    --nav-parent-item-weight:600;

    /* OV - PUBLISH - PAGES ======================================== */
    --page-width: 1200px;
    --page-padding: ;

    --page-title-color: var(--tx1);
    --page-title-size: var(--text-size-xl);
    --page-title-weight :800;
    --page-title-line-height: 1.1;



    /* OV - PUBLISH - SIDEBARS ======================================== */
    --sidebar-left-width: 200px;
    --sidebar-right-width: 200px;
    
    --sidebar-left-background: var(--bg1);
    --sidebar-right-background: var(--bg1);

    --sidebar-left-border-color: var(--ui1);
    --sidebar-right-border-color: var(--ui1);
    
    --sidebar-left-border-width: 0px;
    --sidebar-right-border-width: 0px;

    --sidebar-font-size: var(--text-size-s);
}

.site-body-left-column-site-logo {
    text-align: left;
}

/* FOOTER ======================================== */

/* remove
.published-container { --footer-display: none; } */

/* change with your own */
.site-footer a {
    font-size: 0;
    pointer-events: none;
    cursor: default;
    text-decoration: none; }
.site-footer a::before {
    font-size: var(--text-size-s);
    content: "© 2026 teodor andonov"; } 

/* show on mobile */
.published-container { --footer-display: block; }


/*
=
=
=
=====================================================================================
ELEMENTS - GENERAL
=====================================================================================
=
=
=
*/

/* . ======================================== */

body {
    --border-width: 1px;

    --hr-color: var(--ui1);
    --hr-thickness: var(--border-width);
    

}

/*
=
=
=
=====================================================================================
IMAGES
=====================================================================================
=
=
=
*/


body {
    --image-radius: 8px;
    /* --img-border: var(--border-width) solid var(--ui1); */

    --img-grid-ratio: 4 / 2;

}

/* IMAGE styling ======================================== */
.markdown-rendered img:not(.emoji) {
    background-color: var(--bg3)!important;
    border: var(--img-border);
    border-radius: var(--image-radius);
    }

iframe {
    border-radius: var(--image-radius);
}

/* IMG HOVER EFFECT ======================================== */
.markdown-rendered img {
    filter: opacity(75%) /* grayscale(25%)*/;
    transition: filter 0.2s ease-out;
    mix-blend-mode: luminosity; 
}
img:hover {
    filter: opacity(1) grayscale(0%) ;
    mix-blend-mode: normal;
}


/* IMAGE: icon class ======================================== */
.markdown-preview-view img[alt="icon"], .markdown-rendered img[alt="icon"], .published-container img[alt="icon"] { padding: 35%; filter: none; }




/* ZOOM LIGHTBOX ======================================== */
body {
    --img-zoom-background: hsla(0 0 0 / 0.8);
	--img-zoom-max-width:  98%;
	--img-zoom-max-height: 98%; /* 90vh */
	--img-zoom-in-cursor:  zoom-in;
	--img-zoom-out-cursor: zoom-out;
}
.img-zoom .image-embed {
    cursor:zoom-in; 
}
.lightbox {
    z-index:99999; 
    position:fixed; 
    width:100%; 
    height:100%; 
    max-width:100%; 
    top:0; 
    left:0; 
    background:var(--img-zoom-background); 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    height:100%; 
}
.lightbox .internal-embed.image-embed { 
    max-width:var(--img-zoom-max-width); 
    max-height:var(--img-zoom-max-height); 
    cursor:var(--img-zoom-in-cursor); 
    display:flex;
}
.lightbox img {
    cursor:var(--img-zoom-out-cursor);
    object-fit:contain;
    width:auto;

}


/*
=
=
=
=====================================================================================
EMBEDS
=====================================================================================
=
=
=
*/


/* EMBED: clean styling ======================================== */
.markdown-embed-title, .markdown-embed-link, .file-embed-link {
    display: none;
}
.markdown-embed {
    border: none !important;
    padding: 0!important;
    margin: 0!important;
}
.markdown-preview-view {
  scrollbar-gutter: auto !important;
}
.markdown-preview-view .markdown-embed .markdown-preview-view {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;

  scrollbar-gutter: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}



/*
=
=
=
=====================================================================================
TABLES
=====================================================================================
=
=
=
*/


/* OB VAR - EDITOR - TABLE  ======================================== */
body {
    --table-header-border-width:0;
    --table-column-first-border-width:0;
    --table-column-last-border-width:0;
    --table-row-last-border-width:0;

    --table-text-color: var(--tx1);
    --table-text-size: var(--text-size-m);
    --table-line-height: 1.25em;

    --table-white-space:nowrap; /* normal */

    --table-hover: hsl(var(--ax2-h) 50 50 / 0.25);
    --table-header-background-hover: var(--table-hover); 
    --table-row-background-hover: var(--table-hover);
    --table-row-alt-background-hover: var(--table-hover);

    /*--table-background: var(--ui1);*/
    /*--table-border-width: 1px;*/
    --table-border-color: var(--ui2);
    

}

table {
  width: 100%;
}





/*
=
=
=
=====================================================================================
CARDS
=====================================================================================
=
=
=
*/

.markdown-preview-view .callout[data-callout="cards-table"] {
    /* defaults */
    
    --cards-image-ratio: 1 / 1;
    --cards-per-row: 4;

    --cards-gap: 16px;
    --card-radius: 16px;
    --cards-inner-padding: 12px;
    --card-border-color: var(--ui1);
    --card-bg: var(--bg2);

    --table-white-space:normal;

    border: none;
    box-shadow: none;
    background: none;
    padding: 0;
    margin: 0;
    display: contents; /* make callout wrapper layout-transparent */
}

/* hide callout title bar */
.markdown-preview-view .callout[data-callout="cards-table"] > .callout-title {
    display: none;
}

/* remove padding around content block */
.markdown-preview-view .callout[data-callout="cards-table"] > .callout-content {
    padding: 0;
    margin: 0;
}

.markdown-preview-view .callout[data-callout="cards-table"] table,
.markdown-preview-view .callout[data-callout="cards-table"] th,
.markdown-preview-view .callout[data-callout="cards-table"] td {
    border: none;
}

/* ====== METADATA → PRESETS (cols / ratio) ====== */

/* column presets: cols-2 / cols-4 / cols-8 */
.markdown-preview-view
    .callout[data-callout="cards-table"][data-callout-metadata*="cols-2"] {
    --cards-per-row: 2;
}

.markdown-preview-view
    .callout[data-callout="cards-table"][data-callout-metadata*="cols-4"] {
    --cards-per-row: 4;
}

.markdown-preview-view
    .callout[data-callout="cards-table"][data-callout-metadata*="cols-8"] {
    --cards-per-row: 8;
}

/* image ratio presets */
.markdown-preview-view
    .callout[data-callout="cards-table"][data-callout-metadata*="ratio-1-1"] {
    --cards-image-ratio: 1 / 1;
}

.markdown-preview-view
    .callout[data-callout="cards-table"][data-callout-metadata*="ratio-4-3"] {
    --cards-image-ratio: 4 / 3;
}

.markdown-preview-view
    .callout[data-callout="cards-table"][data-callout-metadata*="ratio-3-4"] {
    --cards-image-ratio: 3 / 4;
}

.markdown-preview-view
    .callout[data-callout="cards-table"][data-callout-metadata*="ratio-16-9"] {
    --cards-image-ratio: 16 / 9;
}

/* ====== CARD GRID LOGIC ====== */

.markdown-preview-view .callout[data-callout="cards-table"] table {
    width: 100%;
    border-collapse: collapse;
}

/* hide header (optional) */
.markdown-preview-view .callout[data-callout="cards-table"] thead {
    display: none;
}

/* tbody becomes grid of cards */
.markdown-preview-view .callout[data-callout="cards-table"] tbody {
    display: grid;
    grid-template-columns: repeat(var(--cards-per-row), minmax(0, 1fr));
    gap: var(--cards-gap);
}

/* each row = one card */
.markdown-preview-view .callout[data-callout="cards-table"] tbody tr {
    display: block;
    padding: var(--cards-inner-padding);
    border-radius: var(--card-radius);
    border: 1px solid var(--card-border-color);
    background: var(--card-bg);
    min-height: 2rem; /* tweak or remove */
}

/* cells stack vertically in card */
.markdown-preview-view .callout[data-callout="cards-table"] td {
    display: block;
    padding: 0rem 0rem;
}

/* spacing between items in card */
.markdown-preview-view .callout[data-callout="cards-table"] td + td {
    margin-top: 8px;
}

/* images: fixed ratio + cover */
.markdown-preview-view .callout[data-callout="cards-table"] img {
    width: 100%;
    aspect-ratio: var(--cards-image-ratio);
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ====== RESPONSIVE COLUMN COUNT ====== */

/* Below 1000px → max 2 columns */
@media (max-width: 1000px) {
    .markdown-preview-view .callout[data-callout="cards-table"] {
        --cards-per-row: 2 !important;
    }
}

/* Below 600px → single column */
@media (max-width: 750px) {
    .markdown-preview-view .callout[data-callout="cards-table"] {
        --cards-per-row: 1 !important;
    }
}



/*
=
=
=
=====================================================================================
IMAGE GRID
=====================================================================================
=
=
=
*/

/* MT BASE CODE */

body {
  --img-grid-fit: cover;
  --img-grid-background: transparent;
  --img-grid-gap: 0.5rem;
}
@media (max-width:400pt) {
  body {
    --img-grid-gap: 0.25rem;
  }
}

.img-grid-ratio {
  --image-grid-fit: contain;
}

.img-grid {

  .image-embed.is-loaded {
    line-height:0;
    display: flex;
    align-items: stretch;
    img {
      background-color: var(--image-grid-background);
      &:active {
        background-color: transparent;
      }
    }
  }

  .markdown-preview-section {
    > div:has(img) {
      p:empty,
      img ~ br,
      .image-embed ~ br {
        display:none;
      }
    }
    div:has(>.image-embed ~ .image-embed),
    p:has(>.image-embed ~ .image-embed),
    div:has(>img ~ img),
    p:has(>.image-embed ~ img),
    p:has(>img ~ .image-embed),
    p:has(>img ~ img) {
      display: grid;
      margin-block-start: var(--img-grid-gap);
      margin-block-end: var(--img-grid-gap);
      grid-column-gap: var(--img-grid-gap);
      grid-row-gap: 0;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      > img {
        object-fit: var(--image-grid-fit);
        align-self: stretch;
      }
      > .internal-embed img {
        object-fit: var(--image-grid-fit);
        align-self: center;
      }
    }
    > div:has(img) > p {
      display: grid;
      margin-block-start: var(--img-grid-gap);
      margin-block-end: var(--img-grid-gap);
      grid-column-gap: var(--img-grid-gap);
      grid-row-gap: 0;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      > br {
        display:none;
      }
    }
  }
}


/* Force 1:1 fill for all images in img-grid */
.img-grid img {
    aspect-ratio: 16 / 9 ;
    object-fit: cover !important ;
    width: 100%;
    height: auto;
} 





/*
=
=
=
=====================================================================================
CALLOUTS
=====================================================================================
=
=
=
*/


/* CALLOUT: NORMAL ======================================== */


body {
    /**/ --callout-border-width: var(--border-width); 
    --callout-radius: var(--image-radius);

    --callout-blend-mode: normal;

    --callout-padding: 1rem;
    --callout-content-padding: 0; 

    --callout-title-size: var(--text-size-m);
    --callout-title-weight: 800;


    --grey-50-rgb: 126, 126, 126;
    --ax1-rgb: 63, 84, 190;
    --ax2-rgb: 64, 191, 106;
    --ax3-rgb: 191, 64, 149;

    --callout-default: var(--grey-50-rgb);
    --callout-info: var(--ax1-rgb);
    --callout-question: var(--ax2-rgb);
    --callout-important: var(--ax3-rgb);
}



/* CALLOUT: INVIS WIDE ======================================== */

/* Make [!wide] callouts visually invisible */
.callout[data-callout="wide"] {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Hide icon & title bar */
.callout[data-callout="wide"] .callout-title,
.callout[data-callout="wide"] .callout-icon {
  display: none;
}

/* In the app */
.markdown-preview-view div.el-div:has(> .callout[data-callout="wide"]) {
  max-width: var(--page-width-wide);
}


/* CALLOUT: INVIS NARROW ======================================== */

/* Make [!narrow] callouts visually invisible */
.callout[data-callout="narrow"] {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Hide icon & title bar */
.callout[data-callout="narrow"] .callout-title,
.callout[data-callout="narrow"] .callout-icon {
  display: none;
}

/* In the app */
.markdown-preview-view div.el-div:has(> .callout[data-callout="narrow"]) {
  max-width: var(--page-width-narrow);
}



/* CALLOUT: PRIVATE DROPDOWN ======================================== */

/* Base styling for your custom callout type */
.callout[data-callout="private"]{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove padding around the body */
.callout[data-callout="private"] .callout-content{
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide the title/arrow row visually (BUT keep it clickable) */
.callout[data-callout="private"] .callout-title{
  padding: 0 !important;
  margin: 0 !important;

  opacity: 0 !important;
  height: 10px;        /* clickable strip */
  min-height: 10px;
  overflow: hidden;

  border: 0 !important;
  background: transparent !important;
}

/* When it's a folded callout, it's <details>. Hide content while closed. */
details.callout[data-callout="private"]:not([open]) .callout-content{
  display: none !important;
}

/* Optional: remove the default details marker/arrow */
details.callout[data-callout="private"] > summary.callout-title::-webkit-details-marker{
  display: none;
}



/*
=
=
=
=====================================================================================
MISC
=====================================================================================
=
=
=
*/


/* PAGE: DIFFERENT WIDTHS ======================================== */
body {
    --page-width-narrow: 800px;
    --page-width-wide: 1600px;


}

.published-container {
    --page-width: 4000px;
    /* --page-side-padding: 48px; */

    --sidebar-right-border-color: black ;
    --sidebar-right-border-color: 2px !important;

	--sidebar-font-size: var(--text-size-s)

    --sidebar-left-border-width: 1px;
    --sidebar-right-border-width: 1px;
}

.site-body-left-column, .site-body-right-column {
    min-height: 2000px;
}

.markdown-preview-view .markdown-preview-section > * {
  max-width: var(--page-width-narrow);
  margin-left: auto;
  margin-right: auto;
}

.markdown-preview-view div.el-p:has(img) {
  max-width: var(--page-width-wide);
  margin-left: auto;
  margin-right: auto;
}

/*
.markdown-rendered div.el-table,
.markdown-preview-view div.el-table {
  max-width: var(--page-width-wide);
}*/

.markdown-preview-view div.el-div:has(> .callout[data-callout="cards-table"]) {
  max-width: var(--page-width-wide);
}



/* SHOW YAML ========================================
.frontmatter {
  display: block !important;
} 
*/