/* =============================================================================
   NEWSLETTER-CTA.CSS — Newsletter / CTA Section Wrapper
   Hello Elementor Child Theme

   This file styles only the outer container for the newsletter CTA section.
   The inner content is your existing custom reusable block, rendered via
   do_blocks() in newsletter-cta.php. That block carries its own styles.
   
   This wrapper provides:
     - Background treatment with warm amber gradient
     - Decorative ambient accent shapes
     - Spacing above and below within the article flow
     - A framing border that separates CTA from article content
     - Dark mode adaptation
     - Responsive padding adjustments

   Structure:
     section.hec-newsletter-cta
       div.hec-newsletter-cta__inner
         div.hec-newsletter-cta__bg-accent   (decorative)
         div.hec-newsletter-cta__block-wrap   (your reusable block)

   Design intent:
     The CTA needs to feel like a break — a distinct moment in the reading
     experience. Not an ad. Not a popup. A warm, premium invitation.
     The amber gradient background, the decorative shapes, and the generous
     padding all signal "pause and consider this" without interrupting.
   ============================================================================= */


/* =============================================================================
   1. SECTION WRAPPER
   ============================================================================= */

.hec-newsletter-cta {
  width:         100%;
  max-width:     var(--hec-content-width-wide);
  margin:        var(--hec-space-16) auto var(--hec-space-12);
  padding:       0;
  position:      relative;
  overflow:      hidden;

  /*
   * The background gradient creates a warm amber "island"
   * that separates the CTA from the surrounding article content.
   * Slight curvature via border-radius signals it is a distinct section.
   */
  background:    linear-gradient(
                   135deg,
                   var(--hec-brand-amber-pale)     0%,
                   var(--hec-brand-gold-warm-pale)  40%,
                   var(--hec-brand-sand-pale)       70%,
                   var(--hec-brand-amber-pale)      100%
                 );

  border:        1px solid rgba(209, 106, 11, 0.15);
  border-radius: var(--hec-radius-2xl);
  box-shadow:    var(--hec-shadow-lg);

  transition:
    background    var(--hec-transition-slow),
    border-color  var(--hec-transition-slow),
    box-shadow    var(--hec-transition-slow);
}

/*
 * Hover — subtle shadow deepens to draw more attention.
 * Not a link hover — just ambient emphasis.
 */
.hec-newsletter-cta:hover {
  box-shadow:
    var(--hec-shadow-xl),
    0 4px 20px rgba(209, 106, 11, 0.12);
}


/* =============================================================================
   2. INNER CONTAINER
   ============================================================================= */

.hec-newsletter-cta__inner {
  position:  relative;
  padding:   var(--hec-space-12) var(--hec-space-10);
  z-index:   1;
}

@media (max-width: 768px) {
  .hec-newsletter-cta__inner {
    padding: var(--hec-space-10) var(--hec-space-6);
  }
}

@media (max-width: 480px) {
  .hec-newsletter-cta__inner {
    padding: var(--hec-space-8) var(--hec-space-5);
  }
}


/* =============================================================================
   3. DECORATIVE BACKGROUND ACCENT
   ============================================================================= */

.hec-newsletter-cta__bg-accent {
  position: absolute;
  inset:    0;
  z-index:  0;
  pointer-events: none;
  overflow: hidden;
}

/*
 * Large radial glow — top right.
 * Warm amber circle that creates ambient warmth.
 */
.hec-newsletter-cta__bg-accent::before {
  content:       '';
  position:      absolute;
  top:           -40%;
  right:         -20%;
  width:         500px;
  height:        500px;
  border-radius: var(--hec-radius-full);

  background: radial-gradient(
    circle at center,
    rgba(209, 106, 11, 0.12) 0%,
    rgba(209, 106, 11, 0.04) 40%,
    transparent 70%
  );

  animation: hec-float 8s var(--hec-ease-smooth) infinite;
}

/*
 * Smaller gold glow — bottom left.
 * Complementary accent for visual balance.
 */
