/* ----------------------------------------------------
   BACKGROUND + HONEYCOMB PATTERN
---------------------------------------------------- */

body {
  background-color: #fff9dd;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,204,70,0.25) 0%, rgba(255,204,70,0) 60%),
    radial-gradient(circle at 80% 70%, rgba(255,196,41,0.25) 0%, rgba(255,196,41,0) 60%),
    url("data:image/svg+xml,%3Csvg width='180' height='200' viewBox='0 0 173.2 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23ffdd63' fill-opacity='0.28' points='86.6,0 173.2,50 173.2,150 86.6,200 0,150 0,50'/%3E%3C/svg%3E");
  background-size: auto, auto, 250px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed;
  cursor: url("img/bee-svgrepo-com.svg"), pointer;
}

/* fallback cursor for mobile */
@media (hover: none) {
  body { cursor: default; }
}

/* ----------------------------------------------------
   FONT CLASSES
---------------------------------------------------- */
.lato-thin, .lato-thin-italic,
.lato-light, .lato-light-italic,
.lato-regular, .lato-regular-italic,
.lato-bold, .lato-bold-italic,
.lato-black, .lato-black-italic {
  font-family: "Lato", sans-serif;
}
.lato-thin { font-weight: 100; font-style: normal; }
.lato-light { font-weight: 300; font-style: normal; }
.lato-regular { font-weight: 400; font-style: normal; }
.lato-bold { font-weight: 700; font-style: normal; }
.lato-black { font-weight: 900; font-style: normal; }
.lato-thin-italic { font-weight: 100; font-style: italic; }
.lato-light-italic { font-weight: 300; font-style: italic; }
.lato-regular-italic { font-weight: 400; font-style: italic; }
.lato-bold-italic { font-weight: 700; font-style: italic; }
.lato-black-italic { font-weight: 900; font-style: italic; }

/* ----------------------------------------------------
   TYPOGRAPHIC SCALE
---------------------------------------------------- */
h1 { font-size: 2.53em; animation: fadeUp 0.7s ease; }
h2 { font-size: 2.1418em; }
h3 { font-size: 1.8131em; }
h4 { font-size: 1.5349em; }
h5 { font-size: 1.2994em; }
p  { font-size: 1.1em; }
small { font-size: .9312em; }

/* ----------------------------------------------------
   BEE TITLE ALIGNMENT (you said rule already exists in HTML)
---------------------------------------------------- */
.bee-title-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: center;
}
.bee-title-wrap svg {
  width: 2.8rem;
  height: auto;
}

/* ----------------------------------------------------
   ANIMATIONS
---------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes softFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes cardPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ----------------------------------------------------
   NAVIGATION BASE
---------------------------------------------------- */

nav ul { list-style-type: none; }

/* FIXED: hamburger icon wasn’t visible */
button {
  padding: 0 !important;
  background-image: url(bgimg/hamburger.svg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 1.7rem;
  width: 1.7rem;
  border: none;
  background-color: transparent;
}

button:hover { cursor: pointer; transform: scale(1.1); }

ul#menu {
  display: none;
}

ul#menu.show-nav {
  background-image: url(bgimg/navigation.svg);
  background-size: 16.2rem;
  background-repeat: no-repeat;
  background-position: 287% 50%;
  top: 2rem;
  background-color: rgb(255, 240, 167);
  width: 100%;
  padding: 1rem;
  animation: fadeUp 0.3s ease;
}

#menu.show-nav {
  position: absolute;
  z-index: 10;
  display: block;
}

#menu.show-nav li {
  margin: 0 0 1rem 0;
  padding: 0;
}

#menu svg {
  display: inline-block;
  height: 2rem;
  width: 2rem;
  position: relative;
  top: 0.7rem;
}

/* ----------------------------------------------------
   DESKTOP NAV
---------------------------------------------------- */
@media only screen and (min-width: 64rem) {
  button { display: none; }
  #menu { display: flex !important; }
}

/* ----------------------------------------------------
   FORMS
---------------------------------------------------- */
fieldset {
  margin: 1rem;
  border: 1px solid rgb(255, 225, 0);
  padding: 1rem;
}

input:not(.button),
textarea, select {
  display: block;
  margin: 0;
  width: 100%;
}

input[type="text"] { margin-bottom: 1rem; }

legend { padding: 0 0.5rem; }

label {
  margin-bottom: 0.25rem;
  display: block;
}

.align-right {
  display: flex;
  justify-content: flex-end;
  margin-right: 1rem;
}

.button[type="reset"] { margin-right: 1rem; }

textarea { min-height: 100px; }

.comment-box {
  padding-top: 1rem;
  background-image: url(img/typing-01.svg);
  background-repeat: no-repeat;
  background-size: 4rem;
  background-position: 90% 1rem;
}

/* ----------------------------------------------------
   HEADINGS + TEXT
---------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
label, legend {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  color: rgb(104, 75, 8);
}

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: black;
}

h1 { margin: 2rem 0 1rem 0; line-height: 1; }
h2 { margin: 0; }

p {
  margin: 0 0 4rem 0;
  line-height: 2;
}

/* ----------------------------------------------------
   LINKS
---------------------------------------------------- */
#menu a:link { color: rgb(104, 75, 8); text-decoration: none; }
#menu a:visited { color: black; }
#menu a:hover { text-decoration: underline; }
#menu a:active { color: rgb(255, 208, 0); }

