/* Custom styles for portfolio */
:root{
  --primary: #0d6efd;
}

/* color variables */
:root{
  --bg: #f8f9fa;
  --surface: #ffffff;
  --muted: #6c757d;
  --text: #222222;
  --header-overlay: rgba(13,110,253,0.55);
  --toggle-bg: rgba(0,0,0,0.06);
  --toggle-color: var(--text);
  --toggle-hover: rgba(0,0,0,0.10);
}

/* dark theme variables when body has .dark */
body.dark{
  --bg: #0b0d10;
  --surface: #0f1720;
  --muted: #9aa4af;
  --text: #e6eef6;
  --header-overlay: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
  --toggle-bg: rgba(255,255,255,0.06);
  --toggle-color: var(--text);
  --toggle-hover: rgba(255,255,255,0.08);
}

/* Header / Banner */
header.site-header{
  position: relative;
  /* CSS file is in assets/css/, banner is at project root img/banner.png */
  background-image: url("../../img/banner.png");
  background-size: cover;
  background-position: center;
  color: #fff;
  /* occupy full viewport height and center contents vertically */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

header.site-header::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--header-overlay);
  z-index: 0;
}

header.site-header .container{ position: relative; z-index: 1; }

/* Profile */
.profile-photo{
  width: 100%;
  height: auto;
  border-radius: 50%;
  overflow: hidden;
  display:block;
}
.profile-photo img{ width:100%; height:100%; object-fit:cover; display:block }

/* Profile card (used in About) */
.profile-card{
  max-width: 320px;
  margin: 0 auto;
  padding: 1rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  background: var(--surface);
  color: var(--text);
  text-align: center;
}
.profile-card .name{ font-weight:700; margin-top:.65rem }
.profile-card .role{ color: var(--muted); margin-bottom:.5rem }
.profile-card .socials a{ margin:0 .35rem; color:var(--primary); }
/* ensure profile bio follows theme */
.profile-card p{ color: var(--text); }

/* Avatar styling: gradient ring, overlap header, hover */
.profile-card{ position: relative; padding-top: 1.25rem; }
.profile-card .avatar{ width:200px; height:200px; margin: 0 auto 1rem; position: relative; border-radius:50%; overflow:hidden; display:block; }
.profile-card .avatar::before{ content:""; position:absolute; inset: -8px; border-radius:50%; background: linear-gradient(135deg, rgba(13,110,253,0.95), rgba(99,102,241,0.9)); z-index:0; filter: blur(4px); opacity:0.9 }
.profile-card .avatar img{ width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1; border-radius:50%; box-shadow: 0 10px 30px rgba(2,6,23,0.18); transition: transform .28s ease; border:6px solid var(--surface); }
.profile-card:hover .avatar img{ transform: scale(1.03) rotate(-1deg); }

/* tweak when dark: softer ring and border color */
body.dark .profile-card .avatar::before{ background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(99,102,241,0.06)); filter: blur(6px); opacity:0.6 }
body.dark .profile-card .avatar img{ border-color: rgba(255,255,255,0.06); }

@media (max-width:767px){
  .profile-card .avatar{ width:160px; height:160px; margin: 0 auto .75rem }
  .profile-card{ padding-top:1rem }
}

/* Projects */
.project-img{ width:100%; height:200px; object-fit:cover; border-top-left-radius: .375rem; border-top-right-radius: .375rem; }
.card.project-card{ transition: transform .18s ease, box-shadow .18s ease; cursor: pointer; }
.card.project-card:hover{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }

.card .card-body{ min-height: 140px; }

/* Make cards use surface/bg variables */
.card{ background: var(--surface); color:var(--text); }

body{ background: var(--bg); color:var(--text); }

