/*
Theme Name: Catalogo by diloweb
Theme URI: https://diloweb.com/
Author: DiloWeb
Author URI: https://diloweb.com/
Description: Tema de bloques para catálogos de productos con pedidos por WhatsApp. Pensado para pequeños negocios de Latinoamérica: incluye 3 estilos listos (Moda y accesorios, Comida y repostería, Servicios y tecnología), páginas de ejemplo y un asistente de configuración. Funciona junto al plugin "Pedidos por chat by DiloWeb".
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: catalogo-by-diloweb
Tags: full-site-editing, block-patterns, block-styles, style-variations, e-commerce, one-column, wide-blocks, custom-colors, custom-logo, custom-menu, editor-style, translation-ready
*/

/* ---------------------------------------------------------------
 * Accesibilidad: foco visible en cualquier fondo
 * ------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--wp--preset--color--contrast);
	border-radius: 2px;
}

.wp-block-button__link:focus-visible {
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

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

/* ---------------------------------------------------------------
 * Encabezado y pie
 * ------------------------------------------------------------- */

.cdw-header {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

.cdw-header .wp-block-site-logo img {
	max-height: 56px;
	width: auto;
}

@media (max-width: 600px) {
	.cdw-hide-mobile {
		display: none !important;
	}
}

.cdw-footer {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

.cdw-footer a {
	color: inherit;
}

.cdw-footer .wp-block-social-links {
	gap: 0.75rem;
}

/* ---------------------------------------------------------------
 * Estilos de bloque del tema
 * ------------------------------------------------------------- */

/* Grupo → "Tarjeta" */
.wp-block-group.is-style-cdw-card {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--custom--shadow);
	overflow: hidden;
	padding: var(--wp--preset--spacing--50);
}

.wp-block-group.is-style-cdw-card > .wp-block-image:first-child {
	margin-left: calc(var(--wp--preset--spacing--50) * -1);
	margin-right: calc(var(--wp--preset--spacing--50) * -1);
	margin-top: calc(var(--wp--preset--spacing--50) * -1);
}

.wp-block-group.is-style-cdw-card > .wp-block-image:first-child img {
	aspect-ratio: 4 / 3;
	border-radius: 0;
	object-fit: cover;
	width: 100%;
}

/* Imagen → "Redondeada" */
.wp-block-image.is-style-cdw-rounded img {
	border-radius: var(--wp--custom--radius--large);
}

/* Botón → "WhatsApp" */
.wp-block-button.is-style-cdw-whatsapp .wp-block-button__link {
	align-items: center;
	background-color: var(--wp--preset--color--whatsapp);
	color: #ffffff;
	display: inline-flex;
	gap: 0.55em;
}

.wp-block-button.is-style-cdw-whatsapp .wp-block-button__link::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	flex: none;
	height: 1.25em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.7 6.5L3 29l6.7-1.8A13 13 0 0 0 16 29c7.2 0 13-5.8 13-13S23.2 3 16 3Zm0 23.6c-2 0-3.9-.5-5.6-1.5l-.4-.2-4 1 1.1-3.8-.3-.4A10.6 10.6 0 1 1 16 26.6Zm5.9-8c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-.9-.8-1.6-1.9-1.8-2.2-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.3.3-.5.1-.2 0-.4 0-.6l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7s1.1 3.1 1.3 3.3c.2.2 2.3 3.4 5.5 4.8 2.7 1.1 3.2.9 3.8.8.6-.1 1.9-.8 2.2-1.5.3-.8.3-1.4.2-1.5-.1-.1-.3-.2-.6-.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.7 6.5L3 29l6.7-1.8A13 13 0 0 0 16 29c7.2 0 13-5.8 13-13S23.2 3 16 3Zm0 23.6c-2 0-3.9-.5-5.6-1.5l-.4-.2-4 1 1.1-3.8-.3-.4A10.6 10.6 0 1 1 16 26.6Zm5.9-8c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-.9-.8-1.6-1.9-1.8-2.2-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.3.3-.5.1-.2 0-.4 0-.6l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7s1.1 3.1 1.3 3.3c.2.2 2.3 3.4 5.5 4.8 2.7 1.1 3.2.9 3.8.8.6-.1 1.9-.8 2.2-1.5.3-.8.3-1.4.2-1.5-.1-.1-.3-.2-.6-.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 1.25em;
}

.wp-block-button.is-style-cdw-whatsapp .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Lista → "Con marcas" */
ul.is-style-cdw-checks {
	list-style: none;
	padding-left: 0;
}

ul.is-style-cdw-checks li {
	padding-left: 1.75em;
	position: relative;
}

ul.is-style-cdw-checks li + li {
	margin-top: 0.5em;
}

ul.is-style-cdw-checks li::before {
	color: var(--wp--preset--color--accent);
	content: "✓";
	font-weight: 700;
	left: 0;
	position: absolute;
}

/* ---------------------------------------------------------------
 * Secciones de los patrones
 * ------------------------------------------------------------- */

.cdw-step-number {
	align-items: center;
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
	color: var(--wp--preset--color--accent-contrast);
	display: inline-flex;
	font-weight: 700;
	height: 3rem;
	justify-content: center;
	margin-bottom: 0;
	width: 3rem;
}

.cdw-eyebrow {
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cdw-map iframe {
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--wp--custom--radius--large);
	height: auto;
	width: 100%;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
}

.wp-block-quote cite {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

/* Aviso cuando falta el plugin del catálogo */
.cdw-catalog-missing {
	background: var(--wp--preset--color--base-2);
	border-radius: var(--wp--custom--radius--large);
	padding: var(--wp--preset--spacing--50);
	text-align: center;
}

.cdw-catalog-missing__admin {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------
 * Integración con el plugin "Pedidos por chat by DiloWeb"
 * Usa los colores, bordes y tipografías del estilo elegido.
 * (El color del botón de WhatsApp lo define el plugin en sus Ajustes.)
 * ------------------------------------------------------------- */

body {
	--pwdw-radius: var(--wp--custom--radius--medium);
	--pwdw-text: var(--wp--preset--color--contrast);
	--pwdw-surface: var(--wp--preset--color--base);
	--pwdw-muted: var(--wp--preset--color--contrast-2);
	--pwdw-border: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
}

.pwdw-card {
	border-radius: var(--wp--custom--radius--large);
}

.pwdw-filter__item.is-active,
.pwdw-filter__item:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}