/*!
 * @package   AkeebaEngage
 * @copyright Copyright (c)2020-2025 Nicholas K. Dionysopoulos / Akeeba Ltd
 * @license   GNU General Public License version 3, or later
 *
 * Indentation and look of the replies (0.6.21). Loaded on every page that lists comments, with or without the
 * "Load custom CSS" option. Bootstrap's "list-unstyled" removes the left padding of every list, so on templates that
 * do not indent nested lists themselves (e.g. Helix Ultimate) a reply looked like a top level comment.
 *
 * The component options "Indentation of replies" (reply_indent) and "Visual mark of replies" (reply_style) only choose
 * which of these classes the lists carry:
 *
 *   ul.akengage-reply-indent--none | small | medium | large      indentation of each nesting level
 *   ul.akengage-reply-style--line | soft | none                  mark of the replies (line = original look)
 *
 * To override from your template's custom CSS (e.g. media/templates/site/cassiopeia/css/user.css), set the variable
 * --akengage-reply-indent, which wins over the option:   :root { --akengage-reply-indent: 3rem; }
 * The soft background colour is --akengage-reply-bg.
 */
ul.akengage-comment-list {
	--akengage-reply-indent-size: 1.25rem;
}

ul.akengage-comment-list.akengage-reply-indent--none {
	--akengage-reply-indent-size: 0;
}

ul.akengage-comment-list.akengage-reply-indent--small {
	--akengage-reply-indent-size: .75rem;
}

ul.akengage-comment-list.akengage-reply-indent--medium {
	--akengage-reply-indent-size: 1.25rem;
}

ul.akengage-comment-list.akengage-reply-indent--large {
	--akengage-reply-indent-size: 2.25rem;
}

/* Only nested lists (replies) are indented. */
section.akengage-outer-container ul.akengage-comment-list ul.akengage-comment-list {
	padding-left: var(--akengage-reply-indent, var(--akengage-reply-indent-size, 1.25rem));
}

/* Replies: soft background instead of the side line (published comments only; unpublished and spam keep their line). */
section.akengage-outer-container ul.akengage-comment-list ul.akengage-reply-style--soft article.akengage-comment--primary {
	background-color: var(--akengage-reply-bg, rgba(127, 127, 127, .09));
	border-left-width: 0 !important;
	padding-top: .25rem;
	padding-right: .5rem;
}

/* Replies: no mark at all. */
section.akengage-outer-container ul.akengage-comment-list ul.akengage-reply-style--none article.akengage-comment--primary {
	border-left-width: 0 !important;
}

@media (max-width: 575.98px) {
	ul.akengage-comment-list.akengage-reply-indent--small {
		--akengage-reply-indent-size: .5rem;
	}

	ul.akengage-comment-list.akengage-reply-indent--medium {
		--akengage-reply-indent-size: .75rem;
	}

	ul.akengage-comment-list.akengage-reply-indent--large {
		--akengage-reply-indent-size: 1.25rem;
	}
}

/*
 * Avatar on narrow screens (0.6.28, component option mobile_avatar). The avatar container keeps Bootstrap's original
 * "d-none d-sm-block" (hidden below 576 px); the option only adds a class to the outer container, and these rules
 * override it when needed. Without the class (classic + "auto") nothing here applies and the page is exactly the original.
 *
 *   section.akengage-mobile-avatar--show   avatar visible on mobile, reduced to --eg-avatar-movil (default 40px), with the
 *                                          name, icons and date on its right and the moderation buttons below.
 *                                          Also added by the server for "auto" with the modern, minimal and dark themes.
 *   section.akengage-mobile-avatar--hide   avatar hidden on mobile with any theme.
 *
 * To change the size from your template's custom CSS:   :root { --eg-avatar-movil: 44px; }
 * Only the picture that was already in the page is shown: no extra image is requested and Gravatar is not contacted.
 */
@media (max-width: 575.98px) {
	section.akengage-outer-container.akengage-mobile-avatar--show footer.akengage-comment-properties {
		align-items: flex-start !important;
	}

	section.akengage-outer-container.akengage-mobile-avatar--show footer.akengage-comment-properties .akengage-commenter-avatar-container {
		display: block !important;
		flex: 0 0 var(--eg-avatar-movil, 40px) !important;
		width: var(--eg-avatar-movil, 40px) !important;
		max-width: var(--eg-avatar-movil, 40px) !important;
	}

	section.akengage-outer-container.akengage-mobile-avatar--show footer.akengage-comment-properties .akengage-commenter-avatar {
		display: block;
		width: 100% !important;
		height: auto !important;
		max-width: none !important;
		max-height: none !important;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	section.akengage-outer-container.akengage-mobile-avatar--show footer.akengage-comment-properties .akengange-comment-head {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0;
	}

	/* Moderation buttons under the date, on their own line */
	section.akengage-outer-container.akengage-mobile-avatar--show footer.akengage-comment-properties .akengage-comment-actions {
		flex: 1 0 100%;
	}

	section.akengage-outer-container:is(.akengage-mobile-avatar--show, .akengage-mobile-avatar--hide) footer.akengage-comment-properties .akengage-comment-actions {
		flex-wrap: wrap;
	}

	section.akengage-outer-container.akengage-mobile-avatar--hide footer.akengage-comment-properties .akengage-commenter-avatar-container {
		display: none !important;
	}

	/* Names and e-mails without spaces break instead of pushing the header out of the screen */
	section.akengage-outer-container:is(.akengage-mobile-avatar--show, .akengage-mobile-avatar--hide) footer.akengage-comment-properties .akengange-commenter-name [itemprop="name"],
	section.akengage-outer-container:is(.akengage-mobile-avatar--show, .akengage-mobile-avatar--hide) footer.akengage-comment-properties .akengange-commenter-name > div {
		min-width: 0;
		max-width: 100%;
		overflow-wrap: anywhere;
	}
}