/*
File: style.css
Project: Atwood Creative Co. Portfolio
Author: Parker Atwood & Gemini
Date: October 21, 2025

--- TABLE OF CONTENTS ---
1.  Global Styles & Variables
2.  Reusable Components
    - Buttons
    - Custom Shadows
    - Navigation Bar
    - Page Header
    - Offcanvas Menu
    - Modal Styles
    - Footer
3.  Homepage Styles
4.  About Page Styles
5.  Portfolio Page Styles
6.  Process Page Styles
7.  Web Dev Page Styles
8.  Resume Page Styles
9.  Contact Page Styles
10. Blog Page Styles
11. Media Queries (Responsive Adjustments)
12. Mobile Optimization & Overflow Fix
*/


/* --- 1. Global Styles & Variables --- */

:root {
    --moss: #333a2F;
    --f7-white: #f7f7f9;
    --tea-green: #ebeddf;
    --charcoal: #262223;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--f7-white);
    color: var(--charcoal);
}


/* --- 2. Reusable Components --- */

/* Buttons */
.btn-moss {
    background-color: var(--moss);
    color: #fff;
    border-color: var(--moss);
}
.btn-moss:hover {
    background-color: #2a3027; /* A slightly darker Moss */
    color: #fff;
    border-color: #2a3027;
}
.btn-tea-green {
    background-color: var(--tea-green);
    color: var(--charcoal);
    border-color: var(--tea-green);
    font-weight: 600;
}
.btn-tea-green:hover {
    background-color: #d8dbca; /* A slightly darker Tea Green */
    color: var(--charcoal);
    border-color: #d8dbca;
}

.btn-view-all {
    background-color: var(--tea-green);
    color: var(--moss);
    border-color: var(--tea-green);
    font-weight: 600;
}
.btn-view-all:hover {
    background-color: #d8dbca; /* A slightly darker Tea Green */
    color: var(--moss);
    border-color: #d8dbca;
}

/* Custom Shadows */
.shadow-xl {
    box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.18) !important;
}


.bg-tea-green {
    background-color: var(--tea-green);
}
.text-moss {
    color: var(--moss);
}
.text-tea-green {
    color: var(--tea-green);
}


