/* Zak Elamrani — Academic website (Ana-style layout)
   Self-contained, no build step. */

:root{
  --bg: #ffffff;
  --bg2: #f6f7f9;
  --text: #111827;
  --muted: #4b5563;
  --border: #e5e7eb;
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --card: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.06);
  --radius: 12px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --bg2: #0f172a;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --border: rgba(255,255,255,.10);
    --link: #93c5fd;
    --link-hover: #bfdbfe;
    --card: #0b1220;
    --shadow: 0 1px 2px rgba(0,0,0,.35);
  }
}

/* Explicit themes override auto */
html[data-theme="light"]{
  --bg: #ffffff;
  --bg2: #f6f7f9;
  --text: #111827;
  --muted: #4b5563;
  --border: #e5e7eb;
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --card: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.06);
}
html[data-theme="dark"]{
  --bg: #0b1220;
  --bg2: #0f172a;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: rgba(255,255,255,.10);
  --link: #93c5fd;
  --link-hover: #bfdbfe;
  --card: #0b1220;
  --shadow: 0 1px 2px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{color:var(--link); text-decoration:none}
a:hover{color:var(--link-hover); text-decoration:underline}
p{margin:0 0 1rem}
small{color:var(--muted)}
hr{
  border:none;
  border-top:1px solid var(--border);
  margin:2rem 0;
}

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.15rem;
}

/* Top nav */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .nav,
@media (prefers-color-scheme: dark){
  .nav{ background: rgba(11,18,32,.78); }
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 0;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}

.nav-links a{
  color:var(--text);
  text-decoration:none;
  font-size:.95rem;
  padding:.25rem .35rem;
  border-radius:8px;
}
.nav-links a:hover{
  background:var(--bg2);
  text-decoration:none;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:10px;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.icon-btn:hover{background:var(--bg2)}
.icon{
  width:24px;
  height:24px;
  fill:currentColor;
  color:var(--text);
}

.dropdown{position:relative}
.dropdown-menu{
  position:absolute;
  right:0;
  top:42px;
  min-width:170px;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding:.4rem;
  display:none;
}
.dropdown-menu button{
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  padding:.55rem .6rem;
  border-radius:10px;
  color:var(--text);
  font-size:.95rem;
  cursor:pointer;
}
.dropdown-menu button:hover{background:var(--bg2)}
.dropdown.open .dropdown-menu{display:block}

main{padding: 2rem 0 3rem}

/* -----------------------------
   Ana-style INTRO (top section)
------------------------------ */
.intro{
  padding: 0 0 2.25rem;
}

/* Desktop: profile left, content right */
.intro-grid{
  display:grid;
  grid-template-columns: 330px 1fr;
  gap: 3.25rem;
  align-items:start;
}

/* Left profile column */
.profile{
  text-align:center;
}

.avatar{
  width:300px;
  height:450px;
  border-radius:0px;
  object-fit:cover;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:var(--bg2);
}

@media (max-width: 520px){
  .avatar{
    width: 220px;
    height: 330px;
  }
}

.profile-name{
  margin: 1.05rem 0 0;
  font-size: 2.35rem;
  line-height: 1.12;
  letter-spacing: .2px;
}

.profile-role{
  margin: .6rem 0 0;
  font-weight: 500;
  color: var(--muted);
}

.profile-affil{
  margin: .35rem 0 0;
  font-weight: 600;
}

.profile-actions{
  margin-top: 1.35rem;
  display:flex;
  gap: 1.15rem;
  justify-content:center;
  flex-wrap:wrap;
}

.action-link{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-weight:600;
  color: var(--link);
  text-decoration:none;
  font-size: 1.02rem;
}
.action-link:hover{
  color: var(--link-hover);
  text-decoration: underline;
}

.action-icon{
  width:24px;
  height:24px;
  fill: currentColor;
}

/* Right column */
.bio p{
  max-width: 70ch;
}

/* Interests + Education (NO framed cards) */
.bio-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 2.2rem;
}

.bio-block h2{
  margin: 0 0 .65rem;
  font-size: 1.25rem;
}

/* Generic lists */
.list{
  margin:0;
  padding-left: 1.1rem;
}
.list li{margin:.25rem 0}

