/*
 Theme Name:   JuWeb Theme
 Theme URI:    https://juweb.pro
 Description:  Julian's GP theme
 Author:       Julian Drusin
 Author URI:   https://juweb.pro
 Template:     generatepress
 Version:      0.1
*/


/* Text Balance / Pretty */

h1, h2, h3, h4, h5, h6, .balance{
    text-wrap: balance;
}

b, strong {
    font-weight: 600;
}

blockquote, li {
    text-wrap: pretty;
}

p:last-child:last-of-type {
    margin-bottom: 0px;
}

/* -- UTILITIES -- */

/* Line Limits */
.line-limit-4, .line-limit-3, .line-limit-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-limit-4 {
    -webkit-line-clamp: 4;
}

.line-limit-3 {
    -webkit-line-clamp: 3;
}

.line-limit-2 {
    -webkit-line-clamp: 2;
}

/* Visually Hidden */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* BUSCADOR */

.search-modal-form{
    border-radius: 5px;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
    padding: 6px;
    border: 2px solid #ddd;
    border-radius: 5px;
}

.buscador .wp-block-search__button {
    border: 0px solid #ccc;
    border-radius: 30px;
    color: #f6f7f7;
    padding: 4px 20px!important;*/
}

.buscador input[type="search"]{
	border-radius: 30px;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="submit"], .wp-block-search__button, textarea, select {
    border-radius: 5px;
}


/* SCROLL BAR*/
:root {
  --scrollbar-thumb-color: rgba(15, 69, 195, 0.2);
  --scrollbar-thumb-hover-color: rgba(15, 69, 195, 0.7);
}

.scroll::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}

.scroll::-webkit-scrollbar-track {
  background-color: transparent;
}

.scroll::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 20px;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover-color);
}

.scroll {
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb-color) transparent;
}


/* ANIMACIONES */
/* Contenedor del fondo animado. */
.animated-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; 
    opacity: 0.95;
    overflow: hidden;
}

/* Estilos base para cada imagen de portada flotante */
.floating-cover {
    position: absolute;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    object-fit: cover;
}

/* --- Posiciones y animaciones para las dos portadas de la izquierda --- */
#cover-1 {
    top: 15%;
    left: 10%;
    width: 180px;
    --initial-rotate: -15deg; /* Variable para la rotación inicial */
    animation: float 8s ease-in-out infinite alternate;
}

#cover-2 {
    top: 60%;
    left: 5%;
    width: 120px;
    --initial-rotate: 10deg;
    animation: float 10s ease-in-out infinite alternate;
    animation-delay: -2s;
}

#cover-3 {
    top: 30%;
    right: 10%;
    width: 160px;
    --initial-rotate: 12deg;
    animation: float 7s ease-in-out infinite alternate;
    animation-delay: -1s;
}
        
/* --- Definición de la Animación de Flotado --- */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(var(--initial-rotate, 0deg));
    }
    100% {
        /* Se mueve 25px y rota 5 grados adicionales desde su rotación inicial */
        transform: translateY(-25px) rotate(calc(var(--initial-rotate, 0deg) + 5deg));
    }
}

/* --- Diseño Responsivo --- */
@media (max-width: 768px) {
    /* En móviles, hacemos las portadas aún más sutiles */
    .animated-background {
        opacity: 0.3;
    }
    /* Ocultamos la segunda portada en móviles para un look más limpio */
    #cover-2 {
        display: none;
    }
}