/*
 * Khosh — front-end styles.
 *
 * Token names mirror Blogano's, with an --khsh- prefix instead of --psw-, so the two
 * stylesheets read the same way. Anything Blogano hardcodes is hardcoded here too:
 * exposing a control Blogano does not expose breaks the symmetry as surely as dropping one
 * it does.
 *
 * The 780px breakpoint is the one number a setting cannot reach, because a CSS media query
 * cannot read a custom property.
 */


/* --------------------------------------------------------------------------- Full bleed

   A block theme's constrained layout caps every direct child of the content area at the
   theme's content size. Section Width is a max-width, and a max-width cannot beat an
   ancestor that is already narrower — so without lifting the cap here the setting can only
   shrink the content, never widen it, and a percentage resolves against the theme's width
   rather than the screen.

   The negative margins cancel the root padding the theme applies, so a screen set wider
   than the content area reaches the same edges the theme's own full-width blocks do. */
.khosh-full-bleed {
	max-width: none !important;
	margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
}
@media (max-width: 780px) {
	/* Edge to edge would put the text against the screen, so the mobile inset goes back on
	   here rather than on each screen inside. */
	.khosh-full-bleed {
		padding-left: var(--khsh-mobile-side-padding);
		padding-right: var(--khsh-mobile-side-padding);
		box-sizing: border-box;
	}
}

/* ------------------------------------------------------------------------ Containers */

.khosh-form,
.khosh-profile {
	max-width: var(--khsh-max-width) !important;
	margin: 0 auto !important;
	padding: var(--khsh-card-padding);
	font-family: var(--khsh-font-body);
	color: inherit;
	background: var(--khsh-color-card-bg);
	border: var(--khsh-border-card-size) solid var(--khsh-border-card-color);
	border-radius: var(--khsh-radius-cards);
	box-sizing: border-box;
}

/* Follows Section Width like everything else. This used to be min(420px, …), which meant
   the setting could narrow a form but never widen one — so raising it did nothing at all to
   Sign In, Create Account or My Account, which are most of what this plugin renders. */
.khosh-form { max-width: var(--khsh-max-width) !important; }

.khosh-form *,
.khosh-profile * { box-sizing: border-box; }

/* The page behind the screens. Applied to the body only where a shortcode is present, so
   a site's other pages are untouched. */
body.khosh-has-content {
	background-color: var(--khsh-page-bg);
	background-image: var(--khsh-page-bg-image);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.khosh-form h2,
.khosh-profile h2 { margin: 0 0 6px; font-size: 1.4em; line-height: 1.25; font-family: var(--khsh-font-heading); }

.khosh-sub,
.khosh-note { color: var(--khsh-color-muted); font-size: 13px; }
.khosh-sub  { margin: 0 0 20px; }
.khosh-note { margin: 8px 0 0; }
.khosh-alt  { margin: 16px 0 0; font-size: 13px; text-align: center; }

.khosh-notice {
	padding: var(--khsh-card-padding);
	background: var(--khsh-color-card-bg);
	border: var(--khsh-border-card-size) solid var(--khsh-border-card-color);
	border-radius: var(--khsh-radius-cards);
}

/* ---------------------------------------------------------------------------- Alerts */

.khosh-alert {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--khsh-radius-form-fields);
	font-size: 14px;
	line-height: 1.45;
}
.khosh-alert-success {
	background: color-mix(in srgb, var(--khsh-btn-critical-bg) 12%, transparent);
	border: var(--khsh-border-form-size) solid color-mix(in srgb, var(--khsh-btn-critical-bg) 45%, transparent);
}
.khosh-alert-error {
	background: color-mix(in srgb, #d63638 12%, transparent);
	border: var(--khsh-border-form-size) solid color-mix(in srgb, #d63638 45%, transparent);
}

/* ---------------------------------------------------------------------------- Fields */

.khosh-field { margin: 0 0 16px; }

.khosh-label,
.khosh-form label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: normal; }

.khosh-input,
.khosh-form input[type="text"],
.khosh-form input[type="email"],
.khosh-form input[type="url"],
.khosh-form input[type="password"],
.khosh-profile input[type="text"],
.khosh-profile input[type="email"],
.khosh-profile input[type="url"],
.khosh-profile input[type="password"],
.khosh-textarea {
	width: 100%;
	padding: 10px 12px;
	background: var(--khsh-form-field-bg);
	color: var(--khsh-form-field-text);
	border: var(--khsh-border-form-size) solid var(--khsh-border-form-color);
	border-radius: var(--khsh-radius-form-fields);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
}

.khosh-input:focus,
.khosh-textarea:focus {
	outline: 2px solid color-mix(in srgb, var(--khsh-btn-critical-bg) 50%, transparent);
	outline-offset: 1px;
}

.khosh-textarea { resize: vertical; min-height: 110px; }

/* Core's wp_login_form() emits its own markup, styled rather than rebuilt so the field
   names and behaviour stay exactly what WordPress expects. */
.khosh-form .login-username,
.khosh-form .login-password,
.khosh-form .login-remember,
.khosh-form .login-submit { margin: 0 0 16px; }
.khosh-form .login-remember label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.khosh-form .login-remember input { margin: 0; }

/* --------------------------------------------------------------------------- Buttons */

.khosh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	font-family: inherit;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
}

