/* General Styles for Tetris Game */
.tetris-iframe-container {
    position: relative;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #000; /* Ensure the background color matches the container */
}

.tetris-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .tetris-iframe-container {
        padding-bottom: 75%; /* Adjust aspect ratio for smaller screens */
    }
}

/* Specific adjustments for iPhone and iPad displays */
@media (max-width: 480px), (min-device-width: 768px) and (max-device-width: 1366px) {
    .tetris-iframe-container {
        padding-bottom: 100%; /* Ensure it takes the full viewport height */
        height: auto; /* Ensure it adapts to the content height */
        overflow: hidden; /* Ensure no overflow */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    .tetris-iframe-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }
}

/* Target iPads within the iframe */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px),
       only screen and (min-device-width: 768px) and (max-device-width: 1366px) {
    #tetrisIframe {
        width: 100vw;
        height: 100vh;
        transform: scale(1); /* Ensure it fits the screen */
        transform-origin: center center; /* Center the scaling */
    }
}

/* Target iPhones within the iframe */
@media only screen and (max-device-width: 767px) and (orientation: portrait),
       only screen and (max-device-width: 812px) and (orientation: landscape) {
    #tetrisIframe {
        width: 100vw;
        height: 100vh;
        transform: scale(0.8); /* Adjust scale to fit screen better */
        transform-origin: center center; /* Center the scaling */
    }
}

/* Additional scaling for very small screens */
@media only screen and (max-width: 480px) {
    #tetrisIframe {
        transform: scale(0.8);
        transform-origin: center center; /* Center the scaling */
    }
}

/* General Styles for Word Snake */
.responsive-iframe-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Default 16:9 aspect ratio */
    margin: 0 auto; /* Center the container */
    border: 2px solid #000; /* Optional border for visibility */
    overflow: hidden;
    background-color: #000; /* Ensure the background color matches the container */
}

.responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .responsive-iframe-container {
        padding-bottom: 75%; /* Adjust aspect ratio for smaller screens */
    }
}

/* Specific adjustments for iPhone and iPad displays */
@media (max-width: 480px), (min-device-width: 768px) and (max-device-width: 1366px) {
    .responsive-iframe-container {
        padding-bottom: 100%; /* Ensure it takes the full viewport height */
        height: auto; /* Ensure it adapts to the content height */
        overflow: hidden; /* Ensure no overflow */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    .responsive-iframe-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }
}

/* Specific styles for the game inside the iframe */
iframe[name="gameIframe"] {
    border: 0; /* Remove iframe border */
}

/* Adjustments specifically for the game within the iframe */
iframe[name="gameIframe"] html, iframe[name="gameIframe"] body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: black;
    color: white;
    overflow: hidden; /* Prevent scrolling on mobile */
}

iframe[name="gameIframe"] canvas {
    border: 1px solid white;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    object-fit: contain; /* Scale the canvas properly */
}

/* Target iPads within the iframe */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait), 
       only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) {
    iframe[name="gameIframe"] canvas {
        width: 100vw; /* Full viewport width */
        height: 100vh; /* Full viewport height */
        object-fit: contain; /* Scale the canvas properly */
    }
}

/* Target iPhones within the iframe */
@media only screen and (max-device-width: 767px) and (orientation: portrait), 
       only screen and (max-device-width: 812px) and (orientation: landscape) {
    iframe[name="gameIframe"] canvas {
        width: 100vw; /* Full viewport width */
        height: 100vh; /* Full viewport height */
        object-fit: contain; /* Scale the canvas properly */
    }
    iframe[name="gameIframe"] .controls {
        flex-direction: column; /* Stack controls vertically on small screens */
    }
}

iframe[name="gameIframe"] .controls {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

iframe[name="gameIframe"] button {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

iframe[name="gameIframe"] #gameOver {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

iframe[name="gameIframe"] #results {
    display: none; /* Ensure it starts hidden */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: left;
    max-width: 100%;
    max-height: 80%;
    overflow-y: auto;
    background: black; /* Add background color for visibility */
    padding: 20px; /* Add padding for better layout */
    border: 1px solid white; /* Add border for better visibility */
}

iframe[name="gameIframe"] #results-content {
    padding: 0;
    margin: 0;
    user-select: text; /* Enable text selection */
    -webkit-user-select: text; /* Enable text selection for Safari */
}

