/*
Theme Name: Meijers Group
Description: Custom theme for the Meijers Group translational cardio-immuno-oncology research group.
Author: Meijers Group
Version: 1.0
Text Domain: meijers-group
*/

:root{
  --ink:#255173;
  --ink-soft:#3D6D95;
  --paper:#F6F2EA;
  --paper-raised:#EFE8D8;
  --rule:#CBBFA6;
  --crimson:#8C2F2F;
  --teal:#35635F;
  --text:#3A362E;
  --text-muted:#7A7364;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  --maxw: 760px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--ink);margin:0;}
.container{max-width:1040px;margin:0 auto;padding:0 32px;}
.prose{max-width:var(--maxw);}

a:focus-visible,button:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* ---------- NAV ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(246,242,234,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.nav-inner{
  max-width:1040px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
  height:60px;
}
.wordmark{
  font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);
  text-decoration:none;letter-spacing:0.01em;
}
.wordmark em{font-style:italic;color:var(--crimson);}
nav.links{display:flex;gap:28px;}
nav.links a{
  font-size:14.5px;text-decoration:none;color:var(--ink-soft);
  position:relative;padding:4px 0;
}
nav.links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--crimson);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
nav.links a:hover::after,nav.links a.active::after{transform:scaleX(1);}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;}

@media (max-width:760px){
  nav.links{
    position:fixed;top:60px;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    flex-direction:column;gap:0;padding:8px 32px 16px;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  nav.links.open{opacity:1;pointer-events:auto;transform:translateY(0);}
  nav.links a{padding:10px 0;border-bottom:1px solid var(--rule);}
  .nav-toggle{display:block;}
}

/* ---------- HERO ---------- */
.hero{
  padding-top:96px;
  padding-bottom:72px;
  border-bottom:1px solid var(--rule);
}
.hero-grid{
  display:grid;grid-template-columns:1.3fr 0.7fr;gap:56px;align-items:start;
}
.hero h1{
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.1;
  letter-spacing:-0.01em;
}
.hero h1 em{font-style:italic;color:var(--ink-soft);}
.hero .kicker{
  font-family:var(--sans);font-size:14px;color:var(--crimson);
  margin-bottom:18px;font-weight:500;
}
.hero .lede{
  margin-top:24px;color:var(--text-muted);font-size:15.5px;max-width:460px;
}
.hero-cta{margin-top:32px;display:flex;gap:16px;}
.btn{
  display:inline-block;padding:11px 22px;border-radius:2px;
  font-size:14.5px;text-decoration:none;font-weight:500;
  border:1px solid var(--ink);
}
.btn.primary{background:var(--ink);color:var(--paper);}
.btn.ghost{color:var(--ink);}

.hero-portrait{display:flex;align-items:center;justify-content:center;margin-top:-100px;}
.hero-portrait img{width:100%;height:auto;max-width:420px;}

.loop-wrap{position:relative;aspect-ratio:1/1;max-width:380px;margin:0 auto;}
.loop-wrap svg{width:100%;height:100%;}
.loop-label{font-family:var(--sans);font-size:11.5px;fill:var(--ink-soft);}
.loop-center{font-family:var(--serif);font-style:italic;fill:var(--ink);font-size:15px;}
@keyframes drawloop{ to { stroke-dashoffset:0; } }
.loop-path{
  stroke-dasharray:900;stroke-dashoffset:900;
  animation:drawloop 1.8s ease forwards;
  animation-delay:.2s;
}

@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;}
  .loop-wrap{max-width:280px;}
  .hero-portrait{margin-top:16px;}
  .hero-portrait img{max-width:260px;}
}

/* ---------- SECTION SCAFFOLDING ---------- */
section{padding:88px 0;border-bottom:1px solid var(--rule);}
section:last-of-type{border-bottom:none;}
.section-head{margin-bottom:48px;max-width:var(--maxw);}
.section-head .num{font-family:var(--sans);font-size:13px;color:var(--text-muted);margin-bottom:8px;}
.section-head h2{font-size:clamp(28px,3.4vw,36px);}
.section-head p{color:var(--text-muted);margin-top:14px;font-size:15.5px;}

/* ---------- RESEARCH (FLIP CARDS) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:start;}
.pillar{perspective:1600px;height:360px;}
.pillar-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.2,.2,1);
}
.pillar:hover .pillar-inner,
.pillar:focus-within .pillar-inner{transform:rotateY(180deg);}

.pillar-front,.pillar-back{
  position:absolute;inset:0;
  backface-visibility:hidden;
  border:1px solid var(--rule);
  border-radius:2px;
  overflow:hidden;
}
.pillar-front{
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;
}
.pillar-front-scrim{
  width:100%;padding:20px 18px;
  background:linear-gradient(to top, rgba(22,20,15,0.82), rgba(22,20,15,0.15) 70%, transparent);
}
.pillar-front-scrim h3{color:#fff;font-size:20px;margin-top:8px;}
.pillar-front-scrim .tag{background:rgba(246,242,234,0.92);}

.pillar-back{
  transform:rotateY(180deg);
  background:var(--paper-raised);
  padding:24px;
  overflow-y:auto;
}
.pillar-back h3{font-size:20px;margin-bottom:10px;}
.pillar-back p{font-size:13.5px;color:var(--text);}
.pillar-back p + p{margin-top:10px;}
.pillar-back strong{color:var(--ink);}

.tag{
  display:inline-block;font-size:12.5px;font-weight:500;
  color:var(--teal);border:1px solid var(--teal);border-radius:2px;
  padding:3px 9px;
}
.tag.red{color:var(--crimson);border-color:var(--crimson);}

@media (max-width:900px){
  .pillars{grid-template-columns:1fr;gap:28px;}
}
@media (hover:none){
  .pillar-inner{transition:transform .5s ease;}
  .pillar.flipped .pillar-inner{transform:rotateY(180deg);}
}

/* ---------- PUBLICATIONS ---------- */
.pub-list{list-style:none;margin:0;padding:0;max-width:820px;}
.pub-list li{padding:18px 0;border-top:1px solid var(--rule);font-size:15px;color:var(--text);display:flex;gap:18px;}
.pub-list li:last-child{border-bottom:1px solid var(--rule);}
.pub-year{font-family:var(--serif);font-style:italic;color:var(--crimson);flex:0 0 48px;font-size:15px;}
.pub-body a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;}
.pub-body a:hover{text-decoration-color:var(--crimson);}
.pub-journal{font-style:italic;color:var(--text-muted);}
.pub-more{margin-top:24px;font-size:14.5px;}

