/**
 * Si Artes — global theme layout & chrome
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--sa-surface-page);
	color: var(--sa-text-body);
	font-family: var(--sa-font-body);
	-webkit-font-smoothing: antialiased;
}

/* Never italicize display face — it's already calligraphic */
.sa-display,
.has-display-font-family,
.wp-block-site-title {
	font-style: normal !important;
}

/* ---- Sticky header (matches DS kit) ---- */
.sa-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--sa-border);
}

.sa-header .wp-block-group {
	align-items: center;
}

.sa-header .wp-block-navigation {
	gap: 1.75rem;
}

.sa-header .wp-block-navigation-item__content {
	padding: 6px 2px;
	position: relative;
}

.sa-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.sa-header .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--sa-purple-600);
}

.sa-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--sa-magenta-400);
	border-radius: 2px;
}

.sa-header__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.sa-header__brand img,
.sa-header .wp-block-site-logo img {
	border-radius: 10px;
}

.sa-header__actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.sa-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--sa-radius-pill);
	color: var(--sa-purple-600);
	text-decoration: none;
	transition: background var(--sa-dur-fast) var(--sa-ease-out);
}

.sa-cart-link:hover {
	background: var(--sa-pink-100);
	color: var(--sa-plum-800);
}

.sa-cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--sa-magenta-400);
	color: #fff;
	font-family: var(--sa-font-ui);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.sa-cart-count:empty,
.sa-cart-count[data-count="0"] {
	display: none;
}

/* ---- Footer ---- */
.sa-footer {
	background: var(--sa-plum-800);
	color: var(--sa-lilac-200);
	margin-top: 0;
}

.sa-footer a {
	color: var(--sa-orchid-300);
	text-decoration: none;
}

.sa-footer a:hover {
	color: var(--sa-white);
}

.sa-footer .wp-block-site-title,
.sa-footer .wp-block-site-title a {
	color: var(--sa-white) !important;
	font-family: var(--sa-font-display) !important;
	font-style: normal !important;
}

.sa-footer .wp-block-heading {
	color: var(--sa-white) !important;
	font-family: var(--sa-font-ui) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
}

.sa-footer__copy {
	font-family: var(--sa-font-ui);
	font-size: 12px;
	color: var(--sa-orchid-300);
	text-align: center;
}

/* ---- Content width helpers ---- */
.sa-container {
	max-width: var(--sa-width-content);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.sa-container--wide {
	max-width: var(--sa-width-wide);
}

.sa-prose {
	max-width: var(--sa-width-prose);
}

/* ---- Blog / archive ---- */
.sa-post-card {
	background: var(--sa-surface-card);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius-lg);
	box-shadow: var(--sa-shadow-sm);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition:
		box-shadow var(--sa-dur-med) var(--sa-ease-out),
		transform var(--sa-dur-med) var(--sa-ease-out);
}

.sa-post-card:hover {
	box-shadow: var(--sa-shadow-lg);
	transform: translateY(-3px);
}

.sa-post-card .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--sa-pink-100);
}

.sa-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sa-dur-slow) var(--sa-ease-out);
}

.sa-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.sa-post-card .wp-block-post-title {
	font-size: var(--sa-text-xl);
}

.sa-post-card .wp-block-post-date,
.sa-post-card .wp-block-post-terms {
	font-family: var(--sa-font-ui);
	font-size: var(--sa-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sa-magenta-400);
}

.sa-post-card .wp-block-post-excerpt {
	color: var(--sa-ink-soft);
	font-size: var(--sa-text-md);
}

/* Single post */
.sa-entry-header {
	text-align: center;
	padding-block: var(--sa-space-12) var(--sa-space-8);
}

.sa-entry-meta {
	font-family: var(--sa-font-ui);
	font-size: var(--sa-text-sm);
	color: var(--sa-mute-700);
}

.sa-entry-content {
	max-width: 720px;
	margin-inline: auto;
}

.sa-entry-content > * + * {
	margin-top: 1.25em;
}

.sa-entry-content img {
	border-radius: var(--sa-radius-md);
}

/* Comments */
.wp-block-comments,
.wp-block-post-comments-form {
	max-width: 720px;
	margin-inline: auto;
	font-family: var(--sa-font-body);
}

.wp-block-comment-author-name,
.wp-block-comment-date {
	font-family: var(--sa-font-ui);
}

.wp-block-post-comments-form .form-submit .wp-block-button__link,
.wp-block-post-comments-form input[type="submit"] {
	background: var(--sa-brand);
	color: var(--sa-white);
	border: none;
	border-radius: var(--sa-radius-pill);
	font-family: var(--sa-font-ui);
	font-weight: 600;
	padding: 12px 24px;
	cursor: pointer;
	box-shadow: var(--sa-shadow-brand);
}

/* Search */
.wp-block-search__button {
	background: var(--sa-brand) !important;
	color: var(--sa-white) !important;
	border: none !important;
	border-radius: var(--sa-radius-pill) !important;
	font-family: var(--sa-font-ui) !important;
	font-weight: 600 !important;
	padding: 0 20px !important;
	min-height: var(--sa-control-md);
}

/* Pagination */
.wp-block-query-pagination {
	font-family: var(--sa-font-ui);
	gap: 12px;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
	color: var(--sa-ink-soft);
	text-decoration: none;
	padding: 8px 14px;
	border-radius: var(--sa-radius-pill);
	border: 1px solid var(--sa-border);
	background: var(--sa-white);
}

.wp-block-query-pagination .current,
.wp-block-query-pagination a:hover {
	background: var(--sa-purple-600);
	border-color: var(--sa-purple-600);
	color: var(--sa-white);
}

/* 404 */
.sa-404 {
	text-align: center;
	padding: var(--sa-space-20) var(--sa-space-6);
	background: var(--sa-grad-wash);
}

.sa-404__mark {
	font-size: 48px;
	color: var(--sa-orchid-300);
}

.sa-404__title {
	font-family: var(--sa-font-display);
	font-style: normal;
	font-size: clamp(2.5rem, 6vw, 4rem);
	color: var(--sa-purple-600);
	margin: 12px 0;
}

/* About media placeholder */
.sa-portrait {
	aspect-ratio: 4 / 5;
	border-radius: var(--sa-radius-xl);
	background: radial-gradient(circle at 50% 35%, var(--sa-white), var(--sa-lilac-200));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--sa-shadow-md);
	color: var(--sa-purple-600);
	font-family: var(--sa-font-display);
	font-style: normal;
	font-size: clamp(2.5rem, 5vw, 4rem);
}

/* Contact card */
.sa-contact-card {
	background: var(--sa-white);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius-lg);
	box-shadow: var(--sa-shadow-sm);
	padding: var(--sa-space-8);
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 99999;
	padding: 12px 20px;
	background: var(--sa-purple-600);
	color: #fff;
	font-family: var(--sa-font-ui);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 8px 0;
}

.skip-link:focus {
	left: 0;
}

/* Block style: group as card */
.wp-block-group.is-style-sa-card {
	background: var(--sa-surface-card);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius-lg);
	box-shadow: var(--sa-shadow-sm);
	padding: var(--sa-space-6);
}

.wp-block-group.is-style-sa-wash {
	background: var(--sa-grad-wash);
}

/* Responsive */
@media (max-width: 781px) {
	.sa-hero__inner {
		padding: var(--sa-space-12) var(--sa-space-6) var(--sa-space-16);
	}

	.sa-stats {
		gap: 20px;
	}

	.sa-stat__value {
		font-size: 28px;
	}
}