/* Schema patch 39.15 in the Sangat portal: the regional drawer <djjs-region-drawer> (assets/js/region-drawer.js): the
   branch's official channels, its contact lines and the inquiry form. Built on the app's tokens (--c-surface, --c-ink,
   --c-muted, --c-sunken, --c-accent, --c-accent-ink, --c-primary), so Temple Dark (html.dark) and Temple Dawn both read.
   A side sheet from 40rem, a full-height bottom sheet on phones; targets ≥ 44px; no slide when motion is reduced. */

djjs-region-drawer { display: contents; }
.djjs-rd {
  --rd-surface: var(--c-surface, #FFFDF9); --rd-sunken: var(--c-sunken, #F5EDE1); --rd-ink: var(--c-ink, #2A1614); --rd-muted: var(--c-muted, #6B5750);
  --rd-line: rgba(217, 119, 6, .32); --rd-gold: var(--c-accent-ink, #92400E); --rd-primary: var(--c-primary, #881337); --rd-on-primary: var(--c-on-primary, #FFF7EE);
  --rd-danger: var(--c-danger, #B42318); --rd-success: var(--c-success, #2F6B3A); --rd-field: #FFFFFF; --rd-focus: #881337;
  --rd-serif: var(--font-display, "Cormorant Garamond", "Cormorant Fallback", Georgia, serif);
}
:root.dark .djjs-rd, [data-theme="dark"] .djjs-rd {
  --rd-surface: #161311; --rd-sunken: #110E0B; --rd-ink: #FCFBF7; --rd-muted: #BBA996; --rd-line: rgba(217, 119, 6, .2);
  --rd-gold: #F59E0B; --rd-danger: #F28B82; --rd-success: #7BC48A; --rd-field: #1F1A16; --rd-focus: #FCD34D;
}

/* ---------- the sheet ---------- */
.djjs-rd {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: min(28rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  border: 0; border-left: 1px solid var(--rd-line); border-radius: 1.25rem 0 0 1.25rem; background: var(--rd-surface); color: var(--rd-ink);
  box-shadow: -24px 0 60px -28px rgba(0, 0, 0, .6); overscroll-behavior: contain; box-sizing: border-box;
}
.djjs-rd *, .djjs-rd *::before, .djjs-rd *::after { box-sizing: border-box; }
.djjs-rd::backdrop { background: rgba(13, 11, 9, .55); backdrop-filter: blur(2px); }
.djjs-rd__in { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.djjs-rd__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex: none;
  padding: max(1.125rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) .875rem 1.25rem; border-bottom: 1px solid var(--rd-line);
}
.djjs-rd__titles { min-width: 0; }
.djjs-rd__eyebrow { margin: 0 0 .25rem; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-gold); }
.djjs-rd__title { margin: 0; font-family: var(--rd-serif); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; color: var(--rd-ink); }
.djjs-rd__x {
  position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rd-line);
  background: transparent; color: var(--rd-ink); font: inherit; font-size: 1rem; cursor: pointer;
}
.djjs-rd__x:hover { background: rgba(217, 119, 6, .1); }
.djjs-rd__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) 1.25rem;
}
.djjs-rd__body[aria-busy="true"] { opacity: .75; }

