@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --header: #24243a;
  --highlight: #3c3c61;
  --bg: #ffffff;
  --footer: #3c3c61;
  --accent-red: #E6284B;
  --text: #24243a;
  --text-muted: #5a5a75;
  --border: #e3e3ec;
  --tint-5: #f4f4f8;
  --tint-10: #e9e9f1;
  --font-sans: 'Atkinson Hyperlegible', Arial, sans-serif;
  --font-serif: 'Source Serif Pro', Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  line-height: 1.6;
  font-size: 17px;
}

/* Sticky footer: body is a column flex container; the footer's margin-top:auto pushes it
   to the bottom of the viewport on short pages, while long pages scroll normally. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-header { flex: 0 0 auto; }
.site-footer { flex: 0 0 auto; margin-top: auto; }

h1, h2, h3, h4, h5, .sans { font-family: var(--font-sans); color: var(--header); }
h1 { font-size: 2.4rem; font-weight: 700; margin: 0 0 0.5em; }
h2 { font-size: 1.7rem; font-weight: 700; margin: 0 0 0.6em; }
h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
a { color: var(--highlight); text-decoration: underline; }
a:hover { color: var(--accent-red); }
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  background: var(--header);
  color: #fff;
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-family: var(--font-sans); }
/* The new logo's own artwork is dark navy (close to the header's own background colour), so
   it needs a light chip behind it to stay visible — unlike the old all-white NeuRA mark. */
