/*
Theme Name: Jomari Manto Portfolio
Theme URI: https://jomarimanto.com
Author: Jomari Manto
Author URI: https://jomarimanto.com
Description: A dark, editorial-bento personal portfolio theme with a lime accent for Jomari Manto — Business Analytics student / digital-marketing & data professional. Recreates the multi-page design (Home, About, Experience, Services, Courses, Contact) with a shared sticky sidebar.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jomari-manto
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root{
  --bg:#0b0c0e;
  --panel:#14161a;
  --panel2:#1b1e24;
  --fg:#f1f3ee;
  --muted:#868d97;
  --line:#262a31;
  --accent:#c6f24e;
  --accent-on:#0b0c0e;
}

/* ============================================================
   Reset / base
   ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Instrument Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--accent);color:var(--accent-on);}
input,textarea{font-family:'Instrument Sans',sans-serif;}
input::placeholder,textarea::placeholder{color:#5c636d;}
input:focus,textarea:focus{outline:none;border-color:var(--accent);}

/* Scroll-reveal */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
.reveal{opacity:0;}
.reveal.is-visible{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both;}
/* No-JS fallback: everything visible */
.no-js .reveal{opacity:1;}

/* ============================================================
   Layout shell
   ============================================================ */
.wrap{
  display:grid;
  grid-template-columns:290px 1fr;
  max-width:1440px;
  margin:0 auto;
}
main{padding:40px;}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar{
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  padding:40px 34px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:32px;
  background:var(--bg);
  color:var(--fg);
}
.sidebar__top{display:flex;flex-direction:column;gap:16px;}
.sidebar__avatar{
  width:72px;height:72px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  flex:none;
  background:var(--panel);
}
.sidebar__avatar img{width:100%;height:100%;object-fit:cover;}
.sidebar__name{color:inherit;display:block;}
.sidebar__name-title{
  font-family:'Archivo',sans-serif;font-weight:900;font-size:26px;
  line-height:1;letter-spacing:-.02em;text-transform:uppercase;
}
.sidebar__name-sub{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:12px;
}
.sidebar__toggle{
  display:none;align-items:center;justify-content:center;
  width:46px;height:46px;font-size:18px;cursor:pointer;
  background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:12px;flex:none;
}
.sidebar__nav{
  display:flex;flex-direction:column;gap:2px;
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.04em;
}
.sidebar__nav a{
  padding:9px 0;border-bottom:1px solid var(--line);
  color:var(--muted);display:flex;justify-content:space-between;
  transition:color .2s;
}
.sidebar__nav a:hover{color:var(--accent);}
.sidebar__nav a.is-active{color:var(--accent);font-weight:600;}
/* Two-digit index rendered via CSS counter fallback is handled inline in markup */
.sidebar__footer{
  margin-top:auto;display:flex;flex-direction:column;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);
}
.sidebar__footer a{color:inherit;transition:color .2s;}
.sidebar__footer a:hover{color:var(--fg);}
.sidebar__copy{opacity:.6;margin-top:8px;}

/* ============================================================
   Shared content atoms
   ============================================================ */
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;
}
.page-h1{
  margin:0 0 40px;font-family:'Archivo',sans-serif;font-weight:900;font-size:60px;
  line-height:.92;letter-spacing:-.03em;text-transform:uppercase;
}
.page-h1 .accent{color:var(--accent);}
.section{margin-top:28px;}
.section__head{margin:0 4px 16px;}
.section__title{
  margin:0;font-family:'Archivo',sans-serif;font-weight:800;font-size:28px;
  letter-spacing:-.02em;text-transform:uppercase;
}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;}

/* CTA band */
.cta{
  margin-top:28px;background:var(--accent);color:var(--accent-on);border-radius:20px;
  padding:40px 44px;display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:20px;
}
.cta h2{
  margin:0;font-family:'Archivo',sans-serif;font-weight:900;font-size:32px;
  letter-spacing:-.02em;text-transform:uppercase;
}
.cta__btn{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;
  background:var(--accent-on);color:var(--accent);padding:15px 28px;border-radius:100px;
  transition:opacity .2s;
}
.cta__btn:hover{opacity:.85;}

/* ============================================================
   Home
   ============================================================ */
