/* =============================================================================
   BlackSpace — Contact Page Widget Styles
   File:    assets/css/bs-contact-page.css
   Enqueued by: bs-page-nav-assets.php (MU plugin)
   Scoped to:   is_page( 'contact' )

   NOTE ON !important:
   Elementor Pro generates post CSS with 3-class specificity selectors that
   override single-class rules. All properties use !important throughout.

   All CSS custom properties (--bs-*) are declared globally in:
     wp-content/themes/woodmart-child/style.css

   Sections:
   1.  Hero (Section 1)
   2.  Contact block — Reach Us column (Section 2)
   3.  Contact block — Our Socials column (Section 2)
   4.  Contact block — Form column (Section 2)
   5.  Utility
   6.  Responsive — 960px
   7.  Responsive — 768px
   8.  Responsive — 480px
   ============================================================================= */


/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO — Section 1
   Apply .bs-contact-hero to the top-level Elementor section container
   ═══════════════════════════════════════════════════════════════════════════ */

.bs-contact-hero {
  position: relative !important;
  border-radius: var(--bs-r-card) !important;
  overflow: hidden !important;
  /* Background color (#1e1919) set in Elementor → Style → Background */
}

/* Ambient glow + diagonal texture */
.bs-contact-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(
      ellipse 60% 70% at 50% 60%,
      rgba(176, 116, 62, 0.15) 0%, transparent 65%),
    repeating-linear-gradient(
      -45deg, transparent, transparent 44px,
      rgba(255, 255, 255, 0.018) 44px,
      rgba(255, 255, 255, 0.018) 45px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Thin amber gradient line at bottom */
.bs-contact-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--bs-bronze), transparent) !important;
  opacity: 0.45 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Child content above pseudo-element overlays */
.bs-contact-hero > .e-con-inner,
.bs-contact-hero > .elementor-container {
  position: relative !important;
  z-index: 2 !important;
}

/* Eyebrow — apply .bs-contact-eyebrow to the Text Editor widget */
.bs-contact-eyebrow .elementor-widget-container {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--bs-bronze-300) !important;
}

/* "Connected" highlight in H1 — wrap in <span class="bs-contact-highlight"> */
.bs-contact-highlight {
  color: var(--bs-bronze-300) !important;
}

