/*
Theme Name:  Mankeli
Description: Standalone block theme for the Mankeli café, carrying the identity from the Claude Design mockup — cream/dark-green/brass palette, Cormorant Garamond + Inter + Parisienne, generous layout widths. Front page is built with Gutenberg blocks (page content); header and footer are editable template parts. Includes the optional pixel-faithful PHP page template "Mankeli etusivu (PHP)".
Version:     1.0.7
Author:      Valakia Interactive
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: mankeli
*/

/* --------------------------------------------------------------------
 * Design utility classes for block content (add via the block sidebar's
 * "Additional CSS class" field, or use the pasted front page markup).
 * ------------------------------------------------------------------ */


header a {
	
	font-size:18px!important;
}

/* The handwritten accent line under headings (Parisienne). */
.mankeli-script {
	font-family: Parisienne, cursive !important;
	font-weight: 400 !important;
	color: #957d64;
	letter-spacing: 0;
	text-transform: none !important;
	line-height: 1.3;
}

/* Small caps section label ("Shop in shop", "Kahvila & lounas"…). */
.mankeli-eyebrow {
	font-family: Inter, 'Segoe UI', sans-serif !important;
	font-size: 11px !important;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #6e5a44; /* ruskea: 5.6:1 on kerma at 11px (pronssi was 3.6:1) */
}

/* Section rhythm for full-width groups.
 * Selector prefixed with "body" (not just the bare class) on purpose:
 * any block using layout:"constrained" — which these always are — gets
 * WordPress's own ".has-global-padding" class, whose rule sets the same
 * padding-left/right at the same specificity (0,1,0) as a bare class
 * selector would. Root padding is 0px in theme.json, so whichever of the
 * two same-specificity rules loads last wins; that tie is decided by
 * plugin/cache-dependent stylesheet order and isn't reliable (seen live:
 * fine on the front page, zeroed out on /shop-in-shop). The extra "body"
 * ancestor raises specificity to (0,1,1) so ours always wins. */
body .mankeli-section {
	padding: 88px 6vw;
}
body .mankeli-section--tight {
	padding: 56px 6vw;
}
/* Ajankohtaista preview: the standard 88px top rhythm on top of the
 * previous section's own 88px bottom (plus block gap) left too much
 * air above the heading, on mobile and desktop alike. Extra class
 * beats the "body .mankeli-section" specificity via class count, not
 * source order, so it doesn't need the same "body" prefix. */
.mankeli-section.mankeli-section--tight-top {
	padding-top: 40px;
}

/* --------------------------------------------------------------------
 * Header & footer parts
 * ------------------------------------------------------------------ */

.mankeli-topstrip .mankeli-eyebrow {
	color: inherit !important;
	letter-spacing: .18em;
}
/* Footer address/copyright reuse the small-caps eyebrow style, but as
 * real content (not a decorative label) it needs to stay readable. */
.mankeli-footer .mankeli-eyebrow {
	color: #957d64; /* dark footer: keep pronssi, ruskea would be too dark */
	font-size: 18px !important;
	letter-spacing: .05em;
}
.mankeli-header {
	padding: 20px 6vw;
	border-bottom: 1px solid #ded4c6;
	background: rgba(251, 246, 240, .92);
}
.mankeli-header .wp-block-site-title a {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	color: #0e5a3a;
	text-decoration: none;
}
.mankeli-header .wp-block-navigation a {
	font-family: Inter, 'Segoe UI', sans-serif;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
}

/* --------------------------------------------------------------------
 * Mobile navigation: hamburger button + fullscreen overlay menu.
 * The overlay itself (fullscreen, fixed) is core/navigation behaviour;
 * overlayBackgroundColor/overlayTextColor on the block (see header.html)
 * already swap its default white-on-black for the brand colours. The
 * rules below just make it feel designed rather than default: a proper
 * toggle button, large centred serif links, a brass hover underline,
 * and a soft staggered entrance instead of WP's instant fade.
 * ------------------------------------------------------------------ */
.mankeli-nav .wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid #ded4c6;
	border-radius: 4px;
	color: #0e5a3a;
	transition: border-color .2s ease, color .2s ease;
}
.mankeli-nav .wp-block-navigation__responsive-container-open:hover {
	border-color: #c29c6f;
	color: #957d64;
}

