/* Cardinal Insights — shared site styles
   Palette and graph-paper effect copied from the original index.html so every
   page matches exactly. Colours are also exposed as CSS variables at the top
   so future tweaks only need to happen in one place. */

:root {
  --blue: #0a48b6;
  --green: #25a95e;
  --orange: #f89216;
  --red-accent: #fb4040;
  --purple: #89426a;
  --button-red: #B10F00;
  --grid-line: #C3d7fc;
  --text-body: #383838;
  --border-line: #C3d7fc;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
}

.grid-background {
  background-color: white;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="100%25" height="100%25" fill="white"/><path d="M 20 0 L 0 0 0 20" fill="none" stroke="%23C3d7fc" stroke-width="1"/></svg>');
}

.container {
  display: flex;
  flex-direction: column;
}

/* ---------- Sidebar ---------- */

.sidebar {
  background: none;
  text-align: center;
  padding: 20px;
}

.sidebar img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.logo,
.tagline {
  max-width: 280px;
  height: auto;
  margin-bottom: 10px;
}

.logo-link {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.site-nav {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-nav a {
  display: block;
  padding: 8px 12px;
  color: var(--blue);
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background-color: var(--grid-line);
}

/* ---------- Main content ---------- */

.main-content {
  max-width: 941px;
  background-color: white;
  flex: 1;
  padding-left: 20px;
  padding-right: 20px;
}

.main-content h1 {
  margin-top: 20px;
  color: var(--blue);
  font-weight: bold;
  font-stretch: condensed;
}

.main-content h2 {
  color: var(--blue);
  font-weight: bold;
  font-stretch: condensed;
}

.main-content p {
  color: var(--text-body);
  font-weight: 300;
  line-height: 1.6;
}

.section-lede {
  font-weight: normal !important;
}

.contact-button,
.btn {
  display: inline-block;
  margin: 0px auto;
  padding: 12px 24px;
  background-color: var(--button-red);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
  border: none;
  cursor: pointer;
  font-size: 1em;
  font-family: inherit;
}

.btn:hover,
.contact-button:hover {
  opacity: 0.9;
}

.btn-secondary {
  background-color: var(--blue);
}

footer {
  text-align: center;
  font-size: 0.7em;
  color: var(--text-body);
  padding: 20px 0px 20px 0px;
  background-color: #FFFFFF;
}

/* ---------- Cards (experts, publications, commentary) ---------- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 20px 0 40px 0;
}

@media (min-width: 600px) {
  .card-grid.experts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .card-grid.experts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  border-radius: 6px;
  padding: 16px;
  background-color: white;
}

.expert-card {
  text-align: center;
  border: 1px solid var(--border-line);
}

.expert-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px auto;
  display: block;
  background-color: var(--grid-line);
}

.expert-card h3 {
  margin: 0 0 4px 0;
  color: var(--blue);
}

.expert-role {
  font-size: 0.85em;
  color: var(--text-body);
  font-weight: bold;
  margin-bottom: 8px;
}

.expert-bio {
  font-size: 0.9em;
  color: var(--text-body);
  font-weight: 300;
  line-height: 1.5;
 text-align: left;
   white-space: pre-wrap;
}

.post-card,
.pub-card {
  border-bottom: 1px solid var(--border-line);
  padding: 16px 0;
}

.post-card:last-child,
.pub-card:last-child {
  border-bottom: none;
}

.post-date,
.pub-meta {
  font-size: 0.8em;
  color: var(--text-body);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.post-excerpt {
  font-size: 0.9em;
  color: var(--text-body);
  font-weight: 300;
  line-height: 1.5;
  margin: 4px 0 0 0;
}

.post-card h3 a,
.pub-card h3 {
  color: var(--blue);
  text-decoration: none;
}

.post-card h3 a:hover {
  text-decoration: underline;
}

.pub-card h3 {
  margin-bottom: 4px;
}

.pub-summary {
  color: var(--text-body);
  font-weight: 300;
  line-height: 1.5;
  margin: 8px 0;
}

.status-message {
  font-size: 0.9em;
  color: var(--text-body);
  font-style: italic;
}

/* ---------- Forms (newsletter, publication gate) ---------- */

.email-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.email-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 10px 12px;
  border: 1px solid var(--border-line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1em;
}

.newsletter-panel {
  padding: 20px 0 0 0;
  margin: 0px 0 0 0;
}

.section-divider {
  border: none;
  border-top: 1px solid var(--grid-line);
  margin: 30px 0;
}

.newsletter-panel h2 {
  margin-top: 0;
}

.form-note {
  font-size: 0.8em;
  color: var(--text-body);
}

/* ---------- Responsive layout (matches original breakpoints) ---------- */

@media (min-width: 768px) {
  .container {
    flex-direction: row;
    min-height: 100vh;
  }

  .sidebar {
    width: 300px;
    height: 100vh;
    border-right: 0px solid var(--border-line);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20px;
    position: sticky;
    top: 0;
    overflow-y: auto;
  }

  .main-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100vh;
    padding: 0px 20px;
  }

  .main-content {
    border-left: 0.25px solid var(--border-line);
    border-right: 0.25px solid var(--border-line);
    flex: 1;
    padding: 0px 20px 0px 40px;
  }

  footer {
    margin-left: 0px;
    width: auto;
  }
}

@media (max-width: 767px) {
  .main-content h1 {
    margin-top: 20px;
    text-align: center;
  }

  .main-section {
    background-color: white;
  }

  .sidebar {
    padding-bottom: 20px;
  }

  .tagline {
    margin-bottom: 0;
  }

  .site-nav {
    align-items: center;
  }
}