/* ==========================================================================
   signup.css | the Creative Company newsletter form (creativecompany.us)
   Shared by the red subscribe band, the compact footer form and /newsletter.
   Every form has an optional first-name field before the email field.
   Link after /stone/site.css. Behaviour lives in /js/signup.js.
   ========================================================================== */

/* visually hidden, still read aloud */
.signup-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* the honeypot: off screen, out of the tab order, skipped by screen readers */
.signup-hp {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ---- the field row (footer and /newsletter; the band keeps its .sub-row) */
.signup-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}
.signup-row input[type="email"],
.signup-row input[name="first_name"] {
  /* the big grow ratio keeps the button at its natural width on one line,
     and lets it fill the line by itself once the row wraps. The 260px basis
     is wider than the button (about 253px), so the row wraps before the
     field could end up narrower than the button. */
  flex: 999 1 260px;
  min-width: 0;
  min-height: 46px;
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  padding: 11px 14px;
  color: inherit;
  font-family: var(--grot);
  font-size: 16px;
  line-height: 1.3;
}
.signup-row input[type="email"]::placeholder,
.signup-row input[name="first_name"]::placeholder {
  color: currentColor;
  opacity: 0.5;
}
.signup-row .stone {
  flex: 1 1 auto;
}

/* the page-wide focus ring is vermilion, which vanishes on red. Inside every
   red region (masthead, rail, home hero, essay head, the subscribe band and
   the /newsletter/ red sections) the ring is cream instead: cream on the
   brand red is 3.97:1, above the 3:1 asked of focus indicators. Stone
   buttons keep the kit's own two-tone ring (ink outside, cream inside). */
:is(.mast, .rail, .hero, .essay-head, .sub--red, .nl-red) :focus-visible:not(.stone),
:is(.sub--red, .nl-red, footer.site) input[type="email"]:focus-visible,
:is(.sub--red, .nl-red, footer.site) input[name="first_name"]:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}
input[type="email"][aria-invalid="true"] {
  border-style: dashed;
}

/* ---- on the brand red, a see-through field can't reach 4.5:1, so the
   field gets a cream fill with ink text (about 17:1; placeholder about 5:1) */
.sub--red .sub-form .sub-row input[type="email"],
.sub--red .sub-form .sub-row input[name="first_name"],
.nl-red .signup-row input[type="email"],
.nl-red .signup-row input[name="first_name"] {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.sub--red .sub-form .sub-row input[type="email"]::placeholder,
.nl-red .signup-row input[type="email"]::placeholder {
  color: var(--ink);
  opacity: 0.62;
}
.sub--red .sub-form .sub-row input[type="email"][aria-invalid="true"],
.nl-red .signup-row input[type="email"][aria-invalid="true"] {
  border-color: var(--ink);
}

/* ---- messages: hint, sending, error */
.signup-msg {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.45;
  min-height: 0;
}
/* kept in the accessibility tree while empty, so the first hint written
   into it is announced; it takes no space until it has text */
.signup-msg:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.signup-msg[data-state="sending"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.signup-msg a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.signup-note {
  margin: 0;
}

/* ---- success, replaces the form */
.signup-done {
  font-size: 16px;
  line-height: 1.5;
  max-width: 46ch;
  /* a long first name in the greeting wraps instead of running out */
  overflow-wrap: anywhere;
}
.signup-done p {
  margin: 0 0 8px;
}
.signup-done-head strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: 0.005em;
}
.signup-done:focus {
  outline: none;
}
.signup-done:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

/* ---- messages and success on the brand red: cream text on red is only
   3.97:1 (the site's colour pair, by design), so every dynamic message that
   appears on red sits in a small cream slip with ink text (about 17:1) */
:is(.sub--red, .nl-red) .signup-msg:not(:empty):not([data-state="sending"]) {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 2px 0 0;
  padding: 7px 11px 8px;
  border-radius: 2px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--grot);
  font-size: 14px;
  line-height: 1.45;
  opacity: 1;
}
:is(.sub--red, .nl-red) .signup-msg a {
  color: var(--ink);
}
/* the "my Eden page" link sits inside the cream slip, so the cream ring used
   elsewhere on red would vanish there; it takes an ink ring (16.8:1 on cream),
   drawn inside the slip's padding */
:is(.sub--red, .nl-red) .signup-msg a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
:is(.sub--red, .nl-red) .signup-done {
  box-sizing: border-box;
  padding: 16px 18px;
  border-radius: 2px;
  background: var(--cream);
  color: var(--ink);
}
:is(.sub--red, .nl-red) .signup-done p:last-child {
  margin-bottom: 0;
}
/* the band's success line opens with a bold "Welcome in." instead of a
   second Anton heading under "You're in good company." */
