*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

body {
    background: var(--primary-color);
    background-color: #f7f7f7;
    display: grid;
    min-height: 100vh;
    padding-bottom: 60px;
}

header{
    background-color: var(--primary-color);
    grid-row: 1;
    position: static;
    height: 6em;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;

      /* color: white; */


    & > a:first-child {
        /* Plaatst de back-link in de eerste 'auto' kolom */
        grid-column: 1/2;
        padding: 10px 15px;
        display: flex;
        align-items: center;
    }

    & form {
        padding: 1.5em;

        &:nth-of-type(1) { grid-column: 3 / 4; } 

        /* Tomato Form - Column 4 */
        &:nth-of-type(2) { grid-column: 4 / 5; }

        /* Star Form - Column 5 */
        &:nth-of-type(3) { grid-column: 5 / 6; }
    }
}

button{
    /* remove styling button so only svg shows */
    appearance: none;
    -webkit-appearance: none;
    background: none;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

main{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr; 

    /* responsive */
        @media (min-width: 678px) {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 1fr; 
        margin: 0 auto;
        padding: 20px;
        max-width: 1000px;
        align-items: start;
        overflow: hidden; /* FIX: Voorkomt dat de afbeelding overstroomt */
    }

    & img{
        /* full width span van col 1 tot eind */
        grid-column: 1/-1; 
        grid-row: 1;
        max-width: 100%;
        height: auto;
        object-fit: cover;

        @media (min-width: 678px) {
            grid-column: 1/2;
            grid-row: 1/2;
            width: 100%;
            max-width: 100%;
            height:auto;
            object-fit: contain;
        }
    }
}

.metadata-wrapper {
    @media (min-width: 678px) {
        grid-column: 2/3;
        grid-row: 1/2;

        display: flex;
        flex-direction: column;
        /* vert tags en datetime */

        /* stukje tussen img en tags */
        padding-left: 1.5em; 
    }
}


.image-tags{
    grid-column: 1/-1;
    grid-row: 2;
    list-style: none; /* Removes the default bullet points */
    padding: 10px 0;
    margin: 0;
    display: flex; /* Allows list items to sit side-by-side */
    gap: 10px;
    justify-content: flex-start;

    @media (min-width: 678px) {
        flex-direction: column;
        align-self: flex-end; /**/
        margin-bottom: 1.53em;
    }

    & li {
        /*pill shape */
        border-radius: 50px; 
        background-color: #e0e5e9; /* Light grey background */
        color: #334e5e; /* Darker text color */
        padding: 8px 15px; /* vertical and horizontal padding */
    }
}

.photo-datetime{
    @media (min-width: 678px) {
        align-self: flex-end;
        margin-top: auto;
    }
}

footer{
    justify-self: center;
}

nav{
     background-color: var(--primary-color);
/* positoming nav, make sure it stays at the bottom */
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;  
    left: 0;

    /* layout */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    & a{
        margin: 10px;
    }
}

/* button animation js */
@keyframes heart-pop {
	/* from normal size */
	0%{
		transform:scale(1);
	}
	/* to 125% size */
	50%{
		transform: scale(1.25);
}
	/* back to normal size */
	100%{
		transform:scale(1);
	}
}

/* --- Heart Button Styling & Animation --- */

/* 2. DEFAULT STATE: Solid White Fill:Unliked */
header form:nth-of-type(1) button svg {
    width: 2rem; 
    height: 2rem;
    /* default heart state to white */
    stroke: white; 
    stroke-width: 1; 
    fill: white; 
    transition: fill 0.25s ease-in-out, transform 0.25s ease-in-out;
}

/* 3. LIKED STATE */

/* Apply the animation to the SVG container (the whole icon) */
header form:nth-of-type(1) button.liked svg {
    /* Use the corrected keyframes name */
    animation-name: heart-pop;
	animation-duration: .25s;
	animation-iteration-count:2;
	animation-fill-mode: forwards;
}

/* Change the path style fill with red */
header form:nth-of-type(1) button.liked svg path {
    fill: #00E53D; 
    stroke: #00E53D; 
}

.liked {
    animation-name: heart-pop;
    animation-iteration-count: 2;
    animation-duration: 1s;
}

.like-button .heart-icon {
  width: 24px;
  height: 24px;
  /* Add a transition for ALL properties, so the change is smooth */
  transition: all 0.3s ease-in-out; 
}
/* hover for mouse makes it bigger */
.like-button:hover {
  
  scale: (1.25); 
  cursor: pointer; /* feedforward: muis wordt pointer */
}

.like-button .heart-icon path {
  /* kleine animation */
  transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out;
}

.like-button:hover .heart-icon path {
  /*  Change the color to red */
  fill: #00E53D; /* green fill color */
  stroke: #00E53D; /* green outline color */
}

/* tomato svg styling*/

.tomato-button svg {

    width: 24px;
    height: 24px;
    vertical-align: middle; 
}