@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================
   MONOCHROME SNOW
   Light/white content, B&W photo full-page background,
   transparent navbar, yellow-orange gradient accents
   ============================================ */

/* --- Typography --- */
h1, h2, h3, h4,
.profile-name,
.profile-title,
.theme-card-title,
.impact-kpi-value,
.experience-title,
.education-title,
.post-title,
.about-card-navbar-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

body,
#content,
.page-content,
.resource-card,
.impact-kpi,
.mentoring-card {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- Core overrides --- */
:root {

  /* Orange/Amber */
  --theme-accent: #f59e0b;
  --theme-accent-rgb: 245, 158, 11;
  --theme-accent-light: #fbbf24;
  --theme-accent-dark: #d97706;
  --theme-gradient-start: #f59e0b;
  --theme-gradient-end: #f94b16;
  --theme-gradient-hover-start: #d97706;
  --theme-gradient-hover-end: #ea1e0c;

  

  /* Bootstrap overrides */
  --bs-success: var(--theme-accent) !important;
  --bs-success-rgb: var(--theme-accent-rgb) !important;
  --bs-dark: #111111 !important;
  --bs-light: #ffffff !important;
  --bs-secondary: #888888 !important;
  --bs-secondary-color: #888888 !important;
  --bs-border-color: #e0e0e0 !important;
  --bs-body-bg: #f0f0f0 !important;
  --bs-body-color: #222222 !important;
  --bs-primary: var(--theme-accent) !important;
  --bs-primary-rgb: var(--theme-accent-rgb) !important;

  /* Supporting palette */
  --primary: var(--theme-accent);
  --supporting-blue: #6688cc;
  --supporting-yellow: var(--theme-accent);
  --supporting-green: #5a9e6f;
  --supporting-purple: #9977bb;
  --supporting-pink: #bb7788;
}

/* Full-page B&W photo background — bright, snowy feel */
body {
  background: #f5f5f5 !important;
  color: #222;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/assets/images/monochrome-snow-bg.jpeg') center/cover no-repeat;
  filter: grayscale(80%) brightness(0.6) contrast(1.2);
  z-index: -3;
  pointer-events: none;
}

/* Soft dark overlay to add depth behind cards */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  z-index: -2;
  pointer-events: none;
}

/* --- Header: dark-to-gray gradient (like Vibrant Bold) --- */
#main-header {
  background: var(--bs-dark) !important;
} 
/* linear-gradient(135deg, #000000 0%, #2a2a2a 60%, #444 100%) !important; */

/* --- Navbar: transparent so header gradient shows through --- */
#main-header .navbar {
  background: transparent !important;
}

.nav-link {
  color: #f0f0f0 !important;
}

.nav-link:after {
  background-color: var(--theme-accent);
}

.nav-link:hover {
  color: var(--theme-accent) !important;
}

.nav-item.active .nav-link {
  color: var(--theme-accent) !important;
}

.tech-accent {
  color: var(--theme-accent);
}

/* --- Cards: clean white --- */
.resource-card,
.about-card,
.post-header-card,
.theme-card,
.project-item,
.impact-kpi,
.mentoring-card,
.mentee-card {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  color: #222;
  border: none !important;
}

.resource-card:hover,
.theme-card:hover,
.project-item:hover,
.impact-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1) !important;
}

.resource-card-navbar {
  background: #ffffff !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

.about-card-navbar {
  background: #ffffff !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  border-top: 1px var(--theme-accent) solid !important; 
}

.about-card-navbar-label{
  font-size: 1.25rem !important;
}

.bottom-connect-navbar {
  background: #ffffff !important;
  border-radius: 12px !important;
}

.resource-card .card-body {
  background: #fff !important;
}

/* --- Profile sidebar: dark, over photo area --- */
.profile-sidebar {
  background: var(--bs-dark) !important;
  border-right: none;
}/*linear-gradient(160deg, #000000 0%, #585757 100%) !important;*/

.profile-header {
  color: #f0f0f0;
}

.profile-title {
  color: var(--theme-accent-dark) !important;
}

.profile-name {
  color: #ffffff;
}

.profile-section {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.profile-sidebar .section-title {
  color: #e0e0e0 !important;
}

.profile-sidebar .section-title::before {
  background-color: var(--theme-accent-light) !important;
}

/* --- Buttons --- */
.btn-primary {
  background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--theme-accent-rgb), 0.35) !important;
  background: linear-gradient(135deg, var(--theme-gradient-hover-start) 0%, var(--theme-gradient-hover-end) 100%) !important;
  color: #fff !important;
}