.khosh-btn-critical {
	background: var(--khsh-btn-critical-bg);
	color: var(--khsh-btn-critical-text);
	border: var(--khsh-border-critical-btn-size) solid var(--khsh-border-critical-btn-color);
	border-radius: var(--khsh-radius-critical-btn);
	font-size: var(--khsh-btn-critical-font-size);
	line-height: var(--khsh-btn-critical-line-height);
}
.khosh-btn-critical:hover {
	background: var(--khsh-btn-critical-bg-hover);
	color: var(--khsh-btn-critical-text-hover);
}

.khosh-btn-normal {
	background: var(--khsh-btn-normal-bg);
	color: var(--khsh-btn-normal-text);
	border: var(--khsh-border-normal-btn-size) solid var(--khsh-border-normal-btn-color);
	border-radius: var(--khsh-radius-normal-btn);
	font-size: var(--khsh-btn-normal-font-size);
	line-height: var(--khsh-btn-normal-line-height);
}
.khosh-btn-normal:hover {
	background: var(--khsh-btn-normal-bg-hover);
	color: var(--khsh-btn-normal-text-hover);
}

/* Core's submit button is an <input>, which cannot be a flex container, so the shared
   rules above do not reach it and it needs its own copy. */
.khosh-btn-block,
.khosh-form .login-submit input[type="submit"] {
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px 18px;
	background: var(--khsh-btn-critical-bg);
	color: var(--khsh-btn-critical-text);
	border: var(--khsh-border-critical-btn-size) solid var(--khsh-border-critical-btn-color);
	border-radius: var(--khsh-radius-critical-btn);
	font-family: inherit;
	font-size: var(--khsh-btn-critical-font-size);
	line-height: var(--khsh-btn-critical-line-height);
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
}
.khosh-form .login-submit input[type="submit"]:hover {
	background: var(--khsh-btn-critical-bg-hover);
	color: var(--khsh-btn-critical-text-hover);
}

/* Icon / Label / Both, exactly as Blogano scopes it: the class sits on the wrapper and
   the rules reach the buttons inside. */
/* .khosh-btn-label, not span. The avatar sits in a span too, so hiding every span in the
   button hid the picture along with the label — which is exactly what happened in icon-only
   mode, and why the picture appeared in icon-and-label and vanished in icon. */
.khosh-critical-style-icon  .khosh-btn-critical .khosh-btn-label { display: none; }
.khosh-critical-style-label .khosh-btn-critical .khosh-icon,
.khosh-critical-style-label .khosh-btn-critical .khosh-avatar-wrap { display: none; }

/* The same for Normal, which is what the Account control is now.
   These did not exist while Sign out was the only button here, and the Normal Style setting
   consequently had nothing to act through — it saved, it emitted, and no rule read it. The
   photo counts as the icon, because on this control it is the picture that a label would
   otherwise replace. */
.khosh-normal-style-icon  .khosh-btn-normal .khosh-btn-label { display: none; }
.khosh-normal-style-label .khosh-btn-normal .khosh-icon,
.khosh-normal-style-label .khosh-btn-normal .khosh-avatar-wrap { display: none; }

.khosh-icon { width: 1em; height: 1em; flex: 0 0 auto; }

.khosh-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: var(--khsh-btn-normal-bg);
	color: var(--khsh-btn-normal-text);
	border: var(--khsh-border-normal-btn-size) solid var(--khsh-border-normal-btn-color);
	border-radius: var(--khsh-radius-normal-btn);
	font-size: 15px;
	cursor: pointer;
}
.khosh-icon-btn:hover { background: var(--khsh-btn-normal-bg-hover); color: var(--khsh-btn-normal-text-hover); }

/* ---------------------------------------------------------------- Password visibility */

