/* Hail Mary inline expansion: ABAD's Concept A, approved by Mr. Egan.
   Ported from angelus-bell-chrome-extension PR #9,
   design/2026-10-hailmary-language/shared/hailmary.css (Concept A rules only).
   Sizes follow this site's prayer text (1rem, line-height 1.7) instead of the
   extension's 14px, so the closed page keeps exactly the spacing it had. */

.prayer-column .hm { margin: 1rem 0; }

/* The whole line is the button, so the tap target spans the column width. */
.prayer-column .hm-toggle {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  font-style: italic;
  color: var(--color-accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.prayer-column:lang(zh-Hant) .hm-toggle, .prayer-column:lang(ja) .hm-toggle, .prayer-column:lang(ko) .hm-toggle {
  font-family: 'Inter', var(--pa-cjk);
  line-height: 1.95;
  letter-spacing: 0.02em;
}

/* Invisible band above and below the line: 37px tall on desktop, 43px when
   stacked for narrow/touch screens. Layout and spacing stay exactly as before. */
.prayer-column .hm-toggle::before {
  content: "";
  position: absolute;
  inset: calc((37px - 1.7em) / -2) -6px;
}
@media (max-width: 700px) {
  .prayer-column .hm-toggle::before { inset: calc((43px - 1.7em) / -2) -8px; }
}

.prayer-column .hm-face {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  max-width: 100%;
}

.prayer-column .hm-label {
  text-decoration: underline dotted rgba(139,115,85,0.45);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.prayer-column .hm-toggle:hover .hm-label,
.prayer-column .hm-toggle:focus-visible .hm-label {
  text-decoration-color: var(--color-gold);
  color: #6f5a40;
}
.prayer-column .hm-toggle:focus-visible .hm-face {
  outline: 2px solid rgba(201,169,89,0.75);
  outline-offset: 3px;
}

/* nowrap: this site sets overflow-wrap: break-word on prayer cards, which would
   otherwise stack the dots into a column as their width closes to 0. */
.prayer-column .hm-dots {
  display: inline-block;
  white-space: nowrap;
  overflow-wrap: normal;
  max-width: 3em;
  overflow: hidden;
  vertical-align: bottom;
  transition: opacity .25s ease, max-width .3s ease;
}
.prayer-column .hm.is-open .hm-dots { opacity: 0; max-width: 0; }

/* Drawn pointing right; turns to point down when open. */
.prayer-column .hm-chevron {
  flex: 0 0 auto;
  color: var(--color-gold);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.prayer-column .hm.is-open .hm-chevron { transform: rotate(90deg); }

/* visibility keeps the closed text out of screen-reader browse mode;
   its delay lets the closing slide finish first. */
.prayer-column .hm-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows .4s cubic-bezier(.4,0,.2,1),
    opacity .3s ease,
    visibility 0s linear .4s;
}
.prayer-column .hm.is-open .hm-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.prayer-column .hm-clip { overflow: hidden; min-height: 0; }

.prayer-column .hm-text {
  margin: 0.45rem 0 0.15rem 2px;
  padding: 0.1rem 0 0.1rem 0.85rem;
  border-left: 2px solid rgba(201,169,89,0.55);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
}
/* Two paragraphs (the Amen is joined to the last line by hailmary.js), separated
   by the site's couplet spacing: the same 1rem as ".prayer-column .couplet +
   .couplet" in the-angelus.html, which is also the gap between a V./R. couplet
   and the Hail Mary line after it. Line spacing inside each paragraph is unchanged. */
.prayer-column .hm-text p,
.prayer-column .hm-inline p.instruction {
  margin: 0;
}
.prayer-column .hm-text p + p,
.prayer-column .hm-inline p.instruction + p.instruction {
  margin-top: 1rem;
}
/* The Amen and the word before it never wrap apart (see amenLine in hailmary.js). */
.prayer-column .hm-amen { white-space: nowrap; }
/* A Hail Mary printed inline keeps the spacing of the line it replaces. */
.prayer-column .hm-inline { margin: 1rem 0; }

/* Restoring saved state on load must not animate. */
.hm-instant .hm-panel,
.hm-instant .hm-chevron,
.hm-instant .hm-dots { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .prayer-column .hm-panel,
  .prayer-column .hm-chevron,
  .prayer-column .hm-dots { transition: none !important; }
}

/* Review aid (?targets in the URL): shade the real tap areas. */
.show-targets .prayer-column .hm-toggle::before {
  background: rgba(198,45,37,0.10);
  outline: 1px dashed rgba(198,45,37,0.55);
  border-radius: 6px;
}