/* ====================================== */
/* ===== TYRANGELION PARCHEMENT THEME ==== */
/* ====================================== */

/* ===== LOAD FONT (must be at top) ===== */
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Almendra+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Glass+Antiqua&display=swap');


/* MAIN PAGE PARCHEMENT */

body {

  background: #EEE7DD;
  color: #2e2a25;

}


/* NAVIGATION (MAHOGANY) */

.nav-files-container,
.nav-folder-title,
.nav-file-title,
.workspace-split.mod-left-split {

  background: linear-gradient(
    180deg,
    #5a1f1f 0%,
    #3e1414 100%
  );

  color: #EEE7DD;

}

.nav-file-title:hover,
.nav-folder-title:hover {

  background: rgba(255,255,255,0.08);

}


/* MAIN CONTENT AREA WITH PARCHEMENT TEXTURE */

.markdown-preview-view {

  background:
    linear-gradient(
      rgba(238,231,221,0.92),
      rgba(238,231,221,0.92)
    ),
    url("zIMAGES/parchment-texture.png");

  background-size: 700px;
  background-repeat: repeat;

  border-radius: 8px;

  padding: 2rem;

}


/* RIGHT GRAPH PANEL */

.graph-view-container,
.workspace-leaf-content[data-type="graph"] {

  background: linear-gradient(
    180deg,
    #e9dfd2 0%,
    #dcd1c2 100%
  );

}


/* LINK COLORS */

a {
  color: #7a2e2e;
}

a:hover {
  color: #a03a3a;
}


/* CALLOUT / INFOBOX STYLE */

.callout {

  background: linear-gradient(
    135deg,
    #f7f2ea 0%,
    #eee7dd 45%,
    #e2d8cb 100%
  );

  border: 1px solid rgba(120,95,60,0.25);

  box-shadow:
    0 6px 18px rgba(90,70,40,0.18),
    0 0 25px rgba(120,95,60,0.12);

}


/* GENERAL BORDERS */

hr {

  border-color: rgba(120,95,60,0.25);

}


/* ===================================== */
/* ===== DIOCTIONARY CHARACTER CARDS ==== */
/* ===================================== */

.dioctionary-row {

  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2.5rem;

  margin: 3rem auto;

  flex-wrap: wrap;
  width: 100%;

}


.dioctionary-card {

  position: relative;

  width: 170px;
  aspect-ratio: 2 / 3;

  border-radius: 18px;

  overflow: visible;

  background: linear-gradient(
    135deg,
    #f7f2ea 0%,
    #eee7dd 45%,
    #e2d8cb 100%
  );

  border: 1px solid rgba(120,95,60,0.25);

  box-shadow:
    0 6px 18px rgba(90,70,40,0.18),
    0 0 25px rgba(120,95,60,0.12);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;

  z-index: 1;

}


.dioctionary-card:hover {

  transform: translateY(-10px) scale(1.04);

  box-shadow:
    0 12px 28px rgba(90,70,40,0.25),
    0 0 40px rgba(120,95,60,0.2);

  z-index: 10;

}


.dioctionary-card img {

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;

  border-radius: 18px;

}


.dioctionary-card a {

  display: block;
  width: 100%;
  height: 100%;

}


/* TOOLTIP */

.dioctionary-tooltip {

  position: absolute;

  bottom: -95px;
  left: 50%;

  transform: translateX(-50%) translateY(10px);

  width: 220px;

  padding: 0.9rem 1rem;

  border-radius: 14px;

  background: linear-gradient(
    135deg,
    #f7f2ea 0%,
    #eee7dd 45%,
    #e2d8cb 100%
  );

  border: 1px solid rgba(120,95,60,0.25);

  box-shadow:
    0 6px 18px rgba(90,70,40,0.18),
    0 0 25px rgba(120,95,60,0.12);

  color: #2e2a25;

  font-size: 0.85rem;
  text-align: center;

  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;

  z-index: 9999;

}


