/* Business Hours Pro - live status + clock (2.17.0)
   Its own handle (bhp-status), enqueued only when the status block or
   shortcode renders. Layout only, colours inherit — a theme restyles by the
   state classes status.js sets on the root (bhp-status--open / --closed /
   --closing-soon / --override / --exception / --24h) and the --bhp-status-*
   tokens below. Never express STATE with a property a theme might pin from
   an ID-scoped rule (the trap documented for controls.css). */

.bhp-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    text-align: center;
    color: var(--bhp-status-color, inherit);
}

.bhp-status-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
}

.bhp-status-state {
    font-weight: 600;
}

.bhp-status--open .bhp-status-state {
    color: var(--bhp-status-open-color, inherit);
}

.bhp-status--closed .bhp-status-state {
    color: var(--bhp-status-closed-color, inherit);
}

.bhp-status-advice {
    font-size: 0.85em;
    opacity: 0.8;
}

.bhp-status-advice[hidden] {
    display: none;
}

.bhp-status-clock {
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.bhp-status-time {
    font-variant-numeric: tabular-nums;
}

.bhp-status--open .bhp-status-time {
    color: var(--bhp-status-open-color, inherit);
}

.bhp-status--closed .bhp-status-time {
    color: var(--bhp-status-closed-color, inherit);
}

/* Off unless the Digital style is on. */
.bhp-status-ghost {
    display: none;
}

/* ── "Digital clock" block style (2.18.0) ─────────────────────────────
   DSEG7 Classic (Keshikan, SIL Open Font License — assets/fonts/DSEG-LICENSE.txt)
   for the digits only; the period keeps the page font. The ghost (the
   digits with every segment lit) draws the unlit segments under the lit
   ones, the way a real display does. The
   faces are fetched only when an element actually uses the family, so a
   site that never picks the style downloads nothing. */

@font-face {
    font-family: "DSEG7 Classic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/DSEG7Classic-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "DSEG7 Classic";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/DSEG7Classic-Italic.woff2") format("woff2");
}

.is-style-digital .bhp-status-time {
    letter-spacing: 0.04em;
}

/* The ghost's anchor: shrink-wraps the digits, so it holds wherever a theme
   centres or stretches the time row. */
.is-style-digital .bhp-status-face {
    position: relative;
    display: inline-block;
}

.is-style-digital .bhp-status-digits,
.is-style-digital .bhp-status-ghost {
    font-family: "DSEG7 Classic", ui-monospace, monospace;
    font-weight: 400;
}

.is-style-digital .bhp-status-ghost {
    display: inline;
    position: absolute;
    left: 0;
    top: 0;
    opacity: var(--bhp-status-ghost-opacity, 0.14);
    pointer-events: none;
    user-select: none;
}

.is-style-digital .bhp-status-period {
    font-size: 0.55em;
    font-weight: 600;
    letter-spacing: 0.06em;
    vertical-align: 0.15em;
}

.bhp-status-tz {
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.6;
}

.bhp-status-format {
    display: inline-flex;
    border: 1px solid currentColor;
    border-radius: 1em;
    overflow: hidden;
    font-size: 0.75em;
}

.bhp-status-format-btn {
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: 1.4;
    padding: 0.15em 0.7em;
    cursor: pointer;
}

.bhp-status-format-btn[aria-pressed="true"] {
    background: currentColor;
}

.bhp-status-format-btn[aria-pressed="true"] > span {
    color: var(--bhp-status-format-active-text, #fff);
}

.bhp-status-format-btn:focus-visible {
    outline: 1px dotted currentColor;
    outline-offset: -2px;
}