/* Akret Wiki — dark-first, monospace, wider */

/* ===== Color tokens (dark default) ===== */
:root {
  --bg: #111;          /* soft black */
  --fg: #e0e0e0;       /* warm gray */
  --muted: #9a9a9a;
  --link: #9bb6ff;
  --link-visited: #c5a3ff;
  --border: #333;
  --code-bg: #1a1a1a;

  /* Interactive hex map states */
  --hex-zoom-accent: #6aa0ff;
  --hex-zoom-bg: #1f2431;
  --hex-article-accent: #5fc98e;
  --hex-article-bg: #1c2b23;
  --hex-disabled-accent: #666;
  --hex-disabled-bg: #202020;
  --focus-outline: rgba(155, 182, 255, 0.6);
}

/* Light override (respects browser/OS setting) */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #fff;
    --fg: #111;
    --muted: #555;
    --link: #0044cc;
    --link-visited: #6a35b1;
    --border: #ddd;
    --code-bg: #f6f8fa;

    /* Interactive hex map states */
    --hex-zoom-accent: #0055dd;
    --hex-zoom-bg: #e3f0ff;
    --hex-article-accent: #00884d;
    --hex-article-bg: #e6f7f0;
    --hex-disabled-accent: #999;
    --hex-disabled-bg: #f0f0f0;
    --focus-outline: rgba(0, 68, 204, 0.4);
  }
}

/* ===== Base ===== */
html { font-size: 16px; }
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
  font: Iosevka Comfy, monospace, Iosevka, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
}

/* ===== Layout: wider column (nav breathing room) ===== */
#container, .markdown-body, .gollum-site, main, .page {
  max-width: 96ch;              /* wider than 80ch */
  padding: 2.5rem 1rem 6rem;
  margin: 0 auto;
}

/* Small screens: edge-to-edge with comfy padding */
@media (max-width: 720px) {
  #container, .markdown-body, .gollum-site, main, .page {
    max-width: none;
    padding: 1.25rem 1rem 4rem;
  }
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5, h6 {
  margin: 2.5rem 0 1rem;
  line-height: 1.25;
  font-weight: 700;
}
h1 {
  font-size: 1.9rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .3rem;
}
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; color: var(--muted); }
h4, h5, h6 { font-size: 1rem; color: var(--muted); }

/* ===== Text & links ===== */
p, ul, ol, blockquote, pre, table { margin: 1.25rem 0; font-size: 18px; }
li { margin: .4rem 0; }
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:visited { color: var(--link-visited); }
a:hover, a:focus { text-decoration-thickness: 2px; outline: none; }

/* ===== Code & pre ===== */
code, kbd, samp {
  background: var(--code-bg);
  padding: .15rem .35rem;
  border-radius: 4px;
}
pre {
  background: var(--code-bg);
  padding: 1rem 1.2rem;
  border-radius: 6px;
  overflow: auto;
}
pre code { background: transparent; padding: 0; }

/* ===== Media ===== */
img, video { max-width: 100%; height: auto; border-radius: 3px; }
figure { margin: 1.5rem 0; }
figcaption { color: var(--muted); font-size: .9rem; margin-top: .4rem; }

/* ===== Tables ===== */
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
th, td {
  border: 1px solid var(--border);
  padding: .6rem .7rem;
  vertical-align: top;
}
thead th { background: color-mix(in srgb, var(--code-bg) 85%, transparent); }

/* ===== Blockquotes ===== */
blockquote {
  margin: 1.2rem 0;
  padding: .6rem 1rem;
  border-left: 3px solid var(--border);
  color: var(--muted);
}

/* ===== Top nav / header breathing room ===== */
header, .header, .gollum-header, nav, .actions {
  background: transparent;
  border: 0;
  color: var(--muted);
}
.gollum-header nav,
header nav,
nav {
  display: flex;
  flex-wrap: wrap;         /* allow wrapping instead of squashing */
  gap: .6rem .8rem;
  align-items: center;
}
nav a, .actions a, .actions button {
  font: inherit;
  white-space: nowrap;
}

/* ===== Forms ===== */
input[type="search"], input[type="text"], textarea, select, button {
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .4rem .6rem;
}

