/* lightgodfaith.css */

/* CSS Variables */

:root {
	--color-background: #ffffff;
	--color-default: #000000;
	--color-default-shadow: rgba(0,0,0,0.5);
	--color-default-box: #EAEAEA;
	--color-accent: #55006B;
	--color-accent-box: #E6D9E9;
	--color-red: #E21304;
	--color-red-bg: #E2130420;
	--color-orange: #F94C09;
	--color-yellow: #C2C40C;
	--color-green: #2FAD01;
	--color-blue: #0B19F3;
	--color-indigo: #3900C7;
	--color-violet: #3A0085;
	--font-weight-extra-light: 200;
	--font-weight-light: 360;
	--font-weight-regular: 420;
	--font-weight-medium: 500; /* N/A for fixed Source Serif & Source Code Pro */
	--font-weight-semibold: 633;
	--font-weight-bold: 700;
	--font-weight-black: 900;
	--font-size-h1: 2.8em;
	--font-size-h2: 1.85em;
	--font-size-h3: 1.55em;
	--font-size-h4: 1.39em;
	--font-size-h5: 1.23em;
	--font-size-h6: 1.15em;
	--font-size-body: 17pt;
	--font-size-quote: 0.975em;
	--font-size-notes: 0.935em;
	--font-size-sources: 0.8em;
	--font-size-caption: 0.675em;
	--font-size-code: 0.9em;
	--indent-quote: 24pt; /* 0.33in */
	--indent: 12pt; /* 0.165in */

    --sidebar-indent: 8pt;
	--margin-top: 1.0em;
	--margin-bottom: 1.0em;
	--body-padding: 18pt; /* 0.25in */
	--line-height: 1.3em;
	--font-family-sans: "Source Sans VF", "Helvetica", sans-serif; /* Non-standard, must be included */
	--font-family-serif: "Source Serif VF", "Garamond", serif; /* Non-standard, must be included */
	--font-family-mono: "Source Code Pro VF", "Courier New", monospace;  /* Non-standard, must be included */
	--border-radius: 1.5em;
	--border-radius-div: 1.25em;
	--border-radius-sub: 1.0em;
	--box-shadow: 0px 1px 2px 0px var(--color-default);
	--box-shadow-active: 0px 1px 2px 0px var(--color-background);
}

/* HTML TAGS */

/* Universal Reset */
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  font-family: var(--font-family-sans);
  color: var(--color-default);
  background-color: var(--color-background);

}
body {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  font-kerning: normal;
  letter-spacing: normal;
  text-align: justify;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  line-height: var(--line-height);
  padding: var(--body-padding);
}
img, picture, video, canvas, svg {
  display: inline-block;
  max-width: 95%;
  margin: 1.25em 0.5em;
  break-inside: avoid;
  page-break-inside: avoid;
}
img.cover {
  max-width: 100%;
  max-height: 100%;
  margin: 0 0 1.25em 0;
}
img.sidebar-logo {
  max-width: 100%;
  max-height: 100%;
  padding-right: 6pt;
  margin: 1em 1em 0 1em;
}
img.sidebar-icon, img.header-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  object-fit: contain;  
  vertical-align: -12.5%;
  margin: 0 0.75em 0 0;
}
img.header-icon {
  vertical-align: -18.5%;
  margin: 0 0.333em 0 0;
}
img.thumbnail {
  width: 25%;
  margin: 1.25em 0;
}
img img {
	display: inline-block;
  margin: 1em 0.5em;	
}
input, button, textarea, select {
  font: inherit;
  font-weight: var(--font-weight-semibold);
}
.box-shadow {
	padding: 1em;
	box-shadow: 0px 4px 8px 0px var(--color-default-shadow), 0px 8px 16px 0px var(--color-default-shadow);
}

