/* Main CSS file - importing all the partials */
/* Still figuring out the best way to organize this stuff */
/* learned about @import from w3schools but not sure if this is the best way */

@import url('partials/_variables.css');
@import url('partials/_globals.css');
@import url('partials/_animations.css');
@import url('partials/_components.css');
@import url('partials/_layout.css');
@import url('partials/_nav.css');
@import url('partials/_footer.css');
@import url('partials/_media.css');

/* Some quick fixes that I couldn't figure out where else to put */
/* TODO: organize this better later */
.font-caveat {
    font-family: 'Caveat', cursive;
}

/* my messy css - still figuring this out */
/* finally got the background image working! */
.home-main {
    background-image: url('../images/bg-home-office-studio.jpg');
    /* background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */ /* old temporary background */
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed; */ /* this was causing issues on mobile so keeping it off */
    min-height: calc(100vh - 80px);
    position: relative;
}

.home-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 245, 240, 0.8); /* made it less opaque */
    z-index: 1;
}

.content-wrapper {
    position: relative;
    z-index: 2;
}

/* placeholder for images that don't exist yet */
.placeholder-img {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    border-radius: 8px;
}