/**
 * Cretamel base theme styles.
 *
 * Deliberately small. Elementor's Site Settings kit controls colours and fonts
 * on Elementor pages. These rules only shape the parts Elementor does not
 * build: the blog, search results, comments and the 404 page.
 */

:root {
	--cretamel-content-width: 800px;
	--cretamel-wide-width: 1140px;
	--cretamel-gap: 24px;
	--cretamel-radius: 8px;
	--cretamel-border: #e4e6eb;
	--cretamel-muted: #6b7280;
}

/* Accessible skip link ---------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	background-color: #fff;
	border-radius: var(--cretamel-radius);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #111;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 12px 20px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
}

/* Layout ------------------------------------------------------------------ */

.site-main {
	margin-inline: auto;
	max-width: var(--cretamel-content-width);
	padding-block: 48px;
	padding-inline: var(--cretamel-gap);
	width: 100%;
}

.site-main > .page-header {
	margin-bottom: 32px;
}

.site-main .entry-title {
	margin-block: 0 8px;
}

.entry-meta {
	color: var(--cretamel-muted);
	font-size: 0.875rem;
	margin-bottom: 12px;
}

/* Elementor's own page templates control their own width. */
.elementor-page .site-main,
.elementor-template-full-width .site-main,
.elementor-template-canvas .site-main {
	max-width: none;
	padding: 0;
}

/* Wide and full alignment for block content. */
.page-content > .alignwide {
	margin-inline: auto;
	max-width: var(--cretamel-wide-width);
}

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

/* Archive and search cards ------------------------------------------------ */

.post-card {
	border-bottom: 1px solid var(--cretamel-border);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.post-card:last-child {
	border-bottom: 0;
}

.post-card-thumb {
	display: block;
	margin-bottom: 16px;
}

.post-card-thumb img {
	border-radius: var(--cretamel-radius);
	display: block;
	height: auto;
	width: 100%;
}

.post-tags {
	color: var(--cretamel-muted);
	font-size: 0.875rem;
	margin-top: 32px;
}

/* Pagination -------------------------------------------------------------- */

.pagination {
	border-top: 1px solid var(--cretamel-border);
	display: flex;
	gap: var(--cretamel-gap);
	justify-content: space-between;
	margin-top: 40px;
	padding-top: 24px;
}

.pagination .nav-next {
	margin-inline-start: auto;
	text-align: end;
}

/* Comments ---------------------------------------------------------------- */

.comments-area {
	border-top: 1px solid var(--cretamel-border);
	margin-top: 48px;
	padding-top: 32px;
}

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

.comment-list .children {
	list-style: none;
	margin-inline-start: var(--cretamel-gap);
	padding: 0;
}

.comment-list li {
	margin-bottom: 24px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	border: 1px solid var(--cretamel-border);
	border-radius: var(--cretamel-radius);
	max-width: 100%;
	padding: 10px 12px;
	width: 100%;
}

/* Media ------------------------------------------------------------------- */

img,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

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

.wp-caption-text,
.wp-block-image figcaption {
	color: var(--cretamel-muted);
	font-size: 0.875rem;
	text-align: center;
}

.alignleft {
	float: left;
	margin-inline-end: var(--cretamel-gap);
}

.alignright {
	float: right;
	margin-inline-start: var(--cretamel-gap);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}