.btn-outline-primary,
a.btn:not(.btn-primary) {
  color: var(--theme-accent) !important;
  border: 2px solid var(--theme-accent) !important;
  border-radius: 8px !important;
  font-weight: 700;
  transition: all 0.2s ease;
  background: transparent !important;
}

.btn-outline-primary:hover,
a.btn:not(.btn-primary):hover {
  background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.social-link {
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
}

.social-link:hover {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.12) !important;
}

.social-icon {
  background-color: #111 !important;
  color: var(--theme-accent) !important;
  border-radius: 6px !important;
}

/* --- Theme cards --- */
.theme-card:hover {
  border-color: rgba(var(--theme-accent-rgb), 0.4) !important;
}

.theme-visual {
  background: rgba(var(--theme-accent-rgb), 0.08) !important;
  color: var(--theme-accent) !important;
}

/* --- KPI cards --- */
.impact-kpi-value {
  background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   UNIFIED BADGE / PILL STYLING (Monochrome Snow)
   Pills: rounded, yellow-orange accent, clean white bg
   ============================================ */

/* Shared pill base */
.theme-badge,
.badge.bg-primary.pill,
.badge.affiliation-badge,
.date-badge,
.impact-venue-badge,
.mentee-badge,
.filter-btn {
  border-radius: 999px !important;
  border: 1px solid rgba(var(--theme-accent-rgb), 0.2) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.55rem;
  text-transform: uppercase;
  line-height: 1.4;
  transition: all 0.2s ease;
}

/* Theme research badges */
.theme-badge--ml-theory {
  background-color: rgba(var(--theme-accent-rgb), 0.08) !important;
  color: var(--theme-accent-dark) !important;
  border-color: rgba(var(--theme-accent-rgb), 0.25) !important;
}

.theme-badge--semantic-comms {
  background-color: rgba(90, 158, 111, 0.08) !important;
  color: #3d8b4f !important;
  border-color: rgba(90, 158, 111, 0.25) !important;
}

.theme-badge--signal-processing {
  background-color: rgba(102, 136, 204, 0.08) !important;
  color: #4a6fa5 !important;
  border-color: rgba(102, 136, 204, 0.25) !important;
}

/* Keyword pills
.badge.bg-primary.pill {
  background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 700 !important;
} */

/* Affiliation badges */
.badge.affiliation-badge {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Date badges in CV */
.date-badge {
  background: #ffffff !important;
  color: #888 !important;
  border-color: #e0e0e0 !important;

  font-weight: 700 !important;
}

.accordion-button:not(.collapsed) .date-badge {
  color: #fff !important;
  background: var(--theme-accent) !important;
  border-color: transparent !important;
} /*linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;*/

/* Impact venue badges */
.impact-venue-badge {
  background: var(--theme-accent) !important;/*linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important; */
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}

/* Mentee badges */
.mentee-badge.official {
  background-color: rgba(var(--theme-accent-rgb), 0.08) !important;
  color: var(--theme-accent-dark) !important;
  border-color: rgba(var(--theme-accent-rgb), 0.25) !important;
}

.mentee-badge.contributor {
  background-color: #f5f5f5 !important;
  color: #888 !important;
  border-color: #e0e0e0 !important;
}

/* Archive filter pills */
.filter-btn {
  background-color: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #888 !important;
  padding: 0.35rem 0.85rem;
}

.filter-btn:hover {
  border-color: var(--theme-accent) !important;
  color: var(--theme-accent) !important;
}

.filter-btn.active {
  background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* --- Mentoring --- */
.mentee-card {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px !important;
}

.mentee-name a:hover,
.mentee-line a,
.people-group-label {
  color: var(--theme-accent) !important;
}

/* --- Footer: gray gradient --- */
.o-footer {
  background: var(--bs-dark) !important;
} 
/* background: linear-gradient(135deg, #656565 0%, #000000 100%) !important; */

/* --- Section dividers --- */
.impact-overview,
.mentoring-overview,
.explore-overview,
.projects-overview {
  border-top: none !important;
}

/* --- Resume accordion --- */
.accordion-item {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  border-color: #e0e0e0 !important;
}

.accordion-item .accordion-body {
  background: #fff !important;
  color: #333;
}

.accordion-button {
  background: #ffffff !important;
  color: #222 !important;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  background: #ffffff !important;
  color: #111 !important;
  box-shadow: none !important;
}

.accordion-button::after {
  filter: none !important;
}

#resumeTabs .nav-link {
  color: #888 !important;
}

#resumeTabs .nav-link.active {
  color: var(--theme-accent) !important;
}

#resumeTabs .nav-link:hover {
  color: var(--theme-accent) !important;
}

