@import url('https://fonts.googleapis.com/css2?family=Arbutus+Slab&display=swap');
body {
  font-family: 'Arbutus Slab', serif;
  text-align: center; 
  margin: 0; 
}
/* Header */ 
#logo {
  height: 30vw;
  background-color: red; 
  padding: 2rem; 
}
#header {
  background-color: red;
}
.fa-brands {
  font-size: 4vw; 
  color: black;   
}
.fa-brands:hover {
  color: yellow; 
  font-size: 4.5vw; 
}
#smLinks {
  position: absolute; 
  z-index: 3; 
  text-align: center;
  right: 5vw;
  padding-top: 2vw; 
  top: 10vw;
  list-style: none; 
}
li {
  margin: 15px; 
}
/* Menu */ 

 /* Menu */
nav {
  text-align: center;
  margin: auto;
  margin-left: 3vw;
  position: relative;
  width: 20vw;
  color: white;
  z-index: 5;
  padding-top: 1vw;
}

/* The MENU button (now a label instead of h2) */
nav label#menu {
  font-size: clamp(18px, 2vw, 28px);
  height: clamp(40px, 5vw, 60px);
  border-radius: 2px;
  position: relative;
  background: black;
  margin-bottom: 0;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  box-shadow: 4px 4px 20px -2px rgba(0, 0, 0, 0.35);
  transition: all 0.2s;
  cursor: pointer;
}

nav:hover label#menu {
  background-color: yellow;
  color: black;
  transform: translateY(-2px);
  box-shadow: 2px 2px 5px -1px rgba(0, 0, 0, 0.35);
}

/* Invisible checkbox toggle */
#toggle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5vw;
  opacity: 0;
  pointer-events: none; /* ⭐ PREVENTS CLICK BLOCKING ⭐ */
}

/* Arrow icon */
label#menu::before {
  position: absolute;
  right: 2%;
  top: 15%;
  height: 60%;
  aspect-ratio: 1;
  background: currentColor;
  display: flex;
  align-items: center;
  padding-right: 1rem;
  content: "";
  clip-path: polygon(50% 25%, 20% 80%, 80% 80%);
  transform: rotate(180deg) scale(0.75);
}

/* Arrow rotates when menu opens */
#toggle:not(:checked) ~ label#menu::before {
  transform: rotate(0deg) scale(0.75);
}

/* Menu list hidden when checkbox is checked */
#toggle:checked ~ ul {
  visibility: visible;
  opacity: 1;
}

/* Menu list visible */
#toggle:not(:checked) ~ ul {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Menu items */
nav ul {
  padding-left: 0;
  padding-top: 1rem;
  margin-top: 0;
  list-style: none;
  overflow: hidden;
  text-align: center;
  transition: all 0.2s ease-out;
  width: 100%;
  position: absolute;
  z-index: 10; /* ⭐ ENSURES LINKS ARE CLICKABLE ⭐ */
}

nav ul li {
  border-radius: 2px;
  position: relative;
  display: inline-block;
  line-height: 1.7;
  width: 90%;
  background: black;
  margin: 0 0 0.25rem 0;
  box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.35);
  padding: clamp(8px, 1vw, 16px);
  font-size: clamp(14px, 1.6vw, 22px);
}

nav ul li:hover,
nav ul li a:focus {
  background: yellow;
  color: black;
  transition: background 0.2s;
}

nav ul a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* body */ 
h1 {
  font-size: 3.5vw;
}
h2 {
  font-size: 3vw;
}
#homePageImage{
  height: 25vw;
}
#groomingTestimonialImg, #CWEmail{
  height: 40vw;
}
.testimonialsIMG{
  height: 35vw;
}
#images{
  height: 45vw;
}
#vl, .yelpImages {
  width: 80vw;
}
.legalSections, .homePageSections, #topSection, .groomingSections, .testimonialSections, .sections, .yelpSections {
  background-color: black; 
  color: yellow; 
  padding-top: 2vw;  
  padding-bottom: 2vw;
  padding-left: 4vw;
  padding-right: 4vw;
  font-size: 2.5vw;
}
.links {
  color: yellow; 
}
.links:hover {
  color: hotpink; 
}
.buttons {
  font-family: 'Arbutus Slab', serif;
  font-size: 3vw; 
  background-color: white; 
  border: 3px solid black; 
  border-radius: 3px; 
  padding: 2vw; 
}

.buttons:hover {
  background-color: yellow; 
  cursor: pointer; 
}
.buttonLinks {
  color: black; 
  text-decoration: none; 
}
.list {
  text-align: left; 
}
/* footer */ 
footer {
  background-color: red; 
  padding: 10px 3em; 
}
#footerLogo {
  height: 18vw; 
}
#footerLink {
  color: black; 
}
#backToTop {
  font-size: 2vw;
  background-color: black; 
  color: white; 
  position: absolute;
  left: 5vw;
  border: 1vw;
  border-radius: 1vw; 
  padding: 1vw;
}
#backToTop:hover {
  color: yellow; 
  cursor: pointer; 
  font-size: 3.2vw
  box-shadow: 2px 2px 4px black; 
}
#disclaimer {
  font-size: 1.5vw;
  text-align: left; 
}
#footerDes {
  text-align: right; 
  font-size: 2vw; 
}