:root {
    /* Light Mode */
   /* Light Mode */
    --heading_colour: #1B4765;
    --text-color: #38454F;
    --button-text-color: #F8FCFE;
    --darkbluetext: #164562;
    --table-head-bg: #3E8DB4;
    --warmtan: #F2C288;
    --borders: #9FAEB7;

    --categories_button_bg: #3E8DB4;
    --categories_button_bg_hover: #6BB89C;
    --lesson_button_bg: #6BB89C;
    --lesson_button_bg_hover: #3E8DB4;
    --portal_button_bg: #3E8DB4;
    --portal_button_bg_hover: #6BB89C;
    --answer-btn: #3E8DB4;
    --answer-btn-selected: #6BB89C;

    --bg-color: #F6FAFC;
    --sidemenu: #EAF4F9;
    --table-odd:#6BB89C;
    --table-even: #3E8DB4;

    --phras-p: #E8F5E9;
    --phras-a: #E3F2FD;


    --interactive-section:#E1E8EC;

}

.dark-mode {
    --heading_colour: #D9ECF5;
    --text-color: #F8FCFE;
    --button-text-color: #F8FCFE;
    --darkbluetext: #D9ECF5;
    --table-head-bg: #275E81;
    --warmtan: #BB844B;
    --borders: #576977;

    --categories_button_bg: #275E81;
    --categories_button_bg_hover: #0E4A40;
    --lesson_button_bg: #0E4A40;
    --lesson_button_bg_hover: #275E81;
    --portal_button_bg: #0E4A40;
    --portal_button_bg_hover: #275E81;
    --answer-btn: #275E81;
    --answer-btn-selected: #0E4A40;

    --bg-color: #0D2636;
    --sidemenu: #164562;
    --table-odd:#0E4A40;
    --table-even: #275E81;

    --phras-p: #305737;
    --phras-a: #36536A;

    --interactive-section:#3B3B3B;

}


body {
    margin: 0;
    padding: 0;
    overflow-y: auto;
    font-family: "Gantari", sans-serif;
    font-size: 20px;
    transition: background 0.3s, color 0.3s;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    background-color: var(--bg-color);
    color: var(--text-color);
    height:100%;
}
.dark-mode body {
    color: #FFF;
}

.menu-container {
    padding: 10px;
    background:var(--bg-color);
}

.menu-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px 4; /* Adds spacing */
    gap: 15px; /* Creates space between buttons */
    z-index: 1200;
    border-bottom: 2px solid #0055aa; /* Debug */
}

/* Pages with sidebar and right sections */
body.has-right {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

body.has-right .wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    background:var(--bg-color);
}



body.has-right .main-area {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(250px, 1.2fr) 1.8fr minmax(250px, 1.2fr);
    padding: 4px 80px;
    gap: 40px;
    position: relative;
    box-sizing: border-box;
    min-height: 60vh; /* ensure min height */
}

body.has-right .left,
body.has-right .right {
    display: flex;
    flex-direction: column;
    background-color: var(--sidemenu);
    padding: 15px;
    position: relative; /* for z-index */
    width: 426px; /* enforce min width for sidebars */
    box-sizing: border-box;
    overflow-wrap: break-word;
    line-height: 1.0; /* Adjust as needed */
    border-radius:20px;
/*    box-shadow: 0px 4px 8px rgb(160, 200, 219, 0.4);*/
}
body.has-right .right {
    padding: 15px;
    margin-bottom:15px;
    margin-top:15px;
    margin-left:40px;
}
body.has-right .left {
    padding: 15px;
    margin-bottom:15px;
    margin-top:15px;
    margin-right:20px;

}

/* Background image in center column */
body.has-right .main-area::before {
    content: "";
    position: absolute;
    top: 80px;
    bottom: 80px;
    left: 90px;
    right: 90px;
    /*background-image: url('/img/logos/aviation.png');*/
/*    background-size: 100%;
    background-position: center center;
    background-repeat: none;*/
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
}

body.has-right .footer {
    position: relative;
    margin-top: 2px; /* Adjust to create enough space */
    left: 0;
    bottom: 0px;
    width: 100%;
    color: #000;
    text-align: center;
    border-top: 2px solid #0055aa; /* Debug */
    padding: 20px

}
.content {
    z-index: 1;
    padding: 15px;
    box-sizing: border-box;
    width:80%;
    background-image: url('/img/logos/aviation_logo.png');
    background-repeat: repeat-y;
    background-position: center center;
    background-size: 60% auto;
    z-index: 1;
    min-height:800px;
}