.signup-done--band .signup-done-head strong {
  display: inline;
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  text-transform: none;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: 0;
}

/* ---- the red subscribe band: its own scoped .sub-row styles the field.
   Same row rule as .signup-row: the field takes the spare room on one line,
   and once the row wraps (1024 and narrower) the button fills its own line.
   :not(#_) out-ranks the band's Astro-scoped flex values. */
.sub-form .sub-row input[type="email"]:not(#_) {
  flex: 999 1 260px;
}
.sub-form .sub-row .stone:not(#_) {
  flex: 1 1 auto;
  justify-content: center;
  text-align: center;
}

/* ---- compact form in the ink footer (pages without the band) */
.foot-signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px 40px;
  align-items: center;
  padding-bottom: 32px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(232, 225, 213, 0.16);
}
.foot-signup-line {
  margin: 0;
  max-width: 44ch;
  color: #e8e1d5;
  font-size: 15px;
  line-height: 1.5;
}
.foot-signup-line strong {
  font-weight: 600;
  color: var(--cream);
}
.foot-signup form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.foot-signup .signup-row input[type="email"],
.foot-signup .signup-row input[name="first_name"] {
  color: #f1e9dc;
  border-color: rgba(232, 225, 213, 0.55);
}
.foot-signup .signup-row input[type="email"]:hover,
.foot-signup .signup-row input[type="email"]:focus,
.foot-signup .signup-row input[name="first_name"]:hover,
.foot-signup .signup-row input[name="first_name"]:focus {
  border-color: #e8e1d5;
}
.foot-signup .signup-msg,
.foot-signup .signup-done {
  color: #e8e1d5;
  font-size: 14px;
}
footer.site .foot-signup .signup-msg a,
footer.site .foot-signup .signup-done a {
  text-decoration: underline;
}

/* /renaissance/ keeps its Catalog controls dock fixed at the bottom of the
   screen; leave room under the footer so the form and its messages clear it */
body:has(#dock) footer.site {
  padding-bottom: 150px;
}
@media (max-width: 500px) {
  body:has(#dock) footer.site {
    padding-bottom: 170px;
  }
}

@media (max-width: 820px) {
  .foot-signup {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 420px) {
  .signup-row .stone {
    flex: 1 1 100%;
  }
}

/* ---- first name + email: one grid for every form (2026-10-11)
   Each field has its label above it, and the button lines up with the
   fields, so it keeps the field height on a shared line. The form is the
   container, so the layout follows the form's own width, not the screen's:
     under 400px:      First name / Your email / button, stacked
     400px to 679px:   First name and Your email side by side, the button
                       under them at full width
     680px and wider:  First name, Your email and the button on one line
   form[data-signup] out-ranks the band's Astro-scoped flex row. */
form[data-signup] {
  container: signup / inline-size;
}
form[data-signup] :is(.signup-row, .sub-row) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "name-label" "name" "email-label" "email" "button";
  column-gap: 10px;
  row-gap: 6px;
  align-items: stretch;
}
form[data-signup] .sub-row {
  column-gap: 9px;
}
form[data-signup] :is(.signup-row, .sub-row) > label[for^="signup-name"] {
  grid-area: name-label;
}
form[data-signup] :is(.signup-row, .sub-row) > label[for^="signup-email"] {
  grid-area: email-label;
  margin-top: 6px;
}
form[data-signup] :is(.signup-row, .sub-row) > input[name="first_name"] {
  grid-area: name;
}
form[data-signup] :is(.signup-row, .sub-row) > input[type="email"] {
  grid-area: email;
}
form[data-signup] :is(.signup-row, .sub-row) > button[type="submit"] {
  grid-area: button;
  margin-top: 4px;
  justify-content: center;
  text-align: center;
}
@container signup (min-width: 400px) {
  form[data-signup] :is(.signup-row, .sub-row) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "name-label email-label" "name email" "button button";
  }
  form[data-signup] :is(.signup-row, .sub-row) > label[for^="signup-email"] {
    margin-top: 0;
  }
}
@container signup (min-width: 680px) {
  form[data-signup] :is(.signup-row, .sub-row) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
    grid-template-areas: "name-label email-label ." "name email button";
  }
  form[data-signup] :is(.signup-row, .sub-row) > button[type="submit"] {
    margin-top: 0;
  }
}
/* the visible field labels on the band and in the footer, sized like the
   /newsletter/ labels and at full strength, since they name the fields */
.signup-label {
  display: block;
  font-size: 11px;
  line-height: 1.6;
}
footer.site .foot-signup .signup-label {
  color: #e8e1d5;
}