.hec-newsletter-cta__bg-accent::after {
  content:       '';
  position:      absolute;
  bottom:        -30%;
  left:          -15%;
  width:         350px;
  height:        350px;
  border-radius: var(--hec-radius-full);

  background: radial-gradient(
    circle at center,
    rgba(255, 191, 0, 0.10) 0%,
    rgba(255, 191, 0, 0.03) 45%,
    transparent 70%
  );

  animation: hec-float 10s var(--hec-ease-smooth) 2s infinite reverse;
}


/* =============================================================================
   4. BLOCK WRAP — your reusable block
   ============================================================================= */

.hec-newsletter-cta__block-wrap {
  position:  relative;
  z-index:   1;

  /*
   * Center the block content and constrain width.
   * Your reusable block may have its own max-width.
   * This ensures even if it does not, it will not stretch
   * edge-to-edge inside the container.
   */
  max-width: var(--hec-content-width);
  margin:    0 auto;
}

/*
 * Typography override for text inside the CTA.
 * Since the reusable block is rendered by do_blocks(),
 * it inherits the page font. We ensure headings and body
 * text within the CTA are properly sized and colored.
 */
.hec-newsletter-cta__block-wrap h1,
.hec-newsletter-cta__block-wrap h2,
.hec-newsletter-cta__block-wrap h3 {
  font-family:    var(--hec-font-heading);
  font-weight:    var(--hec-weight-bold);
  line-height:    var(--hec-leading-tight);
  letter-spacing: var(--hec-tracking-tight);
  color:          var(--hec-brand-brown-deep);
}

.hec-newsletter-cta__block-wrap p {
  font-family:  var(--hec-font-body);
  color:        var(--hec-neutral-700);
  line-height:  var(--hec-leading-relaxed);
}

/*
 * Button override inside the CTA.
 * If the reusable block contains a Gutenberg button,
 * this ensures it matches the brand styling.
 */
.hec-newsletter-cta__block-wrap .wp-block-button__link {
  background-color: var(--hec-brand-amber);
  color:            var(--hec-white);
  font-family:      var(--hec-font-ui);
  font-weight:      var(--hec-weight-semibold);
  padding:          var(--hec-space-3) var(--hec-space-8);
  border-radius:    var(--hec-radius-full);
  letter-spacing:   var(--hec-tracking-wide);
  transition:
    background-color var(--hec-transition-fast),
    transform        var(--hec-transition-fast),
    box-shadow       var(--hec-transition-fast);
}

.hec-newsletter-cta__block-wrap .wp-block-button__link:hover {
  background-color: var(--hec-brand-amber-light);
  transform:        translateY(-2px);
  box-shadow:       var(--hec-shadow-amber-lg);
}

.hec-newsletter-cta__block-wrap .wp-block-button__link:active {
  transform:  translateY(0);
  box-shadow: none;
}

/*
 * Input override inside the CTA.
 * If the reusable block contains an email input field,
 * ensure it fits the brand.
 */
.hec-newsletter-cta__block-wrap input[type="email"],
.hec-newsletter-cta__block-wrap input[type="text"] {
  font-family:      var(--hec-font-body);
  font-size:        var(--hec-text-base);
  padding:          var(--hec-space-3) var(--hec-space-5);
  border:           2px solid var(--hec-neutral-300);
  border-radius:    var(--hec-radius-full);
  background:       var(--hec-white);
  color:            var(--hec-brand-brown-deep);
  transition:
    border-color  var(--hec-transition-fast),
    box-shadow    var(--hec-transition-fast);
}

.hec-newsletter-cta__block-wrap input[type="email"]:focus,
.hec-newsletter-cta__block-wrap input[type="text"]:focus {
  border-color: var(--hec-brand-amber);
  box-shadow:   0 0 0 3px rgba(209, 106, 11, 0.15);
  outline:      none;
}


/* =============================================================================
   5. TOP DECORATIVE ACCENT LINE
   A thin amber gradient line at the very top of the CTA section.
   ============================================================================= */

