/* Site accent color override (theme's static/css/custom.css is the
   designated override hook — this file takes precedence over the
   theme's copy without touching the submodule). */
:root {
  --color-light-fg-hyperlink: #B88DFC;
  --color-light-fg-hyperlink-hover: #9A5FF5;
  --color-dark-fg-hyperlink: #B88DFC;
  --color-dark-fg-hyperlink-hover: #CBA8FF;
}

/* Sidebar-less, wider layout for landing-style sections (e.g. Novum). Used
   by layouts/novum/section-baseof.html, which drops the .side div entirely
   and marks the wrapper with .no-side. */
.main-wrapper.no-side .main { flex: 0 0 100%; width: 100%; }

                             .main-wrapper.no-side { max-width: 1400px; }
@media (max-width: 1499px)  { .main-wrapper.no-side { max-width: 1200px; } }
@media (max-width: 1199px)  { .main-wrapper.no-side { max-width: 960px; } }
@media (max-width: 991px)   { .main-wrapper.no-side { max-width: 720px; } }
@media (max-width: 767px)   { .main-wrapper.no-side { max-width: 540px; } }
@media (max-width: 575px)   { .main-wrapper.no-side { max-width: none; } }

/* Bigger body copy, smaller images (theme defaults were 16px text /
   92%-width images). Applies everywhere .content is used. */
.content { font-size: 1.125rem; }
.content img { max-width: 78%; }

/* The theme only themes links inside .single (blog/guide/doc pages) —
   .content on its own (e.g. the homepage intro in layouts/index.html) was
   never covered, so links there fell back to the browser's default blue. */
.content a { color: var(--color-fg-hyperlink); text-decoration: none; }
.content a:hover { color: var(--color-fg-hyperlink-hover); }

/* Image captions (<small><i>...</i></small> right after an <img>) have no
   theme styling at all — they render as raw inline text spanning the full
   container, wider than the (centered, 78%-wide) image above them. Make
   them behave like actual captions: centered, same max width as images. */
.content small {
  display: block;
  text-align: center;
  max-width: 78%;
  margin: 0 auto var(--len-3);
  color: var(--color-fg-font-quote);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* Header: main content nav (Novum/GI Guide/Blog) stays left, utility links
   (LinkedIn/GitHub/Resume — a separate .menu.menu-utility, see
   layouts/_partials/header.html) get pushed to the far right, so the two
   are visually distinct instead of one long undifferentiated list. */
.header { justify-content: flex-start; gap: var(--len-5); }
.header .menu-utility { margin-left: auto; }

@media (max-width: 767px) {
  .header .menu-utility {
    flex: 0 0 100%;
    margin-left: 0;
    justify-content: center;
    margin-top: var(--len-2);
    padding-top: var(--len-2);
    border-top: 1px solid var(--color-fg-tiny-line);
  }
}

/* Page title for landing-style sections (e.g. Novum) — the theme's
   section.html never renders a title at all, only single.html does. */
.page-title {
  text-align: center;
  font-size: var(--font-size-6);
  margin: var(--len-2) 0 var(--len-4) 0;
}

/* Novum landing page only: keep images wide, but pull the text itself into
   a narrower, centered reading column so it doesn't stretch edge-to-edge
   wider than the images sitting above/below it. */
.main-wrapper.no-side .content > p,
.main-wrapper.no-side .content > ul,
.main-wrapper.no-side .content > ol,
.main-wrapper.no-side .content > blockquote,
.main-wrapper.no-side .content > h2,
.main-wrapper.no-side .content > h3 {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}