/*
Theme Name: actual-maushaus
Theme URI: https://example.com/actual-maushaus
Author: dominic
Description: A WooCommerce-compatible block theme for Gut MausHaus — an antique auction-catalogue aesthetic in aged ivory, sepia ink and oxblood, with hairline rules, a museum-quiet sticky masthead and Fraunces + Hanken Grotesk. Foundations only (tokens, nav, footer); rich layouts arrive as custom blocks.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: actual-maushaus
Tags: block-theme, e-commerce, full-site-editing, accessibility-ready
*/

/**
 * Derived tokens that aren't editor-pickable palette colors, plus the motion
 * curves — mirrored from the version-3 reference so the decorative rules below
 * read against named values. Palette colors come from theme.json presets.
 */
:root {
	--mh-ink-soft:   rgba(59, 46, 34, 0.70);
	--mh-ink-faint:  rgba(59, 46, 34, 0.48);
	--mh-line-soft:  rgba(59, 46, 34, 0.13);
	--mh-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
	--mh-ease-soft:  cubic-bezier(0.25, 1, 0.5, 1);
}

/* Aged-paper grain across the whole canvas (very faint, multiply blend). */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0.6;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

::selection {
	background: var(--wp--preset--color--oxblood);
	color: var(--wp--preset--color--ivory);
}

:focus-visible {
	outline: 2.5px solid var(--wp--preset--color--oxblood);
	outline-offset: 3px;
}

/* Oldstyle figures for prices / numerals where it reads as catalogue. */
.has-heading-font-family {
	font-variant-numeric: oldstyle-nums;
}

/* =========================================================
   Running head + masthead
   ========================================================= */
.mh-topnote {
	position: relative;
	z-index: 60;
	text-align: center;
	font-size: 0.7rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--mh-ink-soft);
	border-bottom: 1px solid var(--mh-line-soft);
}

.mh-topnote strong {
	color: var(--wp--preset--color--oxblood);
	font-weight: 600;
}

.mh-masthead {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(241, 233, 216, 0.86);
	-webkit-backdrop-filter: blur(8px) saturate(115%);
	backdrop-filter: blur(8px) saturate(115%);
	border-bottom: 1px solid var(--wp--preset--color--ink);
	box-shadow: 0 3px 0 -1.5px var(--mh-line-soft);
}

/* Mobile masthead: compact logo so lockup, hamburger and cart share one row.
   (The site-logo width attribute is 170px — too wide for narrow viewports.) */
@media (max-width: 600px) {
	.mh-masthead .wp-block-site-logo img.custom-logo {
		width: 126px;
		height: auto;
	}
}

/* Navigation: tracked uppercase links with an oxblood underline that draws in. */
.mh-masthead .wp-block-navigation-item__content {
	position: relative;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	/* !important so the version-3 tint wins even if the Navigation block was
	   given a text color in the Site Editor. */
	color: var(--mh-ink-soft) !important;
	padding-block: 0.35rem;
	text-decoration: none;
	transition: color 0.3s var(--mh-ease-soft);
}

.mh-masthead .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1.5px;
	background: var(--wp--preset--color--oxblood);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--mh-ease-out);
}

.mh-masthead .wp-block-navigation-item__content:hover,
.mh-masthead .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--ink) !important;
}

.mh-masthead .wp-block-navigation-item__content:hover::after {
	transform: scaleX(1);
}

/* Current page: keep the ink tint and the underline drawn (site.css `.menu
   a[aria-current="page"]`). Core marks the current item's link itself. */
.mh-masthead .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--ink) !important;
}

.mh-masthead .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}

/* Cart: WooCommerce auto-injects its Mini-Cart block into the navigation via the
   Block Hooks API (it carries the live item count). We don't add a manual cart —
   that would duplicate it — we just give the injected button the catalogue pill. */
.mh-masthead .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 2px;
	padding: 0.5rem 0.95rem;
	color: var(--wp--preset--color--ink);
	transition: background-color 0.3s var(--mh-ease-soft), color 0.3s, transform 0.3s var(--mh-ease-out);
}

/* Flatten the icon wrapper so the icon and count become direct flex children
   of the button; then order them icon · Warenkorb · count. */
.mh-masthead .wc-block-mini-cart__quantity-badge {
	display: contents;
}

.mh-masthead .wc-block-mini-cart__button > svg,
.mh-masthead .wc-block-mini-cart__icon {
	order: 0;
	width: 18px;
	height: 18px;
}

.mh-masthead .wc-block-mini-cart__button:hover,
.mh-masthead .wc-block-mini-cart__button:focus-visible {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ivory);
	transform: translateY(-1px);
}

/* version-3 shows a "Warenkorb" label, not the cart total — inject the label
   and hide the price amount the Mini-Cart renders by default. */
