/*-----Outer Wrapper-------*/

.content{
    padding:1rem 1rem 2rem 1rem;
    display:flex;
    flex-direction:column;
    align-items: center;
    align-self:center;
    width:100%;
}

.contentWrapper{
    display: flex;
    justify-content: center;
}

/*-----Title and Toggle List/Thumbnail-------*/
.content h1{
    font-family:'Fraunces';
    font-weight:900;
    padding: 1rem 1rem 2rem 1rem;
    color:#F53100;
    font-size: 4rem;
}

.toggle{
    gap:0.5rem;
    padding-bottom:3rem;
}

#toggleStylesheet{
    border-radius: 5px;
    background-color: #FFF7ED;
}

#toggleStylesheet:active {
    background-color: rgb(211, 219, 225);
}

@media (hover: hover) {
    #toggleStylesheet:hover{
        background-color: rgb(255 255 255);
    }
}


/*-----------------------*/
/*-----Recipe List-------*/
/*-----------------------*/



.content ul{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr));
    grid-template-rows: auto;
    gap:2rem;
}


/*------Recipe Wrapper-----*/
.contentRoworCol {
    display: grid;
    align-items: center; /* Maybe change to stretch if needed */
    justify-content: space-between;
    width: 100%;
    /* Ensure the grid row for the image can accommodate 14rem + padding/gaps */
    /* Your existing grid-template-rows: 2fr 10fr 1fr; might need adjustment */
    /* Consider explicit row sizes or adjust fractions */
    grid-template-rows: auto minmax(14rem, auto) auto; /* Title, Image Area, Buttons */
     /* OR grid-template-rows: auto 1fr auto; and let the image height push it */
    height: auto; /* Let the row height be determined by content */
    /* max-height: 20rem; */ /* Be careful this doesn't conflict */
    grid-template-columns: 1fr;
    padding-bottom: 1rem;
    /* Add overflow: hidden; to the image's direct container (the <a> tag) */
    /* or potentially the .contentRow itself if appropriate */
}

/*-----Recipe Title-----*/
.content ul li{
    list-style:none; 
    font-size:1.1rem;
    padding:0.25rem 0;
    text-align:center;
 }

 .content a, .content a:visited{
    color:rgb(0, 0, 0);
    text-decoration:none;

}

/*------Recipe Thumbnail-----------*/
img.recipeImg {
    /* Your existing dimensions, object-fit, etc. */
    display: block;
    width: 100%;
    height: 13rem; /* Example height */
    object-fit: cover;

    /* Core styles for the fix */
    opacity: 0; /* Start invisible */
    transition: opacity 0.15s ease-in-out; /* Adjust timing as needed */
    /* Optional: Add a background for the container */
    /* background-color: #eee; */
}

img.recipeImg.loaded { /* Class added by inline onload */
    opacity: 1; /* Fade in */
}

img.recipeImg.error { /* Optional class for error state */
    /* Style for failed images, e.g., show placeholder */
    /* content: url('/imgs/placeholder-error.jpg'); */
    opacity: 1; /* Ensure errors are visible */
    /* background-color: #fdd; */
}

/*------------Buttons Row-----------*/

.buttons.row{
    justify-content: center;
}


.deleteBtn, .editBtn, .favouriteBtn, .shoppingListBtn{
    display: flex;
    align-items: center;
    border:none;
    background-color: #FFF7ED;
}

.deleteBtn img, .editBtn img, .favouriteBtn img, .shoppingListBtn img {
    height: 1.5rem;
}


/*-----------------------------------------*/
/* --------- Pagination Row ------------- */
/*-----------------------------------------*/
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0 1rem 0; /* Add some padding */
    gap: 0.5rem; /* Space between elements */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.pagination a,
.pagination span {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    text-decoration: none;
    color: var(--text);
    background-color: var(--primary);
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 0.9rem;
}

.pagination a:hover {
    background-color: var(--primary);
    color: var(--text);
    border-color: var(--primary);
}

.pagination .current {
    background-color: var(--accent-red);
    color: var(--primary); /* White text on red background */
    border-color: var(--accent-red);
    font-weight: bold;
}

  @media only screen and (min-width: 600px) {
    @media only screen and (max-width: 1200px) {
        .content{
            width:90%;
        }
        .content h1{
            font-size: 5rem;
        }
      }
  }
  @media only screen and (min-width: 1200px) {
    .content{
        width:90%;
    }
    .content h1{
        font-size: 5rem;
    }
  }