/* https://webfonts.ffonts.net/BigNoodleTitling.font.download# */
@font-face {
    font-family: 'BigNoodleTitling';
    src: url('BigNoodleTitling.ttf.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --viewport-width: 1024px; /* Fallback values */
    --viewport-height: 768px;
    --pageheader-width: var(--screen-width);
    --pageheader-margin: calc(var(--screen-height) * .0025) calc(var(--screen-width) * .0025) calc(var(--screen-height) * .0025) calc(var(--screen-width) * .0025);
    --regular-font-size: 30px;
    --tooltip-font-size: 16px;
    --small-font-size: calc(var(--regular-font-size) * 0.75);
    --big-font-size: calc(var(--regular-font-size) * 1.25);
    --huge-font-size: calc(var(--regular-font-size) * 1.5);
    --light-green-theme: rgb(40, 180, 99 );
    --dark-green-theme: rgb(24, 106, 59);
    --large-shadow-size: 1px;
    --small-shadow-size: 1px;
    --head-text-shadow: var(--large-shadow-size) var(--large-shadow-size) var(--large-shadow-size) var(--dark-green-theme);
    --subhead-text-shadow: var(--small-shadow-size) var(--small-shadow-size) var(--small-shadow-size) var(--dark-green-theme);
    --heading-font-family: 'BigNoodleTitling', 'Arial Narrow', Tahoma, Geneva, Verdana, sans-serif;
    --menu-top-margin: calc(var(--screen-height) * 0.05);
    --image-border-size: 3px;
    --tooltip-width-factor: .5;
    --image-scale: 100%;
    --border-radius: 6px;
}

@media (min-width: 1024px) and (max-width: 4000px) {
    :root {
        --regular-font-size: 30px;
        --large-shadow-size: 6px;
        --small-shadow-size: 3px;
        --image-border-size: 2px;
    }

    .menu-item {
        flex-grow: 1;
        flex-basis: calc(16% - 4%);
        max-width: calc(16% - 4%);
        padding: 2% 2% 2% 2%;
    }
}

@media (min-width: 540px) and (max-width: 1023px) {
    :root {
        --regular-font-size: 16px;
        --tooltip-font-size: 14px;
        --large-shadow-size: 4px;
        --small-shadow-size: 2px;
        --image-border-size: 2px;
        --tooltip-width-factor: .8;
        --image-scale: 90%;
        --privacy-center-adjustment: 25%;
    }
}

@media (min-width: 390px) and (max-width: 539px) {

    :root {
        --regular-font-size: 15px;
        --tooltip-font-size: 13px;
        --large-shadow-size: 3px;
        --small-shadow-size: 2px;
        --image-border-size: 2px;
        --tooltip-width-factor: .92;
        --image-scale: 80%;
        --privacy-center-adjustment: 5%;
    }
}

@media (min-width: 300px) and (max-width: 389px) {

    :root {
        --regular-font-size: 15px;
        --tooltip-font-size: 13px;
        --large-shadow-size: 3px;
        --small-shadow-size: 2px;
        --image-border-size: 2px;
        --tooltip-width-factor: .92;
        --image-scale: 75%;
        --privacy-center-adjustment: 5%;
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .menu-item {
        flex-grow: 1;
        flex-basis: calc(33.333% - 4%);
        max-width: calc(33.333% - 4%);
        padding: 2% 0 2% 4%;
    }
}

@media (min-width: 390px) and (max-width: 768px) {
    .menu-item {
        flex-grow: 1;
        flex-basis: calc(33.333% - 4%);
        max-width: calc(33.333% - 4%);
        padding: 2% 0 2% 4%;
    }
}

@media (min-width: 320px) and (max-width: 389px) {

    :root {
        --regular-font-size: 14px;
        --large-shadow-size: 2px;
        --small-shadow-size: 1px;
        --image-border-size: 1px;
    }

    .menu-item {
        flex-grow: 1;
        flex-basis: calc(50% - 6%);
        max-width: calc(50% - 6%);
        padding: 2% 0 2% 6%;
    }
}


body {
    font-family: verdana, Arial, Helvetica, sans-serif;
    background-color: #fefeff;
}

    body.cursorwait {
        cursor: wait;
    }

    body.cursordefault {
        cursor: default;
    }

.image-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* This will center the items horizontally in the container */
}

.menu-item {
    margin-bottom: auto;
    display: flex;
    box-sizing: border-box;
}

.previewimg {
    position: relative;
    width: var(--image-scale);
    object-fit: contain; /* Ensure the image scales properly */
    border: var(--image-border-size) solid black;
}

    /* Hover state: red border */
    .previewimg:hover,
    .previewimg:focus {
        border: var(--image-border-size) solid red;
        cursor: pointer; /* Indicates a clickable URL */
    }

.previewcell {
    display: flex; /* Ensure the cell behaves as a flex container */
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
}

.hidden {
    display: none !important
}

.shown {
    display: block !important
}

.pageheader {
    width: 100%; /* var(--pageheader-width); */
    margin: var(--pageheader-margin);
    font-size: var(--huge-font-size);
}

.centerchildren {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1, h2, h3, h4, .hometitletext, .copyrighttitle {
    font-family: var(--heading-font-family);
    color: var(--dark-green-theme);
}

h1, .hometitletext {
    font-size: var(--huge-font-size);
    font-weight: bold;
    /*text-shadow: var(--head-text-shadow);*/
    letter-spacing: calc(var(--regular-font-size) / 12);
    text-align: center;
}

h2, h3, .copyrighttitle {
    font-size: var(--regular-font-size);
    /* text-shadow: var(--subhead-text-shadow);*/
    letter-spacing: calc(var(--regular-font-size) / 12);
    margin: 14px 4px 4px 4px;
}

h2 {
    text-align: center;
    font-size: var(--regular-font-size);
}

h3, h4 {
    text-align: left;
}

h4 {
    font-size: calc(var(--regular-font-size) *0.9);
    margin: 0 4px 0 4px;
}

p {
    opacity: 1.0;
    margin: 4px 6px 16px 4px;
    text-align: left;
    font-size: var(--small-font-size);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.indent {
    padding-left: var(--big-font-size);
}

.disabled-link {
    color: grey;
    cursor: none;
    pointer-events: none;
    text-decoration: none;
}

.enabled-link {
    color: black;
    cursor: default;
}

.image-wrapper {
    position: relative;
    display: inline-block; /* Ensures inline-block behavior for positioning */
}



.help-button {
    /*    position: absolute;
    top: -26px;
    right: -26px;*/
    width: 24px;
    height: 24px;
    font-size: max(12px, calc(var(--regular-font-size) * 0.6));
    font-weight: bold;
    border: 0;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
    z-index: 10;
    /*    background: #ddd;*/
    color: transparent;
    background-color: transparent;
}

.close-tooltip {
    position: absolute;
    top: calc(var(--regular-font-size) / 3); /* Match padding of tooltip for vertical alignment */
    right: var(--regular-font-size); /* Match padding of tooltip for horizontal alignment */
    background: none;
    border: none;
    color: red; /* Match text color of tooltip */
    background: #ddd;
    cursor: pointer;
    font-size: var(--regular-font-size);
    line-height: 1;
    z-index: 1001; /* Ensure it's above the tooltip itself */
}

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip {
    background-color: rgba(255, 249, 196, 0.8);
    color: #000;
    /* Use clamp for responsive sizing, where 92vw ensures 4% on each side */
    width: clamp(300px, calc(var(--tooltip-width-factor) * 100vw), 100vw);
    /*max-width: calc(var(--viewport-width) * var(--tooltip-width-factor));*/ /* 92% of viewport width */
    text-align: left;
    border-radius: 6px;
    border: 1px solid black;
    /* Positioning */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
    z-index: 1000;
    font-size: calc(var(--regular-font-size) * 0.8);
    border-radius: 6px;
    padding: var(--regular-font-size);
    transition: opacity 0.3s;
}

    .tooltip::after {
        content: none;
    }

/* For touch devices, we use CSS to mimic hover */
@media (hover: none) {
    .tooltip-container:active .tooltip {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}

.privacybutton {
    margin-left: 40px;
    font-family: var(--heading-font-family);
    font-size: var(--small-font-size);
    color: white;
    background-color: var(--dark-green-theme);
    border-radius: var(--border-radius);
}