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

1. Absolute Lengths:
   - px  : Pixels, a fixed unit relative to the screen resolution.
   - pt  : Points, commonly used in print, 1pt = 1/72 of an inch.
   - in  : Inches, 1in equals 2.54cm.
   - cm  : Centimeters, metric measurement.
   - mm  : Millimeters, smaller metric measurement.
   - pc  : Picas, 1pc = 12 points.

2. Relative Lengths:
   - em  : Relative to the font-size of the element.
   - rem : Relative to the font-size of the root element.
   - %   : Percentage, relative to the parent element's value.
   - vw  : Viewport width, 1vw = 1% of the viewport width.
   - vh  : Viewport height, 1vh = 1% of the viewport height.
   - vmin: Smaller value of viewport width or height.
   - vmax: Larger value of viewport width or height.
   - ch  : Width of the "0" (zero) character in the current font.
   - ex  : Height of the lowercase "x" in the current font.

3. Time:
   - s   : Seconds.
   - ms  : Milliseconds.

4. Angle:
   - deg : Degrees.
   - rad : Radians.
   - grad: Gradians.
   - turn: Full rotations (1 turn = 360deg).

5. Frequency:
   - Hz  : Hertz.
   - kHz : Kilohertz.

6. Resolution:
   - dpi : Dots per inch.
   - dpcm: Dots per centimeter.
   - dppx: Dots per pixel (device pixel ratio).

7. Flex/Aspect/Other Relative Units:
   - fr  : Fraction of available space in a CSS grid.
   - min() : Smallest value from given options.
   - max() : Largest value from given options.
   - clamp(): Constrains a value between a minimum and maximum.

*/

/* ================= GENERAL STYLES ================= */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
}

html{
    font-size: 62.5%;
}