@keyframes mankeli-nav-item-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	padding-left: 8vw !important;
	padding-right: 8vw !important;
}
.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: center;
	gap: 4px;
}
.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(42px, 11vw, 64px);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	padding: 12px 0;
	position: relative;
}
.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 0;
	height: 1px;
	background: #c29c6f;
	transition: width .25s ease, left .25s ease;
}
.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover::after,
.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus::after {
	width: 56%;
	left: 22%;
}
@media not (prefers-reduced-motion) {
	.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		animation: mankeli-nav-item-in .5s cubic-bezier(.2, .7, .3, 1) both;
	}
	.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: .08s; }
	.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .14s; }
	.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .2s; }
	.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .26s; }
	.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .32s; }
	.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: .38s; }
}
.mankeli-nav .wp-block-navigation__responsive-container-close {
	top: max(18px, env(safe-area-inset-top, 0px)) !important;
	right: max(18px, env(safe-area-inset-right, 0px)) !important;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ded4c6;
	border-radius: 999px;
	color: #1b231f;
	transition: transform .3s ease, border-color .2s ease;
}
/* Light overlay: kerma background, metsä links (header.html sets the
 * same via overlayBackgroundColor/overlayTextColor). Pinned here too,
 * with !important to beat the preset .has-*-color classes, so it stays
 * light even if a Site Editor-saved copy of the header still says
 * yo/kerma. */
.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #fbf6f0 !important;
	color: #0e5a3a !important;
}
.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #0e5a3a;
}
.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.mankeli-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: #0a4530;
}
.mankeli-nav .wp-block-navigation__responsive-container-close:hover {
	transform: rotate(90deg);
	border-color: #c29c6f;
}
/* Same has-global-padding tie as .mankeli-section above — the footer
 * (also layout:"constrained") is exactly the element the user found it
 * broken on. */
body .mankeli-footer {
	padding: 64px 6vw 40px;
}
.mankeli-footer .wp-block-site-title a {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
	color: #957d64;
	text-decoration: none;
}
.mankeli-footer a {
	color: #c29c6f;
}
/* Footer menu: span the full content width (1120px contentSize) with
 * the items spread edge to edge, wrapping on narrow screens. */
.mankeli-footer .mankeli-footer-nav,
.mankeli-footer .mankeli-footer-nav .wp-block-navigation__container {
	width: 100%;
}
.mankeli-footer .mankeli-footer-nav .wp-block-navigation__container {
	justify-content: space-between;
	gap: 12px 32px;
}
.mankeli-footer .mankeli-footer-nav .wp-block-navigation-item__content {
	color: #c29c6f;
	font-size: 15px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}
.mankeli-footer .mankeli-footer-nav .wp-block-navigation-item__content:hover,
.mankeli-footer .mankeli-footer-nav .wp-block-navigation-item__content:focus {
	color: #fbf6f0;
}

/* Dark sections: keep links legible. */
.has-tumma-background-color a,
.has-yo-background-color a {
	color: #c29c6f;
}

/* Dark sections: the theme-wide heading color (metsa, a dark forest
 * green) has poor contrast on these near-black backgrounds, so swap
 * headings there for the light cream text color instead. */
.has-tumma-background-color h1,
.has-tumma-background-color h2,
.has-tumma-background-color h3,
.has-tumma-background-color h4,
.has-tumma-background-color h5,
.has-tumma-background-color h6,
.has-yo-background-color h1,
.has-yo-background-color h2,
.has-yo-background-color h3,
.has-yo-background-color h4,
.has-yo-background-color h5,
.has-yo-background-color h6 {
	color: var(--wp--preset--color--kerma);
}

/* --------------------------------------------------------------------
 * Decorative image frames — the arched hero photo from the Claude
 * Design mockup, plus simple rounded corners for the other feature
 * photos. Governed by the "Näytä kaarikoristeet" Customizer toggle
 * (functions.php sets body class mankeli-decorations-on/-off); on by
 * default, they disappear cleanly to plain square photos when off.
 * ------------------------------------------------------------------ */
.mankeli-arc img,
.mankeli-rounded img {
	display: block;
	width: 100%;
	height: auto;
}
.mankeli-decorations-on .mankeli-arc,
.mankeli-decorations-on .mankeli-rounded {
	position: relative;
}
.mankeli-decorations-on .mankeli-arc img {
	border-radius: 999px 999px 6px 6px;
	position: relative;
	z-index: 1;
}
.mankeli-decorations-on .mankeli-arc::before {
	content: "";
	position: absolute;
	inset: -18px;
	border: 1px solid #0e5a3a;
	border-radius: 999px 999px 6px 6px;
	pointer-events: none;
	z-index: 0;
}
.mankeli-decorations-on .mankeli-rounded img {
	border-radius: 6px;
}

/* Columns stack on mobile, so the hero arc image needs its own
 * spacing from the text above/below it instead of relying on the
 * column gap. */
@media (max-width: 781px) {
	.mankeli-arc {
		margin-top: 32px;
		margin-bottom: 32px;
	}
}

