/**
 * User Profile Login — styles
 * ===========================================================================
 * This one file styles the block on the front end AND in the editor.
 *
 * HOW TO CHANGE THE LOOK
 * ----------------------
 * Everything you'd normally want to tweak is a variable in the :root block
 * below. Change a value there and it updates everywhere it's used.
 *
 * These variables replace the colour pickers and sliders that used to sit in
 * the editor sidebar. The advantage: the styling lives in one place and
 * applies to every instance of the block, instead of being saved separately
 * into each block's markup where it's easy to lose track of.
 *
 * The class .wp-block-cm-user-profile-login is generated by WordPress from
 * the block name 'cm/user-profile-login'. Don't rename it unless you also
 * change the block name in the PHP file.
 * ===========================================================================
 */

:root {
	/* --- Button ---------------------------------------------------------- */
	/* Brand red, matching the Sheldon Hub logo. This was previously set as
	   "buttonBackgroundColor" in the header markup — it now lives here. */
	--cm-upl-button-bg:       #ad443a;
	--cm-upl-button-text:     #ffffff;
	--cm-upl-button-radius:   4px;    /* corner rounding (old slider: 0-50px) */

	/* Button size. These three pairs were the old Small / Medium / Large
	   dropdown. The values below are "Medium" — swap in another row to resize.
	     Small:  padding 0.4rem 1rem;    font-size 0.85rem
	     Medium: padding 0.5rem 1.25rem; font-size 0.95rem
	     Large:  padding 0.7rem 1.5rem;  font-size 1.05rem   */
	--cm-upl-button-padding:  0.5rem 1.25rem;
	--cm-upl-button-size:     0.95rem;

	/* --- Card ------------------------------------------------------------ */
	--cm-upl-bg:              #f9f9f9; /* card background */
	--cm-upl-border:          #e0e0e0; /* card border */
	--cm-upl-radius:          8px;     /* card corner rounding */
	--cm-upl-padding:         1.5rem;  /* space inside the card */
	--cm-upl-gap:             1rem;    /* space between avatar / name / button */

	/* --- Name ------------------------------------------------------------ */
	--cm-upl-name-colour:     #1e1e1e;
	--cm-upl-name-size:       1.1rem;

	/* --- Avatar ---------------------------------------------------------- */
	--cm-upl-avatar-size:     48px;    /* must match get_avatar( $user->ID, 48 )
	                                      in the PHP file if you change it */
}

/* ---------------------------------------------------------------------------
   The card
   The contents are pushed to the right-hand end (flex-end) because this block
   sits at the right of the site header. Change to flex-start for the left, or
   center to centre it.
   --------------------------------------------------------------------------- */
.wp-block-cm-user-profile-login {
	display: flex;
	justify-content: flex-end;
	padding: var(--cm-upl-padding);
	background-color: var(--cm-upl-bg);
	border: 1px solid var(--cm-upl-border);
	border-radius: var(--cm-upl-radius);
}

/* The inner row holding avatar, name and button side by side. */
.wp-block-cm-user-profile-login .cm-upl-content {
	display: flex;
	align-items: center;
	gap: var(--cm-upl-gap);
}

/* ---------------------------------------------------------------------------
   Avatar
   This is a link to the member's BuddyPress profile when BuddyPress is
   active, and a plain div when it isn't — so it's styled to work as both.
   line-height: 0 stops the browser adding a few stray pixels under the image.
   --------------------------------------------------------------------------- */
.wp-block-cm-user-profile-login .cm-upl-avatar {
	flex-shrink: 0;
	display: block;
	line-height: 0;
	text-decoration: none;
}

.wp-block-cm-user-profile-login .cm-upl-avatar img {
	display: block;
	border-radius: 50%;   /* set to 0 for square avatars */
	transition: opacity 0.2s ease;
}

.wp-block-cm-user-profile-login .cm-upl-avatar:hover img {
	opacity: 0.85;
}

/* Grey circle shown in the editor preview only (no real user there). */
.wp-block-cm-user-profile-login .cm-upl-avatar-placeholder {
	width: var(--cm-upl-avatar-size);
	height: var(--cm-upl-avatar-size);
	border-radius: 50%;
	background-color: #dcdcde;
}

/* ---------------------------------------------------------------------------
   Display name
   Also a profile link when BuddyPress is active. It inherits the surrounding
   text colour rather than turning link-blue.
   --------------------------------------------------------------------------- */
.wp-block-cm-user-profile-login .cm-upl-info {
	flex-shrink: 0;
}

.wp-block-cm-user-profile-login .cm-upl-name-link {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.wp-block-cm-user-profile-login .cm-upl-name-link:hover {
	opacity: 0.85;
}

.wp-block-cm-user-profile-login .cm-upl-name {
	margin: 0;
	font-size: var(--cm-upl-name-size);
	font-weight: 600;
	color: var(--cm-upl-name-colour);
	white-space: nowrap;   /* stops long names wrapping onto two lines */
}

/* ---------------------------------------------------------------------------
   Login / Logout button
   Both buttons share these styles. If you want them to differ, add a rule for
   .cm-upl-button--login or .cm-upl-button--logout below this block.
   --------------------------------------------------------------------------- */
.wp-block-cm-user-profile-login .cm-upl-button {
	flex-shrink: 0;
	display: inline-block;
	border: none;
	padding: var(--cm-upl-button-padding);
	font-size: var(--cm-upl-button-size);
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
	background-color: var(--cm-upl-button-bg);
	color: var(--cm-upl-button-text);
	border-radius: var(--cm-upl-button-radius);
}

.wp-block-cm-user-profile-login .cm-upl-button:hover {
	opacity: 0.85;
	color: var(--cm-upl-button-text);   /* stop themes recolouring it on hover */
}

/* Keyboard focus ring — please keep this. It's what lets people tab through
   the site without losing track of where they are. */
.wp-block-cm-user-profile-login .cm-upl-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   Small screens — stack everything and make the button full width.
   Change the 600px below to move the point where it stacks. (It can't be a
   variable — CSS doesn't allow variables inside media queries.)
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.wp-block-cm-user-profile-login {
		justify-content: center;
	}

	.wp-block-cm-user-profile-login .cm-upl-content {
		flex-direction: column;
		text-align: center;
	}

	.wp-block-cm-user-profile-login .cm-upl-button {
		width: 100%;
	}
}