/*
 Theme Name:   MSense Theme
 Description:  Research lab theme for MSense Lab, LMU Munich. Topic-first homepage, minimal design.
 Version:      1.0.0
 Author:       MSense Lab
 Text Domain:  msense-theme
 Requires at least: 6.0
 Requires PHP: 8.0
*/

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --ms-font:        system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ms-max-width:   1024px;
  --ms-gutter:      24px;

  /* Neutrals */
  --ms-bg:          #fff;
  --ms-bg-secondary:#f5f5f3;
  --ms-text:        #1a1a18;
  --ms-text-secondary: #888780;
  --ms-text-tertiary:  #b4b2a9;
  --ms-border:      #e8e8e4;

  /* Topic palette */
  --ms-purple-bg:   #EEEDFE;
  --ms-purple:      #3C3489;
  --ms-purple-dot:  #7F77DD;
  --ms-teal-bg:     #E1F5EE;
  --ms-teal:        #085041;
  --ms-teal-dot:    #1D9E75;
  --ms-coral-bg:    #FAECE7;
  --ms-coral:       #712B13;
  --ms-coral-dot:   #D85A30;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--ms-font);
  font-size: 16px;
  color: var(--ms-text);
  background: var(--ms-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
p, .fp-topic-desc, .member-bio, .pub-title, .lm-about, .lm-pi-bio { hyphens: auto; }
img { max-width: 100%; height: auto; display: block; }

/* Content links (posts, pages, descriptions) */
.sp-content a,
.page-content a,
.tt-intro a,
.member-bio a,
.fp-hero-sub a,
.entry-content a {
  color: var(--ms-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.sp-content a:visited,
.page-content a:visited,
.tt-intro a:visited,
.member-bio a:visited,
.fp-hero-sub a:visited,
.entry-content a:visited {
  color: var(--ms-coral);
}
.sp-content a:hover,
.page-content a:hover,
.tt-intro a:hover,
.member-bio a:hover,
.fp-hero-sub a:hover,
.entry-content a:hover {
  color: var(--ms-teal-dot);
}

/* ============================================================
   SITE HEADER — ms-header-*
   ============================================================ */
.ms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--ms-max-width);
  margin: 0 auto;
  padding: 14px var(--ms-gutter);
}
.ms-header-bar {
  border-bottom: 1px solid var(--ms-border);
}
.ms-logo {
  font-size: 15px;
  font-weight: 500;
  color: var(--ms-text);
}
.ms-logo a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ms-logo-img {
  height: 28px;
  width: auto;
}
.ms-logo span {
  color: var(--ms-text-secondary);
  font-weight: 400;
}

/* Primary navigation */
.ms-nav { display: flex; gap: 20px; list-style: none; }
.ms-nav li { position: relative; }
.ms-nav > li > a {
  font-size: 14px;
  color: var(--ms-text-secondary);
  text-decoration: none;
  padding: 6px 0;
  display: block;
}
.ms-nav > li > a:hover,
.ms-nav > li.current-menu-item > a,
.ms-nav > li.current-menu-ancestor > a {
  color: var(--ms-text);
  font-weight: 500;
}

/* Dropdown */
.ms-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -12px;
  background: var(--ms-bg);
  border: 1px solid var(--ms-border);
  border-radius: 8px;
  padding: 6px 0;
  min-width: 180px;
  list-style: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  z-index: 100;
}
.ms-nav li:hover > .sub-menu { display: block; }
.ms-nav .sub-menu a {
  display: block;
  padding: 6px 16px;
  font-size: 14px;
  color: var(--ms-text-secondary);
}
.ms-nav .sub-menu a:hover {
  background: var(--ms-bg-secondary);
  color: var(--ms-text);
}

