@charset "UTF-8";
/*
 * Ascenthya — associate access screens
 * -----------------------------------------------------------------------------
 * Sign up, sign in, and the associate account page.
 *
 * These are the only screens the field force sees before they are inside the
 * business, so they carry the firm's signature rather than a form's. The
 * vocabulary is the one the client portal already uses — rules instead of
 * boxes, square corners, no shadows, one accent that only ever means "this is
 * where you are" — so an associate who has also seen a client statement
 * recognises the same hand.
 *
 * Three deliberate departures from the generic form styling this replaces:
 *
 *   1. The card is not a rounded panel floating on white. It is a sheet with a
 *      teal rule across the top, set on the site's paper grey. Financial
 *      documents are sheets. Rounded cards are software.
 *   2. Required fields are marked in gold, not red. Red is spent on errors; if
 *      every label carries a red asterisk, red stops meaning anything.
 *   3. The sign-up sections are numbered. The form asks for fourteen fields
 *      across five sections, and a long form that shows its own length is far
 *      less likely to be abandoned halfway.
 *
 * The markup is the associates module's own; nothing here requires it to change.
 */

/* ===========================================================================
 * Tokens — the firm's, not the form's.
 * ======================================================================== */

.asas-shell {
	--asas-teal: #11676A;
	--asas-teal-deep: #0B3D3F;
	--asas-gold: #C9971A;

	--asas-ink: #1F2933;
	--asas-muted: #56646F;
	--asas-line: rgba(31, 41, 51, .14);
	--asas-line-strong: rgba(31, 41, 51, .26);

	--asas-surface: #FFFFFF;
	--asas-paper: #F7F9F9;
	--asas-mist: #EAF3F2;

	--asas-ok: #0D6B4A;
	--asas-err: #A12727;

	--asas-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--asas-font-display: "Poppins", "Figtree", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto;
	font-family: var(--asas-font);
	color: var(--asas-ink);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.asas-shell--narrow {
	max-width: 460px;
}

.asas-shell *,
.asas-shell *::before,
.asas-shell *::after {
	box-sizing: inherit;
}

/* ===========================================================================
 * The screen around the form
 *
 * The body class is added by ascenthya-associates-skin.php on pages carrying
 * one of the module's shortcodes, so these rules can never leak onto an
 * ordinary page.
 * ======================================================================== */

body.asc-assoc {
	background: #F7F9F9;
}

body.asc-assoc .site-main {
	padding-top: clamp(32px, 6vw, 72px);
	padding-bottom: clamp(48px, 8vw, 96px);
}

/* The page title becomes the screen's title: a short gold rule, then the name
   of the thing you are about to do. 2px is enough to register as deliberate
   and not enough to compete with the type. */
body.asc-assoc .entry-title,
body.asc-assoc .page-header h1 {
	max-width: 720px;
	margin: 0 auto .55em;
	padding-top: 18px;
	border-top: 2px solid #C9971A;
	font-family: var(--asc-font-display, "Poppins", "Figtree", sans-serif);
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: #0B3D3F;
}

/* On the sign-in screen the sheet is narrower, so the rule and the title track
   it rather than floating wider than the thing they title. */
body.asc-assoc-login .entry-title,
body.asc-assoc-login .page-header h1 {
	max-width: 460px;
}

/* A login screen has no author and no date. */
body.asc-assoc .entry-meta,
body.asc-assoc .post-thumbnail {
	display: none;
}

/* ===========================================================================
 * Notices
 *
 * A left rule on a tinted ground — the same device the client portal uses for
 * its disclosures, rather than a rounded alert box.
 * ======================================================================== */

.asas-notice {
	margin: 0 0 26px;
	padding: 13px 16px;
	border-left: 3px solid var(--asas-line-strong);
	background: var(--asas-paper);
	font-size: .92rem;
	line-height: 1.55;
}

.asas-notice--ok {
	border-left-color: var(--asas-ok);
	background: var(--asas-mist);
	color: var(--asas-ok);
}

.asas-notice--err {
	border-left-color: var(--asas-err);
	background: rgba(161, 39, 39, .06);
	color: var(--asas-err);
}

/* ===========================================================================
 * The sheet
 *
 * One white sheet under a teal rule. Sign-up and sign-in use the same sheet at
 * different widths, so the two screens are obviously the same door rather than
 * two different products.
 * ======================================================================== */

.asas-form,
.asas-card {
	padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 40px) clamp(28px, 4vw, 40px);
	background: var(--asas-surface);
	border: 1px solid var(--asas-line);
	border-top: 3px solid var(--asas-teal);
}