.khosh-password-wrap { position: relative; display: block; }
.khosh-password-wrap input[type="password"],
.khosh-password-wrap input[type="text"] { padding-right: 40px; }
.khosh-password-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	padding: 0;
	background: none;
	border: none;
	color: var(--khsh-color-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

/* ----------------------------------------------------------------------------- Avatar */

/* Radius follows Critical Buttons, the same coupling Blogano documents. */
.khosh-avatar { border-radius: var(--khsh-radius-card-avatar); object-fit: cover; display: block; }

/* ---------------------------------------------------------------------------- Profile */

.khosh-profile-cols { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: start; margin-top: 20px; }
.khosh-profile-photo-col { text-align: center; }
.khosh-profile-meta { display: flex; justify-content: space-between; margin: 0 0 10px; color: var(--khsh-color-muted); font-size: 11px; text-transform: uppercase; }
.khosh-photo-wrap { width: 200px; height: 200px; overflow: hidden; border-radius: var(--khsh-radius-card-avatar); margin: 0 auto; background: var(--khsh-color-card-bg); }
.khosh-photo-wrap img { width: 200px; height: 200px; object-fit: cover; border-radius: var(--khsh-radius-card-avatar); display: block; }
.khosh-photo-actions { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.khosh-profile-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; align-items: start; }
.khosh-profile-details, .khosh-profile-password { min-width: 0; }
.khosh-save-row { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }

/* --------------------------------------------------------------------- Account links */

/* align-self: center, so a flex or grid parent cannot stretch this to its own height. The
   previous version relied on stretch between the two buttons, which worked in isolation and
   then took the full height of the navigation bar the moment the container itself became a
   flex item — a header is exactly where this lives, so that was the normal case, not an
   edge one. */
.khosh-account-links {
	/*
	 * One measurement, declared once and used by everything in here: the button height, the
	 * picture's width, and the square of an icon-only button.
	 *
	 * Every previous attempt asked the browser to work a size out — stretch against a
	 * sibling, a ratio against an auto width, a wrapper measured from its own content. Each
	 * failed differently, and the picture came out at zero or at its full file size. A flex
	 * item with width:auto is sized from its content, and the only content here is an
	 * absolutely positioned image, so there is nothing to measure. Naming the number ends
	 * the guessing, and because it is derived from the button font size it still tracks the
	 * setting.
	 */
	--khsh-acct-h: calc(var(--khsh-btn-normal-font-size) * 2.4);

	display: inline-flex;
	align-items: stretch;
	align-self: center;
	height: fit-content;
	gap: 6px;
	vertical-align: middle;
}

/* The padding moves off the button and onto the label and icon inside it. A button that
   keeps its own padding insets everything it contains, including the avatar, which is why
   the avatar could never reach the top and bottom edges. */
/* A definite height, from the normal button's font size, rather than one inherited from
   whatever the buttons happen to sit inside. Both buttons read the same token even though
   Critical has a font size of its own, because two buttons of different heights side by
   side in a header looks like a fault whatever the settings say. */
.khosh-account-links .khosh-btn-inline {
	padding: 0;
	/* No clipping. It was here to hold a picture that filled the button; the picture is an
	   icon with a shape of its own now, and clipping would shave its rounded corners
	   against the button's corner curve. */
	overflow: visible;
	align-items: stretch;
	height: var(--khsh-acct-h);
	flex: 0 0 auto;
}
/* Horizontal padding only. The button's height is definite now, so vertical padding adds
   nothing and at a small font size would push the label past a height it cannot grow to. */
.khosh-account-links .khosh-btn-inline > .khosh-btn-label {
	display: flex;
	align-items: center;
	/* 6px against the picture or icon to its left, 12px against the button edge. Both were
	   12px, and the icon carried another 12px of its own, so the two sat 24px apart —
	   wider than the gap between the buttons themselves. */
	padding: 0 12px 0 6px;
	white-space: nowrap;
}
/* Label only: no icon to sit against, so the label is even on both sides again.
   The asymmetry above exists to sit a word against a picture. With nothing to its left it
   reads as a word pushed off centre, which is what it was doing on the Account button —
   this rule existed for Sign out and had no counterpart. */
.khosh-account-links.khosh-critical-style-label .khosh-btn-critical > .khosh-btn-label,
.khosh-account-links.khosh-normal-style-label .khosh-btn-normal > .khosh-btn-label {
	padding: 0 12px;
	justify-content: center;
}
/* And the button centres what is in it, so a wider button does not leave the word at one
   end of it. */
.khosh-account-links.khosh-normal-style-label .khosh-btn-normal { justify-content: center; }

/* Icon only means no label, restated here because the rule above has the same specificity
   as the general hide rule near the top of this file and sits later, so it was quietly
   winning — the label reappeared inside a square button and was clipped by its overflow.
   Placed after the rule it has to beat, rather than given artificial weight. */
.khosh-account-links.khosh-critical-style-icon .khosh-btn-critical > .khosh-btn-label { display: none; }
/* The same guard for the Account button: a square button with a label still in it clips the
   word rather than hiding it, which looks like a rendering fault rather than a setting. */
.khosh-account-links.khosh-normal-style-icon .khosh-btn-normal > .khosh-btn-label { display: none; }
/* The icon's space belongs on the outer edge only; the label supplies the gap between
   them. The photo takes the same, so the Account button and Sign out are padded alike
   rather than one sitting tighter than the other. */
.khosh-account-links .khosh-icon,
.khosh-account-links .khosh-btn-normal .khosh-avatar-wrap { align-self: center; margin: 0 0 0 12px; }
/* Icon only: even on both sides, since there is no label to sit against. */
.khosh-account-links.khosh-critical-style-icon .khosh-icon { margin: 0; }

/* Mirrored, so the icon still sits on the leading edge in a right-to-left layout. */
.khosh-rtl.khosh-account-links .khosh-icon,
.khosh-rtl.khosh-account-links .khosh-btn-normal .khosh-avatar-wrap { margin: 0 12px 0 0; }
.khosh-rtl.khosh-account-links .khosh-btn-inline > .khosh-btn-label { padding: 0 6px 0 12px; }
/* Label only is even either way round, so the mirrored rule must not reintroduce a side. */
.khosh-rtl.khosh-account-links.khosh-critical-style-label .khosh-btn-critical > .khosh-btn-label,
.khosh-rtl.khosh-account-links.khosh-normal-style-label .khosh-btn-normal > .khosh-btn-label { padding: 0 12px; }

/* The wrapper is the flex item, not the image.
   align-self: stretch does not reliably size a replaced element: an <img> keeps its
   intrinsic dimensions, so stretching it directly left the picture at whatever size the
   file happened to be. A span has no intrinsic size, so it stretches to the button height
   predictably, and the ratio then gives it a matching width. */
.khosh-account-links .khosh-avatar-wrap {
	/*
	 * In flow, so a label can sit beside it, and both axes taken from the shared
	 * measurement rather than worked out. Earlier versions asked a ratio to produce a width
	 * from a flex-basis of auto; a flex item with an automatic width is sized from its
	 * content, and the only content here is an absolutely positioned image, so there was
	 * nothing to measure and the width came out at zero.
	 */
	position: relative;
	/* Both axes given explicitly, so nothing is inferred from content or from a ratio. */
	flex: 0 0 var(--khsh-acct-h);
	width: var(--khsh-acct-h);
	height: var(--khsh-acct-h);
	display: block;
	/* Matching the image's own radius. The wrapper clips, so leaving it square here would
	   crop the rounded corners straight back off. */
	border-radius: var(--khsh-radius-card-avatar);
	overflow: hidden;
	line-height: 0;
}
/* The picture carries its own radius, from Account Photo Radius, and is not clipped to the
   button's shape. It is an icon that happens to be a photograph: the only thing it takes
   from the button is its height, so the two line up. Everything else about it — how round
   it is, that it is square, that it crops rather than stretches — is its own.

   Absolute, so the image cannot contribute a size of its own back to the wrapper. cover
   crops rather than distorts a photo that is not already square. */
.khosh-account-links .khosh-avatar {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: var(--khsh-radius-card-avatar);
	display: block;
}

/* The Account control is the photo itself, with no button around it. A background and a
   border behind it only draw a box around something that already reads as clickable, and
   put two competing shapes side by side in a header. Sign out stays a button, because a
   word needs one to look pressable.

   Height comes from the same measurement the Sign out button uses, so the two line up. */
/* The bare photo. Scoped to the case it was written for — a control that is only a picture,
   which wants no background, border or padding behind it.
   :not(.khosh-btn) matters: once the control shows a word it takes the button classes, and
   this rule stripping the background off them was why Normal Buttons appeared to do nothing
   at all. A rule that removes styling has to know when it does not apply. */
.khosh-account-links .khosh-account-link:not(.khosh-btn) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--khsh-acct-h);
	padding: 0;
	background: none;
	border: 0;
	text-decoration: none;
	color: inherit;
	flex: 0 0 auto;
}
.khosh-account-links .khosh-account-link:not(.khosh-btn):hover { background: none; }