.dioctionary-card:hover > .dioctionary-tooltip {

  opacity: 1;
  transform: translateX(-50%) translateY(0);

}


/* ===== MAHOGANY LEFT SIDEBAR ===== */

.site-body-left-column,
.site-body-left-column-inner,
.nav-view-outer,
.nav-view-inner {

  background: linear-gradient(
    180deg,
    #5a1f1f 0%,
    #3e1414 100%
  ) !important;

  color: #EEE7DD !important;

}


/* SIDEBAR TEXT */

.site-body-left-column a,
.site-body-left-column .nav-file-title,
.site-body-left-column .nav-folder-title {

  color: #EEE7DD !important;

}


/* SIDEBAR HOVER */

.site-body-left-column a:hover,
.nav-file-title:hover,
.nav-folder-title:hover {

  background: rgba(255,255,255,0.08) !important;

}

/* ===== FORCE LEFT SIDE MAHOGANY AREA ===== */

.site-body {
  background: linear-gradient(
    180deg,
    #6e2b2b 0%,
    #4a1a1a 45%,
    #2b0d0d 100%
  ) !important;
}

/* keep the sidebar the same color */

.site-body-left-column,
.site-body-left-column-inner {
  background: transparent !important;
}


/* ===== FIX SIDEBAR NOTE + FOLDER COLORS ===== */

/* notes */
.tree-item-self .tree-item-inner {
  color: #EEE7DD !important;
  font-weight: 400;
}

/* folders */
.tree-item-self.nav-folder-title .tree-item-inner {
  color: #EEE7DD !important;
  font-weight: 700;
}

/* ===== MAKE ALL SIDEBAR FOLDERS BOLD ===== */

/* normal notes */
.tree-item .tree-item-self .tree-item-inner {
  font-weight: 400 !important;
}

/* folders (tree items that contain children) */
.tree-item:has(.tree-item-children) .tree-item-inner {
  font-weight: 700 !important;
}

/* ===== SIDEBAR FOLDERS FONT ===== */

.tree-item:has(.tree-item-children) .tree-item-inner {

  font-family: "UnifrakturMaguntia", serif !important;

  font-weight: normal !important;

  letter-spacing: 0.03em;

}


/* ===== MAIN SITE FONT ===== */

body {

  --font-text-theme: "Almendra SC", serif;
  --font-interface-theme: "Almendra SC", serif;

}


/* ===== OPTIONAL READABILITY TWEAKS ===== */

body {

  letter-spacing: 0.04em;
  line-height: 1.6;

}

/* ===== GLOBAL LINK COLOR (MAHOGANY) ===== */

a,
.internal-link,
.cm-hmd-internal-link,
.external-link {

  color: #5A1F14 !important;   /* rich mahogany */

  text-decoration: none;
  font-weight: 500;

}


/* ===== HOVER STATE ===== */

a:hover,
.internal-link:hover,
.external-link:hover {

  color: #7A2A1C !important;   /* slightly brighter mahogany */
  text-decoration: underline;

}


/* ===== VISITED LINKS ===== */

a:visited,
.internal-link:visited {

  color: #5A1F14 !important;

}


/* ===== ACTIVE CLICK ===== */

a:active {

  color: #3B140C !important;

}

/* ===================================== */
/* ===== WIKIPEDIA STYLE INFOBOX ======= */
/* ===================================== */

.callout[data-callout="infobox"] {

  float: right;
  width: 340px;
  margin: 0 0 1.5rem 1.5rem;

  background: #F3EEE6;
  border: 1px solid #D8CFC3;
  border-radius: 10px;

  box-shadow: 0 3px 8px rgba(0,0,0,.08);
  padding: 0.8rem;

}


/* ===== INFOBOX HEADER ===== */

.callout[data-callout="infobox"] .callout-title {

  font-weight: 600;
  font-size: 1.05rem;

  color: #5A1F14;
  border-bottom: 1px solid #D8CFC3;
  padding-bottom: .4rem;
  margin-bottom: .6rem;

}


