/* ===== Mac Install Guide: articles.css (article pages) ===== */
@import url("https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/themes/light.css");

/* ---- Base content styles ------------------------------------------------- */

.content blockquote {
  background-color: white;
  border-left: 0;
  padding: 0;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
  padding-bottom: 1.2em;
}

code {
  color: #4a4a4a;
  background-color: #e6ffed;
  font-size: 0.9rem;
}

img {
  width: 100%;
  max-width: 650px;
  display: block;
  margin: 0 auto;
}

img + em {
  font-style: italic;
  display: inherit;
  text-align: center;
  font-size: 0.7rem;
}

/* Responsive pull-quotes */
@media only screen and (min-width: 768px) {
  .content blockquote {
    font-style: italic;
    font-weight: bold;
    font-family: serif;
    float: left;
    margin-left: 15px;
    width: 150px;
    font-size: 1.2rem;
    line-height: 1.2rem;
    color: #655c9d;
  }
  .content blockquote p {
    display: inline;
  }
}

@media only screen and (max-width: 768px) {
  .content blockquote {
    font-style: italic;
    font-weight: bold;
    font-family: serif;
    margin-left: 15px;
    font-size: 1.2rem;
    line-height: 1.2rem;
    color: #655c9d;
  }
  .content blockquote p {
    display: inline;
  }
}

/* Prism number tokens */
.number,
.token.number {
  all: inherit;
}

/* Markdown heading and list tuning */
.markdown-content h1 {
  font-size: 2em !important;
  margin-top: 0.67em !important;
  margin-bottom: 0.67em !important;
  font-weight: bold !important;
  line-height: 1.125 !important;
}
.markdown-content h2 {
  display: inline !important;
  font-size: 1.5em !important;
  margin-top: 0.83em !important;
  margin-bottom: 0.83em !important;
  font-weight: bold !important;
}
.markdown-content h3 {
  font-size: 1.17em !important;
  margin-top: 1em !important;
  margin-bottom: 1em !important;
  font-weight: bold !important;
}
.markdown-content h4 {
  font-size: 1em !important;
  margin-top: 1.33em !important;
  margin-bottom: 1.33em !important;
  font-weight: bold !important;
}

.markdown-content ul {
  list-style-type: disc !important;
  margin-top: 1em !important;
  margin-bottom: 1em !important;
  padding-left: 40px !important;
}
.markdown-content ul li {
  display: list-item !important;
  margin-bottom: 0.25em !important;
  text-align: -webkit-match-parent !important;
  line-height: 1.5 !important;
}
.markdown-content li + li {
  margin-top: 0 !important;
}
.markdown-content ul ul {
  margin-top: 0.25em !important;
  margin-bottom: 0 !important;
}

.markdown-content a {
  color: #3273dc !important;
  text-decoration: none !important;
}
.markdown-content a:hover {
  color: #3273dc !important;
  text-decoration: underline !important;
}

/* Inline code and code blocks */
.markdown-content code {
  background-color: #e6ffed !important;
  color: #4a4a4a !important;
  font-size: 0.9rem !important;
  padding: 0.2em 0.4em !important;
  border-radius: 3px !important;
  font-family:
    Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;
}
.markdown-content code::before {
  content: "\2006" !important;
}
.markdown-content code::after {
  content: "\2006" !important;
}

.markdown-content pre {
  background-color: #222 !important;
  color: white !important;
  padding: 1em !important;
  border-radius: 4px !important;
  overflow-x: auto !important;
  margin-bottom: 1em !important;
  font-family:
    Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;
  font-size: 1em !important;
  line-height: 1.5 !important;
}
.markdown-content pre code {
  background-color: transparent !important;
  color: white !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
}
.markdown-content pre code::before,
.markdown-content pre code::after {
  content: none !important;
}

.markdown-content code.language-bash {
  background-color: #f8f8f2 !important;
  display: block !important;
  padding: 1em !important;
}
.markdown-content code.language-bash::before {
  content: none !important;
}

.markdown-content .token.operator,
.markdown-content .token.entity,
.markdown-content .token.url,
.markdown-content .language-css .token.string,
.markdown-content .style .token.string {
  color: #f8f8f2 !important;
  background: transparent !important;
}
.markdown-content .token.atrule,
.markdown-content .token.attr-value,
.markdown-content .token.keyword {
  color: #66d9ef !important;
}
.markdown-content .token.function {
  color: #fd971f !important;
}
.markdown-content .token.regex,
.markdown-content .token.important,
.markdown-content .token.variable {
  color: #fd971f !important;
}
.markdown-content .token.important,
.markdown-content .token.bold {
  font-weight: bold !important;
}
.markdown-content .token.italic {
  font-style: italic !important;
}
.markdown-content pre.language-bash {
  background-color: #333 !important;
  color: white !important;
}
.markdown-content p + pre {
  margin-top: 1em !important;
}
.markdown-content pre:not([class*="language-"]) {
  background-color: #222 !important;
  color: white !important;
}
.markdown-content pre:not([class*="language-"]) code {
  background-color: transparent !important;
  color: white !important;
}

/* Markdown blockquotes inside .markdown-content */
.markdown-content blockquote {
  background-color: white !important;
  border-left: 0 !important;
  padding: 0 !important;
  display: block !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
  margin-inline-start: 40px !important;
  margin-inline-end: 40px !important;
  padding-bottom: 1.2em !important;
  font-style: italic !important;
  font-weight: bold !important;
  font-family: serif !important;
  margin-left: 15px !important;
  font-size: 1.2rem !important;
  line-height: 1.2rem !important;
  color: #655c9d !important;
}
.markdown-content blockquote p {
  display: inline !important;
}

@media only screen and (min-width: 768px) {
  .markdown-content blockquote {
    float: left !important;
    width: 150px !important;
  }
}

/* ---- Navbar guards & breakpoint (article template) ---------------------- */

/* Keep navbar above content so clicks aren’t blocked */
header,
header .navbar {
  position: relative;
  z-index: 1000;
}

/* Safety: never let content overlap the navbar */
body > .section,
body > .hero,
body > .hero-body {
  position: relative;
  z-index: 0;
}

/* Slightly smaller nav items (readable, compact) */
header .navbar-menu .navbar-item {
  font-size: 0.9rem;
  padding: 0.5rem 0.6rem;
  font-weight: 500;
}

/* ≥ 640px: show full menu; hide burger; allow wrapping if needed */
@media (min-width: 640px) {
  header .navbar-burger {
    display: none !important;
  }
  header .navbar-menu {
    display: flex !important;
  }
  header .navbar-menu .navbar-end {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem 0.5rem;
  }
}

/* < 640px: Bulma-style collapse controlled by .is-active */
@media (max-width: 639px) {
  header .navbar-burger {
    display: block !important;
  }
  header .navbar-menu {
    display: none;
  }
  header .navbar-menu.is-active {
    display: block !important;
  }
}