/* ==========================================================================
   Liturgical Countdown Widget
   --------------------------------------------------------------------------
   A single, authoritative stylesheet for both normal & fullscreen modes.
   Values prioritize readability; structure prioritizes extensibility.
   ========================================================================== */

/* ==========================================================================
   1. Variables
   ========================================================================== */
:root {
  /* Tell browsers we can handle light and dark modes */
  color-scheme: light dark;
  
  /* Core palette */
  --primary:     #400561;     /* deep purple accent */
  --text:        #222;        /* main text */
  --subtext:     #555;        /* secondary text */
  --background:  #fff;        /* widget background */
  --accent:      #7c3626;     /* highlight color */

  /* Layout & sizing */
  --gap:         1.5rem;      /* consistent gutters */
  --small-gap:   0.25rem;
  --radius:      0.25rem;     /* corner rounding */
  --tool-height: 1rem;        /* toolbar button height */

  /* Optional dark-mode shadow */
  --shadow:      0 2px 4px rgba(0,0,0,0.8);
}

/* ==========================================================================
   2. Theme Overrides
   --------------------------------------------------------------------------
   Supports both explicit toggle (html[data-theme="dark"]) and
   OS/browser “prefers-color-scheme: dark”
   ========================================================================== */

/* Dark theme via explicit toggle */
html[data-theme="dark"] {
  --background: #121212;
  --text:       #e0e0e0;
  --subtext:    #aaa;
  --primary:    #9e7ece;
  --accent:     #c38c54;
}

html[data-theme="dark"] #liturgical-countdown {
  background: var(--background);
  box-shadow: var(--shadow);
}

/* Dark theme via OS preference */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #121212;
    --text:       #e0e0e0;
    --subtext:    #aaa;
    --primary:    #9e7ece;
    --accent:     #c38c54;
  }
  #liturgical-countdown {
    background: var(--background);
    box-shadow: var(--shadow);
  }
}

/* ==========================================================================
   3. Base Widget
   --------------------------------------------------------------------------
   Positioning, container look & feel
   ========================================================================== */
#liturgical-countdown {
  position:    relative;               /* anchor for toolbar & logo */
  margin:      calc(var(--gap)*2) auto;
  padding:     var(--gap);
  max-width:   480px;
  background:  var(--background);
  color:       var(--text);
  font-family: Georgia, serif;
  border:      1px solid #eee;
  border-radius: var(--radius);
  box-shadow:  0 2px 4px rgba(0,0,0,0.04);

  display:          flex;
  flex-direction:   column;
  align-items:      center;
}

/* ==========================================================================
   4. Headline & Countdown Number
   --------------------------------------------------------------------------
   “X days until…” or “HH:MM:SS”
   ========================================================================== */
   
#liturgical-countdown h1 {
  margin:      0;
  text-align:  center;
  line-height: 1.1;
  font-weight: normal;
}

#liturgical-countdown #big-countdown {
  display:      block;
  font-size:    4rem;
  font-family:  monospace;
  color:        var(--primary);
  line-height:  1;
  margin-bottom: 0.25em;
}

#liturgical-countdown #feast-name {
  font-weight:  bold;
}

#liturgical-countdown h1 time {
  display:      block;
  margin-top:   0.25em;
  font-family:  sans-serif;
  font-size:    0.9rem;
  color:        var(--subtext);
  font-style:   normal;
}

/* ==========================================================================
   5. “Today is …” Banner
   ========================================================================== */
.ln-today-banner {
  background:   var(--accent);
  color:        #fff;
  font-size:    1.5rem;
  text-align:   center;
  padding:      1rem;
  border-radius: var(--radius);
  box-shadow:   0 2px 6px rgba(0,0,0,0.1);
}

/* ==========================================================================
   6. Secondary Small Countdown (D:H:M:S)
   ========================================================================== */
.ln-full-countdown {
  margin:      var(--gap) auto;
  font-family: monospace;
  font-size:   1rem;
  text-align: center;
  color:       var(--accent);
}

/* ==========================================================================
   7. Toolbar & Toggles
   --------------------------------------------------------------------------
   Dark/light & fullscreen/mode toggle pills
   ========================================================================== */
.ln-toolbar {
  position:    absolute;
  top:         var(--small-gap);
  right:       var(--small-gap);
  display:     flex;
  gap:         0.5rem;
}

.ln-toggle {
  display:      flex;
  align-items:  center;
  justify-content: center;
  height:       var(--tool-height);
  padding:      0.25rem 0.5rem;
  width:        calc(2*var(--tool-height));
  border:       1px solid var(--subtext);
  border-radius: 999px;
  background:   none;
  color:        var(--subtext);
  font-size:    0.9rem;
  cursor:       pointer;
  transition:   background 0.2s ease, color 0.2s ease;
}

/* Active state picks up accent & background automatically */
.ln-toggle.active {
  background:   var(--accent);
  color:        var(--background);
  border-color: var(--accent);
}

/* Hide the fullscreen button when we're already fullscreen */
#liturgical-countdown[data-fullscreen="true"] #fs-toggle { display: none; }

