/* prayer.css — the prayer request page, /contact-us/prayer-requests/.

   Authored, October 2026. The header, navigation, footer AND THE HERO
   are the site's own, transplanted from /contact-us/need-to-talk/ by
   tools/build-prayer-page.mjs, so this styles only the content under
   the hero.

   NO VALUE HERE IS INVENTED. Everything is taken from ssw.css (the Seva
   & Satsang Weekends form), which took its own values from
   ninja-match-gravity.css, the file that makes the public accommodation
   form match the house style: labels 12px / 900 / 1.1px / uppercase;
   body and inputs in ff-meta-serif-web-pro 500 / 18px; underline inputs;
   focus turns the underline brand orange (#CA4D2A); errors #b3261e. */

/* ---- the hero's photograph, lighter on phones ----
   The transplanted head sets the background to the compressed 1400px
   file (the builder re-points it). These swap in the smaller files at
   Elementor's own two breakpoints, the same ones at which the hero's
   height drops to 400px and then 300px. SAME SELECTOR as the rule they
   override, so they win by coming later, not by force. */
@media (max-width: 1024px) {
  .elementor-72281 .elementor-element.elementor-element-1a1cc79:not(.elementor-motion-effects-element-type-background) {
    background-image: url("/wp-content/uploads/2026/10/SV-Guru-Flower-prayer-1024.jpg");
  }
}
@media (max-width: 767px) {
  .elementor-72281 .elementor-element.elementor-element-1a1cc79:not(.elementor-motion-effects-element-type-background) {
    background-image: url("/wp-content/uploads/2026/10/SV-Guru-Flower-prayer-768.jpg");
  }
}

/* ---- the column ---- (ssw.css .sv-ssw, and its 747px text measure) */
.sv-pr { max-width: 46rem; margin: 0 auto; padding: 2rem 1.25rem 4.5rem; }
@media (max-width: 40rem) { .sv-pr { padding: 1.25rem 1.25rem 3rem; } }

