/* c2 Live Clock
 *
 * Customise with CSS variables on the clock or any ancestor:
 *
 *   --c2-live-clock-size     width + height of a standalone clock (48px)
 *   --c2-live-clock-color    base colour of ring, ticks and hands (#fff)
 *   --c2-live-clock-face     dial background (transparent)
 *   --c2-live-clock-ring     dial outline
 *   --c2-live-clock-ticks    hour markers
 *   --c2-live-clock-hands    hour + minute hand
 *   --c2-live-clock-hour     hour hand
 *   --c2-live-clock-minute   minute hand
 *   --c2-live-clock-second   second hand
 *   --c2-live-clock-center   centre cap
 *
 * Size rules use :where() (no specificity), so any class rule of the page
 * wins — e.g. .c2-boxy-icon-image keeps sizing a clock that replaced a
 * C2 Boxy+ icon.
 */

:where(.c2-live-clock__svg) {
    display: inline-block;
    vertical-align: middle;
    width: var(--c2-live-clock-size, var(--c2-live-clock-default-size, 48px));
    height: var(--c2-live-clock-size, var(--c2-live-clock-default-size, 48px));
    flex: 0 0 auto;
}

/* Never catch clicks: they belong to the surrounding button or link. */
.c2-live-clock__svg {
    pointer-events: none;
    overflow: visible;
}

/* Standalone clock (empty container, shortcode). */
:where([data-c2-live-clock="container"]) {
    line-height: 0;
}

:where(span[data-c2-live-clock="container"]) {
    display: inline-block;
    vertical-align: middle;
}

:where([data-c2-live-clock="container"]) > .c2-live-clock__svg {
    display: block;
}

/* Reserve the space of a shortcode clock until the script has drawn it. */
:where(.c2-live-clock--shortcode:not([data-c2-live-clock])) {
    display: inline-block;
    vertical-align: middle;
    width: var(--c2-live-clock-size, 48px);
    height: var(--c2-live-clock-size, 48px);
}

/* Colours */

.c2-live-clock__face {
    fill: var(--c2-live-clock-face, transparent);
    stroke: var(--c2-live-clock-ring, var(--c2-live-clock-color, #fff));
}

.c2-live-clock__ticks {
    stroke: var(--c2-live-clock-ticks, var(--c2-live-clock-color, #fff));
}

.c2-live-clock__hand--hour {
    stroke: var(--c2-live-clock-hour, var(--c2-live-clock-hands, var(--c2-live-clock-color, #fff)));
}

.c2-live-clock__hand--minute {
    stroke: var(--c2-live-clock-minute, var(--c2-live-clock-hands, var(--c2-live-clock-color, #fff)));
}

.c2-live-clock__hand--second {
    stroke: var(--c2-live-clock-second, var(--c2-live-clock-color, #fff));
}

.c2-live-clock__center {
    fill: var(--c2-live-clock-center, var(--c2-live-clock-second, var(--c2-live-clock-color, #fff)));
}

/* Windows high contrast: follow the system text colour. */
@media (forced-colors: active) {
    .c2-live-clock__face {
        fill: none;
        stroke: currentColor;
    }

    .c2-live-clock__ticks,
    .c2-live-clock__hand {
        stroke: currentColor;
    }

    .c2-live-clock__center {
        fill: currentColor;
    }
}