/* markdown */
/* Style for parsed markdown pages. */

/* new composition */
div.row.flex div.mdCol {
 margin-left: 20%;
 width: 90%;
}
div.row.flex div.mdCol ol,
div.row.flex div.mdCol ul,
div.row.flex div.mdCol h3 {
 margin-left: 0px;
}

/* headings */
div.row.flex div.mdCol h1,
div.row.flex div.mdCol h2,
div.row.flex div.mdCol h3,
div.row.flex div.mdCol h4,
div.row.flex div.mdCol h5,
div.row.flex div.mdCol h6 {
 text-decoration: none;;
}
h3 + br, h4 + br, h5 + br, h6 + br {
 display: none !important;
}

/* hero image */
img[alt="Hero Image"] {
 width: 100%;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 8px 8px rgba(1,10,20,.1);
}

/* paragraphs */
div.mdCol p {
 line-height: 1.20;
}

/* lists */
div.row.flex div.mdCol ol li,
div.row.flex div.mdCol ul li {
 display: list-item !important;
 text-align: left;
 max-width: unset;
 min-width: unset;
}
div.row.flex div.mdCol ul li:before,
div.row.flex div.mdCol ol li:before {
 content: "";
}
div.row.flex div.mdCol ol {
 list-style: none;
 display: list-item;
}
div.row.flex div.mdCol ul { 
 list-style: square;
}
/* nested lists */
div.row.flex div.mdCol ul.nestOne {
 margin-left: 20px;
 list-style: none;
}
div.row.flex div.mdCol ul.nestOne li,
div.row.flex div.mdCol ol.nestOne li {
 line-height: .55;
}
div.row.flex div.mdCol ul.nestOne li:before, 
div.row.flex div.mdCol ol.nestOne li:before {
 content: url(/img/mdColNestOne.png); /* list-style */
}
div.row.flex div.mdCol ul.nestTwo {
 margin-left: 40px;
 list-style: none;
}
div.row.flex div.mdCol ul.nestTwo li,
div.row.flex div.mdCol ol.nestTwo li {
 line-height: .25;
}
div.row.flex div.mdCol ul.nestTwo li:before, 
div.row.flex div.mdCol ol.nestTwo li:before {
 content: url(/img/mdColNestTwo.png); /* list-style */
}
div.row.flex div.mdCol ul.nestThree {
 margin-left: 60px;
 list-style: none; 
}
div.row.flex div.mdCol ul.nestThree li {
 padding-left: 10px;
 font-stretch: condensed;
 line-height: .50;
}
div.row.flex div.mdCol ul.nestThree li::marker {
 content: "\2014 ";
 font-size: xx-small;
}
div.row.flex div.mdCol ul.nestFour {
 margin-left: 80px;
 list-style: none;
}
div.row.flex div.mdCol ul.nestFour li,
div.row.flex div.mdCol ol.nestFour li {
 line-height: 0.25;
 font-stretch: ultra-condensed;
}
div.row.flex div.mdCol ul.nestFour li::marker {
  content: "- ";
}

/* code elements */
div.row.flex div.mdCol pre {
 display: block !important;
 margin-left: 5px;
 padding: 20px;
 /* border-radius: 5px; */
 /* border: 1px solid #000133; */
 position: relative;
 overflow-x: auto;
}
div.row.flex div.mdCol code {
 padding: 5px;
 font-weight: 800;
}
div.row.flex div.mdCol pre {
 background: #80808009;
}

/* Language-specific code block styling */
div.row.flex div.mdCol pre.language-python::before,
div.row.flex div.mdCol pre.language-bash::before,
div.row.flex div.mdCol pre.language-c::before,
div.row.flex div.mdCol pre.language-javascript::before,
div.row.flex div.mdCol pre.language-js::before,
div.row.flex div.mdCol pre.language-html::before,
div.row.flex div.mdCol pre.language-css::before,
div.row.flex div.mdCol pre.language-json::before,
div.row.flex div.mdCol pre.language-xml::before,
div.row.flex div.mdCol pre.language-sql::before,
div.row.flex div.mdCol pre.language-text::before {
 content: attr(class);
 position: absolute;
 top: 5px;
 right: 10px;
 font-size: 0.75em;
 color: #666;
 text-transform: uppercase;
 font-weight: bold;
 background: #f0f0f0;
 padding: 2px 8px;
 border-radius: 3px;
 letter-spacing: 0.5px;
}

