/*
 * Ajustes de Camposanto Los Rosales sobre la plantilla theme3305.
 * Se carga después de template.css (ver includes/includes.php). Sin !important salvo donde la plantilla ya lo usa.
 *
 * 1. Iconos de redes sociales: fila horizontal (antes, columna vertical de 18 px pegada al menú o al borde).
 * 2. Menú principal: tamaño fluido para que no salte debajo del logo ni se parta según el ancho.
 * 3. Logo y slider en pantallas pequeñas.
 * 4. Desbordes horizontales (scroll lateral).
 * 8. Formularios de Creative Contact Form: etiqueta junto a su campo.
 */

/* ---------- 1. Iconos de redes sociales ---------- */
/* El módulo "Social menu" usa ahora la clase de menú "social" (antes "home_menu", que heredaba float:right del menú). */
#top { position: relative; }
#top .mod-menu__social .nav.menu.social {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	float: none;
	line-height: 1;
}
#top .mod-menu__social .nav.menu.social li { display: block; margin: 0; padding: 0; }
#top .mod-menu__social .nav.menu.social li + li { margin-left: 0; }
#top .mod-menu__social .nav.menu.social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;            /* área táctil cómoda */
	font-size: 17px;
	color: #c1a874;
	text-decoration: none;
	border-radius: 50%;
	transition: color .2s, background-color .2s;
}
#top .mod-menu__social .nav.menu.social a:hover,
#top .mod-menu__social .nav.menu.social a:focus { color: #fff; background: #c1a874; }

@media (min-width: 768px) {
	/* Escritorio/tablet: arriba a la derecha, alineados con el final del menú, sin quitarle espacio. */
	#top > .moduletable.redes-sociales {
		position: absolute;
		top: 6px;
		right: 44px;
		z-index: 5;
	}
}
@media (max-width: 767px) {
	/* Móvil: fila centrada debajo del logo. */
	#top > .moduletable.redes-sociales {
		clear: both;
		float: none;
		width: 100%;
		padding: 4px 0 10px;
	}
	#top .mod-menu__social .nav.menu.social { justify-content: center; }
}

/* ---------- 2. Menú principal (IceMegaMenu) ---------- */
/* La plantilla cambia el tamaño en 6 cortes (1300/1200/1170/1020/979/820 px) y entre ~1300 y ~1460 px el menú
   de 18 px no cabía junto al logo y saltaba debajo; a 768 px bajaba a 11 px. Se sustituye por:
   - 768-1199 px: menú en su propia fila bajo el logo, centrado, a 12-13 px legibles.
   - >= 1200 px: junto al logo, con tamaño fluido de 13 a 18 px que siempre cabe. */
