/* Modern responsive design with clean styling */
/* All rules are scoped to the plugin's own containers to prevent
   conflicts with theme classes (e.g. Divi's .container).            */
/* Design tokens, defined on the widget containers only (not :root) so
   nothing is added to the theme's <html> element. Custom properties
   inherit, so every element inside the widgets can still use them.   */
#verse-widget-header,
#verse-widget-sidebar {
  --votd-overlay: rgba(0, 0, 0, 0.5);
  --votd-shadow-lg: rgba(0, 0, 0, 0.15);
}

/* Don't rely on the theme for box-sizing. Astra resets it globally,
   block themes like Twenty Twenty-Five do not.                      */
#verse-widget-header,
#verse-widget-header *,
#verse-widget-header *::before,
#verse-widget-header *::after,
#verse-widget-sidebar,
#verse-widget-sidebar *,
#verse-widget-sidebar *::before,
#verse-widget-sidebar *::after {
  box-sizing: border-box;
}

/* ===== WIDGET BADGE STYLES ===== */
#verse-widget-header .votd-widget-badge,
#verse-widget-sidebar .votd-widget-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 4px 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: white;
  background: rgba(59, 130, 246, 0.85);
  border-radius: 4px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

#verse-widget-sidebar .votd-badge-sidebar {
  background: rgba(16, 185, 129, 0.85);
}

/* ===== HEADER WIDGET - HORIZONTAL BANNER LAYOUT ===== */
#verse-widget-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 180px;
  max-width: 100%;
  margin: 0;
  transition: all 0.3s ease;
  position: relative;
}

#verse-widget-header .votd-header-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

#verse-widget-header .verse-background {
  border-radius: 0;
}

#verse-widget-header .container {
  text-align: left;
  max-width: 100%;
  padding: 2rem 3rem;
  margin: 0;
  border-radius: 0;
  /* Was 0.65 -> 0.30. At 0.30 white text over a bright sky or beach fell
     below the 3:1 WCAG minimum for large text; 0.45 at the far edge keeps
     it above that on the lightest backgrounds. */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.45) 100%);
}

#verse-widget-header .verse-text {
  font-size: clamp(1.125rem, 2.5vw, 1.75rem);
  max-width: 800px;
}

/* ===== SIDEBAR WIDGET - VERTICAL CARD LAYOUT ===== */
#verse-widget-sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 320px;
  max-width: 350px;
  margin: 20px auto;
  transition: all 0.3s ease;
  position: relative;
}

#verse-widget-sidebar .votd-sidebar-header {
  position: relative;
  margin-bottom: 0.75rem;
}

#verse-widget-sidebar .votd-sidebar-header .votd-widget-badge {
  position: static;
  display: inline-block;
  margin-bottom: 0.5rem;
}

#verse-widget-sidebar .verse-background {
  border-radius: 12px;
}

#verse-widget-sidebar .container {
  text-align: center;
  padding: 1.75rem 1.25rem;
  margin: 1.5rem auto;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
}

/* Theme toggle button */
#verse-widget-header .votd-theme-toggle,
#verse-widget-sidebar .votd-theme-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: var(--votd-overlay);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

#verse-widget-header .votd-theme-toggle:hover,
#verse-widget-sidebar .votd-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(180deg);
}

#verse-widget-header .votd-theme-toggle:focus,
#verse-widget-sidebar .votd-theme-toggle:focus {
  outline: 2px solid var(--votd-accent);
  outline-offset: 2px;
}

/* Background container with modern overlay */
#verse-widget-header .verse-background,
#verse-widget-sidebar .verse-background {
  flex-grow: 1;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px var(--votd-shadow-lg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#verse-widget-header .verse-background:hover,
#verse-widget-sidebar .verse-background:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 50px var(--votd-shadow-lg);
}

/* Verse text now always white for optimal readability on nature backgrounds */
#verse-widget-header .verse-text,
#verse-widget-sidebar .verse-text {
  line-height: 1.7;
  font-weight: 500;
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: white !important;
  /* Added default font-family that WordPress inline styles will override */
  font-family: "Roboto", sans-serif;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.01em;
  transition: all 0.3s ease;
}

/* Responsive font sizes */
@media screen and (max-width: 900px) {
  #verse-widget-header .verse-text,
  #verse-widget-sidebar .verse-text {
    font-size: clamp(1rem, 4vw, 1.5rem);
    line-height: 1.6;
  }
}

@media screen and (max-width: 600px) {
  #verse-widget-header .verse-text,
  #verse-widget-sidebar .verse-text {
    font-size: clamp(0.95rem, 4.5vw, 1.25rem);
  }
}

