:root {
    --rgcb-1-superbright:   #ffcc66;    /* pale orange */
    --rgcb-1-bright:        #f58200;    /* orange */
    --rgcb-1-superlight:    #ffff99;    /* pale yellow */
    --rgcb-1-light:         #f5b800;    /* yellow */
    --rgcb-1-dark:          #9a5b16;    /* brown */
    --rgcb-1-superdark:     #5d3817;    /* dark brown */
    --rgcb-1-medium:        #c2731b;    /* dark orange */

    --rgcb-2-bright:        #002cf5;    /* blue */
    --rgcb-2-light:         #5b68cc;    /* steelblue */
    --rgcb-2-dark:          #06007f;    /* indigo */
    --rgcb-2-superlight:    #d1d5f3;    /* cornflower-ish */
    --rgcb-2-darkgray:      #5a5880;
}

/* Base Setup & Typography */
* {
    font-size: 12pt;
    font-family: 'IBM Plex Sans', Verdana, Trebuchet, Arial, sans-serif;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1 { color: var(--rgcb-2-dark); font-size: 18pt; }
h2 { color: var(--rgcb-2-dark); font-size: 16pt; }
h3 { color: var(--rgcb-2-dark); font-size: 14pt; }
h4 { color: var(--rgcb-2-dark); font-size: 12pt; }

a { text-decoration: none; color: var(--rgcb-1-dark); }
a:hover { color: var(--rgcb-1-bright); }

code, a[href^="mailto:"] { font-family: 'IBM Plex Mono', monospace; }
blockquote { font-style: italic; }

/* Utilities */
.bold { font-weight: bold; }
.hidden { display: none !important; }

/* Apply anchor styles to explicit .text-anchor class OR links in <main><p> that aren't buttons */
.text-anchor,
main p a:not(.onpage-button) {
    font-weight: bold;
    border-bottom: 1px dotted var(--rgcb-1-medium);
}

.text-anchor:hover,
main p a:not(.onpage-button):hover {
    background: var(--rgcb-2-dark);
    color: var(--rgcb-1-bright);
}

/* Layout Structure */
.page {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
}

#mainContent {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    max-width: 864pt;
    width: 100%;
    padding: 0 1em;
    min-width: 0;
}

/* Header - Single Flex Row Configuration */
.site-header {
    width: 100%;
    background: #fff;
    padding: 1em 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 1em;
    flex-shrink: 0;
}

.header-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* Space out logo and controls */
    flex-wrap: wrap;
    gap: 1em;
    width: 100%;
    position: relative; /* Context for absolute nav */
}

/* Controls Wrapper (Language + Menu) */
.controls-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
}

/* Logo & Title */
#logoDiv {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-right: auto; /* Push controls to the right if space permits */
}

#logoDiv a {
    display: flex;
    align-items: center;
    color: inherit;
}

#logoDiv svg {
    height: 40px;
    width: auto;
}

.site-title {
    font-size: 16pt;
    font-weight: bold;
    color: var(--rgcb-2-dark);
}

/* Navigation (Menu Button & Dropdown) */
.nav-wrapper, .lang-wrapper {
    position: relative;
}

.nav-toggle {
    display: inline-block;
    background: var(--rgcb-2-dark);
    color: var(--rgcb-1-bright);
    border: none;
    padding: 0.5em 1em;
    font-weight: bold;
    border-radius: 5pt;
    cursor: pointer;
    font-size: 12pt;
    display: inline-flex;
    align-items: center;
    gap: 1em;
}

.nav-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.nav-toggle[aria-expanded="true"] .nav-arrow {
    transform: rotate(90deg);
}

.nav-menu, .lang-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    right: 0; /* Align to right edge of button */
    left: auto;
    background: white;
    border: 2px solid var(--rgcb-2-dark);
    border-radius: 5pt;
    flex-direction: column;
    width: max-content;
    max-width: 90vw;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-top: 0;
    padding: 0; /* Reset padding */
    list-style: none; /* Reset list style */
    max-height: 24em; /* Approx 8 items */
    overflow-y: auto;
}

.lang-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-menu.visible, .lang-menu.visible {
    display: flex;
}

