/*
 * Quick Login public styles.
 *
 * Layout-only rules. No font-family, no color/background overrides on
 * inputs or buttons. The theme owns the visual treatment of form
 * controls so the shortcode and the wp-login swap visually belong to
 * the site they're embedded on.
 *
 * Both the shortcode and the wp-login.php swap surfaces share this
 * stylesheet, enqueued under the dhat-quick-login-public handle.
 */

.dhat-quick-login {
	max-width: 400px;
	margin: 1rem auto;
}

.dhat-quick-login-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.dhat-quick-login-label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.dhat-quick-login-label span {
	font-weight: 500;
}

.dhat-quick-login-input {
	width: 100%;
	padding: 0.5rem 0.75rem;
	box-sizing: border-box;
}

/*
 * Send-button color comes from CSS variables set inline by the
 * module's enqueue path (see add_button_color_inline_style in
 * class-dhat-quick-login.php). Fallbacks match the v0.1.9 default
 * so cached pages without the inline style still render readable
 * buttons. The button-fg is contrast-aware (computed via
 * DHAT_Branding::text_on) so a light background gets dark text and
 * vice versa.
 */
.dhat-quick-login-button {
	align-self: flex-start;
	background: var( --dhat-quick-login-button-bg, #2563eb );
	color: var( --dhat-quick-login-button-fg, #ffffff );
	border: 0;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	cursor: pointer;
}

.dhat-quick-login-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.dhat-quick-login-message {
	padding: 0.75rem;
	background: #f0f9ff;
	border-left: 3px solid #2563eb;
	color: #1e3a8a;
}

/*
 * v0.1.9.1 shortcode design variants. All keyed on data-* attributes
 * the shortcode emits on the .dhat-quick-login wrapper or
 * .dhat-quick-login-label child, so these rules layer cleanly on top
 * of the base layout above without ever needing !important.
 */

/* Width variants. data-width="full" overrides the base max-width:400px
 * so the form spans whatever container holds it (page width, sidebar,
 * card grid cell). data-width="auto" lets the form size to its
 * content. data-width="narrow" matches the base behavior but the
 * explicit rule keeps the cascade predictable when other widths are
 * specified upstream. */
.dhat-quick-login[data-width="full"] {
	max-width: 100%;
}
.dhat-quick-login[data-width="auto"] {
	display: inline-block;
}
.dhat-quick-login[data-width="narrow"] {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

/* Card style adds chrome around the form: padding, white background,
 * subtle shadow, rounded corners. Theme typography still applies
 * inside; we only set container chrome. */
.dhat-quick-login[data-style="card"] {
	padding: 2rem;
	background: #ffffff;
	border-radius: 0.5rem;
	box-shadow: 0 4px 6px -1px rgba( 0, 0, 0, 0.1 ), 0 2px 4px -1px rgba( 0, 0, 0, 0.06 );
	border: 1px solid #e5e7eb;
}

/* Button size variants. font-size scales the label, padding scales
 * the click target. Selected so the medium-size matches the v0.1.9
 * default button. */
.dhat-quick-login[data-button-size="small"] .dhat-quick-login-button {
	font-size: 0.875rem;
	padding: 0.5rem 0.875rem;
}
.dhat-quick-login[data-button-size="medium"] .dhat-quick-login-button {
	font-size: 1rem;
	padding: 0.625rem 1.125rem;
}
.dhat-quick-login[data-button-size="large"] .dhat-quick-login-button {
	font-size: 1.125rem;
	padding: 0.75rem 1.5rem;
}

/* Screen-reader-only label. The label text is still in the document
 * (for assistive tech) but visually hidden via the standard SR-only
 * clip pattern. The data-show-label attribute lives on the <label>
 * element, so only the <span> with the label text disappears; the
 * <input> stays visible. */
.dhat-quick-login-label[data-show-label="false"] > span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* When the form is full-width, stretch the input to fill the
 * container. The base .dhat-quick-login-input has width:100% too;
 * this rule pins it for the data-width="full" case explicitly so a
 * future container-level override can't accidentally shrink it. */
.dhat-quick-login[data-width="full"] .dhat-quick-login-input {
	width: 100%;
}

/* button_fit decouples button width from form width. data-button-fit
 * lives on the same wrapper as data-width; the two are independent.
 *
 *   button_fit="full" — button stretches to 100% of the form width
 *   button_fit="fit"  — button sizes to its content
 *
 * Either value is valid against any width: a narrow form with a
 * full-width button (button spans the narrow container), or a
 * full-width form with a fit button (button is intrinsic width
 * inside a stretched form). */
.dhat-quick-login[data-button-fit="full"] .dhat-quick-login-button {
	width: 100%;
}
.dhat-quick-login[data-button-fit="fit"] .dhat-quick-login-button {
	width: auto;
	align-self: flex-start;
}

/* text_size scales the label text and the success-message text
 * together so they read as one typographic unit. The input's font
 * size is left to the theme (form controls have their own styling
 * conventions and we don't override them). */
.dhat-quick-login[data-text-size="small"] .dhat-quick-login-label > span,
.dhat-quick-login[data-text-size="small"] .dhat-quick-login-message {
	font-size: 0.875rem;
}
.dhat-quick-login[data-text-size="medium"] .dhat-quick-login-label > span,
.dhat-quick-login[data-text-size="medium"] .dhat-quick-login-message {
	font-size: 1rem;
}
.dhat-quick-login[data-text-size="large"] .dhat-quick-login-label > span,
.dhat-quick-login[data-text-size="large"] .dhat-quick-login-message {
	font-size: 1.125rem;
}

/*
 * Inline validation error. Replaces the browser's native required-field
 * popup so the failure mode lives in the same visual context as the
 * rest of the form. role="alert" on the element (set by the JS that
 * inserts it) gets screen readers to announce the message.
 *
 * Shared by both the [dhat_quick_login] shortcode and the wp-login
 * surface; the JS in each appends the element with the same class.
 */
.dhat-quick-login-error {
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: #fef2f2;
	border-left: 3px solid #dc2626;
	color: #991b1b;
	font-size: 0.875rem;
	border-radius: 0.25rem;
}

/* text_size variants for the shortcode surface — keeps the error
 * message in scale with the rest of the form. The wp-login surface
 * doesn't expose text_size so it falls through to the base size. */
.dhat-quick-login[data-text-size="small"] .dhat-quick-login-error {
	font-size: 0.8125rem;
}
.dhat-quick-login[data-text-size="large"] .dhat-quick-login-error {
	font-size: 1rem;
}

/*
 * wp-login.php alternative-login section.
 *
 * Lives below wp-login's standard form and the Register / Lost-password
 * nav. The injected markup reuses WP's .input and .submit class names
 * for the input row and button row, so layout and typography inherit
 * from the wp-login stylesheet. The rules below cover only what wp-
 * login doesn't already style: the section wrapper, the visual divider
 * between the two login surfaces, and the email-input + Send-button
 * full-width behavior (WP's auto-width applies to <input type=submit>
 * but not <button>, so we set it explicitly for our Send button).
 */

.dhat-quick-login-wp-form {
	margin: 0;
}

/*
 * wp-login lays out <p class="forgetmenot"> (Remember Me, float:left)
 * and <p class="submit"> (Log In button, float:right) as a side-by-
 * side row via floats. Because both children float, the
 * <p class="submit"> element itself collapses to zero effective
 * height in the document flow — the visual button sits beside
 * Remember Me, but the block's own height is zero. The divider's
 * clear:both then resolves against a zero-height predecessor, and
 * the divider's margin-top collapses across the empty box and
 * overlaps the floated row visually.
 *
 * Fix has two pieces:
 *
 *   1. Give the submit row overflow:hidden so it contains its
 *      floated child (the Log In button). The row now has real
 *      height equal to the button's height, and the divider's
 *      clear has something to push against. We do NOT also add
 *      clear:both on the submit row — that would force the submit
 *      below the Remember Me row, stacking them vertically and
 *      breaking WP's intended left/right layout.
 *
 *   2. Split the divider's margin into explicit margin-top and
 *      margin-bottom and add a vanishing padding-top (0.01px). The
 *      padding is enough to break margin collapse with the submit
 *      row above so the explicit 2em gap actually renders, while
 *      being too small to affect visual layout itself.
 *
 * The #loginform > selectors outrank WP's plain .login form > rules
 * on specificity, so we don't need !important to win.
 */
#loginform > p.submit {
	overflow: hidden;
}

#loginform > hr.dhat-quick-login-divider {
	display: block;
	width: 100%;
	clear: both;
	margin-top: 2em;
	margin-bottom: 1.5em;
	border: 0;
	border-top: 1px solid #c3c4c7;
	height: 0;
	/* Prevent margin collapse with the floated submit row above. */
	padding-top: 0.01px;
}

#loginform > div.dhat-quick-login-wp-form {
	clear: both;
}

