/* ============================================================
   toolpages.css — unified design for ALL A-to-Z tool pages
   (output/* views). Loaded ONLY on tool pages via header.php.
   Aligns the 187 per-tool templates with the site design system
   (tokens.css: #3a86c4 accent, Space Grotesk/Inter, 8px radius)
   without editing each template. — A2
   ============================================================ */

/* tool title */
.main-container h2#title,
.main-container .tool_heading {
    font-family: 'Space Grotesk', 'Sora', sans-serif;
    color: #14161A;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* inputs */
.main-container .form-control {
    border: 1px solid #c5ccd4;
    border-radius: 8px;
    box-shadow: none;
    padding: 10px 13px;
    height: auto;
    font-size: 14.5px;
}
.main-container .form-control:focus {
    border-color: #3a86c4;
    box-shadow: 0 0 0 3px rgba(58, 134, 196, .12);
}
.main-container textarea.form-control { border-radius: 10px; }
.main-container .input-group-addon { border-radius: 8px 0 0 8px; border: 1px solid #c5ccd4; background: #f7f9fb; }
.main-container .input-group .form-control { border-radius: 0 8px 8px 0; }

/* unified buttons: every "action" button → one primary style */
.main-container .btn.btn-info,
.main-container .btn.btn-success,
.main-container .btn.btn-primary {
    background: #3a86c4;
    border: 1px solid #3a86c4;
    color: #fff;
    border-radius: 8px;
    font-family: 'Sora', 'Space Grotesk', sans-serif;
    font-weight: 600;
    box-shadow: none;
    background-image: none;
    text-shadow: none;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.main-container .btn.btn-info:hover,  .main-container .btn.btn-info:focus,
.main-container .btn.btn-success:hover, .main-container .btn.btn-success:focus,
.main-container .btn.btn-primary:hover, .main-container .btn.btn-primary:focus {
    background: #2f6ea3;
    border-color: #2f6ea3;
    color: #fff;
    box-shadow: 0 6px 16px rgba(58, 134, 196, .25);
}
/* destructive stays visually distinct but in the same shape */
.main-container .btn.btn-danger {
    background: #fff;
    border: 1px solid #e2b6b6;
    color: #c0392b;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: none;
    background-image: none;
    text-shadow: none;
}
.main-container .btn.btn-danger:hover, .main-container .btn.btn-danger:focus {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}
.main-container .btn.btn-default {
    background: #fff;
    border: 1px solid #d9dee4;
    color: #3a3f46;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: none;
    background-image: none;
}
.main-container .btn.btn-default:hover { border-color: #3a86c4; color: #2f6ea3; }

/* result/content tables */
.main-container .table.table-bordered {
    border: 1px solid #DFE2E6;
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.main-container .table.table-bordered > thead > tr > th {
    background: #f7f9fb;
    border: 0;
    border-bottom: 1px solid #DFE2E6;
    color: #6B7178;
    font-family: 'Space Grotesk', 'Sora', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.main-container .table.table-bordered > tbody > tr > td {
    border: 0;
    border-top: 1px solid #EDEFF1;
    vertical-align: middle;
}

/* error / info alerts on tool pages */
.main-container .alert.alert-error,
.main-container .alert.alert-danger {
    background: #fdf3f2;
    border: 1px solid #efc9c5;
    color: #8c2f28;
    border-radius: 10px;
}

/* about/help text under tools */
.main-container .about_tool { color: #3A3F46; line-height: 1.65; }
.main-container .about_tool h1, .main-container .about_tool h2,
.main-container .about_tool h3, .main-container .about_tool h4 {
    font-family: 'Space Grotesk', 'Sora', sans-serif;
    color: #14161A;
}