/**
 * File: trevorsphere-clock.css
 * Description: Styles for the TrevorSphere Child Theme's Premium Clock component.
 * TrevorSphere Child Theme — Premium Clock Styling
 * Version 4.0.0
 * Author:    Trevor Roberts (TrevorSphere)
 * Copyright: (c) 2026 Trevor Roberts (TrevorSphere). All rights reserved.
 */

.trevorsphere-clock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    white-space: nowrap;
    user-select: none;
    font-family: Consolas, Monaco, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.trevorsphere-clock .digit {
    display: inline-block;
    width: 1ch;
    text-align: center;
    transition: transform .18s ease;
}

.trevorsphere-clock .digit.changed {
    transform: translateY(-5%);
}

.trevorsphere-clock .colon {
    opacity: .7;
    padding: 0 2px;
}

@media (prefers-reduced-motion: reduce) {

    .trevorsphere-clock .digit {
        transition: none;
    }

    .trevorsphere-clock .digit.changed {
        transform: none;
    }

}