/* Wheelhouse. The teals match the icon (assets/Render-Icons.ps1). */
:root {
  --wh-teal: #1b7f93;
  --wh-teal-dark: #0e4a63;
  --wh-teal-light: #2a9cb3;
  --wh-cream: #f6f2e8;
  --wh-ink: #1d2a30;
  --bs-link-color: var(--wh-teal);
  --bs-link-hover-color: var(--wh-teal-dark);
  --bs-link-color-rgb: 27, 127, 147;
  --bs-link-hover-color-rgb: 14, 74, 99;
}

html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body { color: var(--wh-ink); }

.wh-nav {
  background: var(--wh-teal-dark);
}
.wh-nav .navbar-brand, .wh-nav .nav-link { color: var(--wh-cream); }
.wh-nav .nav-link:hover, .wh-nav .nav-link:focus { color: #fff; }
.wh-nav .navbar-brand { font-weight: 600; letter-spacing: .01em; }
.wh-nav .navbar-toggler { border-color: rgba(246, 242, 232, .4); }
.wh-nav .navbar-toggler-icon { filter: invert(1); }

.wh-hero {
  background: linear-gradient(135deg, var(--wh-teal-dark), var(--wh-teal));
  color: var(--wh-cream);
}
.wh-hero h1 { font-weight: 700; }
.wh-hero .lead { color: rgba(246, 242, 232, .9); }
.wh-hero img { filter: drop-shadow(0 .5rem 1.5rem rgba(0, 0, 0, .25)); }

.btn-wh {
  --bs-btn-bg: var(--wh-cream);
  --bs-btn-color: var(--wh-teal-dark);
  --bs-btn-border-color: var(--wh-cream);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--wh-teal-dark);
  --bs-btn-hover-border-color: #fff;
  font-weight: 600;
}
.btn-primary {
  --bs-btn-bg: var(--wh-teal);
  --bs-btn-border-color: var(--wh-teal);
  --bs-btn-hover-bg: var(--wh-teal-dark);
  --bs-btn-hover-border-color: var(--wh-teal-dark);
  --bs-btn-active-bg: var(--wh-teal-dark);
}

.wh-feature h3 { font-size: 1.1rem; font-weight: 600; }
.wh-feature { border-top: 3px solid var(--wh-teal-light); }

.wh-docs-nav .nav-link { color: var(--wh-ink); padding-left: 0; }
.wh-docs-nav .nav-link.active { color: var(--wh-teal); font-weight: 600; }

.wh-footer { background: #eef3f4; color: #4a5a61; }

.form-control:focus, .form-select:focus, .btn:focus-visible {
  border-color: var(--wh-teal-light);
  box-shadow: 0 0 0 .2rem rgba(42, 156, 179, .3);
}

/* The honeypot field: out of sight for people, still there for bots. */
.wh-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

pre.wh-code, code { color: var(--wh-teal-dark); }
pre.wh-code { background: #f3f6f7; padding: .75rem 1rem; border-radius: .375rem; }