/* Shared loading indicator, inspired by the user's selected SitePoint example 1:
   https://blogs.sitepointstatic.com/examples/tech/css3-ajax-icon/index.html */
.site-loader {
    display:inline-block;
    flex:none;
    box-sizing:border-box;
    width:var(--site-loader-size,40px);
    height:var(--site-loader-size,40px);
    border:var(--site-loader-stroke,7px) solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    color:var(--site-loader-color,#f4f6f8);
    box-shadow:0 0 18px 2px var(--site-loader-glow,rgba(255,255,255,.2));
    vertical-align:middle;
    animation:site-loader-turn 1s linear infinite;
}
.site-loader[hidden] { display:none; animation:none; }
.site-loading-status { display:flex; align-items:center; gap:16px; }
@keyframes site-loader-turn {
    0% { transform:rotate(0deg); opacity:.35; }
    50% { transform:rotate(180deg); opacity:1; }
    100% { transform:rotate(360deg); opacity:.35; }
}
/* Keep the requested turning feedback, with slower motion and steady brightness. */
@media(prefers-reduced-motion:reduce) {
    .site-loader { animation-name:site-loader-turn-steady; animation-duration:2s; }
}
@keyframes site-loader-turn-steady {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}