.hec-newsletter-cta::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       var(--hec-space-8);
  right:      var(--hec-space-8);
  height:     3px;
  background: linear-gradient(
                to right,
                transparent 0%,
                var(--hec-brand-amber) 30%,
                var(--hec-brand-gold)  70%,
                transparent 100%
              );
  border-radius: var(--hec-radius-full);
  z-index:    2;
}


/* =============================================================================
   6. DARK MODE
   ============================================================================= */

[data-theme="dark"] .hec-newsletter-cta {
  background: linear-gradient(
    135deg,
    #1e1610 0%,
    #231a10 40%,
    #1a1308 70%,
    #1e1610 100%
  );
  border-color: rgba(209, 106, 11, 0.20);
}

[data-theme="dark"] .hec-newsletter-cta:hover {
  box-shadow:
    var(--hec-shadow-xl),
    0 4px 20px rgba(209, 106, 11, 0.20);
}

[data-theme="dark"] .hec-newsletter-cta__bg-accent::before {
  background: radial-gradient(
    circle at center,
    rgba(209, 106, 11, 0.10) 0%,
    rgba(209, 106, 11, 0.03) 40%,
    transparent 70%
  );
}

[data-theme="dark"] .hec-newsletter-cta__bg-accent::after {
  background: radial-gradient(
    circle at center,
    rgba(255, 191, 0, 0.06) 0%,
    rgba(255, 191, 0, 0.02) 45%,
    transparent 70%
  );
}

[data-theme="dark"] .hec-newsletter-cta__block-wrap h1,
[data-theme="dark"] .hec-newsletter-cta__block-wrap h2,
[data-theme="dark"] .hec-newsletter-cta__block-wrap h3 {
  color: var(--hec-color-text-primary);
}

[data-theme="dark"] .hec-newsletter-cta__block-wrap p {
  color: var(--hec-color-text-secondary);
}

[data-theme="dark"] .hec-newsletter-cta__block-wrap input[type="email"],
[data-theme="dark"] .hec-newsletter-cta__block-wrap input[type="text"] {
  background:   var(--hec-color-feedback-input);
  border-color: var(--hec-color-feedback-input-border);
  color:        var(--hec-color-text-primary);
}

[data-theme="dark"] .hec-newsletter-cta__block-wrap input[type="email"]:focus,
[data-theme="dark"] .hec-newsletter-cta__block-wrap input[type="text"]:focus {
  border-color: var(--hec-brand-amber);
  box-shadow:   0 0 0 3px rgba(209, 106, 11, 0.25);
}

[data-theme="dark"] .hec-newsletter-cta::before {
  opacity: 0.60;
}


/* =============================================================================
   7. REVEAL ANIMATION
   ============================================================================= */

.hec-newsletter-cta[data-reveal="newsletter-cta"] {
  opacity:   0;
  transform: translateY(20px);
}

.hec-newsletter-cta[data-reveal="newsletter-cta"].hec-revealed {
  opacity:   1;
  transform: translateY(0);
}


/* =============================================================================
   8. RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
  .hec-newsletter-cta {
    margin:        var(--hec-space-12) auto var(--hec-space-10);
    border-radius: var(--hec-radius-xl);
  }

  .hec-newsletter-cta::before {
    left:  var(--hec-space-5);
    right: var(--hec-space-5);
  }

  .hec-newsletter-cta__bg-accent::before {
    width:  300px;
    height: 300px;
    top:    -30%;
    right:  -30%;
  }

  .hec-newsletter-cta__bg-accent::after {
    width:  200px;
    height: 200px;
    bottom: -20%;
    left:   -20%;
  }
}

@media (max-width: 480px) {
  .hec-newsletter-cta {
    margin:        var(--hec-space-10) auto var(--hec-space-8);
    border-radius: var(--hec-radius-lg);
  }
}


/* =============================================================================
   9. REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hec-newsletter-cta[data-reveal="newsletter-cta"] {
    opacity:   1;
    transform: none;
  }

  .hec-newsletter-cta__bg-accent::before,
  .hec-newsletter-cta__bg-accent::after {
    animation: none;
  }
}