/* =============================================================================
   BLOG — post cards, archive filters + pagination, calculators, article
   -----------------------------------------------------------------------------
   The layouts are Elementor templates (Post Card, Blog Archive, Blog Results,
   Single Post — inc/features/blog.php). This file styles what Elementor leaves
   to the theme: the card's image box and labels, the filters / topic select /
   search, pagination, the calculators' cards, the article's contents list and
   the block-editor content of a post (.peptide-prose). Tokens only.
   ============================================================================= */

/* ---- Post Card (Loop Item): the whole card is one link ------------------------- */

a.peptide-post-card,
a.peptide-post-card:hover {
	color: inherit;
	text-decoration: none;
}

.peptide-post-card__media {
	height: 235px;
	overflow: hidden;
	border-radius: var(--radius-card, 12px);
}

.peptide-post-card__media .elementor-widget-image {
	width: 100%;
	height: 100%;
}

.peptide-post-card__media .elementor-widget-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.peptide-post-card:hover .peptide-post-card__media .elementor-widget-image img {
	transform: scale(1.03);
}

.peptide-post-card .peptide-post-card__meta > .elementor-widget {
	width: auto;
}

.peptide-post-card__category .elementor-heading-title {
	display: block;
	padding: 4px 10px;
	border: 1px solid var(--color-border);
	border-radius: 20px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
}

.peptide-post-card :is(.peptide-post-card__topic, .peptide-post-card__minutes) .elementor-heading-title {
	font-size: 11px;
	line-height: 1.5;
}

.peptide-post-card .elementor-widget.peptide-post-card__minutes {
	margin-left: -5px;
}

.peptide-post-card .elementor-widget.peptide-post-card__title {
	margin-bottom: 12px;
}

.peptide-post-card .elementor-widget.peptide-post-card__link {
	margin-top: 14px;
}

.peptide-post-card__link .elementor-heading-title {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
}

.peptide-post-card:hover .peptide-post-card__link .elementor-heading-title {
	color: var(--color-primary);
}

/* ---- Pill links (blog shortcuts) -------------------------------------------------- */

.elementor-widget.peptide-pill {
	width: auto;
}

.elementor-widget.peptide-pill .elementor-button {
	padding: 10px 18px;
	border: 1px solid var(--color-border);
	border-radius: 30px;
	background: transparent;
	color: var(--color-heading);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.5;
}

.elementor-widget.peptide-pill .elementor-button:hover,
.elementor-widget.peptide-pill .elementor-button:focus-visible {
	border-color: var(--color-primary);
	background: transparent;
	color: var(--color-primary);
}

/* ---- Archive: intro, filters, topic, search ---------------------------------------- */

#blog-intro #blog-lead,
#post-intro #post-excerpt {
	max-width: 620px;
}

#blog-lead p {
	margin: 0;
}

#blog-controls {
	margin-bottom: 23px;
	padding-bottom: 25px;
	border-bottom: 1px solid var(--color-border);
}

#blog-controls > .elementor-widget,
#blog-tools > .e-con {
	width: auto;
}

#blog-filter .e-filter,
#blog-topic .e-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 6px;
}

:is(#blog-filter, #blog-topic) .e-filter-item {
	min-height: 0;
	padding: 12px 18px;
	border: 1px solid var(--color-border);
	border-radius: 30px;
	background: transparent;
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

:is(#blog-filter, #blog-topic) .e-filter-item:hover {
	border-color: var(--color-primary);
}

:is(#blog-filter, #blog-topic) .e-filter-item[aria-pressed="true"] {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-on-dark);
}

/* "All" first (Elementor prints it last). */
:is(#blog-filter, #blog-topic) .e-filter-item[data-filter="__all"] {
	order: -1;
}

/* Topic: assets/js/blog.js offers the tag filter as a select. */
#blog-topic.has-select .e-filter {
	display: none;
}

#blog-topic select,
#blog-search .e-search-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-input, 6px);
	box-shadow: none;
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: normal;
}

#blog-topic select {
	min-width: 180px;
}

#blog-search input.e-search-input {
	min-width: 270px;
	height: 48px;
	min-height: 0;
	padding: 10px 12px;
}