/* ===== SECTION HEADERS ===== */

.callout[data-callout="infobox"] h5 {

  text-align: center;
  color: #5A1F14;
  margin-top: .9rem;
  margin-bottom: .4rem;

}


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

.callout[data-callout="infobox"] img {

  width: 100%;
  border-radius: 8px;
  margin-bottom: .6rem;

}


/* ===== TABLE ===== */

.callout[data-callout="infobox"] table {

  width: 100%;
  font-size: .9rem;
  border-collapse: collapse;

}

.callout[data-callout="infobox"] td {

  padding: .25rem .3rem;
  vertical-align: top;

}


/* ===== FIRST COLUMN LABELS ===== */

.callout[data-callout="infobox"] td:first-child {

  font-weight: 600;
  color: #7A2A1C;
  width: 40%;

}


/* ===== LINKS IN INFOBOX ===== */

.callout[data-callout="infobox"] a {

  color: #7A2A1C;

}


/* ===================================== */
/* ===== MOBILE SAFETY ================= */
/* ===================================== */

@media (max-width: 900px) {

  .callout[data-callout="infobox"] {

    float: none;
    width: 100%;
    margin: 1rem 0;

  }

}

/* ================================= */
/* ===== SIDEBAR NOTE COLORS ======= */
/* ================================= */

/* normal notes */
.site-body-left-column a {
  color: #EEE7DD !important;   /* parchment */
}


/* visited notes (two shades darker parchment/mahogany blend) */
.site-body-left-column a:visited {
  color: #B79F8A !important;
}


/* hover */
.site-body-left-column a:hover {
  color: #F4ECE3 !important;
}


/* active/open note */
.site-body-left-column .tree-item.is-active .tree-item-inner {
  color: #F7F0E7 !important;
}

/* ================================= */
/* ===== GLOBAL CALLOUT STYLE ====== */
/* ================================= */

.callout {

  border: 1px solid #5A1F14;
  border-radius: 10px;

  background: #F4EEE6;
  box-shadow: 0 3px 6px rgba(0,0,0,.08);

  padding: 0;
  margin: 1rem 0;
  overflow: hidden;

}


/* ================================= */
/* ===== CALLOUT HEADER BAR ======== */
/* ================================= */

.callout-title {

  background: #5A1F14;              /* mahogany header */
  color: #EEE7DD;                   /* parchment text */

  padding: .6rem .9rem;
  font-weight: 700;

  border-bottom: none;

}


/* ================================= */
/* ===== CALLOUT ICON COLOR ======== */
/* ================================= */

.callout-icon svg {

  color: #EEE7DD !important;        /* parchment icon */

}


/* ================================= */
/* ===== CALLOUT BODY CONTENT ====== */
/* ================================= */

.callout-content {

  padding: .75rem .9rem;
  color: #3A2B22;

}

/* ================================= */
/* ===== REMOVE SIDEBAR GRADIENT === */
/* ================================= */

.nav-view-outer,
.nav-view-container,
.site-body-left-column {

  background: #5A1F14 !important;   /* solid mahogany */
  background-image: none !important;

}


/* ================================= */
/* ===== SIDEBAR TITLE COLOR ======= */
/* ================================= */

.site-title,
.nav-view-outer .site-title {

  color: #EEE7DD !important;        /* parchment color */
  font-weight: 700 !important;

}


/* ================================= */
/* ===== SIDEBAR TREE TEXT COLOR === */
/* ================================= */

.nav-folder-title,
.nav-file-title {

  color: #EEE7DD !important;

}


/* ================================= */
/* ===== REMOVE GRADIENT OVERLAY === */
/* ================================= */

.nav-view-outer::before,
.nav-view-outer::after {

  display: none !important;

}

/* ================================= */
/* ===== RIGHT SIDEBAR TEXT COLOR == */
/* ================================= */

/* general text in right panel */
.site-body-right-column,
.site-body-right-column * {
  color: #5A1F14 !important;
}


