/*
Main CSS -  Pet Adoption Services
Project 4 - Design and Develop
By: Team qwertyuiop
On: November 4, 2025
*/

/* - SETUP ACROSS PAGES - */
/* Imports */

@import url('https://fonts.googleapis.com/css2?family=Fredoka&display=swap'); /* Use as "Fredoka" */
@import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap'); /* Use as "Outfit" */
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');  /* Use as "Montserrat" */



/* All */

:root {
    /* Raw Colors */
    --black: #000;
    --white: #fff;
    --dark-gray: #565555;
    --light-gray: #d9d9d9;

    /* Accents - Palette Taken from https://colorhunt.co/palette/ff8f8ffff1cbc2e2fab7a3e3 */
    --accent-bg: #dcccff;
    /* --accent-link: #FFF1CB; */
    --accent-link: #0043ff;
    --accent-button: #C2E2FA;
    --accent-focus: #8c74f9;
    --accent-nav: #B7A3E3;
    --accent-card: #EFDCFF;

}

* {
    box-sizing: border-box;
    transition-property: all;
}



/* Defaults */

html {
    scroll-behavior: smooth; /* Taken from https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-behavior */
    background: var(--accent-bg)
}

body {
    margin: 0;
    padding: 0;
    /* height: 100vh;  Taken from the wise words of Andrew H. */
}

#icon {
    color: var(--black)
}

main{
    margin: 0 1rem;
    padding-bottom: 5rem;
}

p, li {
    font-size: 1rem;
    font-family: "Montserrat", Helvetica, Verdana, sans-serif;
}

nav, a {
    font-family: "Outfit", Arial, Verdana, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Fredoka", Helvetica, Verdana, sans-serif;
}

nav, a {
    font-size: 1rem;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4, h5, h6 { /* We won't need those BUT JUST IN CASE??!! */
    font-size: 1.125rem;
}

img{
    border-radius: 0.5rem;
}



/* Major Grid Elements */
.grid {
    /* margin: 0 1rem; */
    display: grid;
    gap: 2rem; /* Taken from https://www.w3schools.com/cssref/css3_pr_gap.php */
}



/* Nav Elements */

header, footer {
    background-color: var(--accent-nav);
    height: 3rem;
    width: 100%;
    margin: 0;
    padding: 0; /* footer will naturally ignore this */
}

header {
    position: fixed; /* Taken from https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position */
    top: 0; /* Taken from https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position */
}

footer {
    margin-top: 0.5rem;
    padding-top: 0.9rem;

    /* Fixes footer to the bottom of the screen */
    /* Same source as header */
    position: fixed;
    bottom: 0;
    left: 0;
}

nav { /* Contains grid element */
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding-top: 0.4rem;
}

.nav-bar { /* Contains grid element */
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: 1fr 1fr;
    /* width: 50%;  */
    gap: 0.4rem;
}

nav, .back-button {
    margin: 0 0.5rem;
}

.nav-button, .back-button, .menu-button, .adopt-button, .nav_button_2 {
	border-radius: 0.5rem;
    text-decoration: none;
    padding: 0.4rem 1rem;
    /* padding: 0.4rem 0.1rem; */
    font-size: 1.1rem;
    transition-property: background-color, border, color;
    transition-duration: 0.6s;
}

.nav-button, .back-button {
    background-color: var(--accent-focus);
    color: var(--white);
}

.back-button{
    padding: 0.4rem 0.4rem;
    font-size: 1rem;
}

.nav-button:hover, .back-button:hover, .nav-button:focus, .back-button:focus {
    background-color: var(--accent-link);
}

.menu-button, .adopt-button, .nav_button_2 {
    background-color: var(--accent-focus);
    color: var(--white);
}

.menu-button:hover, .adopt-button:hover, .nav_button_2:hover {
    background-color: var(--accent-link);
}

.menu-button:focus, .adopt-button:focus, .nav_button_2:focus {
    background-color: var(--accent-link);
}

main#top section#heading {
  margin-top: 3rem;   
  margin-bottom: 5rem;  
}



/* - SPECIFIC - */
/* Home Content */

.content_hero-banner {
    display: block;
    /* padding: 0 1rem; */
    padding-bottom: 1rem;
    width: 100%;
    height: 12.5rem;
    object-fit: cover; /* Taken from https://codepen.io/andrewhaw/pen/WbwjoQQ/6ebbaf836f946415213252801c6694f8 */
    object-position: top center; /* Taken from https://codepen.io/andrewhaw/pen/WbwjoQQ/6ebbaf836f946415213252801c6694f8 */
}

.content_main {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0;
    /* padding-bottom DEFINED BY MAIN */
}