main a:link { color: black; text-decoration: none; }
main a:visited { color: black; }
main a:hover { text-decoration: underline; }
main a:active { color: rgb(255, 225, 0); }

footer a:link { color: rgb(255, 213, 0); text-decoration: none; }
footer a:visited { color: #0a0a31; }
footer a:hover { text-decoration: underline; }
footer a:active { color: rgb(255, 213, 0); }

/* ----------------------------------------------------
   CARD COMPONENTS
---------------------------------------------------- */
.card {
  border: 2px solid #553e08;
  max-width: 300px;
  margin: 2rem;
  padding: 2rem 1rem;
  border-radius: 50px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: rgb(255, 246, 186);
  animation: softFloat 5s ease-in-out infinite;
  transition: transform .2s ease;
}
.card:hover {
  transform: translateY(-6px) scale(1.03);
}

.card-container {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.consequences { background-image: url(bgimg/bee1.jpg); }
.facts        { background-image: url(bgimg/bee2.jpg); }
.benefits     { background-image: url(bgimg/bee3.jpg); }

.readmore {
  display: block;
  background-color: rgb(102, 83, 4);
  width: fit-content;
  padding: 0.5rem;
  color: white;
  font-weight: bold;
  margin: 1rem auto;
  border-radius: 25px;
  box-shadow: 0px 0px 15px black;
  transition: transform .2s ease;
}
.readmore:hover {
  transform: scale(1.1);
}

.consequences h2, .consequences h3 { color: #ffffff; text-shadow: 0 0 6px rgb(0, 0, 0)}
.facts h2, .facts h3 { color: #ffffff; text-shadow: 0 0 6px rgb(0, 0, 0);}
.benefits h2, .benefits h3 { color: #ffffff; text-shadow: 0 0 6px rgb(0, 0, 0);}

/* ----------------------------------------------------
   IMAGE FRAMES
---------------------------------------------------- */
.framed-img,
.con-framed-img,
.fac-framed-img,
.ben-framed-img {
  border: 6px solid black;
  box-shadow: 0 15px 10px rgba(0,0,0,0.25);
  border-radius: 100px;
  margin-top: 5rem;
}

/* ----------------------------------------------------
   PAGE BACKGROUNDS
---------------------------------------------------- */
.con-page { background: url("bgimg/bee1.jpg") cover; }
.fac-page { background: url("bgimg/bee2.jpg") cover; }
.ben-page { background: url("bgimg/bee3.jpg") cover; }

/* ----------------------------------------------------
   MISC
---------------------------------------------------- */
header svg { width: 10rem; }

.con-title { color: #4a351c; }
.fac-title { color: #ffe5a8; }
.ben-title { color: #f6c95e; }

body h1 { font-family: 'lato'; }

main { margin: 1rem; }
aside { margin: 1rem; }
footer ul { margin: 1rem; }

main figcaption { margin-top: 1rem; }

.bird { width: 3rem; }

.BG-other { background-color: #fff09d; }

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

h1 {
  text-indent: 1rem; /* adjust value as needed */
}

/* Align bee logo with "The Bee Team" text */
.bee-title-wrapper {
  display: flex;
  align-items: center;     /* vertically centers image + text */
  justify-content: center; /* horizontally centers as a group */
  gap: 0.75rem;            /* space between image and text */
  width: 100%;
  padding: 1rem 0;
}

/* Control bee image size so it looks proportional on mobile */
.bee-title-wrapper img {
  height: 2.4rem;  /* adjust if you want it bigger/smaller */
  width: auto;
  display: block;
}

/* Style the text next to the bee */
.bee-title-text {
  font-weight: 700;
  font-size: 1.8rem;  /* adjust as needed */
  color: rgb(104, 75, 8);
  line-height: 1;
}

 /* Example */
  
   header {
       margin: 0 0 2rem 0; /* values are clockwise: 0 top, 0 right, 2rem bottom, 0 left */
       padding: 2rem;
   }
  
   main {
       margin: 0 5rem 0 3rem;  /* avoid content touching the edge of the screen */
   }


   /* ----------------------------------------------------
   MOBILE CARD AND HEADING RESIZE
---------------------------------------------------- */
@media only screen and (max-width: 480px) {
  .card {
    max-width: 90%;      /* fit small screens */
    padding: 1rem 0.75rem; 
    margin: 1rem auto; 
    border-radius: 25px;
  }

  .card h2 {
    font-size: 1.4rem;   /* scale down for mobile */
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }

  .card h3 {
    font-size: 1.2rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }

  .readmore {
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
  }
}

/* ----------------------------------------------------
   BLUR CARD BACKGROUND IMAGES
---------------------------------------------------- */
.card {
  position: relative; /* ensures pseudo-element overlays correctly */
  overflow: hidden;   /* prevents blur from overflowing the card */
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit; /* use the same background as the card */
  background-size: cover;
  background-position: center;
  filter: blur(6px);       /* adjust blur amount as needed */
  z-index: 0;               /* behind text content */
}

.card > * {
  position: relative; /* ensures text stays above the blurred background */
  z-index: 1;
}