@media (min-width: 768px) and (max-width: 1199px) {
	#top .home_menu { float: none; clear: both; }
	#top .icemegamenu { float: none; display: table; margin: 8px auto 14px; }
	.icemegamenu > ul > li > a.iceMenuTitle { font-size: 12px; margin: 4px 9px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.icemegamenu > ul > li > a.iceMenuTitle { font-size: 13px; margin: 4px 13px; }
}
@media (min-width: 1200px) {
	#top .icemegamenu { margin-top: 46px; }
	.icemegamenu > ul > li > a.iceMenuTitle {
		font-size: clamp(13px, calc(13px + (100vw - 1200px) * 0.0178), 18px);
		margin: 4px clamp(11px, calc(11px + (100vw - 1200px) * 0.0214), 17px);
	}
}
/* Nunca partir una etiqueta del menú en dos líneas. */
.icemegamenu > ul > li > a.iceMenuTitle { white-space: nowrap; }

/* ---------- 3. Logo y slider en pantallas pequeñas ---------- */
@media (max-width: 767px) {
	#logo { float: none; min-width: 0; margin: 12px 16px 0; text-align: center; }
	#logo a { display: inline-block; }
	#logo img { float: none; padding-right: 0; max-width: 100%; height: auto; }
	/* Botón del slider: que no se corte en móviles estrechos. */
	.swiper-slide-caption .btn { white-space: normal; max-width: calc(100vw - 48px); }
}

/* ---------- 4. Desbordes horizontales ---------- */
/* El contenedor de 1200 px no descontaba la barra de desplazamiento (15 px de scroll lateral en 1200-1215 px). */
.container { max-width: 100%; }
/* Fila de Bootstrap dentro de otra fila sin columna intermedia (obituarios/ceremonias de la portada): -30 px. */
.row > .moduletable .mod-newsflash-adv > .row.masonry { margin-left: 0; margin-right: 0; }
/* Correos largos del pie (info@camposantolosrosales.com.ec) que no caben en su columna. */
a[href^="mailto:"] { overflow-wrap: anywhere; word-break: break-word; }

/* Cabecera fija al hacer scroll (ScrollToFixed): conservar los márgenes compactos de la plantilla. */
#top.scroll-to-fixed-fixed .icemegamenu { margin-top: 20px; margin-bottom: 20px; }
@media (min-width: 768px) and (max-width: 1199px) {
	#top.scroll-to-fixed-fixed .icemegamenu { margin-top: 4px; margin-bottom: 8px; }
}

/* ---------- 5. Reglas públicas de ARK Editor ---------- */
/* Antes llegaban en una hoja dinámica (com_ajax&plugin=arktypography) que costaba una petición extra a Joomla
   y bloqueaba el renderizado; se desactivó (fix 11) y sus reglas para el contenido publicado quedan aquí. */
p.ark_noblock { padding: 0; margin: 0; }
img.left, .pull-left { float: left; margin-right: 10px; }
img.right, .pull-right { float: right; margin-left: 10px; }
img.center, .pull-center { display: block; margin: 0 auto; }
p.pull-center, div.pull-center { text-align: center; }
figcaption.text-center { text-align: center; }
img.modal { position: relative; cursor: zoom-in; }
img.modal.thumbnail { display: inline-block; width: 200px; }
img.thumbnail { margin: 4px; border: 1px solid #ddd; display: block; padding: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .055); transition: all .2s ease-in-out 0s; line-height: 20px; border-radius: 4px; }
a.thumbnail:hover, a.thumbnail:focus { box-shadow: 0 1px 4px rgba(0, 105, 214, .25); border-color: #0088cc; }
div.video_align_left { float: left; margin-right: 20px; }
div.video_align_right { float: right; margin-left: 20px; }
div.video_align_center { display: table; margin-left: auto; margin-right: auto; }
div.video_narrow { width: 75%; }
div.audio_align_left { float: left; margin-right: 20px; }
div.audio_align_right { float: right; margin-left: 20px; }
div.audio_align_center { display: table; margin-left: auto; margin-right: auto; }

/* ---------- 6. Slider antes de que Swiper se inicialice ---------- */
/* Con los scripts al final (fix 11) el contenido se pinta antes que el JS: los textos de las diapositivas aparecían
   un instante en su sitio y luego Swiper los ocultaba para animarlos (salto de diseño). Se ocultan sin ocupar
   otra posición (visibility) hasta que Swiper añade su clase de inicialización. */
.swiper-slider:not(.swiper-container-horizontal):not(.swiper-container-vertical) .swiper-slide-caption { visibility: hidden; }

/* ---------- 7. Contenido visible desde el inicio ---------- */
/* La plantilla ocultaba todos los bloques de contenido (.item, .item__module: obituarios, afiches, servicios…) con
   opacity:0 hasta que scripts.js les ponía la clase .visible-first al entrar en pantalla, con una transición de 0,8 s.
   El contenido principal no aparecía hasta descargar y ejecutar todo el JavaScript (y nunca, si un script fallaba).
   Se muestra desde el inicio y se quita ese efecto de entrada. Para recuperarlo, borrar este bloque. */
.item__module,
.item {
	opacity: 1;
	filter: none;
	transform: none;
	transition: none;
}

/* ---------- 8. Formularios de Creative Contact Form ("Trabaja con nosotros") ---------- */
/* template.css tiene "label + * { margin-top: 30px }" (regla global): la etiqueta quedaba más cerca del campo
   anterior que del suyo. Aquí la etiqueta va pegada a su campo y la separación queda entre un campo y el siguiente. */
.creativecontactform_wrapper label + .creativecontactform_input_element,
.creativecontactform_wrapper label + .creative_fileupload_wrapper,
.creativecontactform_wrapper label + * {
	margin-top: 4px;
}
.creativecontactform_wrapper .creativecontactform_field_box {
	margin-bottom: 18px;
}
/* Botón "Cargar CV…": el <input type=file> invisible estaba escalado ×4 y desplazado 300 px a la izquierda, y solo
   cubría el primer tercio del botón. Ahora ocupa exactamente todo el botón, así que responde en cualquier punto. */
.creativecontactform_wrapper .creative_fileupload { position: relative; overflow: hidden; cursor: pointer; }
.creativecontactform_wrapper .creative_fileupload input.creative_fileupload_submit {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	width: 100%;
	height: 100%;
	margin: 0;
	font-size: 16px;
	transform: none;
	opacity: 0;
	cursor: pointer;
}