/* Boostrap icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");

/* These are ugly; you should pick better ones for your site */
:root {
    --background: white;
    --navbar-background: green;
    --navbar-foreground: red; 
    --footer-background: cyan;
    --link: pink;
    --blockquote: gray;  
    --blockquote-border: darkred;
    --body-face: EB Garamond;
    --header-face: Varela Round;
}

body {
    background-color: var(--background);
    font-family: var(--body-face);
    font-size: 14pt;
    line-height: 1.4; 
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-face);
}

.container {
    max-width: 1300px;
}

.navbar-x {
    margin-left: 10px;
}

.main {
    margin-top: 80px;
    margin-left: 10px;
}

.block {
    margin-bottom: 15px;
    white-space: pre-line;	/* preserve newline */
}

.title {
    display: block;
    margin-bottom: 20px;
}

hr {
    width: 100%;    /* Otherwise hr s do not show up in blocks... */
}

.navbar {
    font-family: var(--header-face);
    background-color: var(--navbar-background);
    z-index: 1000;		/* should be greater than .graph */
}

.navbar-brand {
    /* margin-left: 26px; */
}

.nav-link {
    color: var(--navbar-foreground) !important;	
    font-weight: bold;
    padding-right: 1rem;
    padding-left: 1rem;
}

ul {
  list-style: none; /* Remove default bullets */
}

li {
    display: flex;
}

.page-content {
    /* A kludgy way to shift page content left so it aligns with title */
    margin-left: -80px;
}

/* Gyrations to get colored list bullets (which I don't even use any more, but should be an option )*/
.main ul li::before {
    /* content: "\2022";  bullet */
    /* content: "\2aa2";  my fave ⪢ */
    /* content: "\30fb";  */
    color: var(--link);
  /* color: #4E176E; 		 */
    display: inline-block; 
    vertical-align: top;
    margin-right: 0.5em;
}

/* Links */

a {
    color: var(--link); 
    font-weight: 550;	/* slightly bold */
    text-decoration: none;
}

a:hover {
    background-color: #eeeee0; 
    color: var(--link) !important; 
    box-shadow: 0 0 0 5px #eeeee0;
}

/* TODO these should be a bit more visually distinctive, but not sure how  */
.pagelink {
  font-family: var(--header-face);
  font-size: 91%;
}

.external:hover {
    background-image: url(external-link.svg);
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 13px;
}

.empty {
  pointer-events: none;
  color: red;
  opacity: 0.5;
  font-family: var(--header-face);
}

.self {
    color: var(--navbar-foreground);
    pointer-events: none;
}


h1, h2, h3 {
    display: inline;
}

h2 {
    font-size: 22px;
}

blockquote {
    white-space: break-spaces;
    background: var(--blockquote);
    padding-left: 20px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 0px;
    border-left: 3px solid var(--blockquote-border);
    border-radius: 10px; 	/* waffling over this */
}

/* Incoming links (sidebar) */
.incoming {

}

.incoming h3 {
    display: block;
    margin-bottom: 10px;
}

.incoming .block {
    font-size: 10pt;
}

.codeblock {
    white-space: break-spaces;    
}


/* Semantically, a link to a page that doesn't exist yet. We could just render as text, but this seems better */
.missing {
    color: gray;
}

.block-ref {
     border: 1px solid gray;
     padding: 5px;
}

.nondent {
    padding-inline-start: 0;
}

/* Main page content */
.main {
}

img {
    max-width: 90%;		/* TODO should have click-to-see-full-size as in Roam */
    margin-left: auto;		/* center */
    margin-right: auto;
}

.imga {
    /* center images */
    margin-left: auto;
    margin-right: auto;
}

.image-border {
    border: 1px solid lightgray;
    padding: 5px;
}

/* center videos (TODO not working, I think because they are within a <span>?a) */
iframe {
    margin-left: auto;
    margin-right: auto;
}

.date {
    font-family: var(--header-face);
    font-size: small;
}

.edit {
    margin-left: 5px;
}

.footer {
    font-family: var(--header-face);
    background-color: var(--footer-background);
}

/* For recent changes, should have more semantic name */
.pheader {
    margin-top: 1em;
    font-family: var(--header-face);    
}

.ragged {
    border-radius: 25px 15px 225px 15px/15px 225px 15px 255px;    
    border:dashed 3px var(--navbar-background);
    margin: 5px;
    margin-left: 15px;
    padding-left: 7px;
    padding-top: 7px;
}

.ragged .block {
    font-size: 10pt;
}

/* LH widget related */

.sidebar {
  overflow-x: hidden;
}

.minicard-body {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 11pt;
}

.gp-card-body {
    /* Will indent lines of long links */
    padding-left: 20px;
    text-indent: -8px;
    font-size: 12pt;
}


/* Search related */

#searchh {
    line-height: 2;
}

#searcht {
    float: right;
    display: flex;
    width: 70%;

}

#searchb {
    padding: 0.25rem;
}

#searcho {
    margin-left: 10px;
    margin-top: 5px;
    display: none;		/* Changed when results generated */
}

.searchentry {
    text-indent: -5px;
}

/* Empty search results */
.searchnada {
    color: gray;
    font-style: italic;
    padding-left: 30px;
}

/* Graph related */

.graph {
    z-index: 998;		/* big but less than .navbar */
    width: 100%;
    /* height is computed */
}

/* Sidenote related */

/* Sacrificing a goat to the CSS gods */
.sidenote {
    clear: right;
    position: absolute;
    display: inline-flex;	/* gets the vertical alignment right */
    left: 1120px;
    width: 360px;
    padding-right: 100px;
    /* padding-top: 10px;  puts some whitespace on top, but fucks with alignment of asterisks */    
    padding-bottom: 10px;
    font-size: 80%;
    z-index: 999;
    background: white;
}

.sidenote > .block {
    display: inline;
}

.sidenote > .nondent {
    display: inline;
}


/* this is kind of narrow, probably should widen the margin */
/* actually doesn't work as well as I thought */
.left-sidenote {
    left: -100px;
    width: 100px;
}

/* for sidenote supscripts */
/* Incredible rigamarole, CSS is an abomination unto god */

.sidenote-container {
    break-before: avoid;
    break-after: avoid;
    break-inside: avoid;
}

.superscript {
    position: relative;
    top: -0.3rem;
    margin-left: 0;
    color: var(--link);
}

.superscript::before {
    content: "*"; 
}

/* combine with .superscript to render in sidebar */
.side {
    left: -0.5rem;
    width: 0px;
    color: var(--link);
    float: left;
}

.error {
    background: pink;
    border: 1px solid red;
}

/* When we show all blocks, highlight the private ones */
.excluded {
    background: lightgoldenrodyellow;
    padding-top: 10px;		/* don't ask */
}

/* This makes internal hrefs scroll to visibility. See https://css-tricks.com/hash-tag-links-padding/ */
ul::before { 
  display: block; 
  content: " "; 
  margin-top: -65px; 
  height: 65px; 
  visibility: hidden; 
  pointer-events: none;
}

.ulz {
    padding-left: 0;
}

/* Gets removed by js when running from a local server */
.local {
    display: none;
}