/**
 * Microsite Styles - Markite Child Theme
 * 
 * Page-specific styles for microsite pages:
 * 1. Services Section
 * 2. CTA Elements
 * 3. Reminder Email Section
 * 
 * @package markite-child
 * @since 2.0.5
 * @updated December 16, 2024
 */

/* =============================================================================
   1. SERVICES SECTION (Microsite Product Navigation)
   ============================================================================= */

/* Section Container */
.services-section {
  max-width: 80vw;
  margin: 40px auto;
}

/* Services Cards Wrapper */
.services-section .services-container .services-cards-wrapper .elementor-container {
  justify-content: space-between !important;
  align-items: flex-end !important;
}

.services-section .services-container .elementor-widget-wrap {
  padding: 0 !important;
}

/* Product Navigation Cards */
.services-section .services-container .services-cards-wrapper .elementor-container .product-nav {
  width: 30% !important;
}

.services-section .services-container .services-cards-wrapper .elementor-container .product-nav:nth-child(2) {
  width: 34% !important;
}

.services-section .services-container .services-cards-wrapper .elementor-container .product-nav .elementor-widget-wrap {
  padding: 0 !important;
}

/* Product Nav Images */
.services-section .services-container .services-cards-wrapper .elementor-container .product-nav .elementor-widget-wrap .elementor-image-box-wrapper .elementor-image-box-img {
  margin-bottom: 0 !important;
}

/* Product Nav Content */
.services-section .services-container .services-cards-wrapper .elementor-container .product-nav .elementor-widget-wrap .elementor-image-box-wrapper .elementor-image-box-content {
  background-color: var(--section-bg) !important;
  padding: 16px;
}

/* =============================================================================
   2. CTA ELEMENTS (Call-to-Action)
   ============================================================================= */

/* CTA Button Wrapper */
.microsite-cta-wrapper {
  display: flex;
  justify-content: center;
}

/* Geovonic Connect Text */
.microsite-geovonic-connect span {
  color: var(--accent-color);
  font-weight: 600;
}

/* =============================================================================
   3. REMINDER EMAIL SECTION
   ============================================================================= */

.reminder-email-section .elementor-message {
  color: var(--bs-white) !important;
}

/* =============================================================================
   RESPONSIVE DESIGN
   ============================================================================= */

/* Mobile (768px and below) */
@media (max-width: 768px) {
  /* Services Section */
  .services-section .services-container .services-cards-wrapper .elementor-container {
    flex-direction: column !important;
    align-items: center !important;
  }

  .services-section .services-container .services-cards-wrapper .elementor-container .product-nav,
  .services-section .services-container .services-cards-wrapper .elementor-container .product-nav:nth-child(2) {
    padding-top: 16px !important;
    width: 100% !important;
  }
}