/*
Theme Name: Muize-Pluis
Theme URI: https://www.muize-pluis.nl/
Author: Muize-Pluis
Description: Snel, licht blokthema voor de babywinkel Muize-Pluis. Kleuren, lettertypes en de homepage pas je visueel aan via Weergave > Editor > Stijlen. Inclusief blokkenbibliotheek (patronen) voor de homepage en winkel, en volledige WooCommerce-ondersteuning.
Version: 1.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: muizepluis
Tags: block-patterns, full-site-editing, e-commerce, style-variations, custom-colors, custom-logo
*/

/* Alleen kleine aanvullingen; alle kleuren en lettertypes komen uit theme.json (aanpasbaar in de Editor). */

:where(body) { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(img) { height: auto; }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* Header */
.mp-topbar p { margin: 0; }
.mp-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .mp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mp-header { top: 0; } }
.mp-header .wp-block-site-logo img { transition: transform .25s ease; }
.mp-header .wp-block-site-logo a:hover img { transform: rotate(-4deg) scale(1.03); }
.mp-header .wp-block-search__input { border-radius: 999px; border-color: var(--wp--preset--color--base-3); background: var(--wp--preset--color--white); padding-left: 1.1em; }
.mp-header .wp-block-search__inside-wrapper { border-radius: 999px; border-color: var(--wp--preset--color--base-3) !important; background: var(--wp--preset--color--white); }
.mp-header .wp-block-search__button { border-radius: 999px; }
.mp-nav .wp-block-navigation-item__content { padding: .35em .1em; border-bottom: 2px solid transparent; transition: border-color .2s; }
.mp-nav .wp-block-navigation-item__content:hover { border-bottom-color: currentColor; }
.mp-nav .wp-block-navigation__submenu-container { border-radius: var(--wp--custom--radius--small); border: 0 !important; box-shadow: var(--wp--preset--shadow--kaart); padding: .4em 0; min-width: 220px !important; }
.mp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .45em 1.1em; border: 0; }
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--white); }

/* Kaarten, rondingen, schaduwen */
.is-style-mp-kaart { border-radius: var(--wp--custom--radius--medium); box-shadow: var(--wp--preset--shadow--zacht); overflow: hidden; }
.is-style-mp-golf { position: relative; }
.is-style-mp-golf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: var(--wp--preset--color--base);
  -webkit-mask: radial-gradient(14px at 50% 0, transparent 98%, #000) 0 0 / 28px 100% repeat-x; mask: radial-gradient(14px at 50% 0, transparent 98%, #000) 0 0 / 28px 100% repeat-x; }
.is-style-mp-ronde-foto img { border-radius: 50% !important; aspect-ratio: 1; object-fit: cover; }
.is-style-mp-stempel img { border-radius: 50% !important; outline: 6px dotted var(--wp--preset--color--base-3); outline-offset: 6px; }
.wp-block-button.is-style-mp-zacht .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); }
.wp-block-button.is-style-mp-zacht .wp-block-button__link:hover { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--white); }
.wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid currentColor; background: transparent; color: var(--wp--preset--color--primary-dark); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); }

/* Categorie-tegels met foto (cover) */
.mp-tegel { border-radius: var(--wp--custom--radius--medium); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.mp-tegel:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--kaart); }
.mp-tegel .wp-block-cover__image-background { transition: transform .6s ease; }
.mp-tegel:hover .wp-block-cover__image-background { transform: scale(1.05); }
.mp-tegel a { text-decoration: none; }
.mp-tegel a::after { content: ""; position: absolute; inset: 0; }

/* USP-balk en iconen */
.mp-usp p { margin: 0; }
.mp-icoon { font-size: 1.6rem; line-height: 1; }

/* WooCommerce: productkaarten */
.wc-block-product-template .wc-block-product, .wc-block-grid__product, ul.products li.product { text-align: left; }
.wc-block-components-product-image img, .wc-block-grid__product-image img { border-radius: var(--wp--custom--radius--medium); aspect-ratio: 1; object-fit: cover; background: var(--wp--preset--color--base-2); }
.wc-block-grid__product-title, .wc-block-components-product-name, .wp-block-post-title a { color: var(--wp--preset--color--contrast); font-weight: 600; text-decoration: none; }
.wc-block-components-product-sale-badge, .wc-block-grid__product-onsale, .onsale { background: var(--wp--preset--color--accent-2) !important; color: var(--wp--preset--color--white) !important; border: 0 !important; border-radius: 999px !important; font-weight: 700; }
.wc-block-components-product-price del, .wc-block-grid__product-price del { color: var(--wp--preset--color--contrast-2); font-weight: 400; }
.wc-block-grid__product .wp-block-button__link, .wc-block-components-product-button .wp-block-button__link { font-size: .85rem; }
.wc-block-grid__products { gap: 0; }
.woocommerce-breadcrumb, .wc-block-breadcrumbs { font-size: .875rem; color: var(--wp--preset--color--contrast-2); }
.wc-block-components-notice-banner { border-radius: var(--wp--custom--radius--small); }
.woocommerce .quantity input.qty, .wc-block-components-quantity-selector { border-radius: 999px; }

/* Footer */
.mp-footer a { text-decoration: none; }
.mp-footer a:hover { text-decoration: underline; }
.mp-footer .wp-block-navigation__container { gap: .35em; }

/* Toegankelijk: minder beweging */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Tekst op foto's altijd leesbaar (links nemen de kleur van de kop over) */
.wp-block-cover a, .wp-block-cover a:hover { color: inherit; }
.mp-tegel h3 { text-shadow: 0 1px 12px rgba(0,0,0,.25); }

/* Foto naast tekst: niet hoger dan nodig */
.wp-block-media-text__media img { max-height: 480px; width: 100%; object-fit: cover; }
.wp-block-media-text .wp-block-media-text__content { padding: var(--wp--preset--spacing--50); }

/* Lijsten in de footer zonder bolletjes */
.mp-footer ul { list-style: none; margin: 0; }

/* Mobiel: logo + iconen bovenaan, zoekbalk eronder over de hele breedte */
@media (max-width: 781px) {
  .mp-topbar { font-size: 12px !important; }
  .mp-header-rij { flex-wrap: wrap !important; row-gap: .6rem; }
  .mp-header-rij .wp-block-site-logo { order: 1; }
  .mp-header-rij .mp-iconen { order: 2; margin-left: auto; }
  .mp-header-rij .wp-block-search { order: 3; flex: 1 1 100% !important; width: 100% !important; }
  .mp-header-rij .wp-block-site-logo img { width: 60px !important; }
  .wp-block-columns.mp-usp { flex-wrap: wrap !important; }
  .wp-block-columns.mp-usp > .wp-block-column { flex-basis: calc(50% - 1rem) !important; }
  .wp-block-media-text .wp-block-media-text__content { padding: var(--wp--preset--spacing--40) 0; }
}