/* Shared date range calendar.
   Portalled to <body>, so it must not depend on any page-level stylesheet.
   Loaded once from the public site layout. */

.hhc {
  --hhc-brand: #2f6f5e;
  --hhc-ink: #16191d;
  --hhc-ink-2: #5b6470;
  --hhc-ink-3: #8b94a1;
  --hhc-line: #e4e7ec;
  --hhc-soft: #f2f6f4;

  position: fixed;
  z-index: 4000;
  background: #fff;
  border: 1px solid var(--hhc-line);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, .18);
  padding: 18px;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--hhc-ink);
  max-width: calc(100vw - 24px);
}

.hhc__bg { display: none; }

.hhc__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 16px;
}
.hhc__ttl { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.hhc__sub { font-size: 12.5px; color: var(--hhc-ink-3); margin-top: 2px; }

.hhc__seg {
  display: inline-flex; background: var(--hhc-soft); border-radius: 999px;
  padding: 3px; flex: 0 0 auto;
}
.hhc__seg button {
  border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--hhc-ink-2); padding: 6px 13px; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.hhc__seg button.is-on { background: #fff; color: var(--hhc-ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.hhc__seg button:disabled { opacity: .45; cursor: not-allowed; }

.hhc__cals { display: flex; gap: 26px; }
.hhc__m { width: 268px; flex: 0 0 auto; }
.hhc__mh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hhc__mt { font-weight: 700; font-size: 14.5px; }
.hhc__nav {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
  border: 1px solid var(--hhc-line); background: #fff; color: var(--hhc-ink-2);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.hhc__nav:hover:not(:disabled) { background: var(--hhc-soft); }
.hhc__nav:disabled { opacity: .3; cursor: not-allowed; }
.hhc__nav--ghost { border-color: transparent; background: none; pointer-events: none; }

.hhc__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.hhc__dow {
  text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--hhc-ink-3); padding-bottom: 8px;
}
.hhc__d {
  aspect-ratio: 1; border: 0; background: none; border-radius: 50%;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--hhc-ink);
  cursor: pointer; padding: 0; position: relative;
}
.hhc__d:hover:not(:disabled) { background: var(--hhc-soft); }
.hhc__d:focus-visible { outline: 2px solid var(--hhc-brand); outline-offset: 1px; }
.hhc__d:disabled { color: #c6ccd5; cursor: not-allowed; text-decoration: line-through; }
.hhc__d.is-off { color: var(--hhc-ink-3); }
.hhc__d.is-empty { visibility: hidden; }
.hhc__d.is-mid { background: var(--hhc-soft); border-radius: 0; }
.hhc__d.is-start, .hhc__d.is-end {
  background: var(--hhc-brand); color: #fff; font-weight: 700; text-decoration: none;
}
.hhc__d.is-start:hover, .hhc__d.is-end:hover { background: var(--hhc-brand); }

.hhc__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hhc-line);
}
.hhc__link {
  border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--hhc-ink-2); text-decoration: underline; cursor: pointer; padding: 0;
}
.hhc__done {
  border: 0; border-radius: 999px; background: var(--hhc-brand); color: #fff;
  font: inherit; font-size: 13px; font-weight: 700; padding: 10px 22px; cursor: pointer;
}
.hhc__done:hover { filter: brightness(.94); }

/* Phones and small tablets: a bottom sheet, because a two-month popover
   anchored to a 140px-wide field has nowhere to go. */
@media (max-width: 820px) {
  .hhc__bg {
    display: block; position: fixed; inset: 0; z-index: 3990;
    background: rgba(16, 24, 40, .45);
  }
  .hhc--sheet {
    top: auto; left: 0; right: 0; bottom: 0;
    max-width: none; width: 100%;
    border-radius: 20px 20px 0 0; border-bottom: 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .hhc--sheet .hhc__cals { display: block; }
  .hhc--sheet .hhc__m { width: 100%; }
  .hhc--sheet .hhc__m + .hhc__m { margin-top: 22px; }
  .hhc--sheet .hhc__foot {
    position: sticky; bottom: 0; background: #fff; margin-top: 18px;
  }
  .hhc--sheet .hhc__d { font-size: 14.5px; }
}

@media (max-width: 400px) {
  .hhc__top { flex-direction: column; gap: 12px; }
  .hhc__seg { align-self: stretch; }
  .hhc__seg button { flex: 1; }
}