/* =========================================================
   CALCULAXY — CONSTRUCTION TOOL STYLES
   Construction calculator pages
   Matches the shared Calculaxy theme: #38b6ff + white
   Responsive for desktop, tablet and mobile
   ========================================================= */

.tool-hero{
  background:linear-gradient(180deg,var(--surface),var(--white));
  padding:48px 0 38px;
  border-bottom:1px solid var(--border);
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:800;
  color:var(--primary-dark);
  margin-bottom:10px;
}
.tool-hero h1{
  font-size:40px;
  max-width:800px;
  margin-bottom:12px;
}
.tool-intro{
  font-size:17px;
  max-width:800px;
  margin:0;
}

.calculator-section{
  padding:48px 0;
  background:var(--surface);
}
.tool-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.7fr);
  gap:28px;
  align-items:start;
}
.calculator-card,
.side-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.calculator-card{padding:28px}
.card-heading h2,
.side-card h2{
  font-size:21px;
  margin-bottom:8px;
}
.card-heading p{
  font-size:14.5px;
  margin:0 0 24px;
}

.calc-form,
.simple-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.field.full{grid-column:1/-1}
.field label{
  font-weight:700;
  font-size:14px;
}
.field input,
.field select{
  width:100%;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--white);
  font:inherit;
  color:var(--ink);
  outline:none;
}
.field input:focus,
.field select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-tint);
}
.field small{
  font-size:12.5px;
  color:var(--slate);
}
.btn-row{
  grid-column:1/-1;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.form-note{
  grid-column:1/-1;
  font-size:12.5px;
  margin:0;
}
.form-error{
  grid-column:1/-1;
  background:#fff2f2;
  border:1px solid #f0c8c8;
  color:#9d3333;
  border-radius:8px;
  padding:11px 13px;
  font-size:13.5px;
}

.result-panel{
  margin-top:28px;
  border-top:1px solid var(--border);
  padding-top:24px;
}
.result-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.result-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  color:var(--primary-dark);
  margin:0 0 4px;
}
.result-heading h2{
  font-size:28px;
  margin:0;
  overflow-wrap:anywhere;
}
.result-method{
  font-size:12px;
  font-weight:800;
  background:var(--primary-tint);
  color:var(--primary-dark);
  padding:6px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.breakdown{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:18px;
}
.breakdown div{
  border:1px solid var(--border);
  border-radius:9px;
  padding:13px 14px;
  background:var(--surface);
}
.breakdown span{
  display:block;
  font-size:12px;
  color:var(--slate);
  margin-bottom:5px;
}
.breakdown strong{
  font-size:16px;
  word-break:break-word;
}
.result-note{
  font-size:13px;
  color:var(--slate);
  margin-top:14px;
}
.result-note.warning{
  background:#fffaf0;
  border:1px solid #eadbb7;
  border-radius:8px;
  padding:12px 13px;
  color:#66552d;
}

.tool-sidebar{
  display:grid;
  gap:18px;
}
.side-card{padding:22px}
.side-card h2{font-size:18px}
.side-card p{font-size:14px}
.check-list{
  list-style:disc;
  padding-left:20px;
  color:var(--slate);
  font-size:14px;
}
.check-list li{margin:7px 0}
.related-side a,
.content-sidebar a{
  display:block;
  padding:11px 0;
  border-top:1px solid var(--border);
  font-size:14px;
  font-weight:700;
  color:var(--primary-dark);
}
.related-side a:first-of-type,
.content-sidebar a:first-of-type{
  border-top:0;
}
.related-side a:hover,
.content-sidebar a:hover{
  color:var(--ink);
}

.content-section{padding:72px 0}
.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.7fr);
  gap:48px;
  align-items:start;
}
.article-content h2{
  font-size:25px;
  margin:34px 0 10px;
}
.article-content h2:first-child{margin-top:0}
.article-content h3{
  font-size:18px;
  margin-top:26px;
}
.article-content p{font-size:15.5px}

.formula-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--primary);
  border-radius:10px;
  padding:20px;
  margin:24px 0;
}
.formula-box h3{
  font-size:17px;
  margin-bottom:12px;
}
.formula-box p{
  margin:5px 0;
  text-align:center;
}

.example-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:18px 20px;
  margin:18px 0;
}
.example-box p{margin:5px 0}

.faq-list{
  border-top:1px solid var(--border);
  margin-top:18px;
}
.faq-list details{
  border-bottom:1px solid var(--border);
  padding:16px 0;
}
.faq-list summary{
  cursor:pointer;
  font-weight:700;
  color:var(--ink);
  padding-right:20px;
}
.faq-list summary:hover{color:var(--primary-dark)}
.faq-list details p{
  margin:10px 0 0;
  font-size:14.5px;
}

.content-sidebar{
  display:grid;
  gap:18px;
}
.note-card{
  margin-top:18px;
  background:var(--surface);
}

@media(max-width:900px){
  .tool-layout,
  .content-grid{
    grid-template-columns:1fr;
  }
  .tool-sidebar{
    grid-template-columns:1fr 1fr;
  }
  .content-sidebar{
    grid-template-columns:1fr 1fr;
  }
  .note-card{margin-top:0}
}

@media(max-width:720px){
  .tool-hero{padding:38px 0 30px}
  .tool-hero h1{
    font-size:30px;
    line-height:1.25;
  }
  .tool-intro{font-size:15.5px}
  .calculator-section,
  .content-section{
    padding:44px 0;
  }
  .calculator-card{padding:20px}
  .calc-form,
  .simple-form{
    grid-template-columns:1fr;
  }
  .field.full,
  .btn-row,
  .form-note,
  .form-error{
    grid-column:auto;
  }
  .tool-sidebar,
  .content-sidebar{
    display:block;
  }
  .side-card{margin-top:16px}
  .result-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .result-method{
    white-space:normal;
  }
  .breakdown{
    grid-template-columns:1fr;
  }
  .article-content h2{
    font-size:22px;
  }
  .article-content p{
    font-size:15px;
  }
}

@media(max-width:420px){
  .calculator-card{padding:17px}
  .btn-row{
    flex-direction:column;
  }
  .btn-row .btn{
    width:100%;
  }
  .result-heading h2{font-size:24px}
}