/* =========================================
   Design System — CSS Variables
   ========================================= */
:root {
	--color-bg-gradient: linear-gradient(to bottom right, #fffbf0, #fef3e2, #fce7f3, #ede9fe);
	--color-surface:        #ffffff;
	--color-surface-alt:    #fef9ee;
	--color-text:           #1a1a2e;
	--color-heading:        #3d3d5c;
	--color-muted:          #8888aa;
	--color-accent-orange:  #ff6b35;
	--color-accent-purple:  #a855f7;
	--btn-gradient:         linear-gradient(135deg, #ff6b35, #a855f7);
	--card-shadow:          0 4px 16px rgba(26, 26, 46, 0.06);
	--card-radius:          16px;
	--btn-radius:           999px;
	--font-primary:         'Nunito', sans-serif;
}

/* =========================================
   Global Base
   ========================================= */
html { scroll-behavior: smooth; }

@media screen and (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: var(--font-primary);
	color: var(--color-text);
	background: var(--color-bg-gradient);
	background-attachment: fixed;
}

/* =========================================
   Typography
   ========================================= */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	font-weight: 800;
	color: var(--color-heading);
}

input, textarea, select, button {
	font-family: var(--font-primary);
}

/* =========================================
   Links
   ========================================= */
a {
	color: var(--color-text);
	text-decoration: none;
}

a:hover {
	color: var(--color-accent-orange);
}

/* =========================================
   Buttons
   ========================================= */
.wp-block-button__link,
.wp-element-button,
button:not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close):not(.wp-block-search__button) {
	background: var(--btn-gradient) !important;
	background-color: transparent !important;
	color: #ffffff !important;
	font-family: var(--font-primary);
	font-weight: 700;
	border: none !important;
	border-radius: var(--btn-radius) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button:not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close):not(.wp-block-search__button):hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(168, 85, 247, 0.3) !important;
	color: #ffffff !important;
}

/* =========================================
   Post cards
   ========================================= */
.wp-block-post-template li,
.wp-block-post {
	background-color: var(--color-surface);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-post-template li:hover,
.wp-block-post:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(26, 26, 46, 0.1);
}

.wp-block-post-template li .wp-block-post-title a,
.wp-block-post .wp-block-post-title a {
	color: var(--color-heading);
	text-decoration: none;
}

.wp-block-post-template li .wp-block-post-title a:hover,
.wp-block-post .wp-block-post-title a:hover {
	color: var(--color-accent-orange);
}

.wp-block-post-template li .wp-block-post-featured-image img,
.wp-block-post .wp-block-post-featured-image img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
	border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.wp-block-post-template li > *:not(.wp-block-post-featured-image),
.wp-block-post > *:not(.wp-block-post-featured-image) {
	padding-left: 1rem;
	padding-right: 1rem;
}

.wp-block-post-template li > *:last-child,
.wp-block-post > *:last-child {
	padding-bottom: 1rem;
}

/* =========================================
   Sidebar
   ========================================= */
.sidebar {
	background-color: var(--color-surface);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
}

/* =========================================
   WP Core Block Overrides
   ========================================= */
.wp-site-blocks,
.wp-block-template-part {
	background: transparent !important;
}

.wp-block-group {
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
}

/* =========================================
   Header
   ========================================= */
.site-header,
.site-header.has-background,
.site-header.has-secondary-background-color,
.site-header.has-primary-background-color {
	background-color: rgba(255, 255, 255, 0.92) !important;
	background-image: none !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: 100;
	transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(26, 26, 46, 0.08);
}

.site-header .wp-block-navigation a {
	color: var(--color-heading) !important;
	text-decoration: none;
	font-weight: 600;
}

.site-header .wp-block-navigation a:hover {
	color: var(--color-accent-orange) !important;
}

.site-header .wc-block-mini-cart__button,
.site-header .wc-block-customer-account a {
	color: var(--color-heading) !important;
}

/* =========================================
   Post meta
   ========================================= */
.wp-block-post-date,
.wp-block-post-author-name,
.wp-block-post-terms {
	color: var(--color-muted);
	font-size: 0.85rem;
}

.wp-block-post-terms a {
	color: var(--color-accent-orange);
	font-weight: 700;
}

/* =========================================
   Footer
   ========================================= */
.site-footer {
	background-color: var(--color-text) !important;
}

.site-footer a:hover {
	color: var(--color-accent-orange) !important;
}

/* =========================================
   Forms
   ========================================= */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
	border: 1px solid #e5e5f0;
	border-radius: 10px;
	color: var(--color-text);
	background-color: var(--color-surface);
	font-family: var(--font-primary);
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
	outline: none;
	border-color: var(--color-accent-purple);
	box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}