#blog-search .e-search,
#blog-search .e-search-form,
#blog-search .e-search-input-wrapper {
	display: block;
	margin: 0;
}

/* The field is exactly as tall as the select beside it (the widget keeps room for its results). */
#blog-search {
	height: 48px;
}

#blog-search .e-search-input-wrapper > svg,
#blog-search .e-search-results-container:empty,
#blog-search .e-search-label {
	display: none;
}

#blog-summary {
	margin-bottom: 28px;
}

#blog-summary > .elementor-widget {
	width: auto;
}

/* ---- Archive: pagination ----------------------------------------------------- */

#blog-grid .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 45px;
	padding-top: 28px;
	border-top: 1px solid var(--color-border);
}

#blog-grid .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-input, 6px);
	color: var(--color-heading);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}

#blog-grid .elementor-pagination a.page-numbers:hover {
	border-color: var(--color-primary);
}

#blog-grid .elementor-pagination .page-numbers.current {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-on-dark);
}

#blog-grid .elementor-pagination span.page-numbers:not(.current):not(.dots) {
	opacity: 0.4;
}

/* ---- Health tools (calculators on the blog) ---------------------------------------- */

#calculators #calculators-intro {
	width: auto;
	max-width: 360px;
}

#calculators-intro p,
.peptide-tool .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.peptide-tool {
	border-radius: var(--radius-card, 12px);
}

.peptide-tool .elementor-widget-shortcode,
.peptide-tool .elementor-shortcode {
	width: 100%;
}

.peptide-tool .peptide-tool__reference {
	margin-top: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--color-border);
}

.peptide-tool :is(.peptide-tool__note, .peptide-tool__reference) a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.peptide-tool table {
	width: 100%;
	margin: 12px 0;
	border-collapse: collapse;
	font-size: inherit;
}

.peptide-tool :is(th, td) {
	padding: 10px 6px;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	background: none;
	line-height: inherit;
	text-align: left;
	vertical-align: top;
}

.peptide-tool table tbody > tr:nth-child(odd) > :is(td, th) {
	background: none;
}

/* ---- Single post: contents list beside the article -------------------------------- */

#post-kicker > .elementor-widget {
	width: auto;
}

#post-aside {
	position: sticky;
	top: 120px;
}

#post-aside > .elementor-widget.elementor-widget-heading {
	margin-bottom: 14px;
}

/* Table of Contents widget as a plain list of links. */
#post-toc {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

#post-toc .elementor-toc__header,
#post-toc .elementor-toc__list-item-text-wrapper > :not(a) {
	display: none;
}

#post-toc .elementor-toc__body {
	max-height: none;
	padding: 0;
	overflow: visible;
}

#post-toc .elementor-toc__list-wrapper,
#post-toc .elementor-toc__list-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

#post-toc .elementor-toc__list-item-text-wrapper::before {
	content: none;
}

#post-toc .elementor-toc__list-item-text,
#post-aside #post-back .elementor-button {
	display: block;
	padding: 9px 0;
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
}

#post-toc .elementor-toc__list-item-text:hover,
#post-toc .elementor-toc__list-item-text.elementor-item-active,
#post-aside #post-back .elementor-button:hover {
	color: var(--color-primary);
}

#post-aside #post-back {
	text-align: left;
}

#post-related {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--color-border);
}

#post-related > .elementor-widget.elementor-widget-heading {
	margin-bottom: 12px;
}

#post-related-grid .elementor-loop-container {
	display: block;
}

.peptide-post-related .elementor-heading-title a {
	display: block;
	padding: 13px 0;
	border-bottom: 1px solid var(--color-border);
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.peptide-post-related .elementor-heading-title a:hover {
	color: var(--color-primary);
}

@media (max-width: 767px) {
	#post-aside {
		position: static;
		padding-bottom: 20px;
		border-bottom: 1px solid var(--color-border);
	}

	#post-toc .elementor-toc__list-item,
	#post-toc .elementor-toc__list-item-text-wrapper {
		display: inline;
	}

	#post-toc .elementor-toc__list-item-text,
	#post-aside #post-back .elementor-button {
		display: inline-block;
		margin-right: 20px;
	}

	#blog-topic select,
	#blog-search .e-search-input {
		min-width: 0;
	}
}

