/* ============================================================
   LeafWiki custom.css — deployed IDENTICALLY to all four instances
   (public, rv1, roylu-public, roylu-rv1) at <data-dir>/custom.css.

   Enabled per instance via LEAFWIKI_CUSTOM_STYLESHEET=custom.css.
   Edits are LIVE ON SAVE (read from disk per request) — only turning
   the feature on requires a restart.

   ⚠ These class names are compiled into the leafwiki binary. Re-verify
   after any binary upgrade:
     grep -oE '[a-z-]+__[a-z-]+' index-*.js | sort -u
   ============================================================ */


/* ------------------------------------------------------------
   1. Theme-responsive logo
   branding/logo.png is a WHITE transparent pug. LeafWiki serves one
   logo for both themes, so recolor per theme with a filter.
   invert(1) is a true inversion — correct for single-color line art,
   wrong for a multicolor logo. The favicon is a separate static file
   (blue pug) and is deliberately NOT filtered: a browser tab icon
   cannot respond to page theme.
   ------------------------------------------------------------ */

.app-layout__logo-image {
  filter: invert(1);            /* light mode: white -> black */
}

.dark .app-layout__logo-image,
:root.dark .app-layout__logo-image {
  filter: none;                 /* dark mode: stays white */
}


/* ------------------------------------------------------------
   2. Hide wiki-bookkeeping chrome
   Cosmetic only — the data remains in the DOM and is still returned
   by the API. This is decluttering, NOT privacy.
   ------------------------------------------------------------ */

/* "Updated by X - N hours ago", rendered under the breadcrumbs.
   NOTE: this is .page-viewer__metadata — NOT __metadata-bar, which is
   a separate wide-screen element. Both are hidden. */
.page-viewer__metadata { display: none; }
.page-viewer__metadata-bar { display: none; }

/* "Referenced by / Broken links" pane at the page bottom */
.backlinks__pane { display: none; }

/* page properties table */
.page-metadata__properties { display: none; }

/* "On this page" table of contents: right-side rail + mobile popover */
.app-layout__toc-pane { display: none; }
.page-viewer__toc-button { display: none; }
.page-viewer__toc-panel { display: none; }


/* ------------------------------------------------------------
   3. Login button
   The logged-out toolbar holds a bare <Button> with no class of its
   own, so target the toolbar itself and use :has() to keep it visible
   when the avatar dropdown is present (logged in). Hiding the whole
   toolbar also stops it reserving layout width.

   (user-toolbar__not-logged-in is NOT this button — it is the label
   shown only under --disable-auth.)

   Safe on private instances too: a logged-out visitor there gets the
   full login page, never the browsing chrome, so this state never
   renders.
   ------------------------------------------------------------ */

.user-toolbar:not(:has(.user-toolbar__dropdown-trigger)) { display: none; }
.user-toolbar__dropdown-trigger { display: inline-flex !important; }

/* Breadcrumbs (breadcrumbs-nav__*) are deliberately KEPT — they are
   navigation, useful to ordinary visitors, not wiki bookkeeping. */


/* ------------------------------------------------------------
   4. Linked images (e.g. social-icon rows)
   Two theme behaviors to override for images inside <a>:
   (a) prose sets img { display:block; margin:2em 0 }, so a row of
       <a><img></a> icons stacks vertically and &nbsp; is ignored;
   (b) LeafWiki attaches a zoom-lightbox click handler to every
       markdown image (cursor:zoom-in) that preventDefault()s the
       click — so clicking a linked icon opens a zoom of the icon
       instead of following the href.
   pointer-events:none makes the img transparent to clicks, so the
   click passes through to the parent <a> (navigation works) AND the
   zoom handler never fires. Standalone images keep block layout + zoom.
   ------------------------------------------------------------ */

.page-viewer__content a img,
.markdown-editor__preview a img {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  pointer-events: none;        /* click passes through to the <a>, not the zoom */
  cursor: pointer;
}

/* The X (Twitter) simple-icon is requested in white (.../x/white) and X has no
   brand color, so it's invisible on the light theme. Flip it per theme like the
   logo: black in light, white in dark. */
img[src*="simpleicons.org/x/"] { filter: invert(1); }            /* light: white -> black */
.dark img[src*="simpleicons.org/x/"],
:root.dark img[src*="simpleicons.org/x/"] { filter: none; }      /* dark: stays white */


/* ------------------------------------------------------------
   5. Tighten the gap above content
   The theme puts margin-top: calc(var(--spacing)*6) (~1.5rem) on
   .page-viewer__content. The prose first-child rule already zeroes
   the top heading's own margin, so this container margin is the only
   gap above content — trim it.
   ------------------------------------------------------------ */

.page-viewer__content { margin-top: 0.5rem; }