/**
 * Edukaland Typography System
 */

/* Weight */
.bold { font-weight: var(--fw-bold); }
.medium { font-weight: var(--fw-medium); }
.book { font-weight: var(--fw-book); }

/* Headings */
h1, .h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h1);
}

h2, .h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h2);

    @media (max-width: 680px) {
        font-size: 27px;
        line-height: 35px;
    }
}

h3, .h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h3);

    @media (max-width: 680px) {
        font-size: 22px;
        line-height: 32px;
    }
}

h4, .h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h4);

    @media (max-width: 680px) {
        font-size: 18px;
        line-height: 24px;
    }
}

h4.bold, .h4.bold { font-weight: var(--fw-bold); }
h4.medium, .h4.medium { font-weight: var(--fw-medium); }
h4.book, .h4.book { font-weight: var(--fw-book); }

h5, .h5 {
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
}
h5.bold, .h5.bold { font-weight: var(--fw-bold); }
h5.medium, .h5.medium { font-weight: var(--fw-medium); }
h5.book, .h5.book { font-weight: var(--fw-book); }

h6, .h6 {
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
}
h6.bold, .h6.bold { font-weight: var(--fw-bold); }
h6.medium, .h6.medium { font-weight: var(--fw-medium); }
h6.book, .h6.book { font-weight: var(--fw-book); }

/* Text Sizes Classes */
.text-xl { 
    font-size: var(--fs-xl); 
    line-height: var(--lh-xl);
}

.text-lg { 
    font-size: var(--fs-lg); 
    line-height: var(--lh-lg);

    @media (max-width: 680px) {
        font-size: 18px;
        line-height: 24px;
    }
}

.text-l { 
    font-size: var(--fs-l); 
    line-height: var(--lh-l);

    @media (max-width: 680px) {
        font-size: 16px;
        line-height: 24px;
    }
}

.text-m { 
    font-size: var(--fs-m); 
    line-height: var(--lh-m);
}

.text-s { 
    font-size: var(--fs-s); 
    line-height: var(--lh-s);
}

.medium { font-weight: var(--fw-medium); }
.book { font-weight: var(--fw-book); }

/* Overline Styles (Uppercase + Bold) */
.overline-large {
    font-size: 16px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.overline-medium {
    font-size: 14px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.overline-small {
    font-size: 12px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.title-underline {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;

    @media (max-width: 680px) {
        bottom: -4px;
    }
}

.text-highlight {
    position: relative;
    display: inline-block;
    color: var(--color-grey-900);
}

/* Subrayado verde de títulos: los twig convierten <u>…</u> en .highlight-svg + .green-line-svg.
   Global para que funcione en cualquier bloque (antes vivía en hero.css y solo cargaba con un Hero). */
.highlight-svg {
    position: relative;
    display: inline-block;
}

.green-line-svg {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
    height: 16px;
    clip-path: inset(0 100% 0 0);
    animation: swipeRight 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: 0.5s;

    @media (max-width: 768px) {
        height: 10px;
        bottom: -6px;
    }
}

@keyframes swipeRight {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

.green-line-svg:not(.is-animated) {
    animation: none !important;
}