/*!
Theme Name: Orbitta Child
Theme URI: https://orbitta.es/
Author: Orbitta
Author URI: https://orbitta.es/
Template: orbitta
Description: Orbitta Theme Child
Version: 1.0.0
Text Domain: orbitta-child
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

# Header
# Footer
# Offcanvas
# Blocks (wp-groups, wp-columns, wp-cover...)
# Shortcodes
# Elements
# CF7
# Pages
# Archive
# Post
## Custom Post

# Media Queries

--------------------------------------------------------------*/

/* Header */

.transparency-header .navbar-blue {
	background-color: transparent !important;
}

#main .wp-block-orbitta-menu .navbar-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

#main .wp-block-orbitta-menu .navbar-link::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 21px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='21' viewBox='0 0 15 21' fill='none'%3E%3Cpath d='M0 11H13.5' stroke='%230051FF' stroke-width='3'/%3E%3Cpath d='M13.5 0V21' stroke='%230051FF' stroke-width='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 15px 21px;
  vertical-align: middle;
}


/* Footer */


/* Offcanvas */


/* Blocks (wp-groups, wp-columns, wp-cover...) */

/* Botones: hover agnóstico al color, para que valga igual en los sólidos
   (#1e323c, #0051ff, #2c2cb5) que en los outline sobre fondo claro u oscuro.
   Por eso no se fija ningún color: se usa brightness() y currentColor. */
.wp-block-button .wp-element-button,
.wp-block-button .wp-element-button .orb-btn-icon {
	transition: filter .25s ease, background-color .25s ease, transform .25s ease;
}

/* Sólidos: se aclaran un poco, sea cual sea su fondo */
.wp-block-button:not(.is-style-outline) .wp-element-button:hover,
.wp-block-button:not(.is-style-outline) .wp-element-button:focus-visible {
	filter: brightness(1.15);
}

/* Outline (solo borde, sin fondo): barrido azul de izquierda a derecha y
   todo el contenido a blanco.
   El relleno es un ::before con z-index:-1; el `isolation` del botón lo
   mantiene por encima de su propio fondo pero por debajo del texto, que al
   ser un nodo suelto (sin etiqueta) no se puede subir con z-index. */
.wp-block-button.is-style-outline .wp-element-button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: color .35s ease, border-color .35s ease;
}

.wp-block-button.is-style-outline .wp-element-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #0051FF;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s ease;
}

.wp-block-button.is-style-outline .wp-element-button:hover::before,
.wp-block-button.is-style-outline .wp-element-button:focus-visible::before {
	transform: scaleX(1);
}

/* El color va inline en el botón, de ahí el !important; el borde es
   currentColor por defecto, así que se fija a azul para que no se vuelva blanco */
.wp-block-button.is-style-outline .wp-element-button:hover,
.wp-block-button.is-style-outline .wp-element-button:focus-visible {
	color: #FFF !important;
	border-color: #0051FF;
}

/* El stroke del SVG va como atributo de presentación: cualquier regla CSS lo gana.
   Solo a los paths que YA se dibujan con trazo (los iconos "+"): si se le pone
   stroke a uno de relleno, como el de WhatsApp, le crece un borde alrededor. */
.wp-block-button.is-style-outline .wp-element-button .orb-btn-icon svg path[stroke] {
	transition: stroke .35s ease;
}

.wp-block-button.is-style-outline .wp-element-button:hover .orb-btn-icon svg path[stroke],
.wp-block-button.is-style-outline .wp-element-button:focus-visible .orb-btn-icon svg path[stroke] {
	stroke: #FFF;
}

/* El icono "+" gira, igual que en las tarjetas de máquina.
   El ángulo es una variable para que cada botón pueda pedir otro (ver WhatsApp) */
.wp-block-button .wp-element-button:hover .orb-btn-icon,
.wp-block-button .wp-element-button:focus-visible .orb-btn-icon {
	transform: rotate(var(--orb-icon-rot, 90deg));
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button .wp-element-button,
	.wp-block-button .wp-element-button::before,
	.wp-block-button .wp-element-button .orb-btn-icon,
	.wp-block-button .wp-element-button .orb-btn-icon svg path {
		transition: none;
	}
	.wp-block-button .wp-element-button:hover .orb-btn-icon,
	.wp-block-button .wp-element-button:focus-visible .orb-btn-icon {
		transform: none;
	}
}

/* Botón de WhatsApp: igual que el resto de outline (borde azul, fondo
   transparente) pero el barrido del hover en verde y el icono a blanco.
   Se reconoce por el icono, que se pinta con `fill` mientras que los "+" del
   tema usan `stroke`, y se acota a #site-main para no tocar los botones de
   Contacto de la cabecera, el footer ni el offcanvas.
   Para forzarlo a mano basta con la clase CSS adicional `btn-whatsapp`. */