.asas-card {
	margin: 0 0 24px;
}

.asas-card__title {
	margin: 0 0 18px;
	font-family: var(--asas-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--asas-teal-deep);
}

/* ===========================================================================
 * Sections
 *
 * A fieldset is a section of a document separated by a rule, not a box inside a
 * box. The counter is reset on the form and incremented per section, so the
 * numbering stays correct however many sections a future revision adds.
 * ======================================================================== */

.asas-form {
	counter-reset: asas-step;
}

.asas-group {
	margin: 0;
	padding: 26px 0 0;
	border: 0;
	border-top: 1px solid var(--asas-line);
}

/* The first section opens the sheet — no rule above it. */
.asas-group:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.asas-group > legend {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	counter-increment: asas-step;
	font-family: var(--asas-font-display);
	font-size: .96rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.005em;
	color: var(--asas-teal-deep);
}

/* Decorative numerals. Purely presentational — the legend text alone is the
   accessible name of the group. */
.asas-group > legend::before {
	content: counter(asas-step, decimal-leading-zero);
	display: inline-block;
	min-width: 2.2em;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--asas-gold);
	vertical-align: .1em;
}

/* The sign-in sheet has no sections, so nothing is numbered there. */

.asas-help {
	margin: 0 0 18px;
	padding-left: 2.2em;
	max-width: 62ch;
	color: var(--asas-muted);
	font-size: .865rem;
	line-height: 1.55;
}

/* ===========================================================================
 * Fields
 * ======================================================================== */

.asas-field {
	margin: 0 0 18px;
	min-width: 0;
}

.asas-field label {
	display: block;
	margin-bottom: 7px;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .085em;
	text-transform: uppercase;
	color: var(--asas-muted);
}

.asas-field input,
.asas-field select {
	display: block;
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 1px solid var(--asas-line-strong);
	border-radius: 0;
	background: var(--asas-surface);
	font-family: var(--asas-font);
	/* 16px exactly: anything smaller makes iOS Safari zoom the page on focus and
	   never zoom back out. */
	font-size: 16px;
	line-height: 1.4;
	color: var(--asas-ink);
	transition: border-color .15s ease;
}

.asas-field input::placeholder {
	color: rgba(31, 41, 51, .38);
}

/* Focus is gold and offset, matching the client portal and the header, so the
   ring reads as the site's rather than the browser's. */
.asas-field input:focus,
.asas-field select:focus,
.asas-form :focus-visible {
	outline: 2px solid var(--asas-gold);
	outline-offset: 2px;
}

.asas-field input:focus,
.asas-field select:focus {
	border-color: var(--asas-teal);
}

.asas-field input:hover:not(:focus),
.asas-field select:hover:not(:focus) {
	border-color: rgba(31, 41, 51, .4);
}

/* ------------------------------------------------------------------ Errors
   A rejected field states what is wrong next to the field itself, so nothing
   has to be hunted for. Colour is never the only signal: the message carries
   the meaning, and aria-invalid carries it to a screen reader. */

.asas-field--error label {
	color: #B4231F;
}

.asas-field--error input,
.asas-field--error select {
	border-color: #B4231F;
	background: #FDF6F5;
}

.asas-field--error input:focus,
.asas-field--error select:focus {
	border-color: #B4231F;
}

.asas-error {
	display: block;
	margin-top: 6px;
	font-size: .82rem;
	line-height: 1.45;
	font-weight: 500;
	color: #B4231F;
	text-transform: none;
	letter-spacing: 0;
}

.asas-field select[disabled] {
	background: var(--asas-paper);
	color: var(--asas-muted);
	cursor: not-allowed;
}

/* The agent code is an identifier, not prose: give it the tracking and the
   figures of one. */
.asas-field input#asas_agent_code {
	font-family: "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 16px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Chrome paints autofilled fields pale yellow, which destroys a white sheet. An
   inset shadow the size of the field is the only reliable way to repaint it,
   and the fill colour has to be set separately or the text turns black. */
