/* ==========================================================================
   Sayak Bera — portfolio site stylesheet
   Single shared file for layout (minima-style header/nav/footer), dark mode,
   and every page's component styles. Loaded once by every page so nothing
   is duplicated or out of sync between pages.
   ========================================================================== */

:root {
  --text-color: #111;
  --bg-color: #fdfdfd;
  --grey-color: #828282;
  --grey-color-dark: #424242;
  --spacing-unit: 30px;
}

* { box-sizing: border-box; }
html { font-size: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--bg-color);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure { margin: 0 0 15px 0; }
img { max-width: 100%; vertical-align: middle; }
a { color: #2a7ae2; text-decoration: none; }
a:hover { text-decoration: underline; }

.wrapper { max-width: 840px; margin: 0 auto; padding: 0 30px; }
@media screen and (max-width: 800px) { .wrapper { max-width: 100%; padding: 0 20px; } }

/* Wider wrapper used for the homepage's main content so it uses more of a
   landscape monitor, while the header/footer keep the standard width. */
.wrapper-wide { max-width: min(1400px, 94vw); margin: 0 auto; padding: 0 40px; }
@media screen and (max-width: 800px) { .wrapper-wide { padding: 0 20px; } }

/* ---------------------------------------------------------------------- */
/* Site header / nav                                                      */
/* ---------------------------------------------------------------------- */
.site-header { border-bottom: 1px solid #e8e8e8; min-height: 55.95px; position: relative; background-color: #fff; }

.site-title { font-size: 1.4rem; font-weight: 700; line-height: 54px; letter-spacing: -0.5px; margin-bottom: 0; float: left; color: #111 !important; text-decoration: none; }
.site-title:hover { text-decoration: none; }

.site-nav { float: right; line-height: 54px; }
.site-nav .nav-trigger { display: none; }
.site-nav .menu-icon { display: none; }
.site-nav .page-link { color: var(--text-color); line-height: 1.5; margin-left: 24px; font-weight: 500; }

@media screen and (max-width: 600px) {
  .site-nav {
    position: absolute; top: 9px; right: 15px;
    background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px;
    text-align: right; z-index: 10;
  }
  .site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; }
  .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
  .site-nav .menu-icon > svg { fill: #424242; }
  .site-nav input ~ .trigger { clear: both; display: none; }
  .site-nav input:checked ~ .trigger { display: block; padding-bottom: 5px; }
  .site-nav .page-link { display: block; padding: 5px 10px; margin: 0; }
}

/* ---------------------------------------------------------------------- */
/* Page content                                                           */
/* ---------------------------------------------------------------------- */
.page-content { padding: var(--spacing-unit) 0; flex: 1; }

/* ---------------------------------------------------------------------- */
/* Site footer                                                            */
/* ---------------------------------------------------------------------- */
.site-footer { border-top: 1px solid #e8e8e8; padding: var(--spacing-unit) 0; background-color: #fff; margin-top: 40px; }
.footer-heading { font-size: 1.3rem; margin-bottom: 15px; }
.contact-list { list-style: none; margin-left: 0; padding-left: 0; }
.footer-col-wrapper { display: flex; flex-wrap: wrap; gap: 30px; font-size: 15px; color: var(--grey-color); }
.footer-col { flex: 1; min-width: 220px; }
.footer-col-3 { flex: 1.4; }
@media screen and (max-width: 600px) { .footer-col-wrapper { flex-direction: column; } }

.footer-socials { display: flex; gap: 16px; margin-top: 16px; align-items: center; }
.footer-socials .social-icon { display: inline-flex; }

/* Shared "social icon" styling used in both the Get In Touch card and the footer */
.social-icon { transition: transform 0.2s ease; }
.social-icon:hover { transform: scale(1.1); }
.social-icon.icon-github { color: #181717; }
.social-icon.icon-linkedin { color: #0A66C2; }
.social-icon.icon-youtube { color: #FF0000; }
.social-icon.icon-x { color: #000000; }

hr { border: 0; border-top: 1px solid #e8e8e8; margin: 30px 0; }
::selection { background: #d6e6ff; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #0A66C2; outline-offset: 2px; }

/* ---------------------------------------------------------------------- */
/* Theme toggle button (single definition, single script in theme.js)     */
/* ---------------------------------------------------------------------- */
.theme-toggle-btn {
  position: fixed; bottom: 20px; right: 20px;
  background: #333; color: #fff; border: none; border-radius: 50px;
  padding: 12px 18px; cursor: pointer; z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: background 0.3s;
  font-weight: bold; font-size: 0.9em;
}

/* ==========================================================================
   HOME PAGE — hero + layout grid (UPDATED)
   ========================================================================== */
.hero-container { 
  display: grid; 
  grid-template-columns: 300px 1fr 340px; 
  grid-template-areas: "left middle right";
  gap: 40px; 
  margin-bottom: 60px; 
  align-items: start; 
}

/* Left Column: Fixed */
.hero-left { grid-area: left; display: flex; flex-direction: column; position: sticky; top: 30px; }
.hero-img { width: 100%; height: auto; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-bottom: 15px; }
.resume-btn { text-align: center; width: 100%; padding: 12px 0; background-color: #0A66C2; color: white !important; text-decoration: none; border-radius: 6px; font-weight: bold; transition: all 0.2s; display: inline-block; box-sizing: border-box; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.resume-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); text-decoration: none; }

/* Middle Column: Scrolling */
.hero-middle { grid-area: middle; display: flex; flex-direction: column; gap: 30px; }
.hero-bio p { margin: 0 0 16px 0; line-height: 1.7; }
.hero-bio p:last-child { margin-bottom: 0; }

.highlights-list { list-style-type: none; padding: 0; margin: 0; }
.highlights-list li { margin-bottom: 15px; padding-left: 24px; position: relative; line-height: 1.6; }
.highlights-list li::before { content: "▹"; position: absolute; left: 0; color: #0A66C2; font-weight: bold; font-size: 1.2em; top: -2px; }

/* Resume Info Cards */
.resume-section { display: flex; flex-direction: column; gap: 15px; }
.info-card { background-color: #fcfcfc; border: 1px solid #eaeaea; border-radius: 8px; padding: 15px 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.info-card h4 { margin: 0 0 5px 0; font-size: 1.05em; color: #222; }
.card-subtitle { margin: 0; font-size: 0.9em; color: #555; display: flex; justify-content: space-between; flex-wrap: wrap; }
.card-subtitle span { font-weight: bold; color: #0A66C2; }
.preprint-card p { margin: 0; font-size: 0.95em; line-height: 1.6; }

/* Right Column: Fixed */
.hero-right { grid-area: right; display: flex; flex-direction: column; position: sticky; top: 30px; }
.theme-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px; background-color: #fcfcfc; border-radius: 12px; border: 1px solid #eaeaea; width: 100%; box-sizing: border-box; }
.theme-card h3 { margin-top: 0; margin-bottom: 15px; }
.theme-card p { margin: 5px 0; line-height: 1.6; }
.social-icon.icon-scholar { color: #4285F4; }

/* Website Buttons with Logos */
.website-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 20px; font-size: 0.85em; font-weight: 600; text-decoration: none; transition: all 0.2s; border: 1px solid transparent;
}
.btn-logo { width: 18px; height: 18px; object-fit: contain; }
.website-btn:hover { transform: translateY(-1px); text-decoration: none; }

/* Classic Math (Light Red-ish) */
.btn-math { background-color: #fde8e8; color: #c81e1e !important; border-color: #f8b4b4; }
.btn-math:hover { background-color: #c81e1e; color: #ffffff !important; }

/* My Photography (Light Green-ish) */
.btn-photo { background-color: #e8f5e9; color: #2e7d32 !important; border-color: #a5d6a7; }
.btn-photo:hover { background-color: #2e7d32; color: #ffffff !important; }

/* Copyright Statement */
.copyright { text-align: center; font-size: 0.85em; color: var(--grey-color); margin-top: 40px; padding-top: 20px; border-top: 1px solid #eaeaea; }

/* Threshold 1 (Tablets) */
@media (max-width: 1150px) {
  .hero-container {
    grid-template-columns: 300px 1fr;
    grid-template-areas: "left middle" "right right";
  }
  .hero-right { position: static; align-items: center; margin-top: 20px; }
  .theme-card { max-width: 500px; }
}

/* Threshold 2 (Smartphones) */
@media (max-width: 850px) {
  .hero-container {
    grid-template-columns: 1fr;
    justify-items: center; 
    grid-template-areas: "left" "middle" "right";
  }
  .hero-left { position: static; max-width: 500px; width: 100%; }
  .hero-middle { text-align: center; }
  .card-subtitle { justify-content: center; gap: 10px; }
}

/* ==========================================================================
   ACTIVITY PAGE
   ========================================================================== */
.activity-intro { text-align: center; margin-bottom: 50px; color: #555; font-size: 1.1em; }
.section-title { border-bottom: 2px solid #eaeaea; padding-bottom: 10px; margin-top: 40px; margin-bottom: 30px; font-size: 1.5em; color: #222; }

.leadership-card { border-left: 4px solid #F4B400; padding: 15px 20px; background-color: #fcfcfc; margin-bottom: 20px; border-radius: 0 8px 8px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.leadership-role { margin: 0 0 5px 0; font-size: 1.2em; color: #333; }
.leadership-org { font-weight: bold; color: #0A66C2; text-decoration: none; }
.leadership-org:hover { text-decoration: underline; }
.leadership-desc { margin: 10px 0 0 0; color: #555; line-height: 1.6; }
.leadership-date { font-size: 0.85em; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }

.featured-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 40px; }
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); background-color: #000; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-caption { text-align: center; font-size: 0.9em; color: #666; margin-top: 10px; font-style: italic; }

.arts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 40px; }
.art-card { border: 1px solid #eaeaea; border-radius: 10px; padding: 20px; background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.2s; }
.art-card:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.08); }
.art-icon { font-size: 2em; margin-bottom: 10px; display: inline-block; }
.art-title { margin: 0 0 10px 0; color: #222; }
.art-desc { font-size: 0.95em; color: #666; line-height: 1.5; margin-bottom: 15px; }

details.video-dropdown { background-color: #f9f9f9; border-radius: 6px; padding: 10px; margin-top: 10px; }
details.video-dropdown summary { font-weight: 600; cursor: pointer; outline: none; color: #E1306C; font-size: 0.9em; display: flex; align-items: center; }
details.video-dropdown summary::before { content: "▶"; margin-right: 8px; font-size: 0.8em; }
.video-list { list-style: none; padding-left: 0; margin: 10px 0 0 0; }
.video-list li { margin-bottom: 8px; font-size: 0.9em; border-bottom: 1px solid #eaeaea; padding-bottom: 8px; }
.video-list li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.video-list a { color: #0A66C2; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.video-list a:hover { color: #004182; text-decoration: underline; }

.recreation-box { background-color: #f9f9f9; padding: 20px; border-radius: 8px; border: 1px solid #eaeaea; margin-top: 30px; }
.recreation-box p { margin: 0; color: #555; }

/* ==========================================================================
   PHOTOGRAPHY PAGE
   ========================================================================== */
.photography-intro { text-align: center; margin-bottom: 50px; color: #555; font-size: 1.1em; }

.action-button { display: inline-flex; align-items: center; gap: 10px; background-color: #fcfcfc; border: 1px solid #eaeaea; padding: 10px 20px; border-radius: 30px; text-decoration: none; font-weight: bold; transition: all 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.action-button:hover { transform: translateY(-2px); text-decoration: none; }
.archive-button { color: #333; margin-top: 15px; }
.archive-button:hover { background-color: #333; color: white; }
.iitk-button { color: #0A66C2; font-size: 0.9em; }
.iitk-button:hover { background-color: #0A66C2; color: white; }

.gallery-section { margin-bottom: 60px; }
.gallery-title { border-bottom: 2px solid #eaeaea; padding-bottom: 10px; margin-bottom: 20px; font-size: 1.5em; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }

.hero-img.gallery-hero { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 8px; margin-bottom: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hero-img.gallery-hero:hover { transform: scale(1.02); box-shadow: 0 5px 15px rgba(0,0,0,0.15); z-index: 10; position: relative; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; }
.gallery-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.gallery-img:hover { transform: scale(1.04); box-shadow: 0 5px 15px rgba(0,0,0,0.15); z-index: 10; position: relative; }
@media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(1, 1fr); } }

/* ==========================================================================
   RESEARCH PAGE (UPDATED - Vertical Stack)
   ========================================================================== */
.research-container { max-width: 900px; margin: 0 auto; } /* Optimized width for comfortable reading */
.research-intro { text-align: center; margin-bottom: 60px; color: #555; font-size: 1.1em; max-width: 760px; margin-left: auto; margin-right: auto; }

.research-section { 
  display: flex; 
  flex-direction: column; /* Stacks image on top, text on bottom */
  align-items: flex-start; 
  gap: 25px; /* Spacing between the image and the text */
  margin-bottom: 80px; 
  width: 100%;
}
.research-section.reverse { 
  flex-direction: column; /* Ignores the previous reverse class so everything is uniform */
}

.research-media { width: 100%; display: block; }
.research-info { width: 100%; display: block; }

.research-img { 
  width: 100%; 
  aspect-ratio: 16 / 9; /* Strictly 16:9 */
  object-fit: cover; 
  border-radius: 12px; 
  box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
  transition: transform 0.3s ease; 
  display: block; 
  margin: 0; 
}
.research-img:hover { transform: translateY(-3px); }

.research-title { color: #222; margin-top: 0; border-bottom: 2px solid #eaeaea; padding-bottom: 10px; margin-bottom: 15px; font-size: 1.6em; }
.research-description { line-height: 1.7; color: #444; }
.research-description p:last-child { margin-bottom: 0; }

/* Responsive threshold: Stacks and center-aligns everything below the image */
@media (max-width: 950px) {
  .research-section, .research-section.reverse { 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
  }
  .research-media, .research-info { 
    flex: 1 1 auto; 
    width: 100%; 
    max-width: 800px; 
  }
  .research-img { 
    height: auto; 
    aspect-ratio: 16 / 9; /* Prevents the image from being distorted when stacked */
  }
}

/* ==========================================================================
   TEACHING PAGE
   ========================================================================== */
.teaching-intro { text-align: center; margin-bottom: 50px; color: #555; font-size: 1.1em; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.7; }
.page-subheading { border-bottom: 2px solid #eaeaea; padding-bottom: 10px; margin-top: 40px; }

.teaching-card { padding: 15px 20px; background-color: #fcfcfc; margin-bottom: 25px; border-radius: 0 8px 8px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.teaching-card h3 { margin-top: 0; margin-bottom: 5px; }
.teaching-card h3 a { text-decoration: none; color: inherit; }
.teaching-role { margin: 0 0 10px 0; font-weight: bold; color: #555; }
.teaching-card ul { margin: 0; padding-left: 20px; line-height: 1.6; }
.teaching-card.iitk { border-left: 4px solid #4285F4; }
.teaching-card.techno { border-left: 4px solid #E1306C; }
.teaching-card.ju { border-left: 4px solid #34A853; margin-bottom: 40px; }

.mentorship-box { background-color: #f9f9f9; padding: 20px; border-radius: 8px; border: 1px solid #eaeaea; }
.mentorship-box ol { margin: 0; padding-left: 20px; line-height: 1.8; }

/* ==========================================================================
   TEACHING PAGE — Classic Mathematics Highlight Box
   ========================================================================== */
.cm-highlight-box {
  background-color: #fdf6f6;
  border: 1px solid #f8b4b4;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 4px 12px rgba(200, 30, 30, 0.05);
}
.cm-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f8b4b4;
  padding-bottom: 15px;
}
.cm-logo-large {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.cm-title-group h3 {
  margin: 0 0 5px 0;
  color: #c81e1e;
  font-size: 1.5em;
}
.cm-subtitle {
  margin: 0;
  color: #c81e1e;
  font-weight: 600;
  font-size: 0.9em;
  opacity: 0.8;
}
.cm-body p {
  line-height: 1.7;
  margin-bottom: 15px;
  color: #444;
}
.cm-body p:last-of-type {
  margin-bottom: 0;
}

/* ==========================================================================
   DARK MODE — single consolidated set of overrides for every page
   ========================================================================== */
body.dark-theme { background-color: #121212; color: #e0e0e0; }
body.dark-theme a { color: #64b5f6 !important; }
body.dark-theme svg { fill: #e0e0e0 !important; }
body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme h4,
body.dark-theme p, body.dark-theme span, body.dark-theme strong, body.dark-theme em,
body.dark-theme li, body.dark-theme summary, body.dark-theme div { color: #e0e0e0 !important; }

/* Header + footer chrome */
body.dark-theme .site-header,
body.dark-theme .site-footer { background-color: #121212 !important; border-color: #333 !important; }
body.dark-theme .site-title { color: #e0e0e0 !important; }
@media (max-width: 600px) {
  body.dark-theme .site-nav { background-color: #1e1e1e !important; border-color: #333 !important; }
}
body.dark-theme .site-nav .menu-icon > svg path { fill: #e0e0e0 !important; }

/* Cards / panels across every page */
body.dark-theme .theme-card,
body.dark-theme .leadership-card,
body.dark-theme .art-card,
body.dark-theme .teaching-card,
body.dark-theme .recreation-box,
body.dark-theme .mentorship-box,
body.dark-theme details.video-dropdown,
body.dark-theme details.species-checklist {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

/* Borders / dividers */
body.dark-theme .section-header,
body.dark-theme .section-title,
body.dark-theme .research-title,
body.dark-theme .gallery-title,
body.dark-theme .page-subheading,
body.dark-theme hr,
body.dark-theme .video-list li { border-color: #333 !important; }

/* Buttons / badges (leave the blue resume button as-is) */
body.dark-theme .action-button:not(.resume-btn),
body.dark-theme .archive-button,
body.dark-theme .iitk-button {
  background-color: #1e1e1e !important;
  color: #64b5f6 !important;
  border-color: #444 !important;
}
body.dark-theme .action-button:not(.resume-btn):hover { background-color: #333 !important; }

body.dark-theme .theme-toggle-btn { background: #f1f1f1; color: #333; }

/* Fix Text Selection Visibility in Dark Mode */
body.dark-theme ::selection { background: #004d99; color: #ffffff; }

/* Copyright Border */
body.dark-theme .copyright { border-color: #333; }

/* Info Cards inside Resume Sections */
body.dark-theme .info-card { background-color: #1e1e1e !important; border-color: #333 !important; }
body.dark-theme .card-subtitle span { color: #64b5f6 !important; }

/* Website Buttons Dark Mode Adaptations */
body.dark-theme .btn-math { background-color: #4a1919; color: #ff8a80 !important; border-color: #6b2626; }
body.dark-theme .btn-math:hover { background-color: #ff8a80; color: #121212 !important; }

body.dark-theme .btn-photo { background-color: #1b3a1e; color: #81c784 !important; border-color: #29562d; }
body.dark-theme .btn-photo:hover { background-color: #81c784; color: #121212 !important; }

body.dark-theme .highlights-list li::before { color: #64b5f6; }

/* Classic Mathematics Box Dark Mode Adjustments */
body.dark-theme .cm-highlight-box {
  background-color: #2a1111 !important;
  border-color: #5c1b1b !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
body.dark-theme .cm-header {
  border-bottom-color: #5c1b1b !important;
}
body.dark-theme .cm-title-group h3,
body.dark-theme .cm-subtitle {
  color: #ff8a80 !important;
}
body.dark-theme .cm-body p {
  color: #e0e0e0 !important;
}