.hero{display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:minmax(150px,auto);gap:14px;}
.hero__big{
  grid-column:span 2;grid-row:span 2;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:38px;display:flex;flex-direction:column;justify-content:space-between;
}
.hero__eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
}
.hero__title{
  margin:24px 0 0;font-family:'Archivo',sans-serif;font-weight:900;font-size:64px;
  line-height:.92;letter-spacing:-.03em;text-transform:uppercase;
}
.hero__title .accent{color:var(--accent);}
.hero__lead{margin:24px 0 0;max-width:46ch;font-size:16px;line-height:1.6;color:var(--muted);}
.hero__stat{
  background:var(--accent);color:var(--accent-on);border-radius:20px;padding:26px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.hero__stat-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.hero__stat-num{font-family:'Archivo',sans-serif;font-weight:900;font-size:60px;line-height:.9;}
.hero__stat-cap{font-size:13px;font-weight:600;}
.hero__portrait{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  position:relative;overflow:hidden;min-height:150px;
}
.hero__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero__chips{
  grid-column:span 3;background:var(--panel2);border:1px solid var(--line);border-radius:20px;
  padding:22px 26px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.hero__chips-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-right:8px;
}
.chip{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;
  padding:9px 16px;border:1px solid var(--line);border-radius:100px;
}
.explore-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 16px;}
.explore-head span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);}
.explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.explore-card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;
  display:flex;justify-content:space-between;align-items:center;
  transition:border-color .25s,transform .25s;color:var(--fg);
}
.explore-card:hover{border-color:var(--accent);transform:translateY(-4px);}
.explore-card__idx{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);margin-bottom:8px;}
.explore-card h3{margin:0;font-family:'Archivo',sans-serif;font-weight:700;font-size:22px;}
.explore-card p{margin:6px 0 0;color:var(--muted);font-size:14px;}
.explore-card__arrow{font-size:24px;}
.cta--home{padding:44px 48px;}
.cta--home h2{font-size:38px;line-height:.95;}
.cta--home .cta__btn{padding:16px 30px;}

/* ============================================================
   About
   ============================================================ */
.about-grid{display:grid;grid-template-columns:340px 1fr;gap:32px;align-items:start;}
.about-aside{position:sticky;top:40px;}
.about-portrait{aspect-ratio:4/5;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--panel);}
.about-portrait img{width:100%;height:100%;object-fit:cover;}
.facts{margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;}
.facts__label{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px;
}
.facts__list{display:flex;flex-direction:column;gap:10px;font-size:14px;}
.facts__row{display:flex;justify-content:space-between;}
.facts__row .k{color:var(--muted);}
.facts__row .v.accent{color:var(--accent);}
.bio{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:40px;}
.bio__lead{margin:0 0 20px;font-family:'Archivo',sans-serif;font-weight:700;font-size:26px;line-height:1.25;letter-spacing:-.01em;}
.bio p{margin:0 0 16px;font-size:16px;line-height:1.75;color:var(--muted);}
.bio p:last-of-type{margin:0;}
.bio__stats{display:flex;gap:40px;margin-top:36px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:30px;}
.bio__stat-num{font-family:'Archivo',sans-serif;font-weight:900;font-size:44px;color:var(--accent);line-height:.9;}
.bio__stat-cap{font-size:13px;color:var(--muted);margin-top:6px;}
.drives-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.drive-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px;}
.drive-card__title{font-family:'Archivo',sans-serif;font-weight:900;font-size:30px;color:var(--accent);}
.drive-card p{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.6;}

/* ============================================================
   Experience
   ============================================================ */
.timeline{display:flex;flex-direction:column;gap:12px;}
.tl-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px 36px;
  display:grid;grid-template-columns:170px 1fr;gap:28px;transition:border-color .25s;
}
.tl-card:hover{border-color:var(--accent);}
.tl-card__date{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);}
.tl-card__cat{
  margin-top:12px;font-size:12px;color:var(--muted);border:1px solid var(--line);
  display:inline-block;padding:5px 11px;border-radius:100px;
}
.tl-card__title{margin:0 0 8px;font-family:'Archivo',sans-serif;font-weight:800;font-size:24px;}
.tl-card__desc{margin:0 0 14px;color:var(--muted);font-size:15px;line-height:1.65;max-width:64ch;}
.tags{display:flex;flex-wrap:wrap;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);}
.tags span{border:1px solid var(--line);padding:5px 10px;border-radius:6px;}
.skillcloud{background:var(--panel2);border:1px solid var(--line);border-radius:18px;padding:30px;display:flex;flex-wrap:wrap;gap:10px;}
.skillcloud .chip{background:var(--panel);}

