/*
  Digital clock widget — safe to embed on any page.
  Scope layout and segment theme to .digital-clock; optional chrome via .digital-clock-frame.
*/

.digital-clock,
.digital-clock *,
.digital-clock-frame,
.digital-clock-frame * {
  box-sizing: border-box;
}

.digital-clock-frame {
  border: 2px solid var(--digital-clock-frame-border, transparent);
  border-radius: 1rem;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--digital-clock-frame-bg, #191a00);
}

.digital-clock-customizations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 0.5rem 0.75rem;
  margin-bottom: clamp(0.65rem, 2vw, 1rem);
  /* Mini 7-segment digits: much smaller than main clock / date row */
  --dc-format-digit-width: clamp(0.4rem, 2.4vw, 0.58rem);
  /* 12/24 toggle mini digits (optional; JS falls back to frame + main clock --segment-*-color) */
  --dc-hour-format-segment-hidden-color: var(--digital-clock-frame-bg, #191a00);
  /* --dc-hour-format-segment-on-color: lit segments, selected mode */
  /* --dc-hour-format-segment-off-color: lit segments, unselected mode */
}

.dc-hour-format-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.dc-format-seg-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  pointer-events: none;
}

.dc-format-digit-cell {
  width: var(--dc-format-digit-width);
  aspect-ratio: 12 / 20;
  flex: 0 0 auto;
}

.dc-format-digit-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dc-hour-format-btn {
  margin: 0;
  padding: 0.28rem 0.45rem;
  font: inherit;
  line-height: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.dc-hour-format-btn:focus-visible {
  outline: 2px solid rgba(100, 216, 203, 0.9);
  outline-offset: 2px;
}

/* Clock shell — height follows content. Segment colors on .digital-clock.
   container-type: inline-size so vw-heavy layouts can be overridden with cqw
   (narrow embed/sidebar on a wide screen otherwise sizes digits for the viewport
   and flex-wrap pushes the weekday under the date). */
.digital-clock {
  --segment-on-color: #f8ff00;
  --segment-off-color: #454700;
  --segment-border-color: transparent;

  container-type: inline-size;
  container-name: digital-clock;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.dc-time-row {
  --time-digit-width: clamp(2rem, 11vw, 5rem);
  --time-digit-height: calc(var(--time-digit-width) * 20 / 12);

  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 1.3vw, 0.95rem);
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  min-height: 0;
}

.dc-time-row .dc-digit-cell {
  width: var(--time-digit-width);
  aspect-ratio: 12 / 20;
  flex: 0 0 auto;
}

.dc-time-row .dc-ampm-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: clamp(0.2rem, 0.9vw, 0.55rem);
  gap: clamp(0.08rem, 0.5vw, 0.2rem);
}

.dc-time-row .dc-ampm-cell .dc-day-letter {
  width: calc(var(--time-digit-width) * 0.5);
  aspect-ratio: 12 / 20;
  flex: 0 0 auto;
}

.digital-clock:not([data-hour-format="12"]) .dc-time-row .dc-ampm-cell {
  display: none;
}

.dc-date-row {
  --date-row-digit-width: clamp(1.2rem, 4.2vw, 2.35rem);
  --date-row-digit-height: calc(var(--date-row-digit-width) * 20 / 12);

  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.12rem, 0.8vw, 0.45rem);
  /* Keep date + weekday on one row; vw+column narrower than viewport used to wrap the day below. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  min-height: 0;
  max-width: 100%;
}

.dc-date-cell,
.dc-day-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.16rem, 0.75vw, 0.4rem);
  flex-wrap: nowrap;
}

.dc-date-cell .dc-digit-cell,
.dc-day-cell .dc-day-letter {
  width: var(--date-row-digit-width);
  aspect-ratio: 12 / 20;
  flex: 0 0 auto;
}

.dc-date-hyphen {
  width: calc(var(--date-row-digit-width) * 10 / 12);
  height: var(--date-row-digit-height);
  flex: 0 0 auto;
}

.dc-date-day-spacer {
  display: inline-block;
  width: clamp(0.35rem, 1.4vw, 0.9rem);
}

.dc-colon {
  width: calc(var(--time-digit-width) * 4 / 12);
  height: var(--time-digit-height);
  display: inline-block;
  flex: 0 0 auto;
  forced-color-adjust: none;
}

.dc-digit-image,
.dc-alpha14-image,
.dc-date-hyphen-image,
.dc-colon-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dc-day-letter {
  display: inline-block;
}

/* Size from the clock box, not the viewport — fixes embed / sidebars on wide windows. */
@supports (width: 1cqw) {
  .digital-clock {
    gap: clamp(0.75rem, 2cqw, 1.25rem);
  }

  .dc-time-row {
    --time-digit-width: clamp(2rem, 11cqw, 5rem);
    gap: clamp(0.4rem, 1.3cqw, 0.95rem);
  }

  .dc-time-row .dc-ampm-cell {
    gap: clamp(0.08rem, 0.45cqw, 0.2rem);
    margin-left: clamp(0.2rem, 0.85cqw, 0.55rem);
  }

  .dc-date-row {
    --date-row-digit-width: clamp(1.2rem, 4.2cqw, 2.35rem);
    gap: clamp(0.12rem, 0.8cqw, 0.45rem);
  }

  .dc-date-cell,
  .dc-day-cell {
    gap: clamp(0.16rem, 0.75cqw, 0.4rem);
  }

  .dc-date-day-spacer {
    width: clamp(0.35rem, 1.4cqw, 0.9rem);
  }
}