/* h1 = Title
     h2 = Section
       h3 = Article
         h4 = Article Division
           h5 = Article Subdivision
             h6 = Article Topic
*/
.section {
	padding-bottom: 2em;
}
hr {
  margin-top: 3em;
  margin-bottom: 2em;
}
h1, h2, h3, h4, h5, h6 {
  text-transform: capitalize;
  margin-bottom: 1em;

}
h1:target, h2:target, h3:target, h4:target, h5:target, h6:target, p:target {
  padding-top: 1em;
}
h3:target::after, h3:hover::after, h4:target::after, h4:hover::after, p:target::after, p.heading:hover::after {
	content: "✦";
  	color: var(--color-accent);
  	display: inline-block;
  	font-size: 1.15em;
  	line-height: 0;
  	font-weight: var(--font-weight-bold);
  	font-style: normal;
  	position: relative;
    top: 0.1em;
    left: 0.25em; 
  	margin-left: 0;
}
h3:hover a, p.heading:hover a{
    text-decoration: none;
}

h1, strong {
	font-weight: var(--font-weight-black);
}
h1 {
  	margin-top: 0;
	font-size: var(--font-size-h1);
	line-height: 0.8em;
	/* margin-bottom: 0.5em; */
}
h2, h3 {
	line-height: 0.9em;
	margin: 1em 0;
}
h2 {
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-h2);
	/* margin-bottom: 0.75em; */
}
h3 {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-h3);
	/* margin-bottom: 0.75em; */
}
h4, h5, h6 {
	line-height: 1.0em;
	margin: 1em 0;
}
h4 {
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-h4);
}
h5 {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-h5);
}
h6 {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-h6);
}
b {
	font-weight: var(--font-weight-semibold);
}
p, aside {
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	letter-spacing: 0.0125em;/* Tiny touch of expansion stabilizes word tracking */
}
p.first {
  text-indent: 0;
}
p.sources {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
a {
	font-weight: var(--font-weight-semibold);
	color: var(--color-accent);
	letter-spacing: 0.01em;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
/*a[target$="_blank"]:hover::after {
	content: "*";
  	color: var(--color-accent);
  	display: inline-block;
  	font-size: 1em;
  	line-height: 0;
  	font-weight: var(--font-weight-bold);
  	font-style: normal;
  	position: relative;
    top: 0.1em;
    left: 0.25em; 
  	margin-left: 0;
}*/
q, blockquote {
	font-family: var(--font-family-serif);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-quote);
	letter-spacing: 0.0125em;
	/*max-width: 65ch;*/ /* Stops lines before gaps form */
    /*margin-inline: auto;*/
}
q:before, q:after {
	display: none;
}
blockquote {
	margin: var(--margin-bottom) var(--indent-quote) var(--margin-bottom) var(--indent-quote);
	line-height: 1.2em;
}
sup {
	vertical-align: 20%;
	font-size: 0.7em;
}
pre { /* used in .cobebox */
	font-family: var(--font-family-mono);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-code);
}
ol {
	margin: var(--margin-bottom) 0;
	/*padding: 0 var(--body-padding);
	padding-inline-start: var(--body-padding);*/
	padding: 0 24pt;
	padding-inline-start: 24pt;
}
ul {
	margin: var(--margin-bottom) 0;
	padding: 0;
	padding-inline-start: 0;
	list-style-type: none;
}
li {
	margin-bottom: 0;
}
ul.sub-toc li, ol.sub-toc li {
	font-weight: var(--font-weight-semibold);
	padding-inline-start: 24pt;
	margin-bottom: 0;
}
ul.sub-toc li::before {
  	content: "†";
  	color: var(--color-default);
  	display: inline-block;
  	font-size: 1em;
  	font-weight: var(--font-weight-regular);
  	font-style: normal;
  	width: 24pt;
  	margin-left: -24pt;
}
ul.question-mark li {
	font-weight: var(--font-weight-semibold);
	font-style: italic;
	padding-inline-start: 24pt;
	margin-bottom: 1em;
}
ul.question-mark li::before {
  	content: "?";
  	color: var(--color-default);
  	display: inline-block;
  	font-size: 1em;
  	font-weight: var(--font-weight-bold);
  	font-style: normal;
  	font-family: var(--font-family-serif);
  	vertical-align: 0;
  	width: 24pt;
  	margin-left: -24pt;
}
ul.diamonds li {
	padding-inline-start: 24pt;
	margin-bottom: 1em;
}
ul.diamonds li::before {
  	content: "~";
  	color: var(--color-default);
  	display: inline-block;
  	font-size: 1.25em;
  	line-height: 0;
  	font-weight: var(--font-weight-bold);
  	font-style: normal;
  	font-family: var(--font-family-serif);
  	position: relative;
    top: 7pt;
    left: -4pt; 
  	transform: rotate(60deg);
    transform-origin: center; 
  	width: 24pt;
  	margin-left: -24pt;
}