#site-main .wp-block-button.btn-whatsapp > .wp-element-button,
#site-main .wp-block-button > .wp-element-button:has(.orb-btn-icon svg path[fill]:not([fill="none"])) {
	--orb-icon-rot: 8deg;             /* el icono se inclina, no gira 90deg */
}

/* El barrido (::before) y el borde, en verde WhatsApp en vez de azul */
#site-main .wp-block-button.btn-whatsapp > .wp-element-button::before,
#site-main .wp-block-button > .wp-element-button:has(.orb-btn-icon svg path[fill]:not([fill="none"]))::before {
	background: #25D366;
}

#site-main .wp-block-button.btn-whatsapp > .wp-element-button:hover,
#site-main .wp-block-button.btn-whatsapp > .wp-element-button:focus-visible,
#site-main .wp-block-button > .wp-element-button:has(.orb-btn-icon svg path[fill]:not([fill="none"])):hover,
#site-main .wp-block-button > .wp-element-button:has(.orb-btn-icon svg path[fill]:not([fill="none"])):focus-visible {
	border-color: #25D366;
}

/* El fill del SVG va como atributo de presentación: cualquier regla CSS lo gana */
#site-main .wp-block-button .wp-element-button .orb-btn-icon svg [fill]:not([fill="none"]) {
	transition: fill .35s ease;
}

#site-main .wp-block-button.btn-whatsapp > .wp-element-button:hover .orb-btn-icon svg [fill]:not([fill="none"]),
#site-main .wp-block-button.btn-whatsapp > .wp-element-button:focus-visible .orb-btn-icon svg [fill]:not([fill="none"]),
#site-main .wp-block-button > .wp-element-button:has(.orb-btn-icon svg path[fill]:not([fill="none"])):hover .orb-btn-icon svg [fill]:not([fill="none"]),
#site-main .wp-block-button > .wp-element-button:has(.orb-btn-icon svg path[fill]:not([fill="none"])):focus-visible .orb-btn-icon svg [fill]:not([fill="none"]) {
	fill: #FFF;
}

/* Covers enlazados (rejilla de categorías y megamenú): zoom de la imagen.
   Se acota con .cover-linked, la clase que el tema añade en render a los
   covers que llevan enlace, para no tocar los covers decorativos.
   No hace falta overflow: el .wp-block-cover ya lo trae de core. */
.wp-block-cover.cover-linked .wp-block-cover__image-background {
	transition: transform .5s ease;
}

.wp-block-cover.cover-linked:hover .wp-block-cover__image-background,
.wp-block-cover.cover-linked:focus-within .wp-block-cover__image-background {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.cover-linked .wp-block-cover__image-background {
		transition: none;
	}
	.wp-block-cover.cover-linked:hover .wp-block-cover__image-background,
	.wp-block-cover.cover-linked:focus-within .wp-block-cover__image-background {
		transform: none;
	}
}


/* Shortcodes */


/* Elements */

.grid-categorias img {
  mix-blend-mode: hard-light;
}

.button-back {
	white-space: nowrap;
}


/* Pages */

/* Archive */


/* Post */


/* CF7 */

.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea {
  background-color: transparent;
  border: 0;
	border-bottom: 1px solid #1e323c !important;
}

.wpcf7 .wpcf7-text::placeholder,
.wpcf7 .wpcf7-textarea::placeholder {
  opacity: 0.5 !important;
}

.popup-container .wpcf7 .wpcf7-text,
.popup-container .wpcf7 .wpcf7-textarea {
  color: white !important;
		border-bottom: 1px solid white !important;
}

.popup-container .wpcf7 .wpcf7-text::placeholder,
.popup-container .wpcf7 .wpcf7-textarea::placeholder {
  color: white !important;
}

input.wpcf7-not-valid, select.wpcf7-not-valid {
  border: 0 !important;
  border-bottom: 1px solid #FD7700 !important;
}

.wpcf7 .wpcf7-submit {
  border-radius: 10px;
  background: #1E323C;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: var(--s20) var(--s30);
}


/* Custom Post */

.gallery-img-orbitta .main-carousel:not(#x) img {
  object-fit: scale-down !important;
}

.image-maquina-cat {
	mix-blend-mode: multiply;
}

/* Tarjetas de máquina del listado (gallery-post): hover
   Se acota con :has() para no afectar a otras galerías.
   El borde va con !important porque el shortcode lo pinta inline. */
.gallery-item:has(.image-maquina-cat) > div {
	position: relative;
	isolation: isolate; /* fija el backdrop del mix-blend-mode al fondo de la tarjeta */
	transition: border-color .3s ease, background-color .3s ease;
}

/* Barra de acento que crece de 0 a 100% en el borde superior */
.gallery-item:has(.image-maquina-cat) > div::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	background: #0051FF;
	transition: width .35s ease;
}

