/* ===========================================================================
   Robertson's WHS Manual — site theme overrides (Material for MkDocs)
   Brand: red #ED1C25 · charcoal #212121 · secondary grey #3F3E3E
   Goal: clean, corporate, accessible (WCAG AA). Brand red is used for large
   text / accents only; body links use the darker red so they pass AA contrast.
   =========================================================================== */

:root {
  --md-primary-fg-color:        #ED1C25;
  --md-primary-fg-color--light: #F04A52;
  --md-primary-fg-color--dark:  #B3151C;
  --md-accent-fg-color:         #B3151C;
  --md-accent-fg-color--transparent: rgba(237, 28, 37, 0.10);
  /* Body links: darker red (#B3151C on white ≈ 5.6:1 — passes AA 4.5:1).
     Plain brand red (#ED1C25 ≈ 3.9:1) fails AA for normal text. */
  --md-typeset-a-color:         #B3151C;
}

/* --- Header / tabs ------------------------------------------------------- */
.md-header {
  background-color: #ED1C25;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);   /* subtle elevation */
}
.md-tabs { background-color: #212121; }

/* --- Typography --------------------------------------------------------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: 'Raleway', 'Open Sans', sans-serif;
  font-weight: 800;
  color: #212121;
  letter-spacing: -0.01em;
}
.md-typeset h1 {
  border-bottom: 3px solid #ED1C25;
  padding-bottom: .25em;
}
.md-typeset h2 { margin-top: 1.7em; }
.md-typeset { font-size: .76rem; }            /* comfortable body measure */

/* --- Links -------------------------------------------------------------- */
.md-typeset a { text-decoration: none; }
.md-typeset a:hover,
.md-typeset a:focus { text-decoration: underline; }

/* --- Visible keyboard focus (accessibility) ----------------------------- */
.md-typeset a:focus-visible,
.md-nav__link:focus-visible,
.md-search__input:focus-visible,
.md-button:focus-visible {
  outline: 3px solid #B3151C;
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Active navigation item -------------------------------------------- */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: #B3151C;
  font-weight: 700;
}

/* --- Tables — corporate look + scannability for the long manual tables -- */
.md-typeset table:not([class]) {
  border: 1px solid #e4e4e4;
  font-size: .74rem;
}
.md-typeset table:not([class]) th {
  background-color: #212121;
  color: #fff;
  font-weight: 700;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: .6rem .8rem;
  vertical-align: top;
}
.md-typeset table:not([class]) tr:nth-child(even) { background-color: #fafafa; }
.md-typeset table:not([class]) tbody tr:hover    { background-color: #fdecec; }

/* --- Primary call-to-action button (home page) -------------------------- */
.md-typeset .md-button--primary {
  background-color: #ED1C25;
  border-color: #ED1C25;
  color: #fff;
  font-weight: 700;
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: #B3151C;
  border-color: #B3151C;
  color: #fff;
}

/* --- Prev/next footer nav (navigation.footer) --------------------------- */
.md-footer__link:hover { opacity: .85; }

/* --- Blockquote accent -------------------------------------------------- */
.md-typeset blockquote {
  border-left: 4px solid #ED1C25;
  color: #3F3E3E;
}

/* --- Home page link cards: uniform responsive grid --------------------- */
.md-typeset .home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 1.4em 0 2em;
}
.md-typeset .hcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #e4e6ea;
  border-radius: 10px;
  color: #212121;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(33, 33, 33, .04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.md-typeset .hcard:hover {
  transform: translateY(-3px);
  border-color: #ED1C25;
  box-shadow: 0 12px 28px rgba(33, 33, 33, .12);
}
.md-typeset .hcard__eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ED1C25;
  margin-bottom: 10px;
}
.md-typeset .hcard__title {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  color: #212121;
}
.md-typeset .hcard__desc {
  margin-top: 8px;
  font-size: .9rem;
  line-height: 1.5;
  color: #5b5d62;
}
.md-typeset .hcard__cta {
  margin-top: auto;
  padding-top: 16px;
  font-size: .82rem;
  font-weight: 700;
  color: #ED1C25;
}

/* Feature card spans the full row and inverts to brand red */
.md-typeset .hcard--feature {
  grid-column: 1 / -1;
  background: linear-gradient(120deg, #ED1C25 0%, #B3151C 100%);
  border-color: transparent;
}
.md-typeset .hcard--feature .hcard__eyebrow,
.md-typeset .hcard--feature .hcard__title,
.md-typeset .hcard--feature .hcard__cta { color: #fff; }
.md-typeset .hcard--feature .hcard__desc { color: rgba(255, 255, 255, .9); }
.md-typeset .hcard--feature .hcard__title { font-size: 1.4rem; }
.md-typeset .hcard--feature:hover { border-color: transparent; }

/* Project Managers Journey Board — feature card in a deeper, distinct red shade
   so it reads as a sibling of the Site Safety board without looking identical. */
.md-typeset .hcard--pm {
  background: linear-gradient(120deg, #8E1014 0%, #5E0A0D 100%);
}

/* External-app cards get a subtle tinted ground */
.md-typeset .hcard--app { background: #fafbfc; }

@media (max-width: 600px) {
  .md-typeset .home-grid { grid-template-columns: 1fr; gap: 14px; }
}