/* directory.css
 * Small overrides that bring the /crew-health/ directory (global.css) in line
 * with the website look (site.css). Loaded after global.css and chrome.css,
 * on directory pages only.
 */

/* Bold colour on buttons only, matching the website. */
.btn--primary {
  background: var(--coral-btn);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 10px;
}
.btn--primary:hover { background: var(--coral-btn-hover); color: #fff; }

/* Labels on dark surfaces: the primary blue disappears on deep ocean. */
.section--charcoal .section-label,
.section--dark .section-label,
.section-label--on-dark,
.hero .section-label,
.cta-block .section-label { color: var(--coral); opacity: 1; }

/* Softer dark surfaces, like the website's closing band. */
.section--charcoal > .cta-block,
.section--charcoal > .container {
  background: linear-gradient(180deg, var(--ocean) 0%, #00324A 100%);
}

/* inShort card labels sit on deep ocean; primary blue was unreadable there. */
.inshort__label { color: var(--coral); }

/* Breadcrumb: wrap as one line of text on narrow screens instead of squashed columns. */
.breadcrumb__list { flex-wrap: wrap; row-gap: 4px; margin: 0; padding: 0; }
.breadcrumb__item { display: inline; }