/*
Theme Name: Café Raiola
Theme URI: https://caferaiola.com
Description: Tema hijo de Hello Elementor para caferaiola.com.
Author: Café Raiola
Template: hello-elementor
Version: 1.0.2
Text Domain: cafe-raiola
*/

/* ---------------------------------------------------------------------------
   Contact Form 7

   Único bloque de CSS propio del sitio, y por un motivo concreto: CF7 no expone
   ninguna opción de estilo, así que su marcado solo se puede vestir desde aquí.
   Todo lo demás del diseño vive en las Global Classes de Elementor.

   No hay ni un color ni una tipografía escritos a mano: todo son las Global
   Variables que publica Elementor (--cromo, --calico, --loneta, --costura,
   --etiqueta, --texto, --titular). Si cambias un token en el panel, el
   formulario cambia con él.
   --------------------------------------------------------------------------- */

.wpcf7 {
	font-family: var(--texto), "Helvetica Neue", Arial, sans-serif;
	width: 100%;
}

.wpcf7 p {
	margin: 0;
}

/* ---- Banda: campo largo y botón en la misma línea ---- */
.wpcf7 .raiola-fila {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: end;
}

.wpcf7 .raiola-campo {
	min-width: 0;
}

.wpcf7 .raiola-campo label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--etiqueta), "Arial Narrow", sans-serif;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--loneta);
}

/* CF7 envuelve cada campo en un span que rompe la rejilla si no se estira */
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Campo: una línea cosida, no una caja redondeada */
.wpcf7 input[type="email"],
.wpcf7 input[type="text"],
.wpcf7 textarea {
	width: 100%;
	font-family: inherit;
	font-size: 16px;
	color: var(--costura);
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--loneta);
	border-radius: 0;
	padding: 9px 2px;
	box-shadow: none;
}

.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="text"]:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-bottom-color: var(--cromo);
	background: rgba(242, 194, 5, 0.14);
}

.wpcf7 ::placeholder {
	color: var(--costura);
	opacity: 0.45;
}

/* ---- Consentimiento: rejilla de dos columnas.
   Con flex, la casilla aplastaba el interlineado de la segunda línea. ---- */
.wpcf7 .raiola-consentimiento {
	margin-top: 18px;
}

.wpcf7 .raiola-consentimiento .wpcf7-list-item {
	margin: 0;
	display: block;
}

.wpcf7 .raiola-consentimiento .wpcf7-list-item label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 11px;
	align-items: start;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--costura);
	opacity: 0.86;
}

.wpcf7 input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 3px 0 0;
	accent-color: var(--loneta);
}

.wpcf7 .raiola-consentimiento .wpcf7-list-item-label {
	display: inline;
}

.wpcf7 .raiola-consentimiento a {
	color: var(--loneta);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- Botón: placa de cromo, esquinas vivas ---- */
.wpcf7 .raiola-envio {
	display: flex;
	align-items: flex-end;
}

.wpcf7 input[type="submit"] {
	font-family: var(--titular), Impact, sans-serif;
	font-size: 21px;
	line-height: 1.1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: var(--cromo);
	color: var(--costura);
	border: 0;
	border-radius: 0;
	padding: 12px 28px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s steps(2), color 0.15s steps(2);
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible {
	background: var(--loneta);
	color: var(--cromo);
	outline: none;
}

/* ---- Respuestas: costuras, no globos de colores ---- */
.wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 11px 14px;
	border: 2px dashed var(--loneta);
	border-radius: 0;
	font-family: var(--etiqueta), "Arial Narrow", sans-serif;
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--costura);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--loneta);
	background: rgba(18, 80, 58, 0.08);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: var(--cromo);
	background: rgba(242, 194, 5, 0.16);
}

.wpcf7 .wpcf7-not-valid-tip {
	font-family: var(--etiqueta), "Arial Narrow", sans-serif;
	font-size: 11.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--costura);
	margin-top: 6px;
}

.wpcf7 .wpcf7-spinner {
	background-color: var(--loneta);
}

/* ---- Estrecho: la banda se apila ---- */
@media (max-width: 700px) {
	.wpcf7 .raiola-fila {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.wpcf7 .raiola-envio {
		justify-content: flex-start;
	}
}

/* ---------------------------------------------------------------------------
   Menú desplegable de móvil

   Segundo y último bloque de CSS propio, por el mismo motivo que el anterior:
   los ajustes de Hello Elementor solo visten `.site-navigation`, que es el menú
   de escritorio. El desplegable de móvil es `.site-navigation-dropdown`, otro
   elemento que su panel no cubre, y sin esto sale con fondo blanco y enlaces
   grises.

   Igual que antes: cero colores escritos a mano, todo Global Variables.
   --------------------------------------------------------------------------- */

.site-navigation-dropdown ul.menu {
	background: var(--costura);
	border-block-end: 2px solid var(--cromo-apagado);
}

.site-navigation-dropdown ul.menu li a {
	/* Hello pinta cada enlace de blanco: sin esto el calicó queda ilegible */
	background: transparent;
	font-family: var(--etiqueta), "Arial Narrow", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--calico);
	padding: 18px 24px;
	border-block-end: 1px dashed rgba(242, 194, 5, 0.28);
	transition: background 0.12s steps(2), color 0.12s steps(2);
}

.site-navigation-dropdown ul.menu li:last-child a {
	border-block-end: 0;
}

.site-navigation-dropdown ul.menu li a:hover,
.site-navigation-dropdown ul.menu li a:focus-visible {
	background: var(--cromo);
	color: var(--costura);
	outline: none;
}

/* La página en la que estás: se marca con el cromo, no con un gris del tema */
.site-navigation-dropdown ul.menu li.current-menu-item > a,
.site-navigation-dropdown ul.menu li.current_page_item > a {
	background: transparent;
	color: var(--cromo);
}

/* El botón hamburguesa */
.site-header .site-navigation-toggle {
	color: var(--cromo);
	background: transparent;
	border: 1.5px solid var(--laton);
	border-radius: 0;
	padding: 9px 10px;
}

.site-header .site-navigation-toggle:hover,
.site-header .site-navigation-toggle:focus-visible {
	background: var(--cromo);
	color: var(--costura);
	border-color: var(--cromo);
	outline: none;
}