/**
 * @file
 * Button variants — DESIGN.md component.button.
 *
 * Three variants in active use across the site:
 *   - primary   filled persimmon, white type, ink-on-hover-deep
 *   - secondary bordered ghost (white bg, ink type, hairline border)
 *   - ghost     transparent, muted type, hover wash
 *   - danger    filled red — destructive only
 *   - link      transparent, persimmon underlined link text
 *
 * The targets are Drupal core's standard form-submit selectors plus
 * the Olivero default `.button` class. Olivero ships its primary
 * button as filled near-black (#1A1A1A); per DESIGN.md primary action
 * is persimmon (Submit poem, Save, Publish). This file flips that.
 */

/* -----------------------------------------------------------------------
 * 1. Primary — filled persimmon, white type. The single button that
 *    says "this changes the state of your relationship with the site."
 * --------------------------------------------------------------------- */
.button--primary,
input.form-submit.button--primary,
input[type="submit"].button--primary,
button[type="submit"].button--primary,
.button.button--primary {
  background: var(--np-color-accent) !important;
  background-color: var(--np-color-accent) !important;
  color: var(--np-text-inverse) !important;
  border: var(--np-border-width) solid var(--np-color-accent) !important;
  border-radius: var(--np-radius-md) !important;
  font-family: var(--np-font-sans) !important;
  font-weight: var(--np-weight-medium) !important;
  font-size: var(--np-text-base) !important;
  padding: var(--np-space-2) var(--np-space-5) !important;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color var(--np-duration-base) var(--np-ease-standard),
              border-color var(--np-duration-base) var(--np-ease-standard);
}

.button--primary:hover,
.button--primary:focus,
input.form-submit.button--primary:hover,
input[type="submit"].button--primary:hover,
button[type="submit"].button--primary:hover,
.button.button--primary:hover {
  background: var(--np-color-accent-deep) !important;
  background-color: var(--np-color-accent-deep) !important;
  border-color: var(--np-color-accent-deep) !important;
  color: var(--np-text-inverse) !important;
}

.button--primary:focus-visible {
  outline: none;
  box-shadow: var(--np-shadow-focus) !important;
}

/* -----------------------------------------------------------------------
 * 2. Secondary / default — bordered ghost. Drupal core's plain
 *    `.button` class without `--primary`.
 * --------------------------------------------------------------------- */
.button:not(.button--primary):not(.button--danger):not(.button--secondary):not([class*="hamburger"]),
input.form-submit:not(.button--primary):not(.button--danger):not(.button--secondary),
input[type="submit"]:not(.button--primary):not(.button--danger):not(.button--secondary),
button[type="submit"]:not(.button--primary):not(.button--danger):not(.button--secondary) {
  background: var(--np-bg-primary) !important;
  background-color: var(--np-bg-primary) !important;
  color: var(--np-text-primary) !important;
  border: var(--np-border-width) solid var(--np-border-secondary) !important;
  border-radius: var(--np-radius-md) !important;
  font-family: var(--np-font-sans) !important;
  font-weight: var(--np-weight-medium) !important;
  font-size: var(--np-text-base) !important;
  padding: var(--np-space-2) var(--np-space-5) !important;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none !important;
}

.button:not(.button--primary):not(.button--danger):not(.button--secondary):not([class*="hamburger"]):hover,
input.form-submit:not(.button--primary):not(.button--danger):not(.button--secondary):hover,
input[type="submit"]:not(.button--primary):not(.button--danger):not(.button--secondary):hover,
button[type="submit"]:not(.button--primary):not(.button--danger):not(.button--secondary):hover {
  background: var(--np-bg-secondary) !important;
  background-color: var(--np-bg-secondary) !important;
  border-color: var(--np-text-primary) !important;
}

/* -----------------------------------------------------------------------
 * 3. Danger — filled red, destructive only.
 * --------------------------------------------------------------------- */
.button--danger,
input.form-submit.button--danger,
input[type="submit"].button--danger,
button[type="submit"].button--danger {
  background: var(--np-color-danger) !important;
  background-color: var(--np-color-danger) !important;
  color: var(--np-text-inverse) !important;
  border: var(--np-border-width) solid var(--np-color-danger) !important;
}

.button--danger:hover {
  background: var(--np-color-danger-deep) !important;
  background-color: var(--np-color-danger-deep) !important;
  border-color: var(--np-color-danger-deep) !important;
}

/* -----------------------------------------------------------------------
 * 4. Search-result anchors and other generic content links — keep them
 *    as ink for headings, persimmon for inline links. Olivero defaults
 *    every <a> to its blue (#1475ad), which on search results renders
 *    every poem-title heading in blue. Editorial register: heading
 *    color is content (ink), action is persimmon.
 * --------------------------------------------------------------------- */
.search-results h3 a,
ol.search-results h3 a,
.search-result__title a,
li.search-result h3 a {
  color: var(--np-text-primary) !important;
  font-family: var(--np-font-serif) !important;
  font-weight: var(--np-weight-regular) !important;
  text-decoration: none !important;
  font-feature-settings: "kern", "liga", "onum";
}

.search-results h3 a:hover,
ol.search-results h3 a:hover,
.search-result__title a:hover,
li.search-result h3 a:hover {
  color: var(--np-text-link) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* "About searching" / similar in-form helper links. */
.search-form a,
.search-help-link {
  color: var(--np-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.search-form a:hover,
.search-help-link:hover {
  color: var(--np-text-link-hover);
}

/* -----------------------------------------------------------------------
 * 5. Required-field marker
 *    Olivero ships a blue SVG asterisk via .form-required::after
 *    background-image. Replace with a clean persimmon text glyph that
 *    matches the rest of the editorial palette.
 * --------------------------------------------------------------------- */
.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.required-mark::after {
  background-image: none !important;
  content: "*" !important;
  width: auto !important;
  height: auto !important;
  font-family: var(--np-font-sans);
  font-size: 1em;
  line-height: 1;
  vertical-align: baseline !important;
  color: var(--np-color-accent);
  margin-inline-start: 4px;
}