/* Hope Chapel — Connect gate
   One stylesheet for both surfaces. Everything is scoped under .hg so the
   rt-hope theme cannot leak in and this cannot leak out. It borrows the
   calendar's --hc-* palette when the calendar is on the page and falls back to
   the same values literally when it is not, so a sermon page and the calendar
   page get one identical modal. No web fonts: it inherits the page's. */

.hg {
  --hg-ink:    #23301c;
  --hg-green:  #3f5233;
  --hg-sage:   #6b7d5e;
  --hg-line:   #d9e0d1;
  --hg-wash:   #f2f5ee;
  --hg-paper:  #fff;
  --hg-olive:  #7a9a5e;
  --hg-gold:   #b58a2e;
  --hg-red:    #9C192F;

  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hg-ink);
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
.hg::backdrop { background: rgba(27, 35, 21, .55); }
.hg *, .hg *::before, .hg *::after { box-sizing: border-box; }
.hg[hidden], .hg [hidden] { display: none !important; }

/* Fallback for a browser with no <dialog>: the script sets [open] and this
   makes it behave like a modal anyway rather than a stray block of markup. */
.hg:not([open]) { display: none; }
@supports not selector(dialog::backdrop) {
  .hg[open] {
    position: fixed; z-index: 99999;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    box-shadow: 0 0 0 100vmax rgba(27, 35, 21, .55);
  }
}

.hg__in {
  position: relative;
  background: var(--hg-paper);
  border-radius: 12px;
  padding: 1.75rem 1.5rem 1.25rem;
  box-shadow: 0 18px 50px rgba(27, 35, 21, .28);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.hg__x {
  position: absolute; top: .35rem; right: .35rem;
  width: 40px; height: 40px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--hg-sage);
}
.hg__x:hover { color: var(--hg-ink); }

.hg__eyebrow {
  margin: 0 0 .3rem;
  font-size: .75rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--hg-olive);
}
.hg__h {
  margin: 0 0 .5rem;
  font-size: 1.4rem; line-height: 1.2; font-weight: 700; color: var(--hg-green);
  /* rt-hope uppercases every h2 on the site. A sermon called "Fasting" is not
     called "FASTING", and a feed named "Hope Hi" is not "HOPE HI". */
  text-transform: none; letter-spacing: normal;
}
.hg__lede { margin: 0 0 1.1rem; color: var(--hg-sage); font-size: .95rem; }

.hg__field { margin: 0 0 .8rem; }
.hg__field label {
  display: block; margin-bottom: .25rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--hg-green);
}
.hg__field input {
  width: 100%; min-height: 44px;          /* touch target, everywhere */
  padding: .55rem .7rem;
  border: 1px solid var(--hg-line); border-radius: 8px;
  background: var(--hg-paper); color: var(--hg-ink);
  font: inherit; font-size: 16px;          /* 16px or iOS zooms the page */
}
.hg__field input:focus-visible,
.hg__go:focus-visible, .hg__skip:focus-visible, .hg__x:focus-visible,
.hg input:focus-visible {
  outline: 3px solid var(--hg-gold); outline-offset: 2px; border-radius: 6px;
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden fields. */
.hg__hp {
  position: absolute !important;
  left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}

.hg__opts { margin: .9rem 0 .2rem; }
.hg__opt, .hg__radio {
  display: flex; align-items: flex-start; gap: .55rem;
  min-height: 44px; padding: .25rem 0;
  font-size: .92rem; cursor: pointer;
}
.hg__opt input, .hg__radio input {
  margin: .28rem 0 0; width: 18px; height: 18px; flex: 0 0 auto;
  accent-color: var(--hg-olive);
}

.hg__welcome { margin: .5rem 0 .2rem; padding: 0; border: 0; }
.hg__welcome legend {
  padding: 0; margin-bottom: .1rem; text-transform: none;
  font-size: .92rem; font-weight: 700; color: var(--hg-green);
}

.hg__err { margin: .5rem 0 0; min-height: 1.1em; color: var(--hg-red); font-size: .86rem; }
.hg__err:empty { min-height: 0; }

.hg__go {
  display: block; width: 100%; min-height: 48px; margin: .8rem 0 0;
  padding: .7rem 1rem; border: 0; border-radius: 8px;
  background: var(--hg-green); color: #fff;
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.hg__go:hover { background: var(--hg-ink); }

/* Never a whisper-grey afterthought: the way out is as legible as the way in. */
.hg__skip {
  display: block; width: 100%; margin: .55rem 0 0; padding: .5rem;
  border: 0; background: transparent;
  color: var(--hg-sage); font: inherit; font-size: .9rem;
  text-decoration: underline; cursor: pointer;
}
.hg__skip:hover { color: var(--hg-ink); }

.hg__fine { margin: .9rem 0 0; font-size: .76rem; color: var(--hg-sage); }

.hg__done { padding: .25rem 0 .5rem; }

@media (max-width: 559px) {
  .hg { width: calc(100vw - 1.5rem); }
  .hg__in { padding: 1.5rem 1.1rem 1.1rem; border-radius: 10px; }
  .hg__h { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .hg[open] { animation: hg-in .18s ease-out; }
  @keyframes hg-in { from { opacity: 0; transform: translateY(6px); } }
}