/* -------- Theme Tokens -------- */
body, p, li, h1, h2, h3, h4, h5, h6{ color: var(--text); }

:root {
  /* DARK (default) */
  --bg: #0b1220;
  --panel: #0f172a;
  --text: #e5e7eb;
  --muted: #9aa3b2;
  --acc: #0ea5e9;
  --acc-2: #22c55e;
  --ring: rgba(14,165,233,.35);
  --card: #111827;
  --border: #1f2a44;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* LIGHT THEME OVERRIDES */
:root[data-theme="light"]{
  --bg: #f8fafc;
  --panel: #ffffff;
  --text: #0b1220;
  --muted: #334155;
  --acc: #0ea5e9;         /* same accent ok */
  --acc-2: #16a34a;
  --ring: rgba(14,165,233,.25);
  --card: #ffffff;
  --border: #e5e7eb;
}

:root{
  /* ...aapke existing vars... */
  --subtle: #cbd5e1;   /* secondary text (dark theme) */
}

:root[data-theme="light"]{
  /* ...aapke existing light vars... */
  --subtle: #475569;   /* secondary text (light theme) */
}

:root[data-theme="light"] .slider,
:root[data-theme="light"] .faq,
:root[data-theme="light"] .card,
:root[data-theme="light"] .project,
:root[data-theme="light"] .skill{
  background: var(--card);
  border-color: var(--border);
}

:root[data-theme="light"] .project .tag,
:root[data-theme="light"] .chip-list li{
  background:#f2f6fb;
  border-color: var(--border);
  color: var(--text);
}


/* global uses of vars */
body{ background: var(--bg); color: var(--text); }

* { box-sizing: border-box; }
html, body { margin:0; padding:0; scroll-behavior:smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
}

img { max-width: 100%; display:block; }
a { color: var(--acc); text-decoration: none; }
.container { width:min(1100px, 90%); margin-inline:auto; }

/* -------- Utilities -------- */
.section { padding: 60px 0; position: relative; }
.section.alt { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); }
.section-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 0 0 20px; }
.section-title.center { text-align:center; margin-bottom: 28px; }

.grid-2 { display:grid; grid-template-columns: 1.1fr .9fr; gap: 36px; }
@media (max-width: 920px) { .grid-2 { grid-template-columns: 1fr; } }

.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--acc); color:#001018; border:0; padding: 12px 18px;
  border-radius: 12px; font-weight:700; box-shadow: var(--shadow); cursor:pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { padding: 8px 12px; border-radius:10px; font-size:.95rem; }
.btn--ghost { background: transparent; color: var(--text); outline: 2px solid var(--acc); }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top: 14px; }

.icon-btn { background: transparent; border: 1px solid #2a3346; color: var(--text); padding: 8px 10px; border-radius: 10px; cursor:pointer; }
.muted { color: var(--muted); }
.accent { color: var(--acc); }

/* -------- Header -------- */
.site-header {
  position: sticky; top:0; z-index: 50; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(11,18,32,0.9), rgba(11,18,32,0.6));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 14px 0; }
