/* Set height to 100% for body and html to enable the background image to cover the whole page */
body, html {
height: 100%;
}

        :root {
            --jungle-dark: #0B3C18;
            --jungle-leaf: #1E6F34;
            --jungle-bright: #39A94C;
            --jungle-accent: #87D346;
            --canopy-sky: #E3F2FD;
            --button-orange: #FF7A00;
            --button-orange-hover: #E06B00;
        }


	li ul, li ol {
	    padding-left: 20px; /* Adjust this value to your liking */
	    margin-top: 5px;    /* Optional: adds a little breathing room above the sub-list */
	}
	li ol, li ul {
	    padding-left: 20px; /* Adjust this value to your liking */
	    margin-top: 5px;    /* Optional: adds a little breathing room above the sub-list */
	}
        /* --- HEADER CONTAINER --- */
        .canopy-header {
            position: relative;
            background: linear-gradient(to bottom, var(--canopy-sky) 0%, #c8e6c9 70%, #a5d6a7 100%);
            min-height: 550px;
            padding: 20px 40px 120px 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
        }
        
	.short-canopy-header {
	    position: relative;
	    min-height: 10px;
	    max-height: 20px;
	    padding: 20px 40px 120px 40px;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    overflow: hidden;
	}


        /* --- TOP NAVIGATION BAR --- */
        .canopy-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

        .logo {
            font-family: 'Fredoka', sans-serif;
            font-size: 2.2rem;
            color: var(--jungle-dark);
            text-shadow: 2px 2px 0px #fff;
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 20px;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--jungle-dark);
            font-weight: 700;
            font-size: 1.1rem;
            background: rgba(255, 255, 255, 0.6);
            padding: 8px 18px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .nav-links a:hover {
            background: var(--jungle-accent);
            color: white;
            transform: translateY(-2px);
        }
        /* Wavy Vine / Canopy frame at the very top edge */
		 .canopy-top-fringe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 50px;

			/* We use a solid color background... */
			background-color: var(--jungle-dark);

			/* ...and mask it with an repeating SVG leaf pattern */
			-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cpath d='M0,0 Q15,40 30,45 Q45,40 60,0 Z' fill='%23000'/%3E%3C/svg%3E");
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cpath d='M0,0 Q15,40 30,45 Q45,40 60,0 Z' fill='%23000'/%3E%3C/svg%3E");

			/* This handles the sizing and repetition seamlessly across the screen */
			-webkit-mask-size: 60px 50px;
			mask-size: 60px 50px;
			-webkit-mask-repeat: repeat-x;
			mask-repeat: repeat-x;

			opacity: 0.8;
			z-index: 2;
		}
				/* Layered Bottom Wave Divider */
        .wave-divider {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
            z-index: 8;
        }

        .wave-divider svg {
            position: relative;
            display: block;
            width: calc(150% + 1.3px);
            height: 110px;
        }

        .wave-divider .shape-fill-back {
            fill: var(--jungle-leaf);
            opacity: 0.5;
        }

        .wave-divider .shape-fill-front {
            fill: var(--jungle-dark);
        }


body {
/* Background image */
background-image: url('images\BackCoverFinalFaded2.jpeg');
/* Full-screen */
height: 100%;
/* Center the background image */
background-position: center;
/* Scale and zoom in the image */
background-size: cover;
/* Add position: relative to enable absolutely positioned elements inside the image (place text) */
position: relative;
/* Add a white text color to all elements inside the .bgimg container */
color: white;
/* Add a font */
font-family: "Courier New", Courier, monospace;
/* Set the font-size to 25 pixels */
font-size: 25px;
}

/* Position text in the top-left corner */
topleft {
position: absolute;
top: 0;
left: 16px;
}

/* Position text in the bottom-left corner */
bottomleft {
position: absolute;
bottom: 0;
left: 16px;
}

/* Position text in the middle */
middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

/* Style the <hr> element */
hr {
margin: auto;
width: 40%;
}