/* Override common Bootstrap utility backgrounds so they respect our theme variables */
.bg-white{ background: var(--surface) !important; }
.bg-dark{ background: #0b0d10 !important; }

/* Header text color: white on light theme (over banner), but in dark theme use --text */
.site-header .container, .site-header h1, .site-header h3, .site-header p{ color: #fff; }
body.dark .site-header .container, body.dark .site-header h1, body.dark .site-header h3, body.dark .site-header p{ color: var(--text); }

/* Footer adjustments */
footer{ background: var(--surface); color:var(--text); }
footer a{ color: var(--primary); }
body.dark footer{ background: #07080a; color: var(--muted); }

/* Modal content */
.modal-content{ background: var(--surface); color: var(--text); }

/* Links and small texts */
a{ color:var(--primary); }
a:hover{ text-decoration: underline; }

/* Badges (if any) */
.badge{ background: rgba(0,0,0,0.06); color:var(--text); }
body.dark .badge{ background: rgba(255,255,255,0.04); color:var(--text); }

/* Small layout tweaks */
section#about{ padding-top: 3rem; padding-bottom: 3rem; }

/* Skills */
.skills-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.75rem; }
.skill-item{ display:flex; align-items:center; gap:0.65rem; background:#fff; padding:.45rem .7rem; border-radius:.6rem; box-shadow:0 6px 18px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.04); }
.skill-item{ background:var(--surface); border-color: rgba(255,255,255,0.04); }
.skill-icon{ width:28px; height:28px; display:block }
.skill-name{ font-size:.95rem; color:var(--text) }

/* Modal lightbox tweaks */
.modal-img{ width:100%; height:auto; max-height:70vh; object-fit:contain; }

@media (max-width:767px){
  .profile-photo{ width:180px; height:180px }
  .project-img{ height:160px }
  .skill-icon{ width:22px; height:22px }
  header.site-header{ min-height: 60vh; padding: 2.5rem 0; }
}

/* Theme toggle button in header */
.theme-toggle{
  border: none;
  background: var(--toggle-bg);
  color: var(--toggle-color);
  width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter: blur(4px);
}
.theme-toggle svg{ width:18px;height:18px }
.theme-toggle:hover{ background: var(--toggle-hover); }
body.dark .theme-toggle{ background: var(--toggle-bg); color: var(--text); }

/* Fixed theme-toggle styling */
.theme-toggle-fixed{
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width:56px;
  height:56px;
  border-radius:14px;
  background: var(--toggle-bg);
  box-shadow: 0 10px 30px rgba(2,6,23,0.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index: 1050;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  backdrop-filter: blur(6px);
}
.theme-toggle-fixed:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(2,6,23,0.32); }
.theme-toggle-fixed:active{ transform: translateY(-2px); }

@media (max-width:767px){
  .theme-toggle-fixed{ width:50px; height:50px; right:.75rem; bottom:.75rem }
}

/* Reveal (scroll) animations */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; }
.reveal.revealed{ opacity:1; transform: none; }
.reveal[data-reveal-delay]{ transition-delay: var(--reveal-delay, 0ms); }

/* Stagger container: reveal children with slight delays (JS will add inline delays) */
.reveal-stagger > *{ opacity:0; transform: translateY(12px); }
.reveal-stagger.revealed > *{ opacity:1; transform: none; transition: opacity .6s ease, transform .6s ease; }

/* Experience / Timeline */
.experience{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.exp-timeline{
  position: relative;
  margin: 0 auto;
  /* provide a left gutter for the timeline line */
  padding-left: 56px;
}
.exp-timeline::before{
  content: '';
  position: absolute;
  /* vertical line positioned inside the left gutter */
  left: 28px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(13,110,253,0.9), rgba(99,102,241,0.6));
  border-radius: 2px;
  z-index: 1;
}
.exp-item{
  position: relative;
  /* item sits to the right of the gutter; keep padding small inside card */
  padding: 1rem 1.25rem 1rem 1.25rem;
  margin-bottom: 1.5rem;
  background: var(--surface);
  border-radius: .6rem;
  box-shadow: 0 10px 30px rgba(2,6,23,0.06);
  z-index: 1;
}
.exp-item::before{
  content: '';
  position: absolute;
  /* place the round marker in the left gutter (negative from item) */
  left: -28px;
  top: 18px;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: 3px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  z-index:2;
}
.exp-item h5{ margin-bottom:.25rem }
.exp-item .muted{ color:var(--muted); font-size:.9rem }

@media (max-width:767px){
  .exp-timeline::before{ left: 12px }
  .exp-item{ padding-left:3rem }
  .exp-item::before{ left: -8px }
}