/* ==========================================================================
   Victor Harbour Whale Sighting — Report a Sighting page (form.css)
   Figma: "Victor Habour - Form Page"
     desktop 3175:966 / 3314:241 (dropdown open)
     mobile  3175:1041 / 3315:447 (dropdown open)
   Mobile-first; desktop layout at >=1024px. Requires tokens.css + base.css.

   Note: form fields use the CoolGray/60-family stroke #69727D straight from
   the Figma frames (the shared --vh-border #DDE1E6 token is the lighter
   hairline used elsewhere). Placeholder/option text is Roboto per Figma.
   ========================================================================== */

.vh-form-page {
  /* local knobs (raw values verbatim from the Figma frames) */
  --vh-form-stroke: #69727D;      /* field border */
  --vh-form-label: #21272A;       /* CoolGray/90 */
  --vh-form-placeholder: #697077; /* CoolGray/60 */
  --vh-form-font-field: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.vh-form-hero {
  position: relative;
  height: 550px;
  overflow: hidden;
}

.vh-form-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vh-form-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #000 100%);
  opacity: 0.55;
}

.vh-form-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  height: 100%;
  padding-top: 250px;
  text-align: center;
  color: var(--vh-white);
}

.vh-form-hero__title {
  font-size: 40px;
  letter-spacing: -0.05em; /* matches Figma's tighter Josefin rendering */
}

.vh-form-hero__intro {
  max-width: 336px;
  font-family: var(--vh-font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
}

@media (min-width: 1024px) {
  .vh-form-hero {
    height: 620px;
  }

  .vh-form-hero__content {
    align-items: flex-start;
    gap: 40px;
    padding-top: 324px;
    text-align: left;
  }

  .vh-form-hero__title {
    font-size: 50px;
  }

  .vh-form-hero__br {
    display: none; /* the designed two-line break is mobile-only */
  }

  .vh-form-hero__intro {
    max-width: 823px;
    font-size: 20px;
    line-height: 30px;
  }
}

/* --------------------------------------------------------------------------
   2. Main two-column layout on Bone
   -------------------------------------------------------------------------- */

.vh-form-main {
  padding: 52px 0 80px;
}

@media (min-width: 1024px) {
  .vh-form-main {
    padding: 88px 0 100px;
  }
}

.vh-form-cols {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .vh-form-cols {
    display: grid;
    grid-template-columns: 520px 630px;
    justify-content: space-between;
    align-items: start;
  }
}

/* --- Left rail --- */

.vh-form-rail__rule {
  height: 11px;
  margin: 0 0 32px;
  border: 0;
  background: var(--vh-black);
}

.vh-form-rail__block {
  margin-bottom: 52px;
}

.vh-form-rail__block h2 {
  margin-bottom: 32px;
  font-size: 35px;
  letter-spacing: -0.05em; /* matches Figma's tighter Josefin rendering:
                              keeps the designed single-line breaks */
}

@media (min-width: 1024px) {
  .vh-form-rail__rule {
    margin-bottom: 48px;
  }

  .vh-form-rail__block {
    margin-bottom: 64px;
  }

  .vh-form-rail__block h2 {
    margin-bottom: 40px;
    font-size: var(--vh-text-h3);
  }
}

/* --------------------------------------------------------------------------
   3. Report form
   -------------------------------------------------------------------------- */

.vh-report-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 48px;
}

@media (min-width: 1024px) {
  .vh-report-form {
    margin-top: 0;
  }
}

/* display:flex/grid would beat the UA [hidden] rule — restore it */
.vh-report-form[hidden],
.vh-upload__thumbs[hidden] {
  display: none;
}

.vh-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.vh-field__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--vh-font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  color: var(--vh-form-label);
}

.vh-field__box {
  position: relative;
}

.vh-field__icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}

.vh-input,
.vh-textarea,
.vh-select__btn {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: var(--vh-gray-10);
  border: 1px solid var(--vh-form-stroke);
  border-radius: var(--vh-radius);
  font-family: var(--vh-form-font-field);
  font-size: 16px;
  line-height: 1.4;
  color: var(--vh-form-label);
}

.vh-field__box .vh-input {
  padding-right: 52px;
}

.vh-input::placeholder,
.vh-textarea::placeholder {
  color: var(--vh-form-placeholder);
  text-transform: uppercase;
  opacity: 1;
}

.vh-textarea {
  resize: none;
}

.vh-textarea--description {
  height: 156px;
}

.vh-textarea--other {
  height: 85px;
}

/* --- Custom species dropdown (button + listbox) --- */

.vh-select {
  position: relative;
}

.vh-select__btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.vh-select__value.is-placeholder {
  color: var(--vh-form-placeholder);
}