#resumeTabs .nav-link::after {
  background: var(--theme-accent) !important;
  height: 3px !important;
}

#resumeTabs {
  border-bottom-color: #e0e0e0 !important;
}

/* --- Post --- */
.post-title {
  background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.post-header-card {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.post-nav .nav-link {
  color: #666 !important;
}

.post-nav .nav-link:hover {
  color: var(--theme-accent) !important;
}

.post-nav .nav-link:after {
  background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
}

.post-toc-list > li > a {
  color: #dfdfdf !important;
}

#postToc {
  background: #ffffff25 !important;
  border-radius: 12px !important;

}

.post-toc-title {
  color: var(--theme-accent) !important;
  font-weight: 700;
}

.post-toc-list > li > a:hover,
.post-toc-list > li > a.active {
  color: var(--theme-accent) !important;
  border-left-color: var(--theme-accent) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.post-content {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
  padding: 0.5rem 1.5rem;
  border-radius: 12px !important;
  color: #333;
}

.post-content a {
  color: var(--theme-accent);
}

/* --- Resource card navbar hover --- */
.resource-card-navbar .nav-link {
  color: #555 !important;
}

.resource-card-navbar .nav-link:hover {
  color: var(--theme-accent) !important;
}

.resource-card-navbar .nav-link:after {
  background: var(--theme-accent) !important;
}

/* --- Citation modal --- */
#citationModal .modal-content {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  color: #333;
}

#citationModal .modal-header {
  border-bottom-color: #e0e0e0 !important;
}

#citationTabs .nav-link {
  color: #888 !important;
}

#citationTabs .nav-link.active {
  color: var(--theme-accent) !important;
}

#citationTabs + .tab-content pre {
  background: #f7f7f7 !important;
  border: 1px solid #e0e0e0 !important;
  color: #333;
  border-radius: 8px !important;
}

.form-control {
  background: #fff !important;
  border: 1px solid #ddd !important;
  color: #333 !important;
  border-radius: 8px !important;
}

.form-control:focus {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--theme-accent-rgb), 0.15) !important;
}

.copy-btn {
  font-weight: 700;
}



/* --- Contact modal --- */
#contactModal .modal-content {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  color: #333;
}

#contactModal .modal-header {
  border-bottom-color: #e0e0e0 !important;
}

/* --- Hero / section headers --- */
.hero h1 {
  color: #111;
}

.hero .lead {
  color: #666;
}

section h2:not(.accordion-header),
.about-content h2,
.page-content h1,
.profile-title {
  background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Projects --- */
.project-item {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
}

.project-info h3 a {
  color: #222 !important;
}

.project-info h3 a:hover {
  color: var(--theme-accent) !important;
}

/* --- PDF container --- */
.pdf-container {
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
}

.pdf-fallback {
  background: #fff !important;
}

/* --- Social focus --- */
.social-link:focus {
  outline-color: var(--theme-accent) !important;
}

/* --- Navbar responsive --- */
.navbar-collapse {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
  background: transparent !important;
}

.navbar-collapse .nav-link {
  color: #f0f0f0 !important;
}

/* --- Text links --- */
a {
  color: var(--theme-accent);
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-accent);
}

/* --- Selection --- */
::selection {
  background: rgba(var(--theme-accent-rgb), 0.25);
  color: #111;
}

/* --- Profile img --- */
.profile-img-container {
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

/* --- Navbar brand --- */
.navbar-brand {
  color: #fff !important;
}

.navbar-brand:hover {
  color: var(--theme-accent-light) !important;
}

/* --- Resource card text color override --- */
.resource-card h3 a,
.resource-card h4 a,
.resource-card p {
  color: #333 !important;
}

.resource-card h3 a:hover,
.resource-card h4 a:hover {
  color: var(--theme-accent) !important;
}

/* --- Mentoring card text --- */
.mentoring-card {
  color: #333 !important;
}

/* --- Theme card visual icon --- */
.theme-card-title {
  color: #222 !important;
}

/* --- Navbar toggler (mobile) --- */
.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #f0f0f0 !important;
}

.navbar-toggler-icon {
  filter: invert(1) !important;
}