/* File: assets/css/contact.css */

/* ---------- Progressive enhancement helper ---------- */
/* Elements that need JavaScript stay hidden until main.js sets the "js-ready" class. */
.js-only {
  display: none;
}

.js-ready .js-only {
  display: block;
}

.page-head-action {
  margin-block-start: 1.25rem;
}

/* ---------- Contact cards: e-mail with the hidden Discord tag ---------- */
/* The tooltip must not be clipped by the card. */
.contact-card {
  overflow: visible;
}

/* The browser gives every <dd> a left margin of 40px and main.css removes only the vertical margins.
   That pushed the e-mail to the right of the card center, so the horizontal margin is removed here. */
.contact-details dd {
  margin-inline: 0;
}

.contact-mail {
  /* The anchor of the tooltip below (the tooltip is positioned relative to the e-mail). */
  position: relative;
  display: inline-block;
  max-width: 100%;

  .contact-tip {
    position: absolute;
    inset-block-end: calc(100% + 0.6rem);
    inset-inline-start: 50%;
    z-index: 5;
    max-width: 90vw;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    pointer-events: none;

    /* Small arrow pointing to the e-mail. */
    &::after {
      content: "";
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 50%;
      width: 0.6rem;
      height: 0.6rem;
      border: solid var(--color-border);
      border-width: 0 1px 1px 0;
      background: var(--color-surface-2);
      transform: translate(-50%, -50%) rotate(45deg);
    }
  }

  /* Visible only while the e-mail is hovered or focused (keyboard users get it too). */
  &:hover .contact-tip,
  &:focus-within .contact-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}

/* ---------- Dialog ---------- */
.contact-dialog {
  width: min(100% - 2rem, 34rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow);

  &::backdrop {
    background: rgb(0 0 0 / 0.65);
  }
}

/* No background scrolling while the dialog is open. */
html:has(dialog[open]) {
  overflow: hidden;
}

.contact-form {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.25rem, 4vw, 2rem);

  .dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;

    h2 {
      font-size: 1.5rem;
    }
  }

  .dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;

    &:hover {
      background: var(--color-surface-2);
    }
  }

  .contact-recipient {
    color: var(--color-muted);

    strong {
      color: var(--color-text);
    }
  }

  .field {
    display: grid;
    gap: 0.4rem;

    label {
      font-weight: 600;
    }
  }

  .input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: inherit;
    font: inherit;

    &[aria-invalid="true"] {
      border-color: var(--color-danger-border);
    }
  }

  textarea.input {
    min-height: 8rem;
    resize: vertical;
  }

  .field-error {
    color: var(--color-danger-text);
    font-size: 0.9rem;
  }

  .form-status {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-weight: 600;

    &.is-success {
      border-color: #166534;
      background: rgb(34 197 94 / 0.15);
      color: #86efac;
    }

    &.is-error {
      border-color: var(--color-danger-border);
      background: var(--color-danger-bg);
      color: var(--color-danger-text);
    }
  }

  /* Honeypot field: invisible for people, reachable for bots. */
  .hp {
    position: absolute;
    inset-inline-start: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}