.background-gap {
    flex: 1;
    background-image: url('/img/logos/aviation.png');
    background-repeat: no-repeat;
    background-position: center center; /* Moves it up */
    background-size: 100% auto;
    box-sizing: border-box;
}


.sidebar {
    display: flex;
    flex-direction: column;
    background-color: var(--sidemenu);
    padding: 15px;
    position: relative; /* for z-index */
    width: 450px; /* enforce min width for sidebars */
    box-sizing: border-box;
    overflow-wrap: break-word;
    line-height: 1.0; /* Adjust as needed */
    border-radius:20px;
    margin-bottom:20px;
    margin-top:20px;
}
.main-area {
    display: flex;
    flex: 1;
    justify-content: space-between;
    position: relative;
    padding: 0 80px;
    margin-top: 60px;
    min-height: 60vh;
    box-sizing: border-box;
    padding-bottom: 50px; /* Matches footer height */
    background-color: var();

}
.block-content {
    width: 85%;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-color: var(--bg-color);
}

/* Tables */
table {
    width: 88%;
    border-collapse: collapse;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    font-size: 18px;
    text-align: left;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
/*    background-image: url('/img/logos/aviation_logo.png');*/
    box-sizing: border-box;
}
th, td {
    padding: 12px;
    border: 1px solid #9FAEB7;
}
th {
    background-color: var(--table-head-bg);
    color: white;
    font-weight: bold;
}
tr:nth-child(even) {
    background-color: var(--table-even);
}
tr:nth-child(odd) {
    background-color: var(--bg-color);
}


