.aside {
    border-left: 3px solid #888;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background-color: rgba(0, 0, 0, 0.03);
    color: #666;
}

blockquote {
    border-left: 3px solid #888;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background-color: rgba(0, 0, 0, 0.03);
    color: #666;
}

img.blog-cover-image {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 1px solid lightgray;
}

img.blog-content-image {
  height: auto;
  display: block;
  margin: 0 auto;
}

img.logo {
  width: 346px;
  height: 64px;
}

img.blog-preview-image {
    max-height: 200px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-bottom: 1px solid lightgray;
}

img.about-image {
  max-height: 500px;
  max-width: 500px;
}

img.certification-image {
  max-width: 167px;  
}

div.blog-preview {
    min-height: 340px;
}

:root {
  --text-outline-color: rgba(0, 0, 0, 0.2);
}

.outlined-text {
  /* font-size: 2em; */
  text-shadow: -1px -1px 0 var(--text-outline-color),
    1px -1px 0 var(--text-outline-color), -1px 1px 0 var(--text-outline-color),
    1px 1px 0 var(--text-outline-color);
}

.nav-upper {
  height: 50px;
}

.nav-lower {
  height: 50px;
  margin-top: 50px;
}

slogan {
  font-style: italic;
  font-weight: 400;
}

limited-width {
  max-width: 800px;
}

html {
  font-size: 14px;
  font-family: "acumin-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

table.md-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

table.md-table th,
table.md-table td {
  padding: 0.6rem 1rem;
  border: 1px solid #dee2e6;
  text-align: left;
}

table.md-table thead th {
  background-color: #f1f3f5;
  font-weight: 600;
}

table.md-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* Page hero — the benday.com treatment, reusable across pages.

   Layers, bottom to top:
     1. the brand gradient (the div's own background), shown when there is
        no photo or it fails to load, so a page is never broken-looking
     2. the photo: either an <img class="page-hero-img"> inside the div (an
        imported page asset; the web app adds srcset/sizes from the resized
        variants, so a phone gets a 400px file and a 2x desktop a 2600px one)
        or, for site chrome in wwwroot/images/, a --hero-image background
     3. a dark scrim (::before), so white text stays legible over ANY photo
     4. the content

   The everyday form, a page asset:
     <div class="p-5 mb-4 rounded-3 page-hero">
         <img class="page-hero-img" src="assets/coc-hero.jpg" alt="">
         <div class="container-fluid py-5">...</div>
     </div>

   Site chrome that ships with the app (pre-sized by scripts/build-hero-images.py):
     <div class="p-5 mb-4 rounded-3 page-hero"
          style="--hero-image: url('/images/hero-github.png');">

   CROPPING: `cover` crops very differently per breakpoint. Desktop shows the
   full width; mobile is PORTRAIT and keeps only a narrow centre strip. Prefer
   atmospheric images. If a photo DOES have a focal subject off-centre, pull it
   back into the mobile strip with --hero-position (x only; desktop shows the
   full width so it is unaffected), on the hero div for either form:
     style="--hero-position: 70% center;"

   CONTRAST: a bright or busy photo can drop text below WCAG AA even though the
   average looks fine — measure the WORST patch behind the text, not the mean.
   Darken just that page with --hero-scrim-top / --hero-scrim-bottom (defaults
   0.55 / 0.30), and drop `text-opacity-75` from the lead paragraph:
     style="--hero-scrim-top: .65; --hero-scrim-bottom: .45;" */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image:
    var(--hero-image, none),
    linear-gradient(135deg, #1b1b1b 0%, #3a3a3a 55%, #8a6d0b 100%);
  background-size: cover;
  background-position: var(--hero-position, center);
  background-repeat: no-repeat;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(
    rgba(0, 0, 0, var(--hero-scrim-top, 0.55)),
    rgba(0, 0, 0, var(--hero-scrim-bottom, 0.30)));
}

/* the photo sits between the gradient and the scrim; a missing file with an
   empty alt renders nothing, so the gradient shows through */
.page-hero > .page-hero-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-position, center);
  margin: 0;
  border: 0;
  border-radius: 0;
}

.page-hero > :not(.page-hero-img) {
  position: relative;
  z-index: 1;
}

/* Main navigation: logo + slogan on the first row, links below; a hamburger
   below the lg breakpoint. Groups render as Bootstrap dropdowns. */
.site-nav .navbar-brand {
  padding: 0;
}

.site-nav .navbar-nav .nav-link {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.site-nav .navbar-nav .nav-item:first-child .nav-link {
  padding-left: 0;
}

.site-nav .dropdown-menu {
  font-size: 1rem;
}

.site-nav .nav-link.active {
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--bs-primary);
}

.site-nav .nav-cta {
  padding: 0.4rem 1.1rem;
}

.footer-links .list-inline-item:not(:last-child)::after {
  content: "\00b7";
  margin-left: 0.6rem;
  color: var(--bs-secondary-color);
}

@media (max-width: 991.98px) {
  .site-nav .navbar-nav .nav-link,
  .site-nav .dropdown-item {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* dropdowns expand in place inside the hamburger, accordion-style */
  .site-nav .dropdown-menu {
    border: 0;
    padding-left: 1rem;
    position: static;
    float: none;
  }

  .site-nav .nav-cta {
    display: block;
    text-align: center;
  }
}

/* anchor targets from the Tools menu land with a little breathing room */
[id] {
  scroll-margin-top: 1rem;
}

/* Video cards: a YouTube thumbnail that links out, instead of an embedded
   player. Fifteen players on one page is a heavy page; fifteen lazy images
   is not. Inside a Bootstrap .card:
     <a class="video-card-thumb ratio ratio-16x9" href="https://www.youtube.com/watch?v=ID" ...>
       <img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" loading="lazy">
       <span class="video-card-duration">8:39</span>
     </a>
   hqdefault.jpg is 4:3 with black bars; object-fit: cover on the 16:9 box
   crops them away. The play badge is a pseudo-element so the markup stays an
   image and a link. */
.video-card-thumb {
  display: block;
  overflow: hidden;
  background: #000;
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.video-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.video-card-thumb:hover img,
.video-card-thumb:focus-visible img {
  transform: scale(1.03);
}

.video-card-thumb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='rgba(0,0,0,0.6)' stroke='white' stroke-width='3'/%3E%3Cpath d='M26 20l20 12-20 12z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

/* .ratio > * stretches every child to the full box; the duration badge
   needs to be a badge, so undo that for it */
.video-card-thumb .video-card-duration {
  top: auto;
  left: auto;
  right: 0.5rem;
  bottom: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.1rem 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0.25rem;
}

.video-card .card-title {
  font-size: 1.1rem;
}

/* A featured card: a named client with a third-party write-up, set apart
   from the anonymized stories with a brand accent. Pair it with a Bootstrap
   badge for the source label ("Published by Scrum.org"). */
.card.card-featured {
  border-left: 4px solid var(--bs-primary);
}