/* This file contains any changes from the default bootstrap default css...*/
/* ...used in this project, which can be found at: 8*/
/* https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css */


/* Jumbotron styling: */
.jumbotron {
    margin-top: 20px;
    /* background-image: url("file:///Users/Matt/OneDrive/Coding/CS50/CS50_2_WP/project0/header0.jpg"); */
    color: white;
    background-attachment: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 250px;
}

/* Amend default bootstrap padding for col-md-3 class items */
.col-md-3 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 35px;
    padding-left: 35px;
}

/* Amdend default bootstrap positioning for footer class items */
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 125px;
}

/* Amdend default bootstrap body to allow sticky footer */
body {
    /* Margin bottom by footer height */
    margin-bottom: 125px;
}

html {
    position: relative;
    min-height: 100%;
}

/* Amdend bootstrap's .display-3 class with @media query such that not
  displayed on screens smaller than 600px */
@media screen and (max-width: 600px) {
    .display-3 {
        display: none;
    }
}

/* Amdend styling to ensure spaces between elements of the 'footer' information */
.post-meta {
    margin-top: 60px;
    /* Adds spacing equivalent to three blank lines */
}

.post-meta time {
    display: block;
    margin-bottom: 10px;
}

.post-meta .tags {
    margin-bottom: 10px;
}

.post-navigation {
    margin-top: 20px;
}

/* Amend default bootstrap styling for the 'post-navigation' class */

.post-navigation a {
    color: grey;
    /* Change the link color to grey */
    text-decoration: none;
    /* Optional: Remove underline */
}

.post-navigation a:hover {
    color: darkgrey;
    /* Optional: Change color on hover */
    text-decoration: underline;
    /* Optional: Add underline on hover */
}

/* Styling for blog index post titles */
.blog-index-title {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.blog-index-title a {
    color: grey;
    text-decoration: none;
}

.blog-index-title a:hover {
    color: darkgrey;
    text-decoration: underline;
}

/* Styling for blog index post preview */
.post-preview {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.post-preview:last-child {
    border-bottom: none;
}

.post-preview .post-meta-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #777;
}

.post-preview .post-meta-line time {
    display: inline;
}

.post-preview .post-meta-line .separator {
    color: #ccc;
}

.post-preview .post-meta-line .tags {
    display: inline;
}

.post-preview .post-meta-line .tag {
    margin-right: 0.4rem;
}

.post-description {
    font-size: 1rem;
    color: #555;
    /* Grey color for the description */
    margin-bottom: 10px;
    /* Add spacing below the description */
}

/* Blog post title in jumbotron - smaller size for readability */
.blog-post-title {
    font-size: 2.5rem;
    line-height: 1.2;
}

/* Responsive jumbotron text for tablets */
@media screen and (max-width: 768px) {
    .blog-post-title {
        font-size: 2rem;
    }
    .jumbotron .lead {
        font-size: 1rem;
    }
}

/* Responsive jumbotron text for phones */
@media screen and (max-width: 480px) {
    .blog-post-title {
        font-size: 1.5rem;
    }
    .jumbotron .lead {
        font-size: 0.9rem;
    }
}

/* Hide the first H1 in blog post content (title is already in jumbotron) */
.blog-post > h1:first-child {
    display: none;
}

/* Footnotes styling - visual separation from main content */
.blog-post > p:last-of-type ~ ol,
.blog-post > ol:last-child {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ccc;
    font-size: 0.9rem;
    color: #666;
}