/* ============================================================
   Contact Page — contact.css
   Form styles, contact details, map embed, input states,
   success/error messages.  Mobile-first.
   ============================================================ */


/* ── Page layout ───────────────────────────────────────────── */

/* Fill the viewport vertically so the footer stays in view without scrolling
   (especially when no map is rendered). The article is a flex child of
   .site-main; the body section grows to fill whatever space the article gets. */
.contact-page {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-page__body {
  flex: 1;
  padding-block: var(--space-12); /* override .section's --space-24; flex: 1 provides visual breathing room */
}

.contact-page__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  max-width: 960px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .contact-page__layout {
    grid-template-columns: 1fr 280px;
    align-items: start;
    gap: var(--space-16);
  }
}


/* ── Contact Form ──────────────────────────────────────────── */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Two-column row (Name + Email) */
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 480px) {
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Hide the honeypot from humans */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ── Form fields ───────────────────────────────────────────── */

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-form__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-heading);
}

.contact-form__required {
  color: var(--color-primary);
  margin-left: var(--space-1);
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-background);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow   var(--duration-fast) var(--ease-out);
  appearance: none;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255 69 0 / 0.15);
}

.contact-form__input:invalid:not(:placeholder-shown),
.contact-form__textarea:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 140px;
}

/* Placeholder text */
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.75;
}


/* ── Submit button & footer ────────────────────────────────── */

.contact-form__meta-row {
  margin-top: var(--space-1);
  margin-bottom: 0;
}

.contact-form__action-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

@media (min-width: 480px) {
  .contact-form__action-row {
    justify-content: space-between;
  }
}

.contact-form__submit {
  position: relative;
  min-width: 160px;
  margin-left: auto;
}

/* Loading spinner (shown while AJAX request is in flight) */
.contact-form__btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255 255 255 / 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cf-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.contact-form--loading .contact-form__btn-spinner {
  display: inline-block;
}

.contact-form--loading .contact-form__btn-text {
  opacity: 0.7;
}

.contact-form--loading .contact-form__submit {
  pointer-events: none;
  opacity: 0.85;
}

@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

.contact-form__required-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.2;
}

.contact-form__turnstile {
  margin-top: 0;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .contact-form__action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-form__submit {
    width: 100%;
    margin-left: 0;
  }
}


/* ── Status messages ───────────────────────────────────────── */

/* Used by both the AJAX JS and the PHP non-JS redirect */
.contact-form__status {
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 500;
  display: none;    /* hidden until a state class is added */
}

/* Shown when JS sets is-success / is-error, or via PHP --success / --error */
.contact-form__status.is-success,
.contact-form__status.is-error,
.contact-form__status--success,
.contact-form__status--error {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.contact-form__status--success,
.contact-form__status.is-success {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.contact-form__status--error,
.contact-form__status.is-error {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* Close (×) button inside a status message */
.contact-form__status-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1em;
  line-height: 1;
  padding: 0 var(--space-1);
  color: inherit;
  opacity: 0.5;
  margin-top: 1px; /* optical alignment with first line of text */
}

.contact-form__status-close:hover {
  opacity: 1;
}

.contact-form__status-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}


/* ── Contact Details sidebar ───────────────────────────────── */

.contact-page__details {
  padding-top: var(--space-2);
}

.contact-page__details-heading {
  font-size: var(--text-xl);
  color: var(--color-heading);
  margin-bottom: var(--space-6);
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.contact-detail__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255 69 0 / 0.10);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.contact-detail__icon svg {
  width: 20px;
  height: 20px;
}

.contact-detail__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.contact-detail__value {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.contact-detail__value:hover {
  color: var(--color-primary);
}

.contact-page__social {
  margin-top: var(--space-6);
}

.contact-page__social-heading {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.social-links--contact .social-links__item {
  background-color: rgba(255 69 0 / 0.10);
}

.social-links--contact .social-links__item:hover {
  background-color: rgba(255 69 0 / 0.20);
  transform: translateY(-1px);
}


/* ── Map embed ─────────────────────────────────────────────── */

.contact-page__map {
  margin-top: var(--space-12);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.contact-page__map iframe {
  display: block;
  width: 100%;
  border: 0;
}


/* ── Gallery (product category page) ──────────────────────── */
/* Shared between contact.css and the single product category template */

.product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin-top: var(--space-8);
}

.gallery-thumb {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  padding: 0;
  background-color: var(--color-surface);
  width: 100%;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.gallery-thumb:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}

.gallery-thumb:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.gallery-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

.gallery-thumb:hover .gallery-thumb__img {
  transform: scale(1.06);
}


/* ── Lightbox (injected by animations.js) ─────────────────── */

.bf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0 0 0 / 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.bf-lightbox.is-open {
  opacity: 1;
}

.bf-lightbox__figure {
  max-width: 90vw;
  max-height: 90svh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.bf-lightbox__img {
  max-width: 100%;
  max-height: 80svh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  display: block;
}

.bf-lightbox__caption {
  font-size: var(--text-sm);
  color: rgba(255 255 255 / 0.7);
  text-align: center;
  max-width: 480px;
}

.bf-lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255 255 255 / 0.12);
  border: 1px solid rgba(255 255 255 / 0.2);
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: var(--text-2xl);
  cursor: pointer;
  transition: background-color var(--duration-fast);
  line-height: 1;
}

.bf-lightbox__close:hover {
  background: rgba(255 255 255 / 0.22);
}

.bf-lightbox__close:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.bf-lightbox__prev,
.bf-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255 255 255 / 0.10);
  border: none;
  color: var(--color-white);
  font-size: var(--text-3xl);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast);
  z-index: 2;
}

.bf-lightbox__prev {
  left: var(--space-4);
}

.bf-lightbox__next {
  right: var(--space-4);
}

.bf-lightbox__prev:hover,
.bf-lightbox__next:hover {
  background: rgba(255 255 255 / 0.22);
}

.bf-lightbox__prev:focus-visible,
.bf-lightbox__next:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.bf-lightbox__prev:disabled,
.bf-lightbox__next:disabled {
  opacity: 0.25;
  pointer-events: none;
}

@media (max-width: 480px) {
  .bf-lightbox__prev,
  .bf-lightbox__next {
    top: auto;
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
    transform: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: rgba(255 255 255 / 0.17);
  }

  .bf-lightbox__prev {
    left: var(--space-3);
  }

  .bf-lightbox__next {
    right: var(--space-3);
  }
}