/* =====================================================
   Kassa Solutions Career Tools — Final Clean Layout
   ATS Checker + Cover Letter Builder
===================================================== */

.career-tool-page{
  background:
    radial-gradient(circle at 15% 10%, rgba(45,212,191,.15), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(14,165,233,.12), transparent 28%),
    #f6f9fc;
}

.career-tool-hero{
  padding: 96px 20px 44px;
  text-align: center;
  background: linear-gradient(180deg, rgba(240,253,250,.9), rgba(248,250,252,0));
}

.career-tool-hero .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(20,184,166,.12);
  color:#0f766e;
  font-weight:900;
  margin-bottom:20px;
}

.career-tool-hero h1{
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height:1.06;
  margin:0 auto 18px;
  color:#071b35;
  max-width:1050px;
}

.career-tool-hero .accent-line{
  width:128px;
  height:7px;
  border-radius:999px;
  margin:0 auto 24px;
  background:linear-gradient(90deg,#22d3c5,#f7d960);
}

.career-tool-hero p{
  color:#526173;
  font-size:clamp(1.05rem, 1.8vw, 1.35rem);
  line-height:1.75;
  max-width:920px;
  margin:0 auto;
}

.tool-shell{
  width:min(1180px, calc(100% - 32px));
  margin:34px auto 90px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:34px;
  box-shadow:0 24px 80px rgba(15,23,42,.08);
  overflow:hidden;
}

.tool-form-card{
  padding:38px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.tool-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
}

.tool-grid.cover-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.field-group{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.field-group.full{
  grid-column:1 / -1;
}

.field-group label{
  font-size:1rem;
  font-weight:900;
  color:#071b35;
}

.field-group input,
.field-group textarea,
.field-group select{
  width:100%;
  min-width:0;
  display:block;
  appearance:none;
  background:#ffffff;
  border:2px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:16px 18px;
  color:#071b35;
  font:600 1rem/1.5 Inter, Poppins, system-ui, Arial, sans-serif;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.field-group textarea{
  min-height:170px;
  resize:vertical;
}

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus{
  outline:none;
  border-color:#14b8a6;
  box-shadow:0 0 0 5px rgba(20,184,166,.16), 0 14px 36px rgba(15,23,42,.07);
}

.form-help{
  color:#64748b;
  font-size:.93rem;
  line-height:1.55;
}

.tool-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
}

.tool-btn{
  min-height:58px;
  border:0;
  border-radius:999px;
  padding:0 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  font-size:1rem;
  font-weight:950;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}

.tool-btn:hover{
  transform:translateY(-2px);
}

.tool-btn.primary{
  background:linear-gradient(135deg,#22d3c5,#0ea5e9);
  color:#06172a;
  box-shadow:0 16px 42px rgba(14,165,233,.22);
}

.tool-btn.secondary{
  background:#fff;
  color:#071b35;
  border:2px solid rgba(15,23,42,.09);
  box-shadow:0 12px 30px rgba(15,23,42,.06);
}

.tool-results{
  padding:38px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
}

.results-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:26px;
}

.results-heading h2{
  margin:0;
  color:#071b35;
  font-size:2rem;
}

.ats-score-circle{
  width:132px;
  height:132px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at center,#fff 56%,transparent 57%),
    conic-gradient(#14b8a6 calc(var(--score, 0) * 1%), #e2e8f0 0);
  box-shadow:0 12px 36px rgba(20,184,166,.18);
}

.ats-score-circle strong{
  color:#071b35;
  font-size:2rem;
  font-weight:950;
}

.ats-results-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.result-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  padding:26px;
  box-shadow:0 12px 36px rgba(15,23,42,.05);
}

.result-card.full{
  grid-column:1 / -1;
}

.result-card h3{
  margin:0 0 16px;
  color:#071b35;
  font-size:1.25rem;
}

.keyword-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:#475569;
  line-height:1.7;
}

.keyword-tag{
  padding:9px 14px;
  border-radius:999px;
  font-weight:850;
  font-size:.92rem;
}

.keyword-tag.matched{
  background:rgba(16,185,129,.12);
  color:#047857;
}

.keyword-tag.missing{
  background:rgba(239,68,68,.12);
  color:#b91c1c;
}

.recommendation-list{
  margin:0;
  padding-left:20px;
  color:#334155;
  line-height:1.8;
}

.professional-cover-letter{
  width:min(850px,100%);
  margin:0 auto;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:26px;
  padding:64px;
  box-shadow:0 18px 52px rgba(15,23,42,.06);
  color:#111827;
  font-family:Georgia, "Times New Roman", serif;
  font-size:17px;
  line-height:1.85;
}

.letter-top{
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-bottom:2px solid #071b35;
  padding-bottom:18px;
  margin-bottom:28px;
}

.letter-top h3{
  margin:0 0 6px;
  font-size:2rem;
  color:#071b35;
}

.letter-contact{
  text-align:right;
  color:#475569;
  font-family:Inter, system-ui, Arial, sans-serif;
  line-height:1.6;
}

.letter-date,
.letter-company{
  margin-bottom:26px;
  color:#111827;
}

.letter-body{
  white-space:pre-line;
  margin-bottom:34px;
}

.letter-signature{
  margin-top:30px;
}

.letter-signature h4{
  margin:6px 0 0;
  color:#071b35;
  font-size:1.25rem;
}

.empty-preview{
  text-align:center;
  color:#64748b;
  font-family:Inter, system-ui, Arial, sans-serif;
  padding:34px 20px;
}

@media(max-width:860px){
  .tool-grid,
  .tool-grid.cover-grid,
  .ats-results-grid{
    grid-template-columns:1fr;
  }

  .tool-form-card,
  .tool-results{
    padding:24px;
  }

  .tool-shell{
    width:calc(100% - 22px);
    border-radius:24px;
  }

  .tool-actions{
    flex-direction:column;
  }

  .tool-btn{
    width:100%;
  }

  .career-tool-hero{
    padding:72px 14px 28px;
  }

  .professional-cover-letter{
    padding:28px;
    font-size:15.5px;
  }

  .letter-top{
    flex-direction:column;
  }

  .letter-contact{
    text-align:left;
  }

  .ats-score-circle{
    width:108px;
    height:108px;
  }
}

/* Print only the cover letter, not the website header/footer */
@media print{
  body.print-cover-letter *{
    visibility:hidden!important;
  }

  body.print-cover-letter #coverLetterOutput,
  body.print-cover-letter #coverLetterOutput *{
    visibility:visible!important;
  }

  body.print-cover-letter #coverLetterOutput{
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:48px!important;
    box-shadow:none!important;
    border:none!important;
    border-radius:0!important;
  }

  body.print-cover-letter .site-header,
  body.print-cover-letter .site-footer{
    display:none!important;
  }
}