/*
 Theme Name:   Yakimono Child Theme
 Theme URI:    http://localhost:8884
 Description:  Child theme for Twenty Twenty-Five — Yakimono Stockholm
 Author:       Yakimono Stockholm
 Template:     twentytwentyfive
 Version:      1.0.0
 Text Domain:  yakimono-child-theme
*/

/* Custom CSS below */

/* ==========================================================================
   Keyframe animations
   ========================================================================== */

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ==========================================================================
   Reveal utility — apply via Additional CSS Classes in the editor
   ========================================================================== */

.yk-reveal {
	animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.yk-reveal-delay-1 {
	animation-delay: 0.1s;
}

.yk-reveal-delay-2 {
	animation-delay: 0.2s;
}

.yk-reveal-delay-3 {
	animation-delay: 0.35s;
}

/* ==========================================================================
   Grain texture overlay — organic depth for sections
   ========================================================================== */

.yk-grain {
	position: relative;
	isolation: isolate;
}

.yk-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 200px 200px;
	z-index: 1;
}

/* ==========================================================================
   Header — gradient background with depth
   ========================================================================== */

.wp-block-template-part[data-slug="header"],
header.wp-block-template-part {
	background: linear-gradient(160deg, var(--wp--preset--color--ink) 0%, var(--wp--preset--color--deep) 100%);
}

.wp-block-template-part[data-slug="header"] .wp-block-group.alignwide,
header.wp-block-template-part .wp-block-group.alignwide {
	padding: 0 2rem;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wp-block-template-part[data-slug="header"] .wp-block-site-title,
header.wp-block-template-part .wp-block-site-title {
	color: var(--wp--preset--color--background);
	font-family: "Instrument Serif", Georgia, serif;
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.wp-block-template-part[data-slug="header"] .wp-block-site-title a,
header.wp-block-template-part .wp-block-site-title a {
	color: var(--wp--preset--color--background);
	text-decoration: none;
}

.wp-block-template-part[data-slug="header"] .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation a {
	color: var(--wp--preset--color--background);
	text-decoration: none;
	letter-spacing: 0.04em;
	font-size: 0.8rem;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

/* Override WP core .has-contrast-color !important on the nav container */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
	color: var(--wp--preset--color--background) !important;
}

/* Burger menu icon — force visible on dark header */
header.wp-block-template-part .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--background) !important;
}

header.wp-block-template-part .wp-block-navigation__responsive-container-open svg {
	fill: var(--wp--preset--color--background);
	stroke: var(--wp--preset--color--background);
}

header.wp-block-template-part .wp-block-navigation a:hover {
	color: var(--wp--preset--color--warm);
}

/* WooCommerce header icons */
.wp-block-template-part[data-slug="header"] .woocommerce-cart-contents,
header.wp-block-template-part .woocommerce-cart-contents,
.wp-block-template-part[data-slug="header"] .wp-block-woocommerce-mini-cart,
header.wp-block-template-part .wp-block-woocommerce-mini-cart,
.wp-block-template-part[data-slug="header"] .wp-block-woocommerce-customer-account,
header.wp-block-template-part .wp-block-woocommerce-customer-account {
	color: var(--wp--preset--color--background);
}

.wp-block-template-part[data-slug="header"] .woocommerce-cart-contents:hover,
header.wp-block-template-part .woocommerce-cart-contents:hover,
.wp-block-template-part[data-slug="header"] .wp-block-woocommerce-mini-cart:hover,
header.wp-block-template-part .wp-block-woocommerce-mini-cart:hover,
.wp-block-template-part[data-slug="header"] .wp-block-woocommerce-customer-account:hover,
header.wp-block-template-part .wp-block-woocommerce-customer-account:hover {
	color: var(--wp--preset--color--warm);
}

/* WooCommerce header icon SVGs */
header.wp-block-template-part .wc-block-mini-cart__button,
header.wp-block-template-part .wc-block-customer-account__account-icon {
	color: var(--wp--preset--color--background);
	fill: var(--wp--preset--color--background);
	transition: color 0.3s ease, fill 0.3s ease;
}

header.wp-block-template-part .wc-block-mini-cart__button:hover,
header.wp-block-template-part .wc-block-customer-account__account-icon:hover {
	color: var(--wp--preset--color--warm);
	fill: var(--wp--preset--color--warm);
}

header.wp-block-template-part .wc-block-mini-cart__button svg,
header.wp-block-template-part .wc-block-customer-account__account-icon svg {
	fill: var(--wp--preset--color--background);
	transition: fill 0.3s ease;
}

header.wp-block-template-part .wc-block-mini-cart__button:hover svg,
header.wp-block-template-part .wc-block-customer-account__account-icon:hover svg {
	fill: var(--wp--preset--color--warm);
}

