/**
 * Contact page (page-contact.php).
 *
 * Deliberately card-less: the page sits on the warm site background and the
 * form is held together by hairlines and underlines instead of a white panel.
 * The only enclosed element is the envelope strip, because that one is meant
 * to read as a piece of paper the button is about to hand over.
 */

.dp-contact {
  position: relative;
  overflow: hidden;
  background: var(--dp-bg);
  padding: clamp(2.75rem, 6vw, 5.5rem) 0 clamp(3.5rem, 8vw, 7rem);
}

/* One faint wash behind the form so the warm background is not dead flat.
   Kept weak on purpose — the hairlines are what structure this page. */
.dp-contact::after {
  content: "";
  position: absolute;
  right: -160px;
  top: -120px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: rgba(94, 204, 255, 0.11);
  filter: blur(80px);
  pointer-events: none;
}

.dp-contact__inner {
  position: relative;
  z-index: 1;
  width: min(1040px, calc(100vw - 2.5rem));
  margin: 0 auto;
}

.dp-contact__grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3rem);
}

/* ── Left column: the editorial half ──────────────────────────────── */

.dp-contact__eyebrow {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dp-accent);
}

.dp-contact__title {
  margin: 0 0 1rem;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--dp-text);
}

.dp-contact__lead {
  margin: 0;
  max-width: 34rem;
  font-size: 1.03rem;
  line-height: 1.68;
  color: var(--dp-text-soft);
}

.dp-contact__facts {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--dp-border);
}

.dp-contact__fact {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--dp-border);
}

/* Small phones: the e-mail address alone is wider than the value column. */
@media (max-width: 419px) {
  .dp-contact__fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }
}

.dp-contact__fact dt {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dp-text-muted);
}

.dp-contact__fact dd {
  margin: 0;
  min-width: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--dp-text);
  overflow-wrap: anywhere;
}

.dp-contact__fact dd a {
  color: var(--dp-accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.dp-contact__fact dd a:hover {
  color: var(--dp-text);
}

/* ── Right column: the form ───────────────────────────────────────── */

.dp-contact__form {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.dp-contact__row {
  display: grid;
  gap: 1.5rem;
}

.dp-contact__field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.dp-contact__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dp-text-muted);
}

.dp-contact__optional {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.75;
}

/* Underlines, not boxes — this is what keeps the page off the template look.
   The bottom border is the whole control, so focus states have to be loud
   enough to survive that. */
.dp-contact__input,
.dp-contact__textarea,
.dp-contact__select select {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid rgba(19, 36, 64, 0.16);
  border-radius: 0;
  padding: 0.6rem 0.15rem;
  font: inherit;
  color: var(--dp-text);
  background: transparent;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.dp-contact__textarea {
  min-height: 9.5rem;
  line-height: 1.6;
  resize: vertical;
}

.dp-contact__input::placeholder,
.dp-contact__textarea::placeholder {
  color: rgba(19, 36, 64, 0.38);
}

.dp-contact__input:focus,
.dp-contact__textarea:focus,
.dp-contact__select select:focus {
  outline: none;
  border-bottom-color: var(--dp-accent);
  box-shadow: 0 2px 0 0 rgba(106, 90, 224, 0.28);
}

/* Invalid only after a submit attempt — the form marks itself, never on blur. */
.dp-contact__form[data-contact-checked] .dp-contact__input:invalid,
.dp-contact__form[data-contact-checked] .dp-contact__textarea:invalid {
  border-bottom-color: #e0533d;
}

.dp-contact__select {
  position: relative;
  display: grid;
}

.dp-contact__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.75rem;
  cursor: pointer;
}

.dp-contact__select-chevron {
  position: absolute;
  right: 0.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dp-text-muted);
  pointer-events: none;
}

/* ── Envelope: shows what the button opens ────────────────────────── */

.dp-contact__envelope {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: 0.25rem;
  padding: 0.95rem 1.1rem;
  border: 1px dashed rgba(106, 90, 224, 0.4);
  border-radius: 16px;
  background: rgba(106, 90, 224, 0.055);
}

.dp-contact__envelope-mark {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: var(--dp-accent);
}

/* flex: 1 rather than the default auto basis: with overflow-wrap:anywhere on
   the value, Safari sizes this box from a max-content that already assumes
   the address may break, so left to itself it claims ~20px too little and
   wraps hello@dreampage.no mid-word. Filling the row removes the guess. */
.dp-contact__envelope-rows {
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.7rem;
  row-gap: 0.3rem;
  min-width: 0;
  font-size: 0.87rem;
  line-height: 1.4;
}

