/* Blairmont Manual — custom styles */

/* Colors pulled from the banner: dark navy sky + cyan IoT icon glow */
[data-md-color-primary="custom"] {
  --md-primary-fg-color:        #1a2744;
  --md-primary-fg-color--light: #243560;
  --md-primary-fg-color--dark:  #0f1a30;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255,255,255,0.7);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color:              #29b6f6;
  --md-accent-fg-color--transparent: rgba(41,182,246,0.1);
  --md-accent-bg-color:              #ffffff;
}

/* Dark mode — lighten the navy slightly so tabs read well on slate */
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color:        #1e3a6e;
  --md-primary-fg-color--light: #2a4f96;
  --md-primary-fg-color--dark:  #152a52;
}

[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: #4dd9f5;
}

/* Status badge pills */
.status-active    { background: #2e7d32; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 600; }
.status-pending   { background: #e65100; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 600; }
.status-hold      { background: #546e7a; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 600; }
.status-complete  { background: #1565c0; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 600; }

/* Tighter table rows */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: .4rem .8rem;
}

/* Entity ID inline code */
.entity { font-family: var(--md-code-font-family); font-size: .85em; }

/* Hero banner — light/dark variants */
[data-md-color-scheme="default"] .banner--dark  { display: none; }
[data-md-color-scheme="slate"]   .banner--light { display: none; }

.banner {
  display: block;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -1.2rem;
  margin-bottom: 1.8rem;
  height: 280px;
  object-fit: cover;
  object-position: center 40%;
}

@media screen and (max-width: 76.1875em) {
  .banner { height: 200px; }
}

@media screen and (max-width: 44.9375em) {
  .banner { height: 140px; }
}