/* Clinical Research Portfolio - Dark + Gold Theme */
:root {
  --clinical-primary: #c9a227;      /* Gold - primary brand */
  --clinical-secondary: #a88a1f;    /* Darker gold - interactive */
  --clinical-accent: #d4b23a;       /* Bright gold - highlights */
  --clinical-bg: #12141c;           /* Dark background */
  --clinical-card: rgba(22,26,40,.85);  /* Dark indigo cards */
  --clinical-text: #f0f0eb;         /* Off-white text */
  --clinical-muted: #7a7f9a;        /* Steel blue muted */
  --clinical-border: rgba(240,240,235,.14);  /* Subtle borders */
  --clinical-hover: rgba(201,162,39,.12);    /* Gold hover states */

  --corp-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  --corp-shadow-hover: 0 14px 40px rgba(0, 0, 0, 0.35);
}

/* Base overrides */
html, body {
  background: var(--clinical-bg) !important;
  color: var(--clinical-text) !important;
}

body{
  background: var(--clinical-bg) !important;
}

/* Header/Navigation */
.top {
  background: var(--clinical-card) !important;
  border: 1px solid var(--clinical-border) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.20) !important;
}

@media (max-width: 720px){
  .nav a{
    padding: 7px 9px !important;
  }
}

.name {
  color: var(--clinical-primary) !important;
  font-weight: 700 !important;
}

.role {
  color: var(--clinical-muted) !important;
  font-weight: 500 !important;
}