/* Header search */
.ms-search {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid var(--ms-border);
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 12px;
}
.ms-search input[type="search"] {
  width: 120px;
  font-size: 13px;
  padding: 4px 6px;
  border: none;
  background: transparent;
  color: var(--ms-text);
  outline: none;
}
.ms-search input[type="search"]::placeholder { color: var(--ms-text-tertiary); }
.ms-search input[type="search"]:focus { width: 180px; }
.ms-search button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ms-text-secondary);
  display: flex;
  align-items: center;
  padding: 2px;
}
.ms-search button:hover { color: var(--ms-text); }

/* Mobile hamburger */
.ms-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--ms-text);
}

/* ============================================================
   SITE FOOTER — ms-footer-*
   ============================================================ */
.ms-footer-bar {
  border-top: 1px solid var(--ms-border);
  margin-top: 64px;
}
.ms-footer {
  max-width: var(--ms-max-width);
  margin: 0 auto;
  padding: 24px var(--ms-gutter);
  text-align: center;
  font-size: 12px;
  color: var(--ms-text-tertiary);
}

/* ============================================================
   CONTENT WRAPPERS
   ============================================================ */
.ms-content-wrap {
  max-width: var(--ms-max-width);
  margin: 0 auto;
  padding: 40px var(--ms-gutter) 60px;
}

/* ============================================================
   FRONT PAGE — fp-*
   ============================================================ */
.fp-main {
  max-width: var(--ms-max-width);
  margin: 0 auto;
}

/* Hero */
.fp-hero {
  padding: 32px var(--ms-gutter) 24px;
  border-bottom: 1px solid var(--ms-border);
}
.fp-hero-label {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ms-text-tertiary);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.fp-hero-headline {
  font-size: 32px;
  font-weight: 600;
  color: var(--ms-text);
  line-height: 1.3;
}
.fp-hero-sub {
  font-size: 15px;
  color: var(--ms-text-secondary);
  margin-top: 8px;
  line-height: 1.6;
}

/* Section label */
.fp-section-label {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ms-text-tertiary);
  text-transform: uppercase;
  padding: 20px var(--ms-gutter) 12px;
  border-bottom: 1px solid var(--ms-border);
}

/* Topic grid */
.fp-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ms-border);
}
.fp-topic-card {
  background: var(--ms-bg);
  padding: 16px 16px 20px;
  cursor: pointer;
  transition: background .15s;
  display: block;
}
.fp-topic-card:hover { background: var(--ms-bg-secondary); }
.fp-topic-thumb {
  width: 96px;
  height: 96px;
  object-fit: contain;
  float: left;
  margin: 0 12px 8px 0;
}
.fp-topic-body {}
.fp-topic-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.pill-purple { background: var(--ms-purple-bg); color: var(--ms-purple); }
.pill-teal   { background: var(--ms-teal-bg);   color: var(--ms-teal); }
.pill-coral  { background: var(--ms-coral-bg);   color: var(--ms-coral); }
.fp-topic-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ms-text);
  margin-bottom: 4px;
}
.fp-topic-desc {
  font-size: 13px;
  color: var(--ms-text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}
.fp-topic-meta { display: flex; gap: 10px; }
.fp-meta-badge {
  font-size: 11px;
  color: var(--ms-text-tertiary);
  display: flex;
  align-items: center;
  gap: 3px;
}
.fp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.dot-purple { background: var(--ms-purple-dot); }
.dot-teal   { background: var(--ms-teal-dot); }
.dot-coral  { background: var(--ms-coral-dot); }

/* Two-column feed */
.fp-two-col {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 1px;
  background: var(--ms-border);
  margin-top: 1px;
}
.fp-lane { background: var(--ms-bg); padding: 0; }
.fp-lane-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ms-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fp-lane-title { font-size: 14px; font-weight: 500; color: var(--ms-text); }
.fp-lane-link  { font-size: 13px; color: var(--ms-text-secondary); }
.fp-article-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ms-border);
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.fp-article-row:hover { background: var(--ms-bg-secondary); }
.fp-article-row:last-child { border-bottom: none; }
.fp-art-thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.fp-art-body { flex: 1; min-width: 0; }
.fp-art-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tag-curious  { color: #993C1D; }
.tag-research { color: #085041; }
.fp-art-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ms-text);
  line-height: 1.4;
  margin-bottom: 3px;
}
.fp-art-excerpt {
  font-size: 13px;
  color: var(--ms-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 3px;
}
.fp-art-date { font-size: 12px; color: var(--ms-text-tertiary); }

/* News strip */
.fp-news-strip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ms-border);
  margin-top: 1px;
}
.fp-news-item {
  background: var(--ms-bg);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.fp-news-item:hover { background: var(--ms-bg-secondary); }
.fp-news-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.fp-news-body { flex: 1; min-width: 0; }
.fp-news-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ms-text);
  line-height: 1.4;
  margin-bottom: 3px;
}
.fp-news-excerpt {
  font-size: 13px;
  color: var(--ms-text-secondary);
  line-height: 1.5;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fp-news-date { font-size: 11px; color: var(--ms-text-tertiary); }

/* ============================================================
   TAXONOMY-TOPIC — tt-*
   ============================================================ */
.tt-banner {
  padding: 48px var(--ms-gutter);
}
.tt-banner--purple { background: var(--ms-purple-bg); }
.tt-banner--teal   { background: var(--ms-teal-bg); }
.tt-banner--coral  { background: var(--ms-coral-bg); }
.tt-banner__inner {
  max-width: var(--ms-max-width);
  margin: 0 auto;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.tt-banner-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
}
.tt-banner-text { flex: 1; }
.tt-intro {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ms-text-secondary);
  margin: 8px 0;
}
.tt-meta {
  font-size: 0.82rem;
  color: var(--ms-text-secondary);
  margin: 0;
}
.tt-content { padding-top: 48px; padding-bottom: 72px; }

