:root {
    /* Put background color in root so it can still be seen when overscroll the page */
    background-color: #5D388C; 
    scrollbar-color: #5D388C transparent; /* Note: will NOT work in Safari; need webkit CSS for that */

    /* "rebeccapurple" */
    /* #f6e9eb - light pink*/
    /* #CBC3E3 - light purple */
    /* #DAB0FC - light violet from Tailwinds */
    /* #5D388C - dark violet form Tailwinds */
    /* #3F2767 - darkest violet from Tailwinds */
}

::selection {
    background-color: rebeccapurple; /* Change highlight color */
    color: white; /* Change text color (optional) */
}

html {
    /* background: linear-gradient(90deg, rgba(0,0,255,1) 0%, rgba(255,0,0,1) 100%); */
}

body {
    background-color: #fff;
    /* #FAE3E6 - Tailwinds Rose 100 */
    /* #FCF1F2 - Tailwinds Rose 50  */
    /* #FEF8F8 - Tailwinds Rose 50 @ 50% opacity */

    display: flex;
    flex-direction: column;
    min-height: 100vh;          /* Needed for flex-grow: 1; to work in main {} */
}

main {
    margin: auto;
    max-width: 900px;
    width: 100%;       /* Important so that child elements can use the max-width */
    padding: 0 1.5rem; /* Important for tablet view & mobile view */

    flex-grow: 1;      /* Ensure the main element takes all the free space, so footer doesn't become large */
}

@keyframes header-animation {
    from {background-color: blue;}
    to {background-color: red;}
}


/* ------------------------- Header & Footer ------------------------- */

header {
    display: flex;
    justify-content: center;
    background-color: rebeccapurple;
    border-image: linear-gradient(90deg, rgba(0,0,255,1) 0%, rgba(255,0,0,1) 100%) 1;
    border-bottom: 10px solid;
    line-height: 1rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    
    /* For keyframes animation */
    animation-name: header-animation;
    animation-delay: 0;
    animation-duration: 20s;
    animation-timing-function: linear; /* default is "ease" */
    animation-direction:  alternate;
    animation-iteration-count: infinite;

    /* When logo is an image */
    a .logo {
        width: 100%;
        max-width: 500px;
        padding: 0 1rem; /* Left & right padding for tablet view & mobile view */
    }

    /* When logo is text-only */
    a .logo-backup {
        font-size: 1.5rem; /* Make the H1 smaller */
    }
    /* Note: Margin does not apply to the top and bottom of inline elements such as <span> */
    /* So for logo-backup, had to use H1 instead of Span */
}

header a,
header a:visited,
footer a,
footer a:visited {
    color: white;
    text-decoration: none;
    margin: 0 1rem;
}

footer {
    color: white;
    background-color: #5D388C;
    padding: 1rem;
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
footer small,
footer .links {
    font-size: 0.95rem;
}

/* Responsive layout */
@media (max-width: 800px) {
    footer {
        flex-direction: column;
        align-items: center;
    }
    .back-to-top {
        margin: 1rem 0;
    }
}

/* ------------------------- Navigation ------------------------- */

nav {
    display: flex;
    justify-content: center; /* Horizontal alignment */
    align-items: center;     /* Vertical alignment */
    margin-bottom: 1rem;
}
nav a {
    margin: 0 1rem;
}
nav a[aria-current] {
    font-weight: bold;
    text-decoration: none;
    padding: 0.1rem 0.5rem;
    border: 1px solid rebeccapurple;
    border-radius: 5px;
}

/* ------------------------- Blog Filters ------------------------- */

section.filters {
    font-size: 0.9rem;
    padding: 1rem;
    margin: 1rem 0;
    border: 1px solid rebeccapurple;
    border-radius: 5px;
    /* box-shadow: 3px 3px rebeccapurple; */
}

div.filter {
    justify-content: left;
    align-items: left;
    margin-bottom: 1rem;
}
div.filter:last-child {
    margin-bottom: 0;
}

div.filter a {
    padding: 0.2rem 0.6rem;
    border-radius: 5px;
    text-decoration: none;
}
div.filter a[aria-current] {
    color: white;
    background-color: rebeccapurple;
}


/* ------------------------- Blog Posts List ------------------------- */

/*
.projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    grid-gap: 1.5rem;
}
*/

section.posts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Covers both vertical and horizontal */
}

section.posts a {
    text-decoration: none;
    padding: 1.25rem 1rem;          /* Need to add .25rem to padding-top to makeup for padding in h2 */
    background-color: lightgray;
    border: 1px solid rebeccapurple;
    border-radius: 5px;

    flex: 1 1 calc(33.333% - 8px);  /* 3 items per row. */
    max-width: calc(33.333% - 4px); /* Ensures items don’t grow beyond this width. */
    aspect-ratio: 1 / 1;            /* Maintains a perfect square. */

    background-size: cover;
    background-position: center center;

    /* For header in bottom */
    /*
    display: flex;
    align-items: flex-end;
    height: 100%;
    */
    
    text-align: center;
    /* line-height: 0; */


    h2 {
        color: white;
        background-color: rebeccapurple;
        border-radius: 5px;
        display: inline;  /* So that only the space behind text is background-colored */
        font-size: 1.25rem;
        line-height: 1.6rem;
        margin: 0;
        padding: 0.25rem 0.5rem;
        box-decoration-break: clone;  /* So that padding applies to each line if text is wrapped */
        /*
        text-shadow: 
        -2px -2px 2px black,  
         2px -2px 2px black,
        -2px  2px 2px black,
         2px  2px 2px black;
        */
    }
}

/* Responsive layout */
@media (max-width: 700px) {
    section.posts a {
        flex: 1 1 calc(50% - 8px);   /* 2 items per row intead of 3. */
        max-width: calc(50% - 4px);  /* Ensures items don’t grow beyond this width. */
    }
}
@media (max-width: 405px) {
    /* Note: Common viewport widths: 
        iPhone 16 Pro - 402px,
        iPhone 16 Pro Max - 440px 
    */
    section.posts {
        flex-direction: column;      /* 1 item per row intead of 2 or 3. */
        gap: 1rem;
    }
    section.posts a {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 2 / 1; /* Ensure squares remain */
    }
}

/* ------------------------- Blog Post Page ------------------------- */

article.blog-post,
article.page {
    max-width: 860px;
    /* line-height: 1.6em; */
    /*  
        Bucketlistly uses 860px,
        Medium uses 680px.
    */
}

img.cover {
    object-fit: cover;
    overflow: hidden;

    width: 100%;
    max-width: 850px;
    max-height: 425px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.blog-post figure {
    width: 90%;
}
.blog-post img {
    display: block; /* Needed for auto margin to work */
    margin-left: auto;
    margin-right: auto;
}

/* Breadcrumbs */
.blog-post-countries a {
    text-decoration: none;
}

.page-title,
.post-title {
    margin-top: 0.5em;  /* Overrides styling for H1 */
}

.author-and-date {
    /*
    border-top: 1px dotted lightslategray;
    border-bottom: 1px dotted lightslategray;
    padding: 0.5rem;
    */
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.author,
.date {
    font-weight: bold;
}
/*
.author-profile-pic {
    max-width: 50px;
    border-radius: 50%;
}
*/

@media (max-width: 550px) {
    .post-author,
    .post-published,
    .post-updated {
        display: inline-block; /* start a new line if span doesn't fit on existing line */
    }
}