/* =========================
   Highland theme variables
   ========================= */

:root {
    --hl-purple: #5B2A86;
    --hl-purple-dark: #4a226f;
    --hl-green: #6BBE45;
    --hl-green-dark: #57a837;
    --hl-text: #2b2b2b;
    --hl-muted: #6c757d;
    --hl-border: #dee2e6;
}

/* =========================
   Highland TTRO – site overrides
   ========================= */

input, select, textarea {
    max-width: 480px;
}

.checkbox label {
    margin: 5px;
}

.tab-warning {
    padding-left: 5px;
}

.required-asterisk::after {
    content: " *";
    color: #d9534f;
    margin-left: 2px;
}

.btn-primary {
    background-color: var(--hl-purple);
    border-color: var(--hl-purple);
}

    .btn-primary:hover {
        background-color: var(--hl-purple-dark);
        border-color: var(--hl-purple-dark);
    }

body {
    font-family: "Source Sans Pro", Arial, sans-serif;
}

/* =========================
   Highland TRO dashboard theme
   ========================= */

.tro-dashboard-title {
    color: var(--hl-purple);
}

.tro-dashboard-titlewrap {
    text-align: center;
}

.tro-stage-header strong {
    color: var(--hl-green);
    text-shadow: 0 1px 0 rgba(0,0,0,0.08); 
}

.tro-cta {
    background: var(--hl-purple);
    border-color: var(--hl-purple);
    color: #fff;
}

    .tro-cta:hover,
    .tro-cta:focus {
        background: var(--hl-green);
        border-color: var(--hl-green);
        color: #fff;
    }

.tro-search-btn:hover,
.tro-search-btn:focus {
    background-color: var(--hl-green);
    border-color: var(--hl-green);
    color: #fff;
}

.tro-stage-header strong {
    color: var(--hl-green-dark);
}

.hl-validation {
    color: #b02a37; 
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .5rem;
}

    .hl-validation::before {
        content: "⚠";
        line-height: 1.2;
    }

    .hl-validation.is-hidden {
        display: none !important;
    }

.tro-form .is-invalid.form-control,
.tro-form .is-invalid.form-check-input {
    border-color: #b02a37;
}


#mapPageTitleArea {
    border-top: 2px solid var(--hl-purple) !important;
}

/* =========================
   Highland TRO – Bootstrap 5 page styles
   ========================= */

.tro-qrow .tro-a {
    text-align: justify;
}

.tro-form {
    --tro-gap-y: 16px;
    --tro-gap-x: 24px;
    --tro-help-size: 1.3rem;
    --tro-q-col: 25%;
    --tro-a-col: 58.333333%;
}

    .tro-form h1,
    .tro-form h2,
    .tro-form h3 {
        color: var(--hl-purple);
        font-weight: bold;
    }

    .tro-form .nav-tabs {
        border-bottom: 2px solid var(--hl-purple);
    }

        .tro-form .nav-tabs .nav-link {
            color: var(--hl-purple);
            font-weight: 600;
            padding: .75rem 1.4rem; 
            border: 1px;
            border-bottom: 1px solid var(--hl-purple);
            background: #fff;
        }

            .tro-form .nav-tabs .nav-link:hover {
                color: var(--hl-purple-dark);
                background: rgba(91, 42, 134, 0.06);
            }

            .tro-form .nav-tabs .nav-link.active {
                color: #fff;
                background: var(--hl-purple-dark);
                border-bottom-color: var(--hl-purple-dark);
            }

    .tro-form .tab-pane {
        background: #fff;
        border: 1px solid #dee2e6;
        border-top: 0;
        padding: 1.25rem;
        border-bottom-left-radius: .5rem;
        border-bottom-right-radius: .5rem;
    }

    .tro-form .tab-content > .tab-pane {
        display: none;
    }

    .tro-form .tab-content > .active {
        display: block;
    }

    .tro-form .tro-qrow {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        margin-top: var(--tro-gap-y);
    }

    .tro-form .tro-q {
        flex: 0 0 var(--tro-q-col);
        max-width: var(--tro-q-col);
        font-weight: 700;
    }

    .tro-form .tro-a {
        flex: 0 0 var(--tro-a-col);
        max-width: var(--tro-a-col);
    }

@media (max-width: 768px) {
    .tro-form .tro-q,
    .tro-form .tro-a {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.tro-form .form-check-label {
    font-weight: 400;
}

.tro-form .small-help {
    font-size: var(--tro-help-size);
    color: #6c757d;
}

.tro-form .form-control::placeholder {
    color: #8a8f98;
    opacity: 1;
}

.tro-form .tro-a input,
.tro-form .tro-a select,
.tro-form .tro-a textarea {
    max-width: 100%;
}

.tro-form .tro-options-inline {
    display: flex;
    align-items: center;
    gap: var(--tro-gap-x);
    flex-wrap: wrap;
}

.tro-form .tro-options-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--tro-gap-x);
    row-gap: 12px;
}

@media (max-width: 576px) {
    .tro-form .tro-options-grid-2 {
        grid-template-columns: 1fr;
    }
}

.tro-form .form-check {
    margin: 0;
}

.tro-form .form-check-input {
    accent-color: var(--hl-purple); 
}

    .tro-form .form-check-input:checked {
        background-color: var(--hl-purple);
        border-color: var(--hl-purple);
    }

    .tro-form .form-check-input:focus {
        border-color: var(--hl-purple);
        box-shadow: 0 0 0 0.25rem rgba(91, 42, 134, 0.25);
    }

.tro-form .form-actions {
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-top: 1.25rem;
}

    .tro-form .form-actions .right {
        margin-left: auto;
        display: flex;
        gap: .75rem;
    }

.tro-form .alert-warning {
    font-size: 1rem;
    line-height: 1.5;
    background-color: #d8ead5;
    border: var(--hl-green);
    color: grey;
}

    .tro-form .alert-warning strong {
        display: block;
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: .25rem;        
    }

.tro-form .btn-outline-secondary {
    color: var(--hl-purple);
    border-color: var(--hl-purple);
    background: #fff;
}

    .tro-form .btn-outline-secondary:hover,
    .tro-form .btn-outline-secondary:focus {
        color: #fff;
        background: var(--hl-purple);
        border-color: var(--hl-purple);
    }

    .tro-form .btn-outline-secondary:focus {
        box-shadow: 0 0 0 0.25rem rgba(91, 42, 134, 0.25);
    }


/* =========================
   MAP
   ========================= */

.tro-form .tro-map {
    height: 460px;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    overflow: hidden;
    background: #f8f9fa;
}

    /* OL sometimes needs the inner viewport to be forced to fill */
    .tro-form .tro-map .ol-viewport {
        height: 100% !important;
    }