.dp-contact__envelope-key {
  font-weight: 600;
  color: var(--dp-text-muted);
}

.dp-contact__envelope-value {
  min-width: 0;
  color: var(--dp-text);
  overflow-wrap: anywhere;
}

/* Small phones: side by side leaves too little room for the address, which
   would then break mid-word. Stacked, it always fits on one line. */
@media (max-width: 419px) {
  .dp-contact__envelope {
    padding: 0.85rem 0.9rem;
  }

  .dp-contact__envelope-rows {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .dp-contact__envelope-key {
    margin-top: 0.45rem;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .dp-contact__envelope-key:first-child {
    margin-top: 0;
  }
}

/* ── Actions ──────────────────────────────────────────────────────── */

.dp-contact__submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #7a68ff 0%, #5b3fd6 100%);
  box-shadow: 0 10px 26px rgba(90, 63, 214, 0.28);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.dp-contact__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(90, 63, 214, 0.34);
}

.dp-contact__submit:active {
  transform: translateY(0);
}

.dp-contact__submit:focus-visible,
.dp-contact__copy:focus-visible,
.dp-contact__fact dd a:focus-visible {
  outline: 2px solid var(--dp-accent);
  outline-offset: 3px;
}

.dp-contact__hint,
.dp-contact__fallback {
  margin: -0.85rem 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--dp-text-muted);
}

.dp-contact__fallback {
  margin-top: -1.15rem;
}

.dp-contact__copy {
  padding: 0;
  border: 0;
  background: none;
  color: var(--dp-accent-strong);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.dp-contact__copy:hover {
  color: var(--dp-text);
}

.dp-contact__status {
  margin: -0.9rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--dp-accent-strong);
}

.dp-contact__status--error {
  color: #c8402b;
}

/* ── Phones and tablets ───────────────────────────────────────────────
   Underlines read fine beside a hairline column on a wide screen, but on a
   phone the form turned into a stack of grey lines where nothing announced
   itself as tappable. Below the two-column breakpoint every control gets a
   real surface, and the labels drop the tiny uppercase treatment so they
   read as questions rather than as more metadata like the facts list. */

@media (max-width: 899px) {
  .dp-contact__form {
    gap: 1.15rem;
  }

  .dp-contact__row {
    gap: 1.15rem;
  }

  .dp-contact__field {
    gap: 0.45rem;
  }

  .dp-contact__label {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dp-text);
  }

  .dp-contact__optional {
    font-size: 0.85rem;
    color: var(--dp-text-muted);
  }

  .dp-contact__input,
  .dp-contact__textarea,
  .dp-contact__select select {
    min-height: 52px;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(19, 36, 64, 0.16);
    border-bottom-width: 1px;
    border-radius: 14px;
    background: #fff;
  }

  .dp-contact__input:focus,
  .dp-contact__textarea:focus,
  .dp-contact__select select:focus {
    border-color: var(--dp-accent);
    box-shadow: 0 0 0 3px rgba(106, 90, 224, 0.16);
  }

  .dp-contact__form[data-contact-checked] .dp-contact__input:invalid,
  .dp-contact__form[data-contact-checked] .dp-contact__textarea:invalid {
    border-color: #e0533d;
  }

  .dp-contact__textarea {
    min-height: 8rem;
    padding-top: 0.85rem;
  }

  .dp-contact__select select {
    padding-right: 2.75rem;
  }

  .dp-contact__select-chevron {
    right: 1rem;
  }

  /* Full width: a pill floating half-way across a phone reads as optional. */
  .dp-contact__submit {
    width: 100%;
  }

  .dp-contact__hint,
  .dp-contact__fallback,
  .dp-contact__status {
    margin-top: -0.55rem;
  }

  .dp-contact__fallback {
    margin-top: -0.75rem;
  }
}

/* ── Desktop: editorial half beside the form ──────────────────────── */

@media (min-width: 900px) {
  .dp-contact__grid {
    --dp-contact-gutter: clamp(3rem, 6vw, 5.5rem);
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: var(--dp-contact-gutter);
    align-items: start;
  }

  /* Same hairline that separates the facts, turned on its side to split the
     editorial half from the form. Sits in the middle of the gutter. */
  .dp-contact__form {
    margin-left: calc(var(--dp-contact-gutter) / -2);
    padding-left: calc(var(--dp-contact-gutter) / 2);
    border-left: 1px solid var(--dp-border);
  }

  .dp-contact__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  }

  .dp-contact__submit {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dp-contact__submit {
    transition: none;
  }

  .dp-contact__submit:hover {
    transform: none;
  }
}