/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/


.sub-menu {
    background-color: rgba(0,0,0, 0.4)!important;    
    backdrop-filter: blur(10px);
}

.menu-item {
    border: 0!important;
}

.sub-menu .elementor-sub-item {      
  color: #0000;
  background: 
    linear-gradient(90deg,#fff 50%,var( --e-global-color-primary) 0) calc(100% - var(--_p,0%))/200% 100%,
    linear-gradient(var( --e-global-color-primary) 0 0) 0% 100%/var(--_p,0%) 100% no-repeat;
  -webkit-background-clip: text,padding-box;
          background-clip: text,padding-box;
  transition: 0.5s!important;
  border: 0;
}
.sub-menu .elementor-sub-item:hover {
    --_p: 100%;
    border: 0;
}
/* 
.premium-blog-post-container {
    background-color: rgba(0,0,0, 0)!important;
}

.premium-blog-post-container img {
    --x: 10px;
    --y: 25px;
    transform: scale(0.95) perspective(1000px) rotateX(var(--_a,20deg));    
    clip-path: polygon(       
       var(--y)              var(--y),       
       calc(100% - var(--y)) var(--y),       
       calc(100% - var(--y)) calc(100% - var(--y)),       
       calc(100% - var(--y) - var(--x)) var(--_c,100%),       
       calc(var(--x) + var(--y))        var(--_c,100%),      
       var(--y)        calc(100% - var(--y))       
       );
    outline: var(--y) solid rgba(0,0,0,0.4);
    outline-offset: calc(-1*var(--y));
    padding: var(--y) var(--y) 0 var(--y);
    transition: 1s;
  } */

  /* .premium-blog-post-container .premium-blog-content-wrapper { background-color: white!important;}
  
  .box:hover img {
    --_a: 0deg;
    --_c: calc(100% - var(--y));
} */

/* @media only screen and (max-width: 600px) {
    .premium-blog-post-container img {
        --y: 13px;
        transform: scale(1) perspective(1000px) rotateX(var(--_a,20deg));

    }
}
   */



// 1) Escala imágenes grandes al ancho máximo de 1920px
add_filter( 'big_image_size_threshold', function() {
    return 1920;
} );

// 2) Crea un tamaño personalizado para usar como versión optimizada
add_action( 'after_setup_theme', function() {
    add_image_size( 'semarac-full', 1920, 9999, false );
} );

// 3) Fuerza la calidad JPEG y WebP al 75%
add_filter( 'jpeg_quality', function() {
    return 75;
} );

add_filter( 'wp_editor_set_quality', function( $quality, $mime_type ) {
    return ( $mime_type === 'image/jpeg' || $mime_type === 'image/webp' ) ? 75 : $quality;
}, 10, 2 );

// 4) Permite subir imágenes WebP y mostrarlas en la biblioteca
add_filter( 'mime_types', function( $mime_types ) {
    $mime_types['webp'] = 'image/webp';
    return $mime_types;
} );

add_filter( 'file_is_displayable_image', function( $result, $path ) {
    return ( false !== strpos( $path, '.webp' ) ) ? true : $result;
}, 10, 2 );

// 5) Opcional: establece 'semarac-full' como tamaño por defecto en el editor
add_filter( 'image_size_names_choose', function( $sizes ) {
    return array_merge( $sizes, [ 'semarac-full' => 'Semarac 1920px' ] );
} );