/*
 * custom.css
 * Your own CSS goes here. It loads after the theme styles, so you can
 * override anything. Back this file up before updating the theme.
 */

/* GitHub / LinkedIn icons next to the theme toggle */
.social-links{display:inline-flex;align-items:center;gap:.9rem;margin-right:.9rem}
.social-links a{color:inherit;font-size:1.15rem;line-height:1;text-decoration:none}
.social-links a:hover{color:var(--q2-link)}

/* larger social icons */
.social-links{gap:1.2rem;margin-right:1.2rem}
.social-links a{font-size:1.75rem}

/* social icons: match theme toggle size, add spacing */
.social-links{
  --icon-size:1.35rem;
  display:inline-flex;
  align-items:center;
  gap:1.4rem;
  margin-right:1.4rem;
}
.social-links a{
  font-size:var(--icon-size);
  line-height:1;
  display:inline-flex;
  align-items:center;
}

/* social icons: same box and icon size as the theme toggle */
.social-links{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-right:.5rem;
}
#header .social-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  font-size:16px;
  line-height:1;
  border-radius:8px;
  color:inherit;
}
#header .social-links a:hover{
  background:var(--q2-bg-muted);
}

/* success messages (e.g. "You have been successfully logged in") fade out */
#messages .toast.info{
  animation: toast-fade 0.5s ease 4s forwards;
}
@keyframes toast-fade{
  to{opacity:0;visibility:hidden;max-height:0;margin:0;padding:0;overflow:hidden}
}

/* portfolio front page */
.pf{max-width:1040px;margin:0 auto;padding:1rem 0 4rem}

