/*
Theme Name: Josandi
Theme URI: https://josandi.com/
Author: Joseph Anthony Divino
Author URI: https://josandi.com/
Description: Custom single-page portfolio theme for Josandi - freelance web & e-commerce developer. Built as a classic theme for a pixel-faithful bespoke layout.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: josandi
*/

  :root{
    --ink:#14171C;
    --ink-soft:#2A2F37;
    --text:#1A1E24;
    --muted:#5C636E;
    --paper:#FBFBFA;
    --surface:#FFFFFF;
    --mist:#F1F3F1;
    --accent:#0E7C66;
    --accent-ink:#0A5D4D;
    --accent-soft:#E4F1EC;
    --line:#E4E5E1;
    --line-strong:#D2D4CF;
    --radius:14px;
    --radius-sm:9px;
    --shadow:0 1px 2px rgba(20,23,28,.04), 0 8px 28px rgba(20,23,28,.06);
    --shadow-lg:0 2px 6px rgba(20,23,28,.05), 0 24px 60px rgba(20,23,28,.12);
    --display:"Roboto", system-ui, sans-serif;
    --body:"Figtree", system-ui, sans-serif;
    --mono:"JetBrains Mono", ui-monospace, monospace;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--body);
    color:var(--text);
    background:var(--paper);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--ink);}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
  .section{padding:104px 0;}
  .eyebrow{
    font-family:var(--mono);
    font-size:12.5px;
    font-weight:500;
    letter-spacing:.02em;
    color:var(--accent);
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:22px;
  }
  .eyebrow::before{content:"~/";opacity:.55;}
  .lead{font-size:18px;color:var(--muted);max-width:60ch;}

  /* ---------- nav ---------- */
  header.nav{
    position:sticky;top:0;z-index:50;
    background:rgba(251,251,250,.82);
    backdrop-filter:saturate(160%) blur(12px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px;}
  .brand{display:flex;align-items:center;gap:10px;}
  .brand img{height:38px;width:auto;display:block;}
  .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
  .nav-links{display:flex;align-items:center;gap:30px;}
  .nav-links a:not(.btn){font-size:18px;color:var(--ink-soft);font-weight:500;transition:color .18s;}
  .nav-links a:not(.btn):hover{color:var(--accent);}
  .nav-links .btn{font-size:18px;color:#fff;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--body);font-weight:600;font-size:15px;
    padding:11px 20px;border-radius:999px;cursor:pointer;border:1px solid transparent;
    transition:transform .15s ease, background .18s, box-shadow .18s;
  }
  .btn-primary{background:var(--accent);color:#fff;}
  .btn-primary:hover{background:var(--accent-ink);transform:translateY(-1px);box-shadow:0 8px 22px rgba(14,124,102,.28);}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
  .nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:9px;padding:8px 10px;cursor:pointer;}
  .nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px;}

  /* ---------- hero ---------- */
  .hero{padding:92px 0 80px;}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
  .hero h1{font-size:clamp(40px,5.4vw,64px);font-weight:800;}
  .hero h1 .hl{color:var(--accent);}
  .hero .lead{margin:24px 0 32px;font-size:19px;}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
  .cred{display:flex;gap:28px;margin-top:42px;flex-wrap:wrap;}
  .cred .num{font-family:var(--display);font-weight:800;font-size:30px;color:var(--ink);letter-spacing:-.03em;}
  .cred .lbl{font-family:var(--mono);font-size:12px;color:var(--muted);}

  /* browser mock */
  .mock{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;transform:rotate(.4deg);}
  .mock-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line);background:#fdfdfc;}
  .mock-bar i{width:11px;height:11px;border-radius:50%;background:#e0e1dd;display:block;}
  .mock-bar i:nth-child(1){background:#f3b9b1;} .mock-bar i:nth-child(2){background:#f6dca6;} .mock-bar i:nth-child(3){background:#bfe3cc;}
  .mock-url{margin-left:10px;font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--mist);padding:4px 12px;border-radius:999px;}
  .mock img{width:100%;height:330px;object-fit:cover;object-position:top;}
  .chips-float{position:relative;margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
  .mock-stage{position:relative;height:330px;overflow:hidden;}
  .mock-stage .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .8s ease;}
  .mock-stage .slide.active{opacity:1;}
  .mock-dots{display:flex;gap:7px;justify-content:center;padding:11px 0 13px;}
  .mock-dots button{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:var(--line-strong);cursor:pointer;transition:background .2s,transform .2s;}
  .mock-dots button:hover{background:var(--muted);}
  .mock-dots button.active{background:var(--accent);transform:scale(1.25);}

  /* splash screen (logo reveal) */
  .splash{position:fixed;inset:0;z-index:9998;background:radial-gradient(circle at 50% 42%, #1b2128 0%, #12151a 72%);display:flex;align-items:center;justify-content:center;transition:opacity .5s ease;}
  .splash.done{opacity:0;pointer-events:none;}
  .splash-inner{display:flex;flex-direction:column;align-items:center;gap:18px;opacity:0;transform:translateY(12px);animation:splashRise .85s .1s cubic-bezier(.2,.7,.2,1) forwards;}
  .splash-logo{width:clamp(180px,26vw,250px);height:auto;filter:brightness(0) invert(1) drop-shadow(0 0 5px rgba(40,220,170,.55)) drop-shadow(0 0 16px rgba(16,150,120,.5)) drop-shadow(0 0 30px rgba(14,124,102,.35));animation:splashGlow 2.2s .5s ease-in-out infinite alternate;}
  .splash-fb{display:none;align-items:center;gap:13px;}
  .splash-fb .splash-dot{width:14px;height:14px;border-radius:50%;background:#31e0ad;box-shadow:0 0 8px rgba(49,224,173,.9),0 0 18px rgba(14,124,102,.6);}
  .splash-fb .splash-word{font-family:var(--display);font-weight:800;font-size:clamp(38px,7vw,56px);letter-spacing:-.03em;color:#eafff7;text-shadow:0 0 6px rgba(40,220,170,.55),0 0 18px rgba(14,124,102,.5);}
  .splash-line{width:0;height:3px;border-radius:2px;background:#31e0ad;box-shadow:0 0 8px rgba(49,224,173,.9),0 0 16px rgba(14,124,102,.6);animation:splashLine .7s .45s cubic-bezier(.2,.7,.2,1) forwards;}
  @keyframes splashRise{to{opacity:1;transform:none;}}
  @keyframes splashLine{to{width:132px;}}
  @keyframes splashGlow{0%{filter:brightness(0) invert(1) drop-shadow(0 0 4px rgba(40,220,170,.4)) drop-shadow(0 0 12px rgba(16,150,120,.35)) drop-shadow(0 0 22px rgba(14,124,102,.25));}100%{filter:brightness(0) invert(1) drop-shadow(0 0 7px rgba(40,220,170,.7)) drop-shadow(0 0 20px rgba(16,150,120,.6)) drop-shadow(0 0 38px rgba(14,124,102,.45));}}
  @media (prefers-reduced-motion:reduce){.splash-inner{animation:none;opacity:1;transform:none;}.splash-logo{animation:none;}.splash-line{animation:none;width:132px;}}

  .chip{font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);padding:5px 11px;border-radius:7px;}
  .chip::before{content:"#";color:var(--accent);opacity:.7;}

  /* ---------- generic section head ---------- */
  .head{max-width:680px;margin-bottom:52px;}
  .head h2{font-size:clamp(30px,3.6vw,42px);}
  .head .lead{margin-top:16px;}

  /* ---------- services ---------- */
  .services{background:var(--mist);}
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  .svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:transform .18s, box-shadow .18s, border-color .18s;}
  .svc:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong);}
  .svc .tag{font-family:var(--mono);font-size:11.5px;color:var(--accent);}
  .svc h3{font-size:20px;margin:12px 0 10px;}
  .svc p{font-size:15px;color:var(--muted);margin:0;}

  /* ---------- portfolio ---------- */
  .filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px;}
  .filter{font-family:var(--mono);font-size:13px;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);padding:8px 16px;border-radius:999px;cursor:pointer;transition:all .16s;}
  .filter:hover{border-color:var(--accent);color:var(--accent);}
  .filter.active{background:var(--ink);color:#fff;border-color:var(--ink);}
  .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s, box-shadow .2s;}
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
  .card .shot{aspect-ratio:16/11;overflow:hidden;position:relative;border-bottom:1px solid var(--line);background:linear-gradient(100deg,#eceee9 28%,#f6f7f4 50%,#eceee9 72%);background-size:200% 100%;animation:shimmerbg 1.5s ease-in-out infinite;cursor:zoom-in;}
  .card .shot.loaded{animation:none;background:var(--mist);}
  @keyframes shimmerbg{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
  .card .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s ease;}
  .card:hover .shot img{transform:scale(1.04);}
  .card .body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:11px;flex:1;}
  .card h3{font-size:18px;}
  .card p{font-size:14px;color:var(--muted);margin:0;flex:1;}
  .card .meta{display:flex;flex-wrap:wrap;gap:6px;}
  .card .live{font-family:var(--mono);font-size:12.5px;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:5px;}
  .card .live:hover{text-decoration:underline;}
  .more-note{text-align:center;margin-top:38px;font-family:var(--mono);font-size:13px;color:var(--muted);}

  /* lightbox */
  .card .shot::after{content:"\2922  View full";position:absolute;bottom:10px;right:10px;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(20,23,28,.72);padding:4px 9px;border-radius:6px;opacity:0;transition:opacity .18s;pointer-events:none;}
  .card:hover .shot::after{opacity:1;}
  .lb{position:fixed;inset:0;z-index:100;background:rgba(18,21,26,.88);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:54px 20px 44px;}
  .lb.open{display:flex;}
  .lb-inner{max-width:980px;width:100%;}
  .lb-cap{font-family:var(--mono);font-size:13px;color:#cfd3d8;text-align:center;margin-bottom:14px;}
  .lb-inner img{width:100%;height:auto;display:block;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.5);background:#fff;}
  .lb-close{position:fixed;top:16px;right:20px;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .16s;z-index:101;}
  .lb-close:hover{background:rgba(255,255,255,.28);}

  /* ---------- testimonials ---------- */
  .testi{background:var(--ink);color:#E7E9E6;}
  .testi h2{color:#fff;}
  .testi .lead{color:#9aa0a6;}
  .testi .eyebrow{color:#5fd1b2;}
  .testi .eyebrow::before{color:#5fd1b2;}
  .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .quote{background:#1B1F26;border:1px solid #262B33;border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column;gap:16px;}
  .quote p{font-size:14.5px;color:#C7CCD1;margin:0;line-height:1.62;}
  .who{display:flex;align-items:center;gap:12px;margin-top:auto;}
  .who img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #2d333b;}
  .who .n{font-family:var(--display);font-weight:600;font-size:15px;color:#fff;}
  .who .r{font-family:var(--mono);font-size:11.5px;color:#7d848c;}
  .who .r a{color:#5fd1b2;}

  /* ---------- about ---------- */
  .about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;}
  .about-photo{position:relative;}
  .about-photo img{border-radius:var(--radius);width:100%;box-shadow:var(--shadow);}
  .about-photo .badge{position:absolute;bottom:-16px;left:-16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px;box-shadow:var(--shadow);font-family:var(--mono);font-size:12px;color:var(--ink-soft);}
  .about-photo .badge b{color:var(--accent);}
  .about-copy h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:20px;}
  .about-copy p{color:var(--muted);font-size:16px;margin:0 0 16px;}
  .about-copy p strong{color:var(--text);}

  /* ---------- contact ---------- */
  .contact{background:var(--mist);}
  .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;}
  .contact h2{font-size:clamp(28px,3.4vw,40px);}
  .contact .lead{margin:18px 0 28px;}
  .contact-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;}
  .contact-list li{display:flex;align-items:center;gap:13px;font-size:15px;}
  .contact-list .ico{width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);flex:none;}
  .contact-list a{font-weight:500;}
  .reply{font-family:var(--mono);font-size:13px;color:var(--accent);background:var(--accent-soft);border:1px solid #cbe6dc;border-radius:999px;padding:7px 15px;display:inline-flex;gap:8px;align-items:center;margin-top:30px;}

  form.lead-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);}
  .field{margin-bottom:16px;}
  .field label{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-bottom:7px;}
  .field input,.field select,.field textarea{
    width:100%;font-family:var(--body);font-size:15px;color:var(--text);
    padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
    background:var(--paper);transition:border-color .16s, box-shadow .16s;
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
  .field textarea{resize:vertical;min-height:110px;}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  form .btn-primary{width:100%;justify-content:center;margin-top:6px;font-size:16px;padding:14px;}
  .form-note{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center;}

  /* ---------- footer ---------- */
  footer{background:var(--ink);color:#9aa0a6;padding:50px 0 38px;}
  .foot-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
  .foot-brand{display:flex;align-items:center;gap:10px;}
  .foot-brand img{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.92;}
  .foot-soc{display:flex;gap:14px;}
  .foot-soc a{width:38px;height:38px;border-radius:10px;border:1px solid #2a2f37;display:grid;place-items:center;color:#c7ccd1;transition:all .16s;}
  .foot-soc a:hover{border-color:var(--accent);color:#5fd1b2;}
  .copy{font-family:var(--mono);font-size:12px;width:100%;border-top:1px solid #262b33;padding-top:22px;margin-top:26px;}

  /* reveal */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1;transform:none;}

  /* focus visibility */
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.filter:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:40px;}
    .svc-grid,.work-grid,.t-grid{grid-template-columns:repeat(2,1fr);}
    .mock{transform:none;}
    .nav-links{
      position:absolute;top:66px;left:0;right:0;background:var(--paper);
      flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 18px;
      border-bottom:1px solid var(--line);display:none;
    }
    .nav-links.open{display:flex;}
    .nav-links a{padding:12px 0;width:100%;border-bottom:1px solid var(--line);}
    .nav-links .btn{margin-top:12px;}
    .nav-toggle{display:block;}
  }
  @media (max-width:560px){
    .section{padding:72px 0;}
    .svc-grid,.work-grid,.t-grid,.row2{grid-template-columns:1fr;}
    .cred{gap:20px;}
    .about-photo .badge{left:0;}
  }
  @media (prefers-reduced-motion:reduce){
    *{scroll-behavior:auto;}
    .reveal{transition:none;opacity:1;transform:none;}
    .card:hover .shot img{transform:none;}
  }