table {
	width: 100%;
	border-collapse: collapse;
}
table.comparison th, table.comparison td {
    width: 50%;
}
table.comparison th:first-child, table.comparison td:first-child {
    text-align: left;
}
table.comparison th:last-child, table.comparison td:last-child {
    text-align: left;
    font-weight: var(--font-weight-bold);
}

.emoji {
	font-family: "helvetica", "Arial", sans-serif;
}
.notes, aside {
	font-style: italic;
	font-size: var(--font-size-notes);
	line-height: 1.2em;
}
.quote {
	font-family: var(--font-family-serif);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-quote);
	letter-spacing: -0.01em;
	margin: var(--margin-bottom) var(--indent-quote) var(--margin-bottom) var(--indent-quote);
}
.caption, figcaption {
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-caption);
	text-transform: uppercase;
	line-height: 1.0em;
}
.sources {
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-sources);
	line-height: 1.0em;
}

/* Link icons */
/*a[href$=".pdf"] {*/
.icon-pdf {
	border-width: 2px;
    border-style: solid;
    border-radius: 5px;
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: var(--color-background);
    padding: 1.25em 0.25em 0.25em 0.25em;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    margin: 0 0.25em;
}
.icon-pdf:hover {
    text-decoration: none;
}

/* Message boxes */
.messagebox {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--border-radius);
    border-color: var(--color-default);
    background-color: var(--color-default-box);
    padding: 0 1em ;
}
.messagebox.important {
	border-color: var(--color-red);
    background-color: var(--color-red-bg);	
}
.important {
    color: var(--color-red);
}
p.important {
	font-weight: var(--font-weight-bold);
}
.codebox {
	font-family: var(--font-family-mono);
	font-size: var(--font-size-code);
	font-weight: var(--font-weight-medium);
	border-color: #F3F3F3;
	background-color: #F3F3F3;
	border-width: 1px;
    border-style: solid;
    border-radius: var(--border-radius);
    padding: 0 1em ;
}
.codebox b {
	color: #888888;
}
.codebox i { /* For comments */
	font-weight: var(--font-weight-light);
	line-height: 2em;
}
.codebox pre {
	cursor: pointer;
}
.codebox pre:active {
	cursor: alias;
	color: var(--color-background);
	background-color: var(--color-default);
}

/* Navigation buttons */
.navigation-title {
	text-decoration: none;
	cursor: pointer;
}

.navigation-button {
	text-decoration: none;
	color: var(--color-default);
	background-color: var(--color-background);
	border-radius: var(--border-radius);
	padding: 0.5em 0.75em;
	box-shadow: var(--box-shadow);
	/* margin-right: 0.25em;
	margin-top: 0.5em;
	margin-bottom: var(--margin-bottom); */
	display: inline-block;
	cursor: pointer;
	/* Disables text selection */
	-webkit-user-select: none; /* Safari */
  	-ms-user-select: none; /* IE 10 and IE 11 */
  	user-select: none; /* Standard syntax */
}