.content_adopt-brief, .content_meet-team {
    background-color: var(--accent-card);
    padding: 1rem;
    /* padding-bottom: 2rem; */
    margin-bottom: 2rem;
    border-radius: 1rem;
}

.content_adopt-brief img {
    width: 100%;
    height: 17.5rem; /* Change according to font height? Design: matches button height */
    object-fit: cover; /* Taken from https://codepen.io/andrewhaw/pen/WbwjoQQ/6ebbaf836f946415213252801c6694f8 */
    object-position: center center; /* Taken from https://codepen.io/andrewhaw/pen/WbwjoQQ/6ebbaf836f946415213252801c6694f8 */
}

.content_meet-team img {
    width: 100%;
    height: 100%; /* Change according to font height? Design: matches button height */
    object-fit: cover; /* Taken from https://codepen.io/andrewhaw/pen/WbwjoQQ/6ebbaf836f946415213252801c6694f8 */
    object-position: center center; /* Taken from https://codepen.io/andrewhaw/pen/WbwjoQQ/6ebbaf836f946415213252801c6694f8 */
}

#img-team { /* Contains grid element */
    display: grid;
    gap: 0.5rem; /* Taken from https://www.w3schools.com/cssref/css3_pr_gap.php */
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0.1rem;
}


/* Pet Page Section - Eric Yang */

.text-splitter{
    margin: 0.1rem 0.5rem;
}

.id{
    margin-bottom: 0;
    margin-top: 0.5rem;
}

.pet-name {
    font-size: 2.5rem;
    margin-bottom: 0.1rem;
    margin-top: 4rem; /* Has to be this big */
    
    transition-duration: 0.5s;
    transition-property: font-size;
}

.info-heading{
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.info-lable{
    font-size: 1rem;
    margin-top: 0;
}

.breed-sex-label {
    font-size: 1rem;
    display: flex;
    gap: 0.3rem;
    span {
        white-space: nowrap;
    }

    transition-property: font-size;
    transition-duration: 0.5s;
}

.pet-photo {
    width: 15rem;
    height: 15rem;
    object-fit: cover;
    padding: 0;
    margin-bottom: 0;

    
    transition-property: width, height;
    transition-duration: 0.5s;

    object-fit: cover; /* Taken from https://codepen.io/andrewhaw/pen/WbwjoQQ/6ebbaf836f946415213252801c6694f8 */
}

#petTemplatePhoto, #petBobbiPhoto, #petRockyPhoto {
    object-position: top center; /* Taken from https://codepen.io/andrewhaw/pen/WbwjoQQ/6ebbaf836f946415213252801c6694f8 */
}

#petGingerPhoto, #petDukePhoto, #petMrBPhoto, #petChomperPhoto {
    object-position: center center; /* Taken from https://codepen.io/andrewhaw/pen/WbwjoQQ/6ebbaf836f946415213252801c6694f8 */
}

.pet-about-article {
    margin: 0 1rem;
    /* padding: 0.001rem; */
    /* padding-bottom: 0rem; */

}

.about-paragraph {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    /* max-width: 40rem; */
}

.restrictions-h {
    font-size: 1.5rem;
    padding: 0;
    margin-bottom: 0;
}

.pet-page { /* Contains grid element */
    grid-template-columns: 1fr;
    gap: 1rem;

    /* https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Box_alignment */
    /* To center objects */

    justify-items: center; 
    align-items: center;

    /* --------------------------------------------------------------------------------- */

    background-color: var(--accent-card);
    padding: 1rem;
    border-radius: 1rem;
}

.restrictions{
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

.restrictions-section { /* Contains grid element */
    grid-template-columns: 1fr;
    align-items: baseline;
    text-align: left;
    gap: 0;
    margin-top: 1rem;
    margin-left: 0;
    max-width: 40rem;
}

.info-container { /* Contains grid element */
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.about-container { /* Contains grid element */
    grid-template-columns: 1fr;
    text-align: left;
    gap: 0rem;
}

.text-items { /* Contains grid element */
    grid-template-columns: 1fr;
    gap: 0.5rem;
    max-width: 40rem;
}

.image-id-container { /* Contains grid element */
    grid-template-columns: 1fr;
    align-items: center;
    gap: 0;
    /* background-color: aqua; */
    text-align: left;
    margin-bottom: 0;
}



/* All Pets */

#heading {
  text-align: center;         
  padding: 2rem 0;            
}

#heading h1 {
  font-size: 5rem;
  margin-bottom: 1rem;
}

#heading a {
  display: inline-block;     
  font-size: 3rem;
  margin: 0.5rem 2rem;
}

.pet-headtitle {
    text-align: center;
    font-size: 3.75rem;
    margin: 1rem;
}