/* ===== Print ===== */
@media print {
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  pre, code { background: #fff; }
  #container, .markdown-body, .gollum-site, main, .page { max-width: none; padding: 0; }
  header, nav, .gollum-footer, .actions { display: none !important; }
}

/* ====================================================================== */
/* Strong overrides to beat Primer/GitHub defaults (place LAST)           */
/* ====================================================================== */

/* Force our font stack and colors across common wrappers + markdown */
:root, html, body,
#container, .gollum-site, .gollum-content, .wiki, .page, main,
.markdown-body,
.markdown-body *, .markdown-body *::before, .markdown-body *::after {
  font-family: Iosevka Comfy, monospace, Iosevka, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New" !important;
  color: var(--fg) !important;
}
body, td, .markdown-body { background: var(--bg) !important; }

/* Explicitly keep code areas monospace */
.markdown-body code,
.markdown-body kbd,
.markdown-body samp,
.markdown-body pre,
.markdown-body pre code {
  font-family: Iosevka Comfy, monospace, Iosevka, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New" !important;
}

/* Headings: ensure spacing + weight survive */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  font-family: inherit !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 2.5rem 0 1rem !important;
}

/* Layout container width (wins over theme containers) */
#container, .gollum-site, .markdown-body, main, .page {
  max-width: 102ch !important;
  margin: 0 auto !important;
  padding: 2.5rem 1rem 6rem !important;
}

/* Keep links and tables consistent */
a { color: var(--link) !important; }
a:visited { color: var(--link-visited) !important; }
table { width: 100% !important; border-collapse: collapse !important; }
th, td { border: 1px solid var(--border) !important; padding: .6rem .7rem !important; }
pre { background: var(--code-bg) !important; padding: 1rem 1.2rem !important; border-radius: 6px !important; overflow: auto !important; }

/* --- Make the "Home" button a clickable image --- */
#minibutton-home {
  /* size the button to the image */
  width: 40px;
  height: 40px;
  padding: 0 !important;

  /* show the cover art */
  background: url("/images/akret_cover.jpg") center / cover no-repeat;

  /* keep Primer button look (border/radius), but minimize chrome */
  border-radius: 5px;
  line-height: 0;                 /* collapse text height */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* visually hide text but keep it for screen readers */
  color: transparent !important;
  text-shadow: none !important;
  overflow: hidden;
}

/* Focus/hover states for keyboard + mouse */
#minibutton-home:focus,
#minibutton-home:hover {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/* Optional: smaller on phones */
@media (max-width: 720px) {
  #minibutton-home { width: 26px; height: 26px; border-radius: 3px; }
}

/* If the surrounding nav compresses, keep the icon from shrinking */
nav.actions #minibutton-home { flex: 0 0 auto; }

/* ====================================================================== */
/*                               BADGES                                   */
/* ====================================================================== */
/* Use on <img class="badge" src="/images/badges/xyz.png"> */