/* SIDEBAR */

/* Mobile First: Sidebar is full-screen but hidden off-left */
#sidebar {
    position: fixed;
    top: 0;
    left: -100%; /* Hidden */
    width: 100%;
    height: 100vh; /* for scroll */
    overflow-y: auto;
    background: var(--color-accent);
    color: white;
    z-index: 1000;
    transition: left 0.3s ease; /* Standard smooth animation */
    font-size: 14pt;
    padding: 1em var(--sidebar-indent) 0 var(--sidebar-indent);
}

#sidebar.open {
    left: 0; /* Full screen on mobile */
}

/* Content on mobile */
#content {
    padding: 20px 20px 20px 20px; /* Space for the floating toggle button */
}

#menu-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1100;
    padding: 8px 10px;
}

#sidebar hr {
  margin-top: 1em;
  margin-bottom: 1em;
  color: var(--color-background);
}
#sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#sidebar ul ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0 2em;
}
#sidebar li {
    padding: 0;
    margin: 0;
}
#sidebar a {
	font-weight: var(--font-weight-bold);
    color: white;
    text-decoration: none;
    display: block;
}
#sidebar a:hover {
	text-decoration: none;
}
#sidebar li a {
  display: block;   
  width: 100%;      
  padding: 4px 4px 4px 8px;     
  border-radius: 8px;
  text-decoration: none;
}
#sidebar li a:hover, #sidebar li a:active  {
	text-decoration: none;
	background-color: #9A41B0;
}

.nav-h1 {
	font-size: 2.8em;
    line-height: 1em;
	margin: 0;
	
}
.nav-h2 {
	font-size: 14pt;
	line-height: 1.3em;
}
.nav-h3 {
	font-size: 12pt;
	line-height: 1.3em;
}
.nav-h4 {
	font-size: 11pt;
	line-height: 0.8em;
	padding: 0.25em 0;
}
.nav-h5 {
	font-size: 10pt;
	line-height: 0.9em;
	padding: 0.25em 0;
}
.overflow {
}

/* Desktop Version: Breakpoint at 768px */
@media (min-width: 768px) {

	#container { 
	    /* display: table; */ /* Necessary for ebook compatibility, but makes transition weird... */
	    width: 100%; 
	}
    #sidebar {
    	/* display: table-cell; */ /* Necessary for ebook compatibility, but makes transition weird... */
        left: 0;
        width: 200px; /* Fixed width sidebar */
    }

    #content {
        margin-left: 200px; /* Pushes content right */
        padding: 20px;
        /* display: table-cell; */ /* Necessary for ebook compatibility, but makes transition weird... */
  		vertical-align: top; 
    }

    #menu-toggle {
        display: none; /* Hide toggle on desktop */
    }
}

/* For mobile ? */
@media (max-width: 768px) {	
  :root {
 	--font-size-body: 10pt;
    --body-padding: 0;
  }
  body {
	  padding: 10pt;
	  margin: 0;
	}
}


/* PRINT */

@media print {
	
  @page {
    size: letter portrait;
    margin: 1in;
  }
  :root {
 	--font-size-body: 10pt;
    --body-padding: 0;
  }
  p {
	page-break-inside: avoid; /* Prevents a single paragraph splitting awkwardly */
    orphans: 3;            /* Keeps at least 3 lines at the bottom of a page */
    widows: 3;  
  }
  img {
    display: block; 
    break-inside: avoid;
    page-break-inside: avoid;
    max-height: 95%;
  }
  img.new-page {
  	margin-top: 0;
  }
  .no-break {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .new-page {
    page-break-before: always; /* For older e-readers */
    break-before: page;       /* Modern standard */
  }
  #menu-toggle {
        display: none; /* Hide toggle on desktop */
    }
  /* .nav, .footer-ads, .sidebar {
    display: none;
  }
  body {
    font-size: 10pt;
    color: #000;
    background: #fff;
  }*/

  h1 {
    /*page-break-before: always;*/ /* For older e-readers */
    /*break-before: page;*/       /* Modern standard */
  }
  table, figure {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #content {
    margin-left: 0;
    padding: 0;
  }
  /* a::after {
    content: " (" attr(href) ")";
  } */
  .no-print {
    display: none;
  }
}