/* Education list with cap icons */
.edu-list{
  list-style:none;
  margin:0;
  padding:0;
}
.edu-list li{
  display:flex;
  gap:.75rem;
  margin: .65rem 0;
  align-items:flex-start;
}
.edu-icon{
  width:24px;
  height:24px;
  flex: 0 0 auto;
  fill: currentColor;
  color: var(--muted);
  margin-top: .18rem;
}
.edu-degree{
  font-weight:600;
}
.edu-school{
  color: var(--muted);
  font-size:.95rem;
  margin-top:.05rem;
}

/* Ensure Working Papers doesn't show on the first screen (desktop) */
@media (min-width: 900px){
  .intro{
    min-height: calc(100vh - 72px); /* sticky nav height approx */
  }
}

/* Sections */
.section{
  padding: 2.5rem 0 0;
  scroll-margin-top: 90px; /* anchor offset for sticky nav */
}
.section h2{
  font-size:1.55rem;
  margin:0 0 1rem;
}

/* Publications list (closer to Ana: no big grey abstract box) */
.pub{
  padding: 1.05rem 0 1.35rem;
  border-top: 1px solid var(--border);
}
.pub:first-of-type{border-top:none}

.pub-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .65rem;
  align-items:baseline;
  color:var(--muted);
  font-size:.95rem;
  margin-bottom:.25rem;
}

.pub-title{
  margin:.15rem 0 .35rem;
  font-size:1.15rem;
  line-height:1.35;
}

/* remove framed abstract preview */
.pub-summary{
  margin:.25rem 0 .6rem;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 1rem;
}

/* Make the preview read like plain text, but still clickable */
.pub-summary a{
  color: var(--text);
  text-decoration:none;
}
.pub-summary a:hover{
  color: var(--link-hover);
  text-decoration:underline;
}

/* Keep your button styling globally, but make list-page buttons look like simple links */
.pub .pub-links{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
}
.pub .pub-links .btn{
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
  border-radius:0;
  color: var(--link);
  font-size:.95rem;
}
.pub .pub-links .btn:hover{
  background:transparent;
  text-decoration:underline;
}

/* Button baseline (used elsewhere like publication pages + modal) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius: 10px;
  padding: .35rem .65rem;
  font-size:.92rem;
  text-decoration:none;
  box-shadow:var(--shadow);
}
.btn:hover{background:var(--bg2); text-decoration:none}

/* Publication page layout */
.pub-page{
  display:grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  padding-top: 1rem;
}
.pub-page h1{
  margin:.3rem 0 .6rem;
  line-height:1.2;
}
.badge{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border);
  background:var(--bg2);
  border-radius:999px;
  padding:.25rem .55rem;
  font-size:.85rem;
  color:var(--muted);
}
.aside-card{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding: 1.05rem 1.1rem;
}
.aside-card h3{margin:0 0 .5rem}
.aside-avatar{
  width:84px;
  height:84px;
  border-radius:999px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  object-fit:cover;
  background:var(--bg2);
}
.aside-name{
  font-weight:800;
  margin:.75rem 0 0;
}
.aside-role{color:var(--muted); margin:.15rem 0 .6rem; font-weight:600}
.related ul{margin:.35rem 0 0; padding-left:1.1rem}
.related li{margin:.25rem 0}

/* Footer */
.footer{
  margin-top: 3rem;
  padding: 2.25rem 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size:.92rem;
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:none;
  align-items:center;
  justify-content:center;
  padding:1rem;
  z-index:200;
}
.modal.open{display:flex}
.modal-card{
  width:min(680px, 100%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding:1rem 1rem 1.05rem;
}
.modal-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.modal-top h3{margin:.25rem 0}
pre{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:14px;
  padding: .85rem .95rem;
  overflow:auto;
  font-family:var(--mono);
  font-size:.9rem;
  margin:.75rem 0 1rem;
}
.modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:flex-end;
}

/* Contact list tweak */
.contact-list{
  padding-left: 1.1rem; /* keep bullets like Ana */
}

/* Responsive */
@media (max-width: 860px){
  .intro-grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .bio-grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .pub-page{grid-template-columns:1fr}
  .nav-inner{flex-wrap:wrap}
}

@media (max-width: 520px){
  .nav-links{gap:.5rem}
  .avatar{width:190px; height:190px}
  .profile-name{font-size:2.05rem}
}

/* Push content down below the sticky top bar */
main#main.container{
  padding: 4rem 1.15rem 0rem !important; /* top | left/right | bottom */
}

/* -----------------------------
   NAV: subtle shadow + always light
------------------------------ */
.nav{
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}

.nav-links a{
  color: #111827 !important;
}
.nav-links a:hover{
  background: rgba(0,0,0,.05) !important;
}