iframe[name="gameIframe"] #results-content h2 {
    margin: 10px 0; /* Add some spacing around headers */
    padding: 0;
}

iframe[name="gameIframe"] .word-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Creates 4 equal columns */
    gap: 20px;
    list-style-position: inside;
    margin: 0 0 20px 0; /* Reset margin and add bottom margin */
    padding: 0 0 0 20px; /* Add left padding for list items */
    user-select: text; /* Enable text selection */
    -webkit-user-select: text; /* Enable text selection for Safari */
}

iframe[name="gameIframe"] .word-item {
    margin-bottom: 5px; /* Add space between word items */
}

iframe[name="gameIframe"] .hidden {
    display: none;
}

iframe[name="gameIframe"] #currentWord {
    font-size: 24px; /* Increase font size for readability on smaller screens */
}

iframe[name="gameIframe"] #loadingScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    color: white;
    font-size: 24px;
    z-index: 9999;
}

iframe[name="gameIframe"] #loadingScreen img {
    max-width: 100%;
    max-height: 100%;
}

/* General Styles for Word Pong*/
.responsive-iframe-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 0;
    padding-bottom: 56.25%; /* Default 16:9 aspect ratio */
    margin: 0 auto; /* Center the container */
    border: 2px solid #000; /* Optional border for visibility */
    overflow: hidden;
    background-color: #000; /* Ensure the background color matches the container */
}

.responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .responsive-iframe-container {
        padding-bottom: 75%; /* Adjust aspect ratio for smaller screens */
    }
}

/* Specific adjustments for iPhone displays */
@media (max-width: 480px) {
    .responsive-iframe-container {
        padding-bottom: 56.25%; /* Maintain aspect ratio */
        height: 100vh; /* Ensure it takes the full viewport height */
        overflow: hidden; /* Ensure no overflow */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    .responsive-iframe-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }
}

/* Adjust the size of the subscribe button */
.wp-block-button__link.no-border-radius[name="jetpack_subscriptions_widget"] {
    font-size: 16px !important; /* Match the font size to the email input */
    padding: 15px 23px !important; /* Match the padding to the email input */
    border-radius: 0px !important; /* Match the border radius to the email input */
    border-width: 1px !important; /* Match the border width to the email input */
    line-height: normal !important; /* Ensure line-height does not affect the height */
    height: auto !important; /* Ensure height is determined by padding */
    box-sizing: border-box !important; /* Include padding and border in the element's total width and height */
    width: auto !important; /* Let the width adjust automatically based on the content */
    max-width: 200px !important; /* Set a maximum width as needed */
    display: inline-block; /* Ensure it doesn't stretch to fill the container */
}

/* Adjust the size of the search button */
.wp-block-search__button.has-small-font-size.has-icon.wp-element-button[aria-label="Search"] {
    font-size: 14px !important; /* Adjust the font size as needed */
    padding: 8px 24px !important; /* Increase the left and right padding to make it more rectangular */
    width: auto !important; /* Let the width adjust automatically based on the content */
    max-width: 150px !important; /* Set a maximum width as needed */
    line-height: normal !important; /* Ensure line-height does not affect the height */
    box-sizing: border-box !important; /* Include padding and border in the element's total width and height */
}

button[onclick="registerResponse(true)"] {
    background-color: darkgreen !important;
    color: white !important;
}

button[onclick="registerResponse(false)"] {
    background-color: darkred !important;
    color: white !important;
}

#wordDisplay {
    text-align: center; /* Center-aligns the content */
    font-size: 24px; /* Larger text for visibility */
    margin-bottom: 20px; /* Adds space below the displayed word */
}

