/* ===========================================================================
   Hammad Tariq — portfolio
   Tokens ported from Albi "Flight" design system (colors_and_type.css) +
   component classes (app.css), trimmed to what this site uses, with
   responsive layout, hover states, and a working light/dark theme.
   =========================================================================== */

/* ─── Fonts ──────────────────────────────────────────────────────────── */
/* Self-hosted latin WOFF2 subsets — no third-party request, no render-blocking
   stylesheet from fonts.googleapis.com. Mirrors assets/fonts/fonts.css; both
   are produced by scripts/fetch-fonts.mjs, so re-run it before editing these. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/inter-100-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Tokens (light default) ─────────────────────────────────────────── */
:root {
  --sky-50:#F3F7FF; --sky-100:#E3EDFF; --sky-200:#A6C5FF; --sky-300:#79A5F9;
  --sky-400:#457AE7; --sky-500:#2463EB; --sky-600:#1F51BC; --sky-700:#1D408E;
  --sky-800:#162F63; --sky-900:#162541;
  --apricot-100:#FFE2C4; --apricot-500:#FF861E; --apricot-700:#C05500;
  --yellow-100:#FEF9C3; --yellow-700:#A16207; --yellow-900:#713F12;
  --green-50:#E5FFE2; --green-200:#7ADC6E; --green-600:#1A670F; --green-800:#11390C;
  --red-50:#FFF6F4; --red-600:#B01810; --red-800:#650F09;
  --purple-100:#F0ECFF; --purple-500:#7C3AED; --purple-800:#3D1E71;
  --grey-50:#F6F8FA; --grey-100:#EBEEF1; --grey-200:#C0C8D2; --grey-300:#9EA7B5;
  --grey-400:#767F8E; --grey-500:#636E80; --grey-600:#525767; --grey-700:#404552;
  --grey-800:#2F303C; --grey-900:#1A1B25;

  --primary-main:var(--sky-500); --primary-light:var(--sky-100);
  --primary-dark:var(--sky-800); --primary-contrast:#FFFFFF;
  --success-light:var(--green-50); --success-dark:var(--green-800);
  --info-light:var(--purple-100); --info-dark:var(--purple-800);

  --bg-default:#F5F7FA; --bg-paper:#FFFFFF; --bg-paper-highlight:#EEF2FF;
  --text-primary:var(--grey-900); --text-secondary:var(--grey-700);
  --text-disabled:var(--grey-300);
  --divider:rgba(0,0,0,0.08); --action-hover:rgba(0,0,0,0.04);

  --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:9999px;
  --shadow-down:0 2px 4px -2px rgba(0,0,0,0.08);
  --shadow-4:0 2px 8px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-16:0 8px 20px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.08);

  --font-sans:'Poppins','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --fw-medium:500; --fw-semibold:600;

  --maxw:1100px;
}

/* ─── Dark mode ──────────────────────────────────────────────────────── */
[data-color-scheme="dark"] {
  --primary-main:var(--sky-300); --primary-light:var(--sky-900);
  --primary-dark:var(--sky-100); --primary-contrast:rgba(0,0,0,0.87);
  --success-light:var(--green-800); --success-dark:var(--green-200);
  --info-light:var(--purple-800); --info-dark:var(--purple-100);

  --bg-default:#0F1014; --bg-paper:var(--grey-900); --bg-paper-highlight:#1D2138;
  --text-primary:#E8ECF4; --text-secondary:var(--grey-300);
  --text-disabled:var(--grey-500);
  --divider:rgba(255,255,255,0.08); --action-hover:rgba(255,255,255,0.05);
  --apricot-100:#6B2A00; --apricot-700:#FFBC85;
}
/* chip-draft needs an explicit dark treatment (don't remap grey primitives —
   that would make bg and text resolve to the same colour). */