.icon-btn{
  background:#fff !important;
  border: 1px solid rgba(0,0,0,.14) !important;
}
.icon{
  color:#111827 !important;
}

.dropdown-menu{
  background:#fff !important;
  border: 1px solid rgba(0,0,0,.14) !important;
}
.dropdown-menu button{
  color:#111827 !important;
}
.dropdown-menu button:hover{
  background: rgba(0,0,0,.05) !important;
}

/* -----------------------------
   NAV SEARCH
------------------------------ */
.nav-search{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.nav-search input{
  height:36px;
  width:240px;
  padding: 0 .75rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  color: #111827;
  outline: none;
}

.nav-search input::placeholder{
  color:#6b7280;
}

.nav-search input:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.nav-search-count{
  font-size:.9rem;
  color:#6b7280;
  min-width: 90px;
}

@media (max-width: 860px){
  .nav-search input{ width: 190px; }
  .nav-search-count{ display:none; }
}

@media (max-width: 520px){
  .nav-search input{ width: 150px; }
}

/* -----------------------------
   Alternating section backgrounds (white / light gray)
------------------------------ */

/* prevent occasional horizontal scroll from 100vw bands */
body{ overflow-x: hidden; }

.section{
  padding: 2.5rem 0 !important;    /* gives each band some breathing room */
  position: relative;
  z-index: 0;
}

.section::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform: translateX(-50%);
  background: transparent;
  z-index:-1;
}

.section.alt::before{
  background: var(--bg2);
}

/* Icon-only search: just an icon button like your screenshot */
.search-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.18);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top: 72px; /* below nav */
  z-index: 250;
}
.search-overlay[hidden]{ display:none; }

.search-card{
  width: min(720px, calc(100% - 2rem));
  background:#fff;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
  padding: .85rem;
}

.search-card input{
  width:100%;
  height:44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  padding: 0 .9rem;
  font-size: 1rem;
  outline:none;
}
.search-card input:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}

.search-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-top: .6rem;
  color:#6b7280;
  font-size: .95rem;
}

/* Bigger typography for page content (not the nav) */
main#main{
  font-size: 18px;   /* try 18px or 19px */
}

/* -----------------------------
   Contact section (Ana-style)
------------------------------ */
.contact-row{
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 2rem;
  align-items: start;
}

.contact-title{
  margin: 0;
  font-size: 2rem;       /* makes "Contact" stand out on the left */
  font-weight: 700;
}

.contact-items{
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding-top: .35rem;
}

.contact-item{
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  color: var(--text);
  text-decoration: none;
}

.contact-item:hover{
  text-decoration: none;
}

.contact-item a{ text-decoration: none; }

.contact-icon{
  width: 22px;
  height: 22px;
  fill: currentColor;
  color: #111;           /* keep icons dark like Ana */
  flex: 0 0 auto;
  opacity: .85;
}

/* On dark mode, keep Contact icons dark too (since your band is light gray) */
html[data-theme="dark"] .contact-icon{
  color: #111;
}

/* Make the email blue like a link */
.contact-item[href] span{
  color: var(--link);
}
.contact-item[href]:hover span{
  color: var(--link-hover);
  text-decoration: underline;
}

/* Mobile: stack */
@media (max-width: 720px){
  .contact-row{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .contact-title{
    font-size: 1.75rem;
  }
}

.contact-title{ font-size: 3rem; }
.contact-item{ font-size: 1.4rem; }
.contact-icon{ width: 34px; height: 34px; }

/* Make the CONTACT band taller */
#contact.section{
  padding: 8rem 0 !important;   /* increase/decrease this */
}

/* FORCE bigger Contact title + bigger items */
#contact .contact-title{
  font-size: 2rem !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

#contact .contact-item{
  font-size: 1.35rem !important;
}

#contact .contact-icon{
  width: 34px !important;
  height: 34px !important;
}

/* Footer: no separator line, keep spacing */
.footer{
  border-top: none !important;
  padding: 3rem 0 !important;  /* keeps the buffer */
  background: transparent !important;
}

/* Footer layout */
.footer-inner{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

/* Back-to-top arrow */
.back-to-top{
  width:56px;
  height:56px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  text-decoration:none;
}
.back-to-top svg{
  width:30px;
  height:30px;
  fill: #6b7280; /* soft gray */
}
.back-to-top:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

/* Big section titles like Contact, but NOT bold */
#working-papers h2,
#work-in-progress h2{
  font-size: 3.2rem !important; /* match your contact-title size */
  font-weight: 400 !important;  /* remove bold */
  line-height: 1.05 !important;
  margin-bottom: 1.5rem !important;
} 

