/*
 * ISWS / Website Accessibility Font Size Controls
 * Add this file AFTER your main style.css
 */

:root {
    --site-font-scale: 1;
}

/* Scale the whole document's text consistently.
   zoom works well for legacy Bootstrap / px-heavy templates. */
html {
    zoom: var(--site-font-scale);
}

/* Firefox fallback: zoom is supported in current Firefox versions,
   but this keeps controls visually stable in older layouts. */
.font-size-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.font-size-controls button {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #d7d7d7;
    background: #fff;
    color: #333;
    min-width: 34px;
    height: 30px;
    padding: 0 7px;
    line-height: 28px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
}

.font-size-controls button:hover,
.font-size-controls button:focus {
    background: #287a2c;
    border-color: #287a2c;
    color: #fff;
    outline: 2px solid transparent;
}

.font-size-controls button[aria-pressed="true"] {
    background: #287a2c;
    border-color: #287a2c;
    color: #fff;
}

/* Keep controls usable on small screens */
@media (max-width: 767px) {
    .font-size-controls button {
        min-width: 32px;
        padding: 0 5px;
    }
}