.mh-masthead .wc-block-mini-cart__button::after {
	content: "Warenkorb";
	order: 1;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
}

.mh-masthead .wc-block-mini-cart__amount,
.mh-masthead .wc-block-mini-cart__button .wc-block-components-formatted-money-amount {
	display: none;
}

/* The count — a separate oxblood pill after the label (not overlaid on the icon).
   Reset the Mini-Cart's default absolute/overlay positioning back into flow. */
.mh-masthead .wc-block-mini-cart__badge {
	order: 2;
	position: static;
	inset: auto;
	transform: none;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.2rem;
	height: 1.2rem;
	padding: 0 0.3rem;
	border: 1px solid var(--wp--preset--color--oxblood);
	border-radius: 999px;
	background-color: var(--wp--preset--color--oxblood) !important;
	color: var(--wp--preset--color--ivory) !important;
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: oldstyle-nums;
}

.mh-masthead .wc-block-mini-cart__badge * {
	color: var(--wp--preset--color--ivory) !important;
}

/* Mirror version-3: the label collapses on narrow screens, icon + count remain. */
@media (max-width: 560px) {
	.mh-masthead .wc-block-mini-cart__button::after {
		display: none;
	}
}

/* =========================================================
   Buttons — the catalogue "press" (lift + offset oxblood shadow)
   ========================================================= */
.wp-block-button__link {
	transition: transform 0.4s var(--mh-ease-out), box-shadow 0.4s var(--mh-ease-out), background-color 0.3s, color 0.3s;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 4px 6px 0 -1px var(--wp--preset--color--oxblood);
}

/* =========================================================
   Footer colophon
   ========================================================= */
/* Match version-3's .foot-grid exactly: a 1.6/1/1/1 grid with a fluid gap,
   overriding the Columns block's flex layout (which can't track a clamped gap). */
.mh-colophon .wp-block-columns {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

@media (max-width: 980px) {
	.mh-colophon .wp-block-columns {
		grid-template-columns: 1fr 1fr;
	}
	.mh-colophon .mh-foot-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.mh-colophon .wp-block-columns {
		grid-template-columns: 1fr;
	}
}

.mh-foot-brand p {
	max-width: 34ch;
}

/* Brand logotype: Fraunces 500 with "Maus" at 600, as in version-3's .brand. */
.mh-colophon h3 strong {
	font-weight: 600;
}

.mh-colophon h4 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--mh-ink-faint);
	margin-bottom: 0.9rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.mh-colophon ul.wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.mh-colophon ul.wp-block-list li {
	margin: 0;
}

.mh-colophon a {
	color: var(--mh-ink-soft);
	font-size: 0.92rem;
	text-decoration: none;
	transition: color 0.3s, padding-left 0.3s var(--mh-ease-out);
}

.mh-colophon li a:hover,
.mh-foot-bottom a:hover {
	color: var(--wp--preset--color--oxblood);
}

.mh-colophon li a:hover {
	padding-left: 4px;
}

/* Socials as version-3's 38px keyline squares that invert on hover. */
.mh-colophon .wp-block-social-links {
	gap: 0.6rem;
	margin-top: 1.1rem;
}

.mh-colophon .wp-block-social-link {
	transition: transform 0.3s var(--mh-ease-out);
}

.mh-colophon .wp-block-social-link .wp-block-social-link-anchor {
	width: 38px;
	height: 38px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 2px;
	color: var(--wp--preset--color--ink);
	transition: background-color 0.3s, color 0.3s, transform 0.3s var(--mh-ease-out);
}

.mh-colophon .wp-block-social-link .wp-block-social-link-anchor svg {
	width: 18px;
	height: 18px;
	/* Follow the anchor color so the icon inverts on hover (WC sets fill to the
	   icon color directly, which otherwise ignores our hover color). */
	fill: currentColor !important;
}

.mh-colophon .wp-block-social-link:hover .wp-block-social-link-anchor {
	background-color: var(--wp--preset--color--ink);
	/* !important: the block sets the icon color as an inline style on the anchor,
	   which would otherwise beat this hover rule. */
	color: var(--wp--preset--color--ivory) !important;
	transform: translateY(-2px);
}

.mh-colophon .wp-block-social-link:hover .wp-block-social-link-anchor svg {
	fill: var(--wp--preset--color--ivory) !important;
}

.mh-foot-bottom {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.4rem;
	border-top: 1px solid var(--wp--preset--color--ink);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mh-ink-faint);
}

/* The legal links inherit the 0.78rem foot-bottom size — the .mh-colophon a rule
   (0.92rem, for the column links) would otherwise enlarge them. */
.mh-foot-bottom a {
	font-size: 0.78rem;
}

