/*
Theme Name: aromuli
Theme URI: https://aromuli.ch
Author: dominic
Description: Block theme for aromuli® — Aromatherapie to go. Lime and sun-yellow over warm paper, Ubuntu Condensed headings with Ubuntu body and Caveat script accents, pill buttons and 26px cards, faithful to the approved redesign. Foundations only (tokens, masthead, footer, WooCommerce styling); the page sections come from the aromuli-blocks plugin.
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: aromuli
Tags: block-theme, full-site-editing, woocommerce, accessibility-ready
*/

/**
 * Derived tokens that aren't editor-pickable palette colors. Palette colors
 * come from theme.json presets (lime #a3cf44, ink #33401f, sun #ffce43…).
 */
:root {
	--am-radius: 26px;
	--am-shadow: 0 14px 40px -18px rgba(51, 64, 31, 0.25);
	--am-shadow-soft: 0 8px 30px -22px rgba(51, 64, 31, 0.3);
	--am-imgbox: #f6f4ef;
	--am-sun-hover: #f5bd1e;
	--am-tangerine-hover: #e0733f;
	--am-header-bg: rgba(255, 253, 248, 0.92);
	--am-foot-hairline: rgba(232, 240, 213, 0.15);
}

html {
	scroll-behavior: smooth;
}

body {
	overflow-x: clip;
}

::selection {
	background: var(--wp--preset--color--lime);
	color: #ffffff;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--leaf);
	outline-offset: 2px;
}

strong {
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

h1,
h2,
h3 {
	text-wrap: balance;
}

/* =========================================================
   Section rhythm — the design stacks full-bleed sections flush
   (spacing comes from each section's own padding-block), so the
   theme's 20px blockGap must not open seams between them or
   before the footer.
   ========================================================= */
.wp-block-post-content > .alignfull,
main.wp-block-group > .alignfull,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* =========================================================
   Masthead — sticky paper bar with blur and hairline, logo
   left, condensed uppercase links, pill CTA, mini-cart.
   ========================================================= */
.am-masthead {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--am-header-bg);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* The blur lives on a pseudo-element: backdrop-filter on the masthead itself
   would make it the containing block for the mobile nav's fixed overlay,
   clipping the open menu to the height of the bar. */
.am-masthead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.am-masthead .wp-block-site-logo img.custom-logo {
	width: 150px;
	height: auto;
}

/* No logo uploaded yet: show the site title in ink instead. */
.am-masthead .wp-block-site-title a {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Navigation links: condensed uppercase with the 2px lime underline on
   hover and on the current page (design .main-nav a). */
.am-masthead .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}

.am-masthead .wp-block-navigation-item__content:hover,
.am-masthead .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--leaf-deep);
	border-bottom-color: var(--wp--preset--color--lime);
}

.am-masthead .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--leaf-deep);
	border-bottom-color: var(--wp--preset--color--lime);
}

/* «Zum Lädeli» pill inside the navigation (design .main-nav .btn). */
.am-masthead .am-nav-cta .wp-block-navigation-item__content {
	background: var(--wp--preset--color--lime);
	color: #ffffff;
	letter-spacing: 0.08em;
	padding: 10px 24px;
	border: 2px solid var(--wp--preset--color--lime);
	border-radius: 999px;
	transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.am-masthead .am-nav-cta .wp-block-navigation-item__content:hover,
.am-masthead .am-nav-cta .wp-block-navigation-item__content:focus-visible,
.am-masthead .am-nav-cta .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--wp--preset--color--leaf);
	border-color: var(--wp--preset--color--leaf);
	color: #ffffff;
	transform: translateY(-2px);
}

/* =========================================================
   Mobile navigation — collapse at the design's 820px breakpoint
   (core's default is 600px), paper overlay with ink links.
   ========================================================= */
@media (max-width: 820px) {
	.am-masthead .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.am-masthead .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
}

.am-masthead .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--ink);
	padding: 8px;
}

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

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

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 14px;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

/* Open overlay: the menu sits centred in the viewport instead of following
   the bar's right-justification. The .am-masthead prefix outweighs core's
   flex-end justification; the height chain lets the vertical centring bite. */
.am-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.am-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.am-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	height: 100%;
}

.am-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.am-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	justify-content: center;
}

/* Core's overlay reset strips link padding (padding: 0), which flattens the
   «Zum Lädeli» pill — give it back its shape. */
.am-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.am-nav-cta .wp-block-navigation-item__content {
	padding: 10px 24px;
}

/* =========================================================
   Mini-cart — ghost pill with the count in a lime badge.
   ========================================================= */
.am-masthead .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	padding: 8px 18px;
	transition: background 0.2s, color 0.2s, transform 0.2s;
}

