/* ==========================================================================
   ORCHID-CODED: Baltimore Jail Support theme layer.
   Loaded after the base stylesheet via params.custom_css, so everything
   here wins without touching theme files. Palette sampled from the
   reference orchid: violet petal edges (#7c2eae family), deep purple
   shadows (#3d1159 / #2a0a3d), golden throat (#f0b429), pale
   lavender-white petal base (#faf6fe).
   ========================================================================== */

/* --- Petal-wash page background: lavender base with violet/gold glows. --- */
body {
  background-color: #faf6fe;
  background-image:
    radial-gradient(1100px 520px at 85% -5%, rgba(124, 46, 174, 0.14), transparent 60%),
    radial-gradient(900px 480px at -10% 32%, rgba(176, 111, 214, 0.12), transparent 60%),
    radial-gradient(1000px 620px at 50% 112%, rgba(240, 180, 41, 0.1), transparent 60%);
  background-attachment: fixed;
}

/* --- Orchid gradient headlines (guarded so text never goes invisible). --- */
@supports (background-clip: text) {
  main h1 {
    background: linear-gradient(100deg, #3d1159 0%, #7c2eae 55%, #b053c7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --- Cards: lavender fill, violet spine. --- */
.card {
  background: #f3eafa;
  border: 1px solid #d9c6ef;
  border-top: 4px solid #7c2eae;
  border-radius: 12px;
}

/* --- Footer: deep orchid melting into black, gold throat rule. --- */
.footer {
  background: linear-gradient(180deg, #230832 0%, #000000 78%);
  border-top: 3px solid #f0b429;
}

/* --- Buttons glow orchid on hover. --- */
.button:hover {
  box-shadow: 0 4px 18px rgba(124, 46, 174, 0.35);
}

/* --- Wide tables scroll inside their own box instead of stretching the page. --- */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tighten tables a little on phones so more columns fit before scrolling. */
@media (max-width: 600px) {
  .table-wrap table {
    font-size: 0.9rem;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 0.5rem 0.65rem;
  }
}

/* --- Dividers and text selection carry the violet. --- */
hr {
  color: #7c2eae;
  opacity: 0.4;
}

::selection {
  background: #7c2eae;
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid #f0b429;
  outline-offset: 2px;
}

/* --- Desktop header: deep orchid gradient, white links, gold hovers.
       Kept desktop-only because the mobile slide-in menu is a white
       overlay that needs dark text. --- */
@media (min-width: 1000px) {
  .header {
    background: linear-gradient(120deg, #2a0a3d 0%, #3d1159 45%, #5f1f88 100%);
    /* Recolors the search icon + any text-color-driven bits in the bar. */
    --text-color: #ffffff;
  }

  .header .site-title {
    color: #ffffff;
  }

  /* Let the gradient show through the nav row. */
  .header .main-menu {
    background-color: transparent;
  }

  /* Top-level links only: dropdown cards stay white with dark text. */
  .header .main-menu__wrapper > .top-menu-item > .menu-link {
    color: #ffffff;
  }

  .header .main-menu__wrapper > .top-menu-item > .menu-link:hover {
    color: #f0b429;
  }

  /* External-link arrows are black data-URIs: invert them on dark. */
  .header .external-link::after,
  .header .child-external-link span.menu-item__name::after {
    filter: invert(1);
  }

  /* Current-language label sits on the dark bar; the dropdown stays light. */
  .header .dropdown-selected {
    color: #ffffff;
  }
}