@import url('https://fonts.googleapis.com/css2?family=Digital+7&display=swap');

/* 1) Brand palette & type scale */
:root {
  --vn-primary:   #400561;   /* deep purple */
  --vn-highlight: #7C3626;   /* terracotta */
  --vn-bg:        #fffff8;   /* soft ivory */
  --vn-text:      #333333;   /* dark charcoal */
}

/* 2) Container & rhythm */
.verse-clock-container {
  max-width: 42em;
  margin: 2em auto;
  padding: 0 1em;
  text-align: center;
}

/* 3) Headings */
#clock-title {
  color: var(--vn-primary);
  font-size: 2.2rem;
  margin-bottom: 0.5em;
}

.digital-clock {
  /* use our imported 7-segment font, fall back to monospace */
  font-family: 'Digital 7', monospace;

  /* match your heading’s rhythm, but feel free to go bigger */
  font-size: 2.2rem;
  letter-spacing: 0.1em;

  /* invert your brand palette for that LED look */
  background: var(--vn-primary);
  color: var(--vn-bg);

  /* a little breathing room and soft corners */
  padding: 0.2em 0.5em;
  border-radius: 0.25em;

  /* glow it up with your highlight color */
  text-shadow:
    0 0 0.2em var(--vn-highlight),
    0 0 0.5em var(--vn-highlight);
}

@keyframes blink {
  50% { opacity: 0; }
}
.digital-clock .colon {
  animation: blink 1s steps(1) infinite;
}

/* 4) Navigation buttons (prev / next / current) */
.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
}

/* 5) Other controls (toggle, copy link) */
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
  margin-bottom: 1em;
}

/* 6) Button styles */
.btn {
  background: var(--vn-highlight);
  color: var(--vn-bg);
  border: none;
  border-radius: 4px;
  padding: 0.5em 1em;
  font-family: Georgia, serif;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn--inverse {
  background: var(--vn-bg);
  color: var(--vn-text);
  border: 1px solid var(--vn-primary);
}
.btn:hover {
  background: var(--vn-primary);
  color: var(--vn-bg);
}

/* 7) Verse text styling */
#verseText {
  margin: 1.5em auto;
  max-width: 36em;
  font-size: 1.25rem;
  line-height: 1.5;
  font-style: italic;
  border-left: 4px solid var(--vn-primary);
  padding-left: 1em;
  color: var(--vn-primary);
}

#verseRef {
  margin-top: 0.5em;
  font-style: italic;
}

/* 8) External links */
.verse-links {
  margin: 1em 0;
}

/* 9) Canvas preview */
#verseCanvas {
  display: none;
  margin: 1em auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 4px;
  width: 100%;
  max-width: 30em;
}

/* 10) Slider */
#fontSizeLabelWrapper {
  display: none;
  margin-bottom: 0.5em;
}
#fontSizeSlider {
  display: none;
  width: 100%;
  margin: 0 auto 1em auto;
  max-width: 30em;
}