.nav-menu a, .lang-option {
    padding: 1em;
    border-bottom: 1px solid #eee;
    display: block;
    color: var(--rgcb-1-dark);
    font-weight: bold;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.nav-menu a:last-child, .lang-option:last-child {
    border-bottom: none;
}

.nav-menu a:hover, .lang-option:hover {
    background: var(--rgcb-2-superlight);
    color: var(--rgcb-2-dark);
}

.lang-option.active {
    background: var(--rgcb-2-superlight);
    color: var(--rgcb-2-dark);
    border-left: 4px solid var(--rgcb-2-dark);
}


/* Advertisements */
.layout-spacer-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center placeholder text */
    width: 160px;
    min-width: 160px;
    min-height: 600px; /* Restore vertical size */
    flex-shrink: 0;
    padding-top: 2em;
    font-family: sans-serif;
}

.ad-banner-top,
.ad-banner-bottom {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    margin: 0 auto 1em auto;
}

.ad-banner {
    width: 100%;
    max-width: 728px;
    min-height: 90px; /* Ensure space is reserved */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

.ad-banner-bottom {
    margin-top: 2em;
}

/* Responsive Adjustments */
@media (max-width: 900px) {
    .layout-spacer-vertical { display: none; }
    .page { flex-direction: column; }
    #mainContent { padding: 0 0.5em; margin: 0; }
    .header-inner { justify-content: flex-start; }

    /* Mobile Menu Layout: Reset full width dropdowns to align with buttons */
    .nav-menu, .lang-menu {
        border-radius: 5pt;
        border: 2px solid var(--rgcb-2-dark);
    }


}

/* Forms */
input[type=text], input[type=email], input[type=password], textarea, .wide-input {
    padding: 0.5em;
    border: 1px solid var(--rgcb-1-dark);
    width: 100%;
    max-width: 100%;
    background: var(--rgcb-2-superlight);
}

input[type=submit], button {
    background: var(--rgcb-2-superlight);
    color: var(--rgcb-1-dark);
    padding: 0.5em 1em;
    font-weight: bold;
    border: 2px solid var(--rgcb-1-dark);
    cursor: pointer;
    border-radius: 5pt;
}
input[type=submit]:hover, button:hover {
    border-color: var(--rgcb-1-bright);
}

/* Buttons in the page content */
.onpage-button {
    display: inline-block;
    padding: 1em 2em;
    background-color: var(--rgcb-2-dark);
    color: white;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.2em;
    transition: color 0.3s ease; /* Smooth transition for color change */
    border: 2pt solid white;
    margin: 0.5em;
}

.onpage-button:hover {
    /*
    color: var(--rgcb-1-dark);
    background-color: var(--rgcb-2-superlight);
    border: 2pt solid var(--rgcb-1-dark);
    */
    color: var(--rgcb-1-bright);
    border: 2pt solid var(--rgcb-1-bright);
}

.fbform fieldset {
    border: 2px solid var(--rgcb-1-dark);
    padding: 1em;
    margin-bottom: 1em;
}
.fbform legend {
    background: var(--rgcb-2-dark);
    color: var(--rgcb-1-light);
    padding: 0.5em;
    font-weight: bold;
    border-radius: 5pt;
}

/* Messages */
div.error {
    border: 2px dotted var(--rgcb-1-bright);
    background: var(--rgcb-2-dark);
    padding: 1em;
    color: var(--rgcb-1-bright);
    font-weight: bold;
}
div.success {
    border: 2px dotted var(--rgcb-2-dark);
    background: var(--rgcb-1-light);
    padding: 1em;
    color: var(--rgcb-2-dark);
    font-weight: bold;
}

/* Cookie Notice */
#cookie-notice {
    background-color: var(--rgcb-1-superdark);
    color: white;
    position: fixed; bottom: -100px; left: 0; width: 100%;
    padding: 15px; text-align: center;
    transition: bottom 0.5s; z-index: 2000;
}
#cookie-notice.show { bottom: 0; }
#cookie-notice button {
    background-color: var(--rgcb-1-superbright);
    color: var(--rgcb-2-dark);
    border: none; margin-left: 1em;
}

/* EMDR Game Styles */
body.emdr {
    display: flex; flex-direction: column;
}
body.emdr-active {
    background-color: black; height: 100vh; overflow: hidden;
}
body.hide-cursor {
    cursor: none;
}
body.emdr-active .site-header,
body.emdr-active footer,
body.emdr-active .ad-banner,
body.emdr-active .layout-spacer-vertical,
body.emdr-active #cookie-notice {
    display: none !important;
}
body.emdr-active .page {
    height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; z-index: 9999;
    margin: 0; padding: 0;
}
body.emdr-active #mainContent,
body.emdr-active #main { 
    margin: 0; width: 100%; max-width: none !important; height: 100%; 
}
body.emdr-active #session-view {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    position: relative; /* Ensure context for absolute children like rain canvas */
}

