/* Dafa page (/{lang}/dafa).
   The header is sticky (68px on phones, 76px on desktop, up to 91px in Arabic, more with the
   large-text setting). Anything the browser scrolls to the top of the window would sit under it:
   in-page links (#sneak-peek, #waitlist), the no-JavaScript form result (the server redirects to
   #f-dafa or #wl-done), and a focused control when someone tabs backwards or when forms.js moves
   focus to the first field with an error (WCAG 2.4.11, focus not obscured). Reserve the header's
   height for every scroll on this page, in rem so it grows with the large-text setting. */
html { scroll-padding-top: 6.5rem; }
/* Section links: the sections have deep top padding, so let the section edge tuck 20-35px under
   the header (3.5rem from the top) instead of showing a strip of the section above. */
#sneak-peek,
#waitlist { scroll-margin-top: -3rem; }
/* The form result: keep the panel heading ("Join the Dafa waitlist") in view above the form or
   the success message. */
#f-dafa,
#wl-done { scroll-margin-top: 136px; }
/* A field focused after an error: keep its label in view above it. */
#f-dafa :is(input, select) { scroll-margin-top: 3rem; }
/* .error is a flex row (icon + text). An LTR island inside a message (the Arabic email example)
   would become its own flex item and split the sentence; let it flow with the text instead. */
#f-dafa .error > .ltr { display: contents; }