/*
 * EERC website styles
 * Brand palette (canonical) — default pairing is claret on linen.
 *   Claret       #5E1A2E  primary: logo, headers, key UI
 *   Deep Claret  #3E1019  depth, hover, dark grounds
 *   Claret 60    #8A4A57  secondary fills, charts, secondary labels
 *   Claret Tint  #EFE2E5  wash, panel backgrounds
 *   Ink          #241E1B  body text
 *   Linen        #F3EFE7  paper ground
 *   Brass        #B5883C  accent — use sparingly
 */

:root {
  --eerc-claret: #5E1A2E;
  --eerc-deep-claret: #3E1019;
  --eerc-claret-60: #8A4A57;
  --eerc-claret-tint: #EFE2E5;
  --eerc-ink: #241E1B;
  --eerc-linen: #F3EFE7;
  --eerc-brass: #B5883C;

  /* Legacy aliases (kept so existing rules and any inline uses still resolve). */
  --eerc-primary: var(--eerc-claret);
  --eerc-accent: var(--eerc-claret);
  --eerc-light-bg: var(--eerc-linen);
}

/* Ink for body text — warmer than pure black, per the brand.
   Linen is the paper ground: the page sits on linen rather than white,
   so panels (white cards, claret-tint washes) lift off it. */
body {
  color: var(--eerc-ink);
  background-color: var(--eerc-linen);
}

/* Squared corners site-wide, echoing the logo's geometric rectangles. */
.btn {
  border-radius: 0;
}

/* ── Navbar ───────────────────────────────────────────────────── */

/* Claret-tint navbar so it reads as a band distinct from the linen page
   ground, while keeping the claret logo (full claret + reverse logo is
   saved for the footer). */
.navbar {
  background-color: var(--eerc-claret-tint) !important;
  border-bottom: 2px solid var(--eerc-primary);
}

.navbar .nav-link {
  color: var(--eerc-ink) !important;
  font-size: 0.9rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--eerc-primary) !important;
}

.navbar-brand img {
  max-height: 48px;
  padding: 4px 0;
}

.navbar-title {
  display: none;
}

.navbar-brand-container {
  gap: 0;
}

/* ── Hero banner (homepage only) ─────────────────────────────── */

/* The hero box sits on the claret-tint wash — distinct from the linen
   page ground behind it, so it reads as a panel. */
.hero-banner {
  background-color: var(--eerc-claret-tint);
  color: var(--eerc-ink);
  padding: 4.5rem 0 4rem;
  border-left: 6px solid var(--eerc-primary);
}

.hero-banner h1 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1.25rem;
  color: var(--eerc-primary);
}

.hero-banner p.lead {
  font-size: 1.1rem;
  max-width: 680px;
  margin-bottom: 2rem;
  opacity: 0.85;
}

.hero-banner .btn-light {
  background-color: var(--eerc-primary);
  border-color: var(--eerc-primary);
  color: #fff;
}

.hero-banner .btn-light:hover {
  background-color: var(--eerc-deep-claret);
  border-color: var(--eerc-deep-claret);
  color: #fff;
}

.hero-banner .btn-outline-light {
  border-color: var(--eerc-primary);
  color: var(--eerc-primary);
}

.hero-banner .btn-outline-light:hover {
  background-color: var(--eerc-primary);
  border-color: var(--eerc-primary);
  color: #fff;
}

/* ── Homepage section cards ───────────────────────────────────── */

.section-card {
  border: 1px solid #e4ded2;
  border-top: 4px solid var(--eerc-claret);
  border-radius: 0;
  padding: 1.5rem;
  height: 100%;
  background: white;
  transition: box-shadow 0.2s ease;
}

/* Rotate the top-edge accent across the card grid so the homepage
   reads in the full palette rather than a single claret note. The grid
   contains only the six g-col wrappers, so nth-child is reliable here. */
.grid > div:nth-child(3n + 2) .section-card {
  border-top-color: var(--eerc-brass);
}

.grid > div:nth-child(3n + 3) .section-card {
  border-top-color: var(--eerc-claret-60);
}

.section-card:hover {
  box-shadow: 0 4px 18px rgba(36, 30, 27, 0.12);
}

.section-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--eerc-primary);
  margin-bottom: 0.75rem;
}

.section-card p {
  font-size: 0.92rem;
  color: #555;
  margin-bottom: 1rem;
}

.section-card a:not(.btn) {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--eerc-accent);
  text-decoration: none;
}

.section-card a:not(.btn):hover {
  text-decoration: underline;
}

/* ── Inner page header ────────────────────────────────────────── */

.page-intro {
  border-left: 4px solid var(--eerc-accent);
  padding-left: 1.25rem;
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
  color: #444;
}

