/* =====================================================================
   Long War Rules Index: site stylesheet
   The site loads this file after the superhero theme and stylesheets/lato.css.
   See extra_css in mkdocs.yml.

   Contents
     1.  Colours
     2.  Page base
     3.  Layout
     4.  Navbar
     5.  Navigation panels (Contents, Factions)
     6.  Search panel
     7.  Text markup (rb, bb, gi, pi, mark)
     8.  Page header (breadcrumb, attribution, flavour text)
     9.  Lists (lettered sub-steps, link grid)
    10.  Tables (header-less tables, statlines)
    11.  Cross-reference box (cross-references, parent, related)
    12.  Page footer (previous / next)
    13.  Battle packs (force organisation charts, battlefield layouts)
   ===================================================================== */


/* ---------- 1. Colours ---------- */
:root {
  --page-background:   rgb(33, 42, 51);
  --muted-text:        #697f94;     /* Text colour of the attribution line and the flavour text */
  --rule-line:         #030c16;     /* Colour of the horizontal rule (hr) */
  --border-light:      rgba(255, 255, 255, .15);
  --highlight:         rgb(223, 105, 26);
  --keyword-red:       rgb(227, 69, 87);
  --unit-type-blue:    rgb(9, 125, 241);
  --example-green:     rgb(0, 176, 80);
  --designer-purple:   rgb(177, 122, 232);
}


/* ---------- 2. Page base ---------- */
body {
  background-color: var(--page-background) !important;
}

hr {
  border: none;
  border-top: 1px solid var(--rule-line);
}


/* ---------- 3. Layout ---------- */
/* Bootswatch theme: hide the sidebar with the page contents. The content uses the full page width. */
.col-md-3:has(.bs-sidebar) { display: none; }
.col-md-9[role="main"] { width: 100%; max-width: 100%; flex: 0 0 100%; }


/* ---------- 4. Navbar (theme_overrides/main.html) ---------- */
/* The buttons Contents, Factions and Search are outside the collapsible part of the navbar. Thus the toggler has no function. */
.navbar .navbar-toggler { display: none; }
.navbar .navbar-collapse { display: none !important; }        /* Hide the empty collapsible part. It takes the free width of the navbar. */
.navbar .navigation-panel-buttons { flex-direction: row; gap: .25rem; margin-left: auto; }   /* Put the buttons at the right side. */
.navbar .navigation-panel-buttons .nav-link { padding-left: .5rem; padding-right: .5rem; }

/* Narrow screens: the buttons show only their icons. Thus the site name and the buttons fit on one line. */
@media (max-width: 575.98px) {
  .navbar .navbar-brand { font-size: 1.05rem; margin-right: .5rem; }
  .navbar .navigation-button-label { display: none; }
  .navbar .navigation-panel-buttons .nav-link { padding-left: .6rem; padding-right: .6rem; font-size: 1.1rem; }
}


/* Keyboard shortcut dialog (theme_overrides/keyboard-modal.html). The template has a class here, not an inline style. */
.keyboard-shortcut-keys { width: 20%; }


/* ---------- 5. Navigation panels: Contents and Factions (theme_overrides/main.html) ---------- */
/* Bootstrap modals. Change the window size, the gap, the colours and the spacing here. The window does not extend past the visible screen. A long list scrolls inside the window. */

/* Window */
.navigation-panel {
  --panel-gap: 1.75rem;                                           /* Space between the window and the screen edges */
}
@media (max-width: 575.98px) {
  .navigation-panel { --panel-gap: .75rem; }
}
.navigation-panel .modal-dialog {
  margin: var(--panel-gap);
  max-height: calc(100% - 2 * var(--panel-gap));
}
@media (min-width: 576px) {
  .navigation-panel .modal-dialog {
    max-width: 500px;                                             /* Window width. On a narrow screen, the window uses the full width. */
    margin: var(--panel-gap) auto;
  }
}
.navigation-panel .modal-content {
  /* The window is not taller than the visible screen. The unit dvh does not include the browser toolbars on phones. The unit vh is the fallback. */
  max-height: calc(100vh - 2 * var(--panel-gap));
  max-height: calc(100dvh - 2 * var(--panel-gap));
  background-color: #212A33;                                      /* Window background colour */
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 0;
}

