/*
Theme Name: Jerome Portfolio Glass
Theme URI: https://example.com
Author: Jerome S. Patrick
Description: Apple-style liquid-glass redesign. Three-theme (Terminal, Bento, Dark) developer portfolio. Every text, color, font, section, menu, project, skill, experience, certificate and the contact form is editable from the WordPress admin.
Version: 2.11.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: jerome-portfolio
*/
/* Liquid-glass design. Inspired by Apple's Liquid Glass and rdev/liquid-glass-react (MIT); re-implemented in plain CSS/JS. */
:root{--bar:none;--blur:24px;--ease:cubic-bezier(.34,1.56,.64,1);--hl:rgba(255,255,255,.2);--sh:rgba(0,0,0,.45);--ga:44%}
[data-theme=terminal]{--bar:flex}[data-theme=bento]{--hl:rgba(255,255,255,.95);--sh:rgba(40,50,80,.14);--ga:60%}[data-theme=dark]{--hl:rgba(255,255,255,.22);--sh:rgba(2,6,23,.55);--ga:46%}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px;font-size:var(--scale,100%)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs,16px);letter-spacing:var(--ls,normal);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s,color .5s}
a{color:inherit;text-decoration:none}h1,h2,h3,p,ul,dl,dd{margin:0}ul{padding:0;list-style:none}svg.ic{width:1.1em;height:1.1em;flex:none}
.wrap{max-width:var(--maxw,72rem);margin:0 auto;padding:0 var(--wrap-pad,1.25rem)}.acc{color:var(--accent)}.muted{color:var(--muted)}.err{color:#f87171}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:var(--accent);color:var(--accent-ink);padding:.5rem 1rem;border-radius:99px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}
/* ambient glow */
.orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}html[data-orbs="0"] .orbs{display:none}
.orbs i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 26s ease-in-out infinite}
.orbs i:nth-child(1){background:var(--orb1);top:-14vmax;left:-10vmax}.orbs i:nth-child(2){background:var(--orb2);top:20vh;right:-18vmax;animation-delay:-9s}.orbs i:nth-child(3){background:var(--orb3);bottom:-22vmax;left:25vw;animation-delay:-17s;opacity:.38}
[data-theme=bento] .orbs i{opacity:.55}@keyframes drift{50%{transform:translate(6vmax,5vmax) scale(1.12)}}
/* glass surface */
.card,.glass{position:relative;background:color-mix(in srgb,var(--surface) var(--ga),transparent);-webkit-backdrop-filter:blur(var(--blur)) saturate(170%);backdrop-filter:blur(var(--blur)) saturate(170%);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-radius:var(--radius);box-shadow:inset 0 1px 0 var(--hl),inset 0 -1px 0 color-mix(in srgb,var(--text) 6%,transparent),0 14px 44px var(--sh);overflow:hidden;transition:transform .55s var(--ease),border-color .3s,box-shadow .3s}
.card{display:block}.card::before,.glass::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 18%,transparent),transparent 45%)}
.card:hover::before,.glass:hover::before{opacity:1}.hov:hover{transform:translateY(-6px) scale(1.012);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
[data-theme=terminal] .card,[data-theme=terminal] .glass{border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.has-refraction .liquid,.has-refraction .lens{-webkit-backdrop-filter:blur(8px) url(#jp-liquid) saturate(180%);backdrop-filter:blur(8px) url(#jp-liquid) saturate(180%)}
/* nav */
nav.top{position:sticky;top:12px;z-index:50;margin:12px auto 0;width:min(var(--maxw,72rem),calc(100% - 1.5rem))}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .55rem .5rem 1.2rem;border-radius:999px}
.logo{font-weight:700;display:flex;gap:.5rem;letter-spacing:-.01em}.dmenu{display:none;gap:.25rem;font-size:.9rem;color:var(--muted)}
.menu a{display:block;padding:.4rem .9rem;border-radius:999px;transition:background .25s,color .25s}.menu a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 8%,transparent)}
.menu .current-menu-item>a,.menu .current_page_item>a{color:var(--text);background:color-mix(in srgb,var(--text) 12%,transparent)}
.themes{display:none;gap:2px;font-size:.75rem;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--text) 8%,transparent)}
.themes button{font:inherit;color:var(--muted);background:none;border:0;padding:.38rem .8rem;border-radius:999px;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.themes button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.burger{font:inherit;padding:.5rem .9rem}.mobile{display:none;margin-top:.5rem;padding:.75rem 1rem 1rem}.mobile.open{display:block}
.mobmenu{display:flex;flex-direction:column;margin-bottom:var(--mob-gap,1.75rem)}.themes-m{display:flex;width:fit-content}
@media(min-width:768px){.dmenu{display:flex}.themes{display:flex}.burger.btn,#burger{display:none}.mobile,.mobile.open{display:none}}
/* layout */
.py{padding:var(--sec-pad,4.5rem) 0}.hero{position:relative;padding:var(--hero-top,5.5rem) var(--wrap-pad,1.25rem) var(--hero-bot,3rem)}.grid{display:grid;gap:var(--gap,1rem)}
@media(min-width:640px){.c2,.c3{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.c3{grid-template-columns:repeat(3,1fr)}.wide{grid-column:span 2}}
.bento{display:grid;gap:var(--gap,1rem);grid-template-columns:repeat(2,1fr)}@media(min-width:768px){.bento{grid-template-columns:repeat(4,1fr)}}
.mt{margin-top:var(--blk,1rem)}.mt2{margin-top:calc(var(--blk,1rem)*2.5)}
h1.name{font-size:var(--h-name,5.5rem);font-weight:800;letter-spacing:var(--hls,-.04em);line-height:1;background:linear-gradient(120deg,var(--text) 35%,var(--accent) 75%,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.1em}
h1.name .dot{-webkit-text-fill-color:var(--accent)}.sub{font-size:var(--h-sub,1.9rem);font-weight:500;margin-top:1rem;color:var(--muted);letter-spacing:-.01em}
.tag{margin-top:1.5rem;max-width:40rem;font-size:var(--tag,1.15rem);color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:500;padding:.4rem .9rem;border-radius:999px;margin-bottom:1.5rem;background:color-mix(in srgb,var(--surface) 55%,transparent);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pl 2s infinite}@keyframes pl{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.sec-h{font-size:var(--sec-title,2.6rem);font-weight:700;letter-spacing:var(--hls,-.03em);line-height:1.1;margin-bottom:var(--sec-gap,2rem)}
.sec-h::after{content:"";display:block;width:3rem;height:4px;border-radius:4px;margin-top:.9rem;background:linear-gradient(90deg,var(--accent),var(--accent2))}.intro{max-width:42rem;margin:calc(var(--sec-gap,2rem)*-.5) 0 var(--sec-gap,2rem);color:var(--muted);font-size:1.05rem}
.lens{position:absolute;right:2rem;top:5rem;width:15rem;height:15rem;border-radius:50%;display:none;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),rgba(255,255,255,.04) 55%);border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 2px 8px rgba(255,255,255,.5),inset 0 -12px 30px color-mix(in srgb,var(--accent) 25%,transparent),0 30px 60px var(--sh);-webkit-backdrop-filter:blur(6px) saturate(190%);backdrop-filter:blur(6px) saturate(190%);animation:fl 9s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-18px) rotate(6deg)}}@media(min-width:1000px){.lens{display:block}}
.lens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.lens.has-photo{display:block;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 65%,transparent);box-shadow:inset 0 2px 8px rgba(255,255,255,.5),0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent),0 0 22px color-mix(in srgb,var(--accent) 55%,transparent),0 0 60px color-mix(in srgb,var(--accent) 32%,transparent),0 30px 60px var(--sh)}
.lens.has-photo::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.38),transparent 38%,transparent 66%,color-mix(in srgb,var(--accent) 20%,transparent));box-shadow:inset 0 2px 10px rgba(255,255,255,.55),inset 0 -16px 32px color-mix(in srgb,var(--accent) 24%,transparent)}
@media(max-width:999px){.lens.has-photo{position:relative;right:auto;top:auto;width:9.5rem;height:9.5rem;margin:0 0 1.5rem}}
@media(max-width:767px){.lens.has-photo{margin:0 auto 1.5rem}}
/* components */
.pad{padding:var(--card-pad,1.35rem 1.5rem)}.stat dt{color:var(--muted);font-size:.85rem}.stat{min-width:0}.stat dd{margin-top:.2rem;font-size:var(--stat-fs,2.4rem);white-space:nowrap;font-weight:700;letter-spacing:-.03em;background:linear-gradient(120deg,var(--text),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;gap:.5rem;align-items:center;padding:var(--btn-pad,.8rem 1.4rem);border-radius:var(--btn-radius,999px);font-weight:var(--btn-fw,600);font-size:var(--btn-fs,.95rem);text-transform:var(--btn-tt,none);letter-spacing:var(--btn-ls,normal);font-family:inherit;color:var(--text);cursor:pointer;background:color-mix(in srgb,var(--surface) 55%,transparent);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 1px 0 var(--hl);transition:transform .45s var(--ease),box-shadow .3s}
.btn:hover{transform:scale(1.06)}.btn:active{transform:scale(.97)}.btn.sm{padding:.45rem 1rem;font-size:.82rem}
.btn.p{border-color:transparent;color:var(--accent-ink);background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--accent2)));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 28px color-mix(in srgb,var(--accent) 40%,transparent)}
[data-theme=terminal] .btn{border-radius:var(--btn-radius,12px)}.burger.btn,[data-theme=terminal] .burger.btn{border-radius:999px;padding:.55rem 1rem;font-size:1rem;text-transform:none;letter-spacing:normal}.btns{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
.badge{display:inline-block;font-size:.75rem;padding:.22rem .7rem;border-radius:999px;color:var(--muted);background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);font-family:inherit}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}.chk{display:grid;gap:.4rem;color:var(--muted);font-size:.92rem}.chk li{display:flex;gap:.55rem}.chk .ic{color:var(--accent);margin-top:.25rem}
.st{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--accent)}.st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.lnk{display:flex;align-items:center;gap:.8rem}.lnk+.lnk{margin-top:.9rem}.lnk .ic{color:var(--accent);width:1.25rem;height:1.25rem}a.lnk:hover,.ul:hover{color:var(--accent)}.ul{text-decoration:underline;text-underline-offset:4px;margin-right:1rem}
.ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:14px;color:var(--accent-ink);background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:inset 0 1px 0 rgba(255,255,255,.5);flex:none}
/* timeline */
.tl{position:relative;display:grid;gap:1.25rem;padding-left:2rem}.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(var(--accent),var(--accent2),transparent)}
.tl-item{position:relative}.tl-item::before{content:"";position:absolute;left:-2rem;top:1.6rem;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent),0 0 18px var(--accent)}
.tl-d{font-size:.8rem;font-weight:600;color:var(--accent)}.bul{list-style:disc;padding-left:1.2rem;color:var(--muted)}.bul li+li{margin-top:.35rem}
/* forms */
label{display:block;font-size:.85rem;color:var(--muted);margin-top:.8rem}
input,textarea{display:block;width:100%;margin-top:.3rem;padding:.7rem .9rem;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:calc(var(--radius)*.55);background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text);font:inherit;transition:border-color .25s,box-shadow .25s}
input:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.hp{position:absolute;left:-9999px}.note{padding:.7rem 1rem;border:1px solid var(--accent);border-radius:14px;margin-bottom:1rem;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
footer.ft{padding:2.5rem 0 3rem;text-align:center;font-size:.875rem;color:var(--muted)}
pre{margin:0;white-space:pre-wrap;font:inherit}.code{padding:1.4rem;font-size:.875rem;overflow-x:auto}.k{color:#b26bff}.sg{color:#00ff88}.fn{color:#5ad1ff}
#tout{max-height:14rem;overflow-y:auto;white-space:pre-wrap;line-height:1.6}#tform{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
#tin{margin:0;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:.25rem 0;background:none;box-shadow:none}
/* window bar (Terminal theme) */
.bar{display:var(--bar);align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,transparent);font-size:11px;color:var(--muted)}
.bar i{width:11px;height:11px;border-radius:50%;background:#ff5f56;cursor:pointer;display:block;transition:transform .2s var(--ease)}.bar i:nth-child(2){background:#ffbd2e}.bar i:nth-child(3){background:#27c93f}.bar i:hover{transform:scale(1.4)}.bar span{margin-left:8px}
.card.min>:not(.bar){display:none}.card.max{position:fixed;inset:0;z-index:70;overflow:auto;border-radius:0;transform:none!important}
.only-t,.only-ti{display:none}[data-theme=terminal] .only-t{display:block}[data-theme=terminal] .only-ti{display:inline}[data-theme=terminal] .not-t{display:none}
[data-theme=terminal] .acc,[data-theme=terminal] .st{text-shadow:0 0 12px color-mix(in srgb,var(--accent) 45%,transparent)}[data-theme=terminal] .sub{color:var(--accent2)}
[data-theme=terminal] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;background:repeating-linear-gradient(0deg,rgba(0,255,136,.025) 0 1px,transparent 1px 3px)}
#boot{font-size:.75rem;min-height:5.5rem;margin-bottom:.75rem}#typed{min-height:1.5rem;font-size:.9rem;margin-top:.75rem}
/* reveal on scroll */
.js .card,.js .sec-h,.js .intro,.js .tag,.js .btns,.js .chip{opacity:0;translate:0 24px;scale:.98;transition:opacity .8s var(--d,0s),translate .8s var(--ease) var(--d,0s),scale .8s var(--ease) var(--d,0s),transform .55s var(--ease),border-color .3s,box-shadow .3s}
.js .in,.show .card,.show .sec-h,.show .intro,.show .tag,.show .btns,.show .chip{opacity:1!important;translate:none!important;scale:1!important}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.js .card,.js .sec-h,.js .intro,.js .tag,.js .btns,.js .chip{opacity:1;translate:none;scale:1}}

