/* 
// ===================================================================================================
// ## main css
// =================================================================================================== 
*/

/* fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Darker+Grotesque:wght@300..900&family=Space+Grotesk:wght@300..700&display=swap');

/* variables */
:root {
    
    /* colors */

    --white: #FFFEFB;
    --white-2: #EBE9DF;

    --panna: #F8F4F0;
    --osso: #FBFAF8;
        --osso-light: hsla(30, 20%, 98%, 0.7);
    --gray: #929084;
        --gray-light:hsl(51, 6%, 55%, 0.2);

    --beige: #C5C0B1;

    --terra: #201515;
    --horizon: #FF4F01;
    --horizon-light: hsla(18, 100%, 50%, 0.3);
    
    --black: #36342E;
    --black-2: hsla(45, 8%, 20%, 0.5);

    /* fonts */

    --redhat: "Red Hat Display", sans-serif;
    --inter: "Inter", sans-serif;
    --darker: "Darker Grotesque", sans-serif;
    --space: "Space Grotesk", sans-serif;
    --averia: "Averia Serif Libre", serif;

    /* font sizes */
    
    --h0: 90px;
    --h1: 58px;
    --h2: 38px;
    --h3: 24px;
    --h4o3: 20px;
    --h4: 16px;
    --h5: 14px;

    /* font styles */

    --light: 300;
    --normal: 400;
    --semibold: 600;
    --bold: 700;

    /* max */

    --maxwidth: 1400px;

}

body {
    background-color: var(--white);
    /* background-image: radial-gradient(var(--gray-light) 1px, transparent 1px); */
    background-size: 20px 20px;
    margin: 0;
    display: flex; justify-content: start; align-items: center; flex-direction: column;
    height: fit-content;
    box-sizing: border-box;
}

span {
    -webkit-font-smoothing: antialiased;
}

/* base rules ============================================================ */

.hidden {
    display: none !important;
}

.disabled {
    opacity: .2;
}

.text.disabled {
    opacity: .5;
}

.bold {
    font-weight: var(--bold) !important;
}
.semibold {
    font-weight: var(--semibold) !important;
}

.orange {
    color: var(--horizon) !important;
    font-weight: var(--bold);
}

.cit {
    /* font-style: italic; */
}

/* unions ================================================================= */

/* horizontal union */
.items-union {
    display: flex; justify-content: start; align-items: center;
    gap: 8px;
}
.items-union.medium {
    gap: 18px;
}
.items-union.large {
    gap: 30px;
}
.items-union.spacebetween {
    width: 100%;
    justify-content: space-between;
}

/* vertical unions */
.items-union.vertical{
    align-items: start;
    flex-direction: column;
    gap: 15px;
}
.items-union.vertical.small{
    gap: 0px;
}
.items-union.vertical.medium{
    gap: 15px;
}
.items-union.vertical.large{
    gap: 35px;
}

.lucide {
    width: 1.8cap;
}

a {
    text-decoration: none;
}