.sv-pr h2 {
  font-family: var(--e-global-typography-primary-font-family, brandon-grotesque), sans-serif;
  font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--e-global-color-text, #263238);
  margin: 2.5rem 0 .9rem; padding-bottom: .4rem;
  border-bottom: 1px solid rgba(38, 50, 56, .12);
}
.sv-pr p, .sv-pr li {
  font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
  font-weight: var(--e-global-typography-text-font-weight, 500);
  font-size: var(--e-global-typography-text-font-size, 18px);
  line-height: 1.6;
  color: var(--e-global-color-text, #263238);
}
.sv-pr-intro { max-width: 747px; }
/* A link inside the introduction takes the introduction's size. The
   kit sets every link to the body text size (`.elementor-kit-5 a`,
   18px), so "contact us" came out smaller than the words around it.
   Qualified with .elementor-kit-5 so it wins on specificity. Elliot,
   20 October 2026. */
.elementor-kit-5 .sv-pr .sv-pr-intro > p.sv-pr-lead a {
  font-size: inherit; line-height: inherit;
}

/* Paragraph spacing: the site's own — 0 above, 0.9rem (14.4px) below,
   measured on a Day Visits body paragraph, 20 October 2026. Stated here
   so the temple sentence, now straight after the introduction, gets
   ordinary spacing on both sides whatever the theme does. */
.sv-pr .sv-pr-intro > p { margin: 0 0 .9rem; }

/* THE INTRODUCTION — matched to Day Visits, not invented. Its intro
   ("Darshan means to have sight of the Divinity...") is an h4, which the
   site styles with Elementor global typography 672d991: ff-meta-serif-
   web-pro 500, 24px / 31px on desktop, 20px / 26px up to 1024px, 18px /
   23px up to 767px (measured on the live page). Using the same
   variables rather than copying the numbers, so it follows the site if
   that style ever changes. The old prayer page's introduction was an h4
   too. */
/* The space after it: 20px, the site's standard gap between blocks
   (Elementor's widget spacing, `.elementor-widget:not(:last-child)
   {margin-block-end:20px}` in the kit). Elliot asked for a little more
   than the 14.4px paragraph gap, 20 October 2026. The journal articles'
   gap after their intro is 12.8px — less, so not used. */
.sv-pr .sv-pr-intro > p.sv-pr-lead { margin-bottom: 20px; }
.sv-pr .sv-pr-intro > p.sv-pr-lead {
  font-family: var(--e-global-typography-672d991-font-family, ff-meta-serif-web-pro), serif;
  font-size: var(--e-global-typography-672d991-font-size, 24px);
  font-weight: var(--e-global-typography-672d991-font-weight, 500);
  line-height: var(--e-global-typography-672d991-line-height, 31px);
  color: var(--e-global-color-text, #263238);
}

/* ---- the form ---- (ssw.css "the form") */
.sv-pr-send { margin-top: 2.5rem; }
.sv-pr-form { margin: 0; }
.sv-pr p.sv-pr-required {
  font-size: .95rem; line-height: 1.45; color: rgba(38, 50, 56, .72);
  margin: 0 0 1.4rem;
}
.sv-pr-field { margin: 0 0 1.4rem; }
.sv-pr-field > label {
  display: block;
  font-family: var(--e-global-typography-primary-font-family, brandon-grotesque), sans-serif;
  font-size: 12px; font-weight: 900; letter-spacing: 1.1px; line-height: 20px;
  text-transform: uppercase;
  color: var(--e-global-color-text, #263238);
  margin-bottom: .3rem; padding: 0;
}
.sv-pr-hint {
  display: block;
  font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
  font-weight: 500; font-size: .95rem; line-height: 1.45;
  color: rgba(38, 50, 56, .72);
  text-transform: none; letter-spacing: normal;
  margin: 0 0 .5rem;
}
.sv-pr-form input[type=text],
.sv-pr-form textarea {
  width: 100%; box-sizing: border-box;
  background: transparent; border: 0;
  border-bottom: 1px solid rgba(38, 50, 56, .55);
  border-radius: 0; padding: 10px 0;
  font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
  font-size: var(--e-global-typography-text-font-size, 18px);
  line-height: 1.6;
  color: var(--e-global-color-text, #263238);
}
.sv-pr-form input[type=text]:focus, .sv-pr-form textarea:focus {
  outline: 0;
  border-bottom-color: var(--e-global-color-primary, #CA4D2A);
  border-bottom-width: 2px; padding-bottom: 9px;
}
.sv-pr-form textarea { resize: vertical; min-height: 9rem; }

/* The counter: the hint's own small serif, right-aligned under the box.
   Turns the error red past the limit. */
.sv-pr-count {
  display: block; text-align: right;
  font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
  font-size: .95rem; line-height: 1.45; color: rgba(38, 50, 56, .72);
  margin-top: .35rem;
  font-variant-numeric: tabular-nums;
}
.sv-pr-count--over { color: #b3261e; font-weight: 700; }

/* The file picker. A browser's own control, kept — it is the one every
   visitor already knows, on a phone it opens the camera and the photo
   library, and a restyled one is the usual way these stop working with a
   keyboard or screen reader. Only its size and focus are matched. */
.sv-pr-form input[type=file] {
  display: block; max-width: 100%;
  font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
  font-size: 1rem; padding: .5rem 0;
  color: var(--e-global-color-text, #263238);
}
/* NO LINE UNDER IT. The site's kit gives every input that is not a
   button a 2px underline (`.elementor-kit-5 input:not([type="button"])
   :not([type="submit"])`), which drew a stray line under "Choose file".
   Qualified with .elementor-kit-5 so it wins on specificity, not by
   force. Found 20 October 2026; parked the same day and fixed. */
.elementor-kit-5 .sv-pr-form input[type=file] { border: 0; }
.sv-pr-form input[type=file]:focus-visible,
.sv-pr-form input[type=checkbox]:focus-visible {
  outline: 3px solid var(--e-global-color-primary, #CA4D2A); outline-offset: 2px;
}

/* The preview: the WHOLE photo, never cropped — contain, not cover. */
.sv-pr-preview { margin: .75rem 0 0; }
.sv-pr-preview img {
  display: block; max-width: 100%; max-height: 22rem;
  width: auto; height: auto; object-fit: contain;
  border: 1px solid rgba(38, 50, 56, .12); border-radius: 4px;
}

/* The tick box: its text reads as body copy (ssw.css .sv-ssw-radio).
   Qualified with .sv-pr-field > so it beats the field-label rule above,
   which otherwise made it a block in small capitals with the box on a
   line of its own — seen in the browser on 13 October, not guessed. */
.sv-pr-field > label.sv-pr-checkbox,
.sv-pr-checkbox {
  display: flex; align-items: flex-start; gap: .6rem;
  font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
  font-size: 1rem; font-weight: 500; line-height: 1.5;
  text-transform: none; letter-spacing: normal;
  color: var(--e-global-color-text, #263238);
  cursor: pointer;
}
.sv-pr-checkbox input { margin-top: .3rem; width: 1.15rem; height: 1.15rem; flex: none; }

.sv-pr-privacy { margin: 1.75rem 0 1rem; }
/* The privacy text: the small print the Seva & Satsang form used for
   its own privacy statement (ssw.css .sv-ssw-smallprint). */
.sv-pr p.sv-pr-privacy-text {
  font-size: .95rem; line-height: 1.55; color: rgba(38, 50, 56, .72);
  margin: 0; max-width: 42rem;
}

/* The button: the site's own (ssw.css .sv-ssw-submit). */
.sv-pr-submit-row { margin: 1.75rem 0 0; }
.sv-pr-submit {
  font-family: var(--e-global-typography-primary-font-family, brandon-grotesque), sans-serif;
  font-size: 12px; font-weight: 900; letter-spacing: 1.1px; line-height: 20px;
  text-transform: uppercase;
  color: #fff;
  background: var(--e-global-color-primary, #CA4D2A);
  border: 2px solid var(--e-global-color-primary, #CA4D2A);
  border-radius: 4px; padding: .9rem 1.7rem; cursor: pointer;
}
.sv-pr-submit:focus-visible { outline: 3px solid var(--e-global-color-primary, #CA4D2A); outline-offset: 3px; }
.sv-pr-submit[disabled] { opacity: .55; cursor: default; }

#sv-pr-turnstile { margin: 1.25rem 0 0; min-height: 65px; }

/* ---- holding message or form ----
   `hidden` must win whatever else styles these blocks, or the form
   could show for everybody because of an unrelated display rule. */
#sv-pr-content[hidden], #sv-pr-hold[hidden] { display: none !important; }
/* The holding message: the page's ordinary body text, with room above
   the footer so the page does not look cut off. */
.sv-pr-hold { padding: .5rem 0 2rem; }
.sv-pr .sv-pr-hold p { margin: 0; }

/* ---- messages ---- (ssw.css "errors" and .sv-ssw-done) */
.sv-pr p.sv-pr-error {
  font-family: var(--e-global-typography-primary-font-family, brandon-grotesque), sans-serif;
  font-weight: 700; font-size: .95rem; line-height: 1.4;
  color: #b3261e; margin: .3rem 0 .4rem;
}
.sv-pr-field--error input[type=text],
.sv-pr-field--error textarea { border-bottom-color: #b3261e; border-bottom-width: 2px; }
.sv-pr-summary {
  border: 2px solid #b3261e; background: #fdf3f2; border-radius: 4px;
  padding: 1rem 1.1rem; margin: 1.5rem 0 0;
}
.sv-pr .sv-pr-summary p { margin: 0; color: #b3261e; font-weight: 700; }
/* Without JavaScript the form cannot send, so the page says so in the
   same box a failed send uses. */
.sv-pr p.sv-pr-nojs {
  border: 2px solid #b3261e; background: #fdf3f2; border-radius: 4px;
  padding: 1rem 1.1rem; margin: 1.5rem 0 0; color: #b3261e; font-weight: 700;
}
.sv-pr-done {
  border: 2px solid var(--e-global-color-primary, #CA4D2A);
  border-radius: 4px; padding: 1.25rem 1.35rem; margin: 0;
}
.sv-pr .sv-pr-done p { margin: 0; }
.sv-pr-done:focus { outline: 0; }

/* Read by screen readers, not shown. */
.sv-pr-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}