/* Navigation Bar */
.navbar {
    min-height: 85px;
}
.navbar-dark .nav-link {
    color: var(--tea-green);
    transition: color 0.2s ease-in-out;
    font-weight: 500;
    text-decoration: none;
}
.navbar-dark .nav-link:hover {
    color: var(--charcoal);
}
.navbar-dark .nav-link.active {
    color: var(--tea-green);
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

/* Page Header */
.page-header {
    border-bottom: 2px solid var(--moss);
}
.page-header h1 {
    font-size: 3rem;
}


/* Offcanvas Menu */
.offcanvas {
    background-color: var(--moss);
    color: var(--f7-white);
}
.offcanvas .navbar-nav .nav-link {
    font-size: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
}
.offcanvas .navbar-nav .nav-link:hover {
    color: var(--charcoal);
}
.offcanvas .navbar-nav .nav-link.active {
    color: var(--tea-green);
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

/* Modal Styles */
.portfolio-modal .modal-dialog {
    max-width: 90vw;
}
.portfolio-modal .modal-content {
    background-color: rgba(38, 34, 35, 0.85); /* Semi-transparent charcoal background */
    border: none;
    border-radius: 0.25rem;
}
.portfolio-modal .modal-header {
    background-color: var(--charcoal);
    color: var(--tea-green);
    border-bottom: 1px solid var(--moss);
}
.portfolio-modal .modal-body {
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.portfolio-modal .modal-body img {
    max-height: 75vh; /* Max height relative to viewport */
    max-width: 100%;
    object-fit: contain;
}

/* Footer */
.bg-charcoal {
    background-color: var(--charcoal);
}


/* --- 3. Homepage Styles --- */

.hero-section {
    background-color: var(--tea-green);
    color: var(--moss);
    min-height: 80vh;
}

.portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.375rem;
}
.portfolio-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(247, 247, 249, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
}
.portfolio-item .overlay h5 {
    color: var(--charcoal);
}
.portfolio-item:hover .overlay {
    opacity: 1;
}
.portfolio-item img {
    transition: transform 0.3s ease;
}
.portfolio-item:hover img {
    transform: scale(1.05);
}

.process-step .step-number {
    font-size: 4rem;
    font-weight: 700;
    color: #e0e2d7; /* A lighter Tea Green */
}

.bg-moss {
    background-color: var(--moss);
}

.homepage .portfolio-category-header {
    color: var(--charcoal);
    border-bottom-color: var(--charcoal);
}
.homepage .process-section {
    color: var(--moss);
}
.homepage .process-step .step-number {
    color: rgba(51, 58, 47, 0.3); /* Semi-transparent Moss */
}


/* --- 4. About Page Styles --- */

.lead {
    font-weight: 400; /* A slightly lighter weight for lead paragraphs */
}
.about-intro-section {
    background-color: var(--charcoal);
    color: var(--tea-green);
}
.skill-card {
    background-color: var(--charcoal);
    color: var(--tea-green);
}


/* --- 5. Portfolio Page Styles --- */
.portfolio-category-header {
    font-size: 2.25rem;
    color: var(--tea-green);
    border-bottom: 2px solid var(--tea-green);
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
}
/* Default carousel background */
.portfolio-carousel .carousel-inner {
    height: 550px;
    background-color: var(--charcoal);
    border-radius: 0.375rem;
    position: relative; /* Ensure proper stacking */
}
/* Specific background override for Web Dev carousel */
#featured-web .portfolio-carousel .carousel-inner {
    background-color: transparent; /* Allows section bg-moss to show */
}
/* Default carousel item behavior */
.portfolio-carousel .carousel-item {
    height: 100%;
    text-align: center;
}
/* Simpler image styling for containment */
.portfolio-carousel .carousel-item img {
    max-height: 90%; /* Allow some padding */
    max-width: 90%;  /* Allow some padding */
    width: auto;     /* Maintain aspect ratio */
    height: auto;    /* Maintain aspect ratio */
    object-fit: contain; /* Ensure image fits without cropping or stretching */
    position: absolute; /* Center image */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Specific smaller height for Lisa logo */
.lisa-logo-carousel {
    max-height: 60% !important; /* Adjust percentage as needed */
    max-width: 60% !important;  /* Adjust percentage as needed */
}
.portfolio-carousel .carousel-caption {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 90%;
    padding: 0.5rem 1.5rem;
    background-color: var(--charcoal);
    color: var(--tea-green);
    border-radius: 0.25rem;
}
.portfolio-carousel .carousel-control-prev-icon,
.portfolio-carousel .carousel-control-next-icon {
    background-color: var(--moss);
    border-radius: 50%;
    padding: 1.2rem;
}
.portfolio-carousel .carousel-indicators [data-bs-target] {
    background-color: var(--moss);
}
.portfolio-subpage-main {
    background-color: var(--charcoal);
}


/* --- 6. Process Page Styles --- */
/* Set the default text color for the whole section to Moss */
main.process-section {
    color: var(--moss);
}
/* This more specific rule overrides the color for just the numbers */
main.process-section .step-number {
    font-size: 5rem;
    font-weight: 700;
    color: rgba(51, 58, 47, 0.3); /* Semi-transparent Moss for a tone-on-tone effect */
    line-height: 1;
}

.process-timeline {
    position: relative;
}
.process-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: var(--tea-green);
    transform: translateX(-50%);
    z-index: -1;
}
.process-step-item {
    margin-bottom: 1.5rem;
}
.process-step-item .step-number {
    font-size: 5rem;
    font-weight: 700;
    color: var(--tea-green);
    line-height: 1;
}


/* --- 7. Web Dev Page Styles --- */
.case-study-title {
    color: var(--charcoal);
    border-bottom-color: var(--charcoal);
}
.process-text-moss {
    color: var(--moss);
}


/* --- 8. Resume Page Styles --- */
.resume-skill-box {
    color: var(--moss);
}


/* --- 9. Contact Page Styles --- */
.contact-form .form-floating textarea {
    height: 150px;
}


/* --- 10. Blog Page Styles --- */
.blog-post-img {
    height: 300px;
    width: 100%;
    object-fit: cover;
}
.blog-feature-img {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
    border-radius: 0.375rem;
}
.article-content p {
    line-height: 1.8;
    font-size: 1.1rem;
}
.article-content blockquote {
    border-left: 4px solid var(--moss);
    padding-left: 1.5rem;
    font-style: italic;
    color: #6c757d;
}
.toc-box {
    background-color: var(--tea-green);
    padding: 1.5rem;
    border-radius: 0.375rem;
    margin-bottom: 2.5rem;
}
.toc-box h4 {
    color: var(--moss);
    font-weight: 600;
    margin-bottom: 1rem;
}
.toc-box ul {
    list-style-position: inside;
    padding-left: 0;
    margin-bottom: 0;
}
.toc-box ul li a {
    text-decoration: none;
    color: var(--charcoal);
    font-weight: 500;
}
.toc-box ul li a:hover {
    text-decoration: underline;
}


/* --- 11. Media Queries (Responsive Adjustments) --- */
@media (min-width: 992px) {
    .navbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .navbar-collapse {
        flex-grow: 1;
    }
    .navbar-nav {
        margin: auto;
    }
}
@media (min-width: 1200px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 2.4rem;
        padding-right: 2.4rem;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}
@media (max-width: 767.98px) {
    .process-timeline::before {
        display: none;
    }
    .process-step-item, .process-step-item.justify-content-md-end {
        justify-content: center !important;
        text-align: center !important;
    }
}

/* --- 12. Mobile Optimization & Overflow Fix --- */
html, body {
    overflow-x: hidden;
    width: 100%;
}
.container, .container-fluid {
    max-width: 100%;
}