/* ==========================================================================
   Frosted glass system
   ========================================================================== */

.yk-frosted-card {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	backdrop-filter: blur(12px) saturate(1.2);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0;
	max-width: 640px;
}

.yk-glass-dark {
	background: color-mix(in srgb, var(--wp--preset--color--deep) 60%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   Accent colour — content links
   ========================================================================== */

.entry-content a,
.wp-block-post-content a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: border-color 0.3s ease;
}

.entry-content a:hover,
.wp-block-post-content a:hover {
	border-bottom-color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Divider utility
   ========================================================================== */

.yk-divider {
	width: 40px;
	height: 1px;
	background-color: var(--wp--preset--color--border);
	border: none;
	margin: 3rem auto;
}

/* ==========================================================================
   WooCommerce button overrides (classic templates)
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	padding: 0.75rem 1.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: inherit;
	transition: background 0.4s ease, color 0.3s ease, border-color 0.3s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: linear-gradient(135deg, var(--wp--preset--color--accent), var(--wp--preset--color--warm));
	color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Page title spacing
   ========================================================================== */

.wp-block-post-title {
	margin-bottom: 3rem;
}

/* ==========================================================================
   WooCommerce Shop — Product Grid
   ========================================================================== */

/* Product card */
ul.wc-block-product-template li.wc-block-product {
	background-color: var(--wp--preset--color--surface);
	padding: 0;
	transition: box-shadow 0.4s ease;
	display: flex;
	flex-direction: column;
}

ul.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto;
}

ul.wc-block-product-template li.wc-block-product:hover {
	box-shadow: 0 8px 32px rgba(20, 18, 16, 0.08);
}

/* Product image */
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Product card text — left-aligned */
ul.wc-block-product-template li.wc-block-product {
	text-align: left;
}

/* Product title */
ul.wc-block-product-template li.wc-block-product .wp-block-post-title {
	font-family: "Instrument Serif", Georgia, serif;
	font-size: 1rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	letter-spacing: 0.01em;
	margin: 1rem 1.25rem 0.25rem;
	padding: 0;
}

ul.wc-block-product-template li.wc-block-product .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* Product price */
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-price {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
	margin: 0 1.25rem 0.75rem;
	padding: 0;
}

ul.wc-block-product-template li.wc-block-product .wc-block-components-product-price .woocommerce-Price-amount {
	color: var(--wp--preset--color--muted);
}

/* Grid spacing — tight 2px gap */
ul.wc-block-product-template {
	gap: 2px !important;
}

/* ==========================================================================
   WooCommerce Shop — Add to Cart Button
   ========================================================================== */

ul.wc-block-product-template li.wc-block-product .wc-block-components-product-button__button {
	display: block !important;
	width: calc(100% - 2.5rem) !important;
	margin: 0.5rem 1.25rem 1.25rem !important;
	background: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 0 !important;
	padding: 0.75rem 1rem !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	transition: background 0.4s ease, color 0.3s ease, border-color 0.3s ease !important;
}

ul.wc-block-product-template li.wc-block-product .wc-block-components-product-button__button:hover {
	background: linear-gradient(135deg, var(--wp--preset--color--accent), var(--wp--preset--color--warm)) !important;
	color: var(--wp--preset--color--background) !important;
	border-color: var(--wp--preset--color--accent) !important;
}

/* ==========================================================================
   WooCommerce Shop — Page Header
   ========================================================================== */

/* Shop page title */
h1.wp-block-query-title,
.woocommerce-products-header__title,
h1.page-title {
	font-family: "Instrument Serif", Georgia, serif;
	font-weight: 400;
	font-size: 2.25rem;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.01em;
	margin-bottom: 2rem;
}

/* Breadcrumb — hidden, reduces clutter at this scale */
.wc-block-breadcrumbs,
.woocommerce-breadcrumb {
	display: none;
}

/* Result count — hidden, redundant for small catalogues */
.woocommerce-result-count {
	display: none;
}

/* Pre-grid breathing room */
.woocommerce-products-header,
.wp-block-query-title {
	padding-bottom: 2.5rem;
}

/* ==========================================================================
   WooCommerce Shop — Sorting Bar
   ========================================================================== */

.woocommerce-ordering select.orderby {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	padding: 0.4rem 0.8rem;
	font-size: 0.8rem;
	font-family: inherit;
	color: var(--wp--preset--color--ink);
}

/* ==========================================================================
   Footer — gradient background
   ========================================================================== */

footer.wp-block-template-part .wp-block-site-title {
	font-family: "Instrument Serif", Georgia, serif;
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.01em;
}

footer.wp-block-template-part .wp-block-site-title a {
	text-decoration: none;
}