/* style.css */

/* General Body Styles */
body {
    text-align: center;
    background-color: #ffffcc;
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    min-height: 100vh; /* Minimum height to take full viewport height */
    position: relative; /* Needed for absolute positioning of the P&E bar */
}

a {
    text-decoration: none;
    color: black; /* Ensure link colors are visible in light mode */
}

/* =================== Logo Styles ===================== */
.logo {
    display: inline-block; /* Restrict container size to fit content */
    position: relative;
}

.logo-link {
    display: inline-block; /* Ensure the link matches the logo dimensions */
    text-decoration: none; /* Remove link styling */
}

.logo img {
    display: block; /* Prevent extra spacing below the image */
    max-width: 100%; /* Allow the image to scale responsively */
    max-width: 400px; /* Limit the maximum width to 400px */
    height: auto; /* Maintain the aspect ratio */
    margin: 0 auto; /* Center the image horizontally */
}

/* =================== White owned Logo Styles ===================== */
.white_owned {
    display: inline-block; /* Restrict container size to fit content */
    position: relative;
}

.white_owned img {
    display: block; /* Prevent extra spacing below the image */
    max-width: 100%; /* Allow the image to scale responsively */
    max-width: 400px; /* Limit the maximum width to 400px */
    height: auto; /* Maintain the aspect ratio */
    margin: 0 auto; /* Center the image horizontally */
}

/* =================== Hamburger Menu Styles ===================== */
#hamburgerMenu {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000; /* Base z-index for alignment */
}

#hamburgerIcon {
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: block; /* Ensure visibility */
    z-index: 1002; /* Higher than the dropdown */
    position: relative; /* Ensure it stacks above the menu */
}

/* =================== Dropdown Menu Styles ===================== */
/* Dropdown Menu (Default Light Mode) */
#menuDropdown {
    display: none; /* Hidden by default */
    position: absolute;
    top: 0; /* Aligns with the top of the menu icon */
    left: 0; /* Aligns with the left of the menu icon */
    width: 300px; /* Fixed width for the dropdown */
    background-color: white; /* Default light mode background */
    color: black; /* Default text color for light mode */
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    z-index: 1000;
    padding: 10px; /* Inner padding for links */
    text-align: left;
}

#menuDropdown.show {
    display: block;
}

/* Dark Mode Styles for Dropdown Menu */
body.dark-mode #menuDropdown {
    background-color: #333; /* Dark background */
    color: white; /* Light text color for dark mode */
    border: 1px solid #555; /* Darker border */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5); /* Darker shadow */
}

#menuDropdown ul {
    list-style-type: none;
    padding: 0;
    margin: 32px 0 0 0; /* Offset links to start below the icon */
}

#menuDropdown ul li {
    margin-bottom: 10px;
}

#menuDropdown ul li:last-child {
    margin-bottom: 0;
}

#menuDropdown ul li a {
    text-decoration: none;
    color: inherit; /* Inherit text color based on mode */
    font-size: 16px;
    display: block;
    padding: 5px;
    transition: background-color 0.2s ease-in-out;
}

#menuDropdown ul li a:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Light hover for both modes */
    border-radius: 3px;
}

body.dark-mode #menuDropdown ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Light hover for dark mode */
}

/* =================== Responsive Styling for Mobile ===================== */
@media only screen and (max-width: 599px) {

    .mode-selectors {
        flex-wrap: wrap; /* Allow wrapping on small screens */
        gap: 8px;        /* Add space between items if they wrap */
    }
    
    .mode-selectors a {
        font-size: 13px !important;  /* Force smaller font on mobile */
        margin: 4px !important;      /* Reduce spacing between items */
        padding: 4px 6px !important; /* Slight padding for touch */
    }

    .logo img {
        max-width: 80%; /* Adjust the size for smaller screens */
    }
    
    #menuDropdown {
        width: 75vw; /* Adjust dropdown width for mobile screens */
    }

    .search-container {
        width: 98%; /* Set the container width to 98% of the screen */
        margin: 0 auto; /* Center the container */
        padding: 0; /* Remove padding for full width effect */
        box-sizing: border-box; /* Include padding and border in width calculation */
    }

    #query {
        width: calc(100% - 80px); /* Adjust to fit the button */
        margin-right: 5px; /* Maintain small gap between input and button */
        height: 36px; /* Keep mobile-friendly height */
        font-size: 14px; /* Adjust font size for readability */
    }

    #searchButton {
        width: 75px; /* Slightly wider button */
        height: 36px; /* Match input height */
        font-size: 14px; /* Adjust font size for button text */
    }
}