/* Inline image badges */
img.badge {
  height: 32px;               /* track with surrounding text size */
  width: auto;                  /* keep aspect ratio */
  vertical-align: -0.16em;      /* nudge down to sit on the baseline */
  border-radius: 5px;
  box-shadow: 0 0 0 1px var(--border) inset;  /* subtle keyline */
  image-rendering: auto;        /* avoid pixelation for PNG/SVG */
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* Right-floating decorative badge (e.g., section callout) */
img.badge.right {
  float: right;
}

/* Optional: monochrome SVGs that follow text color (export with fill="currentColor") */
img.badge.icon { filter: none; }             /* ensure no accidental filters */
.badge-muted { color: var(--muted); }        /* wrap parent to tone down */

/* Optional: gentle tweaks for dark mode PNGs (monochrome sources) */
@media (prefers-color-scheme: dark) {
  img.badge.invert {
    filter: brightness(1.1) contrast(1.1);
  }
}

/* === Hide Gollum’s auto-generated page title ========================== */
h1.header-title {
  display: none !important;
}

/* === HEX PACKING === */
/* Geometry:
   - Hex width  = 2 * side
   - Hex height = √3 * side  ≈ 0.866 * width
   - Horizontal center spacing = 0.75 * width
   - Vertical   center spacing = 0.50 * height
*/
.hexmap {
  --side: 102px;                              /* scale here */
  --hex-w: calc(var(--side) * 2);
  --hex-h: calc(var(--side) * 1.732);        /* ≈ √3 * side */
}

/* 5×5 positioning grid whose cell size equals the center-to-center spacing */
.hexgrid {
  display: grid;
  grid-template-columns: repeat(5, calc(var(--hex-w) * 0.75));
  grid-template-rows:    repeat(5, calc(var(--hex-h) * 0.50));
  justify-content: center;
  align-content:   center;
  gap: 0;                                    /* no gaps at all */
}

/* Hex itself fills real hex size; it will overflow its cell appropriately */
.hex a {
  width:  var(--hex-w);
  height: var(--hex-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  text-align: center;
  color: inherit;
  text-decoration: none;

  /* flat-top hex */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%,
                     75% 100%, 25% 100%, 0% 50%);

  background: var(--code-bg);
  border: 1px solid var(--border);
  transition: background .15s ease, transform .06s ease;
}

/* Optional: reduce subpixel seams on some zoom levels */
.hex a { margin: -0.25px; }

.hex a:hover, .hex a:focus {
  background: var(--muted);
  transform: translateY(-1px);
  outline: none;
}

/* Labels */
.hex .label{
    font-weight:700;
    line-height:1.2;
    border: none;
    font-size: clamp(0.7rem, 1.2vw + 0.4rem, 1.2rem);
    font: Iosevka Comfy, monospace, Iosevka, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
}

/* Positions stay the same: */
.hex.pos-c  { grid-column: 3; grid-row: 3; }
.hex.pos-n  { grid-column: 3; grid-row: 1; }
.hex.pos-s  { grid-column: 3; grid-row: 5; }
.hex.pos-ne { grid-column: 4; grid-row: 2; }
.hex.pos-se { grid-column: 4; grid-row: 4; }
.hex.pos-nw { grid-column: 2; grid-row: 2; }
.hex.pos-sw { grid-column: 2; grid-row: 4; }

/* Responsive scaling (optional) */
@media (max-width: 640px) { .hexmap { --side: 48px; } }
@media (max-width: 420px) { .hexmap { --side: 40px; } }

/* Show only one board at a time */
.hexmap .board{ display:none !important; }
.hexmap .board.is-default{ display:block !important; }   /* when no hash */
.hexmap .board:target{ display:block !important; }       /* when a board is targeted */

/* If any board is targeted, hide the default one */
.hexmap:has(.board:target) .board.is-default{ display:none !important; }

/* ZOOM INDICATORS*/
.hex a,
.hex .nolink {
  position: relative;
  cursor: default;
}

/* Cursors */
.hex a[data-action="zoom"]     { cursor: zoom-in; }
.hex a[data-action="article"]  { cursor: pointer; }
.hex a[data-action="none"],
.hex .nolink                   { cursor: not-allowed; }

/* Hover/focus glows */
.hex a[data-action="zoom"]:hover,
.hex a[data-action="zoom"]:focus-visible {
  box-shadow: 0 0 0 2px var(--hex-zoom-accent) inset, 0 0 0 1px var(--hex-zoom-accent);
  background: var(--hex-zoom-bg);
  outline: 4px solid currentColor;
  outline-offset: 4px;
}
.hex a[data-action="article"]:hover,
.hex a[data-action="article"]:focus-visible {
  box-shadow: 0 0 0 2px var(--hex-article-accent) inset, 0 0 0 1px var(--hex-article-accent);
  background: var(--hex-article-bg);
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.hex a[data-action="none"]:hover,
.hex a[data-action="none"]:focus-visible,
.hex .nolink:hover,
.hex .nolink:focus-visible {
  box-shadow: 0 0 0 2px var(--hex-disabled-accent) inset, 0 0 0 1px var(--hex-disabled-accent);
  background: var(--hex-disabled-bg);
  opacity: .75;
}

/* Corner glyphs on hover/focus */
.hex a[data-action]:hover::after,
.hex a[data-action]:focus-visible::after,
.hex .nolink:hover::after,
.hex .nolink:focus-visible::after {
  content: attr(data-glyph);
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 14px;
  opacity: 0.9;
}

.tagitl-script {
  height: 32px;
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  text-align: left;
  width: 100px;
}
.tagitl-glyph {
  stroke: var(--fg);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}