@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');

@layer resets, theme, typography, site;


@layer resets {
    *, *::before, *::after {
        box-sizing: border-box;
    }
    
    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }
    
    body {
        min-height: 100dvh;
        line-height: 1.5;
    }
    
    h1, h2, h3, h4, button, input, label {
        line-height: 1.1;
    }
    
    h1, h2, h3, h4 {
        text-wrap: balance;
    }
    
    p{
        text-wrap: pretty;
    }
    
    input, button, textarea, select {
        font: inherit;
    }
    
    body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
        margin: 0;
    }
    
    ul[class],
    ol[class] {
        margin: 0;
        padding: 0;
        list-style: none;
    }
}

@layer typography {
    :root {
        /* Perfect Fourth */
        --type-ratio: 1.33;

        /*  Body font size  */
        --body-font-size: 1rem;

        /* Compounded headlines sizes */
        --font-size-4: calc(var(--body-font-size) * var(--type-ratio));
        --font-size-3: calc(var(--font-size-4) * var(--type-ratio));
        --font-size-2: calc(var(--font-size-3) * var(--type-ratio));
        --font-size-1: calc(var(--font-size-2) * var(--type-ratio));
    }

    h1, .h1 {
        --font-size: var(--font-size-1);
        font-size: var(--font-size);
    }

    h2, .h2 {
        --font-size: var(--font-size-2);
        font-size: var(--font-size);
    }

    h3, .h3 {
        --font-size: var(--font-size-3);
        font-size: var(--font-size);
    }

    h4, .h4 {
        --font-size: var(--font-size-4);
        font-size: var(--font-size);
    }

    :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, .fluid-type) {
        --_font-min: calc(var(--font-size) - var(--font-size) * var(--font-size-diff, 0.3));
        font-size: clamp(
        max(var(--body-font-size), var(--_font-min)),
        var(--_font-min) + 1cqi,
        var(--font-size)
        );
    }
}

@layer theme {

    :root {
        --antiflash-white: hsla(210, 16%, 93%, 1);
        --platinum: hsla(210, 14%, 89%, 1);
        --french-gray: hsla(210, 14%, 83%, 1);
        --french-gray-2: hsla(210, 11%, 71%, 1);
        --cobalt-blue: hsla(216, 85%, 34%, 1);
        --dodger-blue: hsla(207, 90%, 54%, 1);
        --princeton-orange: hsla(35, 100%, 50%, 1);
        --poppy: hsla(352, 76%, 50%, 1);
    }

}