/* FONTS */

/* For each font, search src paths in order of:
     1. local by family name
     2. local by postscript name
     3. url download from internet source (woff2, woff, ttf)
     4. url download from “local” website (woff2, woff, ttf)
   If none of the above work, then go back to alternatives
*/

/* Source Sans - Open source release from Adobe: https://github.com/adobe-fonts/source-sans */

@font-face{
    font-family: 'Source Sans VF';
    font-weight: 200 900;
    font-style: normal;
    font-stretch: normal;
    /*font-display: swap;*/
    src: local('SourceSans3VF-Upright'),
         local('SourceSans3VF'),
         url('https://github.com/adobe-fonts/source-sans/raw/refs/heads/release/WOFF2/VF/SourceSans3VF-Upright.ttf.woff2') format('woff2'),
         url('https://github.com/adobe-fonts/source-sans/raw/refs/heads/release/WOFF/VF/SourceSans3VF-Upright.ttf.woff') format('woff'),
         url('https://github.com/adobe-fonts/source-sans/raw/refs/heads/release/VF/SourceSans3VF-Upright.ttf') format('truetype'),
         url('font/source-sans-release/WOFF2/VF/SourceSans3VF-Upright.ttf.woff2') format('woff2'),
         url('font/source-sans-release/WOFF/VF/SourceSans3VF-Upright.ttf.woff') format('woff'),
         url('font/source-sans-release/VF/SourceSans3VF-Upright.ttf') format('truetype');
}

@font-face{
    font-family: 'Source Sans VF';
    font-weight: 200 900;
    font-style: italic;
    font-stretch: normal;
    /*font-display: swap;*/
    src: local('SourceSans3VF-Italic'), /* search name must include italic or Firefox will select regular instead */
         local('SourceSans3VF Italic'),
         url('https://github.com/adobe-fonts/source-sans/raw/refs/heads/release/WOFF2/VF/SourceSans3VF-Italic.ttf.woff2') format('woff2'),
         url('https://github.com/adobe-fonts/source-sans/raw/refs/heads/release/WOFF/VF/SourceSans3VF-Italic.ttf.woff') format('woff'),
         url('https://github.com/adobe-fonts/source-sans/raw/refs/heads/release/VF/SourceSans3VF-Italic.ttf') format('truetype'),
         url('font/source-sans-release/WOFF2/VF/SourceSans3VF-Italic.ttf.woff2') format('woff2'),
         url('font/source-sans-release/WOFF/VF/SourceSans3VF-Italic.ttf.woff') format('woff'),
         url('font/source-sans-release/VF/SourceSans3VF-Italic.ttf') format('truetype');
}

/* Source Serif - Open source release from Adobe: https://github.com/adobe-fonts/source-serif */

@font-face{
    font-family: 'Source Serif VF';
    font-weight: 200 900;
    font-style: normal;
    font-stretch: normal;
    /*font-display: swap;*/
    src: local('SourceSerif4Variable-Roman'),
         local('Source Serif 4 Variable'),
         url('https://github.com/adobe-fonts/source-serif/raw/refs/heads/release/WOFF2/VAR/SourceSerif4Variable-Roman.ttf.woff2') format('woff2-variations'),
         url('https://github.com/adobe-fonts/source-serif/raw/refs/heads/release/WOFF/VAR/SourceSerif4Variable-Roman.ttf.woff') format('woff-variations'),
         url('https://github.com/adobe-fonts/source-serif/raw/refs/heads/release/VAR/SourceSerif4Variable-Roman.ttf') format('truetype-variations'),
         url('font/source-serif-release/WOFF2/VAR/SourceSerif4Variable-Roman.ttf.woff2') format('woff2-variations'),
         url('font/source-serif-release/WOFF/VAR/SourceSerif4Variable-Roman.ttf.woff') format('woff-variations'),
         url('font/source-serif-release/VAR/SourceSerif4Variable-Roman.ttf') format('truetype-variations');
}