/* ================================= */
/* ===== GRAPH TITLE =============== */
/* ================================= */

.site-body-right-column .view-header-title {
  color: #5A1F14 !important;
}


/* ================================= */
/* ===== GRAPH SVG TEXT ============ */
/* ================================= */

/* node labels inside the graph */
.site-body-right-column svg text {
  fill: #5A1F14 !important;
}

/* graph UI icons */
.site-body-right-column svg {
  fill: #5A1F14 !important;
}


/* ================================= */
/* ===== POWERED BY OBSIDIAN ======= */
/* ================================= */

.site-body-right-column .graph-controls,
.site-body-right-column .graph-controls * {
  color: #5A1F14 !important;
}


/* ================================= */
/* ===== ON THIS PAGE PANEL ======== */
/* ================================= */

.site-body-right-column .outline-view,
.site-body-right-column .outline-view * {
  color: #5A1F14 !important;
}

/* ================================= */
/* ===== GRAPH NODE CIRCLES ======== */
/* ================================= */

.site-body-right-column svg circle {

  fill: #5A1F14 !important;      /* mahogany nodes */
  stroke: #EEE7DD !important;    /* parchment ring */
  stroke-width: 1.5px;

}


/* ================================= */
/* ===== GRAPH NODE TEXT =========== */
/* ================================= */

.site-body-right-column svg text {

  fill: #5A1F14 !important;      /* mahogany labels */
  font-weight: 500;

}


/* ================================= */
/* ===== GRAPH EDGE LINES ========== */
/* ================================= */

.site-body-right-column svg line,
.site-body-right-column svg path {

  stroke: #CBB7A3 !important;    /* soft parchment line */
  opacity: .8;

}


/* ================================= */
/* ===== NODE HOVER COLOR ========== */
/* ================================= */

.site-body-right-column svg circle:hover {

  fill: #7A2A1C !important;      /* brighter mahogany hover */

}


/* ================================= */
/* ===== REMOVE PURPLE HOVER ======= */
/* ================================= */

.site-body-right-column svg .highlight {

  fill: #7A2A1C !important;

}


/* ================================= */
/* ===== FADED NODES ON HOVER ====== */
/* ================================= */

.site-body-right-column svg .faded {

  opacity: .35 !important;
  fill: #BFAF9E !important;      /* faded parchment */

}

/* ================================= */
/* ===== SITE FONT VARIABLES ======= */
/* ================================= */

body {

  --font-text-theme: "Metamorphous", serif;
  --font-interface-theme: "Metamorphous", serif;

}


/* ================================= */
/* ===== REMOVE LEFT BAR INDICATOR == */
/* ================================= */

.site-body-left-column .tree-item-self {
  border-left: none !important;
}


/* ================================= */
/* ===== REMOVE DEFAULT ARROWS ===== */
/* ================================= */

.site-body-left-column .tree-item-icon {
  display: none !important;
}


/* ================================= */
/* SIDEBAR ARROW ALIGNMENT FIX       */
/* ================================= */

.site-body-left-column .tree-item-self {

  display: flex;
  align-items: center;

}

.site-body-left-column .tree-item-self::before {

  content: "🜁";
  color: #EEE7DD;
  margin-right: 5px;
  font-size: 15px;
  width: 15px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: transform 0.35s ease;
}


/* rotate when open */
.site-body-left-column
.tree-item:not(.is-collapsed)
> .tree-item-self::before {

  transform: rotate(180deg); transform 0.35s ease;

}

/* ================================= */
/* ALWAYS BOLD SIDEBAR FOLDERS       */
/* ================================= */

/* Most likely Publish folder structures */
.site-body-left-column .tree-item:has(> .tree-item-children) > .tree-item-self,
.site-body-left-column .tree-item:has(> .tree-item-children) > .tree-item-self .tree-item-inner,
.site-body-left-column .tree-item:has(> .tree-item-children) > .tree-item-self a,
.site-body-left-column .tree-item-self:has(.tree-item-collapse),
.site-body-left-column .tree-item-self:has(.tree-item-collapse) .tree-item-inner,
.site-body-left-column .tree-item-self:has(.tree-item-collapse) a,
.site-body-left-column .tree-item-collapse + .tree-item-self,
.site-body-left-column .tree-item-collapse + .tree-item-self .tree-item-inner,
.site-body-left-column .tree-item-collapse + .tree-item-self a {
  font-weight: 700 !important;
}

