/* Novoro.dev — contact.css (contact-page-only styles) */

/* One studio composition: a short invitation beside the project workspace. */
.contact-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-content: center;
  padding-block: var(--space-2xl);
}

.contact-intro h1 {
  max-width: 13ch;
  font-size: clamp(2.25rem, 1.9rem + 2.07vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.contact-intro > p {
  max-width: 34ch;
  margin-top: var(--space-lg);
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

/* Decorative only: a sealed note, never a sent or delivered state. */
.contact-envelope {
  width: min(100%, 260px);
  margin-top: var(--space-xl);
  transform: rotate(-4deg);
  filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--color-primary) 16%, transparent));
}

.contact-envelope__letter { fill: var(--color-ivory); stroke: color-mix(in srgb, var(--color-gold) 45%, var(--color-ivory)); stroke-width: 2; }
.contact-envelope__lines { fill: none; stroke: color-mix(in srgb, var(--color-primary-light) 45%, var(--color-ivory)); stroke-width: 5; stroke-linecap: round; }
.contact-envelope__body { fill: var(--color-primary); }
.contact-envelope__fold { fill: none; stroke: var(--color-gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.contact-envelope__seal { fill: var(--color-gold); }

.contact-direct {
  margin-top: var(--space-xl);
}

.contact-direct__email {
  display: inline-block;
  max-width: 100%;
  padding-block: var(--space-xs);
  overflow-wrap: anywhere;
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}

.contact-direct__email:hover {
  text-decoration-color: currentColor;
}

.contact-direct p {
  margin-top: 0;
  color: var(--color-text-secondary);
}

/* Elevated ivory workspace with the forest strip the homepage CRM uses. */
.contact-workspace {
  overflow: hidden;
  background: var(--color-ivory);
  border-radius: 22px;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--color-primary) 14%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.contact-workspace__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-primary);
}

.contact-workspace__mark {
  flex-shrink: 0;
  width: 28px;
  height: 20px;
  background: var(--color-gold);
  mask: url('/assets/images/brand/novoro-mark-full.svg') center / contain no-repeat;
}

.contact-workspace__bar h2 {
  font-size: var(--font-size-lg);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--color-on-dark);
}

.contact-form {
  display: grid;
  /* An explicit track: an implicit `auto` column would size to the intrinsic
     width of the widest control and refuse to narrow. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs) var(--space-lg);
  padding: var(--space-lg) var(--space-md) var(--space-md);
}

/* Shown while contact.html carries the placeholder action; removed with the
   disabled attribute when a real delivery mailbox is wired up. */
.contact-form__unavailable {
  padding: var(--space-md);
  border-left: 3px solid var(--color-error);
  background-color: var(--color-bg-warm);
  font-weight: 500;
}

.form__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: calc(var(--space-xs) / 2);
  /* A text control carries an intrinsic min-content width from its default
     `size`/`cols`; without this the field cannot narrow below it and the page
     scrolls sideways once the text is enlarged. */
  min-width: 0;
}

/* Optional fields have no error line; reserve its space so rows keep one rhythm. */
.form__field:not(:has(.form__error)) {
  padding-bottom: calc(1.25rem + var(--space-xs) / 2);
}

/* Honeypot — off-screen, not display:none (some bots skip hidden) */
.form__field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__field label {
  font-weight: 600;
  color: var(--color-primary-dark);
}

.form__optional {
  font-weight: 400;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.form__field input,
.form__field select,
.form__field textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--color-gold) 5%, var(--color-ivory));
  border: 1px solid color-mix(in srgb, var(--color-primary-light) 75%, var(--color-ivory));
  border-radius: var(--border-radius-md);
  transition: border-color var(--transition-fast);
}

/* A select ignores line-height, so both single-line controls share the input's height. */
.form__field input,
.form__field select {
  min-block-size: calc(1.5rem + var(--line-height-relaxed) * 1em + 2px);
}

.form__field textarea {
  resize: vertical;
}

.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  border-color: var(--color-primary);
}

/* Focus must not repaint an invalid field; the focus outline still shows. */
.form__field [aria-invalid='true'],
.form__field [aria-invalid='true']:focus {
  border-color: var(--color-error);
}

.form__error {
  min-height: 1.25rem;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-error);
}

.contact-form .btn--primary {
  width: 100%;
  margin-top: var(--space-xs);
  /* Still a pill on one line; a rounded block, not a blob, once enlarged text wraps. */
  border-radius: 2rem;
}

