/**
 * Rotate Overlay
 * Blocca la navigazione in landscape su dispositivi mobili.
 *
 * @package alternativa-child
 * @version 6.0.1
 */

.rotate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #1a1a1a;
    color: #f0f0f0;
    place-items: center;
    text-align: center;
    font-family: inherit;
}

@media screen and (orientation: landscape) and (max-width: 1024px) {
    .rotate-overlay {
        display: grid;
    }
}

.rotate-overlay__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    /*transform: rotate(90deg);
    /* dopo la rotazione larghezza e altezza si scambiano:
       usiamo 100svh (altezza landscape) come larghezza del contenuto */
    width: 100svh;
}

.rotate-overlay__icon {
    font-size: 3rem;
    animation: rotate-hint 2s ease-in-out infinite;
}

@keyframes rotate-hint {
    0%, 100% { transform: rotate(0deg);   }
    40%       { transform: rotate(-90deg); }
    60%       { transform: rotate(-90deg); }
}

.rotate-overlay__title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.rotate-overlay__subtitle {
    font-size: 0.9rem;
    opacity: 0.7;
    margin: 0;
}