/*
Theme Name: Mimoda
Theme URI: https://mimoda.nl/
Description: Child-thema voor Mimoda op het Sellabees Shops Core parent-thema. Bevat alle presentatie (templates, header/footer, huisstijl) en de ACF-velden. De huisstijl (kleuren, typografie, spacing) volgt 1:1 uit het Figma-ontwerp.
Author: Sellabees
Author URI: https://sellabees.nl/
Template: sellabees-shops-core
Version: 0.1.0
Requires PHP: 8.0
Text Domain: mimoda-child
*/

/* =========================================================================
   Mimoda — huisstijl-tokens (1:1 uit Figma) + basis.
   Kleuren/typografie als custom properties; de core (§5) leest o.a.
   --sellabees-accent / --sellabees-red, dus die zetten we op de merkkleur.
   ========================================================================= */

:root {
	/* Merk-huisstijl — 1:1 uit Figma "Volledig ontwerp V2" (node 75:2), Home 252:1742.
	   Orchidee #e598e5 = accent (knoppen/badges/nieuwsbriefband); roze #fec2dc = topbalk,
	   favs-band, footer, "Stay"-titel, NL-kaart; goud #bea561 = logo, winkelwagenteller,
	   slider-pijlen, stay-social; #ff8cbe = maat-chips + "Aanmelden". */
	--mimoda-accent: #e598e5;        /* primaire knoppen, badges, nieuwsbriefband, stay-titel (design orchidee) */
	--mimoda-accent-soft: #f6e3f6;   /* lichte orchidee-tint: achtergrond van een geselecteerde maat-chip */
	--mimoda-orchid: #e598e5;        /* uitsluitend de "new"-pill in de nav */
	--mimoda-accent-strong: #d86fd8; /* "Abonneren" + hovers (donkerder orchidee, design) */
	--mimoda-pink: #ff8cbe;          /* footer "Aanmelden"-tekst + gevulde maat-chips mobiel (design roze) */
	--mimoda-topbar: #fec2dc;        /* top-USP-balk (klantkeuze roze) */
	--mimoda-coral: #fdcac8;         /* favs-band, hoofd-footer */
	--mimoda-coral-ink: #ec827e;     /* sale-prijs, maat-chips */
	--mimoda-pink-soft: #ffeff6;     /* maat-chip / kleurstaal achtergrond (design 252) */
	--mimoda-mauve: #c099bb;         /* placeholder-tekst footer */
	--mimoda-gold: #bea561;          /* footer bovenrand */
	--mimoda-gray: #f5f5f5;          /* "Stay up to date"-band */
	--mimoda-ink: #111111;           /* standaard tekst */
	--mimoda-white: #ffffff;

	/* Kleurstalen (product-swatches) */
	--mimoda-swatch-yellow: #feffaf;
	--mimoda-swatch-blue: #8ab9e3;
	--mimoda-swatch-green: #93c47d;
	--mimoda-swatch-beige: #f5f5dc;

	/* Typografie */
	--mimoda-font: 'Kumbh Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mimoda-display: 'Abril Fatface', Georgia, 'Times New Roman', serif;

	/* Layout-containers (afgeleid uit de Figma-marges op 1920px) */
	--mimoda-container: 1320px;      /* body-secties: x300–x1620 */
	--mimoda-container-wide: 1540px; /* header: x190–x1730 */
	--mimoda-radius: 5px;            /* knoppen/pills */

	/* Knop-interactie (site-breed, één bron voor het "gevoel").
	   Hover = subtiele lift + zachte schaduw, klik = indruk-effect.
	   De ease volgt dezelfde curve als de scroll-onthul-animaties (anim.css). */
	--mimoda-btn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--mimoda-btn-lift: -2px;         /* verticale verplaatsing bij hover */
	--mimoda-btn-press: 1px;         /* verticale verplaatsing bij klik */
	--mimoda-btn-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
	--mimoda-btn-shadow-active: 0 2px 6px rgba(0, 0, 0, 0.14);
	--mimoda-btn-transition:
		transform .2s var(--mimoda-btn-ease),
		box-shadow .2s ease,
		filter .15s ease,
		background-color .2s ease;

	/* Core-tokens (§5) op de Mimoda-huisstijl zetten */
	--sellabees-accent: #e598e5;
	--sellabees-red: #e598e5; /* historische naam = merk-accent */
	--sellabees-yellow: #feffaf;
	--sellabees-ink: #111111;
	--sellabees-font-heading: var(--mimoda-display);
}

/* --- Reset / basis --------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body.mimoda,
body {
	margin: 0;
	font-family: var(--mimoda-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--mimoda-ink);
	background: var(--mimoda-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* Alle checkboxes + keuzerondjes in de huisstijl-accent (#e598e5): het aangevinkte
   vak/vinkje volgt accent-color. Dekt o.a. "Ingelogd blijven" op de inlogpagina,
   registratie en nieuwsbrief-opt-in (de blok-checkout deed dit al via accent-color). */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--mimoda-accent); }

h1, h2, h3, h4 {
	font-family: var(--mimoda-display);
	font-weight: 400;
	margin: 0;
	line-height: 1.1;
}

