/*CUSTOM RESPONSIVE SETTINGS*/
/* Default styles */
.logo {
    width: 150px;
    height: auto;
}

.nav-item {
    font-size: 1.1em;
}

.title {
    font-size: 1.5em;
}

.env {
    font-size: 1.3em;
    color: darkorange;
}

/* Medium screens (tablets) */
@media (max-width: 768px) {
    .logo {
        width: 150px;
    }

    .nav-item {
        font-size: 0.7em;
    }

    .title {
        font-size: 1.1em;
    }

    .env {
        font-size: 0.7em;
        color: darkorange;
    }
}

/* Small screens (phones) */
@media (max-width: 480px) {
    .logo {
        width: 100px;
    }

    .nav-item {
        font-size: 0.5em;
    }

    .title {
        font-size: 0.7em;
    }

    .env {
        font-size: 1.5em;
        color: darkorange;
    }
}

/* spinner */
/* START */
/* Simple, accessible loading state for buttons */
button.is-loading,
input[type="submit"].is-loading {
    position: relative;
    pointer-events: none; /* belt & suspenders; you're also disabling in JS */
    --btn-spinner-size: 1em; /* customize per-button if needed */
    --btn-spinner-offset-x: 0.6rem; /* left padding for spinner */
    padding-left: calc(var(--btn-spinner-size) + (var(--btn-spinner-offset-x) * 2));
}

    /* The spinner */
    button.is-loading::before,
    input[type="submit"].is-loading::before {
        content: "";
        position: absolute;
        left: var(--btn-spinner-offset-x);
        top: 50%;
        width: var(--btn-spinner-size);
        height: var(--btn-spinner-size);
        margin-top: calc(var(--btn-spinner-size) / -2);
        border-radius: 50%;
        border: 2px solid currentColor; /* matches text color for contrast */
        border-right-color: transparent; /* gap for spinner look */
        animation: btn-spin 0.6s linear infinite;
        opacity: 0.85;
    }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    button.is-loading::before,
    input[type="submit"].is-loading::before {
        animation: none;
        border-right-color: currentColor; /* solid ring instead of animation */
    }
}

/* Optional: slightly dim when disabled */
button[disabled].is-loading,
input[type="submit"][disabled].is-loading {
    opacity: 0.9;
}

/* Spin animation */
@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}
/* END */