.asas-field input:-webkit-autofill,
.asas-field input:-webkit-autofill:hover,
.asas-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--asas-ink);
	-webkit-box-shadow: 0 0 0 60px var(--asas-surface) inset;
	box-shadow: 0 0 0 60px var(--asas-surface) inset;
	caret-color: var(--asas-ink);
}

/* Required marker: gold, and set apart from the label's tracking so it reads as
   a mark rather than as a letter. */
.asas-req {
	margin-left: .25em;
	color: var(--asas-gold);
	font-weight: 700;
}

/* Paired fields. auto-fit rather than a fixed two-column rule, so a long
   Province name or a translated label gets its own row instead of truncating,
   and one column below ~500px without a second breakpoint to maintain. */
.asas-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0 22px;
}

.asas-check {
	margin: 4px 0 22px;
	font-size: .92rem;
	color: var(--asas-ink);
}

.asas-check label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* A 44px line makes the whole row a comfortable target, not just the 19px
	   box — this form is filled in on phones, in the field. */
	min-height: 44px;
	cursor: pointer;
}

.asas-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	accent-color: var(--asas-teal);
}

/* ===========================================================================
 * Actions
 * ======================================================================== */

.asas-actions {
	margin: 26px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--asas-line);
}

.asas-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 32px;
	border: 1px solid var(--asas-teal);
	border-radius: 0;
	background: var(--asas-teal);
	color: #fff;
	font-family: var(--asas-font-display);
	font-size: .93rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, transform .1s ease;
}

.asas-button:hover,
.asas-button:focus {
	background: var(--asas-teal-deep);
	border-color: var(--asas-teal-deep);
	color: #fff;
}

.asas-button:active {
	transform: translateY(1px);
}

/* On a phone the primary action fills the sheet: no hunting for a small target
   at the bottom of a long form. */
@media (max-width: 560px) {
	.asas-button {
		width: 100%;
	}
}

/* ===========================================================================
 * Secondary links
 * ======================================================================== */

.asas-alt {
	margin: 20px 0 0;
	font-size: .875rem;
	line-height: 1.6;
	color: var(--asas-muted);
}

.asas-alt a {
	padding-bottom: 1px;
	border-bottom: 1px solid rgba(17, 103, 106, .3);
	color: var(--asas-teal);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.asas-alt a:hover,
.asas-alt a:focus {
	border-bottom-color: var(--asas-teal-deep);
	color: var(--asas-teal-deep);
}

/* The "you are already signed in" and "no profile attached" states are a bare
   unclassed paragraph in the shell. Give them the sheet too, rather than
   leaving them as loose text on the page. Unclassed only: .asas-alt and
   .asas-help are also paragraphs and must not be turned into sheets. */
.asas-shell > p:not([class]) {
	margin: 0;
	padding: clamp(24px, 4vw, 36px);
	background: var(--asas-surface);
	border: 1px solid var(--asas-line);
	border-top: 3px solid var(--asas-teal);
	font-size: 1rem;
}

.asas-shell > p:not([class]) a {
	color: var(--asas-teal);
	font-weight: 600;
}

/* ===========================================================================
 * Account summary
 * ======================================================================== */

.asas-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 22px 32px;
	margin: 0 0 20px;
}

.asas-summary dt {
	margin: 0 0 5px;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--asas-muted);
}

.asas-summary dd {
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--asas-line);
	font-size: 1rem;
	line-height: 1.4;
	overflow-wrap: break-word;
}

/* ===========================================================================
 * The honeypot
 *
 * Left exactly as the module defines it. It must stay reachable to a bot and
 * off-screen for everyone else, so it is restated here rather than trusted to
 * survive a future edit to this file.
 * ======================================================================== */

.asas-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ===========================================================================
 * Motion and print
 * ======================================================================== */

@media (prefers-reduced-motion: reduce) {

	.asas-field input,
	.asas-field select,
	.asas-button,
	.asas-alt a {
		transition: none;
	}

	.asas-button:active {
		transform: none;
	}
}

@media print {

	.asas-form,
	.asas-card,
	.asas-shell > p:not([class]) {
		border: 1px solid #999;
	}

	.asas-actions,
	.asas-alt {
		display: none;
	}
}