/*****************************************************************
 * Pointcaster look for An Otter Wiki (docs.pointcaster.net)
 *
 * Typography and colors are derived from the Grav site
 * (www/user/themes/pointcaster + quark2 theme tokens) so the
 * wiki matches (grav.)pointcaster.net:
 *
 *   fonts     Atkinson Hyperlegible Next (body + display) and
 *             Atkinson Hyperlegible Mono (code) — the same
 *             families as the Pointcaster application UI.
 *             Self-hosted below from /static/custom/fonts/
 *             (docker-compose mounts the Grav theme's fonts dir);
 *             preloaded in customHead.html
 *   accent    #80CBC4  (q2-accent / q2-link)
 *   surfaces  #0F111A bg, #151823 elevated, #1E2230 muted
 *   text      #E5E9F0 body, #8691A7 muted
 *   borders   #2A2F3A divider, #3B4252 strong, #4C566A ring
 *
 * OtterWiki loads halfmoon-variables.css (via otterwiki.css), so
 * most of the theming is done by overriding halfmoon's CSS
 * variables. The site is pinned to dark mode in customHead.html,
 * matching the dark-only Grav site.
 *****************************************************************/

/****************************************
 * Typography
 ****************************************/

/* Variable woff2 builds (weights 200-800, matching the ExtraLight-ExtraBold
   OTF set the app ships), SIL OFL 1.1. Relative URLs resolve against this
   stylesheet's own /static/custom/ path. */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-mono/atkinson-hyperlegible-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-mono/atkinson-hyperlegible-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body {
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings + brand use the display face, like h1-h6/.navbar-brand on the Grav
   site. Weights mirror the quark2/pointcaster scale now that the display
   family has real weights (Cal Sans only had one): h1 sits at 500 (Cal Sans's
   optical weight), h2 stays heavy at 700, the rest 600. */
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.sidebar-brand {
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h1, .sidebar-brand { font-weight: 500; }
h2 { font-weight: 700; }
h3, h4, h5, h6 { font-weight: 600; }

.navbar-brand { font-weight: 400; }

/* Monospace as on the Grav site (pointcaster --pico-font-family-monospace) */
code, pre, kbd, samp, .code {
  font-family: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/****************************************
 * Colors (halfmoon variable overrides)
 ****************************************/

:root {
  /* accent — q2-accent / q2-link */
  --primary-color: #80CBC4;
  --primary-color-light: #9FDBD5;
  --primary-color-very-light: #BFE9E4;
  --primary-color-dark: #5FB3AB;
  --primary-color-very-dark: #3E8F88;
  --text-color-on-primary-color-bg: #00010A; /* q2-accent-contrast */

  /* surfaces — q2-bg / q2-bg-elev */
  --dm-base-body-bg-color: #0F111A;
  --dm-navbar-bg-color: #0F111A;     /* q2-nav-bg */
  --dm-navbar-border-color: #2A2F3A; /* q2-nav-border */
  --dm-sidebar-bg-color: #0F111A;
  --dm-sidebar-border-color: #2A2F3A;
  --dm-card-bg-color: #151823;
  --dm-card-border-color: #2A2F3A;
  --dm-dropdown-menu-bg-color: #151823;
  --dm-dropdown-menu-border-color: #2A2F3A;
  --dm-modal-content-bg-color: #151823;
  --dm-modal-content-border-color: #2A2F3A;
  --dm-modal-full-content-bg-color: #0F111A;

  /* text — q2-text / q2-text-muted */
  --dm-base-text-color: #E5E9F0;
  --dm-base-text-color-light: #8691A7;

  /* forms, code, tables — q2 elevated surface + border tokens */
  --dm-input-bg-color: #151823;
  --dm-input-border-color: #3B4252;
  --dm-input-border-color-hover: #4C566A;
  --dm-code-bg-color: #151823;
  --dm-kbd-bg-color: #1E2230;
  --dm-kbd-border-color: #3B4252;
  --dm-table-border-color: #2A2F3A;
}

/* otterwiki.css hardcodes #263238 for these in dark mode; re-map to the
   q2 elevated surface. (Same specificity, but custom.css loads later.) */
.dark-mode code,
.dark-mode pre,
.dark-mode .code {
  background-color: #151823;
}

/****************************************
 * the following css makes it so the
 * navigation sidebar is in alphabetical
 * order but the 'Home' entry is always
 * first and the 'Development' section
 * (with its subsections) is always last.
*****************************************/

/* make the top-level sidebar list reorderable */
.parent-sidebar-menu {
    display: flex !important;
    flex-direction: column;
}

/* default order for all items */
.parent-sidebar-menu > li {
    order: 1 !important;
}

/* move Home to the top */
.parent-sidebar-menu > li:has(a[href="/Home"]) {
    order: 0 !important;
}

/* move Development (and its nested subsections) to the bottom */
.parent-sidebar-menu > li:has(a[href="/Development"]) {
    order: 2 !important;
}

/****************************************
 * Sidebar nav bullets. Replaces OtterWiki's
 * default open triangles / hollow square with
 * filled glyphs in muted grey (no accent).
 ****************************************/

/* Vertically centre the marker against the label. Flexbox
   alignment is used instead of a transform/translateY nudge so
   it lines up consistently in both Chrome and Firefox. */
.sidebarmenu details > summary {
    align-items: center !important;
}

/* Section markers: filled triangles in muted grey (no accent). */
.sidebarmenu details > summary::before {
    content: '\25B8' !important; /* ▸ collapsed */
    color: var(--dm-base-text-color-light);
    line-height: 1;
}

.sidebarmenu details[open] > summary::before {
    content: '\25BE' !important; /* ▾ expanded */
    color: var(--dm-base-text-color-light);
}

#custom-menu {
  opacity: 0.75;
}

#custom-menu i.fas {
  font-size: 1.25rem;
  margin-right: 0.25rem;
}


/* Subsection / leaf markers: a small filled square, same grey. */
.sidebar-menu .summary-details::before {
    content: '\25AA' !important; /* ▪ */
    font-size: 0.7rem;
    color: var(--dm-base-text-color-light);
}


/****************************************
 * Keep the otterwiki link in the sidebar but
 * make it more muted
 ****************************************/
.sidebar-otter a {
    display: inline;
    padding: 0;
    margin: 0;
}
.sidebar-otter img {
    display: none;
}
.sidebar-otter {
    opacity: 0.6;
    margin-bottom: 1rem;
}

/****************************************
 * For custom markdown alert block styles
 * that can be used for all sorts of 
 * regularly used components
 ****************************************/
.alert-buttonlink {
    display: inline-block !important;
    padding: 0 .7em;
    margin-top: 1rem;
}

/*.alert-buttonlink p {*/
/*    1em;*/
/*}*/

.alert-buttonlink img {
    height: 2em;
}

/* put a git logo next to git links in a buttonlink block */
:root {
  --icon-git: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M439.6 236.1L244 40.5C238.6 35 231.2 32 223.6 32s-15 3-20.4 8.4l-40.7 40.6 51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3l-46.3-46.3 0 121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56l0-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4L204.1 471.6c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4L439.6 276.9c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4z'/%3E%3C/svg%3E");
}

.alert-buttonlink a:is(
  [href^="https://github.com"]
)::before {
  content: "";
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  margin-inline-end: 0.3em;
  vertical-align: -0.15em;
  background-color: currentColor;
  mask: var(--icon-git) center / contain no-repeat;
}