/* ---- Article text (block editor content) -------------------------------------- */
/* The content sits directly in the widget, or in Elementor's inner wrapper on older markup. */

.peptide-prose {
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.8;
}

:is(.peptide-prose, .peptide-prose > .elementor-widget-container) > * {
	margin-top: 0;
	margin-bottom: 20px;
}

:is(.peptide-prose, .peptide-prose > .elementor-widget-container) > :last-child {
	margin-bottom: 0;
}

.peptide-prose > .elementor-widget-container {
	margin: 0;
}

.peptide-prose h2,
.peptide-prose h3,
.peptide-prose h4 {
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	line-height: 1.2;
}

:is(.peptide-prose, .peptide-prose > .elementor-widget-container) > h2 {
	margin-top: 44px;
	margin-bottom: 16px;
	font-size: var(--text-h3);
}

:is(.peptide-prose, .peptide-prose > .elementor-widget-container) > h3 {
	margin-top: 36px;
	margin-bottom: 12px;
	font-size: var(--text-h4);
}

:is(.peptide-prose, .peptide-prose > .elementor-widget-container) > h4 {
	margin-top: 28px;
	margin-bottom: 10px;
	font-size: var(--text-h5);
}

:is(.peptide-prose, .peptide-prose > .elementor-widget-container) > :first-child {
	margin-top: 0;
}

.peptide-prose p.is-style-lead,
.peptide-prose p.has-large-font-size {
	font-size: var(--text-lg);
	line-height: 1.7;
}

.peptide-prose a:not(.wp-block-button__link) {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.peptide-prose a:not(.wp-block-button__link):hover {
	color: var(--color-primary-hover);
}

.peptide-prose ul,
.peptide-prose ol {
	padding-left: 24px;
}

.peptide-prose li {
	margin-bottom: 10px;
	padding-left: 4px;
}

.peptide-prose li::marker {
	color: var(--color-primary);
}

.peptide-prose blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 4px 0 4px 24px;
	border-left: 2px solid var(--color-accent);
	color: var(--color-heading);
	font-size: var(--text-lg);
	line-height: 1.6;
}

.peptide-prose blockquote p {
	margin: 0 0 12px;
}

.peptide-prose blockquote p:last-of-type {
	margin-bottom: 0;
}

.peptide-prose blockquote cite {
	display: block;
	margin-top: 12px;
	color: var(--color-muted);
	font-size: var(--text-sm);
	font-style: normal;
}

.peptide-prose figure {
	margin-left: 0;
	margin-right: 0;
}

:is(.peptide-prose, .peptide-prose > .elementor-widget-container) > figure {
	margin-top: 36px;
	margin-bottom: 36px;
}

.peptide-prose figure img,
:is(.peptide-prose, .peptide-prose > .elementor-widget-container) > p > img {
	height: auto;
	border-radius: var(--radius-card, 12px);
}

.peptide-prose figcaption {
	margin-top: 10px;
	color: var(--color-muted);
	font-size: var(--text-sm);
	line-height: 1.5;
	text-align: left;
}

.peptide-prose hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--color-border);
}

.peptide-prose .wp-block-table {
	overflow-x: auto;
}

.peptide-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
	line-height: 1.5;
}

.peptide-prose th,
.peptide-prose td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	background: transparent;
	text-align: left;
	vertical-align: top;
}

.peptide-prose th {
	color: var(--color-heading);
	font-weight: 600;
}

.peptide-prose code {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--color-surface-alt);
	font-size: 0.9em;
}

.peptide-prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.peptide-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--button-padding, 14px 26px);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-button, 6px);
	background: var(--color-primary);
	color: var(--color-on-dark);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.peptide-prose .wp-block-button__link:hover {
	border-color: var(--color-primary-hover);
	background: var(--color-primary-hover);
	color: var(--color-on-dark);
}

.peptide-prose .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--color-primary);
}

@media (max-width: 767px) {
	:is(.peptide-prose, .peptide-prose > .elementor-widget-container) > h2 {
		margin-top: 36px;
	}

	#blog-grid .elementor-pagination {
		margin-top: 48px;
	}
}