.brand-logo-chip { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; padding: 4px 6px; flex: 0 0 auto; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-title { font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.brand-sub { font-size: 0.72rem; color: #c7c7db; font-weight: 400; }
.main-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.main-nav a { color: #e4e4f0; text-decoration: none; font-family: var(--font-sans); font-size: 0.95rem; }
.main-nav a:hover { color: #fff; text-decoration: underline; }

/* Projects dropdown in the main nav */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.nav-dropdown-caret { font-size: 0.7em; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  /* No gap between the toggle and the menu (padding-top gives visual breathing room instead
     of margin-top) — a real gap here is a dead zone: moving the mouse from "Projects" down
     towards the menu briefly leaves .nav-dropdown's hover box entirely, which closes the menu
     before the cursor ever reaches it. */
  padding-top: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(36,36,58,0.18);
  min-width: 220px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; color: var(--text) !important; text-decoration: none !important; padding: 8px 10px; border-radius: 6px; font-size: 0.9rem; }
.nav-dropdown-menu a:hover { background: var(--tint-5); color: var(--accent-red) !important; }
.nav-dropdown-empty { display: block; padding: 8px 10px; color: var(--text-muted); font-size: 0.85rem; }
.btn-login {
  background: var(--accent-red);
  color: #fff !important;
  padding: 8px 18px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none !important;
}
.btn-login:hover { background: #c81f3f; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 4px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
}
.btn-primary { background: var(--highlight); color: #fff; }
.btn-primary:hover { background: var(--header); color: #fff; }
.btn-accent { background: var(--accent-red); color: #fff; }
.btn-accent:hover { background: #c81f3f; }
.btn-outline { background: transparent; color: var(--highlight); border: 1px solid var(--highlight); }
.btn-outline:hover { background: var(--tint-5); }
.btn-small { padding: 6px 14px; font-size: 0.82rem; }
.btn-danger { background: #b3253f; color: #fff; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--header), var(--highlight));
  color: #fff;
  padding: 72px 0 64px;
}
.hero h1 { color: #fff; }
.hero p.lead { font-family: var(--font-sans); font-size: 1.15rem; color: #d8d8ea; max-width: 640px; }
.hero .hero-actions { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section-alt { background: var(--tint-5); }
.section-header { text-align: left; margin-bottom: 32px; }
.section-header .eyebrow { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; color: var(--accent-red); font-weight: 700; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}
.card-panel { background: var(--tint-5); border-radius: 8px; padding: 32px; }
.hairline { border: none; border-top: 3px solid var(--header); width: 60px; margin: 0 0 20px; }
.hairline-thin { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* ---------- Post cards ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s ease;
}
.post-card:hover { box-shadow: 0 6px 18px rgba(36,36,58,0.12); }
.post-card img { width: 100%; height: 150px; object-fit: cover; background: var(--tint-10); }
.post-card-body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.post-card-body h3 { font-size: 1.05rem; margin-bottom: 8px; }
.post-card-body p { font-size: 0.92rem; color: var(--text-muted); flex: 1; }
.post-tag { font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase; color: var(--highlight); font-weight: 700; letter-spacing: 0.04em; }

/* ---------- Footer (combined with Acknowledgement of Country) ---------- */
/* Footer uses the dark highlight colour, which is why its own text/logo colours are light
   rather than the header/text-muted tokens used everywhere else on a white background. */
.site-footer { background: var(--footer); color: #fff; width: 100%; }
.footer-inner { padding: 40px 24px 24px; max-width: 1140px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.footer-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; }
.footer-links .brand { color: #fff; gap: 12px; }
.footer-links .brand-title { color: #fff; }
.footer-links .brand-sub { color: #c7c7db; }
.footer-nav { display: flex; gap: 16px 24px; flex-wrap: wrap; font-family: var(--font-sans); font-size: 0.9rem; }
.footer-nav a { color: #e4e4f0; text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }

/* Acknowledgement of Country on the left, both logos grouped together on the right, same line. */
.footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  margin-top: 14px;
}
/* Folded directly into the footer text flow (no separate heading/border) and kept compact
   — roughly half the height of the original standalone block. */
.acknowledgement {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: #c7c7db;
  font-size: 0.78rem;
  line-height: 1.45;
  max-width: 640px;
  flex: 1 1 320px;
}
.acknowledgement strong { font-style: normal; color: #fff; }

/* Both logos are white/reversed marks, so they sit directly on the dark footer with no
   background chip needed behind either of them. */
.footer-logos { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.footer-logo { height: 26px; width: auto; }
.footer-partner-badge img { height: 20px; width: auto; display: block; }
.copyright {
  text-align: center;
  padding: 12px 24px;
  font-size: 0.8rem;
  color: #b4b4cc;
  font-family: var(--font-sans);
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.site-credit::before { content: '·'; margin-right: 6px; }

/* ---------- Login modal / page ---------- */
.login-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 60px 20px; }
.login-box { max-width: 420px; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 36px; box-shadow: 0 10px 30px rgba(36,36,58,0.08); }
.login-box h1 { font-size: 1.5rem; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 0.88rem; margin-bottom: 6px; color: var(--header); }
.form-group input[type=text], .form-group input[type=password], .form-group input[type=email], .form-group select, .form-group textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; font-family: var(--font-serif); font-size: 1rem;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 2px solid var(--highlight); border-color: var(--highlight); }
.form-error { background: #fdecef; border: 1px solid var(--accent-red); color: #8a1a30; padding: 10px 14px; border-radius: 4px; margin-bottom: 18px; font-family: var(--font-sans); font-size: 0.9rem; }
.form-success { background: #edf6ee; border: 1px solid #4c8f52; color: #2c5c30; padding: 10px 14px; border-radius: 4px; margin-bottom: 18px; font-family: var(--font-sans); font-size: 0.9rem; }

/* ---------- Portal layout ---------- */
/* .portal-layout is a direct child of <body>, which is a column flexbox (see the sticky
   footer rules near the top of this file: .site-footer has margin-top:auto to push it to the
   bottom on short pages). That margin-top:auto claims ALL leftover vertical space for the
   footer — none of it belongs to .portal-layout's own box, so on a short post the sticky
   sidebar runs out of room and appears to scroll away/collapse well before the footer
   actually arrives on screen. `flex: 1` here claims that same leftover space for this section
   instead (exactly the gap between header and footer, whatever that is on this screen), which
   is what actually fixes it — a fixed min-height guess (tried 70vh, then 100vh-90px) can never
   be reliably correct across different screen sizes, since it doesn't know the true header/
   footer heights the way flex distribution does automatically. */
/* `width: 100%` is required here: on short posts this section's cross-axis stretch (as a
   flex item of body's column layout) doesn't reliably fill the available width in this
   environment, so it shrinks to fit its content instead of staying at the intended
   max-width/centered size — the same class of rendering quirk noted for position:sticky
   above. Setting an explicit width sidesteps it regardless of root cause. */
.portal-layout { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; padding: 40px 0 80px; flex: 1 0 auto; width: 100%; box-sizing: border-box; position: relative; }
/* Sidebar positioning (fixed-while-scrolling, then pinned to the bottom of this container once
   it would otherwise run past it) is applied via inline styles + these two classes by
   portal-sidebar-sticky.js — native CSS position:sticky was found to be broken in this
   environment whenever the sidebar has any grid/flex/inline-block layout sibling; see that
   file for the full explanation. */
.portal-sidebar { background: var(--tint-5); border-radius: 8px; padding: 22px; }
.portal-sidebar.js-sticky-fixed, .portal-sidebar.js-sticky-bottom { z-index: 20; }
.portal-sidebar h4 { font-family: var(--font-sans); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--header); margin-bottom: 12px; }
.portal-sidebar ul { list-style: none; margin: 0; padding: 0; }
.portal-sidebar li { border-bottom: 1px solid var(--border); }
.portal-sidebar li:last-child { border-bottom: none; }
.portal-sidebar a { display: block; padding: 9px 0; text-decoration: none; color: var(--text); font-size: 0.92rem; }
.portal-sidebar a:hover, .portal-sidebar a.active { color: var(--accent-red); }

/* "What's New at NeuRA" stays bold and visually separated from the alphabetical post list. */
.sidebar-top-link { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--border); }
.sidebar-top-link li { border-bottom: none; }
.sidebar-top-link a { font-weight: 700; font-family: var(--font-sans); color: var(--header); }
.sidebar-top-link a:hover, .sidebar-top-link a.active { color: var(--accent-red); }
.portal-main .showcase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.badge-group { display: inline-block; background: var(--tint-10); color: var(--highlight); font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; }

/* ---------- Post detail ---------- */
.post-detail h1 { margin-bottom: 8px; }
.post-detail .meta { font-family: var(--font-sans); color: var(--text-muted); font-size: 0.85rem; margin-bottom: 24px; }
.post-content img { max-width: 100%; border-radius: 6px; }
/* Quill inserts embedded videos as a bare <iframe class="ql-video"> with no width/height,
   which renders at the browser default of ~300x150px. Force a responsive 16:9 box instead. */
.post-content iframe, .ql-editor iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-width: 100%;
  border: none;
  border-radius: 6px;
  display: block;
  margin: 12px 0;
}
.post-content { font-size: 1.05rem; }
.attachments { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.attachments h4 { font-family: var(--font-sans); font-size: 0.95rem; }
.attachment-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.attachment-item a { font-family: var(--font-sans); }

/* ---------- Project detail (public) ---------- */
.project-header-image { width: 100%; max-height: 420px; overflow: hidden; background: var(--tint-10); }
.project-header-image img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
.project-meta-row { display: flex; flex-wrap: wrap; gap: 24px; margin: 4px 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.project-meta-item { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.project-meta-label { font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 700; }
.project-meta-value { font-size: 0.98rem; }
.project-section { margin-bottom: 28px; }
.project-section h3 { margin-bottom: 10px; }
.project-freetext { white-space: pre-line; }
.project-inline-image { width: 100%; max-width: 100%; border-radius: 8px; display: block; }
.project-publications { margin: 0; padding-left: 22px; }
.project-publications li { margin-bottom: 8px; }
.project-signup { background: var(--tint-5); border-radius: 8px; padding: 24px; }
.project-signup-embed iframe { width: 100%; min-height: 700px; border: none; border-radius: 6px; }

/* ---------- Clinicians (public About Us page) ---------- */
.clinician-list { display: flex; flex-direction: column; gap: 22px; margin-top: 20px; }
.clinician-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  text-align: left;
}
.clinician-photo { flex: 0 0 200px; width: 200px; height: 200px; object-fit: cover; border-radius: 8px; background: var(--tint-10); }
.clinician-photo-placeholder { flex: 0 0 200px; width: 200px; height: 200px; border-radius: 8px; background: var(--tint-10); }
.clinician-info { flex: 1; }
.clinician-name { font-family: var(--font-sans); font-weight: 700; color: var(--header); }
.clinician-years { font-family: var(--font-sans); font-size: 0.82rem; color: var(--text-muted); }
.past-list { list-style: none; margin: 0; padding: 0; }
.past-list li { padding: 14px 0; border-bottom: 1px solid var(--border); }

/* ---------- Admin: drag-and-drop clinician reordering ---------- */
.sortable-list { list-style: none; margin: 0; padding: 0; }
.sortable-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
  cursor: grab;
}
.sortable-item.sortable-ghost { opacity: 0.4; }
.sortable-item .drag-handle { color: var(--text-muted); font-family: var(--font-sans); font-size: 1.1rem; }
.sortable-item img { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; background: var(--tint-10); }
.sortable-item .name { font-family: var(--font-sans); font-weight: 700; flex: 1; }
.category-block { margin-bottom: 30px; }
.category-block h3 { margin-bottom: 12px; }

/* ---------- Admin ---------- */
.admin-shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.admin-sidebar { background: var(--header); color: #fff; padding: 24px 0; }
.admin-sidebar .brand { padding: 0 22px 22px; }
.admin-sidebar nav a { display: block; padding: 11px 22px; color: #d8d8ea; text-decoration: none; font-family: var(--font-sans); font-size: 0.92rem; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { background: var(--highlight); color: #fff; }
.admin-main { padding: 32px 40px; background: var(--tint-5); }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
table.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
table.admin-table th, table.admin-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
table.admin-table th { font-family: var(--font-sans); background: var(--tint-10); color: var(--header); }
.checkbox-row { display: flex; gap: 16px; flex-wrap: wrap; }
.checkbox-row label { font-family: var(--font-sans); font-size: 0.88rem; display: flex; align-items: center; gap: 6px; font-weight: 400; }
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.stat-card { background: #fff; border-radius: 8px; padding: 22px; border: 1px solid var(--border); }
.stat-card .num { font-family: var(--font-sans); font-size: 2rem; font-weight: 700; color: var(--header); }
.stat-card .label { font-family: var(--font-sans); color: var(--text-muted); font-size: 0.85rem; }
#editor { background: #fff; min-height: 320px; border: 1px solid var(--border); }
.ql-toolbar { border-color: var(--border) !important; }
.ql-container { border-color: var(--border) !important; font-family: var(--font-serif); font-size: 1rem; }

/* Drag-and-drop image upload (project header/additional image) */
.dropzone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  background: var(--tint-5);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover, .dropzone-active { border-color: var(--highlight); background: var(--tint-10); }
.dropzone-prompt p { margin: 0 0 4px; font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-muted); }
.dropzone-status { font-size: 0.8rem; }
.dropzone-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dropzone-preview img { max-width: 100%; max-height: 220px; border-radius: 6px; display: block; }

/* ---------- Misc / responsive ---------- */
.text-muted { color: var(--text-muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

@media (max-width: 900px) {
  .two-col, .post-grid, .portal-layout, .admin-shell, .stat-cards, .showcase-grid { grid-template-columns: 1fr; }
  .portal-sidebar { position: static; }
  /* The sidebar isn't sticky on mobile (stacks above the post instead), so growing this
     section to fill the page would just leave a large empty gap here for no reason — drop
     back to fitting the actual content. */
  .portal-layout { flex: 0 0 auto; }
  .admin-main { padding: 24px; }
  .footer-links { flex-direction: column; }
}

@media (max-width: 560px) {
  .clinician-card { flex-direction: column; }
  .clinician-photo, .clinician-photo-placeholder { width: 100%; flex-basis: auto; height: 220px; }
}