/* ==========================================================================
   maennel.ai — Shared Stylesheet
   Navy blue academic design · Light/dark via prefers-color-scheme · No JS
   ========================================================================== */

/* ---------- Custom Properties (Light Mode) ---------- */
:root {
  --navy-900: #0c1f33;
  --navy-800: #132d47;
  --navy-700: #1a3a5c;
  --navy-600: #2c5f8a;
  --navy-500: #3d7ab5;
  --navy-400: #5a9fd4;
  --navy-300: #7ab8e0;

  --gray-50:  #f8f9fa;
  --gray-100: #f0f4f8;
  --gray-200: #e2e8f0;
  --gray-300: #c8d6e0;
  --gray-500: #64748b;
  --gray-700: #374151;

  /* Semantic tokens — light mode */
  --bg:           #ffffff;
  --bg-alt:       var(--gray-100);
  --bg-nav:       var(--navy-800);
  --text:         #2d2d2d;
  --text-light:   #555;
  --text-on-nav:  #e8edf2;
  --accent:       var(--navy-700);
  --accent-hover: var(--navy-600);
  --link:         var(--navy-600);
  --link-hover:   var(--navy-500);
  --border:       var(--gray-200);
  --divider:      var(--gray-300);
  --card-bg:      #ffffff;
  --card-shadow:  rgba(0,0,0,0.06);
  --code-bg:      var(--gray-100);

  /* Typography */
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Layout */
  --container-max: 900px;
  --container-pad: 1.5rem;
  --nav-height: 3.5rem;
}

/* ---------- Dark Mode ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #141b2d;
    --bg-alt:       #1a2340;
    --bg-nav:       #0c1524;
    --text:         #d8dee9;
    --text-light:   #8fa3b8;
    --text-on-nav:  #c8d6e0;
    --accent:       var(--navy-400);
    --accent-hover: var(--navy-300);
    --link:         var(--navy-400);
    --link-hover:   var(--navy-300);
    --border:       #2a3550;
    --divider:      #2a3550;
    --card-bg:      #1a2340;
    --card-shadow:  rgba(0,0,0,0.25);
    --code-bg:      #1a2340;
  }
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 1rem);
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Links ---------- */
a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover,
a:focus-visible {
  color: var(--link-hover);
  text-decoration: underline;
}

/* ---------- Skip to Content ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 4px 4px;
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus {
  top: 0;
  color: #fff;
  text-decoration: none;
}

/* ---------- Navigation ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-nav);
  height: var(--nav-height);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.nav-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
}

.nav-brand {
  color: var(--text-on-nav);
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.nav-brand:hover {
  color: #fff;
  text-decoration: none;
}

/* CSS-only hamburger toggle */
.nav-toggle-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.nav-toggle-label {
  display: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0.5rem;
  margin-left: auto;
  z-index: 10;
}
.nav-toggle-label span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-on-nav);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
}

.nav-links {
  display: flex;
  list-style: none;
  margin-left: auto;
  gap: 0.25rem;
}
.nav-links li a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--text-on-nav);
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.nav-links li a:hover,
.nav-links li a:focus-visible {
  background: rgba(255,255,255,0.1);
  color: #fff;
  text-decoration: none;
}
.nav-links li a[aria-current="page"] {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.nav-links li a .ext-icon {
  font-size: 0.75em;
  vertical-align: super;
  margin-left: 2px;
}

/* Mobile nav */
@media (max-width: 699px) {
  .nav-toggle-label {
    display: flex;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--bg-nav);
    flex-direction: column;
    padding: 0.5rem 0;
    gap: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }
  .nav-links li a {
    padding: 0.75rem var(--container-pad);
    border-radius: 0;
  }
  .nav-toggle-checkbox:checked ~ .nav-links {
    display: flex;
  }
  /* Animate hamburger → X */
  .nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ---------- Main Content ---------- */
main {
  flex: 1;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 2rem var(--container-pad);
}

/* ---------- Typography ---------- */
h1 {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.25;
  margin-bottom: 0.75rem;
}
h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--border);
}
h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 1rem;
  text-align: justify;
  hyphens: auto;
}

ul, ol {
  margin: 0.5rem 0 1rem 1.5rem;
}
li {
  margin-bottom: 0.35rem;
}

