/*
 Theme Name:     Remake Child Theme
 Theme URI:      https://www.codeless.co/remake
 Description:    Remake Child Theme
 Author:         Codeless Themes
 Author URI:     https://www.codeless.co
 Template:       remake
 Version:        1.0.2
*/

/* ==========================================================================
   CANAUDAT - Custom Slider Styles & Responsive Breakpoint Fixes
   Color de acento del logo: #ffe600
   ========================================================================== */

/* 1. Color de acento (amarillo del logo) para el número del servicio activo */
.ce-vjosa-slider .project-number .actual,
.project-number .actual {
    color: #ffe600 !important;
}

/* 2. Color de acento del logo (#ffe600) para la flecha ascendente del slider */
.ce-vjosa-slider .slide-title a svg path,
.slide-title a svg path,
.ce-vjosa-slider .slide-title svg path {
    fill: #ffe600 !important;
}

/* 3. Mostrar flecha SVG también en pantallas <= 991px cuando el elemento está activo */
@media (max-width: 991px) {
    .ce-vjosa-slider .title-wrapper .slide-title a svg {
        display: inline-block !important;
        width: 38px !important;
        height: 38px !important;
        margin-left: 14px !important;
        vertical-align: baseline !important;
    }
}

/* 4. Breakpoint <992px (incluyendo móviles en retrato y tablets):
   Mueve el contador vertical 'Servicio X/X' a la derecha para no solaparse con las opciones del slider */
@media (max-width: 991px) {
    .ce-vjosa-slider .project-number,
    .project-number {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: auto !important;
        right: 15px !important;
        text-align: right !important;
        transform: translateY(-50%) rotate(-90deg) !important;
        -webkit-transform: translateY(-50%) rotate(-90deg) !important;
        z-index: 1000 !important;
    }
}

/* 5. Móvil en Retrato (tanto si está en modo móvil normal <=767px como si tiene "Vista de ordenador" activada en el navegador móvil con ~980px de ancho):
   Se fuerza la misma proporción visual exacta que al reducir el viewport de escritorio a 500px */
@media (max-width: 767px), (hover: none) and (pointer: coarse) and (orientation: portrait) {
    .ce-vjosa-slider {
        height: 100vh !important;
        height: 100dvh !important;
    }
    .ce-vjosa-slider .title-wrapper {
        left: 7vw !important;
        top: auto !important;
        bottom: 6vh !important;
        height: auto !important;
        max-height: 86dvh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        overflow-y: visible !important;
        padding-top: 0 !important;
    }
    .ce-vjosa-slider .title-wrapper .slide-title {
        height: auto !important;
        margin: 0 !important;
    }
    .ce-vjosa-slider .title-wrapper .slide-title a,
    .ce-vjosa-slider .title-wrapper .slide-title.active a {
        font-size: clamp(38px, 11.5vw, 118px) !important;
        line-height: 1.15 !important;
        padding-top: 1.2vh !important;
        padding-bottom: 1.2vh !important;
        text-align: left !important;
    }
    .ce-vjosa-slider .title-wrapper .slide-title a svg {
        display: inline-block !important;
        width: clamp(28px, 7.5vw, 76px) !important;
        height: clamp(28px, 7.5vw, 76px) !important;
        margin-left: 2vw !important;
    }
    .ce-vjosa-slider .project-number,
    .project-number {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: auto !important;
        right: 1vw !important;
        font-size: clamp(14px, 3vw, 28px) !important;
        line-height: 1.4 !important;
        transform: translateY(-50%) rotate(-90deg) !important;
        -webkit-transform: translateY(-50%) rotate(-90deg) !important;
        z-index: 1000 !important;
    }
    .ce-vjosa-slider .project-number .actual,
    .project-number .actual {
        font-size: clamp(28px, 6.5vw, 60px) !important;
        line-height: 1.2 !important;
        margin-left: 1.5vw !important;
    }
}

/* 6. Modo Apaisado (Landscape) o baja altura de viewport (max-height: 620px):
   Comprueba la altura del viewport y escala las 6 opciones en función de la altura (vh / dvh)
   para que siempre quepan enteras en pantalla sin cortarse por arriba ni por abajo */
@media (max-height: 620px), (hover: none) and (pointer: coarse) and (orientation: landscape) {
    .ce-vjosa-slider {
        height: 100vh !important;
        height: 100dvh !important;
    }
    .ce-vjosa-slider .title-wrapper {
        top: 50% !important;
        bottom: auto !important;
        left: 8vw !important;
        transform: translateY(-50%) !important;
        -webkit-transform: translateY(-50%) !important;
        height: auto !important;
        max-height: 94dvh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }
    .ce-vjosa-slider .title-wrapper .slide-title {
        height: auto !important;
        margin: 0 !important;
    }
    .ce-vjosa-slider .title-wrapper .slide-title a,
    .ce-vjosa-slider .title-wrapper .slide-title.active a {
        font-size: clamp(20px, 9.5dvh, 54px) !important;
        line-height: 1.15 !important;
        padding-top: 0.7dvh !important;
        padding-bottom: 0.7dvh !important;
        text-align: left !important;
    }
    .ce-vjosa-slider .title-wrapper .slide-title a svg {
        display: inline-block !important;
        width: clamp(16px, 6.5dvh, 38px) !important;
        height: clamp(16px, 6.5dvh, 38px) !important;
        margin-left: 12px !important;
    }
    .ce-vjosa-slider .project-number,
    .project-number {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: auto !important;
        right: 2vw !important;
        font-size: clamp(12px, 3.2dvh, 18px) !important;
        transform: translateY(-50%) rotate(-90deg) !important;
        -webkit-transform: translateY(-50%) rotate(-90deg) !important;
        z-index: 1000 !important;
    }
    .ce-vjosa-slider .project-number .actual,
    .project-number .actual {
        font-size: clamp(22px, 6.5dvh, 36px) !important;
        line-height: 1.2 !important;
    }
}