/* ---------- TEAM ---------- */
.pi-card{display:grid;grid-template-columns:180px 1fr;gap:40px;margin-bottom:64px;align-items:start;}
.pi-card img{
  border:1px solid var(--rule);border-radius:50%;
  width:180px;height:180px;object-fit:cover;
}
.pi-card h3{font-size:22px;}
.pi-card .role{color:var(--crimson);font-size:14px;margin:6px 0 16px;}
.pi-card p{font-size:15px;color:var(--text);}
@media (max-width:640px){
  .pi-card{grid-template-columns:110px 1fr;}
  .pi-card img{width:110px;height:110px;}
}

.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 32px;}
@media (max-width:820px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr;}}

.avatar{
  width:120px;height:120px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-size:26px;
  margin-bottom:14px;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;}
.member h4{font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--ink);margin-bottom:2px;}
.member .role{font-size:13px;color:var(--crimson);margin-bottom:8px;}
.member p{font-size:14px;color:var(--text);line-height:1.55;}

details.former{margin-top:56px;border-top:1px solid var(--rule);padding-top:24px;}
details.former summary{
  cursor:pointer;font-family:var(--serif);font-style:italic;font-size:17px;
  color:var(--ink-soft);list-style:none;display:flex;align-items:center;gap:8px;
}
details.former summary::-webkit-details-marker{display:none;}
details.former summary::before{content:"+";font-family:var(--sans);font-style:normal;color:var(--crimson);font-size:18px;width:18px;}
details.former[open] summary::before{content:"\2013";}
details.former .team-grid{margin-top:32px;}

/* ---------- VACANCIES ---------- */
.vac-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
@media (max-width:720px){.vac-grid{grid-template-columns:1fr;}}
.vac-card{border:1px solid var(--rule);padding:32px;background:var(--paper-raised);}
.vac-card h3{font-size:19px;margin-bottom:10px;}
.vac-card p{font-size:14.5px;color:var(--text);margin-bottom:18px;}
.vac-card a{font-size:14px;font-weight:500;color:var(--crimson);text-decoration:none;}
.vac-card a:hover{text-decoration:underline;}

/* ---------- UPDATES BUBBLE FIELD ---------- */
.bubble-field{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
  gap:32px 28px;padding:24px 0 8px;
}
.bubble{margin:0;width:180px;text-align:center;}
.bubble-photo{
  width:180px;height:180px;border-radius:50%;overflow:hidden;
  border:1px solid var(--rule);margin:0 auto;background:var(--paper-raised);
}
.bubble-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.bubble figcaption{font-size:12.5px;color:var(--text-muted);margin-top:14px;font-style:italic;font-family:var(--serif);line-height:1.4;}

.bubble:nth-child(4n+1) .bubble-photo{transform:translateY(-10px);}
.bubble:nth-child(4n+2) .bubble-photo{width:140px;height:140px;}
.bubble:nth-child(4n+3) .bubble-photo{width:210px;height:210px;}
.bubble:nth-child(4n+4) .bubble-photo{width:155px;height:155px;transform:translateY(18px);}

@media (max-width:600px){
  .bubble,.bubble-photo{width:130px;height:130px;}
  .bubble:nth-child(4n+2) .bubble-photo,
  .bubble:nth-child(4n+3) .bubble-photo,
  .bubble:nth-child(4n+4) .bubble-photo{width:130px;height:130px;transform:none;}
}

/* ---------- BITESIZE TIMELINE ---------- */
.timeline{border-left:1px solid var(--rule);padding-left:32px;max-width:680px;}
.tl-item{position:relative;padding-bottom:40px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:"";position:absolute;left:-37px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--crimson);}
.tl-date{font-size:13px;color:var(--text-muted);margin-bottom:6px;}
.tl-item h3{font-size:19px;margin-bottom:8px;}
.tl-item p{font-size:15px;color:var(--text);}
.tl-item a{color:var(--crimson);text-decoration:none;font-weight:500;font-size:14px;}
.tl-item a:hover{text-decoration:underline;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
@media (max-width:720px){.contact-grid{grid-template-columns:1fr;}}
address{font-style:normal;font-size:15px;color:var(--text);line-height:1.8;}
.contact-grid h3{font-size:20px;margin-bottom:4px;}
.contact-grid .role{color:var(--crimson);font-size:14px;margin-bottom:20px;}
.contact-links a{display:block;color:var(--ink-soft);text-decoration:none;font-size:15px;margin-top:6px;}
.contact-links a:hover{text-decoration:underline;}

footer.site-footer{padding:32px 0;text-align:center;font-size:13px;color:var(--text-muted);}
footer.site-footer a{color:var(--text-muted);}

.admin-empty-note{
  background:#FFF3CD;border:1px solid #FFE69C;color:#664D03;
  padding:14px 18px;font-size:14px;border-radius:3px;max-width:600px;
}