/* As a button it lines up with Sign out beside it and keeps the room for its word. */
.khosh-account-links .khosh-account-link.khosh-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	text-decoration: none;
}

/* Icon only: the Sign out button squares up too, and its icon loses the side margins that
   would otherwise make it wider than it is tall. */
.khosh-account-links.khosh-critical-style-icon .khosh-btn-critical {
	width: var(--khsh-acct-h);
	justify-content: center;
}
.khosh-account-links.khosh-critical-style-icon .khosh-btn-critical .khosh-icon { margin: 0; }

/* The Account button does the same when it is showing a picture and no word — the photo is
   its icon, so the button should be as tall as it is wide rather than a wide box with a
   portrait adrift in it. */
.khosh-account-links.khosh-normal-style-icon .khosh-btn-normal {
	width: var(--khsh-acct-h);
	justify-content: center;
	padding: 0;
}
.khosh-account-links.khosh-normal-style-icon .khosh-btn-normal .khosh-avatar-wrap { margin: 0; }

/* No min-height needed any more: the height above is definite, so an icon-only button with
   nothing inside it still has one. */

/* ------------------------------------------------------------------------------- RTL */

.khosh-rtl { direction: rtl; text-align: right; }
.khosh-rtl .khosh-profile-meta,
.khosh-rtl .khosh-photo-actions,
.khosh-rtl .khosh-account-links { flex-direction: row-reverse; }
.khosh-rtl .khosh-save-row { justify-content: flex-start; }
.khosh-rtl .khosh-password-wrap input[type="password"],
.khosh-rtl .khosh-password-wrap input[type="text"] { padding-right: 12px; padding-left: 40px; }
.khosh-rtl .khosh-password-toggle { right: auto; left: 6px; }