[data-color-scheme="dark"] .chip-draft { background: #2F303C; color: #C0C8D2; }

/* ─── Reset / base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  /* Column flex + main{flex:1} keeps the footer at the bottom of the viewport
     on short pages (404, and about on wide screens) instead of floating. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-default);
  font-size: 0.875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  transition: background-color .2s ease, color .2s ease;
}
img { max-width: 100%; display: block; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-sans); font-weight: var(--fw-semibold); margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--primary-main); }
a:hover { color: var(--primary-dark); }
:focus-visible { outline: 2px solid var(--primary-main); outline-offset: 2px; border-radius: 4px; }

/* Skip link: off-screen until focused, then pinned over the sticky header. */
.skip-link { position: absolute; left: 8px; top: 8px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-md); background: var(--primary-main); color: var(--primary-contrast); font-size: 14px; font-weight: 500; text-decoration: none; transform: translateY(-200%); transition: transform .15s ease; }
.skip-link:focus { transform: translateY(0); color: var(--primary-contrast); }

/* svg icons inherit text color + sit on the baseline */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-brand { fill: currentColor; stroke: none; }

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--radius-md); font-family: var(--font-sans); font-weight: 500; font-size: 14px; border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s; white-space: nowrap; cursor: pointer; text-decoration: none; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-primary { background: var(--primary-main); color: var(--primary-contrast); }
.btn-primary:hover { background: color-mix(in srgb, var(--primary-main) 88%, #000); color: var(--primary-contrast); }
.btn-outlined-secondary { border-color: var(--divider); color: var(--text-secondary); background: var(--bg-paper); }
.btn-outlined-secondary:hover { border-color: var(--text-secondary); color: var(--text-primary); background: var(--action-hover); }

/* ─── Chips ──────────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 500; line-height: 1.3; }
.chip .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.chip-ok { background: var(--success-light); color: var(--success-dark); }
.chip-draft { background: var(--grey-100); color: var(--grey-800); }

/* ─── Cards ──────────────────────────────────────────────────────────── */
.card { background: var(--bg-paper); border: 1px solid var(--divider); border-radius: var(--radius-xl); overflow: hidden; }

/* ─── KPI ────────────────────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kpi { background: var(--bg-paper); border: 1px solid var(--divider); border-radius: var(--radius-xl); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.kpi-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.kpi-value { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--text-primary); }
.kpi-delta { font-size: 12px; font-weight: 500; color: var(--text-secondary); }

/* ─── Layout ─────────────────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
main.wrap { display: flex; flex-direction: column; flex: 1; width: 100%; }

/* ─── Header ─────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg-paper); border-bottom: 1px solid var(--divider); box-shadow: var(--shadow-down); }
.header-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); font-weight: 600; }
.brand:hover { color: var(--text-primary); }
.brand-mark { width: 30px; height: 30px; border-radius: var(--radius-md); background: var(--primary-main); color: var(--primary-contrast); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.brand-name { font-size: 15px; letter-spacing: -0.01em; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 6px 12px; border-radius: var(--radius-md); font-size: 13px; text-decoration: none; color: var(--text-secondary); transition: background .15s, color .15s; }
.nav a:hover { background: var(--action-hover); color: var(--text-primary); }
.nav a.active { font-weight: 500; background: var(--primary-light); color: var(--primary-dark); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--divider); background: var(--bg-paper); color: var(--text-secondary); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.icon-btn:hover { background: var(--action-hover); color: var(--text-primary); border-color: var(--text-secondary); }
.icon-btn .icon { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
[data-color-scheme="dark"] .theme-toggle .icon-sun { display: none; }
[data-color-scheme="dark"] .theme-toggle .icon-moon { display: inline-block; }
.menu-btn { display: none; }

/* ─── Sections / typography helpers ──────────────────────────────────── */
.section { display: flex; flex-direction: column; gap: 20px; }
.section-title { font-size: 26px; margin: 0 0 4px; }
.section-sub { font-size: 14px; color: var(--text-secondary); margin: 0; }
.lead { font-family: var(--font-body); color: var(--text-secondary); }
.meta-row { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); }
.meta-row a { color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.meta-row a:hover { color: var(--text-primary); }

/* ─── Hero ───────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr); gap: 48px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 20px; }
.hero h1 { font-size: 42px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; }
.hero-lead { font-size: 16px; line-height: 1.65; max-width: 560px; }
.hero-photo { display: flex; justify-content: center; }
.photo-circle { width: 260px; height: 260px; border-radius: var(--radius-full); object-fit: cover; border: 1px solid var(--divider); }

/* ─── Grids ──────────────────────────────────────────────────────────── */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.grid-work { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grid-skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

/* work card */
.work-card { display: flex; flex-direction: column; text-decoration: none; color: var(--text-primary); transition: border-color .15s, transform .15s, box-shadow .15s; }
.work-card:hover { border-color: var(--grey-300); transform: translateY(-2px); box-shadow: var(--shadow-4); color: var(--text-primary); }
.work-thumb { height: 220px; background: var(--bg-default); border-bottom: 1px solid var(--divider); overflow: hidden; }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; }
.work-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.work-head { display: flex; align-items: center; gap: 8px; }
.work-icon { width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--primary-light); color: var(--primary-dark); display: inline-flex; align-items: center; justify-content: center; }
.work-icon .icon { width: 15px; height: 15px; }
.work-name { font-size: 15px; font-weight: 600; }
.work-blurb { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.work-meta { font-size: 12px; font-weight: 500; color: var(--text-secondary); }

/* skill card */
.skill-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.skill-head { display: flex; align-items: center; gap: 10px; }
.skill-head .icon { color: var(--primary-main); width: 18px; height: 18px; }
.skill-head h3 { font-size: 15px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* testimonial */
.tcard { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.tcard .quote-mark { color: var(--sky-200); width: 22px; height: 22px; }
.tcard blockquote { font-family: var(--font-body); font-size: 14px; line-height: 1.65; margin: 0; color: var(--text-primary); }
.tcard blockquote.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.read-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 13px; font-weight: 500; color: var(--primary-main); background: none; border: none; padding: 4px 0; cursor: pointer; }
.read-more .icon { width: 12px; height: 12px; }
.read-more .icon-less { display: none; }
.read-more[aria-expanded="true"] .icon-more { display: none; }
.read-more[aria-expanded="true"] .icon-less { display: inline-block; }
.tauthor { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.tavatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--apricot-100); color: var(--apricot-700); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.tname { font-size: 13px; font-weight: 600; }
.trole { font-size: 12px; color: var(--text-secondary); }

/* callout banner (writing) */
.banner { display: flex; align-items: center; gap: 24px; padding: 24px 28px; flex-wrap: wrap; }
.banner-icon { width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--info-light); color: var(--info-dark); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.banner-icon .icon { width: 22px; height: 22px; }
.banner-body { flex: 1; min-width: 240px; }

/* CTA card */
.cta { padding: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ─── Projects page ──────────────────────────────────────────────────── */
.project { display: grid; grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); gap: 0; }
.project-media { background: var(--bg-default); border-right: 1px solid var(--divider); min-height: 220px; overflow: hidden; }
.project-media img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; }
.project-media .placeholder { width: 100%; height: 100%; min-height: 220px; display: flex; align-items: center; justify-content: center; color: var(--text-disabled); font-size: 13px; text-align: center; padding: 16px; }
.project-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.project-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.project-head h2 { font-size: 19px; }
.project-tagline { font-size: 13px; font-weight: 500; color: var(--primary-main); }
.project-desc { font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: var(--text-secondary); }
.project-facts { display: flex; gap: 16px; margin-top: 4px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.project-facts span { display: inline-flex; align-items: center; gap: 6px; }
.project-facts .icon { width: 12px; height: 12px; }

/* ─── About page ─────────────────────────────────────────────────────── */
.about-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 240px); gap: 40px; align-items: start; }
.about-copy { display: flex; flex-direction: column; gap: 16px; }
.about-copy h1 { font-size: 34px; letter-spacing: -0.015em; }
.about-copy p { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
.about-photo { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius-xl); border: 1px solid var(--divider); }

/* timeline */
.timeline { display: flex; flex-direction: column; }
.trow { display: grid; grid-template-columns: 160px 24px minmax(0, 1fr); gap: 0 16px; }
.tperiod { font-size: 13px; color: var(--text-secondary); font-weight: 500; padding: 20px 0; text-align: right; }
.trail { display: flex; flex-direction: column; align-items: center; }
.trail-line { width: 1px; flex: 0 0 24px; background: var(--divider); }
.trail-line.grow { flex: 1; }
.trail-dot { width: 10px; height: 10px; border-radius: var(--radius-full); border: 2px solid var(--bg-default); box-shadow: 0 0 0 1px var(--divider); flex-shrink: 0; }
.tcontent { padding: 18px 22px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.tcontent-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tcontent-head h3 { font-size: 15px; }
.tcompany { font-size: 13px; font-weight: 500; color: var(--primary-main); }
.tsummary { font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

/* info cards (education etc.) */
.info-card { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.info-head { display: flex; align-items: center; gap: 10px; }
.info-badge { width: 36px; height: 36px; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; }
.info-badge .icon { width: 18px; height: 18px; }
.info-badge.primary { background: var(--primary-light); color: var(--primary-dark); }
.info-badge.info { background: var(--info-light); color: var(--info-dark); }
.info-badge.success { background: var(--success-light); color: var(--success-dark); }
.info-card p, .info-card .info-line { font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.info-line.strong { font-size: 14px; font-weight: 500; color: var(--text-primary); font-family: var(--font-sans); }

/* ─── Footer ─────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--divider); background: var(--bg-paper); margin-top: 24px; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); }
.footer-social { display: flex; gap: 4px; margin-left: auto; }
/* 36px hit area around an 18px glyph — WCAG 2.5.8 wants 24px minimum. */
.footer-social a { color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); transition: color .15s, background .15s, transform .15s; }
.footer-social a:hover { color: var(--text-primary); background: var(--action-hover); transform: translateY(-2px); }
.footer-social .icon { width: 18px; height: 18px; }

/* ─── Mobile menu panel ──────────────────────────────────────────────── */
.mobile-menu { display: none; }

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo { order: -1; justify-content: flex-start; }
  .photo-circle { width: 160px; height: 160px; }
  .hero h1 { font-size: 34px; }
  .about-top { grid-template-columns: 1fr; gap: 24px; }
  .about-photo { max-width: 320px; }
}

@media (max-width: 760px) {
  .nav, .header-actions .desktop-only { display: none; }
  .menu-btn { display: inline-flex; }
  .nav { margin-left: 0; }
  main.wrap { padding-left: 20px; padding-right: 20px; }

  /* mobile dropdown menu */
  .mobile-menu { display: block; position: fixed; inset: 56px 0 auto 0; z-index: 19; background: var(--bg-paper); border-bottom: 1px solid var(--divider); box-shadow: var(--shadow-16); transform: translateY(-120%); transition: transform .22s ease; padding: 12px 20px 20px; }
  .mobile-menu.open { transform: translateY(0); }
  .mobile-menu nav { display: flex; flex-direction: column; gap: 2px; }
  .mobile-menu nav a { padding: 12px 12px; border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); font-size: 15px; }
  .mobile-menu nav a.active { background: var(--primary-light); color: var(--primary-dark); }
  .mobile-menu .menu-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--divider); }
  .mobile-menu .btn { justify-content: center; height: 44px; }

  /* projects stack */
  .project { grid-template-columns: 1fr; }
  .project-media { border-right: none; border-bottom: 1px solid var(--divider); }

  /* timeline: single column, marker + period inline above card */
  .trow { grid-template-columns: 1fr; gap: 0; padding-left: 4px; }
  .trail { display: none; }
  .tperiod { text-align: left; padding: 16px 0 0; }
  .tcontent { margin: 6px 0 16px; border-left: 2px solid var(--divider); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }

  .hero h1 { font-size: 30px; }
  .section-title, .about-copy h1 { font-size: 24px; }
  .cta { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}