button {
    width: 250px; /* Sets a specific width to make buttons larger */
    height: 60px; /* Sets a specific height to make buttons larger */
    font-size: 20px; /* Larger text inside the button */
    margin: 10px auto; /* Centers the button and adds space around them */
    display: block; /* Makes the button a block element to respect width/height */
}

#vocabularyTest button {
    background-color: #007BFF; /* Example: blue background */
    color: white; /* White text color */
    border: none; /* No borders */
    border-radius: 10px; /* Rounded corners */
    cursor: pointer; /* Cursor indicates clickable button */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

#vocabularyTest button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

#vocabularyTest {
    width: 100%;           /* Makes the block use the full width available */
    max-width: 1200px;     /* Sets a maximum width to ensure it doesn’t get too wide on larger screens */
    margin: auto;          /* Centers the block horizontally */
    padding: 20px;         /* Adds space inside the block around the content */
    background-color: #f9f9f9; /* Light grey background for visibility */
    border: 1px solid #ccc; /* Adds a subtle border */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Adds a shadow for a slight 3D effect */
}

#vocabQuiz button {
    margin-right: 10px;
    margin-top: 5px;
}
#vocabQuiz select {
    margin-bottom: 10px;
}
/* Specific targeting of submenu items within the WordPress block navigation */
.wp-block-navigation-item__submenu .wp-block-navigation-item__label {
    white-space: nowrap; /* Ensures submenu text does not wrap */
    padding: 0px 0px; /* Adjust padding to reduce whitespace, tweak as needed */
}

/* Prevent line wrapping in submenu labels */
.wp-block-navigation-item__label {
    white-space: nowrap; /* Prevents text from wrapping to a new line */
}

/* Set a maximum width and center align your custom width container */
.my-custom-width {
    max-width: 120%; /* Typically, max-width should not exceed 100% */
    margin-left: auto;
    margin-right: auto;
}

/* Custom spacing */
.wp-site-blocks {
    padding: 0;
}

.wp-site-blocks > * + * {
    margin-block-start: 0;
}

/* Hide footer credit */
footer + .wp-block-group {
    display: none;
}

/* Button styles and transitions for hover state */
.wp-block-button .wp-block-button__link {
    transition: .25s; /* Smooth transition for hover effects */
}

.wp-block-button .wp-block-button__link:hover {
    box-shadow: none; /* Remove shadow on hover */
}

/* Style adjustments for contact form required fields */
.contact-form label span {
    font-weight: 300;
    padding-left: 2px;
    opacity: .5;
}

/* Hover styles for outline buttons */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--contrast);
}

/* Center header blocks on mobile */
@media (max-width: 820px) {
    header .wp-container-8,
    header .wp-container-9 {
        justify-content: center;
    }
}

/* Hide footer form on contact page */
.page-id-12 .footer-contact-hero {
    display: none;
}

/* Job text style in tab content */
.abh_tab_content .abh_text .abh_job {
    font-size: 13px !important;
}

/* Styles for crossword container to ensure full width and proper height */
.crossword-container {
    max-width: none !important;
    width: 100% !important; /* Full width of its parent element */
    height: auto !important; /* Height adjusts to content */
    min-height: 500px !important; /* Minimum height, adjust as needed */
}
.unique-crossword-2 {
    width: 100% !important; /* This will ensure the container takes up the full width */
    height: auto !important; /* 'auto' adjusts the height proportionally */
    max-width: none !important; /* Removes any maximum width constraints */
    min-height: 500px !important; /* Adjust this value to set a minimum height if necessary */
}
.unique-crossword-2 {
    padding-bottom: 0 !important; /* Reduces padding at the bottom */
    margin-bottom: 0 !important; /* Reduces margin at the bottom */
}
@media screen and (min-width: 1024px) {
    .unique-crossword-2, .crossword-container {
        width: 80% !important;
        height: auto !important;
        margin: 0 auto !important;
    }
}

@media screen and (max-width: 1023px) {
    .unique-crossword-2, .crossword-container {
        width: 100% !important;
        margin: 0 auto !important;
    }
}
.accessed {
    filter: grayscale(100%);
}