/* Lane INVITE-FIRST — putting registration first for someone who was invited.

   84-invite-first.php explains the bug this repairs: an invitation link sends
   somebody with no account yet to /my-account/, where "Sign in" is the first
   column and "Create an account" is the second. On a phone the sign-in column
   fills the screen, so the invitee never scrolls to the form they actually
   need, tries to sign in to an account that does not exist, and gets stuck.
   Two of the studio's own teachers were caught in that loop this week.

   The PHP adds body.rh-invited only when a visitor is carrying a pending
   invitation, and prints a banner above both columns plus one aside line
   inside the sign-in column. This file does the rest: it reorders the two
   columns so registration reads first, moves the divider between them so it
   still sits on the seam and not on the outside edge, and gives the new
   banner and aside the site's own notice idiom rather than inventing a new
   one. Nobody who already has an account loses anything — the sign-in form
   stays on the page, in the tab order, one scroll away.

   NUMBERING: 84 loads after 80-account.css and 82-register-address.css, so
   where a rule here matches one of theirs at equal specificity this file
   wins. That is what lets it override 80-account's divider placement without
   raising specificity or reaching for !important. Nothing here restates a
   property those files already set for the non-invited case. */

/* ---------------------------------------------------------------------------
   Reorder the columns. `order` moves them in the single-column stack below
   900px as well as the two-column grid at 900px and up, so registration is
   first in both layouts. Neither column is hidden or removed from the tab
   order — only their visual position changes.
   --------------------------------------------------------------------------- */

body.woocommerce-account.rh-invited #customer_login > .col-1 {
	order: 2;
}

body.woocommerce-account.rh-invited #customer_login > .col-2 {
	order: 1;
}

/* The divider between the columns has to travel with them. 80-account.css
   puts padding-left and a left border on .col-2 because .col-2 is normally
   on the right. Once .col-2 is ordered onto the left, that rule would leave
   the seam on the page's outside edge, so it is undone here and given to
   .col-1 instead, which is now the right-hand column. */
@media (min-width: 900px) {
	body.woocommerce-account.rh-invited #customer_login > .col-2 {
		padding-left: 0;
		border-left: 0;
	}

	body.woocommerce-account.rh-invited #customer_login > .col-1 {
		padding-left: clamp(40px, 5vw, 64px);
		border-left: 1px solid var(--rule);
	}
}

/* ---------------------------------------------------------------------------
   The welcome banner. It sits above both columns, full width, and reads as
   good news rather than an error — same card shape as the account notices in
   80-account.css and the event checkout notice, but with the river accent
   those files reserve for a calm, positive state rather than rust's warning
   one. Tokens only; nothing here is a new color.
   --------------------------------------------------------------------------- */

body.woocommerce-account .rh-invite-banner {
	margin: 0 0 clamp(28px, 4vw, 40px);
	padding: 20px 22px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-left: 4px solid var(--river);
	border-radius: 0;
}

body.woocommerce-account .rh-invite-banner__title {
	margin: 0 0 6px;
	font-family: var(--d);
	font-size: clamp(19px, 2.2vw, 22px);
	line-height: 1.25;
	font-weight: 600;
	color: var(--ink);
}

body.woocommerce-account .rh-invite-banner__body {
	margin: 0;
	max-width: 58ch;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--tx-2);
}

body.woocommerce-account .rh-invite-banner__body strong {
	color: var(--ink);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   The aside inside the sign-in column. It follows that column's own lede
   (the ordinary .rh-account-lede rule in 80-account.css) and has to read as
   clearly secondary to it — smaller, quieter, and pulled in close underneath
   rather than given the same 26px of breathing room a section lede gets.
   --------------------------------------------------------------------------- */

body.woocommerce-account .rh-invite-aside {
	margin: -14px 0 26px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--tx-3);
	max-width: 42ch;
}

/* ---------------------------------------------------------------------------
   18-teacher-account.php already prints its own welcome line inside the
   registration form, from the days when that form was the only thing an
   invitee saw. The banner above now says the same thing and more, so two
   greetings stack on top of each other. Hide the older one rather than move
   it: the hidden token input it prints alongside is what actually carries
   the invitation, and that must stay exactly where the form expects it.
   --------------------------------------------------------------------------- */

body.woocommerce-account.rh-invited .rh-invite-note {
	display: none;
}