/* Site-wide accessibility affordances.
   Loaded on every page so the skip link behaves identically everywhere rather
   than being redefined per template. Colours are literal with a var() fallback
   because the brand custom properties are declared by whichever page stylesheet
   happens to load, and this file has to work on the pages that load none. */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 10px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  background: var(--paper, #f4eee7);
  color: var(--wine, #6f1620);
  font: 600 15px/1.2 Montserrat, system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(33, 26, 24, .28);
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 10px;
  outline: 3px solid var(--wine, #6f1620);
  outline-offset: 2px;
}

/* A skip link that lands on a container gets no focus ring by default, so the
   target is given one for the duration of the jump. Without this the keyboard
   user activates the link and has no idea anything moved. */
[id]:target {
  scroll-margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Ask JOAT automated-assistant disclosure.

   This rule lives here rather than in a chat stylesheet because the chat modal
   is rendered on 19 pages that between them load four different stylesheets
   (enhancements, editorial-pages, network-page, members-only), and this file is
   the only one present on all of them. A disclosure that renders unstyled on 18
   of 19 pages is not a disclosure.

   Sized deliberately larger than the neighbouring .chat-note (10px): the point
   is that a visitor reads it before typing, so it cannot be fine print.
   -------------------------------------------------------------------------- */

.chat-ai-notice {
  margin: 0 0 12px;
  padding: 11px 14px;
  border: 1px solid rgba(111, 22, 32, .28);
  border-left: 3px solid var(--wine, #6f1620);
  border-radius: 8px;
  background: rgba(111, 22, 32, .05);
  color: var(--ink, #211a18);
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
}

.chat-ai-notice strong {
  color: var(--wine, #6f1620);
}

.chat-ai-notice a {
  color: var(--wine, #6f1620);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .chat-ai-notice {
    font-size: 12px;
    padding: 10px 12px;
  }
}

/* Ask JOAT is the only active surface while its dialog is open. This keeps
   fixed homepage controls out of the dialog and prevents iOS scroll chaining. */
body.chat-open .section-nav,
body.chat-open .scroll-top,
body.chat-open .global-scroll-top,
body.chat-open .ask-tab,
body.chat-open .chase-pop {
  visibility: hidden !important;
  pointer-events: none !important;
}

#chat-overlay.active {
  z-index: 5000;
  overscroll-behavior: none;
}

@media (max-width: 820px) {
  #chat-overlay {
    inset: 0;
    width: 100%;
    height: 100dvh;
    padding: 0;
    place-items: stretch;
  }

  #chat-overlay .chat-modal {
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }

  #chat-overlay .modal-head {
    flex: 0 0 auto;
    padding: max(18px, env(safe-area-inset-top)) 20px 18px;
  }

  #chat-overlay .modal-head h2 {
    font-size: clamp(38px, 11vw, 50px);
  }

  #chat-overlay .modal-head p {
    margin-top: 5px;
    font-size: 12px;
  }

  #chat-overlay .chat-layout {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  #chat-overlay .chat-questions {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line, #d8cec5);
  }

  #chat-overlay .faq-button {
    flex: 0 0 auto;
    width: auto;
    min-width: min(78vw, 300px);
    padding: 11px 13px;
  }

  #chat-overlay .chat-answer-wrap {
    flex: 0 0 auto;
    min-height: 0;
    padding: 16px 16px 0;
    overflow: visible;
  }

  #chat-overlay .chat-messages {
    flex: 0 0 auto;
    min-height: 120px;
    overflow: visible;
  }

  #chat-overlay .chat-input {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 8px;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
    background: var(--paper, #fbf8f3);
  }

  #chat-overlay .modal-close {
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Conditional form blocks.

   The inquiry and event forms reveal optional questions by toggling the
   `hidden` attribute, but page stylesheets set `display:grid` on `.field` with
   the same specificity as `[hidden]`, so which one wins depends on stylesheet
   order. Because this file loads last on every page, pinning it here makes the
   behaviour the same everywhere instead of per-page luck.
   -------------------------------------------------------------------------- */

[hidden] {
  display: none !important;
}

/* Marks a label as optional without relying on the absence of an asterisk. */
.field-optional,
.event-field-optional {
  font-weight: 400;
  opacity: .72;
}

/* Field-level helper text. `.event-field-help` already exists in the events
   stylesheet; this is the same treatment for the forms whose stylesheets never
   defined one, so helper text does not inherit body copy size. */
.field-help {
  margin: 4px 0 0;
  color: rgba(33, 26, 24, .58);
  font-size: 12px;
  line-height: 1.55;
}

/* Consent acknowledgements on the events inquiry form. They reuse
   `.event-choice` for the checkbox layout and checked state that stylesheet
   already defines, and only need to span the column and give the longer
   sentence room to breathe. */
.event-consent {
  margin-top: 12px;
  padding: 15px 16px;
  align-items: flex-start;
}
.event-consent span {
  line-height: 1.6;
}
.event-consent a {
  color: inherit;
  text-decoration: underline;
}
.event-field-optional,
.field-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: .72;
}

/* Item 13: the sensitive-upload warning renders inside each upload fieldset,
   directly above the file pickers, so it has to read as a caution rather than
   as more helper text. */
.event-upload-warning {
  margin: 10px 0 4px;
  padding: 11px 13px;
  border-left: 3px solid var(--wine, #6f1620);
  border-radius: 0 10px 10px 0;
  background: rgba(111, 22, 32, .06);
  color: rgba(33, 26, 24, .78);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}
.event-upload-warning strong {
  color: var(--wine, #6f1620);
}
.event-upload-warning a {
  color: inherit;
  text-decoration: underline;
}

/* Item 15: the incentive-disclosure explanation on the client-note form.
   `.review-field label` is uppercase 10px tracking, which is right for a label
   and wrong for a sentence, so the helper text opts out of it. */
.review-field-help {
  margin: -2px 0 0;
  color: rgba(33, 26, 24, .57);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  text-transform: none;
}

/* Item 4: the draft-saving status line. It renders in two very different
   places -- the light events hero and the espresso-on-paper affiliate aside --
   so it inherits its colour instead of naming one, and leans on opacity for
   the muted treatment. */
.form-draft-status {
  display: block;
  margin: 12px 0 0;
  color: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  opacity: .82;
}
.form-draft-status:empty {
  display: none;
}
.form-draft-clear {
  margin-left: 8px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  font-size: inherit;
  cursor: pointer;
}
.form-draft-clear:hover,
.form-draft-clear:focus-visible {
  opacity: .7;
}