/* Base setup for the circular area */
.circle-container {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Optional Center Content */
.center-logo {
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  color: #333;
}

/* Individual character link wrappers */
.char-link {
  position: absolute;
  width: 200px;  /* Size of the character image */
  height: 200px;
  
  /* The Math Variables */
  --total: 3; /* Change this to your total number of characters */
  --radius: 150px; /* How far from the center the images sit */
  
  /* Calculating X and Y coordinates using trigonometry */
  --angle: calc(var(--i) * (360deg / var(--total)));
  transform: 
    translate(
      calc(cos(var(--angle)) * var(--radius)), 
      calc(sin(var(--angle)) * var(--radius))
    );
  
  transition: transform 0.3s ease;
}

/* Style the images to be perfect circles */
.char-link img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Hover effects for interaction */
.char-link:hover {
  /* Keeps its position but scales up slightly when hovered */
  transform: 
    translate(
      calc(cos(var(--angle)) * var(--radius)), 
      calc(sin(var(--angle)) * var(--radius))
    ) 
    scale(1.15);
  z-index: 10;
}

/* The class you apply to your frog image */
.jumping-frog {
  width: 200px; /* Adjust size as needed */
  height: auto;
  
  /* Apply the animation: 
     - 'jump' is the name of the keyframes below
     - '1.2s' is the duration of one full jump cycle
     - 'ease-in-out' makes the physics look natural (slowing at the peak)
     - 'infinite' keeps it looping forever
  */
  animation: jump 1.2s ease-in-out infinite;
  
  /* Keeps the transform origin at the bottom so the squash effect happens on the ground */
  transform-origin: bottom center; 
}

/* The physics of the jump */
@keyframes jump {
  0%, 100% {
    transform: translateY(0) scale(1, 1); /* On the ground, normal size */
  }
  10% {
    transform: translateY(0) scale(1.1, 0.8); /* Squashing down to prep for the leap */
  }
  50% {
    transform: translateY(-80px) scale(0.9, 1.1); /* Peak of the jump, stretched out vertically */
  }
  90% {
    transform: translateY(0) scale(1.05, 0.95); /* Landing impact, slight squash */
  }
}

.kid-button {
  display: inline-block;
  padding: 15px 35px;
  font-family: 'Comic Sans MS', 'Chalkboard SE', Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: white;
  background-color: #ff5964; /* Bright fun red/pink */
  
  /* These lines crush the default gray browser styling */
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  
  border-radius: 50px; /* Makes it nice and round */
  box-shadow: 0 8px #d9414c; /* Gives it that 3D toy look */
  transition: all 0.1s ease;
  cursor: pointer;
}

/* The button pushes down slightly when clicked */
.kid-button:active {
  box-shadow: 0 2px #d9414c;
  transform: translateY(6px);
}

/* Change color when hovering */
.kid-button:hover {
  background-color: #ff717b;
}

.kid-print-btn {
  /* Make it big and chunky for small hands to click */
  font-size: 24px;
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Ubuntu', sans-serif;
  font-weight: bold;
  padding: 15px 35px;
  margin: 20px auto;
  display: block; /* Centers the button */

  /* Fun, bright colors */
  background-color: #FF5722; /* Bright orange-red */
  color: white;

  /* Rounded, friendly edges and a thick border */
  border: 5px solid #E64A19;
  border-radius: 50px;

  /* Shadow makes it look like a real, pressable toy button */
  box-shadow: 0 8px 0 #D84315;

  cursor: pointer;
  transition: all 0.1s ease;
  outline: none;
}

/* Bouncy animations when interacting with the button */
.kid-print-btn:hover {
  background-color: #FF7043;
  transform: translateY(2px);
  box-shadow: 0 6px 0 #D84315;
}

.kid-print-btn:active {
  transform: translateY(8px);
  box-shadow: 0 0px 0 #D84315;
}


/* ==========================================================================
   2. PRINT STYLES (What actually happens when the paper prints)
   ========================================================================== */
@media print {
  /* 1. Set a strict paper boundary with no extra wiggle room */
  @page {
    size: letter portrait;
    margin: 0 !important;
  }

  /* 2. Force the browser to treat the page as a single screen view */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important; /* Hard barrier: refuses to make a page 2 */
    background-color: #ffffff !important;
  }

  /* 3. Collapse all container wrappers to 0 height so they can't push down the page */
  .main-activity-content, div, section, main, header, wrapper {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 4. Completely eliminate the after text */
  .main-activity-content::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
  }

  /* 5. Explicitly hide the print button and common clutter */
  .kid-print-btn, nav, footer, button, .sidebar {
    display: none !important;
  }

  /* 6. Rip the image out of the broken layout and position it flawlessly */
  img, .main-activity-content img {
    display: block !important;
    height: auto !important;
    
    /* Safely scale it down to guarantee it fits inside print boundaries */
    max-width: 85% !important;  
    max-height: 85vh !important;
    object-fit: contain !important;
    
    /* Absolute center positioning on the physical paper */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* Absolute commands telling the printer to stop here */
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
  }
}

