/*
Theme Name:     Colegio de Caminos de Cantabria
Theme URI:      n/a
Template:       kadence
Author:         Fernando García Rebolledo
Author URI:     n/a
Description:    Tema personalizado para el Colegio de Caminos de Cantabria basado en Kadence Theme
Version:        1.1.5
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/*
Variables a usar 
:root {
    --global-kb-font-size-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
    --global-kb-font-size-md: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);
    --global-kb-font-size-lg: clamp(1.75rem, 1.576rem + 0.543vw, 2rem);
    --global-kb-font-size-xl: clamp(2.25rem, 1.728rem + 1.63vw, 3rem);
    --global-kb-font-size-xxl: clamp(2.5rem, 1.456rem + 3.26vw, 4rem);
    --global-kb-font-size-xxxl: clamp(2.75rem, 0.489rem + 7.065vw, 6rem);

    --global-palette1: #008c3c;
    --global-palette2: #f3d645;
    --global-palette3: #272c2e;
    --global-palette4: #3a4043;
    --global-palette5: #465458;
    --global-palette6: #778f95;
    --global-palette7: #e2e8e9;
    --global-palette8: #f4f7f7;
    --global-palette9: #ffffff;
    --global-palette9rgb: 255, 255, 255;
    --global-palette-highlight: var(--global-palette1);
    --global-palette-highlight-alt: var(--global-palette2);
    --global-palette-highlight-alt2: var(--global-palette9);
    --global-palette-btn-bg: var(--global-palette1);
    --global-palette-btn-bg-hover: var(--global-palette2);
    --global-palette-btn: var(--global-palette9);
    --global-palette-btn-hover: var(--global-palette9);
    --global-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --global-heading-font-family: inherit;
    --global-primary-nav-font-family: inherit;
    --global-fallback-font: sans-serif;
    --global-display-fallback-font: sans-serif;
    --global-content-width: 1290px;
    --global-content-narrow-width: 842px;
    --global-content-edge-padding: 1.5rem;
    --global-content-boxed-padding: 2rem;
    --global-calc-content-width: calc(1290px - var(--global-content-edge-padding) - var(--global-content-edge-padding));
    --wp--style--global--content-size: var(--global-calc-content-width);

    --global-gray-400: #CBD5E0;
    --global-gray-500: #A0AEC0;
    --global-xs-spacing: 1em;
    --global-sm-spacing: 1.5rem;
    --global-md-spacing: 2rem;
    --global-lg-spacing: 2.5em;
    --global-xl-spacing: 3.5em;
    --global-xxl-spacing: 5rem;
    --global-edge-spacing: 1.5rem;
    --global-boxed-spacing: 2rem;

    --global-font-size-small: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
    --global-font-size-medium: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);
    --global-font-size-large: clamp(1.75rem, 1.576rem + 0.543vw, 2rem);
    --global-font-size-larger: clamp(2rem, 1.6rem + 1vw, 2.5rem);
    --global-font-size-xxlarge: clamp(2.25rem, 1.728rem + 1.63vw, 3rem);


    --global-kb-font-size-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
    --global-kb-font-size-md: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);
    --global-kb-font-size-lg: clamp(1.75rem, 1.576rem + 0.543vw, 2rem);
    --global-kb-font-size-xl: clamp(2.25rem, 1.728rem + 1.63vw, 3rem);
    --global-kb-font-size-xxl: clamp(2.5rem, 1.456rem + 3.26vw, 4rem);
    --global-kb-font-size-xxxl: clamp(2.75rem, 0.489rem + 7.065vw, 6rem);

}
*/
:root{
    --global-palette-danger: #F10000;
    --icons-size-m: 24px;
    --icons-size-lg: 40px;
    --global-palette2-light: #fcf6d9;
    --global-xxxs-spacing: calc(1rem / 4);
    --global-xxs-spacing: calc(1rem / 2);
    --global-xs-spacing: 1rem;
    --global-sm-spacing: 1.5rem;
    --global-md-spacing: 2rem;
    --global-lg-spacing: 2.5rem;
    --global-xl-spacing: 3.5rem;
    --global-xxl-spacing: 5rem;
    --max-width: 1920px;
    --mini-width: 1300px;
    /* Colores */
    --caminos-color-negro: #000000;
    --caminos-color-oscuro: #262626;
    --caminos-color-blanco: #ffffff;
    --caminos-color-gris: #C1C1C1;
    --caminos-color-fondo: #F1F1F1;
}
::selection{
    background-color: var(--caminos-color-oscuro);
    color: var(--caminos-color-blanco);
}
::-moz-selection{
    background-color: var(--caminos-color-oscuro);
    color: var(--caminos-color-blanco);
}
/* Custom fonts @fontface */
@font-face {
    font-family: 'inter';
    src: url(./fonts/Inter-VariableFont_opsz.ttf);
}

