/*
 * Theme-owned supplement to hf_styles.css.
 *
 * The design-sync workflow is retired (August 2026): the hf design folder is no longer the
 * source of truth and hf_styles.css may now be edited directly. New component styling still
 * lands here, loaded after hf_styles.css, so the base sheet stays close to the original
 * design system and this file collects everything WordPress-specific that came after it.
 */

/* ---- WordPress core conventions ---------------------------------------- */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--white);
  clip-path: none;
  color: var(--ink);
  display: block;
  font-size: 1rem;
  height: auto;
  left: 0.5rem;
  padding: 0.75rem 1.2rem;
  text-decoration: none;
  top: 0.5rem;
  width: auto;
  z-index: 1000;
}

.alignleft {
  float: left;
  margin: 0.4rem 1.6rem 1.2rem 0;
}

.alignright {
  float: right;
  margin: 0.4rem 0 1.2rem 1.6rem;
}

.aligncenter {
  display: block;
  margin-inline: auto;
}

.alignwide,
.alignfull {
  max-width: 100%;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text,
figcaption {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* ---- Form notices --------------------------------------------------------
 *
 * The comps have no notices at all — they never submit — so none of this exists in
 * hf_styles.css. Built from the design's own tokens so it reads as part of the same system.
 */

.form-notice {
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
  margin-bottom: 2rem;
  padding: 1.4rem 1.6rem;
}

.form-notice h2 {
  font-size: 1.4rem;
  margin: 0;
}

.form-notice p {
  margin: 0.5rem 0 0;
}

.form-notice ul {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
}

.form-notice li + li {
  margin-top: 0.3rem;
}

/*
 * These are focused programmatically so a screen reader announces them, which means the
 * focus ring shows on an element the reader never tabbed to. Keep it, but tint it to the
 * notice's own colour — a vermillion ring around a success message reads as an error.
 */
.form-notice:focus {
  outline: none;
}

.form-notice--error:focus-visible {
  outline: 2px solid var(--vermillion);
  outline-offset: 3px;
}

.form-notice--ok:focus-visible {
  outline: 2px solid #2F7D4F;
  outline-offset: 3px;
}

/* Success: a seal-like mark and a warm ground, so a save reads as an event, not a footnote. */
.form-notice--ok {
  background: var(--white);
  border-color: var(--line);
  border-left-color: #2F7D4F;
  box-shadow: var(--shadow-1);
  position: relative;
}

.form-notice--ok h2 {
  align-items: center;
  color: #1E6B3E;
  display: flex;
  gap: 0.7rem;
}

.form-notice--ok h2::before {
  align-items: center;
  background: #2F7D4F;
  border-radius: var(--radius);
  color: var(--white);
  content: "\2713";
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.15rem;
  height: 2rem;
  justify-content: center;
  transform: rotate(-3deg);
  width: 2rem;
}

.form-notice--error {
  background: var(--white);
  border-left-color: var(--vermillion);
  box-shadow: var(--shadow-1);
}

.form-notice--error h2 {
  color: var(--vermillion-deep);
}

.form-notice--error .hint {
  color: var(--muted);
  display: block;
  font-size: 0.82rem;
  margin-top: 0.8rem;
}

/* ---- File uploads -------------------------------------------------------- */

/*
 * File inputs are visually hidden rather than display:none, so they remain focusable by
 * keyboard and can still receive dropped files. The design's own comps had no working
 * upload, so none of this exists in hf_styles.css.
 */
.jcad-visually-hidden {
  clip-path: inset(50%);
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.jcad-visually-hidden:focus-visible + label,
.drop-zone:focus-within {
  outline: 2px solid var(--vermillion);
  outline-offset: 3px;
}

.drop-zone {
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.drop-zone.is-dragover {
  background: var(--paper-2);
  border-color: var(--vermillion);
}

.jcad-filelist {
  font-size: 0.88rem;
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  text-align: left;
  width: 100%;
}

.jcad-filelist li {
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  padding: 0.4rem 0;
}

/* The preview replaces the "No photo yet" placeholder label. */
.photo-edit .media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Per-file photo credit, added to the chosen-files list by jcad-forms.js. */
.jcad-filelist .file-name {
  display: block;
}

.jcad-filelist .file-credit {
  align-items: baseline;
  color: var(--ink-2);
  display: flex;
  font-size: 0.78rem;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.jcad-filelist .file-credit input {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  flex: 1;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.6rem;
}

.jcad-filelist .file-credit input:focus {
  border-color: var(--vermillion);
  box-shadow: 0 0 0 3px rgba(166, 49, 38, 0.14);
  outline: none;
}

/* ---- Tag limit counter (jcad-forms.js) ----------------------------------- */

.tag-count {
  color: var(--ink-2);
  font-size: 0.76rem;
  margin: 0.35rem 0 0;
}

.tag-count.is-over {
  color: var(--vermillion-deep);
  font-weight: 600;
}

/* ---- Artist contact modal ------------------------------------------------ */

.profile-contact {
  margin-top: 1.2rem;
}

.contact-notice {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.85rem;
  margin: 0 0 0.8rem;
  padding: 0.7rem 0.9rem;
}

.contact-notice--ok {
  border-left: 4px solid #2f7d4f;
  color: #1e6b3e;
}

.contact-notice--error {
  border-left: 4px solid var(--vermillion);
  color: var(--vermillion-deep);
}

.jcad-contact-modal {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  color: var(--ink);
  max-width: 30rem;
  padding: 2rem;
  width: calc(100vw - 3rem);
}

.jcad-contact-modal::backdrop {
  backdrop-filter: blur(3px);
  background: rgba(12, 10, 7, 0.6);
}

.jcad-contact-modal h2 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
}

.jcad-contact-modal .contact-intro {
  color: var(--ink-2);
  font-size: 0.85rem;
  margin: 0 0 1.2rem;
}

.jcad-contact-modal .contact-field {
  margin: 0 0 1rem;
}

.jcad-contact-modal .contact-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.jcad-contact-modal .contact-field input,
.jcad-contact-modal .contact-field textarea {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
  width: 100%;
}

.jcad-contact-modal .contact-field input:focus,
.jcad-contact-modal .contact-field textarea:focus {
  border-color: var(--vermillion);
  box-shadow: 0 0 0 3px rgba(166, 49, 38, 0.14);
  outline: none;
}

.jcad-contact-modal .contact-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin: 1.2rem 0 0;
}

/* The honeypot field: off-screen for people, present for bots. */
.jcad-hp {
  left: -9999px;
  position: absolute;
}

/* ---- Signed-in header chip ------------------------------------------------ */

/* The chip links to Manage Profile; the sign-out link beside it actually signs out. */
.utilityleft {
  align-items: center;
  display: flex;
  gap: 0.9rem;
}

.chip-signout {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  white-space: nowrap;
}

.mnav__utility .chip-signout {
  display: inline-block;
  margin: 0.4rem 0 0.8rem;
}

/* ---- Manage profile save bar -------------------------------------------- */

/*
 * The comp shows "You have unsaved changes." permanently, which on a freshly loaded page
 * says something untrue. jcad-forms.js adds .is-dirty on the first edit; visibility rather
 * than display keeps the bar's layout from shifting when it appears.
 */
.save-bar .unsaved {
  visibility: hidden;
}

.save-bar.is-dirty .unsaved {
  visibility: visible;
}

/* ---- General content template (placeholder, pending design) ------------- */

.content-body {
  max-width: 68ch;
  padding-block: 3.5rem 5rem;
}

.content-body > * + * {
  margin-top: 1.15rem;
}

.content-body h2 {
  font-size: 1.9rem;
  margin-top: 2.6rem;
}

.content-body h3 {
  font-size: 1.35rem;
  margin-top: 2rem;
}

.content-body ul,
.content-body ol {
  padding-left: 1.4rem;
}

.content-body li + li {
  margin-top: 0.4rem;
}

.content-body img {
  height: auto;
  max-width: 100%;
}

.content-body blockquote {
  border-left: 3px solid var(--vermillion);
  color: var(--ink-2);
  font-style: italic;
  padding-left: 1.4rem;
}

.content-main .content-head {
  padding-block: 3rem 1rem;
}

.content-main .news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}