/* ==========================================================
   CLOCK.CSS – Optimized Digital Clock Styles (refactor)
   ========================================================== */

:root {
  --clock-primary-color: var(--accent3);
  --clock-secondary-color: var(--text-muted);
}

/* ---------- Main Clock Container ---------- */
.clock-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

/* ---------- Clock Title Styles ---------- */
.clock-title {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--clock-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 auto 0.5rem;
  text-align: center;
  width: 100%;
  position: relative;
}
.clock-title::before { content: "⏰ "; display: inline; }

/* ---------- Digital Clock Display ---------- */
.clock-display-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.main-clock-display {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 8vw, 4rem); /* fluid */
  font-weight: 400;
  line-height: 1.1;
  color: var(--clock-primary-color);
  text-align: center;
  margin: 0;
  transition: color var(--transition);
}

/* Time Components */
.clock-time-wrapper {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
  min-width: 8em;
}

.clock-time-part {
  display: inline-block;
  width: 1.4ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-kerning: none;
}

.clock-time-separator {
  display: inline-block;
  width: 0.6ch;
  text-align: center;
}

.clock-time-suffix, .clock-suffix, #clock-suffix {
  display: inline-block;
  min-width: 2ch;
  width: auto;
  text-align: left;
  font-size: 0.5em;
  vertical-align: baseline;
  white-space: nowrap;
  margin-left: 0.5ch;
  font-variant-numeric: tabular-nums;
}

body[data-hour-format="24"] .clock-time-suffix { display: none; }

/* Date Display */
.clock-date-display {
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.5vw, 1rem); /* fluid */
  opacity: 0.9;
  color: var(--clock-primary-color);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.3em;
  display: block;
  transition: color var(--transition);
}

/* Digital Font Override */
body.digital-font-enabled .main-clock-display,
body.digital-font-enabled .clock-time-part,
body.digital-font-enabled .clock-time-separator,
body.digital-font-enabled .clock-time-suffix,
body.digital-font-enabled .clock-date-display {
  font-family: var(--font-digital) !important;
}

/* ---------- Additional clock displays ---------- */
#alarmClockDisplay {
  text-align: center;
  color: var(--clock-primary-color);
  font-family: var(--font-mono);
  margin: 1rem 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
#alarmClockDisplay .time-display {
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
}
#alarmClockDisplay .clock-date-display {
  font-size: clamp(0.7rem, 1.5vw, 1rem);
  opacity: 0.9;
  color: var(--clock-primary-color);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.3em;
  display: block;
}

/* Digital font override */
body.digital-font-enabled #alarmClockDisplay .time-display,
body.digital-font-enabled #alarmClockDisplay .clock-date-display {
  font-family: var(--font-digital) !important;
}

/* ========== RESPONSIVE ADJUSTMENTS (minime) ========== */
@media (max-width: 600px) {
  .clock-time-part { width: 1.3ch; }
  .clock-time-suffix { font-size: 0.45em; width: 1.8ch; }
  .clock-title { font-size: 0.9rem; }
}
@media (max-width: 400px) {
  .clock-time-part { width: 1.2ch; }
  .clock-time-suffix { font-size: 0.4em; width: 1.5ch; }
  .clock-title { font-size: 0.8rem; }
}

/* ---------- Clock-specific overrides ---------- */
#section-clock .tool-title {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3.5rem !important;
  display: block;
}


/* Extra narrow phones */
@media (max-width: 360px) {
  #alarmClockDisplay .time-display { font-size: clamp(1.6rem, 7vw, 3.5rem); }
}


/* Clock-specific numeric spacing fixes */
.main-clock-display.digits{letter-spacing:0;}

/* Scoped spacing for Digital Clock */
#section-clock .clock-time-wrapper{ gap: 0; }
#section-clock .clock-time-part{ width: 1.4ch; }
#section-clock .clock-time-separator{ width: 0.7ch; letter-spacing: 0; }
#section-clock .clock-time-suffix, #section-clock .clock-suffix, #section-clock #clock-suffix { margin-left: 0.5ch; }

/* Alarm-style rendering for Digital Clock main display */
#clockDisplay .time-display{
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum","zero";
  color: var(--clock-primary-color);
}