/* common component ======================================================== */

    /* text */


    .big-title {
        font-family: var(--darker);
        font-size: var(--h0);
        font-weight: var(--normal);
        color: var(--terra);
        text-wrap: balance; line-height: 1.2;
    }
    .title {
        font-family: var(--redhat);
        font-size: var(--h1);
        font-weight: var(--semibold);
        color: var(--terra);
        text-wrap: balance; line-height: 1.2;
    }
    .subtitle {
        font-family: var(--inter);
        font-size: var(--h4o3);
        font-weight: var(--normal);
        color: var(--terra);
        text-wrap: balance;
        opacity: .7;
    }
    .text {
        display: flex; justify-content: start; align-items: center;
        gap: 5px;
        font-family: var(--inter);
        font-size: var(--h4);
        font-weight: var(--normal);
        color: var(--black);
    }

    .mini-title {
        font-family: var(--redhat);
        font-size: var(--h5);
        font-weight: var(--semibold);
        color: var(--gray);
        text-transform: uppercase;
        text-wrap: balance;
    }

    .section-title {
        font-family: var(--redhat);
        font-size: var(--h2);
        font-weight: var(--semibold);
        color: var(--black);
        text-wrap: balance;
    }


    /* links and buttons */

    .link {
        display: flex; justify-content: start; align-items: center;
        gap: 5px;
        box-sizing: border-box; 

        font-family: var(--redhat);
        font-size: var(--h4o3);
        font-weight: var(--bold);
        color: var(--terra);
        padding-bottom: 5px;
        box-shadow: inset 0 -1px var(--terra);
        transition: box-shadow 0.1s ease-in-out, gap 0.2s ease-in-out;
    }
    .link .lucide {
        width: 1.5cap !important;
    }
    .link:hover {
        cursor: pointer;
        gap: 12px;
        box-shadow: inset 0 -1px var(--panna);
    }

    .primary-link {
        display: flex; justify-content: start; align-items: center;
        gap: 8px; padding: 5px 10px; 
        box-sizing: border-box; 
        border-radius: 4px;

        font-family: var(--redhat);
        font-size: var(--h5);
        font-weight: var(--normal);
        color: var(--white);
        background-color: var(--terra);
    }
    .primary-link:hover {
        cursor: pointer;
        background-color: var(--black);
    }

    .secondary-link {
        display: flex; justify-content: start; align-items: center;
        gap: 8px; padding: 5px 10px; 
        box-sizing: border-box; 
        border-radius: 4px;

        font-family: var(--redhat);
        font-size: var(--h5);
        font-weight: var(--normal);
        color: var(--gray);
        background-color: var(--panna);
    }
    .secondary-link:hover {
        cursor: pointer;
        color: var(--black);
    }

    .active-link {
        display: flex; justify-content: start; align-items: center;
        gap: 8px; padding: 5px 10px; 
        box-sizing: border-box; 
        border-radius: 4px;

        font-family: var(--redhat);
        font-size: var(--h5);
        font-weight: var(--normal);
        color: var(--white);
        background-color: var(--horizon);
    }
    .active-link:hover {
        cursor: pointer;
        opacity: .8;
    }

    .primary-link.large, .secondary-link.large, .active-link.large {
        font-size: var(--h4o3);
        padding: 8px 16px;
    }

    /* cards */

    .card-container {
        border: 1px solid var(--beige);
        background-color: var(--beige);
        gap: 1px;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: start;
        align-items: start;
        flex-flow: wrap;
    }

    .card {
        height: fit-content;
        gap: 80px;
        width: 100%;
        flex: 1;
        min-width: 40%; min-height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-direction: column;
        background-color: var(--panna);
        padding: 40px 40px 60px
    }

    .card-title {
        display: flex; justify-content: start; align-items: center;
        gap: 5px;
        font-family: var(--redhat);
        font-size: var(--h3);
        font-weight: var(--bold);
        color: var(--terra);
        text-wrap: pretty;
    }

    .card .link {
        padding-top: 15px;
    }

    .card .text {
        opacity: .8;
    }

    .card .lucide {
        width: 24px; height: auto;
    }

    .card:hover {
        cursor: pointer;
    }
    .card:hover .link {
        cursor: pointer;
        gap: 12px;
        box-shadow: inset 0 -1px var(--panna);
    }

    .card.restricted {
        flex: 1;
        background-color: transparent;
        border-right: 1px solid var(--white-2);
        background-color: var(--white);
    }

    .card.short {
        height: 100%;
        min-width: 27%;
        box-sizing: border-box;
    }
    .card.short span {
        text-wrap: pretty;
    }

    .card.terra {
        background-color: var(--terra);
    }
    .card.terra span, .card.terra .lucide {
        color: var(--panna);
    }

    /* badge */

    .items-union.badge-union {
        padding: 40px; gap: 30px;
    }

    .badge-container {
        display: flex;justify-content: start; align-items: start; flex-direction:row !important; flex-wrap: wrap;
        height: 100%; flex-direction: column;
        width: 100%; box-sizing: border-box;
        gap: 10px;
    }

    .badge {
        height: fit-content;
        gap: 40px;
        width: fit-content;
        flex: 1;
        min-width: 40%;
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-direction: column;
        border: 1px solid var(--white-2); 
        padding: 15px;
        border-radius: 4px;
        box-sizing: border-box;
        background-color: var(--white);
    }
    .badge .lucide {
        border: 1px solid var(--white-2); 
        border-radius: 2px; padding: 5px; height: 26px; width: 26px;
    }

    .badge-title {
        display: flex; justify-content: start; align-items: center;
        gap: 5px;
        font-family: var(--redhat);
        font-size: var(--h4o3);
        font-weight: var(--bold);
        color: var(--terra);
        text-wrap: pretty;
    }

    /* dividers */

    .divider {
        height: 1px;
        width: 100%;
        background-color: var(--black);
    }