/* -------------------------------------------------------------------- Narrow screens */

@media (max-width: 780px) {
	.khosh-form,
	.khosh-profile,
	.khosh-notice {
		max-width: 100% !important;
		/* The side inset is applied by .khosh-full-bleed, which wraps these. Repeating it
		   here would indent them twice. */
		padding: var(--khsh-card-padding-mobile);
	}

	.khosh-profile-cols { grid-template-columns: 1fr; gap: 24px; }
	.khosh-profile-form { grid-template-columns: 1fr; }
	.khosh-photo-wrap { max-width: 200px; }

	/* Icons only at this width whatever the Style setting says: two labelled buttons
	   beside a logo leave no room for the theme's own menu button. The icon rule is not
	   redundant — with Style set to Label, that hides the icon and this hides the label,
	   which would otherwise leave an empty button. */
	/*
	 * A quarter larger on a phone. A tap target has to be reachable with a thumb, and the
	 * desktop size is set for a pointer — so this is not decoration, it is the reason the
	 * two sizes differ.
	 *
	 * Redeclaring the shared measurement here scales everything that reads it at once: the
	 * photo, the Sign out button, and the square they both sit in. The icon is sized in em
	 * from the font rather than from that measurement, so it needs its own line.
	 */
	.khosh-account-links { --khsh-acct-h: calc(var(--khsh-btn-normal-font-size) * 3); }

	/*
	 * Labels give way to icons on a narrow screen — but only where there is an icon to
	 * give way to.
	 *
	 * Written when the Style setting reached only the Sign out button and every control
	 * here had a picture, so hiding the words cost nothing. Label only has no picture: the
	 * word is the whole control, and hiding it leaves an empty button that looks like a
	 * control that failed to render. It was also overriding a setting the person had just
	 * chosen, at a width they could see, with no way to tell why.
	 *
	 * So the two styles that have something else to show lose their labels, and the one
	 * that does not keeps them.
	 */
	.khosh-account-links.khosh-critical-style-icon .khosh-btn-critical .khosh-btn-label,
	.khosh-account-links.khosh-critical-style-both .khosh-btn-critical .khosh-btn-label { display: none !important; }
	.khosh-account-links.khosh-normal-style-icon .khosh-btn-normal .khosh-btn-label,
	.khosh-account-links.khosh-normal-style-both .khosh-btn-normal .khosh-btn-label { display: none !important; }

	/*
	 * The container and the Account link assert themselves too, not just what is inside
	 * them. Forcing a child visible does nothing when an ancestor is the thing being
	 * hidden, and a block theme's header commonly collapses its contents at this
	 * breakpoint — which looks exactly like the photo failing to render.
	 */
	.khosh-account-links { display: inline-flex !important; }
	.khosh-account-links .khosh-account-link { display: inline-flex !important; }
	/* Square only while it is a bare photo. With a word in it the button needs its width. */
	.khosh-account-links .khosh-account-link.khosh-btn { width: auto; }
	/*
	 * And the pictures assert themselves, except where the style says there is not one.
	 * Forcing an icon visible in Label only put back the very thing the setting removes.
	 */
	.khosh-account-links:not(.khosh-critical-style-label) .khosh-btn-critical .khosh-icon,
	.khosh-account-links:not(.khosh-normal-style-label) .khosh-btn-normal .khosh-icon,
	.khosh-account-links:not(.khosh-normal-style-label) .khosh-avatar-wrap { display: block !important; }
	.khosh-account-links:not(.khosh-normal-style-label) .khosh-avatar { display: block !important; }

	/* Square on a phone whatever the desktop style is, sized from the measurement above so
	   it still tracks the button font size rather than ignoring it below this width. */
	.khosh-account-links .khosh-btn-inline {
		width: var(--khsh-acct-h);
		padding: 0;
		justify-content: center;
	}
	.khosh-account-links .khosh-icon { margin: 0; width: 1.25em; height: 1.25em; }
}