/* Extract just the language name for display */
div.row.flex div.mdCol pre.language-python::before { content: "Python"; background: #3776ab; color: white; }
div.row.flex div.mdCol pre.language-bash::before { content: "Bash"; background: black; color: white; }
div.row.flex div.mdCol pre.language-c::before { content: "C"; background: #555555; color: white; }
div.row.flex div.mdCol pre.language-javascript::before,
div.row.flex div.mdCol pre.language-js::before { content: "JavaScript"; background: #f7df1e; color: black; }
div.row.flex div.mdCol pre.language-html::before { content: "HTML"; background: #e34c26; color: white; }
div.row.flex div.mdCol pre.language-css::before { content: "CSS"; background: #264de4; color: white; }
div.row.flex div.mdCol pre.language-json::before { content: "JSON"; background: #292929; color: white; }
div.row.flex div.mdCol pre.language-xml::before { content: "XML"; background: #0060ac; color: white; }
div.row.flex div.mdCol pre.language-sql::before { content: "SQL"; background: #00758f; color: white; }
div.row.flex div.mdCol pre.language-text::before { content: "Text"; background: #808080; color: white; }

/* Language-specific color schemes */
div.row.flex div.mdCol pre.language-python {
 border-left: 4px solid #3776ab;
}

div.row.flex div.mdCol pre.language-bash {
 border-left: 4px solid black;
}

div.row.flex div.mdCol pre.language-c {
 border-left: 4px solid #555555;
}

div.row.flex div.mdCol pre.language-javascript,
div.row.flex div.mdCol pre.language-js {
 border-left: 4px solid #f7df1e;
}

div.row.flex div.mdCol pre.language-html {
 border-left: 4px solid #e34c26;
}

div.row.flex div.mdCol pre.language-css {
 border-left: 4px solid #264de4;
}

div.row.flex div.mdCol pre.language-json {
 border-left: 4px solid #292929;
}

div.row.flex div.mdCol pre.language-xml {
 border-left: 4px solid #0060ac;
}

div.row.flex div.mdCol pre.language-sql {
 border-left: 4px solid #00758f;
}

div.row.flex div.mdCol pre.language-text {
 border-left: 4px solid #808080;
}

/* Add similar style to markdown elements. */
div.mdCol a {
 color: blue;
}

div.mdCol details[open] {
 margin-left: -20px;
 width: auto;
 background-color: #FFFFFE !important;
 color: black;
 border-left: 10px solid black;
}
div.mdCol details[open] pre {
 margin-left: 30px !important;
}

div.mdCol details[open] * {
 margin-left: 30px;
}
div.mdCol details[open] pre code * {
 margin-left: 0px !important;
}

div.mdCol details summary {
 cursor: pointer;
 width: 600px;
 margin-left: 0px;
}
div.mdCol details[open] summary {
 margin-left: 10px;
}

div.mdCol details summary:hover {
 font-weight: bolder;
}

/* images */
.markdown-img {
 max-width: 80%;
}

/* tables */
div.mdCol table {
 max-width: 100%;
 min-width: 50%;
 width: auto;
}
div.mdCol table, tr, th, td {
 border-collapse: collapse;
 padding: 10px
}
div.mdCol table td {
 padding-left: 20px;
}
div.mdCol table tr:nth-child(even){background-color: #f2f2f2;}

/* examples after youtube */
a.yt-watch-link + details {
 margin-top: 20px;
}

/* GitHub-style Markdown Alerts */
.markdown-alert {
 padding: 0.5rem 1rem;
 margin: 1rem 0;
 border-left: 4px solid;
 border-radius: 4px;
 background-color: #f6f8fa;
}

.markdown-alert p {
 margin: 0.5rem 0;
 color: #48426b;
 font-weight: 500;
}

div.markdown-alert code {
 background: white;
 font-weight: 500 !important;
 font-size: large;
}

.markdown-alert .alert-title {
 display: flex;
 align-items: center;
 font-weight: 600;
 margin-bottom: 0.5rem !important;
}

.markdown-alert .alert-icon {
 margin-right: 0.5rem;
 font-size: 1.2em;
}
div.markdown-alert.alert-note .alert-icon {
 display: none;
}

.markdown-alert.alert-note {
 /* background-color: #209a9a;; */
 border-left-color: darkslategray;
}

.markdown-alert.alert-note .alert-title {
 color: #0969da;
}

/* TIP - Green */
.markdown-alert.alert-tip {
 background-color: #dafbe1;
 border-left-color: #1a7f37;
}

.markdown-alert.alert-tip .alert-title {
 color: #1a7f37;
}

.markdown-alert.alert-important {
 margin-left: 5px;
 /* background-color: darkslategray; */
 border-left-color: darkcyan;
}
div.markdown-alert.alert-important b,
div.markdown-alert.alert-note b {
 color: lightcoral;
}

div.markdown-alert.alert-important .alert-title,
div.markdown-alert.alert-note .alert-title {
 color: darkslategray;
 font-weight: 900;
}

/* WARNING - Orange */
.markdown-alert.alert-warning {
 background-color: #fff8e5;
 border-left-color: #bf8700;
}

.markdown-alert.alert-warning .alert-title {
 color: #9a6700;
}

/* CAUTION - Red */
.markdown-alert.alert-caution {
 background-color: #ffebe9;
 border-left-color: #d1242f;
}

.markdown-alert.alert-caution .alert-title {
 color: #d1242f;
}

/* Dark mode support (optional) */
/* @media (prefers-color-scheme: dark) {
 .markdown-alert {
  background-color: #161b22;
 }
 
 .markdown-alert.alert-note {
  background-color: #0d1117;
  border-left-color: #2f81f7;
 }
 
 .markdown-alert.alert-note .alert-title {
  color: #58a6ff;
 }
 
 .markdown-alert.alert-tip {
  background-color: #0d1117;
  border-left-color: #3fb950;
 }
 
 .markdown-alert.alert-tip .alert-title {
  color: #3fb950;
 }
 
 .markdown-alert.alert-important {
  background-color: #0d1117;
  border-left-color: #a371f7;
 }
 
 .markdown-alert.alert-important .alert-title {
  color: #bc8cff;
 }
 
 .markdown-alert.alert-warning {
  background-color: #0d1117;
  border-left-color: #d29922;
 }
 
 .markdown-alert.alert-warning .alert-title {
  color: #d29922;
 }
 
 .markdown-alert.alert-caution {
  background-color: #0d1117;
  border-left-color: #f85149;
 }
 
 .markdown-alert.alert-caution .alert-title {
  color: #ff7b72;
 }
}
 */

/* Syntax Highlighting for Code Blocks */
.code-line {
 line-height: 1.6;
 white-space: pre;
}

pre[class^=language-] code * {
 display: inline !important;
}

.code-line .keyword {
 color: #9e069e;
 font-weight: bold;
}

.code-line .string {
 color: #ef8709;
}

.code-line .comment,
.code-line .comment * {
 color: #6272a4 !important;
 font-style: italic;
}

.code-line .number {
 color: limegreen;
}

.code-line .function {
 color: #50fa7b;
 font-weight: bold;
}

/* HTML wrappers */
div.row.flex div.mdCol div.container {
  position: relative;
  width: 100%;
}
div.row.flex div.mdCol div.container img.image {
  display: block;
  width: 100%;
  height: auto;
}
div.row.flex div.mdCol div.container div.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
div.row.flex div.mdCol div.container div.text {
 color: white;
 font-size: 20px;
 text-align: center;
}
div.row.flex div.mdCol div.container:hover .overlay {
  cursor: pointer !important;
  opacity: 1;
}
div.row.flex div.mdCol div.container div.overlay:active {
 width: 95%;
 height: 95%;
 margin-top: 1.5%;
 margin-left: 2.5%;
}

/* Interactive examples */
iframe {
 resize: both;
}

/* Overriders page.css */
div.row div.mdCol h3 {
 display: block;
 bottom: 0px
}