/**
 * EngageLine CTA Styles (Tighter Mobile Spacing)
 *
 * Mobile-first: Default styles are optimized for small screens (tight & stacked).
 * Desktop override: Expands to a row layout on larger screens.
 */

 .el-top {
  /* --- Configuration Variables --- */
  --el-bg-color: #fff6f0;
  --el-btn-color: #ffe222;
  --el-btn-hover-color: #a41f35;
  --el-btn-text-hover-color: #fff;
  --el-border-radius: 8px;
  
  /* UPDATED: Tighter spacing for mobile */
  --el-padding: 0.65em;  /* Reduced from 0.75em */
  --el-gap: 0.50em; /* Reduced from 0.5em (approx 4px) */
  --el-gap-mobile: 0.1em;
  
  --el-fade-duration: 0.6s;
  --el-glow-duration: 4s;
  /* System UI stack by default; override via theme CSS or engageline_font_family filter (see README). */
  --el-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Mobile-First Layout (Base) --- */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--el-gap-mobile);

  /* Sizing */
  width: fit-content;
  width: -webkit-fit-content;
  max-width: calc(100% - 24px);
  margin: 0 auto 1em auto;
  padding: var(--el-padding);
  box-sizing: border-box;

  /* Appearance */
  background: var(--el-bg-color);
  border-radius: var(--el-border-radius);
  opacity: 0;
  
  /* Performance optimizations for CLS prevention */
  will-change: opacity;
  contain: style;
  min-height: 3em; /* Reserve space to prevent layout shift */
  
  /* Fonts: inherited stack via variable so newsrooms can theme Graphik etc. without forking the plugin */
  font-family: var(--el-font-family);

  /* Animations */
  animation:
    el-fade-in var(--el-fade-duration) ease-out forwards,
    el-glow-centered var(--el-glow-duration) linear infinite;
}

/* --- Element Styles --- */

.el-copy {
  margin: 0 !important;
  padding-right: 0;
  font-weight: 600;
  line-height: 1.25; /* Tighter line height for mobile text */
  hyphens: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.el-btn {
  display: inline-block;
  white-space: nowrap;
  margin: 0 !important;
  padding: 0.35em 0.85em; /* Slightly more compact button padding */
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 700;
  border-radius: 5px;
  text-decoration: none !important;
  
  /* Colors */
  background: var(--el-btn-color);
  color: #000;
  
  /* Transitions */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Link overrides */
.el-top .el-btn,
.el-top .el-btn:link,
.el-top .el-btn:visited {
  color: #000;
}

/* Hover/Focus States */
.entry-content .el-top .el-btn:hover,
.entry-content .el-top .el-btn:focus {
  background: var(--el-btn-hover-color);
  color: var(--el-btn-text-hover-color) !important;
}

/* --- Desktop Layout Overrides (Min-Width 721px) --- */
@media (min-width: 721px) {
  .el-top {
    flex-direction: row;
    align-items: center;
    text-align: left;
    flex-wrap: nowrap;
    
    /* Restore wider spacing for desktop */
    gap: var(--el-gap); 
    padding: 0.75em 1em; /* More breathing room on desktop */

    width: 100%;
    max-width: none;
    margin-inline: 0;

    animation-name: el-fade-in, el-glow-offset;
  }

  .el-copy {
    flex: 1 1 0%;
    min-width: 0;
    max-inline-size: 70ch;
    line-height: 1.4; /* looser line height for desktop readability */
    white-space: normal; /* Allow text to wrap naturally */
  }

  .el-btn {
    flex: 0 0 auto;
    flex-shrink: 0; /* Prevent button from being compressed */
    margin-left: auto !important;
    padding: 0.4em 1.0em; /* Standard button size */
  }
}

/* --- Keyframe Animations --- */
@keyframes el-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes el-glow-centered {
  0%, 100% { box-shadow: 0 4px 15px #0000002e, 0 0 0 2px #ff000066, 0 0 12px #ff00004d; }
  50%      { box-shadow: 0 4px 15px #0000002e, 0 0 0 2px #ffff0066, 0 0 12px #ffff004d; }
}

@keyframes el-glow-offset {
  0%, 100% { box-shadow: 0 4px 15px #0000002e, 0 0 0 2px #ff000066, 2px 2px 6px #ff00004d; }
  50%      { box-shadow: 0 4px 15px #0000002e, 0 0 0 2px #ffff0066, 2px 2px 6px #ffff004d; }
}

/* Without this, the CTA stays at opacity:0 when animations are off (prefers-reduced-motion
   or theme rules like animation:none !important). Inline opacity:0 from PHP loses to !important here. */
@media (prefers-reduced-motion: reduce) {
  .el-top {
    opacity: 1 !important;
    animation: none !important;
  }
}