/* Align the coloring page to the center */
.coloring-page-centered {
	display: flex;
	justify-content: center; /* Horizontally centers the image */
	align-items: top;     /* Vertically centers the image */
}

        /* --- RESET & VARIABLES --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --jungle-dark: #0B3C18;
            --jungle-leaf: #1E6F34;
            --jungle-bright: #39A94C;
            --jungle-accent: #87D346;
            --canopy-sky: #E3F2FD;
            --button-orange: #FF7A00;
            --button-orange-hover: #E06B00;
        }


        /* --- HEADER CONTAINER --- */
        .canopy-header {
            position: relative;
            background: linear-gradient(to bottom, var(--canopy-sky) 0%, #c8e6c9 70%, #a5d6a7 100%);
            min-height: 550px;
            padding: 20px 40px 120px 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
        }

        /* --- TOP NAVIGATION BAR --- */
        .canopy-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

        .logo {
            font-family: 'Fredoka', sans-serif;
            font-size: 2.2rem;
            color: var(--jungle-dark);
            text-shadow: 2px 2px 0px #fff;
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 20px;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--jungle-dark);
            font-weight: 700;
            font-size: 1.1rem;
            background: rgba(255, 255, 255, 0.6);
            padding: 8px 18px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .nav-links a:hover {
            background: var(--jungle-accent);
            color: white;
            transform: translateY(-2px);
        }

        /* --- HERO HERO CONTENT (BOOK & TEXT) --- */
        .hero-container {
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: 40px auto 0 auto;
            gap: 40px;
            z-index: 5;
        }

        .hero-text {
            flex: 1;
            min-width: 300px;
            color: var(--jungle-dark);
        }
	.amazon-text {
	    flex: 1;
	    width: 100%;
	    color: var(--jungle-dark);
            font-family: 'Montserrat', sans-serif;
	    font-size: 16px;
  
  /* Adds a comfortable, adult-friendly gap between lines of text */
	    line-height: 1.5;}
	

        .hero-text h1 {
            font-family: 'Fredoka', sans-serif;
            font-size: 3.5rem;
            line-height: 1.1;
            margin-bottom: 15px;
            color: var(--jungle-dark);
            text-shadow: 2px 2px 0px #fff;
        }

        .hero-text p {
            font-size: 1.3rem;
            margin-bottom: 30px;
            font-weight: 500;
            line-height: 1.5;
            max-width: 500px;
        }

        /* --- CALL TO ACTION BUTTON --- */
        .cta-button {
            display: inline-block;
            font-family: 'Fredoka', sans-serif;
            font-size: 1.4rem;
            color: white;
            background-color: var(--button-orange);
            padding: 15px 35px;
            border-radius: 50px;
            text-decoration: none;
            box-shadow: 0 8px 0px #b35600, 0 10px 20px rgba(0,0,0,0.15);
            transition: all 0.1s ease;
        }

        .cta-button:hover {
            background-color: var(--button-orange-hover);
            transform: translateY(2px);
            box-shadow: 0 6px 0px #b35600, 0 8px 15px rgba(0,0,0,0.15);
        }

        .cta-button:active {
            transform: translateY(8px);
            box-shadow: 0 0px 0px #b35600, 0 2px 5px rgba(0,0,0,0.15);
        }

        /* --- BOOK STAND-IN --- */
        .hero-book {
            flex: 1;
            display: flex;
            justify-content: center;
            min-width: 300px;
        }

        /* Temporary mock placeholder for your book cover design */
        .book-mockup {
            width: 260px;
            height: 340px;
            background: linear-gradient(135deg, #FFD54F, #FF8F00);
            border: 8px solid white;
            border-radius: 10px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            transform: rotate(3deg);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: 'Fredoka', sans-serif;
            color: #3e2723;
            text-align: center;
            padding: 20px;
            position: relative;
        }

        .book-mockup::before {
            content: "??";
            font-size: 5rem;
            margin-bottom: 10px;
        }

        /* --- RAINFOREST DECORATIVE OVERLAYS --- */

        /* Wavy Vine / Canopy frame at the very top edge */
		 .canopy-top-fringe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 50px;

			/* We use a solid color background... */
			background-color: var(--jungle-dark);

			/* ...and mask it with an repeating SVG leaf pattern */
			-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cpath d='M0,0 Q15,40 30,45 Q45,40 60,0 Z' fill='%23000'/%3E%3C/svg%3E");
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cpath d='M0,0 Q15,40 30,45 Q45,40 60,0 Z' fill='%23000'/%3E%3C/svg%3E");

			/* This handles the sizing and repetition seamlessly across the screen */
			-webkit-mask-size: 60px 50px;
			mask-size: 60px 50px;
			-webkit-mask-repeat: repeat-x;
			mask-repeat: repeat-x;

			opacity: 0.8;
			z-index: 2;
		}
				/* Layered Bottom Wave Divider */
        .wave-divider {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
            z-index: 8;
        }

        .wave-divider svg {
            position: relative;
            display: block;
            width: calc(150% + 1.3px);
            height: 110px;
        }

        .wave-divider .shape-fill-back {
            fill: var(--jungle-leaf);
            opacity: 0.5;
        }

        .wave-divider .shape-fill-front {
            fill: var(--jungle-dark);
        }

		.side-links {
			display: flex;
			list-style: none;
			gap: 20px;
		}
		.kid-button {
		  display: inline-block;
		  padding: 15px 35px;
		  font-family: 'Comic Sans MS', 'Chalkboard SE', Arial, sans-serif;
		  font-size: 18px;
		  font-weight: bold;
		  color: white;
		  background-color: #ff5964; /* Bright fun red/pink */

		  /* These lines crush the default gray browser styling */
		  border: none;
		  outline: none;
		  -webkit-appearance: none;
		  appearance: none;

		  border-radius: 50px; /* Makes it nice and round */
		  box-shadow: 0 8px #d9414c; /* Gives it that 3D toy look */
		  transition: all 0.1s ease;
		  cursor: pointer;
		  width: 200px;         /* Locks the width so it never shrinks or grows */
		  text-align: center;   /* Keeps your text perfectly centered inside the locked box */
		  box-sizing: border-box; /* Ensures padding doesn't accidentally mess with the width */
		  }

		/* The button pushes down slightly when clicked */
		.kid-button:active {
		  box-shadow: 0 2px #d9414c;
		  transform: translateY(6px);
		}

		/* Change color when hovering */
		.kid-button:hover {
		  background-color: #ff717b;
		}


        /* Interactive Character Placement */
        .fruggles-peek {
            position: absolute;
            bottom: 60px;
            right: 10%;
            font-size: 4.5rem;
            cursor: pointer;
            z-index: 9;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            user-select: none;
        }

        .fruggles-peek:hover {
            transform: translateY(-20px) scale(1.1) rotate(-5deg);
        }

        .fruggles-peek:active::after {
            content: "Ribbit!";
            position: absolute;
            top: -40px;
            left: -10px;
            font-family: 'Fredoka', sans-serif;
            font-size: 1.2rem;
            background: white;
            color: var(--jungle-dark);
            padding: 5px 12px;
            border-radius: 15px;
            border: 2px solid var(--jungle-dark);
            white-space: nowrap;
        }

        /* --- RESPONSIVE ADJUSTMENTS --- */
        @media (max-width: 768px) {
            .canopy-header {
                padding: 20px 20px 100px 20px;
                text-align: center;
            }
            .canopy-nav {
                flex-direction: column;
                gap: 15px;
            }
            .hero-container {
                margin-top: 20px;
            }
            .hero-text h1 {
                font-size: 2.5rem;
            }
            .hero-text p {
                margin: 0 auto 30px auto;
            }
            .book-mockup {
                transform: rotate(0deg);
                width: 220px;
                height: 290px;
            }
            .fruggles-peek {
                right: 5%;
                bottom: 50px;
                font-size: 3.5rem;
            }
        }
        /* --- HERO HERO CONTENT (BOOK & TEXT) --- */
        .detail-container {
            display: flex;
            align-items: left;
            justify-content: space-around;
            flex-wrap: wrap;
            max-width: 2400px;
            margin: 80px auto 0 auto;
            gap: 40px;
            z-index: 5;
        }

        .detail-text {
            flex: 1;
            min-width: 300px;
            color: var(--jungle-dark);
        }

        .detail-noflex-text {
            flex: 1;
            min-width: 300px;
            max-width: 300px;
            color: var(--jungle-dark);
        }

        .detail-text h1 {
            font-family: 'Fredoka', sans-serif;
            font-size: 3.5rem;
            line-height: 1.1;
            margin-bottom: 15px;
            color: var(--jungle-dark);
            text-shadow: 2px 2px 0px #fff;
        }

        .detail-text p,
		.detail-text li {
            font-size: 1.3rem;
            margin-bottom: 30px;
            font-weight: 500;
            line-height: 1.5;
            max-width: 1000px;
        }

		/* Target the unordered list inside your detail text area */
		.detail-text ul {
			  padding-left: 30px;        /* Moves the list and bullets to the right */
		  margin-top: 15px;          /* Adds a nice gap between the paragraph and the list */
		  list-style-position: outside; /* Keeps bullets neatly lined up outside the text block */
		}

		/* Optional: Adds a little breathing room between each bullet point */
		.detail-text li {
		  margin-bottom: 10px;
		}
/* The CSS: Adds the color and hover effects */
.gradient-btn {
  background: linear-gradient(135deg, #ff007f, #7f00ff); /* Pink to purple gradient */
  color: white;                                         /* Text color */
  padding: 15px 35px;                                   /* Size of the button */
  margin-top: 15px;    /* Space above the button */
  font-size: 18px;
  font-weight: bold;
  border: none;                                         /* Removes default ugly border */
  border-radius: 25px;                                  /* Rounds the corners */
  cursor: pointer;                                      /* Changes mouse to a pointer */
  box-shadow: 0 4px 15px rgba(255, 0, 127, 0.4);       /* Soft colorful glow */
  transition: transform 0.2s, box-shadow 0.2s;          /* Smooth animation */
}

/* Makes the button pop when you hover over it */
.gradient-btn:hover {
  transform: translateY(-2px);                          /* Slight lift */
  box-shadow: 0 6px 20px rgba(255, 0, 127, 0.6);        /* Brighter glow */
}
.creator-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 40px;
}
.profile {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
  text-align: left;
  padding: 20px;
  color: black;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  
  /* Adds a comfortable, adult-friendly gap between lines of text */
  line-height: 1.5;
}
.circle-img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #f0f0f0;
}
/* Fact Modal Overlay */
.fact-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Darkens the background */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 100; /* Makes sure it sits above everything else */
}

/* Modal Content Box */
.fact-modal.show {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 20px;
    max-width: 450px;
    width: 85%;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    border: 4px solid var(--jungle-green);
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fact-modal.show .modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: var(--jungle-green);
    cursor: pointer;
}

.modal-icon {
    font-size: 4rem;
    margin-bottom: 10px;
}

#modal-animal-name {
    color: var(--jungle-green);
    margin: 5px 0 15px 0;
}

#modal-fact-text {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--dark-earth);
    margin-bottom: 20px;
}