/* static/css/style.css */

/* ---------------------------------- */
/*          1. GLOBAL STYLES          */
/* ---------------------------------- */

/* NEW: Universal box-sizing for intuitive layouts */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif; /* The default font for the whole site */
    background-color: #ffffff; /* We'll use a dark theme later, but start with white */
    color: #333333;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif; /* The headline font */
    font-weight: 700;
    color: #1a1a1a;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* ---------------------------------- */
/*          2. LAYOUT & HELPERS       */
/* ---------------------------------- */

.container {
    width: 90%;
    max-width: 1200px; /* Limits the width on very large screens */
    margin: 0 auto; /* This is the key to centering the content */
    padding: 20px 0;
}

/* ---------------------------------- */
/*          3. HEADER & NAVIGATION    */
/* ---------------------------------- */

.main-header {
    background-color: #1a1a1a; /* Very dark grey, almost black */
    color: #ffffff;
    padding: 2rem 0;
    border-bottom: 1px solid #444;
}

.masthead {
    text-align: center;
    padding-bottom: 2rem;
}

.masthead h1 {
    font-family: 'Playfair Display', serif;
    font-size: 4rem; /* Large and impactful */
    color: #ffffff;
    margin: 0;
}

.masthead .slogan {
    font-size: 1rem;
    color: #cccccc; /* Slightly muted white */
    font-style: italic;
    margin: 0.5rem 0 0 0;
}

.main-nav ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.main-nav li {
    margin: 0 1.5rem;
}

.main-nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: #bbbbbb; /* A subtle hover effect */
    text-decoration: none;
}

/* ---------------------------------- */
/*          4. HOMEPAGE SECTIONS      */
/* ---------------------------------- */

.section-title {
    text-transform: uppercase;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 2rem;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

/* Hero Grid Layout */
.hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Left column is twice the width of the right */
    gap: 40px; /* The space between the two columns */
}

/* Featured Item (Left Column) */
.featured-item a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.featured-item img {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

.featured-item h3 {
    font-size: 2.5rem;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.featured-item p {
    font-size: 1.1rem;
    color: #555555;
}

/* Sidebar (Right Column) */
.sidebar-item {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.sidebar-item:last-child {
    border-bottom: none; /* Removes the border from the last item */
    margin-bottom: 0;
    padding-bottom: 0;
}

.sidebar-item h4 {
    margin: 0;
    font-size: 1.2rem;
}

.sidebar-item a {
    color: inherit;
}

/* Showcase Grid Layout */
.showcase-grid {
    display: grid;
    /* This is the key to the responsive grid. It creates as many 250px-minimum columns as will fit. */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.showcase-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.card-text {
    flex: 3; /* Allows the text to take up more space */
    padding-right: 15px;
}

.card-text h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    line-height: 1.4;
}

.card-text h4 a {
    color: inherit; /* Makes the link color the same as the parent text */
}

.card-metadata {
    font-size: 0.8rem;
    color: #777777;
    margin: 0;
}

.card-image {
    flex: 1; /* The image takes up less space */
    max-width: 100px;
}

.card-image img {
    width: 100%;
    height: auto;
    display: block;
}


/* ---------------------------------- */
/*          5. INTERACTIVITY & POLISH */
/* ---------------------------------- */
a {
    transition: color 0.2s ease-in-out;
}

.featured-item:hover h3,
.card-text:hover h4 {
    color: #0056b3; /* A darker blue for the hover state */
}

.featured-item a {
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.featured-item:hover a {
    transform: translateY(-5px); /* Moves the item up by 5 pixels */
}

.sidebar-project-button {
    background: none;
    border: none;
    padding: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: #1a1a1a;
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: color 0.2s ease-in-out;
}

.sidebar-project-button:hover {
    color: #0056b3;
}

.featured-item.fade-out {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* NEW: Styles for the mobile accordion panel's content */
.accordion-panel-link {
    display: block;
    color: #333;
    text-decoration: none;
}
.accordion-panel-link img {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}
.accordion-panel-link p {
    font-size: 0.9rem;
    margin: 0;
}

/* ---------------------------------- */
/*      6. RESPONSIVE STYLES      */
/* ---------------------------------- */

/* --- Responsive Content Visibility (NEW SECTION) --- */
.is-mobile {
    display: none;
}
.is-desktop {
    display: block;
}

@media (max-width: 768px) {

    /* --- General Mobile Layout --- */
    .container {
        width: 95%;
    }
    .masthead h1 {
        font-size: 2.5rem;
    }
    .article-content h1 {
        font-size: 2.2rem;
    }

    /* --- Responsive Visibility (UPDATED) --- */
    .is-desktop {
        display: none;
    }
    .is-mobile {
        display: block;
    }

    /* --- Mobile Hero Grid & Accordion (UPDATED) --- */
    .hero-grid {
        grid-template-columns: 1fr; /* Force a single column */
        gap: 0;
    }
    .sidebar-items {
        order: 1; /* Buttons appear before content */
    }
    .featured-item h3 {
        font-size: 2rem;
    }
    .sidebar-item {
        border-bottom: none; /* The button's border is now the separator */
        padding-bottom: 0;
        margin-bottom: 0;
    }

    /* Style the accordion panel itself (UPDATED) */
    .accordion-content.is-mobile {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out, padding 0.4s ease-out;
        padding: 0 10px; /* Padding for when it opens */
    }
    .accordion-content.is-mobile.is-open {
        max-height: 1000px; /* A large value to ensure content fits */
        transition: max-height 0.6s ease-in, padding 0.4s ease-in;
        padding: 20px 10px; /* Add top/bottom padding when open */
    }

    /* Visual indicator (+) on buttons */
    .sidebar-project-button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid #e0e0e0;
        padding: 15px 0;
    }
    .sidebar-item:last-child .sidebar-project-button {
        border-bottom: 1px solid #e0e0e0; /* Ensure all buttons have a bottom border */
    }
    .sidebar-project-button::after {
        content: '+';
        font-size: 2rem;
        font-weight: bold;
        color: #007bff;
        transition: transform 0.2s ease-in-out;
    }

    /* Change indicator to minus (-) when active */
    .sidebar-project-button.active::after {
        content: '−';
        transform: rotate(180deg);
    }
}

/* static/css/style.css */

/* ... (previous styles) ... */


/* ---------------------------------- */
/*          6. GENERIC PAGE STYLES    */
/* ---------------------------------- */

/* ... ( .page-title, .about-flex-container, etc. ) ... */


/* --- Contact Page Styles --- */
.contact-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 700px; /* Makes text easier to read */
}

.social-links {
    margin-top: 2rem;
    display: flex;
    flex-direction: column; /* Stack the links vertically */
    gap: 1.5rem; /* Space between the links */
}

.social-icon-link {
    display: inline-flex; /* Align icon and text */
    align-items: center;
    text-decoration: none;
    font-size: 1.2rem;
    color: #333;
    transition: color 0.2s ease-in-out;
}

.social-icon-link:hover {
    color: #007bff; /* Highlight on hover */
    text-decoration: none;
}

.social-icon-link i {
    font-size: 1.8rem; /* Make the icon symbol larger */
    width: 40px; /* Give it a fixed width for alignment */
    text-align: center;
    margin-right: 15px;
}

/* Optional: Individual icon colors on hover */
.social-icon-link.linkedin:hover { color: #0077B5; }
.social-icon-link.medium:hover { color: #000000; }
.social-icon-link.hackernoon:hover { color: #00ff00; }
.social-icon-link.email:hover { color: #c71610; }