/* -------------------------------------------------------------------------- Directory */

.khosh-directory {
	max-width: var(--khsh-max-width) !important;
	margin: 0 auto !important;
	font-family: var(--khsh-font-body);
	box-sizing: border-box;
}

.khosh-dir-search {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 20px;
}
.khosh-dir-search .khosh-input { flex: 1 1 200px; width: auto; min-width: 0; }
.khosh-dir-search select.khosh-input { flex: 0 0 auto; width: auto; }

.khosh-dir-card-name {
	font-size: var(--khsh-dir-name-font-size);
	line-height: var(--khsh-dir-name-line-height);
	color: var(--khsh-dir-name-color);
	font-family: var(--khsh-font-heading);
	text-decoration: none;
	font-weight: 600;
}

.khosh-dir-card-meta {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	color: var(--khsh-color-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.khosh-dir-card-bio { margin: 4px 0 0; color: var(--khsh-color-muted); font-size: 13px; }

.khosh-dir-card-extra { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.khosh-dir-card-extra li { display: flex; gap: 5px; font-size: 12px; }
.khosh-dir-extra-label { color: var(--khsh-color-muted); }
.khosh-dir-extra-value { font-weight: 600; }

.khosh-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.khosh-pagination .page-numbers {
	padding: 6px 11px;
	border: var(--khsh-border-normal-btn-size) solid var(--khsh-border-normal-btn-color);
	border-radius: var(--khsh-radius-normal-btn);
	text-decoration: none;
	font-size: 13px;
}
.khosh-pagination .page-numbers.current {
	background: var(--khsh-btn-critical-bg);
	color: var(--khsh-btn-critical-text);
}

.khosh-rtl .khosh-dir-card-meta,
.khosh-rtl .khosh-dir-search { flex-direction: row-reverse; }


/* ------------------------------------------------- Directory card styles, ported from Blogano

   These rules are Blogano's, renamed rather than rewritten. They carry corrections made
   across many versions there that are not obvious from the outside: the image pulled out by
   exactly the card's own padding on all four sides so the two can never disagree; the ratio
   placed after the height rules because an image with a ratio has no height of its own to
   set; overlay losing its height floor when a ratio applies, since the card is the picture;
   cardover taking its height from the card rather than a ratio of the page width. Rewriting
   them from scratch is what produced a circular picture and a radius on the wrong corners.
*/

.khosh-dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--khsh-card-spacing, 20px); margin-bottom: var(--khsh-card-spacing, 20px); }
.khosh-dir-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: var(--khsh-border-card-size) solid var(--khsh-border-card-color);
	border-radius: var(--khsh-radius-cards);
	background: var(--khsh-color-card-bg);
	overflow: hidden;
	padding: var(--khsh-card-padding, 14px);
}
.khosh-dir-card > .khosh-card-img-wrap { margin: 10px calc(var(--khsh-card-padding, 14px) * -1); }
.khosh-card-img-wrap { display: block; position: relative; }
.khosh-dir-card-img { display: block; padding: 0 !important; margin: 0 !important; }
/* The image is pulled out by exactly the card's own padding, on every side, so it meets the
   edges however much padding the text is given. Sideways was missing: the image cleared the
   top but stayed inset left and right, which read as a border around the picture and got
   wider as the padding went up. All four read the same token, which is what keeps them in
   step — they can never disagree with the padding they are cancelling. */
