/* 
 * CAMMINI VERTICALI - BRAND COLORS
 * Uniforma tutti i colori arancioni al colore del logo
 * Da includere DOPO Bootstrap nel base_layout.html
 */

:root {
    --brand-orange: #fa9300;
    --brand-orange-hover: #e08700;
    --brand-orange-dark: #c77300;
}

/* ========================================
   BOTTONI ARANCIONI - TESTO SEMPRE NERO
   ======================================== */

/* Bottoni Bootstrap warning */
.btn-warning,
.btn-warning:link,
.btn-warning:visited {
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #000 !important;
    font-weight: 500;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--brand-orange-hover) !important;
    border-color: var(--brand-orange-hover) !important;
    color: #000 !important;
}

/* Bottoni outline warning */
.btn-outline-warning {
    border-color: var(--brand-orange) !important;
    color: var(--brand-orange) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #000 !important;
}

/* Trasforma tutti i btn-outline-light in btn-outline-warning */
.btn-outline-light {
    border-color: var(--brand-orange) !important;
    color: var(--brand-orange) !important;
    background-color: transparent !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #000 !important;
}

/* ========================================
   LINK E TESTI ARANCIONI
   ======================================== */

/* Link arancioni */
.text-warning,
a.text-warning {
    color: var(--brand-orange) !important;
}

.text-warning:hover,
a.text-warning:hover {
    color: var(--brand-orange-hover) !important;
}

/* Navbar hover (già presente ma lo uniformiamo) */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--brand-orange) !important;
}

/* ========================================
   BADGE E ALERT
   ======================================== */

.badge-warning,
.badge.bg-warning {
    background-color: var(--brand-orange) !important;
    color: #000 !important;
}

.alert-warning {
    background-color: rgba(250, 147, 0, 0.15) !important;
    border-color: var(--brand-orange) !important;
    color: var(--brand-orange-dark) !important;
}

/* ========================================
   FORM E INPUT
   ======================================== */

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-orange) !important;
    box-shadow: 0 0 0 0.25rem rgba(250, 147, 0, 0.25) !important;
}

/* ========================================
   PROGRESS BAR
   ======================================== */

.progress-bar-warning,
.bg-warning {
    background-color: var(--brand-orange) !important;
}

/* ========================================
   TITOLI E HEADINGS CON CLASSE WARNING
   ======================================== */

h1.text-warning,
h2.text-warning,
h3.text-warning,
h4.text-warning,
h5.text-warning,
h6.text-warning {
    color: var(--brand-orange) !important;
}

/* ========================================
   SPINNER E LOADING
   ======================================== */

.spinner-border-warning,
.spinner-grow-warning {
    color: var(--brand-orange) !important;
}

/* ========================================
   CUSTOM CLASSES PER IL SITO
   ======================================== */

/* Per usare nei tuoi template quando serve */
.brand-orange {
    color: var(--brand-orange) !important;
}

.bg-brand-orange {
    background-color: var(--brand-orange) !important;
    color: #000 !important;
}

.border-brand-orange {
    border-color: var(--brand-orange) !important;
}

/* ========================================
   FIX SPECIFICI PER ACCESSIBILITÀ
   ======================================== */

/* Assicura che il testo nero sia sempre leggibile su arancione */
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.badge-warning,
.bg-brand-orange {
    font-weight: 500 !important;
}