/* Container with clean tinted glass overlay — SCOPED to widget only */
#verse-widget-header .container,
#verse-widget-sidebar .container {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  color: white;
  width: 100%;
  max-width: 900px;
  padding: 2.5rem;
  margin: 3rem auto;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all 0.3s ease;
}

/* ===== HEADER RESPONSIVE ADJUSTMENTS ===== */
@media screen and (max-width: 768px) {
  #verse-widget-header .container {
    padding: 1.5rem 1.5rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.55);
  }
  
  #verse-widget-header .verse-text {
    max-width: 100%;
  }
  
  #verse-widget-header .votd-widget-badge,
  #verse-widget-sidebar .votd-widget-badge {
    font-size: 0.625rem;
    padding: 3px 8px;
  }
}

/* ===== SIDEBAR RESPONSIVE ADJUSTMENTS ===== */
@media screen and (max-width: 480px) {
  #verse-widget-sidebar {
    max-width: 100%;
  }
  
  #verse-widget-sidebar .container {
    padding: 1.25rem 1rem;
    margin: 1rem auto;
  }
}

/* Responsive container padding */
@media screen and (max-width: 768px) {
  #verse-widget-header .container,
  #verse-widget-sidebar .container {
    padding: 2rem 1.5rem;
    margin: 2rem auto;
    border-radius: 16px;
  }
}

@media screen and (max-width: 480px) {
  #verse-widget-header .container,
  #verse-widget-sidebar .container {
    padding: 1.5rem 1rem;
    margin: 1.5rem auto;
    border-radius: 12px;
  }
}

/* Enhanced link styling */
#verse-widget-header .container a,
#verse-widget-sidebar .container a {
  color: white;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

#verse-widget-header .container a:visited,
#verse-widget-sidebar .container a:visited {
  color: rgba(255, 255, 255, 0.9);
}

#verse-widget-header .container a:hover,
#verse-widget-sidebar .container a:hover {
  color: rgba(255, 255, 255, 0.7);
  text-decoration-thickness: 2px;
}

#verse-widget-header .container a:focus,
#verse-widget-sidebar .container a:focus {
  outline: 2px solid white;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sidebar specific text styles */
#verse-widget-sidebar h2 {
  text-align: left;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

#verse-widget-sidebar .sidebar-verse-text {
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  font-family: inherit;
}

/* Smooth transitions for theme changes — SCOPED to widget only */
#verse-widget-header *,
#verse-widget-sidebar * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Accessibility improvements */
#verse-widget-header .verse-text:focus,
#verse-widget-sidebar .verse-text:focus {
  outline: 3px solid white;
  outline-offset: 4px;
  border-radius: 8px;
}

/* Loading state */
#verse-widget-header .verse-text.loading,
#verse-widget-sidebar .verse-text.loading {
  opacity: 0.6;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* ===== TRUNCATED VERSE & READ FULL LINK ===== */
#verse-widget-header .votd-truncated-text,
#verse-widget-sidebar .votd-truncated-text {
  display: block;
  margin-bottom: 0.75rem;
}

#verse-widget-header .votd-read-full,
#verse-widget-sidebar .votd-read-full {
  /* Now a native <button>: reset UA and theme button styles. */
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  min-height: 32px;
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: white !important;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

#verse-widget-header .votd-read-full:hover,
#verse-widget-sidebar .votd-read-full:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

#verse-widget-header .votd-read-full:focus-visible,
#verse-widget-sidebar .votd-read-full:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

/* ===== MODAL DIALOG STYLES =====
   The full-verse modal is deliberately theme-independent. The reset block
   below rolls every author-level declaration — i.e. everything the active
   theme lands on the modal and its contents (blockquote borders and
   backgrounds, h3 font stacks, button resets, inherited colours) — back to
   the browser's own defaults. Every property the modal actually needs is
   then re-declared from the plugin's own tokens, at a specificity that
   outranks both the reset and typical theme selectors.
   Keep the reset FIRST; the rules after it depend on winning by order.  */

/* Design tokens. Custom properties are not touched by `all`, so these
   survive the reset. The PHP inline style overrides --votd-modal-font
   with the font chosen on the settings screen.                         */
.votd-modal {
  --votd-modal-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --votd-modal-overlay-bg: rgba(0, 0, 0, 0.7);
  --votd-modal-bg: #ffffff;
  --votd-modal-fg: #2c3e50;
  --votd-modal-radius: 16px;
  --votd-modal-header-bg: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
  --votd-modal-header-fg: #ffffff;
  --votd-modal-title-fg: burlywood;
  --votd-modal-quote-fg: #7f8c8d;
}