/* The global primary hover turns ivory, which would vanish on this card. */
.contact-form .btn--primary:hover {
  background-color: color-mix(in srgb, var(--color-gold) 75%, var(--color-ivory));
}

.contact-form__note {
  margin-top: 0;
  /* The address is one token; at 200% text it outgrows a phone-width card. */
  overflow-wrap: break-word;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.contact-form__status {
  margin-top: 0;
  font-weight: 500;
  color: var(--color-success);
}

.contact-form__status--error {
  color: var(--color-error);
}

.contact-form__status:empty {
  display: none;
}

@media (min-width: 640px) {
  .contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
  }

  /* Name/email, then company/interest; everything else spans the card. */
  .contact-form > :not(.form__field),
  .contact-form > .form__field:has(textarea) {
    grid-column: 1 / -1;
  }

  .contact-form .btn--primary {
    grid-column: 1;
    width: auto;
  }

  .contact-form .contact-form__note {
    grid-column: 2;
    align-self: center;
    margin-top: var(--space-xs);
  }
}

@media (min-width: 960px) {
  .contact-studio {
    grid-template-columns: minmax(0, 40fr) minmax(0, 56fr);
    column-gap: 4%;
    align-items: center;
    min-height: calc(100svh - var(--header-height));
    padding-block: var(--space-xl);
  }
}

/* FAQ — the second screen: purpose on the left, native disclosures right. */
.contact-faq {
  display: grid;
  /* Explicit tracks: implicit `auto` ones size to the longest question. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  min-height: calc(100svh - var(--header-height));
  padding-block: var(--space-section);
  background: radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--color-gold) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--color-project-warm) 55%, var(--color-ivory));
}

.contact-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.contact-faq__intro h2 {
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
  font-weight: 400;
  letter-spacing: -.05em;
}

.contact-faq__intro p {
  max-width: 30ch;
  margin-top: var(--space-md);
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}

.faq__item {
  background: var(--color-ivory);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 6%, transparent);
  transition: box-shadow var(--transition-base) var(--ease-out);
}

.faq__item[open] {
  box-shadow: 0 14px 34px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.faq__q {
  position: relative;
  padding: var(--space-md) calc(var(--space-2xl) + var(--space-xs)) var(--space-md) var(--space-lg);
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-primary-dark);
  cursor: pointer;
  list-style: none;
  border-radius: var(--border-radius-lg);
  /* Breaks only a word wider than the box, e.g. at 200% text on a phone. */
  overflow-wrap: break-word;
}

.faq__q::-webkit-details-marker {
  display: none;
}

/* Gold plus that turns to a cross when open */
.faq__q::after {
  content: '+';
  position: absolute;
  right: var(--space-lg);
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  translate: 0 -50%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-gold) 22%, var(--color-ivory));
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: 1;
  color: var(--color-primary);
  transition: rotate var(--transition-base) var(--ease-out);
}

.faq__item[open] .faq__q::after {
  rotate: 45deg;
}

.faq__q:hover {
  color: var(--color-accent);
}

.faq__a {
  max-width: 60ch;
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--color-text-secondary);
}

@media (min-width: 960px) {
  .contact-faq__inner {
    grid-template-columns: minmax(0, 40fr) minmax(0, 56fr);
    column-gap: 4%;
    align-items: center;
  }
}

@media (max-width: 599px) {
  .contact-studio { gap: var(--space-lg); padding-block: var(--space-xl); }
  .contact-intro > p { font-size: var(--font-size-base); margin-top: var(--space-md); }
  .contact-envelope { display: none; }
  .contact-direct { margin-top: var(--space-md); }
  .contact-workspace { border-radius: var(--border-radius-lg); }
  .contact-workspace__bar { padding: var(--space-sm) var(--space-md); }
  .contact-faq__inner { gap: var(--space-lg); }
  .faq__q { padding-left: var(--space-md); padding-right: var(--space-2xl); }
  .faq__q::after { right: var(--space-sm); }
  .faq__a { padding-inline: var(--space-md); }
}

/* Enlarged text on a phone: the question takes the card's full width and the
   toggle drops to a compact row beneath it instead of reserving a side gutter. */
.faq {
  container-type: inline-size;
}

@container (max-width: 12rem) {
  .faq__q { padding-inline: var(--space-sm); }
  .faq__q::after { position: static; margin: var(--space-xs) 0 0 auto; translate: none; }
  .faq__a { padding-inline: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item,
  .faq__q::after,
  .form__field input,
  .form__field select,
  .form__field textarea {
    transition: none;
  }
}