/* =================== Mode Selector Styles ===================== */
.mode-selectors {
    display: flex;
    justify-content: center;
    margin-bottom: 20px; /* Add space below selectors */
}

.mode-selectors a {
    text-decoration: none;
    color: black;
    margin: 0 10px;
    font-size: 18px;
    position: relative; /* Needed for underline positioning */
    padding: 5px 0;
    transition: color 0.3s ease; /* Smooth color transition */
}

.mode-selectors a:hover {
    color: darkblue; /* Optional hover effect for better UX */
}

.mode-selectors a::after {
    content: '';
    display: block;
    height: 2px;
    background-color: transparent; /* Default: no underline */
    position: absolute;
    bottom: -2px; /* Slight gap between text and underline */
    left: 0;
    right: 0;
    transition: background-color 0.3s ease, transform 0.3s ease;
    transform: scaleX(0); /* Initially hidden */
    transform-origin: center;
}

.mode-selectors a[data-active="true"]::after {
    background-color: blue; /* Underline color */
    transform: scaleX(1); /* Visible underline */
}

body.dark-mode .mode-selectors a {
    color: white;
}

body.dark-mode .mode-selectors a:hover {
    color: lightblue; /* Optional hover effect in dark mode */
}

body.dark-mode .mode-selectors a[data-active="true"]::after {
    background-color: lightblue;
}

/* Radio Button Styling */
#videoSearchOptions {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    margin-top: 10px; /* Add spacing from mode selectors */
}

#videoSearchOptions label {
    margin-left: 5px;
    font-size: 16px; /* Adjust font size for readability */
}

body.dark-mode #videoSearchOptions {
    color: white; /* Adjust for dark mode */
}

body.dark-mode #videoSearchOptions label {
    color: lightgray; /* Softer color in dark mode */
}


/* =================== Search System Styles ===================== */
.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 80%;
    max-width: 600px;
    margin: auto;
}

#query {
    flex-grow: 1;
    height: 40px;
    font-size: 16px;
    margin-right: 10px;
}

#searchButton {
    height: 40px;
    font-size: 16px;
}



/* =================== Search Spinner Styles ===================== */
#spinnerImage {
    width: 100px;
    margin-top: 50px;
}


/* =================== Suggestions Dropdown Styles ===================== */
.suggestions-dropdown {
    background-color: white;
    color: black;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    top: 42px;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
}

.suggestions-dropdown div {
    padding: 10px;
    cursor: pointer;
}

.suggestions-dropdown div:hover {
    background-color: #f0f0f0;
}

.suggestion.highlighted {
    background-color: #e9e9e9;
}

body.dark-mode .suggestions-dropdown {
    background-color: #555;
    color: #ccc;
}


/* =================== Tyr Chat UI Styles ===================== */
#tyr-chat-container {
    margin-top: 20px;
    padding: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 10px;
    min-height: 400px; /* Ensure it’s not tiny */
    box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
}

body.dark-mode #tyr-chat-container {
    background-color: #222;
    border: 1px solid #555;
}

#tyr-chat-history {
    overflow-y: auto;
    max-height: 60vh;
    padding: 10px;
}

#tyr-user-input {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#tyr-send-button {
    padding: 10px 20px;
    margin-left: 10px;
    font-size: 16px;
    cursor: pointer;
}


.tyr-message::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 5px;
    background-color: white;
    border-radius: 50%;
    animation: blink 1s infinite;
}


#tyr-welcome-message {
    margin: 0 auto;
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
    padding: 10px;
    max-width: 400px; /* 50% of 800px container */
}

@media screen and (max-width: 600px) {
    #tyr-welcome-message {
        max-width: 80%; /* 80% width on mobile */
    }
}

body.dark-mode #tyr-welcome-message {
    color: #ccc;
}



.status-message::after {
    content: none;
    animation: none;
}