.khosh-dir-card > .khosh-card-img-wrap:first-child {
	margin-top: calc(var(--khsh-card-padding, 14px) * -1);
	margin-left: calc(var(--khsh-card-padding, 14px) * -1);
	margin-right: calc(var(--khsh-card-padding, 14px) * -1);
}
.khosh-dir-card > .khosh-card-img-wrap:first-child:last-child { margin-bottom: calc(var(--khsh-card-padding, 14px) * -1); }
.khosh-dir-card-img img { width: 100%; height: var(--khsh-dir-card-image-height, 140px); object-fit: cover; display: block; padding: 0 !important; margin: 0 !important; }
.khosh-dir-card-full-image { border: none; padding: 0; }
.khosh-dir-card-full-image > .khosh-card-img-wrap,
.khosh-dir-card-full-image > .khosh-card-img-wrap:first-child { margin: 0 0 10px 0; }
.khosh-dir-card-full-image > .khosh-card-img-wrap:first-child:last-child { margin: 0 0 var(--khsh-card-spacing, 20px) 0; }
.khosh-dir-card-full-image .khosh-dir-card-img img {
	height: var(--khsh-dir-card-image-height, 260px);
	object-fit: cover;
	border-radius: var(--khsh-radius-cards);
	border: var(--khsh-border-card-size) solid var(--khsh-border-card-color);
}
/* One ratio, all three card styles. The shape itself comes from the variable rather than
   from the class, so adding a ratio to the settings needs no new CSS — and the three styles
   cannot end up supporting different sets of ratios, which is how Square came to work
   everywhere except standard cards.

   Placed after the height rules so it wins: an image with a ratio has no height of its own
   to set, which is why the ratio takes precedence over Card Image Height. */
.khosh-image-ratio .khosh-dir-card-img img,
.khosh-image-ratio .khosh-dir-card-full-image .khosh-dir-card-img img {
	height: auto;
	aspect-ratio: var(--khsh-dir-image-ratio, 1 / 1);
}
/* Overlay has no separate image to shape — the card is the picture — so the ratio goes on
   the card and its height floor comes off. */
.khosh-image-ratio .khosh-dir-card-overlay {
	min-height: 0;
	aspect-ratio: var(--khsh-dir-image-ratio, 1 / 1);
}
.khosh-dir-card h4, .khosh-dir-card a { color: inherit; text-decoration: none; }
.khosh-dir-card h4 { margin: 6px 0; font-size: 15px; font-family: var(--khsh-font-heading); font-weight: normal; }
.khosh-dir-card .khosh-dir-card-extra { margin-top: auto; padding-top: 10px; }
@media (max-width: 780px) {
	.khosh-dir-grid { grid-template-columns: repeat(var(--khsh-dir-columns-mobile, 1), 1fr) !important; gap: var(--khsh-card-spacing-mobile, 12px); margin-bottom: var(--khsh-card-spacing-mobile, 12px); }
	.khosh-directory .khosh-dir-grid { grid-template-columns: repeat(var(--khsh-dir-columns-mobile, 1), 1fr) !important; }
	.khosh-dir-card-full-image > .khosh-card-img-wrap,
	.khosh-dir-card-full-image > .khosh-card-img-wrap:first-child { margin: 0 0 10px 0; }
	.khosh-dir-card-full-image > .khosh-card-img-wrap:first-child:last-child { margin: 0 0 var(--khsh-card-spacing-mobile, 12px) 0; }
}

/* Overlay card style — image fills the whole card, text sits on top */
.khosh-dir-card-overlay {
	display: block;
	position: relative;
	padding: 0;
	/* Overlay has no separate <img> to size, so the card's own height carries the setting. */
	min-height: var(--khsh-dir-card-image-height, 260px);
}
.khosh-overlay-bg { position: absolute; inset: 0; display: block; z-index: 1; }
.khosh-overlay-bg img,
.khosh-overlay-bg .khosh-fallback-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.khosh-overlay-scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%); /* fallback if inline style is ever missing */
	pointer-events: none;
}
.khosh-overlay-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
	padding: 12px;
}
.khosh-overlay-top .khosh-dir-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; flex: 1 1 auto; min-width: 0; }
.khosh-overlay-top .khosh-dir-card-since { flex-shrink: 0; white-space: nowrap; }
.khosh-overlay-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	padding: var(--khsh-card-padding, 14px) var(--khsh-card-padding, 14px) 46px;
}
.khosh-overlay-bottom h4 { margin: 4px 0; font-weight: normal; }
.khosh-overlay-bottom p { margin: 0; opacity: .9; }
/* The footer sits on top of this block rather than after it, so the only thing keeping the
   description off the publisher avatar is this bottom padding. The featured overlay is
   taller and its description runs longer, so it needs more clearance than a card does. */
