/*
Theme Name:   Storefront Child
Theme URI:    https://teamworkeditorial.com/
Description:  Tema hijo de Storefront para Teamwork Editorial. Aquí van todas las personalizaciones; Storefront (el tema padre) queda intacto y actualizable.
Author:       Teamwork Editorial
Author URI:   https://teamworkeditorial.com/
Template:     storefront
Version:      1.0.0
Text Domain:  storefront-child
*/

/* ==========================================================================
   Personalizaciones CSS de Teamwork Editorial
   Escribe aquí tus estilos. Se cargan DESPUÉS de los de Storefront.
   ========================================================================== */

/* --- Paleta de marca (teal) a nivel de sitio --- */
:root {
	--twe-teal: #1a97ac;
	--twe-teal-dark: #137f92;
}

a {
	color: var(--twe-teal);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.wp-block-button__link,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
.woocommerce button.button.alt {
	background-color: var(--twe-teal);
	border-color: var(--twe-teal);
	color: #fff;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--twe-teal-dark);
	border-color: var(--twe-teal-dark);
	color: #fff;
}

/* Footer en teal (como el diseño). */
.site-footer {
	background-color: var(--twe-teal);
	color: #fff;
}

.site-footer a {
	color: rgba(255, 255, 255, .92);
}

.site-footer a:hover {
	color: #fff;
}

/* --- Footer: 4 columnas de widgets (logo · menú · menú · contacto) + barra inferior --- */

/* Más aire arriba/abajo del bloque de footer. */
.site-footer .footer-widgets {
	padding-top: 2.5em;
	padding-bottom: 1.5em;
}

/* Storefront pone a cada widget «margin: 0 0 3.706325903em». En el footer lo
   anulamos (#colophon para ganar al «.widget» del padre). */
#colophon.site-footer .footer-widgets .widget {
	margin-bottom: 0;
}

/* Logo (widget Imagen en footer-1): tamaño contenido. */
.site-footer .footer-widget-1 img {
	max-width: 180px;
	height: auto;
}

/* Menús del footer (widgets Menú de navegación) y listas: sin viñetas, compactos. */
.site-footer .footer-widgets .widget ul,
.site-footer .footer-widgets .widget ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .footer-widgets .widget ul li {
	margin: 0 0 .6em;
	padding: 0;
	list-style: none;
}

.site-footer .footer-widgets .widget ul li::before {
	content: none;
}

/* Oculta el selector de idioma AUTOMÁTICO que WPML inyecta en el pie (se engancha
   a wp_footer y sale fuera del footer). Lo correcto es desactivarlo en
   WPML → Opciones del selector de idioma; esto solo lo oculta. No afecta a un
   selector colocado como widget o en el menú (clases distintas). */
.wpml-ls-statics-footer {
	display: none;
}

/* Enlaces de los menús/listas del footer: blanco puro, sin efecto de enlace y
   un poco más grandes (incluye el bloque «Lista» wp-block-list).
   Se usa #colophon (id del footer) para ganar a la regla del Personalizador de
   Storefront: «.site-footer a:not(.button):not(.components-button){color:#333}». */
#colophon.site-footer .footer-widgets a,
#colophon.site-footer .footer-widgets a:not(.button) {
	color: #fff;
	text-decoration: none;
	font-size: 1.05rem;
}

#colophon.site-footer .footer-widgets a:hover,
#colophon.site-footer .footer-widgets a:focus {
	color: #fff;
	text-decoration: none;
	opacity: .85;
}

#colophon.site-footer .footer-widgets .widget ul,
#colophon.site-footer .footer-widgets .wp-block-list {
	font-size: 1.05rem;
	line-height: 1.6;
}

/* Columna de contacto (HTML personalizado en footer-4). */
.site-footer .footer-widget-4 p {
	margin: 0 0 .6em;
	line-height: 1.5;
}

.site-footer .footer-widget-4 .underline a {
	text-decoration: underline;
}

/* Títulos de widget del footer en blanco (por si algún widget lleva título). */
.site-footer .footer-widgets .widget-title {
	color: #fff;
	font-size: 1em;
	margin-bottom: 1em;
}

/* Barra inferior: enlaces legales (izq.) + copyright (der.). */
.twe-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5em 1.5em;
	padding: 1.25em 0;
	margin-top: 1em;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: .85em;
}

.twe-footer-bottom__left ul.twe-footer-legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: .25em 1.25em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.twe-footer-bottom__left ul.twe-footer-legal-menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.twe-footer-bottom__left ul.twe-footer-legal-menu li::before {
	content: none;
}

/* Enlaces legales en blanco, sin efecto de enlace (igual que los de arriba;
   #colophon para ganar a la regla del Personalizador de Storefront). */
#colophon.site-footer .twe-footer-bottom a,
#colophon.site-footer .twe-footer-bottom a:not(.button) {
	color: #fff;
	text-decoration: none;
}

