/* ==========================================================================
   enhancements.css — styles for the JavaScript-driven features.
   Base/shared styles (including .card-tab) live in style.css.
   ========================================================================== */

:root{
  --error:#E5806C;          /* brighter than --red so it is readable on dark surfaces */
  --error-bg:rgba(229,128,108,0.10);
}

/* phone nav */
.nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:40px; height:36px; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--border-strong); border-radius:6px;
  transition:border-color .15s ease;
}
.nav-toggle span{
  display:block; width:18px; height:2px; background:var(--text-dim); border-radius:1px;
  transition:transform .2s ease, opacity .2s ease, background .15s ease;
}
.nav-toggle:hover{border-color:var(--green);}
.nav-toggle:hover span{background:var(--green);}
.nav-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width:640px){
  .nav-toggle{display:flex;}
  header .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:6px 32px 18px;
    background:rgba(10,11,13,0.97); border-bottom:1px solid var(--border);
  }
  header .navlinks.open{display:flex;}
  header .navlinks.open a:not(.branch){
    display:block; padding:13px 0; font-size:14px; border-bottom:1px solid var(--border);
  }
  header .navlinks .branch{align-self:flex-start; margin-top:16px;}
}

/* quote gen*/
.inspire-section{padding:0 0 24px;}
.quote-card{
  background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.quote-body{padding:34px 32px 24px;}
.quote-text{
  font-family:var(--mono); font-size:clamp(17px,2.4vw,22px); font-weight:500; line-height:1.5;
  color:var(--text); margin:0 0 14px; max-width:62ch;
}
.quote-author{font-family:var(--mono); font-size:13px; color:var(--green);}
.quote-actions{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:0 32px 30px;
}
.quote-actions .btn{cursor:pointer;}
.quote-hint{font-family:var(--mono); font-size:12px; color:var(--text-faint);}
.quote-fade{animation:quoteIn .4s ease;}
@keyframes quoteIn{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}
@media (max-width:640px){
  .quote-body{padding:26px 20px 18px;}
  .quote-actions{padding:0 20px 24px;}
}

/* contact checker */
.form-box .form-control.has-error{
  border-color:var(--error); background:var(--error-bg);
  background-image:none; padding-right:14px;
}
.form-box .form-control.has-error:focus{box-shadow:0 0 0 3px rgba(229,128,108,0.2);}
.form-box .form-control.is-ok{
  border-color:rgba(111,207,151,0.55); background-image:none; padding-right:14px;
}
.form-box .form-control.is-ok:focus{border-color:var(--green);}

.field-error{
  font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--error);
  margin-top:8px; min-height:0;
}
.field-error:empty{display:none;}
.field-error::before{content:'! '; font-weight:700;}

.label-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px;}
.label-row .form-label{margin-bottom:0;}
.char-counter{font-family:var(--mono); font-size:12px; color:var(--text-faint); transition:color .15s ease;}
.char-counter.is-warn{color:var(--amber);}
.char-counter.is-limit{color:var(--error);}

.counter-bar{height:3px; background:var(--border); border-radius:2px; margin-top:8px; overflow:hidden;}
.counter-fill{height:100%; width:0; background:var(--green); border-radius:2px; transition:width .12s ease, background .15s ease;}
.counter-fill.is-warn{background:var(--amber);}
.counter-fill.is-limit{background:var(--error);}

.limit-alert{
  margin-top:10px; padding:10px 14px; border-radius:6px;
  font-family:var(--mono); font-size:12.5px; line-height:1.5;
  color:var(--error); background:var(--error-bg); border:1px solid rgba(229,128,108,0.4);
}
.limit-alert[hidden]{display:none;}

.form-status{
  margin-top:22px; padding:12px 16px; border-radius:6px;
  font-family:var(--mono); font-size:13px; line-height:1.5;
}
.form-status[hidden]{display:none;}
.form-status-error{color:var(--error); background:var(--error-bg); border:1px solid rgba(229,128,108,0.4);}
.form-status-success{color:var(--green); background:rgba(111,207,151,0.08); border:1px solid rgba(111,207,151,0.4);}

/* projects*/
.filter-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-12px 0 32px;
}
.filter-label{font-family:var(--mono); font-size:12px; color:var(--text-faint); margin-right:4px;}
.filter-btn{
  font-family:var(--mono); font-size:12.5px; padding:7px 14px; border-radius:6px; cursor:pointer;
  background:transparent; color:var(--text-dim); border:1px solid var(--border-strong);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.filter-btn:hover{color:var(--text); border-color:var(--text-dim);}
.filter-btn.active{color:#0A0B0D; background:var(--green); border-color:var(--green); font-weight:600;}
.filter-count{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--text-faint);}
.project-item[hidden]{display:none !important;}
.filter-in{animation:filterIn .3s ease;}
@keyframes filterIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
@media (max-width:520px){ .filter-count{margin-left:0; width:100%;} }

/* back to top function */
.back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:42px; height:42px; border-radius:8px; cursor:pointer;
  font-family:var(--mono); font-size:18px; line-height:1;
  color:var(--text-dim); background:var(--surface); border:1px solid var(--border-strong);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s, color .15s ease, border-color .15s ease;
}
.back-to-top.visible{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top:hover{color:var(--green); border-color:var(--green);}


@media (prefers-reduced-motion:reduce){
  .quote-fade, .filter-in{animation:none;}
  .counter-fill, .back-to-top, .nav-toggle span{transition:none;}
}