/* Custom styles for Ora Pro Nobis (Zensical/Material theme) */

.md-typeset h1 {
  font-weight: 600;
  border-bottom: 1px solid var(--md-default-fg-color--lighter);
  padding-bottom: 0.3em;
}

/* Non-active nav link text uses full strength color */
.md-nav .md-nav__link:not(.md-nav__link--active) {
  color: var(--md-default-fg-color) !important;
}

/* Icons in non-active nav items get reduced opacity so they are slightly less pronounced
   than the link text. Applies to both Lucide and material icons (crosses etc.).
   Works the same in light and dark mode. */
.md-nav .md-nav__link:not(.md-nav__link--active) svg,
.md-nav .md-nav__link:not(.md-nav__link--active) .md-icon {
  opacity: 0.4 !important;
}

/* Keep Lucide thin stroke style (opacity from above applies) */
.md-nav .md-nav__link:not(.md-nav__link--active) svg.lucide {
  color: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
}

/* Active nav items: full opacity for the current page's icon */
.md-nav__link--active svg,
.md-nav__link--active .md-icon {
  opacity: 1 !important;
}

/* Hover: full visibility */
.md-nav .md-nav__link:hover svg,
.md-nav .md-nav__link:hover .md-icon {
  opacity: 1 !important;
}

/* Sidebar nav hover and active states for cleaner UI/UX */
.md-nav__link {
  border-radius: 4px;
  transition: background-color 120ms ease, color 120ms ease;
  padding: 0.4em 0.5em;   /* more vertical padding so bg forms a nice box around text+icon */
  margin-top: 0.08em;     /* small gap between the padded boxes */
}

.md-nav .md-nav__link:hover {
  background-color: rgba(0, 0, 0, 0.06);
  color: inherit !important;
}

[data-md-color-scheme="slate"] .md-nav .md-nav__link:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: inherit !important;
}

.md-nav__link--active {
  background-color: rgba(64, 81, 181, 0.12); /* slight tint of primary */
  color: var(--md-primary-fg-color);
  font-weight: 600;
}

.md-nav__link.md-nav__container {
  margin-bottom: 0.8em;
}

.md-nav__link.md-nav__container .md-nav__link:not(.md-nav__link--active) {
  background-color: transparent !important;
  padding: 0 !important;
}

/* Active blue for section title containers (mirrors hover) */
.md-nav__link.md-nav__container:has(.md-nav__link--active) {
  background-color: rgba(64, 81, 181, 0.12) !important;
}

[data-md-color-scheme="slate"] .md-nav__link.md-nav__container:has(.md-nav__link--active) {
  background-color: rgba(64, 81, 181, 0.12) !important;
}

.md-nav__link.md-nav__container:has(.md-nav__link--active) .md-nav__link {
  background-color: transparent !important;
  padding: 0 !important;
}

.md-nav__link.md-nav__container:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

[data-md-color-scheme="slate"] .md-nav__link.md-nav__container:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.md-nav__link.md-nav__container .md-nav__link:hover {
  background-color: transparent !important;
}

/* Better color for links, warmer tone */
.md-typeset a {
  color: #2a5f8f;
}

.md-typeset a:hover {
  color: #1a4a70;
}

/* Dark mode: brighter blue for readability on dark background */
[data-md-color-scheme="slate"] .md-typeset a {
  color: #7eb8ff;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #a3ccff;
}

/* Subtle section headers */
.md-nav__title {
  font-weight: 600;
}

/* Wider content area for reading (less cramped docs feel) */
.md-grid {
  max-width: 1200px;
}

/* Very minimal: background image on the normal Zensical header + styled title text.
   No hiding, no forced sizes, no positioning hacks. */

.md-header.md-header--shadow.md-header--lifted {
  background-image: url('../assets/images/header-banner.jpg');
  background-size: cover;
  background-position: center 35%;
}

/* Light overlay for text legibility over image */
.md-header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
  z-index: -1;
}