.vh-select__value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vh-select__chevron {
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.vh-select__btn[aria-expanded='true'] {
  border-bottom-color: transparent;
}

.vh-select__btn[aria-expanded='true'] .vh-select__chevron {
  transform: rotate(180deg);
}

.vh-select__list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: -1px 0 0;
  padding: 0 16px 10px;
  list-style: none;
  background: var(--vh-gray-10);
  border: 1px solid var(--vh-form-stroke);
  border-top: 0;
  border-radius: 0 0 var(--vh-radius) var(--vh-radius);
}

/* The listbox indicates focus via the underlined active option (the
   affordance the Figma open state designs), not a container outline */
.vh-select__list:focus-visible {
  outline: none;
}

.vh-select__option {
  font-family: var(--vh-form-font-field);
  font-size: 16px;
  line-height: 38px;
  text-transform: uppercase;
  color: var(--vh-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Figma dropdown-open frames underline the highlighted option */
.vh-select__option.is-active,
.vh-select__option:hover {
  text-decoration: underline;
}

/* --- Photos upload panel --- */

.vh-upload__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 16px;
  background: var(--vh-gray-10);
  border: 1px solid var(--vh-form-stroke);
  border-radius: 4px; /* per frame: upload panel is 4px, not the 2px inputs */
}

.vh-upload__remove {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--vh-form-font-field);
  font-size: 16px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--vh-black);
  cursor: pointer;
}

/* Extrapolated: selected-photo thumbnails (no designed state) */
.vh-upload__thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vh-upload__thumb {
  position: relative;
  line-height: 0;
}

.vh-upload__thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--vh-form-stroke);
  border-radius: var(--vh-radius);
}

/* Per-photo remove control (extrapolated — no designed state) */
.vh-upload__thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--vh-black);
  color: var(--vh-white);
  font-family: var(--vh-font-body);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.vh-upload__thumb-remove:hover {
  background: #262626;
}

.vh-upload__thumb-remove:focus-visible {
  outline: 2px solid var(--vh-black);
  outline-offset: 2px;
}

/* --- Requirements block --- */

.vh-requirements {
  max-width: 480px;
}

.vh-requirements__title {
  margin-bottom: 12px;
  font-family: var(--vh-font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: underline; /* underlined on the mobile frame only */
}

@media (min-width: 1024px) {
  .vh-requirements__title {
    text-decoration: none;
  }
}

.vh-requirements__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.vh-requirements__cols p {
  font-family: var(--vh-font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}

/* --- Share-name checkbox --- */

.vh-consent {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  font-family: var(--vh-font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}

.vh-checkbox {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  background: var(--vh-gray-10);
  border: 1px solid var(--vh-form-stroke);
  border-radius: var(--vh-radius);
  cursor: pointer;
}

.vh-checkbox:checked::before {
  content: '';
  width: 14px;
  height: 12px;
  background: url('../../img/icons/icon-check-dark.svg') center / contain no-repeat;
}

.vh-report-form__submit {
  align-self: flex-start;
  margin-top: 18px;
}

/* --- Honeypot (WP rejects submissions where this is filled) --- */

.vh-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Validation states — extrapolated (mandated by brief, not designed)
   -------------------------------------------------------------------------- */

.vh-field.is-invalid .vh-input,
.vh-field.is-invalid .vh-textarea,
.vh-field.is-invalid .vh-select__btn,
.vh-field.is-invalid .vh-upload__panel {
  border-color: var(--vh-error);
}

.vh-field.is-valid .vh-input,
.vh-field.is-valid .vh-textarea,
.vh-field.is-valid .vh-select__btn,
.vh-field.is-valid .vh-upload__panel {
  border-color: var(--vh-valid);
}

.vh-field__msg {
  margin-top: 6px;
  font-family: var(--vh-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--vh-error);
}

.vh-field__msg[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   5. Success confirmation — extrapolated (mock AJAX result, not designed)
   -------------------------------------------------------------------------- */

.vh-form-success {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 11px solid var(--vh-black);
}

.vh-form-success[hidden] {
  display: none;
}

.vh-form-success__title {
  margin-bottom: 24px;
  font-size: 35px;
  letter-spacing: -0.05em;
}

.vh-form-success__copy {
  max-width: 520px;
}

.vh-form-success__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}

.vh-form-success__again {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--vh-font-display);
  font-weight: 700;
  font-size: var(--vh-text-btn);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .vh-form-success {
    margin-top: 0;
  }

  .vh-form-success__title {
    font-size: var(--vh-text-h3);
  }
}

/* --------------------------------------------------------------------------
   6. Aerial photo below the columns
   -------------------------------------------------------------------------- */

.vh-form-aerial {
  max-width: 1064px;
  margin: 80px auto 0;
}

.vh-form-aerial img {
  width: 100%;
  aspect-ratio: 480 / 344;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: var(--vh-radius);
  box-shadow: 0 4px 16px 5px rgba(12, 12, 13, 0.15);
}

@media (min-width: 1024px) {
  .vh-form-aerial {
    margin-top: 100px;
  }

  .vh-form-aerial img {
    aspect-ratio: 1064 / 484;
    border-radius: var(--vh-radius-panel);
  }
}