/* Hero subtext */
.bs-contact-subtext .elementor-widget-container {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 1rem !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. REACH US COLUMN
   Apply .bs-contact-reach to the Reach Us column container
   ═══════════════════════════════════════════════════════════════════════════ */

/* Column heading — apply .bs-contact-col-label to each column heading widget */
.bs-contact-col-label .elementor-widget-container {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: var(--bs-bronze) !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 20px !important;
}

/* Icon list items (address, email) — apply .bs-contact-info-list to the icon list widget */
.bs-contact-info-list .elementor-icon-list-item {
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.bs-contact-info-list .elementor-icon-list-item:last-child {
  border-bottom: none !important;
}

.bs-contact-info-list .elementor-icon-list-icon {
  color: var(--bs-bronze) !important;
  font-size: 1rem !important;
  margin-right: 10px !important;
}

.bs-contact-info-list .elementor-icon-list-icon svg {
  fill: var(--bs-bronze) !important;
  width: 16px !important;
  height: 16px !important;
}

.bs-contact-info-list .elementor-icon-list-text {
  font-size: 0.9375rem !important;
  color: #474747 !important;
  line-height: 1.6 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. OUR SOCIALS COLUMN
   Apply .bs-contact-socials-list to the socials icon list widget
   ═══════════════════════════════════════════════════════════════════════════ */

.bs-contact-socials-list .elementor-icon-list-item {
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.15s ease !important;
}

.bs-contact-socials-list .elementor-icon-list-item:last-child {
  border-bottom: none !important;
}

.bs-contact-socials-list .elementor-icon-list-item:hover {
  transform: translateX(4px) !important;
}

.bs-contact-socials-list .elementor-icon-list-icon {
  color: var(--bs-bronze) !important;
  font-size: 1.125rem !important;
  margin-right: 10px !important;
}

.bs-contact-socials-list .elementor-icon-list-icon svg {
  fill: var(--bs-bronze) !important;
  width: 18px !important;
  height: 18px !important;
}

.bs-contact-socials-list .elementor-icon-list-text {
  font-size: 0.9375rem !important;
  color: #474747 !important;
}

.bs-contact-socials-list .elementor-icon-list-text:hover {
  color: var(--bs-bronze) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. FORM COLUMN
   Apply .bs-contact-form-col to the form column container
   ═══════════════════════════════════════════════════════════════════════════ */

/* Form card wrapper — apply .bs-contact-form-card to the inner container
   wrapping the form heading + form widget */
.bs-contact-form-card {
  background: var(--bs-white) !important;
  border: 1px solid var(--bs-silver-mist) !important;
  border-radius: var(--bs-r-card) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
}

.bs-contact-form-card > .elementor-widget-wrap,
.bs-contact-form-card > .e-con-inner {
  padding: 36px 32px !important;
}

/* Form section label — apply .bs-contact-form-label to the "Send a Message" heading */
.bs-contact-form-label .elementor-widget-container {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: var(--bs-bronze) !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 24px !important;
}

/* ── Form fields ──────────────────────────────────────────────────────────── */
/* Apply .bs-contact-form to the Elementor Form widget */

.bs-contact-form .elementor-field-group {
  margin-bottom: 14px !important;
}

.bs-contact-form .elementor-field-textual {
  background: #f7f5f2 !important;
  border: 1px solid #e0dbd4 !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  font-size: 0.9375rem !important;
  color: #1a1a1a !important;
  width: 100% !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.bs-contact-form .elementor-field-textual:focus {
  outline: none !important;
  border-color: var(--bs-bronze) !important;
  box-shadow: 0 0 0 3px rgba(176, 116, 62, 0.12) !important;
  background: #ffffff !important;
}

.bs-contact-form .elementor-field-textual::placeholder {
  color: #9e9791 !important;
  font-size: 0.9375rem !important;
}

/* Textarea height */
.bs-contact-form textarea.elementor-field-textual {
  min-height: 130px !important;
  resize: vertical !important;
}

/* ── Submit button ────────────────────────────────────────────────────────── */
.bs-contact-form .elementor-button {
  background: var(--bs-bronze) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--bs-r-btn) !important;
  padding: 14px 32px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}

.bs-contact-form .elementor-button:hover {
  background: #9a6235 !important;
  transform: translateY(-1px) !important;
}

/* Success / error messages */
.bs-contact-form .elementor-message {
  border-radius: 6px !important;
  padding: 12px 16px !important;
  font-size: 0.875rem !important;
  margin-top: 12px !important;
}

.bs-contact-form .elementor-message.elementor-message-success {
  background: rgba(176, 116, 62, 0.1) !important;
  color: #7a5030 !important;
  border: 1px solid rgba(176, 116, 62, 0.3) !important;
}

.bs-contact-form .elementor-message.elementor-message-danger {
  background: rgba(200, 50, 50, 0.07) !important;
  color: #8b2020 !important;
  border: 1px solid rgba(200, 50, 50, 0.2) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. UTILITY
   ═══════════════════════════════════════════════════════════════════════════ */

.bs-contact-highlight {
  color: var(--bs-bronze-300) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. RESPONSIVE — 960px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {

  .bs-contact-hero {
    border-radius: 8px !important;
  }

  /* Three-column block stacks to single column — handled by Elementor
     responsive column settings, not CSS */
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. RESPONSIVE — 768px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .bs-contact-hero {
    border-radius: 8px !important;
  }

  .bs-contact-form-card > .elementor-widget-wrap,
  .bs-contact-form-card > .e-con-inner {
    padding: 28px 24px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. RESPONSIVE — 480px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  .bs-contact-hero {
    border-radius: 6px !important;
  }

  .bs-contact-form-card > .elementor-widget-wrap,
  .bs-contact-form-card > .e-con-inner {
    padding: 24px 18px !important;
  }

  .bs-contact-form .elementor-button {
    padding: 14px 20px !important;
  }
}