.pet-card {
    grid-template-columns: 1fr 1fr; 
    align-items: center;
    gap: 2rem;

    img {
        height: 20rem;
        width: 20rem;
        object-fit: cover; /* Taken from https://codepen.io/andrewhaw/pen/WbwjoQQ/6ebbaf836f946415213252801c6694f8 */
    }

    h3 {
        margin: 1.5rem 0;
        font-size: 2.75rem;
        font-weight: bold;
    }

    p {
        margin: 1rem 0;
        font-size: 2rem;
    }
}

.adopt-button {
    font-size: 1.5rem;
}

/* All Pets Fix */
hr { /* Taken from https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hr */
  border:none;
  border-top: 2px solid var(--dark-gray);
  margin: 3rem 10%;
}

.pet_info { 
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.petlist {
    background-color: var(--accent-card);
    padding: 2rem;
    border-radius: 1rem;
    margin-bottom: 3rem;
}



.pet-categories{
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0.5rem;
}



/* Any @media Stuff Down Here - XXX ALWAYS AT THE BOTTOM XXX */

/* This is a new technology so it doesn't work everywhere yet, but it's still nice to have
Taken from https://stackoverflow.com/a/60158619 */
@media (prefers-color-scheme: dark) {
    #icon {
        color: var(--white);
    }
}

@media (width>50rem) {
    .content_adopt-brief, .content_meet-team {
        grid-template-columns: 1fr 1fr;
    }

    .pet-categories{
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        
    }
}

/* 470px/16px = 29.375rem */
@media(width > 30rem) {
    .pet-photo{
        width: 25rem;
        height: 25rem;
    }

    .nav-bar{
        grid-template-columns: 1fr 1fr;
        width: 30%;
    }
}

/* 816px/16px = 51rem */
/* 953px/16px = 60rem */
@media(width > 60rem) {

    

    .pet-page{ 
        grid-template-columns: 0.6fr 1fr; 
        gap: 4rem;
        padding: 2rem;
    }

    .text-items{
        max-width: 60rem;
    }

    .pet-name{
        font-size: 3.2rem;
    }

    .restrictions-h {
        font-size: 1.5rem;
    }

    .restrictions{
        padding-bottom: 0;
    }

    .restrictions-section { /* Contains grid element */
        margin-top: 1rem;
        grid-template-columns: 0.3fr 1fr;
        gap: 1rem;
    }   
    

    .breed-sex-label{
        font-size: 1.1rem;
    }

    .info-heading{
        font-size: 2rem;
        margin-bottom: 0.7rem;
    }

    .info-lable{
        font-size: 1.3rem;
    }

    .image-id-container { /* Contains grid element */
        margin-bottom: 1rem;
    }

    .pet-photo{
        width: 25rem;
        height: 25rem;
    }

    .about-paragraph {
        font-size: 1.2rem;
    }

    .pet-card {
        grid-template-columns: 1fr 1fr; 
    }
}

@media (width > 75rem) {
    .pet-photo{
        width: 32rem;
        height: 32rem;
    }

    .about-paragraph {
        font-size: 1.4rem;
    }
}


/* 1500px/16px = 93.75rem */
@media (width > 93.75rem) {
    .text-splitter{
        margin: 1rem 0.5rem;
    }

    .pet-page{ 
        gap: 4rem;
    }

    .pet-name{
        font-size: 5rem;
    }

    .info-heading{
        font-size: 3rem;
    }

    .info-lable{
        font-size: 2rem;
    }

    .breed-sex-label{
        font-size: 1.5rem;
    }

    .pet-photo{
        width: 38rem;
        height: 38rem;
    }

    .about-paragraph {
        font-size: 1.6rem;
    }

    .restrictions-h {
        font-size: 1.7rem;
    }

    .restrictions{
        font-size: 1.3rem;
    }

    .restrictions-section{
        gap: 1.2rem;
    }
}

@media (width < 72rem) {
    .pet-card {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (width < 48rem) {
    .pet_info { 
        grid-template-columns: 1fr;
    }

    .pet-card {
        grid-template-columns: 1fr 1fr;
        margin-bottom: 2rem;
        gap: 2rem;
    }

    #heading a {
        margin: 0.5rem 2rem;
    }
}

@media (width < 39rem) {
    .pet_info { 
        grid-template-columns: 1fr;
    }

    .pet-card {
        grid-template-columns: 1fr;
        gap: 0;

        /* https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Box_alignment */
        /* To center objects */
        justify-items: center;
    }

    /* #petRockyName{
        text-align: center;
        margin-top: 0;
    } */

    .pet-card-details{
        text-align: center;
    }

    .adopt-button{
        text-align: center;
    }
}

@media (width < 26rem) {
    .pet-card img {
        /* width: 75vw;
        height: 75vw; */
        width: 100%;
        height: 70vw;
    }
}