/*Lesson Step */
.lesson-step {
    margin-bottom: 20px;
    background: rgba(242, 249, 252, 0.5);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
    .lesson-step p {
    text-align: center;
    margin-bottom: 10px; /* Adds space between text and image */
}

.tabs {
    margin-bottom: 1rem;
}
.tab-button {
    background-color: var(--lesson_button_bg);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 5px;
    margin: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.tab-button.active {
    background-color: var(--lesson_button_bg);
    font-weight: bold;
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

.tab-button:hover {
    background-color: var(--lesson_button_bg_hover);
}









.accordion {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    width:88%;
}

.accordion-item {
    border-bottom: 1px solid #ddd;
}

.accordion-header {
    display: flex;

    justify-content: space-between;
    align-items: center;
    background: var(--categories_button_bg);
    padding: 8px 12px;
    cursor: pointer;
    height:20px;
    transition: background 0.3s ease;
    gap:18px;
}

.accordion-header:hover {
    background: var (--answer-btn-selected);
}

.accordion-toggle {
    font-size: 26px;
    transition: transform 0.3s ease;
        color: var(--button-text-color);
}

.accordion-header.active .accordion-toggle {
    transform: rotate(45deg);
}

.accordion-content {
    display: none;
    padding: 16px;
    background: var(--sidemenu);
    animation: fadeIn 0.3s ease-in-out;

}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}








#categories {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Makes buttons stretch to full container width */
    width: 90%; /* Optional: limits width */
    margin: 0 auto; /* Optional: centers the column */
}



/* Responsive media query */


.block-content {
    width: 85%;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.block-content p {
    text-align: left;
    line-height: 1.6;
}
.block-content h3 {
    text-align: left;
    line-height: 1.6;
}
.block-content img {
    display: block;
    margin: 0 auto;
    width:88%;
}
.block-content img.message-icon {
    flex-shrink: 0;
    width: 55px !important;
    height: 55px !important;
    margin-right: 12px;
    display: inline-block !important; /* override display: block */
    margin: 0 12px 0 0 !important;    /* overrides margin: 0 auto */
}


/*SORTABLE QUESTIONS */

.lesson-step {
    background: var(--sidemenu);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Question Block */
.question-block {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally */
    justify-content: center; /* Centers content vertically */
    text-align: center;
    min-height: 20vh; /* Adjust to control vertical centering */
}

/* Ensure sortable list is visually structured */
/* Base styles for sortable list */
.sortable {
    list-style: none;
    padding: 0;
    width: 300px; /* Maintain consistent width */
    margin: auto; /* Center horizontally */
}

/* Sortable items */
.sortable li,
.ui-sortable-helper,
.ui-sortable-handle {
    list-style: none;
    padding: 10px 15px;
    margin-bottom: 5px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: move;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Additional helper style for dragging state */
.dragging {
    cursor: grabbing !important;
    opacity: 0.95;
    z-index: 1000;
}

/* Button styles */
.check-btn {
    display: block;
    margin: 10px auto;
    padding: 8px 12px;
    border: none;
    background: #007bff;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
}

.check-btn:hover {
    background: #0056b3;
}

/* Keep result text clear */
.result {
    font-size: 18px;
    margin-top: 10px;
}

/* Correct & Incorrect Feedback */
.correct {
    color: green;
    font-weight: bold;
}

.incorrect {
    color: red;
    font-weight: bold;
}













.static-list {
    list-style: none; /* Removes default bullets */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px; /* Adds spacing between items */
}

.static-list li {
background-color:#6BB89C;

    color: white;
    padding: 4px 8px;
    line-height: 1.2; /* Smaller value reduces spacing */
    border-radius: 8px; /* Rounded corners */
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 8px; /* Space between bullet and text */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.static-list1 li {
background-color:#3E8DB4;

    color: white;
    padding: 4px 8px;
    line-height: 1.2; /* Smaller value reduces spacing */
    border-radius: 8px; /* Rounded corners */
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 8px; /* Space between bullet and text */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.reason-text {
    margin-top: 10px;
    padding: 10px;
    border-left: 4px solid var(--borders);
    background-color: var(--warmtan);
    color: var(--text-color);
    font-weight:200;
    text-align:left;
    font-style: italic;
    display: none;
    transition: all 0.3s ease;
}


/* Main content area */
#lesson-content {
    max-height: 80vh;          /* Keep it within the viewport */
    overflow-y: auto;          /* Allow internal scrolling if needed */
    padding: 20px;
    box-sizing: border-box;
    scroll-behavior: smooth;   /* Optional: smooth internal scrolling */
}

/* Prevent automatic scroll jumps */
body, html {
    scroll-behavior: auto !important; /* Disable smooth scrolling from external triggers */
    overflow-anchor: none;            /* Prevent scroll anchoring */
}

/* For conversation container if it's deep in the page */
.conversation-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 50px;
}

/* Optional: Scroll locking while dragging */
body.dragging {
    overflow: hidden;
}
.conversation-container, .interactive-section {
    scroll-behavior: auto !important; /* disable smooth scrolling */
}





.message-block {
    display: flex; /* Enables horizontal alignment */
    align-items: center; /* Centers icon vertically */
    gap: 10px; /* Adds spacing between icon and content */
}

.message-icon {
    flex-shrink: 0; /* Prevents resizing */
    width: 55px;
    height: 55px;
    margin-right: 12px;

}

.message-content {
    flex-grow: 1; /* Allows content to take up available space */
}

/* .note is in the fonts css*/




















/* General layout */
.interactive-section {
    margin: 2em 0;
    padding: 1em;
    border: 1px solid #ccc;
    background: var(--interactive-section);
    border-radius: 8px;
}

.matching-container {
    margin-bottom: 1em;
}

.options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Draggable items */
.draggable-item {
    padding: 10px 15px;
    background-color: #949494;
    border: 2px solid #bbb;
    color:#000;
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    transition: background 0.3s, transform 0.2s;
     touch-action: none;
}

.draggable-item:active {
    cursor: grabbing;
    transform: scale(1.05);
}

.draggable-item.ui-draggable-dragging {
    opacity: 0.8;
    z-index: 1000;
}

/* Drop zone */
.drop-zone {
    width: 80%;
    min-height: 50px;
    margin-bottom: 20px;
    border: 2px dashed #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px;
    color:#000;
    background-color: #f9f9f9;
}

.drop-zone:hover {
    background-color: #e8e8e8;
    border-color: #888;
}

/* Feedback and reason */
.feedback {
    font-size: 1.1em;
    margin-top: 0.5em;
}

.reason-text {
    margin-top: 1em;
    padding: 0.75em;
    background-color: #eef;
    border-left: 4px solid #88f;
    display: none;
}

/* Prevent page from scrolling on touch (especially iOS Safari) */
body,
html {
    overscroll-behavior: contain;
}

/* Prevent default scroll jump on draggable click (especially mobile) */
.draggable-item:focus {
    outline: none;
}


/* Conversation container */
.conversation-container {
    max-width: 90%;
    margin: 0 auto;
    font-family: Oswald, sans-serif;
}


/* Message bubbles */
.atc-message, .pilot-message {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    margin: 8px 0;
    font-size: 20px;
}
.atc-message {
    background-color: var(--phras-a);
}
.pilot-message {
    background-color: var(--phras-p);
}


.message-icon {
    width: 55px;
    height: 55px;
    margin-right: 12px;
}
.message-icon.atc-message {
    width: 74px;  /* different size for ATC icon */
    height: 74px;
}

.message-icon.pilot-message {
    width: 55px;  /* different size for Pilot icon */
    height: 55px;
    padding:19px;
}
/* Interactive sections */
.conversation-wrapper {
    width: 90%;
    margin: 0 auto;
    padding: 10px;
}
.no-scroll {
    position: fixed;
    top: 0;
    width: 100%;
    overflow-y: scroll; /* Keeps the scrollbar visible */
}
.example-box {
    display: table; /* Shrink to fit content */
    margin: 20px auto;
    background-color: #f9f9f9;
    align-items: center;     /* horizontal centering */
    border-left: 4px solid #0077cc;
    border-right: 4px solid #206a3f;
    padding-bottom: 16px; /* Add horizontal padding for spacing */
    padding-left:8px;
    padding-right:10px;
    font-family: "Oswald", Courier, monospace;
    white-space: pre-wrap;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    color: #222;
    max-width: 90%; /* Optional: limit size for wide content */
}





.matching-container {
    display: flex;
    flex-direction: column; /* Keeps buttons below content */
    align-items: center; /* Centers elements */
}

.quiz-content {
    display: flex;
    justify-content: space-between; /* Ensures left stays left and right stays right */
    width: 100%;
    gap: 20px; /* Maintain consistent spacing */
}

.left-column, .right-column {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.left-column .dynamic-content img,
.right-column .dynamic-content img {
    width: 128px;
    height: 64px;
}
.right-column {
gap:30px;
}

.explanation {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.explanation.show {
    display: block;
    opacity: 1;
}
.scroll-container {
    max-height: 110vh;
    overflow-y: auto;
    position: relative;
}




.fill-blank {
    width: 100%;
    max-width: 300px;
    padding: 12px 16px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 20px;
    transition: border-color 0.3s, box-shadow 0.3s;
    text-align:center;
}

.styled-input:focus {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
}

.styled-input::placeholder {
    color: #999;
}




#categories button {
    background-color: var(--categories_button_bg);
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 5px;
    margin: 5px;
    cursor: pointer;
    transition: 0.3s;
    font-size:18px;
}

#categories button:hover {
    background-color: var(--categories_button_bg_hover);
}

/* Lesson Buttons */
#lessons button {
    background-color: var(--lesson_button_bg);
    color: var(--button-text-color);
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 5px;
    cursor: pointer;
    transition: 0.3s;
    font-size:20px;
}

.portal-button {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--portal_button_bg);
    color: var(--button-text-color);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 5px;
}

.portal-button:hover {
    background-color: var(--portal_button_bg_hover);
}

#lessons button:hover {
    background-color: var(--lesson_button_bg_hover);
}


.answer-btn {
    font-size:20px;
    font-weight:600;
    padding-top:6px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:6px;
    display: block; /* Ensures vertical stacking */
    width: 60%; /* Sets button width to 50% */
    margin: 8px auto; /* Centers buttons horizontally */
    text-align: center; /* Keeps text centered */
    background-color:var(--borders);
    color:var(--button-text-color);
}

.answer-btn.selected {
    background: var (--answer-btn-selected);
    color: white;
    font-weight: bold;
}

.answer-btn.incorrect-selection {
    background-color: #ff4444;
    color: white;
    font-weight: bold;
    cursor: not-allowed;
}
.answer-btn.highlight-correct {
    background-color: var(--answer-btn-selected);
    border: 2px solid var(--borders);
    color: var(--text-color);
    font-weight: bold;
}
.check-matching-btn {
    display: block;
    margin: 10px auto;
    padding: 8px 16px;
    background-color: var(--borders);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.reset-matching-btn {
    display: block;
    margin: 10px auto;
    padding: 8px 16px;
    background-color: var(--borders);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--portal_button_bg);
    color: var(--button-text-color);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 5px;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 180px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 10px 14px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #e0e0e0;
}

.dropdown:hover .dropdown-content {
    display: block;
}