.khosh-dir-card-overlay .khosh-overlay-bottom { padding-bottom: 58px; }
.khosh-dir-card-overlay .khosh-dir-card-extra,
.khosh-dir-card-overlay .khosh-dir-card-extra {
	position: absolute;
	bottom: 10px;
	right: 10px;
	left: 10px;
	z-index: 4;
	margin-top: 0;
	padding-top: 0;
}


.khosh-cardover-panel {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 24px;
	width: 33%;
	max-height: calc(100% - 32px);
	overflow: auto;
	box-sizing: border-box;
	padding: var(--khsh-card-padding, 14px);
	background: var(--khsh-color-card-bg);
	border-radius: var(--khsh-radius-cards);
	/* The panel is the thing that floats: it sits over the photograph, so a little depth
	   separates it from what is behind it. On the card as a whole the same shadow did
	   nothing useful — that edge is against the page, not against an image. */
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

/* Field styling, Khosh's own — Blogano styles these inline per field instead. */
.khosh-dir-card-name {
	font-size: var(--khsh-dir-name-font-size);
	line-height: var(--khsh-dir-name-line-height);
	color: var(--khsh-dir-name-color);
	font-family: var(--khsh-font-heading);
	text-decoration: none;
	font-weight: 600;
}
.khosh-dir-card-role {
	font-size: var(--khsh-dir-role-font-size);
	line-height: var(--khsh-dir-role-line-height);
	color: var(--khsh-dir-role-color);
}
.khosh-dir-card-since {
	font-size: var(--khsh-dir-since-font-size);
	line-height: var(--khsh-dir-since-line-height);
	color: var(--khsh-dir-since-color);
}
.khosh-dir-card-bio {
	font-size: var(--khsh-dir-bio-font-size);
	line-height: var(--khsh-dir-bio-line-height);
	color: var(--khsh-dir-bio-color);
	margin: 4px 0 0;
}
.khosh-dir-card-meta { display: flex; justify-content: space-between; gap: 8px; }
.khosh-dir-card-extra { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.khosh-dir-card-extra li { display: flex; gap: 5px; font-size: 12px; }
.khosh-dir-extra-label { color: var(--khsh-color-muted); }
.khosh-dir-extra-value { font-weight: 600; }

/* The grid's column count is Khosh's setting; Blogano's rule hardcodes three. */
.khosh-dir-grid { grid-template-columns: repeat(var(--khsh-dir-columns), 1fr); }

/* ----------------------------------------------------------------- Sign in with Google */

/* Google's brand guidelines ask for their own mark on a white or dark button rather than a
   themed one, so this deliberately does not follow the button tokens the way every other
   control here does. Borders and radius still follow the form fields, so it sits with the
   rest of the screen. */
.khosh-google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 16px;
	background: #fff;
	color: #1f1f1f;
	border: var(--khsh-border-form-size) solid var(--khsh-border-form-color);
	border-radius: var(--khsh-radius-form-fields);
	font-family: var(--khsh-font-body);
	font-size: var(--khsh-btn-normal-font-size);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}
.khosh-google-btn:hover { background: #f7f8f8; color: #1f1f1f; }
.khosh-google-mark { flex: 0 0 18px; display: block; }

/* The divider between Google and the password form. The rules are drawn with a border on
   two flexed pseudo-elements rather than a background gradient, so they land on the exact
   vertical centre of the text whatever size the text is. */
.khosh-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	color: var(--khsh-color-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.khosh-or:before,
.khosh-or:after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--khsh-border-form-color);
}

/* [khosh_member_field field="avatar"] — the size is set on a wrapper so the same rules
   apply whether the member has a photo or falls back to the person icon. */
.khosh-avatar-inline { display: inline-block; vertical-align: middle; position: relative; overflow: hidden; line-height: 0; }
.khosh-avatar-inline > * { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The photo inside a button, when the style is showing both.
   It keeps its own radius rather than the button's: a picture cropped to a button's corners
   stops looking like a portrait, and the Account Photo Radius setting exists precisely so
   the two can differ. */
.khosh-account-links .khosh-btn-normal .khosh-avatar-wrap { flex: 0 0 auto; }
.khosh-account-links .khosh-btn-normal .khosh-avatar {
	border-radius: var(--khsh-radius-card-avatar, 50%);
}