/* --------------------------------------------------------------------
 * WooCommerce grids toward the design language
 * ------------------------------------------------------------------ */

.woocommerce ul.products li.product,
.wc-block-grid__product {
	background: #f3ede3;
	border: 1px solid #ded4c6;
	border-radius: 5px;
	padding: 14px;
}
.woocommerce ul.products li.product .button,
.wc-block-grid__product .wp-block-button__link {
	background: #0e5a3a;
	color: #fbf6f0;
	border-radius: 4px;
	font-family: Inter, sans-serif;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------
 * Single product page: WooCommerce's blocks (breadcrumbs, store
 * notices, product details) hardcode alignwide, which stretches them
 * to the 1400px wide size. Cap them to the normal 1120px content
 * width so the product page matches the rest of the site.
 * ------------------------------------------------------------------ */
.single-product .is-layout-constrained > .alignwide {
	max-width: var(--wp--style--global--content-size);
}

/* --------------------------------------------------------------------
 * Ajankohtaista (posts page / single post) — news card grid.
 * ------------------------------------------------------------------ */
.mankeli-news-grid {
	padding: 0 6vw 88px;
}
/* On the front page, this same grid is reused inside a .mankeli-section
 * wrapper (for the "Ajankohtaista" preview), which already adds its own
 * 6vw/88px rhythm — stacking both doubled the side inset and bottom gap
 * there, while the standalone Ajankohtaista archive (no such wrapper)
 * still needs the grid's own padding. */
.mankeli-section .mankeli-news-grid {
	padding: 0;
}
.mankeli-news-grid .wp-block-post-template {
	gap: 40px 32px;
}
.mankeli-news-card {
	background: #f3ede3;
	border: 1px solid #ded4c6;
	border-top: 3px solid #c29c6f;
	border-radius: 4px;
	padding: 24px 24px 28px;
	height: 100%;
}
/* has-global-padding tie (see the .mankeli-section note above) — pin the
 * side padding with higher specificity so it wins everywhere the card
 * appears: the ajankohtaista archive's .mankeli-news-grid AND the front
 * page's preview section (which has no such wrapper to fall back on). */
body .mankeli-news-card {
	padding-left: 24px;
	padding-right: 24px;
}
.mankeli-news-card .wp-block-post-terms {
	display: block;
	margin-bottom: 6px;
}
.mankeli-news-card .wp-block-post-terms a {
	color: #6e5a44;
	text-decoration: none;
}
.mankeli-news-card h3.wp-block-post-title {
	margin: 0 0 6px;
	color: var(--wp--preset--color--metsa);
}
.mankeli-news-card h3.wp-block-post-title a {
	color: var(--wp--preset--color--metsa);
	text-decoration: none;
}
.mankeli-news-date {
	display: block;
	font-family: Inter, 'Segoe UI', sans-serif;
	font-size: 12px;
	letter-spacing: .05em;
	color: #6e5a44;
	margin: 0 0 14px;
}
.mankeli-news-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}
.mankeli-readmore a {
	display: inline-block;
	margin-top: 14px;
	font-family: Inter, 'Segoe UI', sans-serif;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #0e5a3a;
	text-decoration: none;
	border-bottom: 1px solid #c29c6f;
	padding-bottom: 2px;
}
.mankeli-readmore a:hover {
	color: #957d64;
	border-color: #957d64;
}
.mankeli-news-pagination {
	margin-top: 48px;
	font-family: Inter, 'Segoe UI', sans-serif;
	font-size: 13px;
	letter-spacing: .05em;
}
.mankeli-news-pagination a,
.mankeli-news-pagination span {
	color: #0e5a3a;
}

/* Single post (news article) meta + back link. */
.mankeli-single-meta {
	margin-bottom: 24px;
}
.mankeli-single-meta .mankeli-news-date {
	margin-top: 6px;
}
.mankeli-back-link a {
	font-family: Inter, 'Segoe UI', sans-serif;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6e5a44;
	text-decoration: none;
}
.mankeli-back-link a:hover {
	color: #1b231f;
}