.dhat-quick-login-wp-form input[type="email"].input {
	width: 100%;
	box-sizing: border-box;
}

/*
 * Override wp-admin's .button-primary colors with the configured
 * Quick Login button background and the computed contrast text.
 * The .dhat-quick-login-wp-form ancestor gives this selector
 * specificity (0,2,0) which beats WP's plain .button-primary (0,1,0)
 * without needing !important.
 *
 * The :hover and :focus overrides match the base background so the
 * button doesn't flash back to WP's default blue when the user
 * mouses over it. border-color matches too so the focus ring stays
 * consistent.
 */
.dhat-quick-login-wp-form .submit .button-primary {
	width: 100%;
	background: var( --dhat-quick-login-button-bg, #2563eb );
	color: var( --dhat-quick-login-button-fg, #ffffff );
	border-color: var( --dhat-quick-login-button-bg, #2563eb );
}

.dhat-quick-login-wp-form .submit .button-primary:hover,
.dhat-quick-login-wp-form .submit .button-primary:focus {
	background: var( --dhat-quick-login-button-bg, #2563eb );
	color: var( --dhat-quick-login-button-fg, #ffffff );
	border-color: var( --dhat-quick-login-button-bg, #2563eb );
}

/*
 * Also paint WordPress's standard password Log In button with the
 * configured Quick Login color. The two buttons sit one above the
 * other inside #loginform; admins expect them to match.
 *
 * #wp-submit.button-primary alone has lower specificity than WP's
 * admin theme color rules (which include !important on :focus and
 * :active for accessibility focus rings). Without !important here
 * those WP rules win for the focus/active states and the button
 * flashes back to the default theme color when the user clicks or
 * tabs to it. We match WP's pattern (!important across the four
 * relevant states) so the configured color is stable across every
 * interaction.
 */
#wp-submit.button-primary,
#wp-submit.button-primary:hover,
#wp-submit.button-primary:focus,
#wp-submit.button-primary:active {
	background-color: var( --dhat-quick-login-button-bg, #2563eb ) !important;
	border-color: var( --dhat-quick-login-button-bg, #2563eb ) !important;
	color: var( --dhat-quick-login-button-fg, #ffffff ) !important;
}