/*
 * Partnerings house style (2026-10-05) - brings partnerin.gs in line with the
 * Engagement Center (engage.partnerin.gs) without touching any page's content.
 *
 * Loaded LAST from _includes/head.html, after Bootstrap 4 and styles.css, so it
 * re-skins the existing Bootstrap classes the layouts already use (navbar,
 * card, bg-white, text-secondary, btn-*, jumbotron, footer) rather than
 * changing the markup.
 *
 * The tokens are Engage's (src/app/globals.css there):
 *   - surfaces are a warm CREAM, not white: large areas of #fff cause glare and
 *     visual stress for readers with ADHD or dyslexia;
 *   - the page ground behind them is a slightly darker warm stone, so cards and
 *     the header still separate from it;
 *   - text is near-black, secondary text grey, and RED is the interactive
 *     accent (links on hover, buttons).
 */
:root {
  --brand-red: #cc0000;
  --brand-red-hover: #a80000;
  --brand-black: #1a1a1a;
  --brand-grey: #6b6b6b;
  --brand-ground: #f0ece4;
  --brand-surface: #faf7f1;
  --brand-line: rgba(0, 0, 0, 0.06);
}

/* ---------- Page ---------- */
html {
  /* Engage scales its type up 7% from the browser default; same here. */
  font-size: 107%;
}
body,
.container-fluid,
.content {
  background-color: var(--brand-ground);
}
body {
  color: var(--brand-black);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--brand-black);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Surfaces: white becomes cream ---------- */
.bg-white,
.bg-light,
.card,
.jumbotron,
.list-group-item,
.dropdown-menu,
.modal-content {
  background-color: var(--brand-surface) !important;
}
.card {
  border: 1px solid var(--brand-line);
  border-radius: 0.5rem;
}
.card.border-0 {
  border: 0;
}
.jumbotron {
  border: 1px solid var(--brand-line);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ---------- Header: the Engage bar - sticky, cream, one hairline ---------- */
.navbar {
  background-color: var(--brand-surface) !important;
  border-bottom: 1px solid var(--brand-line) !important;
  min-height: 4.5rem;
}
.navbar .nav-link,
.navbar-light .navbar-nav .nav-link {
  color: var(--brand-grey);
  border-radius: 9999px;
  transition: color 0.15s, background-color 0.15s;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--brand-red);
  background-color: var(--brand-ground);
}
.navbar-light .navbar-nav .active > .nav-link {
  color: var(--brand-red);
  background-color: rgba(204, 0, 0, 0.08);
}
.navbar-toggler {
  border-color: var(--brand-line);
  color: var(--brand-black);
}
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--brand-red);
  background-color: var(--brand-ground);
}

/* ---------- Text colours ---------- */
.text-secondary,
.text-muted {
  color: var(--brand-grey) !important;
}
.text-dark {
  color: var(--brand-black) !important;
}
/* Engage's red is the one red. */
.text-danger,
.text-primary {
  color: var(--brand-red) !important;
}

/* ---------- Links: near-black, red on hover, no underline ---------- */
a {
  color: var(--brand-black);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover,
a:focus {
  color: var(--brand-red);
  text-decoration: none;
}
/* A grey link stays grey until hovered, as in Engage. */
a.text-secondary:hover,
a:hover .text-secondary,
a.text-dark:hover {
  color: var(--brand-red) !important;
}

/* ---------- Buttons: red is the action ---------- */
.btn {
  border-radius: 0.375rem;
  font-weight: 500;
}
.btn-primary,
.btn-danger,
.btn-dark {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}
.btn-primary:hover,
.btn-danger:hover,
.btn-dark:hover,
.btn-primary:focus,
.btn-danger:focus,
.btn-dark:focus {
  background-color: var(--brand-red-hover);
  border-color: var(--brand-red-hover);
  color: #fff;
}
.btn-outline-primary,
.btn-outline-danger,
.btn-outline-secondary,
.btn-outline-dark,
.btn-light,
.btn-secondary {
  background-color: var(--brand-surface);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--brand-black);
}
.btn-outline-primary:hover,
.btn-outline-danger:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-light:hover,
.btn-secondary:hover {
  background-color: var(--brand-surface);
  border-color: var(--brand-red);
  color: var(--brand-red);
}
.badge-primary,
.badge-danger {
  background-color: var(--brand-red);
}

/* ---------- Forms: red focus, as in Engage ---------- */
.form-control {
  background-color: var(--brand-surface);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--brand-black);
}
.form-control:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 1px var(--brand-red);
}

/* ---------- Footer: cream band with one hairline above ---------- */
footer,
.footer {
  background-color: var(--brand-surface) !important;
  border-top: 1px solid var(--brand-line) !important;
  border-radius: 0 !important;
  margin-top: 2rem;
  padding-bottom: 1.5rem;
}

/* ---------- Rules and tables ---------- */
hr,
.border-top,
.border-bottom {
  border-color: var(--brand-line) !important;
}
.table {
  color: var(--brand-black);
}
.table td,
.table th {
  border-color: var(--brand-line);
}

/* ---------- Full-bleed header, as in Engage ----------
   Most layouts put the sticky navbar straight inside .container-fluid, whose
   15px padding left the bar floating as an inset box. Engage's header runs
   edge to edge, so cancel that padding for a top-level navbar only - the
   founder page's navbar lives inside a sidebar column and is left alone. */
.container-fluid > nav.navbar.sticky-top,
.container-fluid > .navbar.sticky-top {
  /* !important: styles.scss sets the navbar's margins itself. */
  margin-left: -15px !important;
  margin-right: -15px !important;
  border-radius: 0 !important;
}