/* grids, hero line */
.stats-grid{grid-template-columns:repeat(var(--stat-cols,2),1fr)}.links-grid{grid-template-columns:repeat(var(--card-cols,2),1fr)}
html[data-chip="0"] .chip,html[data-chip-t="0"][data-theme=terminal] .chip{display:none}

/* social links, certificate cards, preview box */
.socs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.soc{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .85rem;border-radius:999px;font-size:.875rem;background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);transition:transform .45s var(--ease),color .25s,border-color .25s}
.soc:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px) scale(1.04)}.soc svg{width:1.15em;height:1.15em;flex:none}
.certc{display:flex;gap:1rem;align-items:center;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1rem;background:rgba(3,6,18,.8);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lb[hidden]{display:none}.lb figure{margin:0;position:relative;max-width:100%;text-align:center}
.lb canvas{max-width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.28);box-shadow:0 30px 80px rgba(0,0,0,.6);pointer-events:none}
.lb-shield{position:absolute;inset:0}.lb figcaption{margin-top:.8rem;color:#fff;font-size:.9rem}
.lb-x{position:absolute;top:1rem;right:1rem;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font:inherit;cursor:pointer;z-index:2}
.lb.veil canvas{filter:blur(28px);opacity:.2}
@media print{.lb,.lb *{display:none!important}}

.lb-stage{position:relative;display:inline-block;line-height:0}.lb-link{margin-top:.7rem}.lb-link[hidden]{display:none}.lb-link::after{content:"\2197"}
.note[hidden]{display:none}.note.bad{border-color:#f87171;color:#f87171;background:color-mix(in srgb,#f87171 10%,transparent)}