/*
Theme Name: Albert Portfolio
Theme URI: https://example.com
Author: Albert Samuel Odemuyiwa
Author URI: https://www.linkedin.com/in/samuel-odemuyiwa-albert-b6b855105/
Description: A single-page personal portfolio theme for Albert Samuel Odemuyiwa — IT Support & Systems.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: albert-portfolio
*/


  :root{
    --bg:#F6F5FA;
    --panel:#FFFFFF;
    --line:#E7E3F2;
    --text:#18142A;
    --muted:#6C6884;
    --accent:#6C4FF6;
    --accent-2:#FF6E6E;
    --accent-soft:#EFE9FF;
    --radius-lg:22px;
    --radius-sm:12px;
    --sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --display:"Space Grotesk", var(--sans);
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#13111E;
      --panel:#1C1930;
      --line:#2C2745;
      --text:#EDEAFB;
      --muted:#9A93B8;
      --accent:#9B85FF;
      --accent-2:#FF8B8B;
      --accent-soft:#241F3E;
    }
  }
  :root[data-theme="dark"]{
    --bg:#13111E;
    --panel:#1C1930;
    --line:#2C2745;
    --text:#EDEAFB;
    --muted:#9A93B8;
    --accent:#9B85FF;
    --accent-2:#FF8B8B;
    --accent-soft:#241F3E;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{ font-family:var(--display); font-weight:700; margin:0; letter-spacing:-0.01em; }
  a{ color:var(--accent); }
  img{ max-width:100%; }
  .wrap{ max-width:1040px; margin:0 auto; padding:0 24px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--accent); margin-bottom:14px;
  }
  .eyebrow::before{ content:""; width:16px; height:2px; background:var(--accent-2); border-radius:2px; }

  /* NAV */
  nav{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
  nav .brand{ font-family:var(--display); font-weight:700; font-size:16px; }
  nav .links{ display:flex; align-items:center; gap:26px; }
  nav .links a{ color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; position:relative; padding-bottom:4px; }
  nav .links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--accent); border-radius:2px; transition:width .25s ease; }
  nav .links a:hover{ color:var(--text); }
  nav .links a.active{ color:var(--text); }
  nav .links a.active::after{ width:100%; }
  .nav-right{ display:flex; align-items:center; gap:14px; }
  #theme-toggle{
    background:var(--panel); border:1px solid var(--line); color:var(--muted);
    border-radius:999px; width:36px; height:36px; cursor:pointer; font-size:15px;
    display:flex; align-items:center; justify-content:center;
  }
  #theme-toggle:hover{ color:var(--accent); border-color:var(--accent); }
  .pill{
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px; font-weight:700; font-size:14px; text-decoration:none;
    padding:11px 22px; border:1.5px solid transparent; white-space:nowrap;
  }
  .pill.primary{ background:var(--accent); color:#fff; }
  .pill.primary:hover{ background:var(--accent-2); }
  .pill.outline{ border-color:var(--line); color:var(--text); }
  .pill.outline:hover{ border-color:var(--accent); color:var(--accent); }
  .pill.small{ padding:6px 14px; font-size:12.5px; }

  /* HERO */
  header.hero{ padding:84px 0 80px; position:relative; overflow:hidden; }
  .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; position:relative; z-index:1; }
  h1.name{ font-size:46px; line-height:1.12; }
  .role{ font-family:var(--display); font-weight:600; color:var(--accent); font-size:16px; margin-top:14px; }
  .bio{ margin-top:18px; max-width:56ch; color:var(--muted); font-size:16.5px; }
  .hero-actions{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }
  .hero-stats{ display:flex; gap:32px; margin-top:40px; }
  .hero-stats .stat b{ display:block; font-family:var(--display); font-size:26px; }
  .hero-stats .stat span{ color:var(--muted); font-size:13px; }

  @keyframes rise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
  .eyebrow, h1.name, .role, .bio, .hero-actions, .hero-stats{ opacity:0; animation:rise .6s ease forwards; }
  h1.name{ animation-delay:.08s; } .role{ animation-delay:.14s; } .bio{ animation-delay:.2s; }
  .hero-actions{ animation-delay:.26s; } .hero-stats{ animation-delay:.32s; }
  .portrait-wrap{ opacity:0; animation:rise .7s ease forwards; animation-delay:.3s; }
  @media (prefers-reduced-motion: reduce){
    .eyebrow,h1.name,.role,.bio,.hero-actions,.hero-stats,.portrait-wrap{ animation:none; opacity:1; }
    .ring{ animation:none !important; }
  }

  .portrait-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
  .blob{
    position:absolute; width:340px; height:340px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, var(--accent) 0%, var(--accent-2) 55%, transparent 72%);
    filter:blur(6px); opacity:.35; z-index:0;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .ring{
    position:absolute; width:300px; height:300px; z-index:1;
    border-radius:50%; border:2px dashed var(--accent);
    opacity:.55; animation:spin 40s linear infinite;
  }
  .portrait{
    position:relative; z-index:2; width:248px; height:248px; object-fit:cover; object-position:top center;
    border-radius:50%; border:6px solid var(--panel);
    box-shadow:0 24px 48px -12px color-mix(in srgb, var(--accent) 35%, transparent);
  }

  /* SECTIONS */
  section{ padding:64px 0; }
  section + section{ border-top:1px solid var(--line); }
  .section-head{ max-width:60ch; margin-bottom:36px; }
  .section-head h2{ font-size:30px; margin-top:8px; }
  p.lead{ color:var(--muted); margin-top:12px; }

  /* ABOUT quick facts */
  .facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
  .fact{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; }
  .fact b{ font-family:var(--display); display:block; font-size:14.5px; }
  .fact span{ color:var(--muted); font-size:13px; }

  /* TIMELINE */
  .timeline{ position:relative; padding-left:28px; border-left:2px solid var(--line); }
  .tl-item{ position:relative; padding-bottom:34px; }
  .tl-item:last-child{ padding-bottom:0; }
  .tl-item::before{
    content:""; position:absolute; left:-34px; top:4px; width:12px; height:12px; border-radius:50%;
    background:var(--accent); border:3px solid var(--bg);
  }
  .tl-item.current::before{ background:var(--accent-2); }
  .tl-year{ font-family:var(--display); font-size:12.5px; font-weight:600; color:var(--accent); }
  .tl-item.current .tl-year{ color:var(--accent-2); }
  .tl-role{ font-size:17px; font-weight:700; font-family:var(--display); margin-top:4px; }
  .tl-org{ color:var(--muted); font-size:14px; margin-top:2px; }
  .tl-desc{ color:var(--muted); font-size:14px; margin-top:8px; max-width:56ch; }

  /* SKILLS CARDS */
  .skills-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  .skill-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; }
  .skill-card .icon{
    width:40px; height:40px; border-radius:12px; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; margin-bottom:14px;
  }
  .skill-card h3{ font-size:15.5px; }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .chip{ background:var(--accent-soft); color:var(--text); font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px; }

  /* EDUCATION */
  .ed-list{ display:grid; gap:14px; }
  .ed-item{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 20px; display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; }
  .ed-item .deg{ font-weight:700; font-family:var(--display); font-size:15px; }
  .ed-item .school{ color:var(--muted); font-size:13.5px; margin-top:3px; }
  .ed-item .yr{ font-size:12.5px; color:var(--accent); font-weight:700; white-space:nowrap; }

  .certs{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
  .cert{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; }
  .cert .c-name{ font-size:13.5px; font-weight:700; }
  .cert .c-meta{ font-size:11.5px; color:var(--muted); margin-top:4px; }

  /* FOOTER / CONTACT */
  footer{ padding:70px 0 90px; }
  footer .box{
    background:linear-gradient(135deg, var(--accent-soft), var(--panel));
    border:1px solid var(--line); border-radius:var(--radius-lg); padding:44px;
  }
  footer h2{ font-size:28px; }
  .contact-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:24px; }
  .contact-row .item{ background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:10px 18px; font-size:13.5px; display:flex; align-items:center; gap:8px; }
  .contact-row .item span{ color:var(--muted); }
  .contact-row .item a{ text-decoration:none; color:var(--text); font-weight:600; }
  .copy-btn{ background:none; border:none; color:var(--accent); font-weight:700; font-size:12px; cursor:pointer; padding:0; }
  .copyright{ margin-top:40px; color:var(--muted); font-size:12.5px; text-align:center; }

  @media (max-width:760px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-grid .portrait-wrap{ order:-1; }
    h1.name{ font-size:34px; }
    .skills-grid{ grid-template-columns:1fr; }
    .certs{ grid-template-columns:1fr 1fr; }
    .facts{ grid-template-columns:1fr; }
    footer .box{ padding:28px; }
    nav .links{ gap:16px; }
    nav .links span.link-label{ display:none; }
  }