/* Olalim tool pages: retheme legacy page variables and Bootstrap to the clean green look. Load last in <head>. */
:root {
    --primary: #12a150;
    --primary-dark: #0f8743;
    --primary-light: #8fd8ad;
    --bg-color: #f6f7f8;
    --card-bg: #ffffff;
    --text-dark: #111111;
    --text-light: #5f6368;
    --border-color: #e5e7eb;
    --bs-primary: #12a150;
    --bs-primary-rgb: 18, 161, 80;
    --bs-link-color: #0f8743;
    --bs-link-color-rgb: 15, 135, 67;
    --bs-link-hover-color: #0d7a3c;
    --bs-link-hover-color-rgb: 13, 122, 60;
    --bs-body-font-family: var(--ol-font);
    --bs-border-color: #e5e7eb;
    --bs-border-radius: 8px;
    --bs-border-radius-lg: 12px;
    --bs-primary-bg-subtle: #e8f7ee;
    --bs-primary-text-emphasis: #0b6b35;
    --bs-primary-border-subtle: #b9e6cb;
}

body { font-family: var(--ol-font); color: var(--ol-text); background-color: var(--bg-color); -webkit-font-smoothing: antialiased; }
::selection { background: var(--ol-accent-soft); color: #006b31; }

.btn { font-weight: 500; }
.btn-primary {
    --bs-btn-bg: #12a150; --bs-btn-border-color: #12a150;
    --bs-btn-hover-bg: #0f8743; --bs-btn-hover-border-color: #0f8743;
    --bs-btn-active-bg: #0d7a3c; --bs-btn-active-border-color: #0d7a3c;
    --bs-btn-disabled-bg: #12a150; --bs-btn-disabled-border-color: #12a150;
    --bs-btn-focus-shadow-rgb: 18, 161, 80;
}
.btn-outline-primary {
    --bs-btn-color: #0f8743; --bs-btn-border-color: #12a150;
    --bs-btn-hover-bg: #12a150; --bs-btn-hover-border-color: #12a150; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #0f8743; --bs-btn-active-border-color: #0f8743; --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #12a150; --bs-btn-disabled-border-color: #12a150;
    --bs-btn-focus-shadow-rgb: 18, 161, 80;
}
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #12a150; box-shadow: 0 0 0 3px rgba(18, 161, 80, .15); }
.form-check-input:checked { background-color: #12a150; border-color: #12a150; }
.form-range::-webkit-slider-thumb { background-color: #12a150; }
.form-range::-moz-range-thumb { background-color: #12a150; }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(18, 161, 80, .25); }
.nav-pills { --bs-nav-pills-link-active-bg: #12a150; }
.nav { --bs-nav-link-color: #0f8743; --bs-nav-link-hover-color: #0d7a3c; }
.pagination { --bs-pagination-active-bg: #12a150; --bs-pagination-active-border-color: #12a150; --bs-pagination-color: #0f8743; }
.progress { --bs-progress-bar-bg: #12a150; }
.list-group { --bs-list-group-active-bg: #12a150; --bs-list-group-active-border-color: #12a150; }
.dropdown-menu { --bs-dropdown-link-active-bg: #12a150; }

/* Tool title block */
.ol-tool-hero { padding: 24px 0 32px; font-family: var(--ol-font); }
.ol-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; font-size: 13px; color: var(--ol-text-3); }
.ol-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--ol-line); }
.ol-crumbs a { color: var(--ol-text-2); text-decoration: none; }
.ol-crumbs a:hover { color: var(--ol-accent); }
.ol-crumbs [aria-current] { color: var(--ol-text); }
.ol-title { display: flex; align-items: center; gap: 16px; }
.ol-title .ol-tile { flex: none; margin: 0; }
.ol-title h1 { margin: 0; font: 600 32px/1.2 var(--ol-font); letter-spacing: -.025em; color: var(--ol-text); }
.ol-title p { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--ol-text-2); }

/* Related tools */
.ol-related { padding: 48px 0 64px; font-family: var(--ol-font); }
.ol-related h2 { margin: 0 0 20px; font: 600 22px/1.3 var(--ol-font); letter-spacing: -.02em; color: var(--ol-text); }
.ol-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 1024px) {
    .ol-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ol-tool-hero { padding: 16px 0 24px; }
    .ol-crumbs { margin-bottom: 16px; }
    .ol-title h1 { font-size: 24px; }
    .ol-title p { font-size: 15px; }
    .ol-related-grid { grid-template-columns: 1fr; gap: 12px; }
}