/* styles/styles.css - reset e estilos principais */
:root{
  --accent:#0f6;
  --bg:#f7f9fb;
  --card:#ffffff;
  --muted:#70778a;
  --header-height:72px;
  --max-width:1100px;
  --glass: rgba(255,255,255,0.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#eef3f8 0%, #f7fbff 100%);
  color:#111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* container */
.container{width:calc(100% - 40px); max-width:var(--max-width); margin:0 auto;}

/* header */
.site-header{
  position:fixed; top:0; left:0; right:0; height:var(--header-height);
  background: rgba(255,255,255,0.85); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(12,20,40,0.06);
  z-index:1000;
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; height:100%;}
.site-header h1{font-size:18px; margin:0; letter-spacing:0.2px}
.site-header nav a{margin-left:16px; text-decoration:none; color:#223; font-weight:600}
.site-header .btn{background:var(--accent); color:#012; padding:8px 12px; border-radius:8px; text-decoration:none}

/* main spacing to avoid header overlap */
main{padding-top:calc(var(--header-height) + 24px); padding-bottom:80px}

/* hero */
.hero{background:linear-gradient(90deg, rgba(15,150,120,0.06), rgba(10,80,200,0.02)); padding:28px; border-radius:12px; margin-bottom:20px; box-shadow: 0 6px 20px rgba(13,30,60,0.03)}
.hero h2{margin:0 0 6px 0}
.hero p{margin:0;color:var(--muted)}

/* grid de vagas */
.jobs-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:18px;}
.job-card{
  background:var(--card); border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
  transition: transform .22s ease, box-shadow .22s ease; box-shadow: 0 6px 18px rgba(15,30,60,0.04);
}
.job-card:hover{transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15,30,60,0.08);}
.job-card img{width:100%; height:160px; object-fit:cover;}
.job-info{padding:14px; display:flex; flex-direction:column; gap:8px;}
.job-info h3{margin:0; font-size:18px}
.job-info .salary{color:var(--accent); font-weight:700}
.job-info .desc{color:var(--muted); font-size:14px; max-height:84px; overflow:hidden;}

/* botão candidatar */
.btn.apply{display:inline-block; margin-top:8px; text-decoration:none; padding:10px 12px; border-radius:9px; background:linear-gradient(90deg,#0ea;border-radius:9px); color:#002; font-weight:700; text-align:center}

/* ad slot */
.ad-slot{margin:18px 0; display:flex; justify-content:center}
.ad-placeholder{width:320px; height:100px; border-radius:8px; background:linear-gradient(180deg,#ffffff,#f2f6fb); display:flex; align-items:center; justify-content:center; border:1px dashed rgba(140,160,180,0.18)}
.ad-placeholder .ad-inner{ text-align:center; color:var(--muted)}

/* footer */
.site-footer{position:fixed; left:0; right:0; bottom:0; background: rgba(255,255,255,0.95); padding:10px 0; text-align:center; font-size:14px; border-top:1px solid rgba(0,0,0,0.03);}

/* contato */
.contact-card{background:var(--card); padding:18px; border-radius:10px; box-shadow:0 8px 30px rgba(12,20,30,0.04); max-width:760px; margin:0 auto}

/* admin */
.admin-wrap{max-width:920px; margin: 0 auto; display:grid; gap:16px;}
.controls{display:flex; gap:10px; flex-wrap:wrap}
.input, textarea, select{width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(12,20,30,0.06); background: #fff}

/* small helpers */
.muted{color:var(--muted)}
.center{text-align:center}
.small{font-size:13px; padding:6px 8px}

/* responsive tweaks */
@media (max-width:640px){
  .job-card img{height:140px}
  .site-header nav a{display:none}
  .site-header .btn{padding:8px}
}