/* Custom styles for SimWorld Agent Hub documentation */

/* ---- Brand color overrides (RTD theme) ---- */
:root {
  --brand-red: #d12b2b;
  --brand-red-dark: #b82020;
  --brand-red-contrast: #ffffff;
}

/* Top mobile nav bar */
.wy-nav-top {
  background: var(--brand-red) !important;
}

/* Sidebar search header */
.wy-side-nav-search {
  background: var(--brand-red) !important;
}

.wy-side-nav-search > a,
.wy-side-nav-search .icon {
  color: var(--brand-red-contrast) !important;
}

/* Search box focus ring */
.wy-side-nav-search input[type="text"]:focus {
  outline: 2px solid var(--brand-red-dark);
  outline-offset: 2px;
}

/* Links + active accents */
a,
.wy-menu a {
  color: var(--brand-red-dark);
}

a:hover,
a:focus {
  color: var(--brand-red);
}

.wy-menu-vertical a:active {
  background: rgba(209, 43, 43, 0.12) !important;
}

/* Current / selected item highlight */
.wy-menu-vertical li.current > a,
.wy-menu-vertical li.on a {
  border-left: 4px solid var(--brand-red) !important;
}

/* Optional: buttons and code block header accents */
.btn.btn-neutral {
  border-color: rgba(209, 43, 43, 0.35);
}

.btn.btn-neutral:hover {
  border-color: rgba(209, 43, 43, 0.55);
}

/* ---- Existing image styling ---- */

.with-margin {
  margin: 20px 0;
  display: block;
}

img.with-margin {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .with-margin {
    margin: 15px 0;
  }
}

/* Sidebar section captions (e.g., GETTING STARTED) */
.wy-menu-vertical p.caption,
.wy-menu-vertical p.caption span.caption-text {
  color: var(--brand-red) !important;
}

/* Sidebar search input border */
.wy-side-nav-search input[type="text"] {
  border-color: rgba(209, 43, 43, 0.45) !important;
}

/* Emphasize hover/active states */
.wy-menu-vertical a:hover {
  color: var(--brand-red) !important;
}

/* Sidebar menu item links */
.wy-menu-vertical a,
.wy-menu-vertical a:visited {
  color: var(--brand-red) !important;
}

/* Current (selected) menu item */
.wy-menu-vertical li.current > a,
.wy-menu-vertical li.on a {
  color: var(--brand-red-dark) !important;
}

/* Hover/focus */
.wy-menu-vertical a:hover,
.wy-menu-vertical a:focus {
  color: var(--brand-red) !important;
}