/* =====================================================================
   Marine / Seafoam Theme — James Stewart Fab Academy
   Deep navy + seafoam green palette
   ===================================================================== */

/* ---------- Color palette ---------- */
:root {
  --marine-navy-900: #0a1f33;   /* deepest navy — page background accents */
  --marine-navy-800: #0f2a44;   /* primary deep navy */
  --marine-navy-700: #143656;   /* navy headings / nav */
  --marine-navy-600: #1d4a72;   /* hover navy */
  --marine-navy-500: #2a6aa0;   /* link navy */

  --seafoam-100: #e6f7f1;       /* very pale seafoam — surface tint */
  --seafoam-200: #c8ece0;       /* card backgrounds */
  --seafoam-300: #9fdcc6;       /* soft seafoam */
  --seafoam-400: #6fc8ad;       /* primary seafoam */
  --seafoam-500: #4ab295;       /* accent seafoam */
  --seafoam-600: #2f8f76;       /* deep seafoam */

  --sand-50:  #fbfaf6;          /* page background */
  --sand-100: #f3efe6;          /* subtle warm tint */

  --ink-900: #0d1b2a;           /* body text */
  --ink-700: #2c3e50;
  --ink-500: #5a6c7d;
}

/* ---------- Material theme variable overrides ---------- */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--marine-navy-800);
  --md-primary-fg-color--light: var(--marine-navy-600);
  --md-primary-fg-color--dark:  var(--marine-navy-900);
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color:         var(--seafoam-600);
  --md-accent-fg-color--transparent: rgba(47, 143, 118, 0.1);
  --md-accent-bg-color:         #ffffff;
  --md-accent-bg-color--light:  rgba(255, 255, 255, 0.7);

  --md-default-fg-color:        var(--ink-900);
  --md-default-fg-color--light: var(--ink-700);
  --md-default-fg-color--lighter: var(--ink-500);
  --md-default-bg-color:        var(--sand-50);

  --md-typeset-a-color:         var(--marine-navy-500);
}

/* ---------- Base typography ---------- */
body, .md-typeset {
  color: var(--ink-900);
  font-feature-settings: "kern", "liga";
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--marine-navy-800);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  border-bottom: 3px solid var(--seafoam-400);
  padding-bottom: 0.4em;
  margin-bottom: 0.8em;
}

.md-typeset h2 {
  border-bottom: 1px solid var(--seafoam-300);
  padding-bottom: 0.3em;
  margin-top: 2em;
}

.md-typeset h3 {
  color: var(--marine-navy-700);
}

.md-typeset a {
  color: var(--marine-navy-500);
  text-decoration: none;
  border-bottom: 1px dotted var(--seafoam-400);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.md-typeset a:hover {
  color: var(--seafoam-600);
  border-bottom-color: var(--seafoam-600);
}

/* ---------- Header ---------- */
.md-header {
  background: linear-gradient(135deg, var(--marine-navy-900) 0%, var(--marine-navy-700) 100%);
  box-shadow: 0 2px 8px rgba(10, 31, 51, 0.25);
}

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

.md-tabs {
  background: var(--marine-navy-800);
}

.md-tabs__link {
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
  color: var(--seafoam-300);
}

/* ---------- Sidebar navigation ---------- */
.md-sidebar {
  padding-top: 0.5rem;
}

.md-sidebar__scrollwrap {
  background-color: transparent;
}

.md-nav {
  font-size: 0.78rem;
}

.md-nav__title {
  color: var(--marine-navy-800);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.6rem 0.8rem;
}

.md-nav__item {
  padding: 0;
  margin: 0.05rem 0;
}

.md-nav__link {
  color: var(--ink-700);
  padding: 0.4rem 0.8rem;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: background-color 0.15s ease,
              color 0.15s ease,
              border-left-color 0.15s ease;
}

.md-nav__link:hover {
  background-color: var(--seafoam-100);
  color: var(--marine-navy-800);
  border-left-color: var(--seafoam-400);
}

.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  background-color: var(--seafoam-100);
  color: var(--marine-navy-800) !important;
  border-left-color: var(--seafoam-500);
  font-weight: 600;
}

.md-nav__item .md-nav__item .md-nav__link {
  padding-left: 1.4rem;
  font-size: 0.74rem;
}

/* Expand/collapse caret in nav uses seafoam */
.md-nav__icon,
.md-nav__icon svg {
  color: var(--marine-navy-700);
  fill: currentColor;
}

.md-nav__item--nested > .md-nav__link:hover .md-nav__icon {
  color: var(--seafoam-600);
}

