@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'Jumble';
    src: url('../fonts/Jumble.woff2') format('woff2'),
         url('../fonts/Jumble.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN';
    src: url('../fonts/DINPro-Regular.woff2') format('woff2'),
         url('../fonts/DINPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN';
    src: url('../fonts/DINPro-Bold.woff2') format('woff2'),
         url('../fonts/DINPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Ensure the body and html take up the full height of the viewport */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Make sure the main content takes up the rest of the space, pushing the footer to the bottom */
main {
    min-height: calc(100vh - 375px); /* 100vh minus the height of the footer */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* This ensures the main content stays spaced out */
}

/* Header styles */
.header-row {
    height: 110px;
}

.logo {
    width: 500px;
    height: 90px;
    padding-left: 45px; /* Ensure the logo is 45px from the left */
}

/* Adjust logo size for smaller screens */
@media (max-width: 991px) {
    .logo {
        width: 500px; /* Reduce the logo size for medium screens */
        height: auto;
    }
}

@media (max-width: 767px) {
    .logo {
        width: 350px; /* Make the logo smaller on smaller screens */
    }
}

/* Align icons and text with 13px margin */
.nav-link img {
    margin-right: 10px; /* Adds 13px space between icon and text */
}

.icon-games {
    width: 44px;
    height: 30px;
}

.icon-art {
    width: 31px;
    height: 31px;
}

.icon-puzzle {
    width: 40px;
    height: 28px;
}

/* General Style for Nav Links */
.navbar-nav .nav-item .nav-link {
    font-size: 28px;
    text-transform: uppercase;
    padding-left: 15px !important;
    padding-right: 25px !important;
    font-family: 'DIN', sans-serif;
    font-weight: bold;
}

.navbar-nav .nav-item {
    margin-right: 20px;
}

.navbar-nav .nav-item:last-child {
    margin-right: 0;
}

@media (max-width: 991px) {
    .navbar-nav .nav-item .nav-link {
        padding-right: 15px !important;
    }
    
    .navbar-nav .nav-item {
        margin-right: 0;
    }
}

/* Navbar adjustments for responsiveness */
.navbar-toggler {
    margin-left: auto; /* Ensure the toggler (hamburger icon) is aligned to the right */
	border: none;
}

.navbar-collapse {
    transition: all 0.3s ease-in-out;
    justify-content: flex-end;
}

@media (max-width: 991px) {
    .navbar-collapse {
        position: absolute;
        top: 100%;
        right: 0;
        width: auto;
        max-height: 0;
        overflow: hidden;
        background-color: white;
        padding: 0 10px; /* Keep horizontal padding consistent */
        padding-top: 0;
        padding-bottom: 0;
        z-index: 1000;
        opacity: 0;
        transform: scale(0.95);
        transform-origin: top right; /* Origin from hamburger location */
        transition: max-height 0.3s ease-in-out, 
                   padding-top 0.3s ease-in-out, 
                   padding-bottom 0.3s ease-in-out, 
                   opacity 0.3s ease-in-out, 
                   transform 0.3s ease-in-out;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    /* When menu is open */
    .navbar-collapse.show {
        max-height: 500px; /* Large enough to accommodate the menu */
        padding-top: 10px;
        padding-bottom: 10px;
        opacity: 1;
        transform: scale(1);
    }
    
    .navbar-toggler {
        border: none;
        padding: 0;
        z-index: 1001; /* Ensure the toggler is above the menu */
    }

    .navbar-toggler:focus {
        outline: none;
        box-shadow: none;
    }

    .navbar-nav {
        text-align: right;
    }

    .navbar-nav .nav-item {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .navbar-nav .nav-link {
        padding: 10px 15px;
    }

/*    .navbar-collapse {
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    } */
}

/* Specific Colors for Each Link */
.games-link {
    color: #f16a21; /* Custom color for Games */
}

.art-link {
    color: #179905; /* Custom color for Art */
}

.puzzles-link {
    color: #af348e; /* Custom color for Puzzles */
}

/* Hover effects for icons and links */
.nav-link:hover, .nav-link:hover img {
    color: inherit; /* Keeps the original color on hover */
    opacity: 0.8; /* Makes the link and icon slightly darker */
    transition: opacity 0.3s ease; /* Smooth transition */
    text-decoration: none; /* Removes underline */
}

/* Optional: Apply background darkening effect on hover */
.games-link:hover, .art-link:hover, .puzzles-link:hover {
    filter: brightness(0.85); /* Slightly darkens the link background */
}

.header-link {
    text-decoration: none;
}

/* Smooth Transition */
body {
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease;
}

body.start-blue { background-color: #1d3a8c; }
body.start-green { background-color: #179905; }
body.start-purple { background-color: #af348e; }

.small-margin {
    display: block;
    margin-top: 10px; /* Adjust this value to create a small space */
}

/* Game Section */
.game-section {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

/* Game Image Styling */
.game-image {
    width: 100%; /* Make video responsive */
    max-width: 1063px;
    height: auto;
    margin-bottom: 25px; /* Adds space below the image */
}

/* Header Text Styling */
.game-header {
    color: white;
    font-size: 36pt;
    font-family: 'Jumble', sans-serif;
    margin-bottom: 5px;
}

/* Fix for deprecated h1 API warning - explicit font-sizes for h1 within sectioning elements */
section h1, 
article h1, 
aside h1, 
nav h1 {
    font-size: 2em; /* Default browser h1 size to maintain consistency */
}

/* Explicit font-size for game-header h1 within section */
section h1.game-header {
    font-size: 36pt;
}

/* Regular Text Styling */
.game-description {
    color: white;
    font-size: 24pt;
    line-height: 28pt;
    font-family: 'DIN', sans-serif;
    margin-bottom: 40px; /* Adds space before the buttons */
}


/* Hide the checkbox */
#modalToggle {
  display: none !important;
}

/* Base state: modal is collapsed */
.modal {
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  overflow: hidden;
  background: #ea8c5a; /* Modal overlay background */
  transition: width 0.5s ease, height 0.5s ease;
  z-index: 9999 !important;
}

/* When the checkbox is checked, expand the modal to fill the viewport */
#modalToggle:checked ~ .modal {
  width: 100%;
  height: 100%;
}

/* Modal content container */
.modal .content {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
	z-index: 10000;
}

/* Show modal content when checkbox is checked */
#modalToggle:checked ~ .modal .content {
  opacity: 1;
}

/* Style the close button inside the modal */
.close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 2em;
  color: #fff;
  cursor: pointer;
  z-index: 10001;
}

/* (Optional) Adjust the Unity game container inside the modal as needed */
.modal .game-container {
  margin-top: 50px; /* Example spacing; adjust as needed */
}



/* Responsive Typography */
@media (max-width: 767px) {
    .game-description {
        font-size: 22px;
        line-height: 26px;
    }
}

/* Ensure Flexbox is applied to section-row */
.section-row {
    display: flex;
    align-items: center;
}

@media (max-width: 767px) {
    .section-row {
        flex-direction: column; /* Stack elements vertically */
        text-align: center; /* Center-align text */
        margin-bottom: 40px; /* Space between sections */
    }

    .section-image {
        margin-bottom: 20px; /* Space between image and text */
        width: 100%; /* Full width for images */
        max-width: 400px; /* Max width for images */
        height: auto; /* Maintain aspect ratio */
    }

    .section-text {
        padding-left: 0px !important; /* Add padding for comfortable reading on mobile */
        padding-right: 0px !important;
    }

    .section-header, .section-description {
        text-align: center; /* Center-align headers and descriptions */
        padding-left: 20px;
        padding-right: 20px;
    }
}

.highlight-yellow {
    color: #ffff00;
    font-weight: bold;
    text-decoration: none;
}

/* App Store and Google Play Image Buttons */
.game-buttons {
    display: flex;
    justify-content: center;
    gap: 40px; /* Adds 40px gap between the two images */
}

.store-button {
    width: 236px;
    height: 70px;
    object-fit: contain; /* Ensure the images fit within the dimensions without stretching */
    max-width: 100%; /* Ensure the image doesn't overflow its container */
    max-height: 100%;
}

/* Image Styling for the specific images */
.section-image.colorsheet-connect-dots {
    width: 100%; /* Image will fill its column */
    max-width: 400px; /* Optional: Restrict the maximum width */
    height: auto; /* Maintain the aspect ratio */
    object-fit: contain; /* Ensure the image fits within its container without distortion */
    margin-top: 30px; /* Padding from the top */
}

.section-image.maze-wordsearch {
    width: 100%; /* Image will fill its column */
    max-width: 400px; /* Optional: Restrict the maximum width */
    height: auto; /* Maintain the aspect ratio */
    object-fit: contain; /* Ensure the image fits within its container without distortion */
    margin-top: 30px; /* Padding from the top */
}

/* Art and Puzzle Section */
.content-section {
    padding: 30px 0;
}

.section-row {
    padding: 10px 0; /* Adds padding between rows */
}

/* Image Styling */
.section-image {
    width: 100%; /* Image will fill its column */
    height: auto; /* First image height */
    max-width: 400px;
    object-fit: contain;
    margin-top: 30px; /* Padding from the top */
}

.section-row:nth-child(2) .section-image {
    height: 354px; /* Specific height for the second image */
}

/* Text Styling */
.section-text {
    padding-left: 30px; /* Adjust padding for text next to image */
}

.section-header {
    color: white;
    font-size: 36pt;
    font-family: 'Jumble', sans-serif;
    margin-bottom: 20px;
}

.section-description {
    color: white;
    font-size: 24pt;
    line-height: 30pt;
    font-family: 'DIN', sans-serif;
}

/* Responsive Typography for Sections */
@media (max-width: 767px) {
    .section-description {
        font-size: 22px; 
		line-height: 26px;
    }
}

/* Art Page */
.green-box {
    background-color: #28a745; /* Green color */
    height: auto;
    display: flex;
	padding: 15px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
}

.green-box-header {
    font-size: 60pt;
    font-family: 'Jumble', sans-serif;
    margin-bottom: 2px;
}

/* Explicit font-size for h1 within section to fix deprecated API warning */
section h1.green-box-header {
    font-size: 60pt;
}

.green-box-blurb {
    font-size: 20pt;
    font-family: 'DIN', sans-serif;
    line-height: 22pt;
    margin: 0;
}

/* 'Coloring Sheets' title */
.coloring-title {
    color: #28a745; /* Green color */
    font-size: 32pt;
    font-family: 'DIN', sans-serif;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 35px;
}

/* Coloring Sheets Grid */
.coloring-sheet {
    width: 230px;  /* Set fixed width */
    height: 275; /* Set fixed height */
    object-fit: cover; /* Ensure image fits within dimensions */
    border: 1px solid black;
}

.caption {
    font-family: 'DIN', sans-serif; /* Use DIN font */
    font-size: 18pt;
    margin-top: 10px;
}

/* Connect Dots Section with Background Color */
.connect-dots-section {
    background-color: #dfefdc; /* Light green background color */
    padding: 50px 0; /* Add padding to the top and bottom of the section */
}

/* Ensure images and captions in the new section have the same styles */
.connect-dots-section .coloring-sheet {
    width: 230px;
    height: 300px;
    object-fit: cover;
}

.connect-dots-section .caption {
    font-family: 'DIN', sans-serif;
    font-size: 18pt;
    margin-top: 10px;
}

/* Puzzles Page */
.purple-box {
    background-color: #af348e; /* Purple color */
    height: auto;             /* Fixed height */
    display: flex;
	padding: 15px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
}

.purple-box-header {
    font-size: 60pt;
	font-family: 'Jumble', sans-serif;
    margin-bottom: 2px;
}

/* Explicit font-size for h1 within section to fix deprecated API warning */
section h1.purple-box-header {
    font-size: 60pt;
}

.purple-box-blurb {
    font-size: 20pt;
    font-family: 'DIN', sans-serif;
	line-height: 22pt;
    margin: 0;
}

/* 'Coloring Sheets' title */
.puzzle-coloring-title {
    color: #af348e; /* Purple color */
    font-size: 32pt;
    font-family: 'DIN', sans-serif;
	font-weight: bold;
    margin-top: 50px;
    margin-bottom: 35px;
}

/* Maze Section with Background Color */
.maze-section {
    background-color: #ffffff;
    padding: 50px 0; /* Add padding to the top and bottom of the section */
}

/* Ensure images and captions in the new section have the same styles */
.maze-section .coloring-sheet {
    width: 230px;
    height: 275;
    object-fit: cover;
}

.maze-section .caption {
    font-family: 'DIN', sans-serif;
    font-size: 18pt;
    margin-top: 10px;
}


/* Word Search Section with Background Color */
.wordsearch-section {
    background-color: #f4e4f0; /* Light purple background color */
    padding: 50px 0; /* Add padding to the top and bottom of the section */
}

/* Ensure images and captions in the new section have the same styles */
.wordsearch-section .coloring-sheet {
    width: 230px;
    height: 275px;
    object-fit: cover;
}

.wordsearch-section .caption {
    font-family: 'DIN', sans-serif;
    font-size: 18pt;
    margin-top: 10px;
}

/* Games Page */
.orange-box {
    background-color: #f16a21; /* Orange color */
    height: auto;
    display: flex;
	padding: 15px; 
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
}

.orange-box-header {
    font-size: 60pt;
	font-family: 'Jumble', sans-serif;
    margin-bottom: 2px;
}

/* Explicit font-size for h1 within section to fix deprecated API warning */
section h1.orange-box-header {
    font-size: 60pt;
}

.orange-box-blurb {
    font-size: 20pt;
    font-family: 'DIN', sans-serif;
	line-height: 22pt;
    margin: 0;
}

/* 'Game Sheets' title */
.games-title {
    color: #f16a21; /* Purple color */
    font-size: 32pt;
    font-family: 'DIN', sans-serif;
	font-weight: bold;
    margin-top: 50px;
    margin-bottom: 35px;
}

/* Games Unity page */
.game-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally center all children */
    margin-top: 30px;
    position: relative;
}

.fullscreen-btn {
    position: absolute;
    top: 10px;  /* Adjust this value to change the vertical position of the button */
    right: 10px; /* Adjust this value to change the horizontal position */
    background-color: #f16a21;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 50%; /* Rounded button */
    cursor: pointer;
    z-index: 10; /* Ensure it appears above the canvas */
}

.fullscreen-btn:hover {
    background-color: #d14f0f;
}

/* Make the Unity canvas responsive */
#unity-canvas {
    width: 100%; /* Make it scale to the full width of its container */
    max-width: 960px; /* Optional: limit the max width for larger screens */
    height: auto; /* Let the height adjust based on the width to maintain aspect ratio */
    background-color: #000000; /* Background color for the game */
}

/* Styling for keyboard instructions below the Unity game */
.keyboard-instructions {
    width: 100%; /* Responsive scaling */
    max-width: 960px; /* Match Unity canvas max width */
    height: auto; /* Maintain aspect ratio */
    margin-top: 20px; /* Add spacing from the canvas */
    text-align: center;
}

/* Adjust the layout on smaller devices */
@media (max-width: 767px) {
    #unity-canvas {
        max-width: 100%; /* Make sure the canvas fills the screen width on small devices */
        height: auto; /* Keep the height auto to maintain aspect ratio */
    }

    .keyboard-instructions {
        max-width: 100%; /* Make sure the instructions also fit the screen width */
        height: auto;
    }

    /* Optional: Add padding around the game container for better spacing */
    .game-container {
        padding: 0 10px;
    }
}

/* Orange band on games page before the footer */
.orange-band {
    height: 15px;
    background-color: #f16a21;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0;
}


/* Corporate Pages */
.gray-box {
    background-color: #4d4d4b;
    height: auto;
    display: flex;
	padding: 15px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
}

.gray-box-header {
    font-size: 60pt;
	font-family: 'Jumble', sans-serif;
    margin-bottom: 2px;
}

/* Explicit font-size for h1 within section to fix deprecated API warning */
section h1.gray-box-header {
    font-size: 60pt;
}

.gray-box-blurb {
    font-size: 20pt;
    font-family: 'DIN', sans-serif;
	line-height: 22pt;
    margin: 0;
}

.contact-info {
	font-family: 'DIN', sans-serif;
    font-size: 18pt;
	margin-top: 50px;
	color: black;
}

.gray-band {
    height: 15px;
    background-color: #4d4d4b;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0;
}

/* Styling for contact emails section */
.contact-emails {
    font-family: 'DIN', sans-serif;
    font-size: 18pt;
    line-height: 1;
    color: black;
}

.contact-emails h4 {
    font-family: 'DIN', sans-serif;
    font-weight: bold;
    font-size: 20pt; /* Slightly larger font for headers */
    color: #000;
	margin-top: 35px;
}

.contact-emails a {
    font-family: 'DIN', sans-serif;
    font-size: 14pt;
    color: #000;
    text-decoration: none; /* Remove underline from email links */
}

.contact-emails a:hover {
    text-decoration: underline; /* Optionally, underline the email link on hover */
}

/* FAQ Styles */
.faq-item {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    /* Reset button defaults so the <button> element looks identical to the old <div> */
    background: transparent;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
}

.faq-question:focus-visible {
    /* Keyboard focus indicator (only shows for keyboard users, not mouse clicks) */
    outline: 2px solid #1d3a8c;
    outline-offset: 2px;
}

.faq-question h4 {
    margin: 0;
    flex-grow: 1;
    font-family: 'DIN', sans-serif;
    font-size: 18pt;
    font-weight: normal;
    color: #000;
}

.faq-toggle {
    font-size: 28px;
    font-weight: bold;
    color: #4d4d4b;
    transition: transform 0.3s ease, color 0.3s ease;
    user-select: none;
    min-width: 30px;
    text-align: center;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding: 0 0;
}

.faq-answer.open {
    max-height: 500px;
    padding: 0 0 20px 0;
    transition: max-height 0.4s ease-in, padding 0.4s ease-in;
}

.faq-answer p {
    margin: 0;
    font-family: 'DIN', sans-serif;
    font-size: 16pt;
    line-height: 1.5;
    color: #333;
}

.faq-answer a {
    color: #4d4d4b;
    text-decoration: underline;
}

.faq-answer a:hover {
    color: #333;
}

.faq-question.active .faq-toggle {
    transform: rotate(45deg);
    color: #af348e;
}

/* FAQ Section Headers */
.contact-info h3 {
    font-size: 28pt;
    color: #1d3a8c;
    padding-top: 28px;
    font-family: 'DIN', sans-serif;
    font-weight: normal;
}

/* FAQ Closing Paragraph */
.faq-closing {
    padding-top: 28px;
}

/* Footer */
.footer {
    background-color: white;
    min-height: 350px;
    color: black;
    text-align: left;
    padding: 50px;
    margin-bottom: 0px;
}

.footer p {
    font-size: 12pt;
    line-height: 16pt;
}

.social-media {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.social-media img {
    vertical-align: middle;
}

.bluesky-text {
    font-size: 1.2em;
    font-weight: 500;
}

/* Page Transition Effect */
/* Page Transition Overlay */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
}

.page-transition-overlay.active {
    pointer-events: all;
}

/* Super Torah Flying Character - Default (hidden off-screen) */
.super-torah-flying {
    position: fixed;
    height: 15vh;
    width: auto;
    z-index: 100000;
    /* Hide completely by default */
    left: -9999px;
    top: -9999px;
    opacity: 0;
    visibility: hidden;
}

/* Left to Right */
.page-transition-overlay.fly-left-right .super-torah-flying {
    position: absolute;
    top: 50%;
    left: -25%;
    bottom: auto;
    right: auto;
    transform: translateY(-50%);
    opacity: 1;
    visibility: visible;
    transition: left 1.8s linear;
}

.page-transition-overlay.fly-left-right.active .super-torah-flying {
    left: 125%;
}

/* Right to Left */
.page-transition-overlay.fly-right-left .super-torah-flying {
    position: absolute;
    top: 50%;
    right: -25%;
    bottom: auto;
    left: auto;
    transform: translateY(-50%) scaleX(-1);
    opacity: 1;
    visibility: visible;
    transition: right 1.8s linear;
}

.page-transition-overlay.fly-right-left.active .super-torah-flying {
    right: 125%;
}

/* Top to Bottom (Down) - Rotate to face downward */
.page-transition-overlay.fly-top-bottom .super-torah-flying {
    position: absolute;
    top: -25%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translateX(-50%) rotate(90deg);
    opacity: 1;
    visibility: visible;
    transition: top 1.8s linear;
}

.page-transition-overlay.fly-top-bottom.active .super-torah-flying {
    top: 125%;
}

/* Bottom to Top (Up) - Rotate to face upward */
.page-transition-overlay.fly-bottom-top .super-torah-flying {
    position: absolute;
    bottom: -25%;
    left: 50%;
    top: auto;
    right: auto;
    transform: translateX(-50%) rotate(-90deg);
    opacity: 1;
    visibility: visible;
    transition: bottom 1.8s linear;
}

.page-transition-overlay.fly-bottom-top.active .super-torah-flying {
    bottom: 125%;
}