/* Header title text style - larger with desired look, applied to site name */
.md-header__title .md-ellipsis {
  font-family: Georgia, "Times New Roman", "Palatino Linotype", serif;
  font-size: 1.45rem;
  font-style: italic;
  font-weight: normal;
  letter-spacing: 0.02em;
  color: #f5f0e6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

/* Subtle dark treatment on tabs so they blend with the banner */
.md-tabs {
  background: rgba(0,0,0,0.3);
}

/* Keep the light/dark mode toggle in the header at full prominence.
   Only set color for visibility over the custom banner background. */
.md-header__option {
  color: #f5f0e6;
}

/* Style the top-left header logo icon to match the light title text color.
   Use slightly lower opacity so the icon is less pronounced than the "Ora Pro Nobis" text. */
.md-header__button.md-logo svg,
.md-nav__button.md-logo svg {
  color: #f5f0e6 !important;
  fill: currentColor !important;
  opacity: 0.8 !important;
}

/* Flashcards - integrated modal styles using site theme */
#flashcards-root .hand {
  cursor: pointer;
}

#flashcards-root #flashcard-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

#flashcards-root #flashcard {
  background: var(--md-default-bg-color, #fff);
  color: var(--md-default-fg-color, #333);
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  width: min(92%, 620px);
  min-height: 320px;
  border-radius: 6px;
  position: relative;
  padding: 16px;
}

#flashcards-root #flashcard-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--md-default-fg-color, #333);
  opacity: 0.6;
  z-index: 10;
}

#flashcards-root #flashcard-close:hover {
  opacity: 1;
}

#flashcards-root .flashcard-prompt {
  font-size: 2.2rem;
  text-align: center;
  margin: 32px 0 8px;
}

#flashcards-root #flashcard-content-wrapper {
  padding-top: 24px;  /* room for card status */
}

#flashcards-root .flashcard-full-answer {
  font-size: 1.1rem;
  text-align: center;
  margin-top: 8px;
}

#flashcards-root .flashcard-full-key,
#flashcards-root .flashcard-full-alt {
  text-align: center;
  opacity: 0.7;
  font-size: 0.95rem;
}

/* Button bar layout: [skip][     pause     ][flip] */
#flashcards-root .flashcard-buttons-bar {
  position: absolute;
  bottom: -48px;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
}

#flashcards-root .flashcard-button {
  flex: 0 0 90px;
  text-align: center;
  background-color: #666;
  color: white;
  border-radius: 4px;
  padding: 8px 0;
  font-size: 0.95rem;
  user-select: none;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

#flashcards-root .flashcard-button:hover {
  opacity: 0.85;
}

/* Pause is longer (takes remaining space) and slightly lighter */
#flashcards-root .flashcard-button-pause {
  flex: 1;
  background-color: #888;
}

#flashcards-root .flashcard-status {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 0.75rem;
  opacity: 0.7;
  color: var(--md-default-fg-color, #333);
}

#flashcards-root #flashcard-pause-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1001;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Green flashcard trigger buttons matching original style */
.flashcard-green {
  min-width: 200px;
  background-color: #4b5;
  border-radius: 8px;
  color: #fff;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.flashcard-green:hover {
  background-color: #5c6;
}

