/**
 * Newsletter Section Styles
 *
 * Component-specific styling only.
 * Layout handled by primitives (center, stack, switcher).
 *
 * @package Author_Theme
 */

/* ============================================
   Section Container
   ============================================ */

.newsletter-section {
  padding: var(--space-4) 0;
  text-align: center;
}

.newsletter-section .section-title {
  margin: 0;
}

/* ============================================
   Newsletter Content
   ============================================ */

.newsletter-content p {
  font-size: calc(var(--text-lg) * var(--a11y-font-size-multiplier));
  line-height: calc(1.65 * var(--a11y-line-height-multiplier));
  letter-spacing: calc(0em + var(--a11y-letter-spacing-adjustment));
  margin-bottom: var(--space-6);
  color: inherit;
}

/* ============================================
   Newsletter Form
   (Switcher primitive handles layout responsiveness)
   ============================================ */

.newsletter-form {
  opacity: 1;
}

.newsletter-form input[type="email"] {
  flex: 1;
  min-height: 2.875rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--primary-500);
  border-radius: var(--radius-full);
  font-size: calc(var(--text-base) * var(--a11y-font-size-multiplier));
  letter-spacing: calc(0em + var(--a11y-letter-spacing-adjustment));
  outline: none;
  background-color: var(--surface);
  color: var(--text);
}

.newsletter-form input[type="email"]::placeholder {
  color: var(--text-muted);
}

.newsletter-form input[type="email"]:focus {
  box-shadow: 0 0 0 3px oklch(from var(--primary-100) l c h / 0.45);
}

.newsletter-form button {
  min-height: 2.875rem;
  padding: var(--space-3) var(--space-6);
  background-color: var(--accent-500);
  color: var(--neutral-950);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: calc(var(--text-base) * var(--a11y-font-size-multiplier));
  letter-spacing: calc(0em + var(--a11y-letter-spacing-adjustment));
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.newsletter-form button:hover {
  background-color: var(--accent-400);
  transform: translateY(-1px);
}

.newsletter-form button:active {
  transform: translateY(0);
}

.newsletter-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ============================================
   Accessibility
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}