/*
style.css
Custom styling and theme variables for the portfolio.
Includes dark & light theme variables, layout tweaks, animations, and responsive sidebar rules.
*/

/* ========== Theme variables ========== */
:root{
  --bg: #f6f8fb;
  --card: #ffffff;
  --text: #0f1724;
  --muted: #6b7280;
  --accent: #0ea5a4; /* teal-ish */
  --shadow: 0 6px 18px rgba(15,23,36,0.06);
  --radius: 12px;
  --glass: rgba(255,255,255,0.6);
}

:root.dark-theme{
  --bg: #0b1220;
  --card: #0f1724;
  --text: #e6eef7;
  --muted: #9aa6b2;
  --accent: #2dd4bf;
  --shadow: 0 6px 22px rgba(0,0,0,0.6);
  --glass: rgba(255,255,255,0.02);
}

/* ========== Global ========== */
*{box-sizing:border-box}
html,body{
  height:100%;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--accent)}
a:focus{outline:3px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset:2px}

/* page layout */
.page{min-height:100vh}

/* ========== Sidebar ========== */
.sidebar{
  width:260px;
  min-width:230px;
  max-width:320px;
  border-right:1px solid rgba(0,0,0,0.04);
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 80%, transparent));
  transition:transform .28s ease, width .2s ease, box-shadow .2s ease;
  z-index:40;
  position:relative;
}

/* small screen: hide sidebar off-canvas by default */
@media (max-width: 767.98px){
  .sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    transform:translateX(-110%);
    box-shadow: 0 10px 40px rgba(2,6,23,0.6);
    width:80%;
    max-width:320px;
  }

  /* when open, body gets class 'sidebar-open' — script toggles it */
  body.sidebar-open .sidebar{
    transform:translateX(0);
  }

  .content{flex:1 1 auto; margin-left:0}
}

/* Desktop — make sure content sits beside sidebar */
@media (min-width: 768px){
  .content{margin-left:0}
}

/* sidebar top */
.sidebar .sidebar-top .brand img{object-fit:cover}
.sidebar .nav-link{
  padding:0.65rem 0.75rem;
  color:var(--text);
  border-radius:8px;
}
.sidebar .nav-link.active, .sidebar .nav-link:hover{
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
  color:var(--accent);
}

/* footer */
.sidebar-footer{border-top:1px solid rgba(0,0,0,0.04);}

/* ========== Header ========== */
.site-header{background:transparent}

/* ========== Content styling ========== */
.main{max-width:1200px}
.profile-img{width:180px;height:180px;object-fit:cover;border:4px solid rgba(0,0,0,0.03);box-shadow:var(--shadow)}
.accent{color:var(--accent)}

/* ========== Project cards ========== */
.project-card{overflow:hidden; border-radius:14px; transition:transform .28s cubic-bezier(.22,.9,.31,1), box-shadow .2s ease}
.project-card:hover, .project-card:focus{
  transform:translateY(-6px) scale(1.01);
  box-shadow: 0 14px 40px rgba(2,6,23,0.12);
}
.project-card .card-img-top{height:160px; object-fit:cover;}

/* ========== Skills and progress ========== */
.skill-item{transition:transform .22s ease, box-shadow .2s ease}
.skill-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.progress{height:12px;background:color-mix(in srgb, var(--card) 60%, transparent);border-radius:8px}
.progress-bar{background:linear-gradient(90deg,var(--accent), color-mix(in srgb,var(--accent) 60%, transparent));box-shadow:inset 0 -3px 6px rgba(0,0,0,0.06)}

/* ========== Forms ========== */
.form-control:focus{box-shadow:0 0 0 0.18rem color-mix(in srgb,var(--accent) 22%, transparent); border-color:var(--accent);}

/* ========== Footer ========== */
.site-footer{background:transparent}

/* ========== Utility tweaks ========== */
.bg-white{background:var(--card) !important}
.text-muted{color:var(--muted) !important}

/* ========== Focus visibility for keyboard users ========== */
a, button, input, textarea {
  outline-offset: 2px;
}
:focus { outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent); }

/* ========== Small animations ========== */
button i, .nav-link i { transition: transform .18s ease; }
button:hover i, .nav-link:hover i { transform: translateY(-2px) rotate(-4deg); }

/* ========== Accessible hide for screen-readers ========== */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ========== Subtle glass effect behind header (desktop) ========== */
@media (min-width: 768px){
  .site-header{backdrop-filter: blur(6px); background: color-mix(in srgb, var(--card) 68%, transparent);}
}