.gallery-item:has(.image-maquina-cat):hover > div::before,
.gallery-item:has(.image-maquina-cat):focus-within > div::before {
	width: 100%;
}

/* El <a> de la imagen es inline: lo hacemos bloque para poder recortar el zoom */
.gallery-item:has(.image-maquina-cat) a:has(> .image-maquina-cat) {
	display: block;
	overflow: hidden;
}

.gallery-item:has(.image-maquina-cat) .image-maquina-cat,
.gallery-item:has(.image-maquina-cat) h3,
.gallery-item:has(.image-maquina-cat) a:has(> .icono-mediacruz_icon),
.gallery-item:has(.image-maquina-cat) .icono-mediacruz_icon {
	transition: transform .45s ease, color .3s ease;
}

.gallery-item:has(.image-maquina-cat):hover > div,
.gallery-item:has(.image-maquina-cat):focus-within > div {
	border-color: #0051FF !important;
	background: #FFF !important; /* el shortcode pinta #F9FAFD inline */
}

.gallery-item:has(.image-maquina-cat):hover .image-maquina-cat,
.gallery-item:has(.image-maquina-cat):focus-within .image-maquina-cat {
	transform: scale(1.06);
}

.gallery-item:has(.image-maquina-cat):hover h3,
.gallery-item:has(.image-maquina-cat):focus-within h3,
.gallery-item:has(.image-maquina-cat):hover a:has(> .icono-mediacruz_icon),
.gallery-item:has(.image-maquina-cat):focus-within a:has(> .icono-mediacruz_icon) {
	color: #0051FF;
}

/* El icono "+" de "Ver más detalles" gira */
.gallery-item:has(.image-maquina-cat):hover .icono-mediacruz_icon,
.gallery-item:has(.image-maquina-cat):focus-within .icono-mediacruz_icon {
	transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
	.gallery-item:has(.image-maquina-cat) > div,
	.gallery-item:has(.image-maquina-cat) > div::before,
	.gallery-item:has(.image-maquina-cat) .image-maquina-cat,
	.gallery-item:has(.image-maquina-cat) h3,
	.gallery-item:has(.image-maquina-cat) a:has(> .icono-mediacruz_icon),
	.gallery-item:has(.image-maquina-cat) .icono-mediacruz_icon {
		transition: none;
	}
	.gallery-item:has(.image-maquina-cat):hover .image-maquina-cat,
	.gallery-item:has(.image-maquina-cat):focus-within .image-maquina-cat {
		transform: none;
	}
}

.single-maquina .main-carousel .splide__track li {
  border-radius: 20px;
  background: #FFF;
  overflow: hidden;
}

.single-maquina .thumbs-carousel{
  margin-right: 20px !important;
}

.single-maquina .thumbs-carousel .splide__track li {
  border-radius: 10px;
  background: #FFF;
}

.tabs-maquina { 
  border-radius: 10px;
  background: rgba(232, 230, 224, 0.90);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.tabs-maquina.header-tabs > div.active {
    border: 0 !important;
}

.tabs-maquina-grid {
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: var(--s200);
    align-items: start;
}

.maquina-col-izq {
    position: sticky;
    top: var(--s40);
    display: flex;
    flex-direction: column;
    gap: var(--s50);
}

.maquina-col-der {
    display: flex;
    flex-direction: column;
    row-gap: var(--s100);
}

.single-maquina .pswp__img, 
.single-maquina .pswp__zoom-wrap {
    background-color: #FFF !important;
    border-radius: 2% !important;
}

/* Si una columna se queda sin tabs, la otra ocupa todo el ancho */
.tabs-maquina-grid:not(:has(> .maquina-col-izq .tab)),
.tabs-maquina-grid:not(:has(> .maquina-col-der .tab)) {
    grid-template-columns: 1fr;
}

.tabs-maquina-grid:not(:has(> .maquina-col-izq .tab)) > .maquina-col-der,
.tabs-maquina-grid:not(:has(> .maquina-col-der .tab)) > .maquina-col-izq {
    max-width: 800px;        /* el ancho que quieras */
    margin-inline: auto;     /* centrado */
    width: 100%;
}

/*--------------------------------------------------------------
>>> MEDIA QUERYS:
---------------------------------------------------------------- */

@media only screen and (max-width: 1023px) {
  /* Móvil y tablet vertical */
  .tabs-maquina-grid {
    grid-template-columns: 1fr;
  }

  .maquina-col-izq {
    position: static;
  }
}

@media only screen and (min-width: 1024px) {
  /* Desktop y dispositivos más grandes */
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  /* Laptops pequeños y tablets grandes */
}

@media only screen and (min-width: 1280px) {
  /* Desktop grande / monitores */
}