/* ===== Reset & base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --nav-bg: rgba(15,23,42,0.95);
  --accent: #1d4ed8; /* royal blue */
  --muted: #6b7280;
  --card-bg: #ffffff;
}
html,body{height:100%;}
body {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  color: #0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===== Fixed header/navbar ===== */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--nav-bg);
  color: white;
  z-index: 1200;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(2,6,23,0.18);
}
.nav-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.6rem 1rem;
}
.brand{
  color:white;
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.2px;
  font-size:1.1rem;
}
.nav-links{
  display:flex;
  gap:0.75rem;
  align-items:center;
}
.nav-link{
  color:rgba(255,255,255,0.95);
  text-decoration:none;
  padding:0.45rem 0.6rem;
  border-radius:6px;
  font-weight:600;
}
.nav-link:hover{ background: rgba(255,255,255,0.06); }
.nav-link.active{
  background: #fff;
  color: var(--nav-bg);
}

/* mobile toggle */
.nav-toggle{
  display:none;
  background: transparent;
  border: none;
  cursor: pointer;
  width:40px;
  height:32px;
  gap:5px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:2px;
}

/* ===== main page wrapper to offset fixed header ===== */
.page-wrap{
  max-width:1100px;
  margin: 90px auto 60px; /* leave space for fixed header */
  padding: 1rem;
}

/* ===== Profile card (home) ===== */
.profile-card{
  background: var(--card-bg);
  max-width:850px;
  width:100%;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  border-radius:16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  overflow:hidden;
}
.avatar-section{
  flex:1 1 300px;
  background: linear-gradient(180deg,#0f172a,#0b1220);
  display:flex;align-items:center;justify-content:center;padding:28px;
}
.avatar-section img{ width:230px;height:230px;border-radius:50%;object-fit:cover;border:4px solid #fff; }
.profile-details{
  flex:2 1 420px;padding:28px 30px;display:flex;flex-direction:column;gap:12px;
}
.profile-details h2{ font-size:1.65rem; color:var(--nav-bg); }
.profile-details p{ color:var(--muted); line-height:1.5; }
.social-links{ display:flex; gap:16px; margin-top:6px; align-items:center; }
.social-links a{ font-size:1.3rem; color:var(--nav-bg); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; background: #f1f5f9; transition:transform .18s, color .18s, background .18s; }
.social-links a:hover{ transform:translateY(-3px); background:var(--accent); color:white; }

/* sr-only for hidden ms-time but accessible to screen readers if needed */
.sr-only { position: absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== About page ===== */
.about-hero{ background:var(--card-bg); padding:22px; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,0.08); margin-bottom:18px; }
.about-hero h1{ margin-bottom:8px; color:var(--nav-bg); }
.about-goals, .about-confidence, .about-future, .about-extra{ background:var(--card-bg); padding:18px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.06); margin-bottom:14px; }

/* ===== Contact page ===== */
.contact-panel{ max-width:720px; margin:0 auto; background:var(--card-bg); padding:22px; border-radius:12px; box-shadow:0 8px 25px rgba(0,0,0,0.08); }
.contact-panel h1{ color:var(--nav-bg); margin-bottom:8px; }
.form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
label{ font-weight:600; color: #0f172a; }
input, textarea{
  padding:10px; border-radius:8px; border:1px solid #d1d5db; font-size:1rem; resize:vertical;
}
input:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(29,78,216,0.08); }
button[type="submit"]{
  background:var(--accent); color:white; padding:12px 16px; border:none; border-radius:8px; font-weight:700; cursor:pointer; margin-top:6px;
}
button[type="submit"]:hover{ background:#133a9c; }
.error{ color:#dc2626; font-size:0.95rem; min-height:18px; }
.success{ color:#16a34a; font-weight:700; margin-top:10px; }

/* ===== small screen responsive rules ===== */
@media (max-width: 900px){
  .nav-inner{ padding:0.5rem; }
  .nav-links{ gap:0.5rem; }
  .profile-card{ gap:12px; }
}
@media (max-width: 720px){
  .nav-toggle{ display:flex; }
  .nav-links{ display:none; position:absolute; top:100%; right:0; background:var(--nav-bg); padding:12px; border-radius:8px; flex-direction:column; width:200px; box-shadow:0 10px 30px rgba(2,6,23,0.25); }
  .nav-links.show{ display:flex; }
  .nav-link{ padding:0.6rem; }
  .page-wrap{ margin:110px 12px 60px; }
  .avatar-section img{ width:180px;height:180px; }
  .profile-details{ padding:18px; }
}
@media (max-width:480px){
  .page-wrap{ margin:120px 10px 60px; }
  .profile-details h2{ font-size:1.3rem; }
  .social-links a{ width:36px;height:36px;font-size:1.05rem; }
  .contact-panel{ padding:16px; }
}