@font-face{
    font-family: 'Source Serif VF';
    font-weight: 200 900;
    font-style: italic;
    font-stretch: normal;
    /*font-display: swap;*/
    src: local('SourceSerif4Variable-Italic'),
         local('Source Serif 4 Variable Italic'),
         url('https://github.com/adobe-fonts/source-serif/raw/refs/heads/release/WOFF2/VAR/SourceSerif4Variable-Italic.ttf.woff2') format('woff2-variations'),
         url('https://github.com/adobe-fonts/source-serif/raw/refs/heads/release/WOFF/VAR/SourceSerif4Variable-Italic.ttf.woff') format('woff-variations'),
         url('https://github.com/adobe-fonts/source-serif/raw/refs/heads/release/VAR/SourceSerif4Variable-Italic.ttf') format('truetype-variations'),
         url('font/source-serif-release/WOFF2/VAR/SourceSerif4Variable-Italic.ttf.woff2') format('woff2-variations'),
         url('font/source-serif-release/WOFF/VAR/SourceSerif4Variable-Italic.ttf.woff') format('woff-variations'),
         url('font/source-serif-release/VAR/SourceSerif4Variable-Italic.ttf') format('truetype-variations');
}

/* Source Code Pro - Open source release from Adobe: https://github.com/adobe-fonts/source-code-pro */

@font-face{
    font-family: 'Source Code Pro VF';
    font-weight: 200 900;
    font-style: normal;
    font-stretch: normal;
    /*font-display: swap;*/
    src: local('SourceCodeVF-Upright'),
         local('SourceCodeVF'),
         url('https://github.com/adobe-fonts/source-code-pro/raw/refs/heads/release/WOFF2/VF/SourceCodeVF-Upright.ttf.woff2') format('woff2-variations'),
         url('https://github.com/adobe-fonts/source-code-pro/raw/refs/heads/release/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff-variations'),
         url('https://github.com/adobe-fonts/source-code-pro/raw/refs/heads/release/VF/SourceCodeVF-Upright.ttf') format('truetype-variations'),
         url('font/source-code-pro-release/WOFF2/VF/SourceCodeVF-Upright.ttf.woff2') format('woff2-variations'),
         url('font/source-code-pro-release/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff-variations'),
         url('font/source-code-pro-release/VF/SourceCodeVF-Upright.ttf') format('truetype-variations');
}

@font-face{
    font-family: 'Source Code VF';
    font-weight: 200 900;
    font-style: italic;
    font-stretch: normal;
    /*font-display: swap;*/
    src: local('SourceCodeVF-Italic'),
         local('SourceCodeVF Italic'),
         url('https://github.com/adobe-fonts/source-code-pro/raw/refs/heads/release/WOFF2/VF/SourceCodeVF-Italic.ttf.woff2') format('woff2-variations'),
         url('https://github.com/adobe-fonts/source-code-pro/raw/refs/heads/release/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff-variations'),
         url('https://github.com/adobe-fonts/source-code-pro/raw/refs/heads/release/VF/SourceCodeVF-Italic.ttf') format('truetype-variations'),
         url('font/source-code-pro-release/WOFF2/VF/SourceCodeVF-Italic.ttf.woff2') format('woff2-variations'),
         url('font/source-code-pro-release/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff-variations'),
         url('font/source-code-pro-release/VF/SourceCodeVF-Italic.ttf') format('truetype-variations');
}