/* ---------- Intro / Hero Layout ---------- */
.intro {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.intro-text {
  flex: 1;
}
.intro-photo {
  flex-shrink: 0;
  text-align: center;
}
.intro-photo img {
  width: 160px;
  height: auto;
  border-radius: 6px;
  transition: opacity 0.2s;
}
.intro-photo img:hover {
  opacity: 0.85;
}
.intro-photo .photo-caption {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-light);
}
@media (max-width: 599px) {
  .intro {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }
  .intro-text {
    text-align: left;
  }
  .intro-text p {
    text-align: justify;
  }
  .intro-photo img {
    width: 130px;
  }
}

/* ---------- Section Divider ---------- */
.section-divider {
  border: 0;
  height: 1px;
  background: var(--divider);
  margin: 2rem 0;
}

/* ---------- Collapsible Sections (CSS-only) ---------- */
details {
  margin-bottom: 0.75rem;
}
details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  padding: 0.4rem 0;
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  content: '+ ';
  font-weight: 700;
  margin-right: 0.25rem;
}
details[open] summary::before {
  content: '- ';
}
details > *:not(summary) {
  padding-left: 1.25rem;
}

/* ---------- Cards ---------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px var(--card-shadow);
}

/* ---------- Course List ---------- */
.course-group {
  margin-bottom: 1.5rem;
}
.course-group h3 {
  margin-top: 1rem;
}
.course-group ul {
  margin-left: 1.5rem;
}
.course-group li {
  margin-bottom: 0.5rem;
}
.course-semester {
  font-size: 0.85rem;
  color: var(--text-light);
}

/* ---------- PhD Students ---------- */
.student-list {
  margin-left: 0;
  list-style: none;
}
.student-list li {
  padding: 0.35rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--border);
  margin-bottom: 0.5rem;
}
.student-list li a {
  font-weight: 500;
}

/* ---------- Professional Activities ---------- */
.activity-year {
  font-weight: 700;
  color: var(--accent);
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}
.activity-list {
  margin-left: 1.5rem;
  margin-bottom: 0.75rem;
}
.activity-list li {
  margin-bottom: 0.25rem;
  font-size: 0.93rem;
}

/* ---------- Contact / Email Obfuscation ---------- */
.email-protect {
  font-size: 0;
  color: transparent;
  user-select: none;
}
.email-protect::before {
  content: attr(data-user) "\0040" attr(data-domain);
  font-size: 1rem;
  color: var(--link);
  user-select: text;
}
.email-display .email-protect::before {
  font-size: 1.1rem;
}

/* GPG key block */
.gpg-block {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
  overflow-x: auto;
  line-height: 1.5;
  word-break: break-all;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 1.5rem var(--container-pad);
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-light);
  margin-top: auto;
}
.site-footer .container {
  padding: 0;
}
.site-footer a {
  color: var(--text-light);
}
.site-footer a:hover {
  color: var(--link);
}

/* ---------- Blockquote ---------- */
blockquote {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--accent);
  background: var(--bg-alt);
  border-radius: 0 4px 4px 0;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.6;
}
blockquote p {
  margin-bottom: 0;
  text-align: left;
}

/* ---------- Spiral Dynamics Color Labels ---------- */
.sd-label {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: 3px;
  font-weight: 700;
  font-size: 0.88em;
  letter-spacing: 0.02em;
  line-height: 1.4;
  vertical-align: baseline;
}
.sd-beige   { background: #E0CC94; color: #000; }
.sd-purple  { background: #7030A0; color: #fff; }
.sd-red     { background: #FF0000; color: #fff; }
.sd-blue    { background: #0070C0; color: #fff; }
.sd-orange  { background: #ED7D31; color: #fff; }
.sd-green   { background: #00B050; color: #fff; }
.sd-yellow  { background: #FFD966; color: #000; }
.sd-turquoise { background: #00B0F0; color: #fff; }

/* ---------- Year-grouped PC memberships ---------- */
.pc-year {
  margin-bottom: 1rem;
}
.pc-year-label {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.15em 0.6em;
  border-radius: 3px;
  margin-bottom: 0.3rem;
  vertical-align: middle;
}
@media (prefers-color-scheme: dark) {
  .pc-year-label {
    background: var(--navy-600);
  }
}
.pc-year ul {
  margin: 0.25rem 0 0 1.5rem;
}
.pc-year li {
  margin-bottom: 0.2rem;
  font-size: 0.93rem;
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.text-small  { font-size: 0.88rem; }
.text-light  { color: var(--text-light); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

/* ---------- Print ---------- */
@media print {
  .site-nav, .skip-link { display: none; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .container { max-width: 100%; padding: 0; }
}