/* Title bar ("Table of Contents", "Factions") */
.navigation-panel .modal-header {
  padding: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

/* Entry list */
.navigation-panel .modal-body {
  padding: 1rem 1rem 1.5rem;                                      /* Space below the last entry */
  overflow-y: auto;                                               /* The list scrolls inside the window. */
  overscroll-behavior: contain;                                   /* When the list scrolls, the page does not scroll. */
}
.navigation-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation-panel-list li { padding: .2rem 0; }                   /* Space between the entries */
.navigation-panel-list li.depth-1 { padding-left: 1.5rem; }       /* Indent of a codex supplement below its faction */
.navigation-panel-list a { font-weight: 600; }

/* Narrow screens: a smaller title bar and larger touch areas */
@media (max-width: 575.98px) {
  .navigation-panel .modal-header { padding: .75rem 1rem; }
  .navigation-panel-list li { padding: .45rem 0; }
}


/* ---------- 6. Search panel ---------- */
#mkdocs-search-results mark { background: rgba(223, 105, 26, .35); color: inherit; padding: 0 .1em; border-radius: 2px; }
#mkdocs-search-results .search-hit p { opacity: .85; }


/* ---------- 7. Text markup ---------- */
/* <rb>: red bold keyword. <bb>: blue bold unit type. <gi>: green example. <pi>: purple designer note. */
rb {
  color: var(--keyword-red);
  font-weight: bold !important;
  cursor: help;
}

bb {
  color: var(--unit-type-blue);
  font-weight: bold !important;
  cursor: help;
}

gi {
  color: var(--example-green);
}

pi {
  color: var(--designer-purple);
  font-weight: bold !important;
}

mark { background: var(--highlight); color: rgb(253, 253, 253); padding: 0 .15em; }


/* ---------- 8. Page header ---------- */
/* Breadcrumb */
.crumbs { font-size: .85em; margin: -.5rem 0 1.5rem; }
.crumbs a { font-weight: 600; }

/* Attribution (source book and page) */
.attr { font-size: .85em; font-style: italic; margin: -.5rem 0 1.5rem; color: var(--muted-text); }
.crumbs + .attr { margin-top: -1.25rem; }

/* Flavour text: narrative text at the start of a page. It is not rule material. */
.flavour-text { color: var(--muted-text); }


/* ---------- 9. Lists ---------- */
/* Lettered sub-steps: a numbered list in a numbered list (see 11.1) */
ol ol { list-style-type: lower-alpha; }

/* Link grid: the index, the cross-reference box, the related pages and the hand-written grids */
ul.link-grid,
.link-grid > ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  /* Up to 3 columns of equal width. If a column becomes narrower than 12rem, the grid shows 2 columns, then 1 column. */
  grid-template-columns: repeat(auto-fill, minmax(max(12rem, calc((100% - 3rem) / 3)), 1fr));
  gap: .25rem 1.5rem;
}
.link-grid li { padding: .15rem 0; }
.link-grid a { font-weight: 600; }


/* ---------- 10. Tables ---------- */
/* Table without column headings: hide a header row that has no text (see 12.1) */
thead:not(:has(th:not(:empty))) { display: none; }

/* Statlines (hooks/statlines.py) */
.statline-wrap { overflow-x: auto; margin: 1.5rem 0; }
.statline {
  width: 100%;                 /* Fill the width of the content column */
  border-collapse: collapse;
}
.statline th,
.statline td {
  padding: .6rem .75rem;
  text-align: center;
  vertical-align: top;
  border: 1px solid var(--border-light);
}
.statline thead th { background: rgba(255, 255, 255, .06); font-weight: 600; }
.statline tbody th { text-align: left; white-space: nowrap; }   /* Column of the row names */


/* ---------- 11. Cross-reference box (hooks/cross_refs.py) ---------- */
.xref {
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: .75rem 1.25rem;
  margin: 1.5rem 0;
}
.xref summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.xref summary::-webkit-details-marker { display: none; }
.xref summary::after { content: "\25BC"; font-size: .7em; }   /* Arrow when the box is closed */
.xref[open] summary::after { content: "\25B2"; }               /* Arrow when the box is open */
.xref[open] summary { margin-bottom: .5rem; }

.xref-group h4,
.xref-related h4,
.xref-parent h4 { font-size: 1em; font-weight: 700; }
.xref-group h4 { margin: .75rem 0 .25rem; }
.xref-heading { margin: .75rem 0 .25rem; }
.xref-questions { margin: 0 0 1rem; padding-left: 1.25rem; }
.xref-questions li { padding: .15rem 0; }

/* Parent / Related */
.xref-parent { margin: 1.25rem 0 .5rem; }
.xref-parent h4 { display: inline; margin: 0 .25rem 0 0; }
.xref-related h4 { margin: .75rem 0 .25rem; }


/* ---------- 12. Page footer: previous / next (hooks/page_nav.py) ---------- */
.page-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}
.page-nav .prev { margin-right: auto; }
.page-nav .next { margin-left: auto; text-align: right; }
.page-nav .btn { white-space: normal; max-width: 48%; }


/* ---------- 13. Battle packs ---------- */
/* Force organisation charts. A dark box is a compulsory choice. A grey box is an optional choice. */
.force-organisation-chart { margin: 0 0 1.5rem; }
.force-organisation-chart > div { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .35rem; }
.compulsory-choice,
.optional-choice {
  display: inline-block;
  min-width: 8em;
  padding: .3rem .75rem;
  text-align: center;
  font-size: .9em;
}
.compulsory-choice { background: rgb(16, 22, 29); border: 1px solid rgba(255, 255, 255, .35); color: rgb(253, 253, 253); font-weight: 600; }
.optional-choice { background: rgba(255, 255, 255, .12); border: 1px solid var(--border-light); color: rgb(200, 209, 218); }

/* Battlefield layout images: centred, at most 500px wide and 337.5px high. On a narrow screen, the image becomes smaller. */
.battlefield-layout { text-align: center; }
.battlefield-layout img { display: block; width: 100%; height: auto; max-width: 500px; max-height: 337.5px; object-fit: contain; margin: 0 auto; }