/* =======================
   FONTS
========================== */

@import url('https://fonts.bunny.net/css?family=fraunces:400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100..900&display=swap');

:root {
    --font-heading: 'Fraunces', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-body: 'Noto Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    /* Spectrum green (basic, non-bright variant) replaces default orange accent */
    --color-l-accent: #00AA00;
}


/* =======================
   PAGE HEADER
========================== */

/* Reduce bottom padding on page headers with no author metadata
   (index/category pages). Post pages always have .page-header-author-avatar
   so they are unaffected. */
.page-header:not(:has(.page-header-author-avatar)) {
  padding-bottom: 0.5rem;
}

/* Fraunces has strong visual weight at display sizes; this pulls back the default
   2.25rem × 1.2 scale which renders too large with a serif heading font. */
.page-header-title {
    font-size: 2.6rem;
}


/* =======================
   SIDEBAR - CURRENT PAGE & HOVER
   Spectrum colour palette used as a discrete 8-bit theme nod:
   green (accent) for current and hover states.
========================== */

/* Current page — accent green. The default theme's foreground-700
   is barely distinguishable from surrounding items. */
.site-tree-item-self.is-current {
    color: var(--color-accent);
}

/* Hover — accent green without the default theme's semibold weight */
.site-tree-item-self:hover {
    color: var(--color-accent);
    font-weight: var(--font-weight-normal);
    opacity: 0.75;
}


/* =======================
   SIDEBAR
   DOM order: 1.ASM 2.BASIC 3.Building 4.Categories 5.General
   Target visual order: ASM, BASIC, Building, General | Categories
   WARNING: nth-child selectors are fragile — review after any Flowershow upgrade.
========================== */

.site-tree {
    display: flex;
    flex-direction: column;
}
.site-tree-item {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.site-tree > .site-tree-item:nth-child(1) { order: 1; } /* ASM */
.site-tree > .site-tree-item:nth-child(2) { order: 2; } /* BASIC */
.site-tree > .site-tree-item:nth-child(3) { order: 3; } /* Building an 8-bit computer */
.site-tree > .site-tree-item:nth-child(5) { order: 4; } /* General */
.site-tree > .site-tree-item:nth-child(4) { order: 5; } /* Categories */
.site-tree-item:has(a[href="/"]) { display: none; } /* Back to BASIC root link */

/* Divider below General, visually separating content folders from Categories */
.site-tree > .site-tree-item:nth-child(5) {
    border-bottom: 1px solid var(--color-foreground-100);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}


/* =======================
   TOC - ACTIVE & HOVER
   Spectrum red (basic, non-bright variant) used as a discrete
   8-bit theme nod on the right-hand TOC column.
========================== */

/* Active TOC item — Spectrum red (#AA0000) */
.toc-item-self[aria-current="true"] {
    color: #AA0000;
}

/* Hover — Spectrum red, without the default theme's semibold weight */
.toc-item-self:hover {
    color: #AA0000;
    font-weight: var(--font-weight-normal);
    opacity: 0.75;
}


/* =======================
   TYPOGRAPHY - FOOTER
========================== */

/* Default theme sets publication name to 1.125rem; reduced for a lighter footer. */
.site-footer-publication-name {
    font-size: 1rem;
}

/* Default theme sets copyright to 0.85rem; reduced to de-emphasise further. */
.site-footer-copyright {
    font-size: 0.8rem;
}


/* =======================
   SEARCH BUTTON
========================== */

/* Spectrum yellow (pale tint) as a subtle background on the search button —
   completes the three-colour Spectrum palette reference alongside
   green (sidebar) and red (TOC). Too low-contrast for text use on white,
   so applied only as a background tint. */
.search-button {
    background-color: #FFFFCC;
}


/* =======================
   IMAGES & CAPTIONS
========================== */

/* Remove bottom margin from paragraphs containing images so captions
   sit flush beneath the image. */
p:has(img) {
    margin-bottom: 0;
}

/* Style an italicised paragraph immediately after an image as a caption.
   Assumes Flowershow renders standalone images as bare <img> elements.
   If that changes, update selector to: p:has(img) + p:has(> em:only-child) */
img + p:has(> em:only-child) {
    text-align: center;
    margin-top: -1rem;
}

img + p:has(> em:only-child) > em {
    display: block;
    font-size: 0.9em;
}


/* =======================
   OBSIDIAN BASES CARDS
========================== */

/* Remove underline from card links */
.MuiCardActionArea-root,
.MuiCardActionArea-root * {
  text-decoration: none;
}

/* Hide property labels (the first of two adjacent spans in each field row) */
.MuiCardContent-root span:has(+ span) {
  display: none;
}

/* Constrain image height to a consistent 3:1 ratio — wider than 16:9 to
   reduce visual dominance when cards are displayed at full column width */
.MuiCard-root .MuiBox-root:first-child {
  aspect-ratio: 3 / 1 !important;
  position: relative !important;
}

/* Remove prose image margins which would otherwise add unwanted spacing within cards */
.MuiCard-root img {
  margin-top: 0;
  margin-bottom: 0;
}

/* Prose line-height bleeds into card content; tighten for compact card layout */
.MuiCard-root .MuiCardContent-root {
  line-height: 1.2;
}