/* Light + Dark theme support
   Native CSS variables — light by default, dark with body.dark-mode
*/

/* ---------------- Light theme (default) ---------------- */
:root{
  --bg: #ffffff;
  --panel: #fffefc;
  --muted: #faf6f2;
  --primary: #f36c12;
  --primary-contrast: #ffffff;
  --accent-soft: #ffe9d1;
  --text: #1f2937;
  --subtext: #556070;
  --nav: #f7a65a;
  --shadow: 0 8px 24px rgba(31,41,55,0.08);
  --glass: rgba(255,255,255,0.6);
  --radius: 12px;
  --transition: 220ms cubic-bezier(.2,.9,.25,1);
}

/* ---------------- Dark theme ---------------- */
body.dark-mode{
  --bg: #111827;
  --panel: #1f2937;
  --muted: #1a2230;
  --primary: #f36c12;
  --primary-contrast: #ffffff;
  --accent-soft: rgba(243,108,18,0.15);
  --text: #f9fafb;
  --subtext: #9ca3af;
  --nav: #1f2937;
  --shadow: 0 8px 24px rgba(0,0,0,0.4);
  --glass: rgba(17,24,39,0.6);
}

/* Base / reset */
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:var(--bg); color:var(--text); line-height:1.5; transition: background var(--transition), color var(--transition);
}
.container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:20px}

/* Top navigation */
.main-nav{
  background: linear-gradient(180deg, rgba(243,108,18,0.12), rgba(247,166,90,0.06)), var(--nav);
  color:var(--primary-contrast);
  padding:10px 0; position:sticky; top:0; z-index:60; backdrop-filter: blur(4px);
}

.nav-right{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:14px}
.theme-switch{display:flex;gap:8px;align-items:center}
.theme-switch button{background:var(--panel);border:1px solid rgba(31,41,55,0.1);padding:8px;border-radius:10px;cursor:pointer;color:var(--text)}
.theme-switch button:hover{transform:translateY(-2px)}
.language-switch select{background:transparent;color:var(--primary-contrast);border:1px solid rgba(255,255,255,0.2);padding:8px 10px;border-radius:10px}

/* Header */
header{background: linear-gradient(90deg, rgba(243,108,18,0.06), rgba(247,166,90,0.02)); color:var(--text); padding:28px 0}
.profile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;flex:1}
.profile img{width:150px;height:150px;border-radius:50%;border:6px solid var(--primary);object-fit:cover;box-shadow:0 10px 30px rgba(31,41,55,0.08)}
.profile h1{margin:0;font-size:1.95rem}
.profile h2{margin:0;color:var(--primary);font-weight:600}

.contact-info{display:flex;flex-direction:column;align-items:flex-end;flex:1;gap:6px}
.contact-info p{margin:0;display:flex;align-items:center;gap:8px;color:var(--subtext);font-size:0.95rem}
.contact-info a{color:var(--text);text-decoration:underline 1px transparent}
.contact-info a:hover{text-decoration-color:var(--primary)}

/* Layout */
.main-container{display:flex;min-height:calc(100vh - 200px);gap:24px;padding:28px 20px}
.sidebar{width:260px;background:var(--panel);padding:20px;border-radius:12px;position:sticky;top:92px;height:calc(100vh - 130px);overflow:auto;box-shadow:var(--shadow)}
.sidebar-nav ul{list-style:none;padding:0;margin:0}
.sidebar-nav ul li{margin-bottom:12px}
.sidebar-nav ul li a{color:var(--text);text-decoration:none;display:block;padding:10px;border-radius:8px;transition:transform var(--transition), background var(--transition);font-weight:600}
.sidebar-nav ul li a:hover{background:var(--accent-soft);transform:translateX(6px)}

main{flex:1}
section{margin-bottom:28px;padding:22px;background:var(--muted);border-radius:12px;box-shadow:var(--shadow);transition:transform var(--transition), background var(--transition)}
section h2{color:var(--primary);border-bottom:2px solid rgba(243,108,18,0.12);padding-bottom:8px;margin-bottom:18px}

.job,.education-item,.project,ul li{margin-bottom:14px;padding:16px;background:var(--panel);border-radius:10px;box-shadow:0 6px 18px rgba(31,41,55,0.04);transition:transform var(--transition)}
.job h3,.education-item h3,.project h3{margin:0;color:var(--text)}

ul{list-style:none;padding:0;margin:0}
ul li{padding:12px}
ul li:hover{transform:translateY(-6px)}

.cv-links{display:flex;gap:12px;flex-wrap:wrap}
.cv-link{background:var(--primary);color:var(--primary-contrast);padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 10px 28px rgba(243,108,18,0.12);transition:transform var(--transition), box-shadow var(--transition)}
.cv-link:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(243,108,18,0.14)}

footer{background:transparent;color:var(--subtext);text-align:center;padding:28px 0;margin-top:40px;border-top:1px solid rgba(31,41,55,0.04)}
.social-links{display:flex;justify-content:center;gap:18px;margin-top:18px}
.social-links a{color:var(--text);font-size:1.4rem;display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:8px;transition:transform var(--transition)}
.social-links a:hover{transform:translateY(-6px);color:var(--primary)}

/* Accessibility */
a:focus, button:focus, select:focus{outline:3px solid rgba(243,108,18,0.14);outline-offset:3px}
button{font-family:inherit}

/* Responsive */
@media (max-width:900px){.container{flex-direction:column;align-items:flex-start}.main-container{flex-direction:column;padding:18px}.sidebar{width:100%;position:relative;height:auto;order:2}main{order:1}.profile{flex-direction:row;align-items:center;text-align:left;gap:18px}.profile img{width:96px;height:96px}}

/* Micro interactions */
.job:hover,.education-item:hover,.project:hover{transform:translateY(-6px)}

/* Scrollbar */
.sidebar::-webkit-scrollbar{width:10px}
.sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12));border-radius:8px}

/* Utilities */
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:0.8rem;background:var(--accent-soft)}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}