/* publish.css — styling for your Obsidian Publish site.
   Book of Hours dark theme (dark mode only). */

/* ============================================================
   FONTS
   EB Garamond = the game's Latin body font (free).
   Yeseva One  = used in-game for numerals; free stand-in for the
                 commercial "Titania" display face.
   Cinzel      = inscriptional caps for headings (occult-tome feel).
   If Obsidian Publish's CSP ever blocks this @import, self-host the
   font files in the vault and swap this for @font-face rules.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cinzel:wght@400;600&family=Yeseva+One&display=swap');

/* ============================================================
   PALETTE — override Obsidian's theme variables for BOTH themes,
   so the site is always the Book of Hours "candlelit parchment"
   look regardless of the reader's light/dark preference.

   Principle colours (--boh-*) are EXACT game values.
   Chrome colours are a faithful hand-matched reconstruction.
   ============================================================ */
.theme-dark,
.theme-light {
  /* --- surfaces: the dark table --- */
  --background-primary:        #0C0B0B;
  --background-primary-alt:    #131111;
  --background-secondary:      #131111;
  --background-secondary-alt:  #1A1717;
  --background-modifier-border:#A38851;   /* light bronze dividers/borders */
  --background-modifier-hover: #1A1717;

  /* --- ivory on near-black --- */
  --text-normal:   #F8EED9;
  --text-muted:    #CABC98;
  --text-faint:    #8a7a5c;
  --text-on-accent:#0C0B0B;
  --bold-color:    #FFFBEF;

  /* --- antique gold accents / links --- */
  --text-accent:        #A38851;   /* Origins-logo bronze (exact) */
  --text-accent-hover:  #C2A366;
  --interactive-accent: #A38851;
  --interactive-accent-hover: #C2A366;
  --text-selection:     rgba(163, 137, 82, 0.28);
  --h1-color:           #A38851;

  /* --- fonts --- */
  --font-text-theme: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-text:       'EB Garamond', Garamond, 'Times New Roman', serif;

  /* --- the 13 exact Principle colours, for reuse --- */
  --boh-edge:    #D6DD49;
  --boh-forge:   #FF8E3E;
  --boh-grail:   #FF614F;
  --boh-heart:   #FF7E8B;
  --boh-knock:   #B54EFC;
  --boh-lantern: #FFE300;
  --boh-moon:    #CBBCD6;
  --boh-moth:    #F1E9C2;
  --boh-nectar:  #2CD391;
  --boh-rose:    #EF63FF;
  --boh-scale:   #CB9F4D;
  --boh-sky:     #2C69E1;
  --boh-winter:  #BDEFFF;
  /* Secret Histories: not a BoH principle (Rose replaces it); this is
     the canonical pink of that lineage, a touch more magenta than Rose. */
  --boh-secrethistories: #FF6EF2;

  /* Elements of the Soul — exact per-element colours from the
     Book of Hours wiki. */
  --boh-chor:    #EC69B2;
  --boh-ereb:    #7A66CC;
  --boh-fet:     #5D7ED0;
  --boh-health:  #FF4552;
  --boh-mettle:  #F7902C;
  --boh-phost:   #FFDB47;
  --boh-shapt:   #B7226C;
  --boh-trist:   #7BA2BD;
  --boh-wist:    #A75BD3;

  /* Wisdoms — predominant non-black colour of each icon */
  --boh-birdsong:      #ED61FD;
  --boh-bosk:          #2DD291;
  --boh-horomachistry: #2967E0;
  --boh-hushery:       #BDEFFF;
  --boh-illumination:  #D6DD49;
  --boh-ithastry:      #FD8E3C;
  --boh-nyctodromy:    #CBBAD5;
  --boh-preservation:  #FD7D8B;
  --boh-skolekosophy:  #CB9F4C;

  /* Origins — shared gold-outline colour from the memory cards */
  --boh-origin:        #A38851;

  /* The five Histories */
  --boh-firsthistory:  #FFE300;
  --boh-secondhistory: #FF6EF2;
  --boh-thirdhistory:  #BDEFFF;
  --boh-fourthhistory: #FF8E3E;
  --boh-fifthhistory:  #2CD391;

  /* Aspects / Seasons / Memories — the Origins bronze accent (same as
     headers, dividers, and links) for a consistent standout tag colour. */
  --boh-aspect:        #A38851;
}