/* Alleen voor schermlezers/zoekmachines: tekst die in het ontwerp niet zichtbaar
   is maar er semantisch wél moet staan (o.a. de <h1> van de homepage en de
   labels van de icoonknoppen in de header). Niet display:none — dat zouden
   schermlezers óók overslaan. */
.mimoda-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Containers ------------------------------------------------------ */
.mimoda-container {
	width: 100%;
	max-width: calc(var(--mimoda-container) + 2 * 24px);
	margin-inline: auto;
	padding-inline: 24px;
}
.mimoda-container--wide {
	max-width: calc(var(--mimoda-container-wide) + 2 * 24px);
}

/* Desktop (≥982px): zijmarge = ONTWERP-VERHOUDING i.p.v. een vaste 24px-goot.
   In het Figma-ontwerp (1920px) staat de content-body op x300–x1620 (goot
   15,625% → 1320px) en de header op x190–x1730 (goot 9,90% → 1540px). Door de
   breedte met de vensterbreedte mee te laten schalen volgens diezelfde
   verhoudingen — afgetopt op de ontwerpbreedte — blijft de site op élk scherm
   even "breed" als het ontwerp op 1920px, i.p.v. bijna schermvullend op een
   laptop. Op ≥1920px is het resultaat 1:1 gelijk aan voorheen (1320/1540px).
   De 24px-padding vervalt hier: de proportionele goot ís nu de zijmarge. */
@media (min-width: 982px) {
	.mimoda-container {
		width: min(68.75vw, var(--mimoda-container));
		padding-inline: 0;
	}
	.mimoda-container--wide {
		width: min(80.208vw, var(--mimoda-container-wide));
	}
}

/* Ondergrens voor de brede goot op kleine desktops (1280–±1396px): de volle
   desktop-header (logo + gecentreerd menu + iconenrij met labels) heeft ±1090px
   nodig, maar puur proportioneel is 80,208vw daar smaller — de headergrid drukte
   dan het logo plat (klant 06-08). Zelfde ondergrens-patroon als de winkelwagen:
   zodra 80,208vw > 1120px neemt de verhouding het geruisloos weer over (±1396px).
   Onder 1280px geldt de hamburger-header en is er geen krapte. */
@media (min-width: 1280px) {
	.mimoda-container--wide {
		width: min(max(80.208vw, 1120px), var(--mimoda-container-wide));
	}
}

/* --- Herbruikbare knop (Figma: #dfbbda, radius 5px, hoogte 44px) ------ */
.mimoda-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 22px;
	border: none;
	border-radius: var(--mimoda-radius);
	background: var(--mimoda-accent);
	color: #fff;
	font-family: var(--mimoda-font);
	font-weight: 800; /* ExtraBold */
	font-size: 16px;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--mimoda-btn-transition);
}
.mimoda-btn:hover {
	filter: brightness(0.95);
	transform: translateY(var(--mimoda-btn-lift));
	box-shadow: var(--mimoda-btn-shadow);
}
.mimoda-btn:active {
	transform: translateY(var(--mimoda-btn-press));
	box-shadow: var(--mimoda-btn-shadow-active);
	filter: brightness(0.93);
}

/* Beweging uit bij prefers-reduced-motion: de knop blijft feedback geven via
   schaduw/helderheid, maar verschuift niet meer (toegankelijkheid). */
@media (prefers-reduced-motion: reduce) {
	:root { --mimoda-btn-lift: 0px; --mimoda-btn-press: 0px; }
}

/* Secundaire knop-variant (Figma 252:4892 "Check out our team" op /over-ons/) = roze #fec2dc.
   Bewust NIET globaal: andere pagina's (bv. /onze-winkel/) hebben een eigen kleur. */
.mimoda-btn--coral { background: #fec2dc; }

.mimoda-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* SEO-tekst "lees meer": tijdens het uit-/dichtklappen animeert JS (initSeoMore)
   de hoogte — de clamp zelf (line-clamp/max-height) kan niet transitioneren.
   Globaal, want zowel de homepage (.mimoda-about__text) als de shoppagina
   (.mimoda-shop-seo__text) gebruiken dit mechanisme. */
/* Chrome's scroll-anchoring buiten deze blokken houden. Klapt de SEO-tekst dicht,
   dan verdwijnen er honderden pixels inhoud en corrigeert de browser de
   scrollpositie op eigen initiatief — ná onze eigen scroll naar de kop, die daarmee
   ongedaan werd gemaakt (gemeten: kop landde op 6px i.p.v. onder de vaste balken). */
.mimoda-about__text,
.mimoda-shop-seo__text {
	overflow-anchor: none;
}

.mimoda-seo-animating {
	overflow: hidden;
	transition: height .35s ease;
}

/* =========================================================================
   Mobiel (≤981px) — basis. Container-zijmarge volgt het Sjon/Fleur-systeem
   (12,5% percentagegoot ≈ 46–50px op telefoonbreedte, gelijk aan de
   Figma-marge van het mobiele ontwerp). Secties/kaarten erven deze goot;
   volle-breedte banden (hero/favs/footer) blijven edge-to-edge met eigen
   binnenmarge via .mimoda-container.
   ========================================================================= */
@media (max-width: 981px) {
	.mimoda-container { padding-inline: 12.5%; }
	html, body { overflow-x: clip; }
}