/* ================================= */
/* BOLD FOLDERS, NORMAL NOTES       */
/* ================================= */

/* make everything bold first */
.site-body-left-column .tree-item-self {
  font-weight: 700;
}

/* notes (links) go back to normal */
.site-body-left-column .tree-item-self a {
  font-weight: 400;
}

/* ================================= */
/* GLASS ANTIQUA — BODY TEXT ONLY    */
/* ================================= */

/* body paragraph text */
.markdown-preview-view p,
.markdown-preview-view li,
.markdown-preview-view blockquote,
.markdown-preview-view td,
.markdown-preview-view th {

  font-family: "Glass Antiqua", serif !important;

}

/* ================================= */
/* COMPACT SIDEBAR TREE SPACING      */
/* ================================= */

/* reduce vertical padding per row */
.site-body-left-column .tree-item-self {

  padding-top: 0px !important;
  padding-bottom: 0px !important;

}

/* remove extra spacing between nested tree items */
.site-body-left-column .tree-item {

  margin-top: 0 !important;
  margin-bottom: 0 !important;

}

/* tighten child containers */
.site-body-left-column .tree-item-children {

  margin-top: 0 !important;
  margin-bottom: 0 !important;

}

/* ================================= */
/* HARD 3D PLAQUE HEADER SYSTEM      */
/* ================================= */


/* ---------- PLAQUE HEADERS ---------- */

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h4,
.markdown-preview-view h5 {

  display:block !important;
  width:100% !important;

  padding:8px 16px;
  margin-top:26px;
  margin-bottom:14px;

  color:#EEE7DD !important;

  background:linear-gradient(
      to bottom,
      #7A2E1D 0%,
      #5A1F14 50%,
      #3F140C 100%
  );

  border:2px solid transparent;

  border-image:linear-gradient(
      135deg,
      #6F5A1A,
      #B89A3C,
      #E8C96A,
      #FFF1A8
  ) 1;

  /* HARD BEVEL + SHADOW */

  box-shadow:

    inset 0 2px 0 rgba(255,255,255,0.35),
    inset 0 -2px 0 rgba(0,0,0,0.65),

    inset 2px 0 0 rgba(0,0,0,0.45),
    inset -2px 0 0 rgba(0,0,0,0.45),

    0 3px 0 #2A0D07,
    0 8px 16px rgba(0,0,0,0.35);

  /* diamond cut plaque */

  clip-path:polygon(
    12px 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    12px 100%,
    0 calc(100% - 12px),
    0 12px
  );

}



/* ---------- HEADER 3 (SPECIAL) ---------- */

.markdown-preview-view h3 {

  display:inline-block;

  padding:8px 18px;
  margin-top:26px;
  margin-bottom:14px;

  color:#EEE7DD;

  background:linear-gradient(
      to bottom,
      #7A2E1D,
      #5A1F14,
      #3F140C
  );

  border:2px solid transparent;

  border-image:linear-gradient(
      135deg,
      #6F5A1A,
      #B89A3C,
      #E8C96A,
      #FFF1A8
  ) 1;

  box-shadow:

    inset 0 2px 0 rgba(255,255,255,0.35),
    inset 0 -2px 0 rgba(0,0,0,0.65),

    inset 2px 0 0 rgba(0,0,0,0.45),
    inset -2px 0 0 rgba(0,0,0,0.45),

    0 3px 0 #2A0D07,
    0 8px 16px rgba(0,0,0,0.35);

  clip-path:polygon(
    12px 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    12px 100%,
    0 calc(100% - 12px),
    0 12px
  );

  position:relative;
  overflow:hidden;

}



