/* ========== Responsive Design ========== */

/* ===== 480px/42rem ===== */
@media(width> 30rem){

    /* === Search bar === */
    #search-toggle:checked ~ .other-icons{
        display:flex;
    }

    /* === Categories === */
    .categories span{
        font-size: 1.2rem;
    }

    .site-tagline {
        font-size: 1.2rem;
    }

    .categories-buttons button img {
        width: 4rem;
        height: 4rem;
    }

}

/* ===== 672px/42rem ===== */
@media (width > 42rem){

    /* === Base Font Size === */
    body{
        font-size: 1.1rem;
    }

    /* === Nav menu icons === */
    .nav-menu{
        gap: 1rem;
    }

    /* === Search bar === */
    .search-box:focus-within {
        width: 12rem;
    }

    #search-toggle:checked ~ .search-box {
        width: 12rem;
    }

   /* == TOP SECTION: 11-column grid == */
   .content-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        max-width: 1920px;
        padding: 2rem;
        column-gap: 3rem;  
        align-items: start;      
    }

    /* (1) photo */
    .pet-image {
        grid-column: 1 / span 6;
        grid-row: 1 / span 2 ;
        padding: 0;
    }

    /* (2) Name + Icon */
    .pet-name{
        grid-column: 7 / span 6;
        grid-row: 1;
        align-items: center;
        gap: 1rem;
        /* margin: auto;*/
        display: flex; 

        justify-self: start; 
        align-self: start;     
        margin: 0 0 1.2rem 0;  
    }

    .pet-name h1{
        font-size: 2rem;
        margin: 0;
    }

    .icon img{
        width: 3rem;
        height: auto;
    }

    /* (3) Details */
    .pet-details {
        grid-column: 7 / span 6;
        justify-self: start;
        grid-row: 2;
        width:100%;
        margin-top: 1rem;
    }
    
    /* Tutorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
    .info-row {
        /* side by side*/
        flex-direction: row;
        justify-content: space-between;
        gap: 1.4rem;
        align-items: flex-start;
        border-bottom: 2px solid RGB(255, 206, 224);
        margin-bottom: 1.5rem; 
    }

    /* 3 Pair Combinations */
    .pet-info {
        /* make all children in a row */
        display: flex;
        gap: 0.5rem;  
        /* align to the left side */
        justify-content: flex-start;  
        border-bottom: none;
        /* fixed width for alignment: width of the columns */
        width: 16rem;
    }

    .guide-row{
        display: flex;
        gap: 0.5rem;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    /* === Footer === */
    footer {
        display: grid;
        grid-template-columns: 2fr 1fr;
        column-gap: 4rem;
        row-gap: 1rem;
        text-align: left;          
        padding: 2rem 3.8rem;      
    }

    .foot-about,
    .info,
    .subscribe,
    .author {
        margin-bottom: 3rem;
    }

    /* Align the list */
    footer li {
        text-align: left;
    }
  
    /* (1) H2 */
    footer h2 {
        grid-column: 1 / -1;
        border-bottom: 3px solid #DF4488;
        padding-bottom: 1rem;
        font-size: 1.5rem;
        margin-left: 0;
    }

    /* (2) Left Top: About */
    .foot-about{ 
        grid-column: 1 / 2;
    }
    
    /* (3) Left Bottom: Subcribe */
    .subscribe form {
        margin-left: 0;
        margin-top: 2rem;
        justify-content:flex-start;
    }

    .subscribe p {
        font-size: 0.9rem;
        margin-left: 0rem;
    }

    /* (4) Right bottom: Insta link */
    .author {
        grid-column: 2 / 3;
        margin-bottom: 0;
        justify-self: left;       
    }

    .author ul {
        justify-content: flex-end; 
        gap: 1rem;
    }

    /* (5) Decoration Underline */
    footer::after {
        margin-left: 0;
        grid-column: 1 / -1;
        height: 3px;
        background-color: #DF4488;
    }
}

/* ====== 992px/62rem ===== */
@media (width > 62rem){

    /* === Base Font Size === */
    body{
        font-size: 1.2rem;
    }

    /* === Nav menu icons === */
    .nav-menu{
        gap: 1.5rem;
    }

    /* === Search bar === */
    .search-box:focus-within {
        width: 20rem;
    }

    #search-toggle:checked ~ .search-box {
        width: 20rem;
    }

    /* === Categories === */
    .site-tagline {
        font-size: 1.6rem;
    }

     .categories span{
        font-size: 2rem;
    }

    .categories-buttons button img {
        width: 7rem;
        height: 7rem;
    }

    /* === Pet Guide === */
    /* Guide to 3rows */
    .guide ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
    }

   
    /* === Footer === */
    footer h2 {
        text-align: left;
    }
    
    .foot-about h3 {
        font-size: 1.2rem;
    }

    .foot-about{ 
        font-size: 1.1rem;
    }

    /* Right top: info */
    .info h3 {
        font-size: 1.2rem;
    }

    .info {
        font-size: 1.1rem;
    }
}