#colophon.site-footer .twe-footer-bottom a:hover,
#colophon.site-footer .twe-footer-bottom a:focus {
	color: #fff;
	text-decoration: none;
	opacity: .85;
}

.twe-footer-bottom__right {
	color: rgba(255, 255, 255, .82);
	line-height: 1.7;
	text-align: right;
}

/* Cada bloque de datos (dirección, CP/ciudad, provincia) va separado por « · ». */
.twe-footer-bottom__right span span {
	white-space: nowrap;
}

.twe-footer-bottom__right span span::before {
	content: "·";
	margin: 0 .6em;
	opacity: .55;
}

@media (max-width: 767px) {
	.twe-footer-bottom {
		justify-content: flex-start;
	}

	.twe-footer-bottom__right {
		text-align: left;
	}
}

/* --- Cabecera en una sola línea (escritorio): logo · menú · búsqueda · carrito --- */
@media (min-width: 768px) {
	#masthead .col-full {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 1.5em;
	}

	/* Logo a la izquierda. Anula el «width:73.9% + float:left» que Storefront pone
	   a .site-branding cuando WooCommerce está activo (.woocommerce-active …). */
	#masthead .site-branding {
		order: 1;
		margin: 0;
		width: auto;
		float: none;
		flex: 0 0 auto;
	}

	/* Menú principal a la izquierda (no se estira); el carrito y el usuario van
	   pegados a la derecha (margin-left:auto en el carrito). */
	#masthead #site-navigation {
		order: 2;
		flex: 0 1 auto;
		margin: 0;
		width: auto;
		clear: none;
	}

	#masthead #site-navigation .primary-navigation {
		float: none;
		margin: 0;
	}

	/* Menú principal HORIZONTAL (al quitar el wrapper .storefront-primary-navigation
	   se pierde la regla del padre que lo ponía en línea; la reponemos). */
	#masthead #site-navigation .primary-navigation > ul.menu,
	#masthead #site-navigation ul.nav-menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#masthead #site-navigation .primary-navigation li {
		float: none;
		list-style: none;
		margin: 0 1.5em 0 0;
		padding: 0;
		border: 0;
	}

	#masthead #site-navigation .primary-navigation li::before {
		content: none;
	}

	#masthead #site-navigation .primary-navigation a {
		display: block;
		padding: 0;
	}

	/* Carrito al extremo derecho. Anula el «width:21.7% + float:right» que
	   Storefront pone a .site-header-cart cuando WooCommerce está activo. */
	#masthead #site-header-cart {
		order: 4;
		width: auto;
		float: none;
		margin: 0 0 0 auto;
		flex: 0 0 auto;
	}

	/* Menú de usuario (avatar + desplegable) a la derecha del carrito. */
	#masthead .twe-user-menu {
		order: 5;
		margin: 0;
		flex: 0 0 auto;
	}

	/* Solo el avatar: ocultamos el nombre junto al avatar (sigue en el desplegable). */
	#masthead .twe-user-menu__toggle .twe-user-menu__name {
		display: none;
	}

	/* Zona de widgets de la cabecera (selector de idioma WPML) al extremo derecho. */
	#masthead .twe-header-widgets {
		order: 6;
		margin: 0;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
	}

	#masthead .twe-header-widgets .widget {
		margin: 0;
	}

	/* Carrito compacto: icono de cesta + nº de artículos (sin el precio total),
	   con el ancho justo para que quepa el menú en la línea. */
	#masthead #site-header-cart .cart-contents {
		display: inline-flex;
		align-items: center;
		gap: .35em;
		padding: .5em 0;
	}

	/* Fuera el importe total. */
	#masthead #site-header-cart .cart-contents .amount {
		display: none;
	}

	/* Contador («1 producto») al lado del icono, legible. */
	#masthead #site-header-cart .cart-contents .count {
		opacity: 1;
		margin: 0;
		font-size: .9em;
		white-space: nowrap;
	}

	/* Icono de carrito (Font Awesome, en ::after): aire inferior para alinearlo. */
	#masthead #site-header-cart .cart-contents::after {
		padding-bottom: 10px;
	}

	/* Mini-carrito: se despliega al pasar el ratón (comportamiento nativo de
	   Storefront), pero con ancho propio y anclado a la DERECHA para que no se
	   salga de pantalla al estar el carrito al final de la línea. */
	#masthead #site-header-cart .widget_shopping_cart {
		width: 340px;
		max-width: 90vw;
		left: auto;
		right: -999em;
		background: #fff;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
		border-radius: 4px;
	}

	#masthead #site-header-cart:hover .widget_shopping_cart,
	#masthead #site-header-cart.focus .widget_shopping_cart {
		left: auto;
		right: 0;
	}

	#masthead .secondary-navigation {
		order: 5;
	}

	/* Oculta el menú de respaldo (lista de TODAS las páginas) que Storefront
	   genera cuando la ubicación «Handheld» no tiene menú asignado. */
	#masthead #site-navigation > .menu {
		display: none;
	}
}