/* ============================================================
   Services
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.svc-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:36px;
  transition:transform .25s,border-color .25s;
}
.svc-card:hover{transform:translateY(-5px);border-color:var(--accent);}
.svc-card__idx{font-family:'Archivo',sans-serif;font-weight:900;font-size:38px;color:var(--accent);line-height:1;}
.svc-card__title{margin:16px 0 10px;font-family:'Archivo',sans-serif;font-weight:800;font-size:24px;}
.svc-card__desc{margin:0 0 16px;color:var(--muted);font-size:15px;line-height:1.65;}
.svc-card .tags span{padding:4px 10px;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.step{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:26px;}
.step__num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);}
.step__title{margin:12px 0 6px;font-family:'Archivo',sans-serif;font-weight:700;font-size:19px;}
.step p{margin:0;color:var(--muted);font-size:13px;line-height:1.55;}

/* ============================================================
   Courses
   ============================================================ */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.course-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;
  transition:transform .25s,border-color .25s;
}
.course-card:hover{transform:translateY(-5px);border-color:var(--accent);}
.course-card__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.course-card__num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);}
.course-card h3{margin:0 0 8px;font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;}
.course-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;}
.badge{font-family:'JetBrains Mono',monospace;font-size:10px;padding:4px 9px;border-radius:6px;}
.badge--certified{color:var(--accent-on);background:var(--accent);}
.badge--progress{color:var(--accent);border:1px solid var(--accent);}
.badge--outline{color:var(--muted);border:1px solid var(--line);}
.course-next{
  background:var(--accent);color:var(--accent-on);border:1px solid var(--accent);border-radius:18px;
  padding:30px;display:flex;flex-direction:column;justify-content:center;
}
.course-next__label{font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.7;margin-bottom:10px;}
.course-next p{margin:0;font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;line-height:1.1;}
.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.focus{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:26px;}
.focus__head{display:flex;justify-content:space-between;align-items:baseline;}
.focus__name{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;}
.focus__pct{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);}
.focus__bar{height:6px;background:var(--line);border-radius:100px;margin-top:12px;overflow:hidden;}
.focus__bar > span{display:block;height:100%;background:var(--accent);}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
.contact-left{display:flex;flex-direction:column;gap:14px;}
.email-card{background:var(--accent);color:var(--accent-on);border-radius:18px;padding:32px;display:block;transition:opacity .2s;}
.email-card:hover{opacity:.9;}
.email-card__label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;}
.email-card__addr{font-family:'Archivo',sans-serif;font-weight:800;font-size:26px;letter-spacing:-.01em;word-break:break-word;}
.details-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.detail__label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;}
.detail__value{font-weight:600;}
.detail__value.accent{color:var(--accent);}
.online-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;}
.online-card__label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;}
.online-list{display:flex;flex-direction:column;gap:2px;font-family:'JetBrains Mono',monospace;font-size:14px;}
.online-list a{padding:11px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--fg);transition:color .2s;}
.online-list a:last-child{border-bottom:1px solid var(--line);}
.online-list a:hover{color:var(--accent);}
.contact-form{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px;display:flex;flex-direction:column;gap:16px;}
.contact-form__title{font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;}
.contact-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted);}
.contact-form input,.contact-form textarea{
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;color:var(--fg);font-size:15px;
}
.contact-form textarea{resize:vertical;}
.contact-form button{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;
  background:var(--accent);color:var(--accent-on);border:none;border-radius:100px;
  padding:15px;cursor:pointer;margin-top:4px;transition:opacity .2s;
}
.contact-form button:hover{opacity:.9;}
.contact-foot{
  margin-top:36px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted);
}
.contact-foot .mono{font-family:'JetBrains Mono',monospace;}

/* ============================================================
   Mobile footer (per-page, hidden on desktop)
   ============================================================ */
.mobile-footer{
  display:none;flex-direction:column;gap:14px;padding:28px 20px;
  border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace;
  font-size:13px;color:var(--muted);
}
.mobile-footer__socials{display:flex;gap:22px;flex-wrap:wrap;}
.mobile-footer a{transition:color .2s;}
.mobile-footer a:hover{color:var(--fg);}
.mobile-footer__copy{opacity:.6;}

/* ============================================================
   Responsive — single breakpoint at 860px
   ============================================================ */
@media (max-width:860px){
  html,body{overflow-x:hidden;}
  .wrap{grid-template-columns:minmax(0,1fr);}
  main{padding:20px;}

  /* Sidebar becomes stacked header */
  .sidebar{
    position:relative;height:auto;min-height:0;
    border-right:none;border-bottom:1px solid var(--line);
  }
  .sidebar__top{flex-direction:row;align-items:center;gap:14px;}
  .sidebar__avatar{width:52px;height:52px;}
  .sidebar__name{flex:1;min-width:0;}
  .sidebar__toggle{display:flex;}
  .sidebar__nav{display:none;}
  .sidebar[data-open="true"] .sidebar__nav{display:flex;}
  .sidebar__footer{display:none;}

  /* Collapse grids to single column */
  .hero,.explore-grid,.about-grid,.drives-grid,.svc-grid,.steps,
  .course-grid,.focus-grid,.contact-grid,.details-card,.tl-card{
    grid-template-columns:minmax(0,1fr);
  }
  .hero__big,.hero__chips{grid-column:auto;grid-row:auto;}
  .about-aside{position:relative;top:auto;}

  /* Type scale-down */
  .page-h1,.hero__title{font-size:40px;line-height:.95;}
  .cta--home h2{font-size:34px;line-height:.96;}

  .mobile-footer{display:flex;}
}