/* ======================================
   Ava_Art Website Style Sheet
   Fonts: DM Serif Text & Roboto Flex
   Color Palette: Cream (#F5F2EE), Dark Gray (#2A2A2A), Accent (#E9E4DD)
====================================== */

/* ===== Global Styles ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto Flex', sans-serif;
    background-color: #F5F2EE;
    color: #2A2A2A;
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; border-radius: 12px; }

/* ===== Navbar ===== */
.navbar {
    width: 100%;
    padding: 1rem 3rem;
    background-color: #E9E4DD;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    font-family: 'DM Serif Text', serif;
}

.navbar .logo { font-size: 2rem; font-weight: 500; }

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links li a {
    font-size: 1rem;
    transition: all 0.3s ease;
}

.nav-links li a:hover,
.nav-links li a.active { opacity: 0.6; }

/* ===== Home Section ===== */
.home {
    padding: 12rem 2rem 6rem;
    text-align: center;
}

.home h1 {
    font-family: 'DM Serif Text', serif;
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.home p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 2rem;
}

.featured-art {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    transition: transform 0.4s ease;
}
.featured-art:hover { transform: scale(1.02); }

/* ===== About Section ===== */
.about { padding: 8rem 2rem; }

.about-container {
    display: flex;
    gap: 4rem;
    align-items: center;
    flex-wrap: wrap;
}

.about-text { flex: 1 1 400px; }

.about-text h1 { font-family: 'DM Serif Text', serif; font-size: 3rem; margin-bottom: 1rem; }
.about-text p { margin-bottom: 1rem; font-size: 1.1rem; }

.about-photo { flex: 1 1 300px; text-align: center; }

/* ===== Portfolio Section ===== */
.portfolio-header { text-align: center; padding: 6rem 2rem 2rem; }
.portfolio-header h1 { font-family: 'DM Serif Text', serif; font-size: 3rem; margin-bottom: 0.5rem; }
.portfolio-header p { font-size: 1.2rem; }

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

/* ===== Portfolio Item Overlay ===== */
.portfolio-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-item:hover img { transform: scale(1.05); }

.portfolio-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(42,42,42,0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    font-family: 'DM Serif Text', serif;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 1rem;
}

.portfolio-item:hover .overlay { opacity: 1; }

.portfolio-item .overlay h3 { margin: 0; font-size: 1.5rem; }
.portfolio-item .overlay p { margin: 0.5rem 0 0; font-size: 1rem; color: #ddd; }

/* ===== Contact Section ===== */
.contact { padding: 8rem 2rem; text-align: center; }
.contact h1 { font-family: 'DM Serif Text', serif; font-size: 3rem; margin-bottom: 1rem; }
.contact-subtitle { font-size: 1.2rem; margin-bottom: 3rem; }

/* ===== Forms ===== */
.contact-form-container { max-width: 600px; margin: 0 auto; }
.contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-form input,
.contact-form textarea {
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Roboto Flex', sans-serif;
    resize: vertical;
}
.contact-form textarea { min-height: 150px; }
.submit-btn {
    padding: 1rem 2rem;
    background-color: #2A2A2A;
    color: #F5F2EE;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}
.submit-btn:hover { background-color: #444; }

/* ===== Hamburger Menu ===== */
.hamburger { display: none; flex-direction: column; cursor: pointer; gap: 5px; }
.hamburger span { width: 25px; height: 3px; background-color: #2A2A2A; transition: all 0.3s ease; }
.hamburger.toggle span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.toggle span:nth-child(2) { opacity: 0; }
.hamburger.toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

@media screen and (max-width: 768px) {
    .hamburger { display: flex; }
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100%;
        width: 60%;
        background: #E9E4DD;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        transition: right 0.3s ease;
        padding: 2rem;
    }
    .nav-links.nav-active { right: 0; }
    .about-container { flex-direction: column; gap: 2rem; }
    .home h1 { font-size: 2.5rem; }
}

/* ===== LIGHTBOX ===== */
body.lightbox-open { overflow: hidden; }

.lightbox {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(42,42,42,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    text-align: center;
    position: relative;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.lightbox-text {
    margin-top: 1rem;
    color: #fff;
}

.lightbox-text h2 { font-family: 'DM Serif Text', serif; font-size: 2rem; margin-bottom: 0.5rem; }
.lightbox-text p { font-size: 1.1rem; color: #ddd; }

.lightbox .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    z-index: 1010;
}

/* Bottom bar stays at the bottom of the content, scrolls naturally */
.bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
    font-family: 'Roboto Flex', sans-serif;
    font-size: 0.9rem;
    margin-top: 50px; /* space above footer */
}

.bottom-bar a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}

.bottom-bar a:hover {
    color: #000;
}


html {
    scroll-behavior: smooth;
}

/* Global: no underlines anywhere */
a { 
    text-decoration: none; 
    color: inherit; 
}

/* YouTube + special links: underline only on hover */
.youtube-link {
    text-decoration: none;
}

.youtube-link:hover {
    text-decoration: underline;
}


/* Fixed navbar height */
.navbar {
    height: 80px; /* total height of navbar */
    padding: 0 3rem; /* left/right spacing */
    display: flex;
    justify-content: space-between;
    align-items: center; /* vertically center content */
}

/* Logo image size */
.navbar .logo img {
    height: 130px; /* smaller, looks balanced in navbar */
    width: auto;  /* maintain aspect ratio */
    display: block;
}

/* Optional spacing between logo and nav links */
.navbar .logo {
    margin-right: 2rem;
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .navbar {
        height: 70px; 
        padding: 0 1.5rem;
    }

    .navbar .logo img {
        height: 40px; /* smaller on mobile */
    }
}



/* ============================
   GLOBAL LINK STYLING (Fix)
   ============================ */
.page-links a:link,
.page-links a:visited {
    color: #5a3bee;      /* default link color */
    text-decoration: underline;
    transition: color 0.3s ease;
}

.page-links a:hover {
    color: #a086ff;      /* hover color */
}

.page-links a:active {
    color: #2b1a99;      /* when clicking */
}

.youtube-link {
    text-decoration: none;
}

.youtube-link:hover {
    text-decoration: underline;
}

/* Default link color */
.youtube-link {
    color: #e62117;      /* YouTube red */
    text-decoration: none;
}

/* Hover */
.youtube-link:hover {
    color: #ff4d4d;      /* lighter red */
    text-decoration: underline; /* optional — remove if you want none */
}

/* Active (while clicking) */
.youtube-link:active {
    color: #cc0000;      /* slightly darker red */
}

/* Visited */
.youtube-link:visited {
    color: #990000;      /* deep red */
}


/* GLOBAL LINK COLORS (not navbar) */
main a,
.content a,
section a,
footer a {
    color: #d94141; /* your red */
    text-decoration: none;
    transition: color 0.25s ease;
}

main a:hover,
.content a:hover,
section a:hover,
footer a:hover {
    color: #a52b2b; /* darker red on hover */
}

main a:active,
.content a:active,
section a:active,
footer a:active {
    color: #7a1f1f; /* even darker when clicked */
}



/* ===== About Section Adjustments ===== */
.about {
    padding: 4rem 2rem 2rem; /* top | sides | bottom (reduced bottom) */
}

.about-video iframe {
    height: 500px;      /* taller video */
    max-width: 800px;   /* optional max width */
    width: 100%;        /* fill container width */
}