/* ===================================================================
   Optional email offer — shared, page-scoped styles (Isabella Edition).

   Rules this file obeys:
   - Every selector is prefixed .eo- and only ever applies inside <main>.
   - No body / backdrop / global element rules. styles.css and learn.css
     are untouched.
   - Palette is limited to the existing Isabella CSS variables. No blue.
   =================================================================== */

.eo-offer {
  background: var(--glass-strong);
  border: 1px solid var(--moon-gray);
  border-left: 5px solid var(--purple);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow);
  margin-top: 28px;
}

.eo-offer h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0 0 8px;
  color: var(--ocean-deep);
}

.eo-offer p { color: #5b3a82; font-size: 0.96rem; margin: 0 0 6px; }

.eo-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-top: 18px;
}

.eo-field { flex: 1 1 240px; min-width: 0; }

.eo-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7c5ca6;
  margin-bottom: 6px;
}

.eo-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--moon-gray);
  border-radius: 999px;
  background: var(--white);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ocean-deep);
}

.eo-input:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

/* Deep purple rather than pink: white on --pink is 3.89:1, which fails AA
   for button-sized text. --ocean-deep is the same palette and reaches 14.3:1.
   Matches the .pr-dl decision already made in printables.css. */
.eo-submit {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--ocean-deep);
  color: var(--white);
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease;
}

.eo-submit:hover { transform: translateY(-2px); }
.eo-submit:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

.eo-note { margin: 20px 0 0; font-size: 0.85rem; color: #5b3a82; }

/* Anti-bot honeypot. Kept off-screen rather than display:none so that the
   field is still submitted, matching the homepage form exactly. */
.eo-hp { position: absolute; left: -5000px; }

@media (max-width: 560px) {
  .eo-form { flex-direction: column; align-items: stretch; }
  /* flex-basis resolves against the main axis, so the 240px basis above would
     become a height once the axis flips to column. */
  .eo-field { flex: 0 0 auto; }
  .eo-submit { width: 100%; }
}