/* Logo un ~30% más pequeño (de 152px a 106px de ancho). */
.site-branding .custom-logo,
.site-header .custom-logo {
	max-width: 106px;
	height: auto;
}

/* --- Menú de usuario de la cabecera (avatar + desplegable) --- */
.twe-user-menu {
	position: relative;
}

.twe-user-menu__toggle,
.twe-user-menu__login {
	display: flex;
	align-items: center;
	gap: .5em;
	background: none;
	border: 0;
	padding: .35em .5em;
	margin: 0;
	cursor: pointer;
	font: inherit;
	line-height: 1.2;
	color: inherit;
	text-decoration: none;
}

.twe-user-menu__avatar {
	border-radius: 50%;
	display: block;
}

.twe-user-menu__name {
	font-weight: 600;
}

/* Flecha del desplegable. */
.twe-user-menu__toggle::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	margin-left: .1em;
	transition: transform .15s ease;
}

.twe-user-menu:hover .twe-user-menu__toggle::after,
.twe-user-menu:focus-within .twe-user-menu__toggle::after {
	transform: rotate(180deg);
}

.twe-user-menu__list {
	position: absolute;
	right: 0;
	top: 100%;
	min-width: 190px;
	margin: 0;
	padding: .35em 0;
	list-style: none;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.twe-user-menu:hover .twe-user-menu__list,
.twe-user-menu:focus-within .twe-user-menu__list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.twe-user-menu__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.twe-user-menu__list li::before {
	content: none;
}

.twe-user-menu__list a {
	display: block;
	padding: .55em 1.15em;
	color: #333;
	text-decoration: none;
	white-space: nowrap;
}

.twe-user-menu__list a:hover,
.twe-user-menu__list a:focus {
	background: #f3f7f8;
	color: var(--twe-teal);
}

.twe-user-menu__logout a {
	border-top: 1px solid #eee;
	margin-top: .2em;
}

/* --- Zona de widgets de la cabecera: selector de idioma de WPML inline --- */
.twe-header-widget {
	margin: 0;
}

.twe-header-widgets .wpml-ls,
.twe-header-widgets .wpml-ls ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.twe-header-widgets .wpml-ls ul {
	display: flex;
	align-items: center;
	gap: .25em .75em;
}

.twe-header-widgets .wpml-ls li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.twe-header-widgets .wpml-ls li::before {
	content: none;
}

.twe-header-widgets .wpml-ls a {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	text-decoration: none;
}

.twe-header-widgets .wpml-ls-flag {
	display: block;
}

/* Quitar el margen inferior del breadcrumb de Storefront. */
.storefront-breadcrumb {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.storefront-breadcrumb {
		margin-bottom: 0;
	}
}

/* Carrito y Checkout: al ir a ancho completo, Storefront aplica a los bloques
   .alignwide/.alignfull márgenes negativos (calc(25% - 25vw)) que los sacan del
   contenedor. Anulamos esa regla con mayor especificidad (añadimos la clase del
   body woocommerce-cart / woocommerce-checkout). */
.storefront-align-wide.storefront-full-width-content.woocommerce-cart .hentry .entry-content .alignwide,
.storefront-align-wide.storefront-full-width-content.woocommerce-cart .hentry .entry-content .alignfull,
.storefront-align-wide.storefront-full-width-content.woocommerce-checkout .hentry .entry-content .alignwide,
.storefront-align-wide.storefront-full-width-content.woocommerce-checkout .hentry .entry-content .alignfull {
	margin-left: 0;
	margin-right: 0;
}

/* --- Destacar las variaciones (idioma) en el carrito y checkout --- */
.woocommerce-cart .product-name .variation,
.woocommerce-checkout .product-name .variation,
.mini_cart_item .variation {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35em;
	margin: 0.4em 0;
	font-size: 0.85em;
}

.woocommerce-cart .product-name .variation dt,
.woocommerce-checkout .product-name .variation dt,
.mini_cart_item .variation dt {
	color: #555;
	font-weight: 600;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
}

.woocommerce-cart .product-name .variation dd,
.woocommerce-checkout .product-name .variation dd,
.mini_cart_item .variation dd {
	margin: 0;
	padding: 0;
	float: none;
}

/* Aplicar el fondo azul solo al VALOR (ej. "Es"), tanto en plantillas clásicas (dd) como en bloques de WC */
.woocommerce-cart .product-name .variation dd,
.woocommerce-checkout .product-name .variation dd,
.mini_cart_item .variation dd,
.wc-block-components-product-details__idioma .wc-block-components-product-details__value,
.twe-cart-lang {
	background-color: var(--twe-teal);
	color: #fff !important;
	border-radius: 3px;
	padding: 2px 6px;
	font-weight: 700;
	display: inline-block;
}

.woocommerce-cart .product-name .variation dd p,
.woocommerce-checkout .product-name .variation dd p,
.mini_cart_item .variation dd p {
	margin: 0;
	display: inline;
	color: #fff !important;
}