@layer site {

    :root {
        /* Transition */
        --tran-05: all 0.5s ease;
        --tran-04: all 0.4s ease;
        --tran-03: all 0.3s ease;
        --header-height: max(3rem,6cqb);
    }

    body {
        font-family: 'Poppins', system-ui, Verdana, Arial, Helvetica, sans-serif;
        /* block-size: 100dvh; */
        font-size: 1rem;
        scroll-behavior: smooth;
    }

    header {
        container: header/inline-size;
        background-color: var(--antiflash-white);
        z-index: 10;
        position: fixed;
        inset-block-start: 0;
        inset-inline-start: 0;
        block-size: var(--header-height);
        inline-size: 100%;
        padding-inline: 5cqi;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        & #nav-logo {
            display: flex;
            gap: 1cqi;
            & img {
                block-size: calc(0.4 * var(--header-height));
                inline-size: auto;
            }
        }

        & #languageOptions {
            padding: 0.5cqb 1cqi;
            margin-inline: auto 1cqi;
            & option {
                padding: 1cqi;
                display: flex;
                align-items: center;
              }
        }

        & #sidebar-open, #sidebar-close {
            display: none;
            block-size: calc(0.75 * var(--header-height));
        }

        & #menu {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 2cqi;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            & a {
                font-size: calc(0.3 * var(--header-height)) ;
                /* color: var(--cobalt-blue); */
                color: var(--gunmetal);
                text-decoration: none;
                &.active {
                    background-color: var( --french-gray);
                }
                &:hover {
                    color: var(--dodger-blue);
                }
            }  
        }

        @container  header (inline-size <= 850px) {
            & #sidebar-open{
                display: block;
            }
            & #menu{
                z-index: 100;
                position: fixed;
                inset-block-start: 0;
                inset-inline-start: 0;
                width: max(15ch,40%);
                transform: translateX(-100%);
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: flex-start;
                background-color: white;
                opacity: 0.9;
                &.active{
                    transition: var(--tran-03);
                    transform: translateX(0); 
                    border: 1px solid var(--french-gray);
                    box-shadow: 0 0 10px var(--platinum);
                }
                & > li{
                    margin: 1rem auto 1rem 1rem;
                }
            }
        }
    }

    main {
        container: main/inline-size;
        inline-size: clamp(30ch, 100%, 1400px);
        margin-block-start: var(--header-height);
        margin-inline: auto;
        padding-inline: 2cqi;
        z-index: 1;
        & .screen{
            scroll-margin-block-start: var(--header-height);
            padding-block: 5cqi;
            min-block-size: 100dvh;
            /* & p, &li {
                text-align: justify;
            } */

    }

    #home {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: min-content;
        gap: 1cqi;
        justify-content: center;
        & .hero{
            grid-column: 1/-1; 
            text-align: center;
            align-self: center;
            > * {
                margin-block: 6cqi;
            }
            & h1 span{
                color: var(--poppy);
                text-decoration: underline;
            }
        }
        & .card {
            padding-inline: 1cqi;
             & h2 {
                /* &::before{
                    content: "> ";
                } */
                padding-block: 3cqi 1cqi;
             }
        }
        & .visual{
            display: grid;
            place-items: center;
            & img {
                object-fit: contain;
                aspect-ratio: 1 / 1;
                inline-size: 60%;
                /* block-size: auto;  */
            }
        }
    }

    #plans { 
        display: grid;
        grid-template-columns: repeat(3, minmax(min(100%, 25ch), 1fr));
        grid-auto-rows:min-content;
        column-gap: 4cqi;
        row-gap: 4cqi;
        justify-content: center;
        &  * {
            text-align: center;
        }
        & .header {
            grid-column: 1/-1;
            padding-block: 5cqi;
        }
        & .plan {
            grid-row: auto/span 4;
            display: grid;
            grid-template-rows: subgrid;
            row-gap: 2cqi;
            padding: 2cqi;
            border: 1px solid var(--french-gray);
            box-shadow: 0 0 10px var(--platinum);
            position: relative;
            & .features {
                display: grid;
                justify-content: center;
                align-items: start;
                padding: 0;
                margin: 0;
                & li {
                    margin-bottom: 1cqb;
                    font-weight: bold;
                }
            }
            & .ribbon {
                /* To use ribbon: <div class="ribbon">Your text content</div> */
                font-size: 2cqmin;
                font-weight: bold;
                color: black;
                --f: .5em; /* control the folded part */
                position: absolute;
                top: 0;
                right: 0;
                line-height: 1.5;
                padding-inline: 3cqi;
                padding-bottom: var(--f);
                border-image: conic-gradient(#0008 0 0) 50%/var(--f);
                clip-path: polygon(
                100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
                transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
                transform-origin: 0 100%;
                background-color: var(--princeton-orange);
            }
        }

        
        & .footer{
            grid-column: 1/-1;
        }
    }

    @container main (inline-size <= 1200px) {
        #plans{
            grid-template-columns: minmax(25ch,85%);
        }
    }

    #contacts {
        text-align: center;
    }

    #about, #terms {
        & h1, & h2, & h3, & h4 {
            padding-block:  2cqi;
        }
    }


    @container main (inline-size < 800px) {
        #home {
            grid-template-columns: 1fr;
            & .visual{
                display: none;
            }
        }
    }



    .signup {
        background-color: var(--poppy);
        color: white;
        inline-size: fit-content;
        white-space: nowrap;
        /* padding: 1cqi 1cqi; */
        padding: 1cqi;
        margin: 0 auto;
        border: 2px solid transparent;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        &:hover {
            border: 2px solid black ;
        }
        cursor: pointer;
        border-radius: 10px;
        text-decoration: none;
    }
    
}