/* Mostly Harmless: site-wide styles blocks can't express */

/* Links (old site: a:hover { color: rgb(0, 86, 179); text-decoration: underline; }) */
.mh-link,
.mh-foot-link {
  transition: color 0.15s ease-in-out;
}
.mh-link:hover,
.mh-link:focus-visible {
  color: rgb(0, 86, 179) !important;
  text-decoration: underline;
}
.mh-foot-link:hover,
.mh-foot-link:focus-visible {
  text-decoration: underline;
}

/* Navigation */
.mh-nav-link,
.mh-product-link,
.mh-foot-nav {
  transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.mh-nav-link:hover,
.mh-nav-link:focus-visible,
.mh-product-link:hover,
.mh-product-link:focus-visible {
  color: #000133 !important;
  box-shadow: inset 0 -3px 0 #FFC512;
}
.mh-foot-nav:hover,
.mh-foot-nav:focus-visible {
  color: #FFC512 !important;
}
/* Current page in the navigation */
.mh-nav a[aria-current="page"],
.mh-nav a.active,
.mh-nav a.current {
  color: #000133 !important;
  box-shadow: inset 0 -3px 0 #FFC512;
}
.mh-nav-shop {
  transition: background-color 0.15s ease-in-out;
}
.mh-nav-shop:hover,
.mh-nav-shop:focus-visible {
  background-color: rgb(224, 168, 0) !important;
}

/* Buttons (old .btn: colour/background/border/box-shadow 0.15s ease-in-out) */
.mh-btn,
.mh-btn-primary {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.mh-btn:hover {
  background-color: #000133 !important;
  color: #FFFFFF !important;
}
.mh-btn-primary:hover {
  background-color: rgb(224, 168, 0) !important;
  color: #000133 !important;
}
.mh-btn:focus-visible,
.mh-btn-primary:focus-visible,
.page-form:focus-visible {
  outline: 0;
  box-shadow: rgba(0, 123, 255, 0.25) 0 0 0 0.2rem;
}
@media screen and (prefers-reduced-motion: reduce) {
  .mh-btn, .mh-btn-primary, .mh-link, .mh-nav-link, .mh-product-link, .mh-foot-nav, .mh-nav-shop, .mh-tile { transition: none; }
}

/* Gallery tiles */
.mh-tile {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mh-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* FAQ (details/summary) */
.mh-faq summary {
  cursor: pointer;
  list-style: none;
}
.mh-faq summary::-webkit-details-marker { display: none; }
.mh-faq summary::after {
  content: "+";
  float: right;
  color: #0277BD;
  font-weight: 600;
}
.mh-faq[open] summary::after { content: "\2013"; }
.mh-faq summary:hover { color: rgb(0, 86, 179); }
.mh-faq summary:focus-visible {
  outline: 0;
  box-shadow: rgba(0, 123, 255, 0.25) 0 0 0 0.2rem;
}

/* Slide strip on About */
.mh-slides {
  scroll-snap-type: x mandatory;
  scrollbar-color: #5B3A6E #FAF2F2;
}
.mh-slides > * { scroll-snap-align: start; }

/* Post body typography */
.post-content {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  line-height: 1.75;
  color: #444444;
  max-width: 68ch;
}
.post-content h2,
.post-content h3 {
  font-family: Asap, sans-serif;
  font-weight: 500;
  color: #333333;
  line-height: 1.25;
  margin: 2em 0 0.6em;
}
.post-content h2 { font-size: 30px; }
.post-content h3 { font-size: 22px; }
.post-content p { margin: 0 0 1.2em; }
.post-content a { color: #0277BD; text-decoration: none; border-bottom: 2px solid #FFC512; }
.post-content a:hover { color: rgb(0, 86, 179); }
.post-content img { max-width: 100%; height: auto; }
.post-content blockquote {
  margin: 1.5em 0;
  padding: 16px 24px;
  background: #FAF6F0;
  border-left: 4px solid #FFC512;
}
.post-content code,
.post-content pre {
  font-family: "JetBrains Mono", monospace;
  background: #FAF2F2;
}
.post-content pre { padding: 16px; overflow-x: auto; }