/**
 * iSolar Development — стилі ядра WordPress.
 * Класи, які генерує редактор і шаблонні теги: вирівнювання, підписи,
 * галереї, коментарі, вбудовування.
 */

/* ---------------------------------------------------------------
 * Вирівнювання
 * ------------------------------------------------------------- */

.alignleft {
	float: left;
	margin: 0 var(--space-4) var(--space-3) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--space-3) var(--space-4);
}

.aligncenter {
	display: block;
	margin-inline: auto;
	margin-bottom: var(--space-3);
}

.alignnone {
	margin-bottom: var(--space-3);
}

/* .alignwide виходить за поля контейнера, .alignfull — на всю ширину вікна. */
.entry-content > .alignwide {
	width: auto;
	max-width: none;
	margin-inline: calc(-1 * var(--container-pad) / 2);
}

.entry-content > .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.clearfix::after,
.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

/* ---------------------------------------------------------------
 * Підписи та галереї
 * ------------------------------------------------------------- */

.wp-caption {
	max-width: 100%;
	margin-bottom: var(--space-4);
}

.wp-caption img {
	width: 100%;
}

.wp-caption-text,
.wp-element-caption,
figcaption {
	margin-top: var(--space-1);
	color: var(--text-muted);
	font-size: var(--fs-small);
	line-height: 1.5;
}

.gallery {
	display: grid;
	gap: var(--space-2);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin-bottom: var(--space-4);
}

.gallery-item {
	margin: 0;
}

.gallery-icon img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* ---------------------------------------------------------------
 * Sticky / статуси записів
 * ------------------------------------------------------------- */

.sticky .entry-title::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: var(--space-1);
	background-color: var(--color-accent);
	vertical-align: middle;
}

.bypostauthor > .comment-body {
	border-left: 3px solid var(--color-accent);
	padding-left: var(--space-3);
}

/* ---------------------------------------------------------------
 * Запис
 * ------------------------------------------------------------- */

.entry {
	padding-bottom: var(--space-6);
	margin-bottom: var(--space-6);
	border-bottom: var(--border-width) solid var(--border-color);
}

.entry:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

.entry-title {
	margin-bottom: var(--space-2);
}

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

.entry-title a:hover {
	color: var(--color-accent-ink);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
	color: var(--text-muted);
	font-size: var(--fs-small);
}

.entry-thumbnail {
	margin-bottom: var(--space-4);
}

.entry-thumbnail img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.entry-content > * + * {
	margin-top: var(--space-4);
}

.entry-content > h2,
.entry-content > h3 {
	margin-top: var(--space-6);
}

/* Читабельна довжина рядка в довгих текстах — 76 символів.
 * Медіа й вирівняні блоки під обмеження не потрапляють. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
	max-width: 76ch;
}

.entry-footer {
	margin-top: var(--space-4);
	color: var(--text-muted);
	font-size: var(--fs-small);
}


/* ---------------------------------------------------------------
 * Коментарі
 * ------------------------------------------------------------- */

.comments-area {
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: var(--border-width) solid var(--border-color);
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-6);
}

.comment-list ol.children {
	list-style: none;
	padding-left: var(--space-5);
}

.comment-body {
	padding-block: var(--space-4);
	border-bottom: var(--border-width) solid var(--border-color);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
}

.comment-author img {
	border-radius: var(--radius);
}

.comment-metadata {
	margin-bottom: var(--space-2);
	color: var(--text-muted);
	font-size: var(--fs-overline);
}

.comment-reply-link {
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
}

.comment-respond {
	margin-top: var(--space-5);
}

.comment-form {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.comment-form-comment,
.comment-form-cookies-consent,
.form-submit {
	grid-column: 1 / -1;
}

.comment-form input[type="submit"] {
	width: auto;
	padding: var(--space-3) var(--space-5);
	background-color: var(--color-primary);
	border: var(--border-width) solid var(--color-primary);
	color: var(--c-white);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	cursor: pointer;
}

.comment-form input[type="submit"]:hover {
	background-color: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

/* ---------------------------------------------------------------
 * Віджети
 * ------------------------------------------------------------- */

.widget {
	margin-bottom: var(--space-6);
}

.widget-title {
	margin-bottom: var(--space-3);
	font-size: var(--fs-h3);
}

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

.widget li {
	padding-block: var(--space-1);
	border-bottom: var(--border-width) solid var(--border-color);
}

.widget a {
	text-decoration: none;
}

/* ---------------------------------------------------------------
 * Вбудовування
 * ------------------------------------------------------------- */

.wp-block-embed__wrapper iframe,
.wp-embed-responsive iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* ---------------------------------------------------------------
 * Палітра редактора → відповідність токенам
 * ------------------------------------------------------------- */

.has-green-700-color { color: var(--c-green-700); }
.has-green-800-color { color: var(--c-green-800); }
.has-green-900-color { color: var(--c-green-900); }
.has-gold-500-color { color: var(--c-gold-500); }
.has-gold-700-color { color: var(--c-gold-700); }
.has-cream-100-color { color: var(--c-cream-100); }
.has-cream-200-color { color: var(--c-cream-200); }
.has-white-color { color: var(--c-white); }

.has-green-700-background-color { background-color: var(--c-green-700); }
.has-green-800-background-color { background-color: var(--c-green-800); }
.has-green-900-background-color { background-color: var(--c-green-900); }
.has-gold-500-background-color { background-color: var(--c-gold-500); }
.has-gold-700-background-color { background-color: var(--c-gold-700); }
.has-cream-100-background-color { background-color: var(--c-cream-100); }
.has-cream-200-background-color { background-color: var(--c-cream-200); }
.has-white-background-color { background-color: var(--c-white); }