mark{
    background-color: var(--caminos-color-negro);
    color: var(--caminos-color-blanco);
}
/**
 * Accessibility - Reduced Motion
 * Respects user's system preference for reduced motion
 * This improves accessibility for users with vestibular disorders
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* Clases fuentes */
.caminos-h1{
    font-size: 5.625rem;
    font-weight: 300;
}
.caminos-h3{
    font-size: 2.8125rem;
    font-weight: 300;
}
.caminos-h4{
    font-size: 1.685rem;
    font-weight: 300;
}
/*Clases comunes*/
.caminos-full-width{
    width: 100vw;
    transform: translateX(-51%);
    margin-left: 49.8%;
}
.caminos-lista li::marker { 
    content: "+  "; 
}
.caminos-lista li:not(:first-of-type) {
    margin-top: 2rem;
}
.single-content ul.caminos-lista{
    padding-left: 2rem;
}
.caminos-acordeon .kt-blocks-accordion-title{
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 110%; /* 2.75rem */
}
/*Header*/
/**
 * ============================================================================
 * MEGAMENU
 * ============================================================================
 * Fullscreen megamenu with scroll control and smooth animations.
 *
 * Features:
 * - Fixed fullscreen overlay
 * - Independent scroll (not controlled by Lenis)
 * - Body scroll lock when active
 * - Smooth show/hide with GSAP
 *
 * @since 1.1.5
 */

/* Megamenu container - hidden by default */
.caminos-megamenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background-color: var(--caminos-color-fondo);
    z-index: 9999;
    overflow-y: scroll !important;
    overflow-x: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    /* Ensure native scroll works correctly */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Force native scroll performance */
    will-change: scroll-position;
}

/* Megamenu active state - visible and scrollable */
.caminos-megamenu.is-active {
    visibility: visible;
    opacity: 1;
    overflow-y: scroll !important;
}

/* Body scroll lock when megamenu is open */
body.megamenu-open {
    overflow: hidden !important;
    height: 100vh;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}

/* Close button cursor */
.caminos-megamenu-cerrar {
    cursor: pointer;
}

/**
 * ============================================================================
 * SEARCH MEGAMENU
 * ============================================================================
 * Fullscreen search megamenu with scroll control and smooth animations.
 * Shares same functionality as main megamenu but for search purposes.
 *
 * Features:
 * - Fixed fullscreen overlay
 * - Independent scroll (not controlled by Lenis)
 * - Body scroll lock when active
 * - Smooth show/hide with GSAP
 *
 * @since 1.1.5
 */
.boton-busquedas,
.boton-menu{
    cursor: pointer;
}
/* Search megamenu container - hidden by default */
.caminos-megamenu-busquedas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background-color: var(--caminos-color-blanco);
    z-index: 9999;
    overflow-y: scroll !important;
    overflow-x: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    /* Ensure native scroll works correctly */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Force native scroll performance */
    will-change: scroll-position;
}

/* Search megamenu active state - visible and scrollable */
.caminos-megamenu-busquedas.is-active {
    visibility: visible;
    opacity: 1;
    overflow-y: scroll !important;
}

/* Body scroll lock when search megamenu is open */
body.search-megamenu-open {
    overflow: hidden !important;
    height: 100vh;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}
.caminos-menu-parent{
    color: var(--caminos-color-negro);
    font-size: 2.0625rem;
    font-weight: 300;
    line-height: normal;
}
.caminos-menu-item{
    color: var(--caminos-color-negro);
    font-size: 1.4375rem;
    font-weight: 300;
    line-height: 2.15rem;
    
}
/* a.caminos-menu-item{
    text-decoration: none;
} */
a.caminos-menu-item {
    position: relative;
    display: block;
    background: linear-gradient(to right, var(--caminos-color-negro) 50%, transparent 50%);
    background-size: 220% 100%;
    background-position: right;
    transition: background-position 0.6s ease, color 0.6s ease;
    text-decoration: none;
    max-width: fit-content;
}

a.caminos-menu-item p {
    margin: 0;
    
}

a.caminos-menu-item:hover {
    background-position: left;
    color: var(--caminos-color-blanco);
}

a.caminos-menu-item:hover p {
    color: inherit;
}

/* Asegurar que el texto herede el color del enlace */
a.caminos-menu-item:hover p {
    color: inherit;
}

/*Footer*/
.caminos-footer-text,
.caminos-footer-text *{
    color: var(--caminos-color-blanco);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: normal;
}
footer a.caminos-footer-text:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button)):hover{
    color: var(--caminos-color-blanco);
}
footer .caminos-footer-legal,
footer .caminos-footer-legal *{
    color: var(--caminos-color-negro);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: normal;
}
/*El Colegio*/
.caminos-tooltip-row {
    cursor: url('./img/logo.svg') 16 16, crosshair;
}
@media ( min-width: 1025px) {
    .caminos-cargo{
        font-size: 1.56rem;
        padding: .35rem 1.5rem;
        border: 1px solid var(--caminos-color-negro);
        border-radius: 50px;
        max-width: fit-content;
    }
    /* Tooltip Cursos. */
    body .kt-inside-inner-col .wp-block-kadence-column.colegio-tootip-img{
        position: fixed;
        /* top: -200px; */
        height: 400px;
        width: 500px;
        object-fit: cover;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.5s;
        z-index: 99;
    }   
}
@media (max-width:1024px){
    .colegio-tootip-img img{
        max-height: 400px;
        width: auto;
    }
}