/* ============================================================
   Scroll Typer — style.css
   ============================================================ */

.alleluia-scroll-typer {
    position: relative;
    height: 400vh;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    z-index: 0;
}

/* Sur mobile, on raccourcit la section : il faut beaucoup moins de défilements
   pour faire apparaître tout le texte puis passer au-delà du typer.            */
@media (max-width: 768px) {
    .alleluia-scroll-typer { height: 220vh; }
}

/* Zone sticky : le fond marin couvre TOUT l'écran (top:0, pleine hauteur) → il
   n'y a jamais de bande blanche, que le menu soit affiché ou masqué. La marge
   réservée au menu est gérée par le padding-top du contenu (voir plus bas), donc
   le texte démarre sous le menu mais le bleu remonte jusqu'en haut de l'écran.
   --st-nav-height : hauteur de la nav Alléluia.                                */
.scroll-typer-inner {
    --st-nav-height: 75px;

    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    background-color: #002346;
    overflow: hidden;
}

/* Barre admin WordPress (32px, utilisateurs connectés) : on décale d'autant. */
.admin-bar .scroll-typer-inner {
    top:    32px;
    height: calc(100vh  - 32px);
    height: calc(100dvh - 32px);
}

/* Contenu ────────────────────────────────────────────────── */
.scroll-typer-content {
    /* padding-top = marge FIXE réservée au menu : le texte démarre dessous, mais
       le fond marin de l'inner, lui, remonte jusqu'en haut de l'écran.
       padding-bottom réduit pour remplir davantage le bas.
       env(safe-area-inset-top) tient compte de l'encoche iPhone.               */
    padding-top:    calc(var(--st-nav-height) + env(safe-area-inset-top, 0px));
    padding-right:  clamp(2rem, 4vw, 5rem);
    padding-bottom: clamp(0.5rem, 1.5vh, 1rem);
    padding-left:   clamp(2rem, 4vw, 5rem);
    box-sizing: border-box;
    text-align: center;
}

/* Mobile : header un peu plus haut → marge menu légèrement augmentée. */
@media (max-width: 768px) {
    .scroll-typer-content {
        padding-top: calc(90px + env(safe-area-inset-top, 0px));
    }
}

/* Texte ──────────────────────────────────────────────────── */
.scroll-typer-text {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    color: #d6eef0;
    letter-spacing: 0.01em;
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Curseur ────────────────────────────────────────────────── */
.scroll-typer-cursor {
    display: inline-block;
    width: 2px;
    height: 0.85em;
    background-color: #d6eef0;
    margin-left: 4px;
    vertical-align: baseline;
    position: relative;
    top: 0.05em;
    animation: scroll-typer-blink 0.85s step-end infinite;
    border-radius: 1px;
}
.scroll-typer-cursor.is-complete {
    opacity: 0;
    animation: none;
    transition: opacity 0.6s ease;
}
@keyframes scroll-typer-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Éditeur Gutenberg ─────────────────────────────────────── */
.block-editor-block-list__block .alleluia-scroll-typer {
    height: 180px;
    width: 100%;
    margin-left: 0;
}
.block-editor-block-list__block .scroll-typer-inner {
    position: relative;
    top: 0;
    height: 180px;
}