/* ============================================================
   BASE
   ============================================================ */
body,
.published-container,
.markdown-preview-view {
  background-color: var(--background-primary);
  color: var(--text-normal);
  font-family: 'EB Garamond', Garamond, 'Times New Roman', serif;
}

.markdown-preview-view {
  font-size: 1.12em;
  line-height: 1.7;
}

/* ============================================================
   HEADINGS — inscriptional display face, gilded
   ============================================================ */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6,
.markdown-preview-view .inline-title,
.published-container .inline-title,
.site-body-left-column .site-name {
  font-family: 'Cinzel', 'EB Garamond', serif;
  color: #A38851;
  font-weight: 600;
  letter-spacing: 0.015em;
}

.markdown-preview-view h1 {
  border-bottom: 1px solid var(--background-modifier-border);
  padding-bottom: 0.2em;
}

/* The page title (Obsidian's inline note title) — match the header font.
   !important so it wins over Publish's default title font. */
/* Page title. Obsidian PUBLISH renders the note title as div.extra-title
   (the desktop app uses .inline-title, which is why the earlier rule did
   nothing on the site). Match the header font, force caps, and gild it.
   !important to beat Publish's default title styling. */
.extra-title,
.inline-title,
.published-container .extra-title,
.published-container .inline-title {
  font-family: 'Cinzel', 'EB Garamond', serif !important;
  text-transform: uppercase !important;   /* caps on the site, normal-case note names */
  color: #A38851 !important;
  font-weight: 600;
  letter-spacing: 0.015em;
}

/* Numerals / drop-accent flourish, if you tag any with .numeral */
.numeral {
  font-family: 'Yeseva One', 'EB Garamond', serif;
}

/* ============================================================
   LINKS — gold, underlining on hover
   ============================================================ */
.markdown-preview-view a,
.markdown-preview-view a.internal-link {
  color: var(--text-accent);
  text-decoration: none;
}
.markdown-preview-view a:hover,
.markdown-preview-view a.internal-link:hover {
  color: var(--text-accent-hover);
  text-decoration: underline;
}

/* Coloured links: principle/element/skill names are internal links wrapped
   in a <font color>. Obsidian Publish colours internal links with the accent
   (bronze) at a HIGHER specificity than a plain "inherit" rule, which was
   overriding the font colour on the published site (but not in the desktop
   app, where publish.css doesn't load). Force the link to take its <font>
   colour everywhere. Scoped to <a> inside <font>, so no other links change. */
font a,
font a.internal-link,
span[style*="!important"] a,
span[style*="!important"] a.internal-link {
  color: inherit !important;
}

/* ============================================================
   BLOCKQUOTES / RULES / CODE — quiet, warm
   ============================================================ */
.markdown-preview-view blockquote {
  border-left: 3px solid var(--text-accent);
  background: var(--background-secondary);
  color: var(--text-muted);
  font-style: italic;
}

.markdown-preview-view hr {
  border: none;
  border-top: 1px solid var(--background-modifier-border);
}

.markdown-preview-view code,
.markdown-preview-view pre {
  background: #070606;
  color: #E9DEC4;
}

/* ============================================================
   NAVIGATION SIDEBAR
   ============================================================ */
.site-body-left-column,
.site-body-left-column .nav-file-title,
.site-body-left-column .nav-folder-title {
  background-color: var(--background-secondary);
  color: var(--text-muted);
}
.site-body-left-column .nav-file-title:hover,
.site-body-left-column .nav-folder-title:hover {
  color: var(--text-accent-hover);
}
.site-body-left-column .nav-file-title.is-active {
  color: var(--text-accent);
}