body{
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    /* Global site background */
    background-image: url('/assets/images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: white;
}

/* Optional global dark overlay to keep text readable on busy backgrounds */
body::before{
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: -1;
}

/* ================= LAYOUT OFFSET ================= */
/* Because the header is fixed, push page content down so it isn't hidden behind it */
main{
    padding-top: 120px; /* adjust if needed */
}

/* ================= HEADER ================= */
.site-header{
    margin-top: 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;

    /* Header background image */
    background-image: url('/assets/images/header-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    transition: background-color 0.3s ease, padding 0.3s ease;
}

/* Solid/darker header when scrolled */
.site-header.scrolled{
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0.5rem 9%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Logo */
.logo{
    font-size: 3rem;
    color: red;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: 0.5s ease;
}

.logo:hover{
    transform: scale(1.1);
}

/* Small GIF next to logo */
.logo-gif{
    width: 30px;
    height: 30px;
    object-fit: cover;
}

/* Navigation Links */
nav a{
    font-size: 1.8rem;
    color: white;
    margin-left: 4rem;
    font-weight: 500;
    transition: 0.3s ease;
    border-bottom: 3px solid transparent;
}

nav a:hover,
nav a.active{
    color: red;
    border-bottom: 3px solid red;
}

/* ================= MOBILE NAVIGATION ================= */
.menu-btn{
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 3rem;
    height: 2rem;
    cursor: pointer;
    z-index: 200;
    overflow: visible; /* prevents rotated bars from being clipped */
}

.menu-btn span{
    display: block;
    height: 0.3rem;
    width: 100%;
    background-color: white;
    border-radius: 2px;
    transition: all 0.4s ease;
    transform-origin: center;
}

/* Top line rotates 45° to form X */
.menu-btn.open span:nth-child(1){
    transform: rotate(45deg);
}

/* Middle line fades out */
.menu-btn.open span:nth-child(2){
    opacity: 0;
}

/* Bottom line rotates -45° to form X */
.menu-btn.open span:nth-child(3){
    transform: rotate(-45deg);
}

/* ================= HOME SECTION ================= */
section{
    min-height: 100vh;
    padding: 5rem 9% 5rem;
}

/* Home sits under fixed header even without <main> */
.home{
    padding-top: calc(5rem + 120px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;

    /* Keep home readable regardless of background */
    background-color: rgba(0,0,0,0.75);
    border-radius: 2rem;
}

.home .home-content h1{
    font-size: 6rem;
    font-weight: 700;
    line-height: 1.3;
}

span{
    color: red;
}

.home-content p{
    font-size: 1.6rem;
}

.home-img{
    border-radius: 2%;
}

.home-img img{
    position: relative;
    width: 28vw;
    border-radius: 2%;
    cursor: pointer;
    transition: 0.2s linear;
}

.home-img img:hover{
    font-size: 1.8rem;
    font-weight: 500;
}

/* ================= SOCIAL ICONS (SVG FILES) ================= */

.social-icons a{
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 4rem;
    height: 4rem;
    margin: 3rem 1.5rem 3rem 0;

    background-color: #ffffff;
    border-radius: 50%;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* SVG images */
.social-icons img{
    width: 2.2rem;
    height: 2.2rem;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Hover animation */
.social-icons a:hover{
    transform: translateY(-6px) scale(1.15);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

.social-icons a:hover img{
    transform: scale(1.15);
}


/* Button */
.btn{
    display: inline-block;
    padding: 1rem 2.8rem;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4rem;
    font-size: 1.6rem;
    color: red;
    letter-spacing: 0.3rem;
    font-weight: 600;
    border: 1px solid red;
    transition: 0.3s ease;
    cursor: pointer;
}

.btn:hover{
    transform: scale3d(1.03);
    background-color: red;
    color: black;
    box-shadow: 0 0 25px red;
}

/* ================= TYPING ANIMATION ================= */
.typing-text{
    font-size: 3.4rem;
    font-weight: 600;
    min-width: 280px;
    position: relative;
    color: white;
}

.typing-text span{
    position: relative;
}

/* Animated text */
.typing-text span::before{
    content: "Digital Artist";
    color: red;
    animation: words 20s infinite;
}

/* Blinking cursor */
.typing-text span::after{
    content: "";
    position: absolute;
    width: 3px;
    height: 100%;
    background-color: red;
    right: -5px;
    top: 0;
    animation: cursor 0.6s infinite;
}

@keyframes words{
    0%, 33%{ content: "Digital Artist"; }
    34%, 66%{ content: "Game Developer"; }
    67%, 100%{ content: "Web Designer"; }
}

@keyframes cursor{
    0%, 50%, 100%{ opacity: 1; }
    25%, 75%{ opacity: 0; }
}

/* ================= BLOG (IMAGE CARDS) ================= */
main .blog{
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 0;
}

main .blog .blog-entry{
    position: relative;
    padding: 3rem;
    margin-bottom: 3rem;
    border-radius: 2rem;

    /* Background image is set inline in blog.php */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    overflow: hidden;
}

/* Dark overlay for readability */
main .blog .blog-entry::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.85)
    );
    z-index: 0;
}

/* Content above overlay */
main .blog .blog-entry > *{
    position: relative;
    z-index: 1;
}

main .blog .blog-entry-top{
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}

/* Old thumbnail wrapper hidden using background images now */
main .blog .blog-entry-image{
    display: none;
}

main .blog .blog-entry-content h2{
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 0.8rem;
}

main .blog .blog-meta{
    font-size: 1.4rem;
    opacity: 0.85;
    margin-bottom: 1.2rem;
}

main .blog .blog-entry-content p{
    font-size: 1.6rem;
    line-height: 1.7;
    max-width: 700px;
}

main .blog .blog-entry-content a{
    display: inline-block;
    margin-top: 1.4rem;
    font-size: 1.6rem;
    color: red;
}

/* ================= POST (BACKGROUND PANEL) ================= */
main .post{
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 6rem 4rem;

    /* Panel background image (post-background.jpg) */
    background-image: url('/assets/images/post-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 2.5rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* Dark overlay inside the post panel only */
main .post::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 0;
}

/* Content above the overlay */
main .post > *{
    position: relative;
    z-index: 1;
}

/* Post header layout (title + date) */
.post-header{
    position: static;
    margin-bottom: 2rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
}

main .post .post-header h1{
    font-size: 3.6rem;
    line-height: 1.2;
    margin-bottom: 0.6rem;
}

main .post .post-meta{
    font-size: 1.5rem;
    opacity: 0.75;
}

/* Post image wrapper */
main .post .post-image{
    display: flex;
    justify-content: center;
    margin: 3rem 0;
}

/* Post image (full image visible, no crop) */
main .post .post-image img{
    width: 100%;
    max-width: 720px;
    max-height: 420px;
    height: auto;
    object-fit: contain;
    border-radius: 1.6rem;
    cursor: zoom-in;
}

/* Post paragraphs */
main .post .post-content p{
    font-size: 1.7rem;
    line-height: 1.85;
    margin: 1.4rem 0;
}

/* ================= POST + BLOG TEXT LINKS =================*/

.post-link{
    display: inline-block;
    margin-top: 1.4rem;
    font-size: 1.6rem;
    color: red;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.post-link:hover{
    color: #ff4d4d;
    transform: translateX(2px);
}

/* ================= IMAGE LIGHTBOX ================= */
.post-image img.js-lightbox-img{
    cursor: zoom-in;
}

.lightbox{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    z-index: 9999;
}

.lightbox.is-hidden{
    display: none;
}

.lightbox img{
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 1.2rem;
    border: 1px solid rgba(255,255,255,0.15);
    background-color: #000;
}

.lightbox-close{
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 3rem;
    line-height: 1;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 995px){
    .home{
        flex-direction: column;
        margin: 5rem 4rem;
    }

    .home .home-content h3{
        font-size: 2.5rem;
    }

    .home-img img{
        width: 70vw;
        margin-top: 4rem;
    }

    .menu-btn{
        display: flex;
    }

    nav{
        position: fixed;
        top: 0;
        right: -100%;
        width: 60%;
        height: 100vh;
        background-color: black;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 5rem 2rem;
        gap: 2rem;
        transition: right 0.3s ease;
    }

    nav.active{
        right: 0;
    }

    nav a{
        font-size: 2rem;
        margin-left: 0;
    }

    /* Blog cards stack nicely on mobile */
    main .blog .blog-entry-top{
        flex-direction: column;
    }

    /* Reduce post title on smaller screens */
    main .post .post-header h1{
        font-size: 3rem;
    }

    /* Allow post image to fit mobile */
    main .post .post-image img{
        max-width: 100%;
        max-height: 360px;
    }

    /* Reduce post panel padding on mobile */
    main .post{
        padding: 4rem 2rem;
        border-radius: 1.8rem;
    }
}

@media (max-width: 600px){
    .post-header{
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 1000px){
    .home{
        gap: 4rem;
    }
}

/* ================= ADMIN LINK COLORS =================
   Makes admin links readable on dark backgrounds
======================================================= */

.admin-links a{
    color: #b84dff;          /* bright purple */
    text-decoration: none;
    transition: color 0.2s ease;
}

.admin-links a:hover{
    color: #e0b3ff;          /* lighter purple on hover */
}

/* Optional: make the pagination ellipsis match */
.admin-links span{
    color: rgba(255,255,255,0.6);
}

/* Optional: button inside admin-links */
.admin-links button{
    color: #b84dff;
    transition: color 0.2s ease;
}

.admin-links button:hover{
    color: #e0b3ff;
}