/* Make Zensical native tooltips (title=) look like the old site's word bubble */
.md-tooltip__inner,
.md-tooltip2__inner {
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 18px !important;
  font-weight: normal;
  line-height: 1.25;
  padding: 6px 14px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

/* Inline variant also needs the large size */
.md-tooltip--inline .md-tooltip__inner {
  font-size: 18px !important;
}

/* Triangle pointer to match old bubble style */
.md-tooltip2:before {
  border-color: transparent;
}

.md-tooltip2--bottom:before {
  border-bottom-color: rgba(0, 0, 0, 0.82);
}

.md-tooltip2--top:before {
  border-top-color: rgba(0, 0, 0, 0.82);
}

/* Show help cursor on elements with title= (used for inline language/word tooltips) */
.md-typeset [title] { cursor: help; }

/* Vertical stacked button/pill style for mystery chooser (restored from earlier option) */
.mystery-chooser {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.75rem 0 1.25rem;
}
.mystery-chooser .mystery-set {
  display: inline-block;
  padding: 0.3em 0.75em;
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  border-radius: 9999px;
  font-size: 0.92rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.mystery-chooser .mystery-set:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
[data-md-color-scheme="slate"] .mystery-chooser .mystery-set:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.mystery-chooser .mystery-set.active {
  background-color: rgba(64, 81, 181, 0.12);
  border-color: var(--md-primary-fg-color, #4051b5);
  font-weight: 600;
}
[data-md-color-scheme="slate"] .mystery-chooser .mystery-set.active {
  background-color: rgba(64, 81, 181, 0.18);
}

/* Prayer interactive (audio + per-passage/sub formatting) - minimal & integrated */
.prayer-interactive {
  margin: 1rem 0 1.5rem;
  /* use page's normal text size; children control their own */
  font-size: inherit;
  line-height: 1.45;
}

.prayer-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* When we repurpose the original H1 for the player title */
h1.prayer-with-player {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.prayer-title {
  /* inherit whatever the page H1 uses */
}

.prayer-header .play-btn,
.prayer-line .play-btn,
h1.prayer-with-player .play-btn {
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.1em 0.35em;
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  color: inherit;
}

.prayer-header .play-btn:hover,
.prayer-line .play-btn:hover,
h1.prayer-with-player .play-btn:hover {
  background: rgba(0,0,0,0.04);
}
[data-md-color-scheme="slate"] .prayer-header .play-btn:hover,
[data-md-color-scheme="slate"] .prayer-line .play-btn:hover,
[data-md-color-scheme="slate"] h1.prayer-with-player .play-btn:hover {
  background: rgba(255,255,255,0.08);
}

.prayer-line {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.35rem 0 0.1rem;
  font-size: 1em;
}

.prayer-text {
  /* real prayer text at normal size */
  font-size: 1em;
}

.prayer-phonetic {
  cursor: pointer;
  font-style: italic;
  opacity: 0.72;
  font-size: 0.96em;
}

.prayer-subs {
  margin-left: 1.8rem;
  margin-top: 0.1rem;
  font-size: 0.78rem;
  opacity: 0.82;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  font-style: italic;
  color: var(--md-default-fg-color--light, #555);
}

[data-md-color-scheme="slate"] .prayer-subs {
  color: var(--md-default-fg-color--light, #aaa);
}

.prayer-chunk {
  cursor: pointer;
  padding: 0.02em 0.15em;
  border-radius: 2px;
  transition: background 80ms ease;
  border-bottom: 1px dotted currentColor;
  opacity: 0.9;
  font-size: inherit;
}

.prayer-chunk:hover {
  background: rgba(64, 81, 181, 0.08);
  opacity: 1;
}
[data-md-color-scheme="slate"] .prayer-chunk:hover {
  background: rgba(64, 81, 181, 0.18);
}

.prayer-chunk.playing,
.prayer-phonetic.playing {
  background: rgba(64, 81, 181, 0.15);
  border-radius: 3px;
  border-bottom-color: transparent;
}
[data-md-color-scheme="slate"] .prayer-chunk.playing,
[data-md-color-scheme="slate"] .prayer-phonetic.playing {
  background: rgba(64, 81, 181, 0.28);
}

.prayer-passage {
  margin-bottom: 0.55rem;
}

/* Fallback content (plain text). Visible by default for graceful degradation.
   The player hides it only after successful render.
   Use markdown="1" on the div in source so inner Markdown parses correctly. */
.prayer-fallback {
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--md-default-fg-color--lightest, #ddd);
}

/* Make labels and text inside fallback look clean and normal */
.prayer-fallback strong {
  display: block;
  margin: 0.75rem 0 0.25rem;
  font-size: 1rem;
  opacity: 0.9;
}

.prayer-fallback p {
  margin: 0.25rem 0;
}