.logo { font-weight: 900; letter-spacing: .5px; font-size: 1.3rem; color: #fff; }
.logo span { color: var(--acc); }
.nav { display:flex; gap: 18px; align-items: center; }
.nav a { color: var(--text); opacity:.9; }
.nav a:hover { color: #fff; }
.nav-ctas { display:flex; gap:10px; align-items:center; }
#hamburger { display:none; }
@media (max-width: 840px) {
  #hamburger { display:inline-flex; }
  .nav { position: fixed; inset: 60px 0 auto 0; background: var(--panel); padding: 20px; display:none; flex-direction:column; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav.open { display:flex; }
}

/* -------- Hero -------- */
.hero { padding-top: 120px; }
.eyebrow { color: var(--acc-2); font-weight:700; margin-bottom: 4px; }
.hero h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3rem); margin: 6px 0; }
.type { font-size: clamp(1.1rem, 1rem + 1.1vw, 1.6rem); margin: 4px 0 12px; color: var(--muted); min-height: 1.8em; }
.cursor { display:inline-block; margin-left: 3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lead { color: #cbd5e1; max-width: 60ch; }
.quick-stats { display:flex; gap:22px; list-style:none; padding:0; margin: 16px 0 0 0; }
.quick-stats li { background: #0c162a; border: 1px solid #1f2a44; padding: 10px 12px; border-radius: 10px; box-shadow: var(--shadow); }
.hero-card { position: relative; }
.hero-card .badge {
  position:absolute; top:12px; left:12px; background: #052f41; color:#c6f6ff; padding: 6px 10px; border-radius: 999px; font-weight:700; border: 1px solid #0ea5e9;
}
.hero-card img { border-radius: 16px; border: 1px solid #1f2a44; box-shadow: var(--shadow); }
.scroll-down { position:absolute; left: 50%; bottom: 8px; transform: translateX(-50%); color:var(--muted); }

/* -------- About -------- */
.about-media .portrait {
  border-radius: 16px; border: 1px solid #22314f; box-shadow: var(--shadow);
}
.about-list { list-style:none; padding:0; margin: 16px 0; display:grid; gap: 8px; }

/* -------- Cards / Services -------- */
.cards {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.card {
  background: var(--card); border: 1px solid #1f2a44; border-radius: 16px; padding: 18px;
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--acc); }
.card h4 { margin: 4px 0 8px; }
.chip-list { display:flex; gap:8px; padding:0; margin: 10px 0 0; list-style:none; flex-wrap:wrap; }
.chip-list li { background: #0c162a; border: 1px solid #263351; padding: 6px 10px; border-radius: 999px; font-size:.9rem; color:#cde8ff; }
@media (max-width: 920px){ .cards{ grid-template-columns: 1fr; } }

/* -------- Projects -------- */
.projects-grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.project {
  background: var(--card); border: 1px solid #203153; border-radius: 16px; overflow:hidden; display:block;
  transition: transform .15s ease, border-color .15s ease;
}
.project:hover { transform: translateY(-4px); border-color: var(--acc); }
.project img { aspect-ratio: 16/10; object-fit: cover; }
.project-meta { padding: 14px; }
.project .tag { display:inline-block; margin-right:6px; margin-top:8px; background:#0c162a; border:1px solid #203153; padding:4px 8px; border-radius: 999px; font-size:.85rem; color:#cde8ff; }
@media (max-width: 920px){ .projects-grid { grid-template-columns: 1fr; } }

/* -------- Timeline -------- */
.timeline { position:relative; margin-left: 8px; }
.timeline::before { content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background:#203153; }
.t-item { position:relative; padding-left: 28px; margin-bottom: 16px; }
.t-dot { position:absolute; left: 4px; top: 6px; width: 12px; height: 12px; background: var(--acc); border-radius:50%; box-shadow: 0 0 0 4px rgba(14,165,233,.15); }

/* -------- Skills -------- */
.skills { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.skill { background: var(--card); border:1px solid #203153; border-radius: 12px; padding: 12px; display:flex; align-items:center; gap: 12px; }
.skill span { min-width:120px; font-weight:700; }
.skill em { margin-left:auto; color:#cde8ff; font-style:normal; }
.skill .bar { background:#0c162a; height:10px; border-radius:999px; overflow:hidden; flex:1; border:1px solid #203153; }
.skill .bar i { display:block; height:100%; width: var(--w); background: linear-gradient(90deg, var(--acc), #38bdf8); }

/* -------- Slider -------- */
.slider { position: relative; background: var(--card); border:1px solid #203153; border-radius: 16px; padding: 22px; }
.slide { display:none; margin:0; }
.slide.active { display:block; }
.slider-dots { display:flex; gap:8px; margin-top:12px; }
.dot { width:10px; height:10px; border-radius:50%; background:#203153; border:0; cursor:pointer; }
.dot.active { background: var(--acc); }

/* -------- FAQ -------- */
.faq { background: var(--card); border:1px solid #203153; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.faq summary { cursor:pointer; font-weight:700; }
.faq[open] { border-color: var(--acc); box-shadow: var(--shadow); }

/* -------- Contact -------- */
.contact-form label { display:block; font-weight:700; margin-bottom:8px; }
.contact-form input, .contact-form textarea {
  width:100%; background:#0c162a; color: var(--text);
  border:1px solid #2a3a5e; padding: 12px; border-radius: 12px;
  outline: none; box-shadow:none;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 4px var(--ring); }

/* ===== Footer (theme-aware) ===== */
.site-footer{
  background: var(--panel);               /* light: white, dark: panel */
  border-top: 1px solid var(--border);
  color: var(--text);
}
.site-footer .muted{ color: var(--subtle); }

/* Footer grid */
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto; /* logo | links | to-top */
  align-items: center;
  gap: 20px;
}

/* Footer links inline */
.footer-links {
  display: flex;
  gap: 20px;
  justify-content: center;
}
.footer-links a {
  color: var(--subtle);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s;
}
.footer-links a:hover {
  color: var(--text);
}

/* Back to top button */
.to-top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.to-top:hover {
  border-color: var(--acc);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

/* optional: icon buttons in footer (if any) */
.site-footer .icon-btn{
  border-color: var(--border);
  color: var(--text);
  background: transparent;
}

/* remove any leftover hard-coded footer colors */


/* -------- Reveal on Scroll -------- */
.reveal { opacity:0; transform: translateY(16px); transition: all .5s ease; }
.reveal.in { opacity:1; transform: none; }

/* ---- Light theme surface/border fixes ---- */
:root[data-theme="light"] .site-header{
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
  border-bottom-color: var(--border);
}
:root[data-theme="light"] .nav a{ color: var(--text); }

:root[data-theme="light"] .card,
:root[data-theme="light"] .project,
:root[data-theme="light"] .quick-stats li,
:root[data-theme="light"] .faq,
:root[data-theme="light"] .slider,
:root[data-theme="light"] .skill,
:root[data-theme="light"] .contact-form input,
:root[data-theme="light"] .contact-form textarea{
  background: var(--card);
  border-color: var(--border);
}

:root[data-theme="light"] .project .tag,
:root[data-theme="light"] .chip-list li{
  background: #f2f6fb;
  border-color: var(--border);
  color: #0b1220;
}

:root[data-theme="light"] .to-top,
:root[data-theme="light"] .icon-btn{
  border-color: var(--border);
  color: var(--text);
}

:root[data-theme="light"] .section.alt{
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.00));
}

/* before: .lead { color: #cbd5e1; } */
.lead{ color: var(--subtle); }

/* before: .muted { color: #9aa3b2; }  -> already var, good. */

/* navbar links always readable */
.nav a{ color: var(--text); opacity:.9; }
:root[data-theme="light"] .nav a{ opacity:1; }

/* quick-stats text */
.quick-stats li{ color: var(--text); }

/* project/meta, chips & tags */
.project .tag{ color: var(--text); }
.chip-list li{ color: var(--text); }

/* footer muted text */
.site-footer .muted, .footer-links a{ color: var(--subtle); }

/* details/summary (FAQ) */
.faq summary{ color: var(--text); }
.faq p{ color: var(--subtle); }

/* ====== Testimonials polish ====== */
.slider blockquote{
  margin:0 0 6px; font-size: clamp(1rem, .9rem + .6vw, 1.1rem);
  color: var(--text);
}
.slider figcaption{ color: var(--subtle); }

/* ====== Skill tags (icons + text) ====== */
.skill-tags{
  list-style:none; padding:0; margin:10px 0 0;
  display:grid; gap:12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 920px){ .skill-tags{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .skill-tags{ grid-template-columns: 1fr; } }

.skill-tag{
  display:flex; align-items:center; gap:10px;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 14px; padding: 12px 14px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.skill-tag:hover{
  transform: translateY(-2px);
  border-color: var(--acc);
  box-shadow: var(--shadow);
}
.skill-tag svg{
  width:22px; height:22px; flex:0 0 22px;
  color: var(--acc);
  fill: currentColor;
}
.skill-tag span{ font-weight:700; color: var(--text); }


/* --- Logo color: follow theme text --- */
.logo{ color: var(--text) !important; }            /* text "Khizar" */
.logo:hover{ color: var(--text) !important; }      /* hover pe bhi same */
.logo span{ color: var(--acc) !important; }        /* blue dot stays accent */


/* Experience services list */
.exp-services {
  margin: 8px 0 0 0;
  padding-left: 18px;
  color: var(--subtle);
}
.exp-services li {
  margin-bottom: 4px;
  list-style: disc;
}

/* Project services list inside card */
.proj-services {
  margin: 8px 0 0 0;
  padding-left: 18px;
  color: var(--subtle);
  font-size: 0.95rem;
}
.proj-services li {
  margin-bottom: 4px;
  list-style: disc;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ===== Accordion Styles ===== */
.accordion{ display:grid; gap:14px; }

.faq{
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.faq:hover{ border-color: var(--acc); transform: translateY(-1px); }

/* remove default marker */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display:none; }

/* header */
.faq summary{
  display:grid; grid-template-columns: 1fr auto; align-items:center;
  gap: 10px; padding: 16px 18px; cursor: pointer; user-select: none;
  color: var(--text); font-weight: 700;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.02));
}
.faq .q{ line-height:1.4; }

/* chevron icon */
.faq .chev{
  width: 18px; height: 18px; border: 2px solid var(--border); border-left: 0; border-top: 0;
  transform: rotate(45deg); transition: transform .25s ease, border-color .2s ease;
  border-radius: 2px;
}
.faq[open] .chev{ transform: rotate(225deg); border-color: var(--acc); }

/* answer */
.faq .a{
  padding: 0 18px 16px; color: var(--subtle);
  border-top: 1px dashed var(--border);
}

/* compact spacing on mobile */
@media (max-width:600px){
  .faq summary{ padding: 14px 16px; }
  .faq .a{ padding: 0 16px 14px; }
}

/* Narrow container for FAQ */
.container.narrow {
  max-width: 720px;
  margin: 0 auto;
}

/* Compact FAQ design */
.accordion { display: grid; gap: 10px; }

.faq { border-radius: 12px; border: 1px solid var(--border); background: var(--card); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; cursor: pointer; font-weight: 600; color: var(--text);
}
.faq .a { padding: 8px 14px 14px; color: var(--subtle); font-size: .95rem; }
.faq .chev {
  width: 12px; height: 12px; border: 2px solid var(--border); border-left:0; border-top:0;
  transform: rotate(45deg); transition: .25s;
}
.faq[open] .chev { transform: rotate(225deg); border-color: var(--acc); }


/* ------------------------------------------------------------- */

/* === Footer: mobile-only fix (<=640px) === */
@media (max-width:640px){
  .footer-grid{
    grid-template-columns: 1fr;            /* stack items */
    grid-template-areas:
      "brand"
      "links"
      "top";
    justify-items: center;                  /* center everything */
    text-align: center;
    gap: 12px;
  }
  /* map existing children to the areas (no HTML change needed) */
  .footer-grid > :nth-child(1){ grid-area: brand; }   /* logo + copyright */
  .footer-links{ grid-area: links; }
  .to-top{ grid-area: top; }

  /* links line wrap & spacing */
  .footer-links{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;                         /* rows, columns */
    justify-content: center;
  }
  .footer-links a{
    font-weight: 600;
    line-height: 1.2;
    padding: 4px 0;
  }

  /* back-to-top button center with larger tap area */
  .to-top{
    width: 44px;
    height: 44px;
    margin-top: 4px;
    position: static;                       /* no weird alignment */
  }

  /* small text tweaks */
  .site-footer .muted{
    line-height: 1.35;
  }
}


/* FAQ + Testimonials Grid */
.faq-wrap, .testimonials-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}

@media (max-width: 920px) {
  .faq-wrap, .testimonials-wrap {
    padding: 16px;
  }
}


.testimonial-photo {
  margin-top: 20px;
  text-align: center;
}
.testimonial-photo img {
  width: 100%;
  aspect-ratio: 4/3;  
  object-fit: cover;      /* crop kare instead of stretch */
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: block;
}