/**
 * Carbon Calculator Specific Styles
 * Dedicated styles for the carbon footprint calculator page
 */

/* Page Background - Sky Theme */
body {
    background: linear-gradient(135deg, #87CEEB 0%, #98D8E8 50%, #B0E0E6 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Brand Header */
.brand-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 2rem;
    z-index: 1000;
    pointer-events: none; /* Allow clicks to pass through except on the link */
}

.brand-link {
    display: inline-block;
    text-decoration: none;
    pointer-events: auto; /* Re-enable clicks on the link */
    transition: all 0.3s ease;
}

.brand-link:hover {
    transform: translateY(-2px);
}

.brand-text {
    font-family: 'Fredoka', cursive;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
}

/* Animated Clouds */
.cloud {
    position: absolute;
    animation: float 20s infinite linear;
    z-index: 1;
}

.cloud img {
    width: 100%;
    height: auto;
    filter: brightness(1.2);
}

.cloud-1 {
    top: 10%;
    left: -15vw;
    width: 90px;
    animation-duration: 30s;
    animation-delay: 0s;
    opacity: 0.4; /* Lebih redup - cloud jauh */
}

.cloud-2 {
    top: 25%;
    left: -12vw;
    width: 110px;
    animation-duration: 40s;
    animation-delay: 8s;
    opacity: 0.7; /* Normal - cloud sedang */
}

.cloud-3 {
    top: 40%;
    left: -18vw;
    width: 80px;
    animation-duration: 35s;
    animation-delay: 16s;
    opacity: 0.3; /* Paling redup - cloud paling jauh */
}

.cloud-4 {
    top: 55%;
    left: -15vw;
    width: 100px;
    animation-duration: 45s;
    animation-delay: 24s;
    opacity: 0.6; /* Agak redup - cloud jauh */
}

.cloud-5 {
    top: 70%;
    left: -12vw;
    width: 95px;
    animation-duration: 38s;
    animation-delay: 32s;
    opacity: 0.8; /* Paling terang - cloud dekat */
}

@keyframes float {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(100vw + 300px));
    }
}

/* Main Content */
main {
    position: relative;
    z-index: 10;
    min-height: calc(100vh - 30px); /* Reserve space for footer */
    padding: 2rem 0;
}

/* Footer - Earth Theme */
footer {
    position: relative;
    background: #8B4513; /* Saddle brown - warna coklat tanah */
    height: 30px; /* Footer pendek - 50% dari 60px */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 2px solid #228B22; /* Forest green - garis hijau rumput, dikurangi dari 4px */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

footer p {
    margin: 0;
    color: #F5DEB3; /* Wheat color - kontras dengan coklat tanah */
    font-size: 0.8rem; /* Dikurangi dari 0.9rem */
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    main {
        min-height: calc(100vh - 25px);
        padding: 1rem 0;
    }
    
    footer {
        height: 25px; /* 50% dari 50px */
        border-top-width: 2px;
    }
    
    footer p {
        font-size: 0.7rem; /* Dikurangi dari 0.8rem */
        padding: 0 1rem;
        text-align: center;
    }
    
    /* Brand header responsive */
    .brand-header {
        padding: 1rem 1.5rem;
    }
    
    .brand-text {
        font-size: 1.3rem;
    }
    
    /* Cloud adjustments for tablet */
    .cloud-1, .cloud-4 { left: -20vw; }
    .cloud-2, .cloud-5 { left: -18vw; }
    .cloud-3 { left: -22vw; }
    
    .cloud {
        width: 70px !important;
    }
    
    /* Tablet animation end position */
    @keyframes float {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(100vw + 250px)); }
    }
}

@media (max-width: 480px) {
    footer {
        height: 22px; /* 50% dari 45px, dibulatkan */
        border-top-width: 1px;
    }
    
    footer p {
        font-size: 0.65rem; /* Dikurangi dari 0.75rem */
    }
    
    /* Brand header mobile */
    .brand-header {
        padding: 0.8rem 1rem;
    }
    
    .brand-text {
        font-size: 1.1rem;
    }
    
    /* Cloud adjustments for mobile */
    .cloud-1, .cloud-4 { left: -25vw; }
    .cloud-2, .cloud-5 { left: -22vw; }
    .cloud-3 { left: -28vw; }
    
    .cloud {
        width: 60px !important;
    }
    
    /* Mobile animation end position */
    @keyframes float {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(100vw + 200px)); }
    }
}

@media (max-width: 320px) {
    /* Brand header small mobile */
    .brand-text {
        font-size: 1rem;
    }
    
    /* Cloud adjustments for very small screens */
    .cloud-1, .cloud-4 { left: -30vw; }
    .cloud-2, .cloud-5 { left: -27vw; }
    .cloud-3 { left: -33vw; }
    
    .cloud {
        width: 50px !important;
    }
    
    /* Small mobile animation end position */
    @keyframes float {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(100vw + 150px)); }
    }
}