/* ── Partner logos (about page) ───────────────────────────────── */

/* White panels on the linen ground (the box was linen, which would now
   disappear against the page). */
.partner-logo-box {
  background-color: #fff;
  border: 1px solid #e4ded2;
  border-radius: 0;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  margin-bottom: 0.75rem;
}

.partner-logo-box img {
  max-height: 55px;
  max-width: 180px;
}

/* ── Research themes ──────────────────────────────────────────── */

/* Theme cards sit on the claret tint wash — a softer, distinct ground
   from the linen used by the hero and partner boxes. Each card carries
   a different left-edge accent (see .accent-* modifiers in research.qmd)
   so the four strands read as a set rather than a block of one colour. */
.theme-card {
  background-color: var(--eerc-claret-tint);
  border-left: 4px solid var(--eerc-claret);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.75rem;
  border-radius: 0;
}

.theme-card h3 {
  color: var(--eerc-primary);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* Rotating left-edge accents for the brand palette. */
.accent-rose {
  border-left-color: var(--eerc-claret-60);
}

.accent-brass {
  border-left-color: var(--eerc-brass);
}

.accent-deep {
  border-left-color: var(--eerc-deep-claret);
}

/* ── Publications ─────────────────────────────────────────────── */

.pub-filters {
  margin-bottom: 1.75rem;
  font-size: 0.9rem;
}

.pub-filters a {
  margin-right: 0.75rem;
  color: var(--eerc-accent);
}

.publication-entry {
  border-bottom: 1px solid #e4ded2;
  padding: 1.25rem 0;
}

.publication-entry:first-of-type {
  border-top: 1px solid #e4ded2;
}

.pub-type {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--eerc-claret-60);
  margin-bottom: 0.35rem;
}

.publication-entry h4 {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--eerc-primary);
  margin: 0 0 0.3rem;
}

.publication-entry .pub-meta {
  font-size: 0.875rem;
  color: #666;
}

/* ── Events ───────────────────────────────────────────────────── */

.event-card {
  border: 1px solid #e4ded2;
  border-left: 4px solid var(--eerc-brass);
  border-radius: 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  background: white;
}

.event-date {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--eerc-claret-60);
  margin-bottom: 0.4rem;
}

/* ── News ─────────────────────────────────────────────────────── */

.news-entry {
  border-bottom: 1px solid #e4ded2;
  padding: 1.25rem 0;
}

.news-entry:first-of-type {
  border-top: 1px solid #e4ded2;
}

.news-source {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--eerc-claret-60);
  margin-bottom: 0.35rem;
}

/* ── Listing category badges ──────────────────────────────────── */

/* Quarto renders listing categories as tags on cards and as a filter
   cloud. Tint them so categories carry colour consistently across
   news, events, and publications. */
.quarto-listing .listing-category,
.quarto-listing-category .category {
  background-color: var(--eerc-claret-tint);
  color: var(--eerc-claret);
  border: none;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
}

.quarto-listing-category .category:hover,
.quarto-listing-category .category.active {
  background-color: var(--eerc-claret);
  color: var(--eerc-linen);
}

/* ── Footer ───────────────────────────────────────────────────── */

/* Deep claret ground gives the footer weight and sets it apart from the
   claret used for headers and accents above. */
.nav-footer {
  background-color: var(--eerc-deep-claret) !important;
  color: var(--eerc-linen) !important;
  font-size: 0.88rem;
  padding: 2rem 0;
}

.nav-footer a {
  color: var(--eerc-linen) !important;
  text-decoration: underline;
}

.nav-footer a:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* ── Hero logo (homepage) ─────────────────────────────────────── */

.hero-logo {
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-bottom: 1.5rem;
}

/* The logo SVG insets its glyphs ~4.5% from the left edge; indent the
   lead text and buttons to align with the logo's visible left edge.
   Right padding mirrors the left for balance. (The claret left-edge
   accent lives on .hero-banner, spanning the whole hero box.) */
.hero-text {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ── Footer logo ──────────────────────────────────────────────── */

.footer-logo {
  height: 42px;
  width: auto;
  margin-bottom: 0.5rem;
}

/* Match the funder line to the footer logo's optical left edge. */
.footer-funder {
  padding-left: 0.75rem;
}

/* ── Utilities ────────────────────────────────────────────────── */

/* Funding note uses the claret tint wash with a brass left edge — a
   deliberate, sparing use of the accent colour. */
.dfe-note {
  background-color: var(--eerc-claret-tint);
  border-left: 4px solid var(--eerc-brass);
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  color: #444;
  margin: 2rem 0;
  border-radius: 0;
}