/* Nav: active link turns blue */
.nav-links a.is-active{
  color: var(--link) !important;
}

/* -----------------------------
   Two-column section layout (Ana-style)
   Left big title, right content
------------------------------ */
.section-row{
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 2.5rem;
  align-items: start;
}

.section-title{
  margin: 0;
  font-size: 3.2rem;
  font-weight: 400;   /* not bold */
  line-height: 1.05;
}

.section-body{
  padding-top: .45rem;
}

/* Ensure pub list starts clean inside section-body */
.section-body .pub:first-of-type{
  border-top: none;
  padding-top: 0;
}

/* Mobile: stack */
@media (max-width: 860px){
  .section-row{
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .section-title{
    font-size: 2.2rem;
  }
  .section-body{
    padding-top: 0;
  }
}

/* Back-to-top: no frame */
.back-to-top{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 56px;
  height: 56px;
}
.back-to-top:hover{
  background: transparent !important;
  box-shadow: none !important;
}

.back-to-top:hover svg{
  fill: #111827;
}

/* Contact title matches other section titles */
#contact .contact-title{
  font-size: 3.2rem !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

@media (min-width: 861px){
  .intro .bio-grid{
    grid-template-columns: 270px 1fr !important; /* Interests narrower */
  }
}

/* Contact icons: softer color in dark mode */
html[data-theme="dark"] #contact .contact-icon{
  color: #374151 !important;   /* slate-gray */
  opacity: .85 !important;
}

/* If you use Auto theme and want the same when OS is dark */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) #contact .contact-icon{
    color: #374151 !important;
    opacity: .85 !important;
  }
}

/* Force all section titles to match */
.section-title{
  font-size: 3.2rem !important;
  font-weight: 400 !important;  /* not bold */
  line-height: 1.05 !important;
  margin: 0 0 1.5rem 0 !important;
}

/* Publication pages: make top-left name readable in dark mode (and auto-dark) */
html[data-theme="dark"] .brand a{
  color: #111827 !important;         /* dark text on your forced-light nav */
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .brand a{
    color: #111827 !important;
  }
}

/* Also ensure hover is visible */
html[data-theme="dark"] .brand a:hover{
  color: #1d4ed8 !important;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .brand a:hover{
    color: #1d4ed8 !important;
  }
}

.pub-venue{
  margin-top: .15rem;
  color: var(--muted);  
  font-size: .95rem;
}

.pub-venue{ font-style: italic; }

.btn-outline{
  background: transparent !important;
  border: 1.5px solid currentColor !important;  /* border matches text */
  box-shadow: none !important;
}

.btn.btn-outline{
  color: var(--link) !important;
}
.btn.btn-outline:hover{
  color: var(--link-hover) !important;
}

/* Outline button that still shows a frame inside .pub-links (list view) */
.pub .pub-links .btn.btn-outline{
  color: var(--link) !important;
  border: 1.5px solid currentColor !important;  /* border matches text */
  background: transparent !important;
  box-shadow: none !important;

  padding: .25rem .7rem !important;             /* restore button padding */
  border-radius: 10px !important;               /* restore rounded corners */
  display: inline-flex !important;
  align-items: center !important;
}
.pub .pub-links .btn.btn-outline:hover{
  color: var(--link-hover) !important;
}

/* Journal outlined pill (works even though list-view strips .btn styles) */
.pub .pub-links a.journal-btn{
  display: inline-flex !important;
  align-items: center !important;

  color: var(--link) !important;
  border: 1.5px solid currentColor !important;
  background: transparent !important;
  box-shadow: none !important;

  padding: .25rem .7rem !important;
  border-radius: 10px !important;

  text-decoration: none !important;
  line-height: 1.2 !important;
}

.pub .pub-links a.journal-btn:hover{
  color: var(--link-hover) !important;
  text-decoration: none !important;
}

/* Footer can participate in the white/gray band alternation */
.footer{
  position: relative;
  border-top: none !important;     /* keep your no-separator rule */
  padding: 3rem 0 !important;      /* keep the buffer */
  background: transparent !important;
  z-index: 0;
}

.footer::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform: translateX(-50%);
  background: transparent;
  z-index:-1;
}

.footer.alt-footer::before{
  background: var(--bg2);          /* same as your section alt gray */
}