/* --- 1. Theme reset ------------------------------------------------- */
.votd-modal,
.votd-modal *,
.votd-modal *::before,
.votd-modal *::after {
  all: revert;
  box-sizing: border-box;
  font-family: var(--votd-modal-font);
}

/* --- 2. Modal shell ------------------------------------------------- */
.votd-modal.votd-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* The modal is a native <dialog>; strip the browser's dialog box. */
  max-width: none;
  max-height: none;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
  margin: 0;
  padding: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.votd-modal.votd-modal-open {
  opacity: 1;
  visibility: visible;
  /* Become visible at once when opening (only the fade animates), so the
     close button can take focus immediately. Closing keeps the delayed
     visibility change from the rule above so the fade-out still plays. */
  transition: opacity 0.3s ease, visibility 0s;
}

/* The overlay div supplies the dim + blur, so keep the UA backdrop clear. */
.votd-modal::backdrop {
  background: transparent;
}

.votd-modal .votd-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--votd-modal-overlay-bg);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.votd-modal .votd-modal-content {
  position: relative;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  margin: 0;
  padding: 0;
  background: var(--votd-modal-bg);
  color: var(--votd-modal-fg);
  border: 0;
  border-radius: var(--votd-modal-radius);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s ease;
}

.votd-modal.votd-modal-open .votd-modal-content {
  transform: scale(1) translateY(0);
}

/* --- 3. Modal header ------------------------------------------------ */
.votd-modal .votd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: var(--votd-modal-header-bg);
  color: var(--votd-modal-header-fg);
  border: 0;
}

.votd-modal .votd-modal-header h3 {
  margin: 0;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--votd-modal-title-fg);
  text-align: left;
  border: 0;
}

.votd-modal .votd-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 50%;
  color: var(--votd-modal-header-fg);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.votd-modal .votd-modal-close:hover,
.votd-modal .votd-modal-close:focus {
  background: rgba(255, 255, 255, 0.2);
  color: var(--votd-modal-header-fg);
}

.votd-modal .votd-modal-close:hover {
  transform: rotate(90deg);
}

.votd-modal .votd-modal-close:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* --- 4. Modal body and the full verse itself ------------------------ */
.votd-modal .votd-modal-body {
  margin: 0;
  padding: 2rem;
  background: var(--votd-modal-bg);
  overflow-y: auto;
  max-height: calc(80vh - 70px);
  -webkit-overflow-scrolling: touch;
}

.votd-modal .votd-full-verse {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 1.125rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.8;
  color: var(--votd-modal-fg);
  text-align: center;
  text-transform: none;
  quotes: none;
  overflow-wrap: break-word;
}

/* Literal curly quotes rather than open-quote/close-quote: the `quotes`
   property is inheritable, so a theme setting it could otherwise change
   or blank out the quotation marks.                                    */
.votd-modal .votd-full-verse::before,
.votd-modal .votd-full-verse::after {
  display: inline;
  font-size: 2rem;
  font-style: normal;
  color: var(--votd-modal-quote-fg);
  line-height: 0;
  vertical-align: -0.4em;
}

/* --- 5. Responsive -------------------------------------------------- */
@media screen and (max-width: 600px) {
  .votd-modal .votd-modal-content {
    width: 95%;
    max-height: 90vh;
    border-radius: 12px;
  }

  .votd-modal .votd-modal-header {
    padding: 1rem 1.25rem;
  }

  .votd-modal .votd-modal-header h3 {
    font-size: 1rem;
  }

  .votd-modal .votd-modal-body {
    padding: 1.5rem;
    max-height: calc(90vh - 60px);
  }

  .votd-modal .votd-full-verse {
    font-size: 1rem;
    line-height: 1.7;
  }
}

/* Respect a visitor's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .votd-modal.votd-modal,
  .votd-modal .votd-modal-content,
  .votd-modal .votd-modal-close {
    transition: none;
  }

  .votd-modal .votd-modal-close:hover {
    transform: none;
  }
}

/* Print styles */
@media print {
  #verse-widget-header .votd-theme-toggle,
  #verse-widget-sidebar .votd-theme-toggle {
    display: none;
  }

  #verse-widget-header .verse-background,
  #verse-widget-sidebar .verse-background {
    box-shadow: none;
    border: 1px solid #ddd;
  }

  #verse-widget-header .container,
  #verse-widget-sidebar .container {
    background: white;
    color: black;
    border: 1px solid #ddd;
  }

  #verse-widget-header .verse-text,
  #verse-widget-sidebar .verse-text {
    color: black !important;
    text-shadow: none;
  }
  
  .votd-modal,
  #verse-widget-header .votd-read-full,
  #verse-widget-sidebar .votd-read-full {
    display: none !important;
  }
}