/* Topic post card (teaser with featured image) */
.tt-post-card {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ms-border);
  text-decoration: none;
  color: inherit;
}
.tt-post-card:hover { opacity: 0.85; }
.tt-post-thumb {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--ms-bg-secondary);
}
.tt-post-body { flex: 1; min-width: 0; }
.tt-post-cat {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(0,0,0,.07);
  color: var(--ms-text-secondary);
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 4px;
}
.tt-post-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
}
.tt-post-excerpt {
  font-size: 0.82rem;
  color: var(--ms-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.tt-post-date {
  font-size: 0.75rem;
  color: var(--ms-text-tertiary);
}

/* ============================================================
   SINGLE POST — sp-*
   ============================================================ */
.sp-article { padding: 20px 0; }
.sp-categories {
  font-size: 12px;
  margin-bottom: 8px;
}
.sp-categories a {
  color: var(--ms-text-secondary);
  text-decoration: none;
}
.sp-categories a:hover { text-decoration: underline; }
.sp-title {
  font-size: 1.6em;
  font-weight: 700;
  margin-bottom: 8px;
}
.sp-meta {
  font-size: 13px;
  color: var(--ms-text-secondary);
  margin-bottom: 24px;
}
.sp-content { margin-top: 20px; line-height: 1.7; }
.sp-content p { margin-bottom: 1em; }
.sp-content img { border-radius: 4px; }
.sp-content h2, .sp-content h3 { margin-top: 1.5em; margin-bottom: 0.5em; }

/* WordPress gallery support */
.wp-block-gallery { margin: 1.5em 0; }

/* ============================================================
   LAB MEMBERS — lm-*
   ============================================================ */
.lm-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 32px;
}
/* About section */
.lm-about { line-height: 1.7; margin-bottom: 40px; }
.lm-about p { margin-bottom: 12px; }
/* PI card */
.lm-pi { margin-bottom: 48px; }
.lm-pi-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.lm-pi-photo {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.lm-pi-info { flex: 1; min-width: 0; }
.lm-pi-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.lm-pi-name a { color: inherit; text-decoration: none; }
.lm-pi-name a:hover { color: var(--ms-teal); }
.lm-pi-role {
  font-size: 14px;
  color: var(--ms-text-secondary);
  margin-bottom: 12px;
}
.lm-pi-bio {
  line-height: 1.6;
  margin-bottom: 12px;
}
.lm-pi-interests {
  font-size: 14px;
  color: var(--ms-text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}
.lm-pi-links { display: flex; gap: 16px; }
.lm-pi-links a {
  font-size: 13px;
  color: var(--ms-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lm-pi-links a:hover { color: var(--ms-teal-dot); }

/* Alumni list (from page content) */
.lm-alumni ul { list-style: none; padding: 0; }
.lm-alumni li {
  padding: 8px 0;
  border-bottom: 1px solid var(--ms-border);
  font-size: 15px;
}

.lm-section { margin-bottom: 48px; }
.lm-section-heading {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ms-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ms-border);
}

/* Member cards */
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.member-card {
  display: flex;
  flex-direction: column;
  border: 0.5px solid var(--ms-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.member-card:hover { background: var(--ms-bg-secondary); }
.member-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.member-card__info { padding: 12px; }
.member-card__name { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.member-card__role  { font-size: 12px; color: var(--ms-text-secondary); }

/* Alumni dimmed */
.members-grid--alumni .member-card { opacity: 0.65; }

/* ============================================================
   MEMBER PROFILE — mp-*
   ============================================================ */
.member-profile { padding: 40px 0; }
.member-header {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 32px;
}
.member-photo {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  object-fit: cover;
}
.member-meta h1 { font-size: 1.6rem; margin-bottom: 4px; }
.member-role {
  font-size: 14px;
  color: var(--ms-text-secondary);
  margin-bottom: 12px;
}
.member-pills { display: flex; gap: 8px; margin-bottom: 12px; }
.member-links { display: flex; gap: 12px; }
.member-links a {
  font-size: 13px;
  color: var(--ms-teal);
  text-decoration: none;
}
.member-links a:hover { text-decoration: underline; }
.member-bio,
.member-interests { margin-bottom: 24px; line-height: 1.6; }
.member-interests h2,
.member-posts h2,
.member-pubs h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Publications list */
.member-pubs { margin-bottom: 32px; }
.pub-year {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ms-text-secondary);
  margin: 20px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ms-border);
}
.pub-item {
  padding: 6px 0;
  line-height: 1.5;
}
.pub-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ms-text);
}
a.pub-title { color: var(--ms-teal); }
a.pub-title:hover { text-decoration: underline; }
a.pub-title:visited { color: var(--ms-coral); }
.pub-venue {
  font-size: 13px;
  color: var(--ms-text-secondary);
  font-style: italic;
}
.pub-venue::before { content: " \2014  "; }
.pub-cite {
  font-size: 12px;
  color: var(--ms-text-tertiary);
}
.pub-cite::before { content: " \00b7  "; }
.member-posts .article-row {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--ms-border);
}
.member-posts .article-row h3 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}
.member-posts .article-row span {
  font-size: 12px;
  color: var(--ms-text-secondary);
}

/* ============================================================
   GENERIC PAGE
   ============================================================ */
.page-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 24px;
}
.page-content { line-height: 1.7; }
.page-content p { margin-bottom: 1em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .fp-topic-grid { grid-template-columns: 1fr; }
  .fp-two-col    { grid-template-columns: 1fr; }
  .fp-news-thumb { width: 60px; height: 45px; }
  .tt-post-thumb  { width: 80px; height: 60px; }
  .lm-pi-card    { flex-direction: column; }
  .lm-pi-photo   { width: 140px; height: 140px; }
  .member-header { flex-direction: column; }
  .member-photo  { width: 120px; height: 120px; }

  /* Mobile nav */
  .ms-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--ms-bg);
    border: 1px solid var(--ms-border);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    z-index: 100;
  }
  .ms-nav.is-open { display: flex; }
  .ms-nav .sub-menu {
    position: static;
    border: none;
    box-shadow: none;
    padding-left: 16px;
  }
  .ms-menu-toggle { display: block; }
  .ms-header { position: relative; }
}

@media (max-width: 480px) {
  .fp-hero-headline { font-size: 17px; }
  .members-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}