/* ---------- sections, channels ---------- */
.djjs-rd-sec { margin: 1.25rem 0 0; }
.djjs-rd-sec:first-child { margin-top: 0; }
.djjs-rd-h { margin: 0 0 .5rem; font-family: var(--rd-serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: var(--rd-ink); }
.djjs-rd-muted { margin: 0 0 .5rem; color: var(--rd-muted); font-size: .95rem; line-height: 1.55; }
.djjs-rd-channels, .djjs-rd-contact { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.djjs-rd-chan {
  display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .5rem .75rem; border-radius: .875rem; border: 1px solid var(--rd-line);
  background: var(--rd-sunken); color: var(--rd-ink); text-decoration: none; overflow-wrap: anywhere;
}
.djjs-rd-chan:hover { border-color: rgba(217, 119, 6, .55); }
.djjs-rd-chan__icon {
  display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--rd-line);
  background: var(--rd-surface); font-size: 1.05rem; line-height: 1;
}
.djjs-rd-chan__text { display: grid; min-width: 0; flex: 1 1 auto; }
.djjs-rd-chan__title { font-weight: 600; font-size: .98rem; line-height: 1.3; }
.djjs-rd-chan__sub { color: var(--rd-muted); font-size: .85rem; line-height: 1.35; }
.djjs-rd-chan__go { flex: none; color: var(--rd-gold); font-size: .95rem; }
.djjs-rd-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- the region select and the form ---------- */
.djjs-rd-form { display: grid; gap: .875rem; margin-top: .5rem; }
.djjs-rd-field { display: grid; gap: .375rem; min-width: 0; }
.djjs-rd-field--region { margin-bottom: 1.25rem; }
.djjs-rd-label { font-weight: 600; font-size: .92rem; color: var(--rd-ink); }
.djjs-rd-opt { font-weight: 400; color: var(--rd-muted); }
.djjs-rd-field input, .djjs-rd-field select, .djjs-rd-field textarea {
  width: 100%; min-height: 48px; padding: .625rem .875rem; border-radius: .75rem; border: 1px solid var(--rd-line);
  background: var(--rd-field); color: var(--rd-ink); font: inherit; font-size: 16px; /* 16px: no zoom on iOS */
}
.djjs-rd-field textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.djjs-rd-field [aria-invalid="true"] { border-color: var(--rd-danger); }
.djjs-rd-hint { color: var(--rd-muted); font-size: .82rem; line-height: 1.4; }
.djjs-rd-err { color: var(--rd-danger); font-size: .88rem; font-weight: 500; }
.djjs-rd-err:empty { display: none; }
.djjs-rd-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.djjs-rd-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.375rem; border-radius: 999px;
  border: 1px solid var(--rd-line); background: transparent; color: var(--rd-ink); font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer;
}
.djjs-rd-btn--primary {
  border-color: rgba(245, 158, 11, .55); background: linear-gradient(180deg, #9B1844, var(--rd-primary)); color: var(--rd-on-primary);
  box-shadow: 0 10px 24px -12px rgba(136, 19, 55, .8);
}
.djjs-rd-btn[disabled] { opacity: .65; cursor: progress; }
.djjs-rd-status { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--rd-muted); }
.djjs-rd-status:empty { display: none; }
.djjs-rd-status[data-tone="error"] { color: var(--rd-danger); font-weight: 500; }
.djjs-rd-done { display: grid; gap: .875rem; margin-top: .5rem; padding: 1rem 1.125rem; border-radius: 1rem; border: 1px solid rgba(217, 119, 6, .45); background: var(--rd-sunken); }
.djjs-rd-done p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--rd-ink); }
.djjs-rd-done:focus { outline: none; }

.djjs-rd :is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--rd-focus); outline-offset: 2px; }

/* ---------- phones: a full-height sheet from the bottom ---------- */
@media (max-width: 39.99rem) {
  .djjs-rd { inset: 0; width: 100vw; border-left: 0; border-radius: 0; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .djjs-rd[open] { animation: djjs-rd-in .24s cubic-bezier(.22, 1, .36, 1) both; }
  .djjs-rd[open]::backdrop { animation: djjs-rd-fade .24s ease-out both; }
  @media (max-width: 39.99rem) { .djjs-rd[open] { animation-name: djjs-rd-up; } }
}
@keyframes djjs-rd-in { from { transform: translateX(2rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes djjs-rd-up { from { transform: translateY(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes djjs-rd-fade { from { opacity: 0; } to { opacity: 1; } }
html.djjs-rd-open { overflow: hidden; }