#verse-widget-header .verse-text,
#verse-widget-sidebar .verse-text {
  quotes: none;
}

#verse-widget-header .verse-text::before,
#verse-widget-header .verse-text::after,
#verse-widget-sidebar .verse-text::before,
#verse-widget-sidebar .verse-text::after {
  content: none !important;
}

/* ===== ANIMATED BACKGROUND VIDEO =====
   js/widget.js inserts a muted, looping <video class="votd-bg-video"> as the
   first child of .verse-background when the day's background is a video.
   It fills the box like background-size: cover, and everything else in the
   widget sits above it. The dark colour shows only for the moment before
   the poster still arrives. */
#verse-widget-header .verse-background.votd-has-video,
#verse-widget-sidebar .verse-background.votd-has-video {
  background-color: #0b1e2d;
}

#verse-widget-header .votd-bg-video,
#verse-widget-sidebar .votd-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

#verse-widget-header .votd-header-inner {
  z-index: 1;
}

@media print {
  #verse-widget-header .votd-bg-video,
  #verse-widget-sidebar .votd-bg-video,
  #verse-widget-header .votd-motion-toggle,
  #verse-widget-sidebar .votd-motion-toggle {
    display: none;
  }
}

/* ===== BACKGROUND ANIMATION PAUSE / PLAY (WCAG 2.2.2) =====
   Created by js/widget.js only when an animated background is showing. */
#verse-widget-header .votd-motion-toggle,
#verse-widget-sidebar .votd-motion-toggle {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  box-shadow: none;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

#verse-widget-header .verse-background:hover .votd-motion-toggle,
#verse-widget-sidebar .verse-background:hover .votd-motion-toggle,
#verse-widget-header .votd-motion-toggle:focus-visible,
#verse-widget-sidebar .votd-motion-toggle:focus-visible,
#verse-widget-header .votd-motion-toggle[aria-pressed="true"],
#verse-widget-sidebar .votd-motion-toggle[aria-pressed="true"] {
  opacity: 1;
}

#verse-widget-header .votd-motion-toggle:focus-visible,
#verse-widget-sidebar .votd-motion-toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

#verse-widget-header .votd-motion-toggle svg,
#verse-widget-sidebar .votd-motion-toggle svg {
  display: block;
}

#verse-widget-header .votd-motion-toggle .votd-icon-play,
#verse-widget-sidebar .votd-motion-toggle .votd-icon-play,
#verse-widget-header .votd-motion-toggle[aria-pressed="true"] .votd-icon-pause,
#verse-widget-sidebar .votd-motion-toggle[aria-pressed="true"] .votd-icon-pause {
  display: none;
}

#verse-widget-header .votd-motion-toggle[aria-pressed="true"] .votd-icon-play,
#verse-widget-sidebar .votd-motion-toggle[aria-pressed="true"] .votd-icon-play {
  display: block;
}

@media (hover: none) {
  #verse-widget-header .votd-motion-toggle,
  #verse-widget-sidebar .votd-motion-toggle {
    opacity: 1;
  }
}

/* Keep the verse above the background video (z-index 0); the pause control
   (z-index 3) sits above both. */
#verse-widget-header .verse-text,
#verse-widget-sidebar .verse-text {
  position: relative;
  z-index: 2;
}

/* Reduced motion: no lift on hover, no transitions inside the widget. */
@media (prefers-reduced-motion: reduce) {
  #verse-widget-header .verse-background,
  #verse-widget-sidebar .verse-background,
  #verse-widget-header .verse-background:hover,
  #verse-widget-sidebar .verse-background:hover,
  #verse-widget-header *,
  #verse-widget-sidebar * {
    transition: none !important;
    transform: none !important;
  }
}

/* ===== BLOCK ALIGNMENT (block.json "align" support) ===== */
.wp-block-votd-sidebar-widget.alignleft,
.wp-block-votd-sidebar-widget.alignright {
  width: 100%;
  max-width: 350px;
}

.wp-block-votd-sidebar-widget.alignleft {
  margin-right: 1.5em;
}

.wp-block-votd-sidebar-widget.alignright {
  margin-left: 1.5em;
}

.wp-block-votd-sidebar-widget.aligncenter {
  margin-left: auto;
  margin-right: auto;
  max-width: 350px;
}