/* Hide the share button in fullscreen */
#liturgical-countdown[data-fullscreen="true"] #share-btn { display: none; }

/* Hide the slideshow button when we're not fullscreen */
#liturgical-countdown:not([data-fullscreen="true"]) #slideshow-toggle { display: none; }

/* Hide the HMS toggle when we're not in fullscreen */
#liturgical-countdown:not([data-fullscreen="true"]) #mode-toggle { display: none; }

html[data-theme="dark"]   #theme-toggle::before { content: '🌙'; }
html:not([data-theme="dark"]) #theme-toggle::before { content: '🌞'; }

/* ==========================================================================
   8. VerseNotes Logo
   ========================================================================== */
.ln-logo {
  position:    absolute;
  top:         var(--small-gap);
  left:        var(--small-gap);
  height:      var(--tool-height);
  width:       auto;
  opacity:     0.8;
  z-index:     1;
}

/* Slightly smaller / subtler in fullscreen */
#liturgical-countdown[data-fullscreen="true"] .ln-logo {
  width:       10vw;
  height:      auto;
  opacity:     0.6;
}

html[data-theme="dark"] #liturgical-countdown .ln-logo {
  /* Darken all the way, then invert for a light gray image */
  filter: brightness(0) invert();
}

/* ==========================================================================
   9. Upcoming Feasts Header
   ========================================================================== */
#liturgical-countdown h2#upcoming-feasts {
  margin:         var(--gap) 0 0.5rem;
  font-family:    sans-serif;
  font-variant:   small-caps;
  font-weight:    600;
  color:          var(--primary);
  letter-spacing: 0.05em;
}
#liturgical-countdown h2#ln-fullscreen-caption {
  margin:         var(--gap) 0 0.5rem;
  font-family:    Georgia, serif;
  font-variant:   all-small-caps;
  font-size:      clamp(1rem, min(5vw, 10vh), 200rem);
  font-weight:    600;
  letter-spacing: 0.05em;
  color:          var(--subtext);
}

/* ==========================================================================
  10. Upcoming Feasts Cards
  --------------------------------------------------------------------------
  Base list & card styles, badge positioning, inner details
  ========================================================================== */
ul.ln-upcoming {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding:    0;
  margin:     0;
  width:      100%;
}

ul.ln-upcoming li {
  background:     var(--background);
  border:         1px solid #eee;
  border-radius:  var(--radius);
  min-width:      14rem;
  padding:        0.5rem 1rem;
  position:       relative;
  display:        flex;
  flex-wrap:      nowrap;
  flex-grow:      1;
  align-items:    center;
  box-shadow:     0 1px 3px rgba(0,0,0,0.05);
  transition:     transform 0.1s ease;
}

/* Days-badge in corner */
.ln-item-countdown {
  flex: 0 0 4ch;
  font-family:  monospace;
  font-size:    1.25rem;
  font-weight:  bold;
  text-align:   right;
  color:        var(--accent);
  white-space:  nowrap;
}

/* Text details centered below badge */
.ln-details {
  flex: 1 1 auto;      /* take remaining space */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top:  0;
  margin-left: 1rem;
}
.ln-name {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1;
  color:       var(--text);
}
.ln-date {
  margin-top:  0.25em;
  font-family: sans-serif;
  font-size:   0.9rem;
  color:       var(--subtext);
  white-space: nowrap;
}

/* Narrow-screen tweak: badge/details stack */
@media (max-width: 400px) {
  ul.ln-upcoming li {
    align-items: flex-start;
  }
}

/* ==========================================================================
  11. Layout Modes: Stacked vs. Grid
  --------------------------------------------------------------------------
  Normal (stacked) = single column; Fullscreen = responsive grid
  ========================================================================== */

/* No title for feast cards in fullscreen */
#liturgical-countdown[data-fullscreen="true"] #upcoming-feasts {
  display: none;
}


/* Responsive grid in fullscreen */
#liturgical-countdown[data-fullscreen="true"] ul.ln-upcoming {
  display:        flex;
  flex-direction: row;
  flex-wrap:      wrap;
  gap:            var(--gap);

  /* inset from edges by the same gutter */
  box-sizing:     content-box;
  padding:        0;
  margin:         var(--gap) var(--gap);
  width:          auto;
}

#liturgical-countdown[data-fullscreen="true"] ul.ln-upcoming li {
  padding: 1rem; /* a little more vertical space in fullscreen */
}

/* ==========================================================================
  12. Responsive Refinements
  --------------------------------------------------------------------------
  Very small screens: tighten widget & shrink big number
  Smaller cards on narrow viewports
  ========================================================================== */
@media (max-width: 360px) {
  #liturgical-countdown {
    margin: 1rem;
    padding: 1rem;
  }
  #liturgical-countdown #big-countdown {
    font-size: 3rem;
  }
}

/* ==========================================================================
  13. Updates for slideshow mode
  --------------------------------------------------------------------------
  
  ========================================================================== */
/*  ─── Utility to hide slides ─── */
.ln-hidden {
  display: none !important;
}