/* ---------- H3 SHIMMER ---------- */

.markdown-preview-view h3::after {

  content:"";
  position:absolute;

  top:0;
  left:-120%;

  width:240%;
  height:100%;

  background:linear-gradient(
      110deg,
      transparent 40%,
      rgba(255,255,255,0.6) 50%,
      transparent 60%
  );

  animation:headerShimmer 5s linear infinite;

  pointer-events:none;

}



@keyframes headerShimmer {

  from { transform:translateX(-50%); }
  to { transform:translateX(50%); }

}



/* ---------- HEADER 6 (NO PLAQUE) ---------- */

.markdown-preview-view h6 {

  background:none;
  border:none;
  box-shadow:none;

  color:#5A1F14 !important;

}



/* ================================= */
/* HEADER TYPOGRAPHY SCALE           */
/* ================================= */

.markdown-preview-view h1 { font-size:2.2rem; font-weight:700; }
.markdown-preview-view h2 { font-size:1.9rem; font-weight:700; }
.markdown-preview-view h3 { font-size:1.6rem; font-weight:700; }
.markdown-preview-view h4 { font-size:1.35rem; font-weight:600; }
.markdown-preview-view h5 { font-size:1.15rem; font-weight:600; }
.markdown-preview-view h6 { font-size:0.95rem; font-weight:600; }



/* ================================= */
/* REMOVE INFOBOX TITLE BAR          */
/* ================================= */

.callout[data-callout="infobox"] .callout-title {

  display: none;

}

/* ================================= */
/* JUSTIFY NOTE BODY TEXT            */
/* ================================= */

.markdown-preview-view p {

  text-align: justify;

}


/* ================================= */
/* DIOCTIONARY GRAPH THEME           */
/* ================================= */

/* --- Graph panel engraved plate --- */
.graph-view {

  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25)),
    #2A2A2A;

  border: 2px solid #B89A3C;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.15),
    inset 0 -2px 0 rgba(0,0,0,0.6),
    0 6px 12px rgba(0,0,0,0.35);

  border-radius: 6px;

}


/* --- Normal nodes (mahogany) --- */
.graph-view.color-fill {
  color: #6A2A1B;
}


/* --- Current / focused node (gold) --- */
.graph-view.color-fill-highlight,
.graph-view.color-fill-focused {
  color: #D4AF37;
}


/* --- Node labels (parchment) --- */
.graph-view.color-text {
  color: #EEE7DD;
}


/* --- Default connection lines --- */
.graph-view.color-line {
  color: #7A3B2B;
}


/* --- Hovered connection lines --- */
.graph-view.color-line-highlight {
  color: #A5523A;
}


/* --- Arrows --- */
.graph-view.color-arrow {
  color: #7A3B2B;
}


/* --- Tag nodes --- */
.graph-view.color-fill-tag {
  color: #7A3B2B;
}


/* --- Attachment nodes --- */
.graph-view.color-fill-attachment {
  color: #7A3B2B;
}


/* --- Unresolved notes --- */
.graph-view.color-fill-unresolved {
  color: #C05A4A;
}

/* ================================= */
/* REMOVE "POWERED BY OBSIDIAN"      */
/* ================================= */

a[href*="obsidian.md"] {
  display: none !important;
}

/* ================================= */
/* CUSTOM HORIZONTAL RULE STYLE      */
/* ================================= */

hr {

  border: none;
  height: 1px;
  background: #6A2A1B;
  margin: 40px 0;
  position: relative;

}

/* center symbol */

hr::after {

  content: "🜁";
  position: absolute;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  background: #EEE7DD; /* parchment behind symbol */

  padding: 0 12px;

  color: #6A2A1B;
  font-size: 18px;

}

/* ================================= */
/* DIOCTIONARY DIVIDER               */
/* ================================= */

.markdown-rendered hr {
  border: none;
  border-top: 2px solid #6A2A1B;
  margin: 40px 0;
}