/* Newsletter Section Styles */
.newsletter-section {
  margin: 4rem auto; /* Center the section and use auto horizontal margin */
  padding: 0 2rem; /* Add horizontal padding for mobile spacing */
  max-width: 1200px; /* Add max-width to make it compact, not full-width */
}

.newsletter-container {
  display: flex;
  align-items: stretch;
  border: 2px solid #000;
  background: #fff;
  padding: 2rem; /* Reduced padding from 3rem to 2rem for tighter spacing */
  gap: 2rem; /* Reduced gap from 3rem to 2rem */
}

/* Vertical "DAZED" text on the left */
.newsletter-vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 3rem; /* Reduced font size from 4rem to 3rem for more compact look */
  font-weight: 900;
  letter-spacing: -0.02em;
  /* use site signature pink from :root */
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Main content area */
.newsletter-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Reduced gap from 2rem to 1.5rem */
}

.newsletter-title {
  font-size: 2rem; /* Reduced font size from 2.5rem to 2rem */
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #000;
  margin: 0;
  text-transform: uppercase;
}

/* Form styling */
.newsletter-form {
  display: flex;
  flex-direction: column; /* stack rows: names row, email row, actions */
  gap: 1rem;
}

/* Row: put first name and last name side-by-side */
.newsletter-names-row {
  display: flex;
  gap: 1rem;
}

.newsletter-names-row .newsletter-input {
  flex: 1 1 0;
  min-width: 0;
}

/* Email row: put email input and subscribe button on one line */
.newsletter-email-row {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Make the email input expand to fill available space and remove bottom margin */
.newsletter-email-row .newsletter-input,
.newsletter-email-row .newsletter-email {
  flex: 1 1 0;
  min-width: 0;
  margin-right: 0;
}

/* Actions inside the email row should not add extra margins */
.newsletter-actions {
  margin: 0 0 0 auto;
  display: inline-flex;
  align-items: center;
}
/* Email row full width */
.newsletter-email-row {
  display: block;
}

.newsletter-email-row .newsletter-input {
  width: 100%;
  box-sizing: border-box;
}

.newsletter-form input[type="text"],
.newsletter-form input[type="email"] {
  border: none;
  border-bottom: 2px solid #000;
  padding: 0.75rem 0;
  font-size: 1rem;
  background: transparent;
  outline: none;
}

/* Ensure the form does not collapse and all elements are visible */
.newsletter-form-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Button styles */
.newsletter-button {
  /* use signature pink and add bottom-right black "shadow" + stronger bottom/right border */
  background: var(--accent-color);
  color: #000;
  border-style: solid;
  border-color: #000;
  border-width: 2px 4px 4px 2px; /* top right bottom left -> thicker right & bottom */
  padding: 0.75rem 2.5rem; /* Reduced padding for more compact button */
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  text-transform: uppercase;
  flex-shrink: 0;
  /* flat bottom-right shadow using box-shadow to match black border */
  box-shadow: 6px 6px 0 0 #000;
}

/* slightly larger shadow on hover and use hover pink */
.newsletter-button:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 8px 8px 0 0 #000;
}

.newsletter-button:active {
  transform: translateY(0);
  /* keep pressing effect */
  box-shadow: 4px 4px 0 0 #000;
}

/* Responsive design */
@media (max-width: 768px) {
  .newsletter-section {
    margin: 3rem 2rem;
  }

  .newsletter-container {
    flex-direction: column;
    padding: 2rem;
    gap: 2rem;
  }

  .newsletter-vertical-text {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 2.5rem;
  }

  .newsletter-title {
    font-size: 1.75rem;
  }

  .newsletter-form {
    flex-direction: column;
    gap: 1.5rem;
  }

  .newsletter-email-row {
    flex-direction: column;
    align-items: stretch;
  }

  .newsletter-actions {
    width: 100%;
  }

  .newsletter-actions .newsletter-button {
    width: 100%;
  }

  .newsletter-button {
    width: 100%;
  }
}

/* Accessibility helper in this file in case global one isn't loaded */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}