/* The legal links sit in a 1.4rem-gap row, as in version-3. */
.mh-foot-bottom > .wp-block-group {
	gap: 1.4rem;
}

/* =========================================================
   Mobile navigation overlay
   Core renders the open menu as a separate full-screen modal that ignores most
   theme styling. Colors come from the block's overlay attributes (ivory / ink);
   this handles layout, spacing, and typography.
   ========================================================= */

/* Collapse to the burger earlier than core's 600px breakpoint (version-3
   switches at 980px). Below 980px: hide the inline links and show the burger;
   when opened, `.is-menu-open` is added so the overlay still appears. */
@media (max-width: 980px) {
	.mh-masthead .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.mh-masthead .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	/* Put the burger to the RIGHT of the cart: pin the logo left with an auto
	   margin (so cart + burger group on the right), and order the navigation
	   after the mini-cart. Source order is logo · nav · cart, so giving the
	   navigation order:1 drops it past the still-default (0) cart. */
	.mh-masthead .wp-block-group.alignwide > .wp-block-site-logo {
		margin-right: auto;
	}
	.mh-masthead .wp-block-group.alignwide > .wp-block-navigation {
		order: 1;
	}
}

/* The masthead's backdrop-filter establishes a containing block, which traps
   the overlay's position:fixed — it gets sized to the header instead of the
   viewport ("too small, with scroll"). Drop the filter while the menu is open
   so the fixed overlay can fill the screen as intended. */
.mh-masthead:has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	/* The masthead (sticky, z-index:50) is its own stacking context, so the
	   overlay's z-index can't beat the topnote (z-index:60) sitting as a sibling
	   above it — the close icon ends up hidden behind the topnote. Lift the whole
	   masthead above the topnote while the menu is open so the overlay (and its
	   close button) paint over everything. */
	z-index: 70;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--60);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	--navigation-layout-justification-setting: center;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
}

/* In the open overlay, show the links large and centered (not the tracked masthead style). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	color: var(--wp--preset--color--ink);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* In the overlay the underline is hidden, so mark the current page in oxblood. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--oxblood);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}

/* Burger: version-3's keyline pill (1px ink border, 44×40), not the bare icon
   core renders. Core's default open icon is a 2-line "handle"; swap it for
   version-3's 3-line hamburger. */
.mh-masthead .wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 40px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 2px;
	align-items: center;
	justify-content: center;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' stroke='%233B2E22' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.mh-masthead .wp-block-navigation__responsive-container-open svg {
	display: none;
}

/* =========================================================
   Content utility: a readable line-length cap.
   Core has no per-paragraph max-width control, so this stays. A bare max-width
   isn't enough — constrained layout auto-centers narrow children, so we also pin
   the block to the content column's LEFT edge.
   ========================================================= */
.mh-measure {
	max-width: 52ch;
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1180px)) / 2)) !important;
	margin-right: auto !important;
}

/* =========================================================
   Contact form component
   Rendered by the [maushaus_contact_form] shortcode (raw HTML, not blocks).
   ========================================================= */
.mh-form {
	margin: 0;
}

.mh-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
}

/* All field rules are scoped to .mh-form: the maushaus plugin's Kontakt and
   Anfrage blocks use the same .mh-field class with their own boxed styling,
   and unscoped rules here would leak into them. */
.mh-form .mh-field {
	display: flex;
	flex-direction: column;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.mh-form .mh-field label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mh-ink-soft);
	margin-bottom: 0.5rem;
}

.mh-form .mh-field input,
.mh-form .mh-field textarea {
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ivory);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 2px;
	padding: 0.85rem 1.1rem;
	transition: border-color 0.2s ease;
}

.mh-form .mh-field input:focus,
.mh-form .mh-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--oxblood);
	box-shadow: 0 0 0 1px var(--wp--preset--color--oxblood);
}

.mh-form .mh-field textarea {
	resize: vertical;
}

/* Honeypot field, kept out of view and out of the tab order. */
.mh-field--hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mh-form-actions {
	margin: var(--wp--preset--spacing--50) 0 0;
}

.mh-submit {
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	background: var(--wp--preset--color--ink);
	padding: 0.95rem 1.6rem;
	transition: transform 0.4s var(--mh-ease-out), box-shadow 0.4s var(--mh-ease-out), background-color 0.2s ease;
}

.mh-submit:hover,
.mh-submit:focus-visible {
	transform: translateY(-2px);
	box-shadow: 4px 6px 0 -1px var(--wp--preset--color--oxblood);
}

/* Submission feedback banners. */
.mh-form-notice {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--small);
}

.mh-form-notice.is-success {
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--ink);
}

.mh-form-notice.is-error {
	background: var(--wp--preset--color--oxblood);
	color: var(--wp--preset--color--ivory);
}

@media (max-width: 600px) {
	.mh-form-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}