/* Section headings in expanded sidebar */
.md-nav__item--section > .md-nav__link {
  color: var(--marine-navy-800);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.76rem;
}

/* Section labels in nav */
.md-nav--secondary .md-nav__title {
  color: var(--marine-navy-700);
  border-left: 3px solid var(--seafoam-400);
}

/* ---------- Content area ---------- */
.md-main__inner {
  margin-top: 1rem;
}

.md-content {
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(10, 31, 51, 0.06),
              0 0 0 1px rgba(10, 31, 51, 0.04);
  padding: 0.5rem 1.5rem 2rem;
  margin: 0.5rem 0 1.5rem;
}

@media screen and (max-width: 76.1875em) {
  .md-content {
    padding: 0.5rem 1rem 1.5rem;
    margin: 0.5rem 0;
  }
}

/* ---------- Code blocks ---------- */
.md-typeset code {
  background-color: var(--seafoam-100);
  color: var(--marine-navy-800);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.85em;
}

.md-typeset pre > code {
  background-color: var(--marine-navy-900);
  color: #e6f7f1;
  padding: 1em;
  border-radius: 6px;
  border-left: 3px solid var(--seafoam-500);
}

.md-typeset .highlight {
  border-radius: 6px;
  overflow: hidden;
}

/* ---------- Blockquotes ---------- */
.md-typeset blockquote {
  border-left: 4px solid var(--seafoam-500);
  background-color: var(--seafoam-100);
  color: var(--ink-700);
  padding: 0.8em 1.2em;
  margin: 1.2em 0;
  border-radius: 0 4px 4px 0;
}

/* ---------- Tables ---------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--seafoam-200);
  border-radius: 6px;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: var(--marine-navy-800);
  color: #ffffff;
  font-weight: 600;
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background-color: var(--seafoam-100);
}

/* ---------- Admonitions ---------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 6px;
  border-left-width: 4px;
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-left-color: var(--marine-navy-500);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-left-color: var(--seafoam-500);
}

/* ---------- Buttons & search ---------- */
.md-search__input {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.md-search__input:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

/* ---------- Footer ---------- */
.md-footer {
  background-color: var(--marine-navy-900);
}

.md-footer-meta {
  background-color: var(--marine-navy-900);
}

.md-footer__inner:not([hidden]) {
  background: linear-gradient(135deg, var(--marine-navy-800) 0%, var(--marine-navy-700) 100%);
}

/* =====================================================================
   Image grid for photo documentation
   Drop a wrapping div with class `image-grid` around image markdown,
   or use a raw HTML block. Single, two, three, or four-up grids.
   ===================================================================== */

.md-typeset .image-grid,
.md-typeset .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5em 0;
}

.md-typeset .image-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.md-typeset .image-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.md-typeset .image-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media screen and (max-width: 600px) {
  .md-typeset .image-grid.cols-3,
  .md-typeset .image-grid.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 400px) {
  .md-typeset .image-grid,
  .md-typeset .image-grid.cols-2,
  .md-typeset .image-grid.cols-3,
  .md-typeset .image-grid.cols-4 {
    grid-template-columns: 1fr;
  }
}

.md-typeset .image-grid img,
.md-typeset .grid img {
  width: 100%;
  height: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--seafoam-200);
  box-shadow: 0 2px 6px rgba(10, 31, 51, 0.08);
  transition: transform 0.2s ease,
              box-shadow 0.2s ease,
              border-color 0.2s ease;
  display: block;
  margin: 0;
}

.md-typeset .image-grid img:hover,
.md-typeset .grid img:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(10, 31, 51, 0.18);
  border-color: var(--seafoam-500);
}

.md-typeset .image-grid p,
.md-typeset .grid p {
  margin: 0;
}

.md-typeset .image-grid figure,
.md-typeset .grid figure {
  margin: 0;
}

.md-typeset .image-grid figcaption,
.md-typeset .grid figcaption {
  font-size: 0.78em;
  color: var(--ink-500);
  text-align: center;
  margin-top: 0.4em;
}

/* Style standalone images more gently */
.md-typeset img:not(.emojione):not(.twemoji):not([class*="logo"]) {
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(10, 31, 51, 0.08);
  max-width: 100%;
}

/* ---------- Horizontal rules ---------- */
.md-typeset hr {
  border: none;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    var(--seafoam-400) 20%,
    var(--seafoam-400) 80%,
    transparent
  );
  margin: 2em 0;
}

/* ---------- Selection ---------- */
::selection {
  background-color: var(--seafoam-300);
  color: var(--marine-navy-900);
}