/* Hide utility folders from the published nav sidebar. The Images folder
   stays PUBLISHED (embedded icons must be, to render) — this only removes
   it from the public nav tree. Add more folders to the list as needed. */
.site-body-left-column .nav-folder:has(> .nav-folder-title[data-path="z_Appendices"]) {
  display: none !important;
}

/* ============================================================
   ASPECT UTILITY CLASSES (optional)
   Lets you write <span class="a-forge">Forge</span> instead of
   inline <font color>. Colours match the exact Principle values.
   ============================================================ */
.a-edge    { color: var(--boh-edge); }
.a-forge   { color: var(--boh-forge); }
.a-grail   { color: var(--boh-grail); }
.a-heart   { color: var(--boh-heart); }
.a-knock   { color: var(--boh-knock); }
.a-lantern { color: var(--boh-lantern); }
.a-moon    { color: var(--boh-moon); }
.a-moth    { color: var(--boh-moth); }
.a-nectar  { color: var(--boh-nectar); }
.a-rose    { color: var(--boh-rose); }
.a-scale   { color: var(--boh-scale); }
.a-sky     { color: var(--boh-sky); }
.a-winter  { color: var(--boh-winter); }
.a-secrethistories { color: var(--boh-secrethistories); }
/* Elements of the Soul */
.a-chor    { color: var(--boh-chor); }
.a-ereb    { color: var(--boh-ereb); }
.a-fet     { color: var(--boh-fet); }
.a-health  { color: var(--boh-health); }
.a-mettle  { color: var(--boh-mettle); }
.a-phost   { color: var(--boh-phost); }
.a-shapt   { color: var(--boh-shapt); }
.a-trist   { color: var(--boh-trist); }
.a-wist    { color: var(--boh-wist); }
/* Wisdoms */
.a-birdsong      { color: var(--boh-birdsong); }
.a-bosk          { color: var(--boh-bosk); }
.a-horomachistry { color: var(--boh-horomachistry); }
.a-hushery       { color: var(--boh-hushery); }
.a-illumination  { color: var(--boh-illumination); }
.a-ithastry      { color: var(--boh-ithastry); }
.a-nyctodromy    { color: var(--boh-nyctodromy); }
.a-preservation  { color: var(--boh-preservation); }
.a-skolekosophy  { color: var(--boh-skolekosophy); }
/* Origins (shared gold outline) */
.a-origin { color: var(--boh-origin); }
/* The five Histories */
.a-firsthistory  { color: var(--boh-firsthistory); }
.a-secondhistory { color: var(--boh-secondhistory); }
.a-thirdhistory  { color: var(--boh-thirdhistory); }
.a-fourthhistory { color: var(--boh-fourthhistory); }
.a-fifthhistory  { color: var(--boh-fifthhistory); }
/* Aspects (shared gold) */
.a-aspect { color: var(--boh-aspect); }

/* ============================================================
   SIXTH HISTORY LICENCE FOOTER
   ============================================================ */
.sixth-history-footer {
  margin-top: 4em;
  padding-top: 1em;
  border-top: 1px solid var(--background-modifier-border);
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--text-muted);
  /* Image on the left, text block beside it, both vertically centered. */
  display: flex;
  align-items: center;
  gap: 1.25em;
  text-align: left;
}

.sixth-history-text {
  flex: 1;
}

.sixth-history-footer p {
  margin: 0.4em 0;
}

.sixth-history-footer a {
  color: var(--text-muted);
  text-decoration: underline;
}

.sixth-history-logo {
  /* Scale the logo down to sit next to the text block, keeping ratio.
     align-self: stretch makes it match the text block's height. */
  align-self: stretch;
  width: auto;
  height: auto;
  max-height: 8em;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0;
  /* The licence logo is black artwork; the site is always dark, so
     invert it unconditionally to keep it legible. */
  filter: invert(1);
}