/**
 * Components layer: entries, pagination, comments, forms, widgets,
 * social links, plus light WooCommerce and AI Engine compatibility.
 */

@layer components {
	/* ---- Entries (archives, index, search) ---- */
	.entry--summary {
		border-block-end: 1px solid var(--wp--preset--color--border);
		display: grid;
		gap: var(--wp--preset--spacing--40);
		margin-block-end: var(--wp--preset--spacing--60);
		padding-block-end: var(--wp--preset--spacing--60);
	}

	.entry--summary:last-of-type {
		border-block-end: 0;
	}

	.entry__title {
		margin-block-end: 0.25em;
	}

	.entry__title a {
		color: inherit;
		text-decoration: none;
	}

	.entry__title a:hover {
		color: var(--wp--preset--color--primary);
		text-decoration: underline;
	}

	.entry-meta {
		color: var(--wp--preset--color--muted);
		display: flex;
		font-size: var(--wp--preset--font-size--small);
		gap: 0.5em;
		margin: 0;
	}

	.entry__thumbnail img {
		aspect-ratio: 16 / 9;
		inline-size: 100%;
		object-fit: cover;
	}

	/* Single posts/pages: readable measure for prose, wide/full for blocks. */
	.entry__header--contained,
	.entry--single .entry__content > *:not(.alignwide):not(.alignfull),
	.entry--page .entry__content > *:not(.alignwide):not(.alignfull) {
		margin-inline: auto;
		max-inline-size: var(--wp--style--global--content-size, 48rem);
	}

	/* Pages and single posts sit in a full-bleed main (layout.css), so
	   contained children supply their own gutters and wide blocks their
	   own cap. */
	.entry--page .entry__content > *:not(.alignwide):not(.alignfull),
	.entry--page .entry__header--contained,
	.entry--page .entry__footer,
	.entry--single .entry__content > *:not(.alignwide):not(.alignfull),
	.entry--single .entry__header--contained,
	.entry--single .entry__footer,
	.entry--single .entry__meta-bar,
	.single .post-navigation,
	.single .comments-area {
		padding-inline: var(--wp--preset--spacing--40);
	}

	.entry--page .entry__header--contained,
	.entry--single .entry__header--contained {
		padding-block-start: var(--wp--preset--spacing--60);
	}

	.entry--page .entry__content > .alignwide,
	.entry--single .entry__content > .alignwide {
		margin-inline: auto;
		max-inline-size: var(--wp--style--global--wide-size, 75rem);
	}

	.entry--page .entry__content > *:first-child,
	.entry--single .entry__content > *:first-child {
		margin-block-start: 0;
	}

	.single .post-navigation,
	.single .comments-area,
	.single .site-main > .alignwide {
		margin-inline: auto;
		max-inline-size: var(--wp--style--global--content-size, 48rem);
	}

	.single .site-main > .alignwide {
		max-inline-size: var(--wp--style--global--wide-size, 75rem);
	}

	.single .post-navigation {
		padding-block: var(--wp--preset--spacing--50);
	}

	.entry__featured-image {
		margin: 0 auto var(--wp--preset--spacing--60);
		max-inline-size: var(--wp--style--global--wide-size, 75rem);
	}

	.entry__tags {
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
	}

	/* ---- Pagination & post navigation ---- */
	.pagination .nav-links,
	.post-navigation .nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--40);
		justify-content: center;
		padding-block: var(--wp--preset--spacing--50);
	}

	.post-navigation .nav-links {
		justify-content: space-between;
	}

	.pagination .page-numbers {
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 0.25rem;
		display: inline-block;
		min-inline-size: 2.5rem;
		padding: 0.4rem 0.75rem;
		text-align: center;
		text-decoration: none;
	}

	.pagination .page-numbers.current {
		background: var(--wp--preset--color--primary);
		border-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base);
	}

	/* ---- Search form ---- */
	.search-form {
		display: flex;
		gap: 0.5rem;
		margin-block-end: var(--wp--preset--spacing--50);
		max-inline-size: 28rem;
	}

	.search-form__submit {
		align-items: center;
		background: var(--wp--preset--color--primary);
		border: 0;
		border-radius: 0.25rem;
		color: var(--wp--preset--color--base);
		cursor: pointer;
		display: inline-flex;
		justify-content: center;
		line-height: 0;
		padding: 0.6rem 0.9rem;
	}

	/* Inline SVGs ride the text baseline by default — block display
	   keeps icons truly centered inside their flex buttons. */
	.search-form__submit .icon {
		display: block;
	}

	.search-form__submit:hover {
		background: var(--wp--preset--color--contrast);
	}

	/* ---- Comments ---- */
	.comments-area {
		border-block-start: 1px solid var(--wp--preset--color--border);
		margin-block-start: var(--wp--preset--spacing--70);
		margin-inline: auto;
		max-inline-size: var(--wp--style--global--content-size, 48rem);
		padding-block-start: var(--wp--preset--spacing--60);
	}

	.comment-list,
	.comment-list .children {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.comment-list .children {
		padding-inline-start: var(--wp--preset--spacing--60);
	}

	.comment-body {
		border-block-end: 1px solid var(--wp--preset--color--border);
		padding-block: var(--wp--preset--spacing--50);
	}

	.comment-meta {
		align-items: center;
		display: flex;
		gap: 0.75rem;
	}

	.comment-metadata {
		font-size: var(--wp--preset--font-size--small);
	}

	.comment-form p {
		margin-block-end: var(--wp--preset--spacing--40);
	}

	.comment-form label {
		display: block;
		font-weight: 600;
		margin-block-end: 0.25rem;
	}

	.comment-form .submit {
		background: var(--wp--preset--color--primary);
		border: 0;
		border-radius: 0.25rem;
		color: var(--wp--preset--color--base);
		cursor: pointer;
		font-weight: 600;
		padding: 0.75rem 1.5rem;
	}

	.comment-form .submit:hover {
		background: var(--wp--preset--color--contrast);
	}

	/* ---- Widgets ---- */
	.widget {
		margin-block-end: var(--wp--preset--spacing--50);
	}

	.widget-title {
		font-size: var(--wp--preset--font-size--medium);
		margin-block-end: 0.75em;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.widget ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.widget li + li {
		margin-block-start: 0.5rem;
	}

	/* ---- Social links (settings-driven) ---- */
	.social-links {
		display: flex;
		gap: 0.9rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.social-links a {
		align-items: center;
		color: var(--wp--preset--color--muted);
		display: inline-flex;
		line-height: 0;
		padding: 0.35rem;
	}

	.social-links a:hover {
		color: var(--wp--preset--color--primary);
	}

	/* ---- WooCommerce: enough polish that shops work untouched ---- */
	.woocommerce ul.products {
		display: grid;
		gap: var(--wp--preset--spacing--50);
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		background: var(--wp--preset--color--primary);
		border: 0;
		border-radius: 0.25rem;
		color: var(--wp--preset--color--base);
		font-weight: 600;
		padding: 0.6rem 1.1rem;
	}

	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.woocommerce input.button:hover {
		background: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
	}

	/* ---- AI Engine: chatbot inherits theme tokens ---- */
	.mwai-chatbot-container {
		--mwai-backgroundPrimaryColor: var(--wp--preset--color--base);
		--mwai-fontColor: var(--wp--preset--color--contrast);
		--mwai-primaryColor: var(--wp--preset--color--primary);
		font-family: var(--wp--preset--font-family--sans);
	}
}