/* --------------------------------------------------------------------
 * Floating cart (phones): once the header scrolls out of view,
 * functions.php adds body.mankeli-cart-float and the header's mini-cart
 * button turns into a fixed green ball at top-right. The header's
 * height is locked by the same script so pulling the cart out of the
 * flow doesn't shift the page.
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {
	body.mankeli-cart-float .mankeli-header .wc-block-mini-cart {
		position: fixed;
		top: max(20px, env(safe-area-inset-top, 0px));
		right: max(20px, env(safe-area-inset-right, 0px));
		z-index: 1000;
		width: 56px;
		height: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #0e5a3a;
		color: #fbf6f0;
		box-shadow: 0 6px 18px rgba(20, 26, 23, .3);
		animation: mankeli-cart-in .25s ease-out both;
	}
	body.mankeli-cart-float .mankeli-header .wc-block-mini-cart__button {
		width: 100%;
		height: 100%;
		padding: 0;
		justify-content: center;
		color: inherit;
	}
	body.mankeli-cart-float .mankeli-header .wc-block-mini-cart__icon {
		width: 28px;
		height: 28px;
	}
	body.mankeli-cart-float .mankeli-header .wc-block-mini-cart__badge {
		background: #fbf6f0 !important;
		color: #1b231f !important;
		border-color: #0e5a3a;
	}
	body.mankeli-cart-float .mankeli-header .wc-block-mini-cart.is-bump {
		animation: mankeli-cart-bump .4s ease-out;
	}
}
@keyframes mankeli-cart-in {
	from { opacity: 0; transform: scale(.6); }
	to { opacity: 1; transform: scale(1); }
}
@keyframes mankeli-cart-bump {
	40% { transform: scale(1.18); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	body.mankeli-cart-float .mankeli-header .wc-block-mini-cart,
	body.mankeli-cart-float .mankeli-header .wc-block-mini-cart.is-bump {
		animation: none;
	}
}

/* Cart & checkout: WooCommerce renders the header mini-cart hidden
 * (visibility:hidden inline) on these pages, so the header looked
 * different there. Keep the icon visible for a consistent header; its
 * button is disabled there (you are already in the cart), and the
 * empty count badge is hidden. */
body.woocommerce-cart .mankeli-header .wc-block-mini-cart,
body.woocommerce-checkout .mankeli-header .wc-block-mini-cart {
	visibility: visible !important;
}
body.woocommerce-cart .mankeli-header .wc-block-mini-cart__button:disabled,
body.woocommerce-checkout .mankeli-header .wc-block-mini-cart__button:disabled {
	opacity: 1;
	cursor: default;
}
.mankeli-header .wc-block-mini-cart__badge:empty {
	display: none;
}

/* --------------------------------------------------------------------
 * Cart & checkout pages: WooCommerce's own page-cart / page-checkout
 * templates wrap the content in a bare <main> group with no padding
 * and set post content to alignwide (1400px). With the theme's 0px
 * root padding that ran edge to edge. Give <main> the same rhythm as
 * the theme's page template (.mankeli-section--tight) and cap the
 * wide blocks to the normal 1120px content width. "body" prefix for
 * the has-global-padding tie (see the .mankeli-section note above).
 * ------------------------------------------------------------------ */
body.woocommerce-cart main.wp-block-group:not(.mankeli-section--tight),
body.woocommerce-checkout main.wp-block-group:not(.mankeli-section--tight) {
	padding: 56px 6vw 88px;
}
body.woocommerce-cart main .is-layout-constrained > .alignwide,
body.woocommerce-checkout main .is-layout-constrained > .alignwide,
body.woocommerce-cart main.is-layout-constrained > .alignwide,
body.woocommerce-checkout main.is-layout-constrained > .alignwide {
	max-width: var(--wp--style--global--content-size);
}
@media (max-width: 600px) {
	body.woocommerce-cart main.wp-block-group:not(.mankeli-section--tight),
	body.woocommerce-checkout main.wp-block-group:not(.mankeli-section--tight) {
		padding: 32px 16px 56px;
	}
}

/* --------------------------------------------------------------------
 * WooCommerce cart & checkout blocks — nearly all their text (product
 * names, prices, totals, descriptions, option labels, address cards,
 * qty badges) is set via var(--wp--preset--font-size--small, 14px) or
 * an --x-small calc of it, which reads too small against the theme's
 * 19px base type. Override both presets within the block wrapper so
 * every consumer of them picks up the larger size (min. 18px).
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wp--preset--font-size--small: 18px;
	--wp--preset--font-size--x-small: 18px;
}
/* A few elements use a further em multiplier on top of the preset
 * (qty +/- buttons, "via" shipping method label) or the sitewide
 * button font-size, so they still land under 18px — pin those too. */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button,
.wp-block-woocommerce-checkout .wc-block-components-quantity-selector__button,
.wp-block-woocommerce-cart .wc-block-components-totals-shipping__via,
.wp-block-woocommerce-checkout .wc-block-components-totals-shipping__via,
.wp-block-woocommerce-cart .wp-element-button,
.wp-block-woocommerce-checkout .wp-element-button,
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="email"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="number"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="password"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="tel"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="text"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="url"] {
	font-size: 18px;
}