.nav a {
  color: var(--clinical-secondary) !important;
  font-weight: 600 !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.nav a:focus{
  outline: 3px solid rgba(201,162,39,0.35) !important;
  outline-offset: 2px !important;
}

.nav a:hover {
  background: var(--clinical-hover) !important;
  color: var(--clinical-primary) !important;
}

/* Cards */
.card {
  background: var(--clinical-card) !important;
  border: 1px solid var(--clinical-border) !important;
  box-shadow: var(--corp-shadow) !important;
  border-radius: 8px !important;
}

/* Hero section */
.h1 {
  color: var(--clinical-primary) !important;
  font-weight: 750 !important;
}

.headshot{
  border: 1px solid var(--clinical-border) !important;
  background: #ffffff !important;
}

.subtitle {
  color: var(--clinical-text) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}

/* Typography hierarchy (France CRA / corporate) */
body{
  letter-spacing: normal !important;
}

.h1{
  font-size: 32px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.2px !important;
}

.sectionTitle h2{
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.muted{
  color: var(--clinical-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.mini{
  color: var(--clinical-muted) !important;
  font-size: 12px !important;
}

@media (max-width: 720px){
  .h1{ font-size: 28px !important; }
}

.chips .chip{
  border-radius: 10px !important;
}

/* Chips - HIGHLY VISIBLE */
.chips .chip {
  background: var(--clinical-hover) !important;
  color: var(--clinical-primary) !important;
  border: 1px solid var(--clinical-border) !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-weight: 650 !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

.chips{
  gap: 10px !important;
  margin-top: 12px !important;
}

.ctaRow{
  gap: 12px !important;
  margin-top: 16px !important;
}

.chips .chip strong{
  color: var(--clinical-primary) !important;
}

/* Buttons */
button, .btn {
  background: var(--clinical-hover) !important;
  color: var(--clinical-primary) !important;
  border: 2px solid var(--clinical-border) !important;
  font-weight: 650 !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

button:hover, .btn:hover {
  background: var(--clinical-secondary) !important;
  color: #12141c !important;
  border-color: var(--clinical-secondary) !important;
}

button:focus, .btn:focus{
  outline: 3px solid rgba(201,162,39,0.35) !important;
  outline-offset: 2px !important;
}

.btnPrimary, .btn.btnPrimary {
  background: var(--clinical-primary) !important;
  color: #12141c !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(201,162,39,0.20) !important;
}

.btnPrimary:hover, .btn.btnPrimary:hover {
  background: var(--clinical-secondary) !important;
  transform: none;
  box-shadow: 0 2px 10px rgba(201,162,39,0.25) !important;
}

/* Text and links */
h2 {
  color: var(--clinical-primary) !important;
  font-weight: 700 !important;
}

.muted, .mini {
  color: var(--clinical-muted) !important;
}

.mono, .mono a {
  color: var(--clinical-text) !important;
  font-weight: 600 !important;
}

a {
  color: var(--clinical-secondary) !important;
  font-weight: 600 !important;
}

a:hover {
  color: var(--clinical-primary) !important;
}

#contactBlock a, .muted a {
  color: var(--clinical-secondary) !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

/* Publication cards */
.project-card {
  background: var(--clinical-card) !important;
  border: 1px solid var(--clinical-border) !important;
  border-radius: 10px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.project-card:hover {
  border-color: rgba(0,107,125,0.45) !important;
  box-shadow: var(--corp-shadow) !important;
}

.project-card.pub {
  border-left: 3px solid rgba(0,107,125,0.55) !important;
}

.project-title {
  color: var(--clinical-primary) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

.project-desc {
  color: var(--clinical-text) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.project-meta {
  color: var(--clinical-secondary) !important;
  font-weight: 600 !important;
}

.project-tag {
  background: var(--clinical-hover) !important;
  color: var(--clinical-primary) !important;
  border: 1px solid var(--clinical-border) !important;
  font-weight: 600 !important;
}

.project-thumb.pub {
  background: linear-gradient(135deg, var(--clinical-primary) 0%, var(--clinical-secondary) 100%) !important;
  color: #ffffff !important;
}

/* Project links */
.project-actions a, .project-card a {
  color: var(--clinical-secondary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--clinical-border) !important;
  padding-bottom: 2px !important;
  transition: all 0.2s ease !important;
}

.project-actions a:hover, .project-card a:hover {
  color: var(--clinical-primary) !important;
  border-bottom-color: var(--clinical-primary) !important;
}

/* DOI badges */
.doi-badge {
  margin-top: 12px !important;
}

.doi-link {
  background: var(--clinical-hover) !important;
  color: var(--clinical-primary) !important;
  border: 2px solid var(--clinical-border) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.doi-link:hover {
  background: var(--clinical-secondary) !important;
  color: #ffffff !important;
  border-color: var(--clinical-secondary) !important;
  transform: translateY(-1px);
}

.doi-link:focus {
  outline: 3px solid var(--clinical-accent) !important;
  outline-offset: 2px !important;
}

/* Lists */
ul {
  color: var(--clinical-text) !important;
}

li {
  color: var(--clinical-text) !important;
  line-height: 1.7 !important;
}

li strong {
  color: var(--clinical-primary) !important;
}

/* Dividers */
.divider {
  background: var(--clinical-border) !important;
  opacity: 1 !important;
}

/* Forms */
input, textarea {
  border: 2px solid var(--clinical-border) !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  color: var(--clinical-text) !important;
  caret-color: var(--clinical-text) !important;
  font-size: 13px !important;
  background: rgba(255,255,255,0.03) !important;
  line-height: 1.4 !important;
}

input::placeholder, textarea::placeholder{
  color: var(--clinical-muted) !important;
  opacity: 1 !important;
}

input:focus, textarea:focus {
  border-color: var(--clinical-secondary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.16) !important;
}

/* Footer */
footer {
  color: var(--clinical-muted) !important;
  border-top: 2px solid var(--clinical-border) !important;
}

/* Responsive adjustments */
@media print {
  .nav, button, .btn:not(.btnPrimary) {
    display: none !important;
  }
  
  .card {
    box-shadow: none !important;
    border: 1px solid var(--clinical-border) !important;
  }
}

/* ===== LIGHT MODE OVERRIDES FOR CLINIC THEME ===== */
:root[data-theme="light"] {
  --clinical-primary: #8a6a10;
  --clinical-secondary: #6a5010;
  --clinical-accent: #a07a15;
  --clinical-bg: #f8f9fb;
  --clinical-card: rgba(255,255,255,.95);
  --clinical-text: #1a1d26;
  --clinical-muted: #5a5f7a;
  --clinical-border: rgba(26,29,38,.12);
  --clinical-hover: rgba(154,122,16,.10);
}

[data-theme="light"] html,
[data-theme="light"] body {
  background: var(--clinical-bg) !important;
  color: var(--clinical-text) !important;
}

[data-theme="light"] .top {
  background: var(--clinical-card) !important;
  border: 1px solid var(--clinical-border) !important;
}

[data-theme="light"] .card {
  background: var(--clinical-card) !important;
  border: 1px solid var(--clinical-border) !important;
}

[data-theme="light"] .h1,
[data-theme="light"] h2 {
  color: var(--clinical-primary) !important;
}

[data-theme="light"] .name {
  color: var(--clinical-primary) !important;
}

[data-theme="light"] .subtitle,
[data-theme="light"] .muted,
[data-theme="light"] .mini,
[data-theme="light"] li {
  color: var(--clinical-muted) !important;
}

[data-theme="light"] .project-title {
  color: var(--clinical-primary) !important;
}

[data-theme="light"] .project-desc {
  color: var(--clinical-text) !important;
}

[data-theme="light"] .headshot {
  border: 1px solid var(--clinical-border) !important;
  background: #ffffff !important;
}

[data-theme="light"] button,
[data-theme="light"] .btn {
  background: var(--clinical-hover) !important;
  color: var(--clinical-primary) !important;
  border: 2px solid var(--clinical-border) !important;
}

[data-theme="light"] button:hover,
[data-theme="light"] .btn:hover {
  background: var(--clinical-secondary) !important;
  color: #ffffff !important;
}

[data-theme="light"] .btnPrimary {
  background: var(--clinical-primary) !important;
  color: #ffffff !important;
}

[data-theme="light"] .btnPrimary:hover {
  background: var(--clinical-secondary) !important;
}

[data-theme="light"] .chip {
  background: var(--clinical-hover) !important;
  color: var(--clinical-primary) !important;
  border: 1px solid var(--clinical-border) !important;
}

[data-theme="light"] .chip strong {
  color: var(--clinical-primary) !important;
}

[data-theme="light"] .nav a {
  color: var(--clinical-secondary) !important;
}

[data-theme="light"] .nav a:hover {
  background: var(--clinical-hover) !important;
  color: var(--clinical-primary) !important;
}

[data-theme="light"] a {
  color: var(--clinical-secondary) !important;
}

[data-theme="light"] a:hover {
  color: var(--clinical-primary) !important;
}

[data-theme="light"] .project-card {
  background: rgba(255,255,255,.9) !important;
  border: 1px solid var(--clinical-border) !important;
}

[data-theme="light"] .project-tag {
  background: var(--clinical-hover) !important;
  color: var(--clinical-primary) !important;
}

[data-theme="light"] .doi-link {
  background: var(--clinical-hover) !important;
  color: var(--clinical-primary) !important;
  border: 2px solid var(--clinical-border) !important;
}

[data-theme="light"] .doi-link:hover {
  background: var(--clinical-secondary) !important;
  color: #ffffff !important;
}

[data-theme="light"] .toast {
  background: rgba(255,255,255,.95) !important;
  color: var(--clinical-text) !important;
  border: 1px solid var(--clinical-border) !important;
}

[data-theme="light"] .footer {
  background: rgba(248,249,251,.9) !important;
  color: var(--clinical-muted) !important;
}

[data-theme="light"] input,
[data-theme="light"] textarea {
  background: rgba(255,255,255,.95) !important;
  color: var(--clinical-text) !important;
  border: 2px solid var(--clinical-border) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--clinical-secondary) !important;
}

[data-theme="light"] .mono,
[data-theme="light"] .mono a {
  color: var(--clinical-text) !important;
}

[data-theme="light"] .divider {
  background: var(--clinical-border) !important;
}