/* ==========================================================================
   JROTC All Forms — theme overrides for MkDocs Material
   Army green + gold, tuned for light and dark schemes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette
   -------------------------------------------------------------------------- */

:root {
  --jr-green-900: #17280f;
  --jr-green-800: #1f3617;
  --jr-green-700: #2b4a20;
  --jr-green-600: #3b5323; /* Army green */
  --jr-green-400: #6b8a4a;
  --jr-green-200: #b9cda2;

  --jr-gold-600: #9a7b13;
  --jr-gold-500: #c9a227; /* Army gold */
  --jr-gold-300: #e3c766;

  --md-code-hl-comment-color: #6b7c5a;
}

/* Light scheme */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--jr-green-600);
  --md-primary-fg-color--light: var(--jr-green-400);
  --md-primary-fg-color--dark: var(--jr-green-800);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: var(--jr-gold-600);
  --md-accent-fg-color--transparent: rgba(201, 162, 39, 0.1);

  --md-typeset-a-color: var(--jr-green-700);

  --jr-surface: #ffffff;
  --jr-surface-alt: #f6f7f3;
  --jr-border: #e0e3d8;
  --jr-shadow: 0 1px 2px rgba(23, 40, 15, 0.06), 0 4px 14px rgba(23, 40, 15, 0.07);
  --jr-shadow-lg: 0 2px 6px rgba(23, 40, 15, 0.08), 0 12px 32px rgba(23, 40, 15, 0.12);
}

/* Dark scheme */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--jr-green-800);
  --md-primary-fg-color--light: var(--jr-green-600);
  --md-primary-fg-color--dark: var(--jr-green-900);
  --md-primary-bg-color: #eef1e8;

  --md-accent-fg-color: var(--jr-gold-300);
  --md-accent-fg-color--transparent: rgba(227, 199, 102, 0.12);

  --md-typeset-a-color: #a8c98a;

  --md-default-bg-color: #14180f;
  --md-default-bg-color--light: #1b2015;

  --jr-surface: #1b2015;
  --jr-surface-alt: #202717;
  --jr-border: #333c28;
  --jr-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
  --jr-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */

.md-typeset {
  font-size: 0.76rem;
  line-height: 1.7;
}

.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
  border-bottom: 2px solid var(--md-accent-fg-color);
  padding-bottom: 0.35em;
  margin-bottom: 0.9em;
}

.md-typeset h2 {
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-top: 2.2em;
  padding-top: 0.2em;
  border-top: 1px solid var(--jr-border);
}

/* First h2 on a page sits right under the title — no extra rule needed. */
.md-typeset h1 + h2 {
  border-top: none;
  margin-top: 1.2em;
  padding-top: 0;
}

.md-typeset h3 {
  font-weight: 600;
  margin-top: 1.6em;
  color: var(--md-default-fg-color--light);
}

.md-typeset h4 {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

/* Anchor links: visible on hover, never on print */
.md-typeset .headerlink {
  color: var(--md-accent-fg-color);
  opacity: 0;
  transition: opacity 120ms;
}
.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink,
.md-typeset .headerlink:focus {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Links
   -------------------------------------------------------------------------- */

.md-typeset a {
  text-decoration-color: var(--md-accent-fg-color);
  text-underline-offset: 0.18em;
  transition: color 120ms;
}

.md-typeset a:hover {
  color: var(--md-accent-fg-color);
}

/* --------------------------------------------------------------------------
   4. Lists — tighter, with gold markers
   -------------------------------------------------------------------------- */

.md-typeset ul li::marker {
  color: var(--md-accent-fg-color);
}

.md-typeset ol li::marker {
  color: var(--md-accent-fg-color);
  font-weight: 600;
}

.md-typeset li + li {
  margin-top: 0.3em;
}

/* Numbered procedures read as steps */
.md-typeset ol > li {
  padding-left: 0.2em;
}

/* --------------------------------------------------------------------------
   5. Screenshots — framed, subtle, click-to-zoom affordance
   -------------------------------------------------------------------------- */

.md-typeset img:not(.emojione):not(.twemoji):not(.gemoji):not([src*="logo"]) {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--jr-border);
  border-radius: 8px;
  box-shadow: var(--jr-shadow);
  background: var(--jr-surface);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.md-typeset img:not(.emojione):not([src*="logo"]):hover {
  box-shadow: var(--jr-shadow-lg);
}

/* Logos are artwork, not screenshots — the rule above already skips them. */

/* --------------------------------------------------------------------------
   6. Tables
   -------------------------------------------------------------------------- */

.md-typeset table:not([class]) {
  border: 1px solid var(--jr-border);
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
  font-size: 0.72rem;
}

.md-typeset table:not([class]) th {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.md-typeset table:not([class]) tr:nth-child(even) > td {
  background: var(--jr-surface-alt);
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  border-bottom: 1px solid var(--jr-border);
  padding: 0.6em 0.9em;
}

/* Wide tables scroll instead of breaking the page */
.md-typeset__table {
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   7. Code
   -------------------------------------------------------------------------- */

.md-typeset code {
  background: var(--md-accent-fg-color--transparent);
  border-radius: 4px;
  padding: 0.05em 0.25em;
  font-size: 0.88em;
  word-break: break-word;
}

.md-typeset pre > code {
  background: none;
  padding: 0.7em 1em;
}

.md-typeset .highlight {
  border: 1px solid var(--jr-border);
  border-radius: 8px;
  overflow: hidden;
}

/* Keyboard keys (pymdownx.keys) */
.md-typeset kbd {
  box-shadow: 0 2px 0 var(--jr-border);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   8. Admonitions — flatter, on-brand
   -------------------------------------------------------------------------- */

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--jr-border);
  border-left: 3px solid var(--md-accent-fg-color);
  border-radius: 8px;
  box-shadow: none;
  font-size: 0.74rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. Chrome — header, tabs, sidebar, footer
   -------------------------------------------------------------------------- */

.md-header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.md-header__title {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.md-header__button.md-logo img {
  height: 1.5rem;
  width: auto;
}

.md-tabs {
  border-bottom: 3px solid var(--md-accent-fg-color);
}

.md-tabs__link {
  font-weight: 500;
  opacity: 0.85;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}

/* Sidebar: section labels read as labels, not links */
.md-nav__title {
  font-weight: 650;
  letter-spacing: 0.02em;
}

.md-nav--secondary .md-nav__title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--light);
  box-shadow: none;
  border-bottom: 1px solid var(--jr-border);
}

.md-nav__item .md-nav__link--active {
  font-weight: 650;
  color: var(--md-typeset-a-color);
}

/* Active item in the right-hand TOC gets a gold rail */
.md-nav--secondary .md-nav__link--active {
  border-left: 2px solid var(--md-accent-fg-color);
  margin-left: -2px;
  padding-left: 0.6rem;
}

.md-footer-meta {
  background: var(--jr-green-900);
}

/* --------------------------------------------------------------------------
   10. Search
   -------------------------------------------------------------------------- */

.md-search__form {
  border-radius: 6px;
}

.md-search-result__article--document .md-search-result__title {
  font-weight: 650;
}

/* --------------------------------------------------------------------------
   11. Content width — long report pages read better constrained
   -------------------------------------------------------------------------- */

@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 68rem;
  }
}

/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */

@media print {
  .md-typeset img:not(.emojione) {
    box-shadow: none;
    border: 1px solid #ccc;
  }
  .md-typeset .headerlink {
    display: none;
  }
  .md-typeset h2 {
    border-top: none;
  }
}