.pf-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:center;padding:1.2rem 0 3.5rem}
.pf-eyebrow{display:inline-flex;align-items:center;gap:.5rem;text-transform:uppercase;letter-spacing:.2em;
  font-size:.75rem;font-weight:700;color:var(--q2-accent,#0d9488);margin:0 0 .9rem}
.pf-dot-pulse{width:7px;height:7px;border-radius:50%;background:var(--q2-accent,#0d9488);position:relative}
.pf-dot-pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--q2-accent,#0d9488);
  animation:pf-pulse 1.8s ease-out infinite}
@keyframes pf-pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}
.pf-name{font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 .55rem;
  background:linear-gradient(135deg,var(--q2-text,#f3f3f3) 35%,var(--q2-accent,#0d9488));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pf-tag{margin:.3rem 0 1.4rem}
.pf-intro{line-height:1.75;opacity:.68;font-size:.99rem;max-width:480px}
.pf-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.9rem}
.pf-btn{padding:.68rem 1.3rem;border-radius:999px;border:1px solid rgba(128,128,128,.3);
  text-decoration:none;color:inherit;font-weight:600;font-size:.9rem;transition:all .18s ease;
  display:inline-flex;align-items:center;gap:.5rem;background:var(--q2-bg,transparent)}
.pf-btn:hover{border-color:var(--q2-accent,#0d9488);transform:translateY(-2px)}
.pf-btn.primary{background:var(--q2-accent,#0d9488);border-color:transparent;color:#fff}
.pf-btn.primary:hover{filter:brightness(1.1)}

.pf-hero-art{display:flex;justify-content:center}
.pf-term{width:100%;max-width:340px;border-radius:14px;overflow:hidden;border:1px solid rgba(128,128,128,.25);
  background:#0a0f0e;box-shadow:0 20px 60px -20px color-mix(in oklab,var(--q2-accent,#0d9488) 45%,transparent);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pf-term-bar{display:flex;gap:.4rem;padding:.7rem .9rem;background:rgba(255,255,255,.04)}
.pf-term-bar span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.pf-term-bar span:first-child{background:#ff5f57}.pf-term-bar span:nth-child(2){background:#febc2e}.pf-term-bar span:nth-child(3){background:#28c840}
.pf-term-body{padding:1.1rem 1.1rem 1.4rem;font-size:.82rem;line-height:1.95;color:#c9e9e3}
.pf-prompt{color:var(--q2-accent,#0d9488);margin-right:.4rem}
.pf-out{color:#8fb8b0;margin:0 0 .55rem;padding-left:1.1rem}
.pf-cursor{animation:pf-blink 1s step-end infinite}
@keyframes pf-blink{50%{opacity:0}}

.pf-sec{padding:3.4rem 0;border-top:1px solid rgba(128,128,128,.14);opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s ease}
.pf-sec.is-visible{opacity:1;transform:none}
.pf-h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.2em;font-weight:700;
  color:var(--q2-accent,#0d9488);margin:0 0 1.7rem}

.pf-about-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:2.2rem;align-items:start}
.pf-about{line-height:1.85;font-size:1.02rem;opacity:.82;margin:0}
.pf-stats{display:grid;gap:.8rem}
.pf-stats div{padding:1.1rem 1.2rem;border-radius:14px;border:1px solid rgba(128,128,128,.22);
  display:flex;justify-content:space-between;align-items:baseline}
.pf-stats strong{font-size:1.6rem;color:var(--q2-accent,#0d9488)}
.pf-stats span{font-size:.8rem;opacity:.65;text-transform:uppercase;letter-spacing:.08em}

.pf-skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.8rem}
.pf-skill{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border-radius:12px;
  border:1px solid rgba(128,128,128,.18);font-size:.95rem;transition:border-color .15s ease,transform .15s ease}
.pf-skill:hover{border-color:var(--q2-accent,#0d9488);transform:translateX(3px)}
.pf-skill-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in oklab,var(--q2-accent,#0d9488) 16%,transparent);color:var(--q2-accent,#0d9488);flex:none;font-size:.88rem}

.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.pf-card{position:relative;padding:1.5rem 1.6rem;border-radius:16px;border:1px solid rgba(128,128,128,.2);
  text-decoration:none;color:inherit;transition:all .2s ease;background:var(--q2-bg-muted,rgba(128,128,128,.04))}
.pf-card:hover{border-color:var(--q2-accent,#0d9488);transform:translateY(-4px);
  box-shadow:0 14px 34px -16px color-mix(in oklab,var(--q2-accent,#0d9488) 55%,transparent)}
.pf-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem}
.pf-card-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in oklab,var(--q2-accent,#0d9488) 16%,transparent);color:var(--q2-accent,#0d9488);font-size:.82rem}
.pf-arrow{opacity:.25;transition:all .18s ease;font-size:.85rem}
.pf-card:hover .pf-arrow{opacity:1;transform:translateX(3px);color:var(--q2-accent,#0d9488)}
.pf-card h3{margin:0 0 .25rem;font-size:1.05rem}
.pf-card p{margin:0;opacity:.58;font-size:.88rem}

.pf-contact{text-align:center}
.pf-contact p{max-width:460px;margin:0 auto 1.6rem;line-height:1.75;opacity:.76}
.pf-contact .pf-actions{justify-content:center}

@media (max-width:860px){
  .pf-hero{grid-template-columns:1fr;text-align:center;padding:3.5rem 0 3rem}
  .pf-hero-text{order:2}.pf-hero-art{order:1}
  .pf-intro{margin:0 auto}.pf-actions{justify-content:center}
  .pf-about-grid{grid-template-columns:1fr}
  .pf-stats{grid-template-columns:repeat(3,1fr)}
  .pf-stats div{flex-direction:column;gap:.2rem;text-align:center}
  .pf-sec{padding:2.4rem 0}
}

/* trim the default top gap above the page content on the portfolio */
.pf{margin-top:-1.5rem}
@media (max-width:860px){.pf-hero{padding:1rem 0 2.5rem}.pf{margin-top:-.5rem}}

/* highlighted tagline badge */
.pf-tag-mark{display:inline-block;font-size:1.08rem;font-weight:600;line-height:1.5;
  padding:.55rem 1.1rem;border-radius:10px;
  background:color-mix(in oklab,var(--q2-accent,#0d9488) 14%,transparent);
  border-left:3px solid var(--q2-accent,#0d9488);color:var(--q2-text,#f3f3f3)}
@media (max-width:860px){.pf-tag-mark{font-size:1rem}}