.am-masthead .wc-block-mini-cart__button:hover,
.am-masthead .wc-block-mini-cart__button:focus-visible {
	background: var(--wp--preset--color--ink);
	color: #ffffff;
	transform: translateY(-2px);
}

.am-masthead .wc-block-mini-cart__quantity-badge {
	display: contents;
}

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

/* Show a quantity badge instead of the price amount. */
.am-masthead .wc-block-mini-cart__amount,
.am-masthead .wc-block-mini-cart__button .wc-block-components-formatted-money-amount {
	display: none;
}

.am-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.3em;
	height: 1.3em;
	padding: 0 0.3em;
	background: var(--wp--preset--color--lime);
	border: 0;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 500;
	color: #ffffff;
}

.am-masthead .wc-block-mini-cart__badge * {
	color: #ffffff !important;
}

/* =========================================================
   Footer colophon — dark olive, three columns, script claim.
   ========================================================= */
.am-colophon {
	color: var(--wp--preset--color--footer-text);
}

.am-colophon h4 {
	color: #ffffff;
	font-size: 16px;
	letter-spacing: 0.1em;
	margin-bottom: 16px;
}

.am-colophon p {
	color: var(--wp--preset--color--footer-text);
}

.am-colophon a {
	color: var(--wp--preset--color--footer-link);
	text-decoration: none;
}

.am-colophon a:hover,
.am-colophon a:focus-visible {
	color: var(--wp--preset--color--lime);
}

/* Wordmark on its own white plate (the logo JPG has a white ground). */
.am-colophon .am-wordmark img {
	display: block;
	width: 170px;
	height: auto;
	background: #ffffff;
	border-radius: 14px;
	padding: 10px 18px;
	box-sizing: content-box;
}

/* Copyright bar: hairline above, small quiet text, sun script claim. */
.am-foot-bottom {
	border-top: 1px solid var(--am-foot-hairline);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 20px;
	padding-bottom: 4px;
}

.am-foot-bottom p {
	font-size: 14px;
}

.am-foot-claim {
	font-family: var(--wp--preset--font-family--script);
	font-weight: 600;
	font-size: 22px !important;
	color: var(--wp--preset--color--sun);
}

.am-foot-heart {
	color: var(--wp--preset--color--tangerine);
}

/* =========================================================
   Shared editorial primitives used by templates
   ========================================================= */

/* Caveat eyebrow above section headings, slightly rotated. */
.am-eyebrow {
	font-family: var(--wp--preset--font-family--script);
	font-weight: 600;
	font-size: clamp(24px, 2.4vw, 31px);
	/* No line-height: the design's .eyebrow inherits the body's 1.65. */
	color: var(--wp--preset--color--leaf);
	rotate: -1.5deg;
	display: block;
	width: fit-content;
}

.has-text-align-center .am-eyebrow,
.am-eyebrow.has-text-align-center {
	margin-inline: auto;
}

/* Ghost pill button variant (design .btn.ghost) for core buttons. */
.wp-block-button.is-style-outline .wp-block-button__link,
.am-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.am-btn-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: #ffffff;
}

/* Sun pill variant (design .btn.sun) for core buttons on lime/dark grounds. */
.am-btn-sun .wp-block-button__link {
	background: var(--wp--preset--color--sun);
	border-color: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--ink);
}

.am-btn-sun .wp-block-button__link:hover {
	background: var(--am-sun-hover);
	border-color: var(--am-sun-hover);
	color: var(--wp--preset--color--ink);
}

/* Buttons lift slightly on hover, like every pill in the design. */
.wp-block-button__link {
	transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* =========================================================
   Accordion — core/details styled as the «Gut zu wissen» cards.
   ========================================================= */
.wp-block-details {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	margin-bottom: 14px;
	overflow: clip;
	padding: 0;
}

.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 20px 26px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	color: var(--wp--preset--color--ink);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--script);
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	color: var(--wp--preset--color--leaf);
	transition: rotate 0.25s;
	flex: none;
}

.wp-block-details[open] summary::after {
	rotate: 45deg;
}

.wp-block-details > :not(summary) {
	margin-left: 26px;
	margin-right: 26px;
	font-size: 16px;
}

.wp-block-details > :last-child {
	margin-bottom: 26px;
}

/* Nutrition tables inside the accordions. */
.wp-block-details table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.wp-block-details th,
.wp-block-details td {
	text-align: left;
	padding: 8px 10px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-details td:last-child {
	text-align: right;
	color: var(--wp--preset--color--ink);
}

/* =========================================================
   Blog / search fallbacks (kept quiet — the shop is the star).
   ========================================================= */
.am-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
}