.sources-message a {
    color: #9cf;
    text-decoration: underline;
    word-break: break-word;
    overflow-wrap: anywhere;  /* ensures URLs break on any character */
    display: inline-block;     /* helps wrapping in some mobile browsers */
    max-width: 100%;           /* keeps link inside container */
}


@keyframes blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}


/* =================== Pagination Styles ===================== */
.paginationContainer {
    text-align: center;
    margin-top: 20px;
}

.paginationLink {
    margin: 0 10px;
    color: blue;
    text-decoration: none;
}

.paginationLink:hover {
    text-decoration: underline;
}

/* =================== Prinvacy Anonymous Icons ===================== */
/* Spacing between icons */
.icon-space {
    display: inline-block;
    width: 10px; /* Adjust the width to control spacing */
}

/* Light mode styles for icons */
#anon-private-icons img {
    vertical-align: middle; /* Ensures proper alignment with text */
    height: 24px; /* Set uniform height for icons */
    margin: 0; /* Reset margin */
    transition: filter 0.3s ease; /* Smooth transition for theme changes */
}

/* Dark mode styles */
body.dark-mode #anonymousIcon {
    content: url('anonymous-dark.png'); /* Use dark version of the icon */
}

body.dark-mode #privateIcon {
    content: url('private-dark.png'); /* Use dark version of the icon */
}


/* =================== Seasonal Image ===================== */
#seasonal_image {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto; /* Centers the image horizontally */
}

@media screen and (max-width: 600px) {
    #seasonal_image {
        max-width: 100%; /* Makes the image fit the entire screen width on smaller devices */
        margin: 0 auto; /* Ensures the image remains centered */
    }
}


/* =================== Pagination Styles ===================== */
.paginationContainer {
    text-align: center;
    margin-top: 20px;
}

.paginationLink {
    margin: 0 10px;
    color: blue;
    text-decoration: none;
}

.paginationLink:hover {
    text-decoration: underline;
}



/* =================== Link Colors ===================== */
.firstLink {
    color: black; /* Color for light mode */
}

.secondLink {
    color: rgb(43, 43, 255); /* Color for light mode */
}

.secondLink:visited {
    color: rgba(18, 0, 179, 0.856); /* Visited link color for light mode */
}

/* Dark Mode Styles */
body.dark-mode .firstLink {
    color: white; /* Choose a color that contrasts well with a dark background */
}

body.dark-mode .secondLink {
    color: rgb(143, 188, 255); /* Lighter blue for dark mode */
}

body.dark-mode .secondLink:visited {
    color: rgba(118, 150, 222, 0.856); /* Lighter and less saturated blue for visited links in dark mode */
}

/* =================== Support Bar Styles ===================== */
#supportBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    color: black; /* Light mode text color */
    background-color: #ffffff; /* Light mode background color */
}

body.dark-mode #supportBar {
    background-color: #000000; /* Dark mode background color */
    color: white; /* Dark mode text color */
}


/* =================== Theme Switch Styles ===================== */
.theme-switch-wrapper {
    flex: 0 0 auto; /* Does not grow, does not shrink, content-based width */
    padding-left: 20px; /* Adds some space between text and switch */
}

/* Dark Mode */
body.dark-mode {
    background-color: #333; /* Dark background for dark mode */
    color: #ccc; /* Light text color for dark mode */
}

body.dark-mode a {
    color: #fff;
}


/* =================== Privacy and Ethics Link ===================== */
#privacyEthicsLink {
    display: flex;
    justify-content: center; /* Centers the text horizontally */
    align-items: center; /* Centers the text vertically */
    padding: 10px 20px;
    background-color: #ffffff; /* Light mode background */
    color: black; /* Light mode text color */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
}

#privacyEthicsLink a {
    text-decoration: none;
    color: black; /* Light mode link color */
    font-size: 14px;
}

#privacyEthicsLink span {
    font-size: 12px;
    color: gray;
}

/* Dark Mode for P&E Bar */
body.dark-mode #privacyEthicsLink {
    background-color: #000000; /* Dark mode background color */
    color: white; /* Dark mode text color */
}

body.dark-mode #privacyEthicsLink a {
    color: white; /* Dark mode link color */
}

body.dark-mode #privacyEthicsLink span {
    color: #ccc; /* Lighter text color for dark mode */
}