#prompt-view {
    display: flex; flex-direction: column; /* Remove align-items and justify-content from here */
    height: 100%; width: 100%;
}

div.prompt-text {
    font-size: 1.5em;
    margin-bottom: 2em;
    margin-left: 2em;
    margin-right: 2em;
    color: var(--rgcb-2-dark);
    text-align: left; /* Set text-align to left */
    font-weight: bold;
}
.prompt-text p {
    font-size: inherit; /* Make p tags use the parent's font size */
    margin: 0 0 0.75em 0; /* Override browser default p margins and set a smaller bottom margin */
}

.prompt-text p:last-child {
    margin-bottom: 0; /* The container's margin-bottom will provide the final spacing */
}
#prompt-choices {
    display: flex; gap: 1em; justify-content: center; flex-wrap: wrap; width: 100%;
}


/* Modal */
.modal {
    display: none; position: fixed; z-index: 1000; left: 0; top: 0;
    width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);
}
.modal-content {
    background-color: #fff; margin: 15% auto; padding: 20px;
    border-radius: 10px; max-width: 600px; position: relative;
}
.close-modal {
    position: absolute; top: 10px; right: 20px; font-size: 24px; cursor: pointer;
}

footer {
    text-align: center;
    padding: 0;
    font-size: 0.9em;
    color: #666;
    margin-bottom: 2em;
}

footer p {
    margin: 0;
    border: 1pt solid var(--rgcb-2-superlight);
    padding: 1em;
}
.ad-hidden { display: none !important; }

/* RTL Support */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] #logoDiv {
    margin-right: 0;
    margin-left: auto;
}

[dir="rtl"] .nav-menu, 
[dir="rtl"] .lang-menu {
    right: auto;
    left: 0;
}

[dir="rtl"] .nav-menu a, 
[dir="rtl"] .lang-menu .lang-option {
    text-align: right;
}

[dir="rtl"] .lang-option.active {
    border-left: none;
    border-right: 4px solid var(--rgcb-2-dark);
}

[dir="rtl"] .close-modal {
    right: auto;
    left: 20px;
}

[dir="rtl"] div.prompt-text {
    text-align: right;
}

[dir="rtl"] #cookie-notice button {
    margin-left: 0;
    margin-right: 1em;
}

@media (max-width: 480px) {
    /* On very narrow screens, align the main language menu to the left to prevent it from going off-screen */
    .lang-menu {
        left: 0;
        right: auto; /* Override the default 'right: 0' */
    }
    
   [dir="rtl"] .lang-menu {
        left: auto;
        right: 0;
    }
}

/* Language Submenu Styling */
.lang-parent {
    position: relative; /* Needed for submenu positioning */
}

.lang-group-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    cursor: default; /* It's not a clickable item itself */
    font-weight: bold;
    border-bottom: 1px solid #eee;
}

div.lang-group-label-icon {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
    font-size: 0.8em;
    margin-left: 1em;
    margin-right: 0em;
}

[dir="rtl"] div.lang-group-label-icon {
    margin-right: 1em;
    margin-left: 0em;
}

.lang-submenu {
    display: none;
    position: absolute;
    /* Position relative to .lang-wrapper, aligning to the right of the .lang-menu */
    left: calc(100% + 2px); /* 100% of lang-menu width + border */
    top: 0; /* Align with the top of the lang-menu */
    background: white;
    border: 2px solid var(--rgcb-2-dark);
    border-radius: 5pt;
    min-width: 200px;
    max-height: 75vh;
    overflow-y: auto;
    z-index: 1001; /* Higher than the main menu */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 0;
    margin: 0; /* No margin needed with calculated left */
    list-style: none;
}


.lang-submenu .lang-option {
    border-bottom: 1px solid #eee; 
}

.lang-submenu .lang-option:last-child {
    border-bottom: none;
}

[dir="rtl"] .lang-submenu {
    left: auto;
    right: calc(100% + 2px); /* Position to the left of the main lang-menu */
}

.lang-parent.active-submenu > .lang-group-label .lang-group-label-icon,
.lang-parent:hover > .lang-group-label .lang-group-label-icon {
    transform: rotate(90deg);
}


/* Logo Synchronization Animation */
.sync-animating {
    transition: transform 0.2s ease-in-out; /* Smooth transition for the flip */
}

.sync-animating.flipped {
    transform: scaleX(-1); /* Horizontal flip */
}