@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&family=Source+Sans+3:wght@400;600&display=swap');

@layer layout, base, components, background;

:root {
    /* Main color palette */
    --color-text: #1e1d20;
    --color-sunset-1: #d64a4a;
    --color-sunset-2: #ff8c5b;
    --color-sunset-3: #715eea;
    --color-shadow-1: 49, 44, 66;
    --color-shadow-2: 105, 87, 173;
    --color-foreground-primary: #fcfcfc;
    --color-background-primary: linear-gradient(180deg, #fff8f6 0%, #f5f7ff 100%);
    --color-darken: calc(l - 0.25) c h;
    --color-light-mix: white 15%;

    --shadow-displacement-1: 0 6px 18px;
    --shadow-displacement-2: 0 2px 4px;
    --shadow-alpha-soft: 0.1;
    --shadow-alpha-hard: 0.12;

    /* Relative units scaling */
    --scale-xs: 0.5rem;
    --scale-sm: 1rem;
    --scale-md: 1.5rem;
    --scale-lg: 2rem;
    --scale-xl: 3rem;

    /* Font weights */
    --font-weight-reg: 400;
    --font-weight-bld: 600;

    --font-display: "Poppins", "Segoe UI", Roboto, sans-serif;
    --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

    /* Animations */
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-slide-right: transform 0.25s ease-out;
}

@layer layout {
    body {
        display: grid;
        grid-template-columns:
            minmax(var(--scale-sm, 1rem), 1fr)
            minmax(auto, 60rem)
            minmax(var(--scale-sm, 1rem), 1fr);
        grid-template-rows:
            6rem 
            1fr 
            auto;
        min-height: 100vh;
        gap: var(--scale-sm, 1rem);
    }

    header {
        grid-column: 2;
        grid-row: 1;
    }

    main {
        grid-column: 2;
        grid-row: 2;
    }

    footer {
        grid-column: 2;
        grid-row: 3
    }
}

@layer base {
    * {
        color: var(--color-text, #1e1d20);

        /* Reset base margin and padding */
        margin: 0;
        padding: 0;
    }

    ul, ol {
        padding-left: var(--scale-md, 1.5rem);
    }

    body {
        font-family: var(--font-body);
    }

    em {
        color: var(--color-sunset-1, #d64a4a);
        font-weight: var(--font-weight-bld, 600);
        font-style: normal;
    }

    a { 
        text-decoration: none;
        color: var(--color-sunset-3, #715eea);
    }

    a:hover {
        color: oklch(from var(--color-sunset-3, #715eea) var(--color-darken, calc(l - 0.25) c h));
    }
}

/********* Styling *********/
/* Header */
@layer component {
    header { 
        background: var(--color-foreground-primary, #fcfcfc);
        display: flex;
        flex-wrap: wrap;
        padding: var(--scale-sm, 1rem) var(--scale-lg, 2rem);
        align-items: center;
        justify-content: space-between;
        box-shadow:
            var(--shadow-displacement-1, 0 6px 18px)
            rgba(var(--color-shadow-1, 49, 44, 66), var(--shadow-alpha-soft, 0.1)),
            var(--shadow-displacement-2, 0 2px 4px)
            rgba(var(--color-shadow-2, 105, 87, 173), var(--shadow-alpha-hard, 0.15));
        position: relative;
        z-index: 100;
        
        h1 {
            font-family: var(--font-display);
            font-weight: var(--font-weight-bld, 600);
            background-image: linear-gradient(90deg, var(--color-sunset-1), var(--color-sunset-3));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        nav {
            ul {
                display: flex;
                flex-wrap: wrap;
                list-style: none;
                gap: var(--scale-sm, 1rem);
                
                li {
                    a {
                        text-decoration: none;
                        display: inline-block;
                        font-weight: var(--font-weight-bld, 600);
                        color: var(--color-sunset-3, #715eea);
                        position: relative;
                    }

                    a::after {
                        content: "";
                        position: absolute;
                        bottom: -2px;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        background: linear-gradient(90deg,
                        color-mix(in srgb, var(--color-sunset-1) 85%, var(--color-light-mix, white 15%)),
                        color-mix(in srgb, var(--color-sunset-3) 85%, var(--color-light-mix, white 15%))
                        );
                        transform: scaleX(0);
                        transition: var(--transition-slide-right);
                        transform-origin: right;
                    }

                    a:hover::after {
                        transform: scaleX(1);
                        transform-origin: left;
                    }
                }
            }
        }

        a:hover {
            color: oklch(from var(--color-sunset-3, #715eea) var(--color-darken, calc(l - 0.25) c h));
        }

        /* Hamburger Menu - CSS Only */
        .menu-toggle {
            display: none; /* Hide the checkbox */
        }

        .hamburger {
            display: none; /* Hidden by default */
            flex-direction: column;
            justify-content: space-between;
            width: var(--scale-lg, 2rem);
            height: var(--scale-md, 1.5rem);
            cursor: pointer;
            z-index: 1001;
        }

        .hamburger span {
            display: block;
            width: 100%;
            height: 3px;
            background: var(--color-sunset-3);
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        /* Animate hamburger to X when checked */
        .menu-toggle:checked ~ .hamburger span:nth-child(1) {
            transform: rotate(45deg) translate(0.5rem, 0.5rem);
        }

        .menu-toggle:checked ~ .hamburger span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle:checked ~ .hamburger span:nth-child(3) {
            transform: rotate(-45deg) translate(0.5rem, -0.5rem);
        }
    }
}

/* Main */
@layer component {
    main {
        /* Any section with a standalone picture gets centered portrait styling */
        section > picture:first-of-type img {
            display: block;
            margin: var(--scale-lg) auto;
            max-width: 300px;
            border-image: 
                linear-gradient(180deg, 
                    var(--color-sunset-2, #ff8c5b),
                    var(--color-sunset-1, #d64a4a)) 1; 
            border-width: var(--scale-xs, 0.5rem);
            border-style: solid;
        }

        #greeting {
            min-height: 30dvh;

            > * {
                margin: auto;
            }

            picture > img {
                display: block;
                margin-bottom: var(--scale-xl, 3rem);
                margin-left: auto;
                margin-right: auto;
                border-image: 
                    linear-gradient(180deg, 
                        var(--color-sunset-2, #ff8c5b),
                        var(--color-sunset-1, #d64a4a)) 1; 
                border-width: var(--scale-xs, 0.5rem);
                border-style: solid;
                width: 30%;
                height: 30%;
                transition: all var(--transition-bounce);
            }

            picture > img:hover {
                transform: scale(1.1);
            }

            h2 {
                text-align: center;
                margin-bottom: var(--scale-md, 1.5rem);
            }

            p {
                max-width: 65ch;
                text-align: center;
            }
        }

        section {
            background: var(--color-foreground-primary, #fcfcfc);
            margin-bottom: var(--scale-lg, 2rem);
            padding: var(--scale-lg, 2rem);
            box-shadow:
                var(--shadow-displacement-1, 0 6px 18px)
                rgba(var(--color-shadow-1, 49, 44, 66), var(--shadow-alpha-soft, 0.1)),
                var(--shadow-displacement-2, 0 2px 4px)
                rgba(var(--color-shadow-2, 105, 87, 173), var(--shadow-alpha-hard, 0.15));

            h2 {
                font-family: var(--font-display);
                font-weight: var(--font-weight-bld, 600);
                background: linear-gradient(90deg,
                    color-mix(in srgb, var(--color-sunset-1, #d64a4a), var(--color-light-mix, white 15%)),
                    color-mix(in srgb, var(--color-sunset-3, #715eea), var(--color-light-mix, white 15%))
                );
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                margin-bottom: var(--scale-md, 1.5rem);
            }

            p, ul {
                margin-bottom: var(--scale-sm, 1rem);
            }
        }

       /* Highlights section */
        section .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
            gap: var(--scale-lg);
            margin-top: var(--scale-md);

            article {
                background: var(--color-foreground-primary, #fcfcfc);
                border-radius: var(--scale-sm, 1rem);
                overflow: hidden;
                box-shadow:
                    var(--shadow-displacement-1, 0 6px 18px)
                    rgba(var(--color-shadow-1, 49, 44, 66), var(--shadow-alpha-soft, 0.1)),
                    var(--shadow-displacement-2, 0 2px 4px)
                    rgba(var(--color-shadow-2, 105, 87, 173), var(--shadow-alpha-hard, 0.15));
                display: flex;
                flex-direction: column;
                transition: transform 0.2s ease, box-shadow 0.2s ease;

                /* Card Content */
                h3 {
                    font-family: var(--font-display, 400);
                    font-weight: var(--font-weight-bld, 600);
                    margin: var(--scale-md, 1.5rem) var(--scale-md, 1.5rem) var(--scale-xs, 0.5rem);
                }

                p {
                    margin: 0 var(--scale-md, 1.5rem) var(--scale-md, 1.5rem);
                }

                a {
                    margin: 0 var(--scale-md, 1.5rem) var(--scale-md, 1.5rem);
                    font-weight: var(--font-weight-bld, 600);
                    text-decoration: none;
                }
            }

            article:hover {
                transform: translateY(-4px);
            }

            /* Card picture */
            picture {
                display: block;
                width: 100%;
                aspect-ratio: 3 / 2;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }
            }
        }

        /* Horizontal project cards - list view */
        section .project-list {
            display: flex;
            flex-direction: column;
            gap: var(--scale-lg, 2rem);
            margin-top: var(--scale-md, 1.5rem);

            article {
                padding: var(--scale-md, 1.5rem);
                display: flex;
                flex-direction: column;
                background: var(--color-foreground-primary, #fcfcfc);
                border-radius: var(--scale-sm, 1rem);
                overflow: hidden;
                box-shadow:
                    var(--shadow-displacement-1, 0 6px 18px)
                    rgba(var(--color-shadow-1, 49, 44, 66), var(--shadow-alpha-soft, 0.1)),
                    var(--shadow-displacement-2, 0 2px 4px)
                    rgba(var(--color-shadow-2, 105, 87, 173), var(--shadow-alpha-hard, 0.15));
                align-items: stretch;
                transition: transform 0.2s ease, box-shadow 0.2s ease;

                h3 {
                    font-family: var(--font-display);
                    font-weight: var(--font-weight-bld, 600);
                    margin-bottom: var(--scale-xs, 0.5rem);
                    color: var(--color-text, #1e1d20);
                }

                p {
                    flex: 1;
                    line-height: 1.6;
                    margin-bottom: var(--scale-sm, 1rem);
                    color: var(--color-text, #1e1d20);
                }

                 a {
                    align-self: flex-start;
                    font-weight: var(--font-weight-bld, 600);
                    color: var(--color-sunset-3, #715eea);
                    text-decoration: none;
                }

                a:hover {
                    color: oklch(from var(--color-sunset-3, #715eea) var(--color-darken, calc(l - 0.25) c h));
                }
            }

            article:hover {
                transform: translateX(8px);
            }
        }
    }
}

/* Footer */
@layer component {
    footer {
        background: var(--color-foreground-primary, #fcfcfc);
        padding: var(--scale-lg, 2rem);
        text-align: center;
        box-shadow:
            var(--shadow-displacement-1, 0 6px 18px)
            rgba(var(--color-shadow-1, 49, 44, 66), var(--shadow-alpha-soft, 0.1)),
            var(--shadow-displacement-2, 0 2px 4px)
            rgba(var(--color-shadow-2, 105, 87, 173), var(--shadow-alpha-hard, 0.15));
    }
    
}

/* Graph-like background */
@layer background {
    body {
        background: var(--color-background-primary, linear-gradient(180deg, #fff8f6 0%, #f5f7ff 100%));
    }

    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        /* Base gradient wash (sunset-like) */
        background:
            linear-gradient(180deg, rgba(255, 248, 246, 0.9) 0%, rgba(245, 247, 255, 0.95) 100%),
            repeating-linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.03) 0px,
                rgba(0, 0, 0, 0.03) 1px,
                transparent 1px,
                transparent 24px
            ),
                repeating-linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.03) 0px,
                rgba(0, 0, 0, 0.03) 1px,
                transparent 1px,
                transparent 24px
            );
        background-blend-mode: multiply;
    }

    main, header, footer {
        position: relative;
        z-index: 1;
    }
}

/* Animation for home page */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}    

body[data-page="home"] {
    header, main, footer {
        opacity: 0;
        animation: fadeIn 0.8s ease-out forwards;
    }

    header {
        animation-delay: 0.1s;
    }

    main {
        animation-delay: 0.3s;
    }

    footer {
        animation-delay: 0.6s;
    }
}

/* ---------------------------
   Experience / Resume: remove inner cards
   - Keep the outer Resume container visually boxed
   - Remove backgrounds, shadows, radii from nested sections
   - Keep Resume H2 gradient intact
   --------------------------- */
body[data-page="experience"] main > section {
  /* outer "Resume" section: keep existing boxed look (no change needed)
     but reinforce a clear container if any earlier rule changed it */
  background: var(--color-foreground-primary, #fcfcfc);
  border-radius: var(--scale-sm, 1rem);
  box-shadow: 
    var(--shadow-displacement-1, 0 6px 18px) rgba(var(--color-shadow-1, 49,44,66), var(--shadow-alpha-soft, 0.1));
  padding: var(--scale-lg, 2rem);
}

/* nested sections inside the outer Resume should be plain text */
body[data-page="experience"] {
    main > section > section {
        /* Remove card visuals */
        background: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0 0 var(--scale-md, 1.5rem);

        /* Text and lists */
        ul, ol {
            margin: 0 0 var(--scale-sm, 1rem);
            padding-left: var(--scale-md, 1.5rem);
        }

        h3, h4 {
            background: none;
            -webkit-text-fill-color: initial;
            color: var(--color-text, #1e1d20);
            margin: 0 0 var(--scale-xs, 0.5rem);
            font-weight: var(--font-weight-bld, 600);
        }

        /* Reset inherited shadows/borders from children */
        * {
            box-shadow: none;
            border: none;
            border-radius: 0;
            background: none;
        }
    }
}



/********* Media Queries *********/
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
    }
}

/********* Responsive Layout *********/
/* ===== Small Screens: mobile phones ===== */
@media (max-width: 42.5em) {
    header {
        top: 0;
        padding: var(--scale-sm) var(--scale-md);
        z-index: 1000;  /* Ensure it's on top */
    }

    /* Show hamburger on mobile */
    .hamburger {
        display: flex;
    }

    /* Hide nav by default on mobile */
    header nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-foreground-primary);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        box-shadow: 0 4px 12px rgba(var(--color-shadow-1), 0.15);
        z-index: 101;  /* Higher than header */
    }

    /* Show nav when checkbox is checked */
    .menu-toggle:checked ~ nav {
        max-height: 400px;
    }

    header nav ul {
        flex-direction: column;
        padding: var(--scale-md);
        gap: var(--scale-xs);
    }

    header nav li {
        width: 100%;
    }

    header nav a {
        display: block;
        padding: var(--scale-sm);
        text-align: center;
        border-radius: 0.5rem;
        transition: background 0.2s ease;
    }

    header nav a:hover {
        background: color-mix(in srgb, var(--color-sunset-3) 10%, transparent);
    }

    main section {
        padding: var(--scale-md);
        margin-bottom: var(--scale-md);
    }

    #greeting picture > img {
        width: 60%;
        height: auto;
        margin-bottom: var(--scale-md);
    }

    section > picture:first-of-type img {
        max-width: 60%;
        height: auto;
        margin-bottom: var(--scale-md);
    }

    .card-grid {
        grid-template-columns: 1fr;
        gap: var(--scale-md);
    }

    footer {
        padding: var(--scale-md);
        font-size: 0.9rem;
    }
}

/* ===== Medium Screens: tablets & small laptops ===== */
@media (min-width: 42.5em) and (max-width: 64em) {
    header {
        flex-wrap: wrap;
        padding: var(--scale-md) var(--scale-lg);
    }

    header nav ul {
        gap: var(--scale-sm);
    }

    #greeting picture > img {
        width: 40%;
    }

    section > picture:first-of-type img {
        max-width: 250px;
    }

    main section {
        padding: var(--scale-lg);
    }

    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    }
}

/* ===== Large Screens: desktop ===== */
@media (min-width: 64em) {
    header {
        padding: var(--scale-md) var(--scale-xl);
    }

    main section {
        padding: var(--scale-xl);
    }

    h1, h2, h3 {
        line-height: 1.2;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    }
}