@import url("brand-refresh.css");

/* The former animated page-loading bars delayed the visible page and are no
   longer part of the design. Hide them before scripts execute to avoid flash. */
.loader-holder { display: none !important; }

/* Fixed quick actions shown only on phones. */
.mobile-action-bar { display: none; }

@media only screen and (max-width: 756px) {
    body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
    .mobile-action-bar {
        position: fixed; right: 0; bottom: 0; left: 0; z-index: 9999;
        display: grid; grid-template-columns: repeat(3, 1fr); min-height: 70px;
        padding-bottom: env(safe-area-inset-bottom);
        background: linear-gradient(135deg, var(--sts-green-cta, #237a38) 0%, var(--sts-green-deep, #104d29) 100%);
        box-shadow: 0 -3px 14px rgba(0, 0, 0, .22);
    }
    .mobile-action-bar__link {
        display: flex; min-width: 0; min-height: 70px; align-items: center;
        justify-content: center; flex-direction: column; gap: 4px;
        padding: 8px 4px 7px; border-right: 1px solid rgba(255, 255, 255, .22);
        color: #fff; font-size: 10px; font-weight: 700; line-height: 1.15;
        text-align: center; text-transform: uppercase; -webkit-tap-highlight-color: transparent;
    }
    .mobile-action-bar__link:last-child { border-right: 0; }
    .mobile-action-bar__link i {
        font-size: 25px;
        line-height: 1;
        transform-origin: center;
        animation: mobile-action-icon-pulse 3.8s ease-in-out infinite;
    }
    .mobile-action-bar__link:nth-child(2) i { animation-delay: .45s; }
    .mobile-action-bar__link:nth-child(3) i { animation-delay: .9s; }
    .mobile-action-bar__link:focus, .mobile-action-bar__link:hover { background: #256628; color: #fff; }
}

@keyframes mobile-action-icon-pulse {
    0%, 16%, 100% { transform: translateY(0) scale(1); }
    5% { transform: translateY(-3px) scale(1.08); }
    10% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-action-bar__link i { animation: none; }
}

/* Touch screens do not have a dependable hover state.  Use the temporary
   class set by mobile-actions.js so cards flip before their links open. */
@media (hover: none), (pointer: coarse) {
    .cards-wrap .content-inner:hover .content-front,
    .cards-wrap .content-inner .content-front {
        transform: rotateY(0deg);
    }
    .cards-wrap .content-inner:hover .content-back,
    .cards-wrap .content-inner .content-back {
        transform: rotateY(180deg);
    }
    .cards-wrap .content-inner.is-flipped .content-front {
        transform: rotateY(-180deg);
    }
    .cards-wrap .content-inner.is-flipped .content-back {
        transform: rotateY(0deg);
    }
}