/* /register/ — the book's own styling for Ultimate Member form 45363.
   UM's own stylesheet does NOT load on this template, so everything the form
   looks like is here. Selectors are UM's; don't rename them. */

.stf-register{min-height:100vh;display:flex;flex-direction:column}

.stf-register-main{flex:1;padding-top:72px;padding-bottom:72px;max-width:620px}
.stf-register h1{font-size:3rem;margin:0 0 16px}
.stf-register-body>p{font-size:1.0625rem;color:var(--text-secondary);margin:0 0 32px}

/* UM sets max-width:450px inline, in the body. Beaten on specificity,
   not with !important. */
.stf-register .um-45363.um,
.stf-register .um{max-width:none;width:100%;font-family:var(--font-ui)}

.stf-register .um-form{margin:0}
.stf-register .um-row{margin:0 !important}
.stf-register .um-col-1{display:block}

/* --- fields --- */
.stf-register .um-field{margin:0 0 22px}
.stf-register .um-field-label{margin:0 0 7px}
.stf-register .um-field-label label{
  font-family:var(--font-display);font-weight:500;font-size:0.9375rem;
  letter-spacing:-0.005em;color:var(--text-primary);display:block}
.stf-register .um-clear{clear:both}

.stf-register input.um-form-field,
.stf-register .um-field-area input[type=text],
.stf-register .um-field-area input[type=email]{
  width:100%;display:block;
  font-family:var(--font-ui);font-size:1.0625rem;
  color:var(--text-primary);background:var(--white);
  padding:13px 15px;
  border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);
  transition:border-color .15s ease, box-shadow .15s ease}

.stf-register input.um-form-field:focus{
  outline:none;border-color:var(--accent-primary);
  box-shadow:0 0 0 3px var(--purple-100)}

.stf-register input.um-form-field::placeholder{color:var(--gray-400)}

/* the honeypot UM ships — must stay in the DOM, must never be seen */
.stf-register .um_request_name{position:absolute;left:-9999px;height:0;overflow:hidden}

/* --- buttons --- */
.stf-register .um-col-alt{display:flex;gap:14px;align-items:center;margin-top:30px}
.stf-register .um-left.um-half,
.stf-register .um-right.um-half{float:none;width:auto;margin:0}

.stf-register input.um-button,
.stf-register a.um-button{
  display:inline-block;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  padding:15px 30px;border-radius:8px;text-decoration:none;
  border:1.5px solid var(--accent-warm);
  background:var(--accent-warm);color:var(--white);
  -webkit-appearance:none;appearance:none}

.stf-register input.um-button:hover{background:var(--orange-700);border-color:var(--orange-700)}

.stf-register a.um-button.um-alt{
  background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.stf-register a.um-button.um-alt:hover{background:var(--ink-950);color:var(--white)}

/* --- UM's server-side notices (its own CSS isn't loaded) --- */
.stf-register .um-notice{
  font-family:var(--font-ui);font-size:0.9375rem;line-height:1.5;
  padding:14px 16px;border-radius:var(--radius-md);margin:0 0 24px}
.stf-register .um-notice.err{background:#fdeaea;border:1px solid #e9b4b4;color:#8c1c1c}
.stf-register .um-notice.success{background:var(--purple-100);border:1px solid var(--purple-300);color:var(--purple-800)}
.stf-register .um-field-error{
  font-family:var(--font-ui);font-size:0.875rem;color:#8c1c1c;margin-top:6px;display:block}
.stf-register .um-error-block{margin-bottom:20px}

/* --- the way back ---
   Was a bespoke white footer holding only this line. Replaced 2026-08-29 with
   the standard dark .stf-foot from /read/, and the line moved up into the card,
   mirroring .stf-login-alt on /book-login/ - the two pages are a pair. */
.stf-register-alt{
  font-family:var(--font-ui);font-size:0.9375rem;color:var(--text-secondary);margin:36px 0 0}
.stf-register-alt a{color:var(--accent-primary)}

@media (max-width:600px){
  .stf-register h1{font-size:2.25rem}
  .stf-register-main{padding-top:48px}
  .stf-register .um-col-alt{flex-direction:column;align-items:stretch}
  .stf-register input.um-button,
  .stf-register a.um-button{width:100%;text-align:center}
}


/* --- alignment + scale, 2026-08-15 --- */
/* the header bar shares the form column's width, so the book title
   starts on the same left edge as the labels and fields */
.stf-register .stf-top-inner{max-width:620px}
.stf-register .stf-brand span{font-size:1.375rem;letter-spacing:-0.015em}
.stf-register h1{font-family:var(--font-display)}


/* the mark sits ABOVE the wordmark, not beside it, so the book
   title starts on the same left edge as the field labels */
.stf-register .stf-brand{flex-direction:column;align-items:flex-start;gap:10px}
.stf-register .stf-brand span{font-size:1.75rem;white-space:nowrap;line-height:1.1}
.stf-register .stf-top-inner{padding-top:28px;padding-bottom:22px}


/* --- the card, and the pattern artwork behind it ---------------------------
   Same construction as /book-login/, deliberately: these two pages are a pair
   and a reader moves between them. See login.css for the full reasoning.

   The two load-bearing bits, repeated because they are easy to delete by
   mistake: url() is relative to THIS FILE (../../ reaches wp-content/), and
   isolation:isolate is what stops the z-index:-1 artwork escaping to the root
   and painting behind .stf-chapter's white background, where it vanishes. */

.stf-register-card{
  box-sizing:border-box;
  position:relative;
  isolation:isolate;
  background:transparent;
  border-radius:14px;
  padding:48px 48px 52px}

.stf-register-card::before{
  content:'';
  position:absolute;
  z-index:-1;
  height:72.6vh;
  width:48.4vh;                    /* height x the art's 432:648 ratio - keep these in step */
  top:-56px;
  right:calc(100% - 5px);
  background-image:url('../../uploads/stf-pattern/PatternExport_081326-23.svg');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  pointer-events:none}

/* The header bar was aligned to the old 560 column. The card insets its own
   contents by 48px, so the wordmark needs that same inset to keep sitting on
   the field labels' left edge. */
.stf-register .stf-top-inner{padding-left:calc(clamp(20px,5vw,48px) + 48px)}

@media (max-width:900px){
  .stf-register-card::before{display:none}
}
@media (max-width:600px){
  .stf-register-card{padding:32px 24px 36px;border-radius:10px}
  .stf-register .stf-top-inner{padding-left:44px}
}