/* Define theme variables with defaults (using blue theme as default) */
:root {
    --theme-active-bg: #3498db;
    --theme-active-text: white;
    --theme-active-hover-bg: #3498db; /* Same as active in original */
    --theme-category-active-border: #2980b9;
    --theme-submenu-active-bg: #f1f8fe;
    --theme-submenu-active-text: #3498db;
    --theme-submenu-active-border: #3498db;
    --theme-mobile-submenu-active-text: white; /* Mobile uses white text on active submenu */
    --theme-mobile-project-submenu-active-bg: #f1f8fe; /* Specific for project container on mobile */
    --theme-mobile-project-submenu-active-text: #3498db;
    --theme-mobile-project-submenu-active-border: #3498db;
}

/* Green Theme Overrides */
.green-theme {
    --theme-active-bg: #089a45;
    --theme-active-hover-bg: #089a45; /* Same as active in original */
    --theme-category-active-border: #1b7942;
    --theme-submenu-active-bg: #e8f8f5;
    --theme-submenu-active-text: #2ecc71; /* Note: Green used a different text color here */
    --theme-submenu-active-border: #089a45;
    --theme-mobile-submenu-active-text: white; /* Still white text */
    --theme-mobile-project-submenu-active-bg: #e8f8f5;
    --theme-mobile-project-submenu-active-text: #089a45; /* Adjusted Green */
    --theme-mobile-project-submenu-active-border: #089a45;
}

/* --- Base Styles (mostly unchanged) --- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: auto 1fr;
    height: 100vh;
    overflow: hidden;
}

.menu-divider {
    width: 1px;
    height: 24px;
    background-color: #666;
    margin: auto 10px;
    align-self: center;
}

.top-menu {
    grid-column: 1 / 3;
    grid-row: 1;
    background-color: #2c3e50;
    display: flex;
    padding: 0;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.top-menu-items {
    display: flex;
    align-items: center;
    width: 100%;
}

/* When using the hash url like: https://accaderi.hu/software/index.html#contacts, there is an outline on the clicked menu item which is in focus applied by the browser automatically,
this css code will removes the default browser outline from the Top Menu Items */
.top-menu-items a:focus,
.top-menu-items button:focus {
    outline: none; /* Removes the default browser outline */
}

.top-menu a {
    color: white;
    padding: 15px 20px;
    text-decoration: none;
    cursor: pointer;
    font-weight: normal;
}

.top-menu a:hover {
    background-color: #34495e;
}

/* --- Generic Active/Hover States using Variables --- */

.top-menu a.active {
    background-color: var(--theme-active-bg);
    color: var(--theme-active-text); /* Assuming active top menu text is always the same color */
    font-weight: bold;
}

.top-menu a.active:hover {
    background-color: var(--theme-active-hover-bg); /* Use variable */
}

.side-menu {
    grid-column: 1;
    grid-row: 2;
    background-color: #f4f4f4;
    width: 250px;
    overflow-y: auto;
    border-right: 1px solid #ddd;
    transition: left 0.3s ease;
}

.side-menu a {
    display: block;
    color: #333;
    padding: 10px 15px;
    text-decoration: none;
    cursor: pointer;
    font-weight: normal;
}

.side-menu a:hover {
    background-color: #ddd;
}

.side-menu a.active {
    background-color: var(--theme-active-bg);
    color: var(--theme-active-text);
    font-weight: bold;
}

.side-menu.hidden {
    display: none;
}

.category-link {
    background-color: #f4f4f4;
    color: #333;
    font-weight: normal;
    padding: 12px 15px;
    border-left: 4px solid transparent;
}

.category-link.active {
    background-color: var(--theme-active-bg);
    color: var(--theme-active-text) !important; /* Keep important if necessary */
    font-weight: bold;
    border-left: 4px solid var(--theme-category-active-border);
}

.submenu {
    display: none;
    padding-left: 0;
    background: #fff;
}

.submenu.open {
    display: block;
}

.submenu a {
    padding-left: 30px;
    border-left: 4px solid transparent;
}

.submenu a.active {
    background-color: var(--theme-submenu-active-bg);
    color: var(--theme-submenu-active-text);
    font-weight: bold;
    border-left: 4px solid var(--theme-submenu-active-border);
}

.content-container {
    grid-column: 2;
    grid-row: 2;
    overflow: hidden;
    background: white;
    transition: margin-left 0.3s ease;
}

.content-container.full-width {
    margin-left: 0;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.sidebar-toggle {
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px 10px;
    margin-right: 10px;
    font-size: 18px;
    transition: color 0.3s ease;
}

.sidebar-toggle:hover:not(.disabled) {
    background-color: #34495e;
}

.sidebar-toggle.active {
    color: var(--theme-active-bg); /* Toggle active color uses main theme color */
}

.sidebar-toggle.disabled {
    color: #888;
    cursor: default;
}

.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    margin: 15px;
    cursor: pointer;
    z-index: 100;
}

.hamburger-menu span {
    width: 100%;
    height: 3px;
    background-color: white;
    transition: all 0.3s ease;
}

.hamburger-menu span.active:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-menu span.active:nth-child(2) {
    opacity: 0;
}

.hamburger-menu span.active:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

#toggle-sidebar {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.001s ease-in-out;
}

#toggle-sidebar.ready {
    opacity: 1;
    visibility: visible;
}

/* --- Media Query --- */
@media only screen and (max-width: 768px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .content-container {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        margin-left: 0;
    }

    .content-container.full-width {
        margin-left: 0;
        width: 100%;
    }

    .hamburger-menu {
        display: flex;
    }

    .menu-divider {
        width: calc(100% - 50px);
        height: 1px;
        margin: 5px 25px;
        background-color: rgba(255, 255, 255, 0.2);
    }

    .top-menu {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
    }

    .top-menu-items {
        display: none;
        position: absolute;
        top: 50px; /* Adjust based on actual top menu height */
        left: 0;
        width: 100%;
        background-color: #2c3e50;
        flex-direction: column;
        z-index: 100;
        max-height: calc(100vh - 50px); /* Adjust based on actual top menu height */
        overflow-y: auto;
        box-sizing: border-box;
    }

    .top-menu-items.active {
        display: flex;
    }

    .top-menu-items > a {
        width: 100%;
        box-sizing: border-box;
        padding: 15px 25px;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        text-decoration: none;
    }

    .top-menu-items > a:hover {
        background-color: #34495e;
        width: 100%;
    }

    /* Mobile Top Menu Active */
    .top-menu-items > a.active {
        background-color: var(--theme-active-bg);
        color: var(--theme-active-text); /* Ensure text color if needed */
        width: 100%;
    }

    .sidebar-toggle {
        display: none;
    }

    /* Styles for category/project links within the top dropdown */
    .top-menu-items .category-link,
    .top-menu-items .submenu a {
        display: block;
        text-decoration: none;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: white;
    }

    .top-menu-items .category-link {
        padding: 15px 25px;
        background-color: rgba(0,0,0,0.1);
        font-weight: bold;
        border-left: none; /* Remove side menu border style */
    }

    .top-menu-items .category-link:hover {
        background-color: #34495e;
        color: white;
    }

    /* Mobile Category Link Active */
    .top-menu-items .category-link.active {
        background-color: var(--theme-active-bg);
        color: var(--theme-active-text);
        border-left: none; /* Ensure no side border */
    }

    .top-menu-items .submenu {
        padding: 0;
        margin: 0;
        width: 100%;
        background-color: rgba(0,0,0,0.2);
        display: none;
        border-left: none; /* Remove side menu border style */
    }

    .top-menu-items .submenu.open {
        display: block;
    }

    .top-menu-items .submenu a {
        padding: 15px 35px; /* Indent submenu items */
        font-weight: normal;
        color: white; /* Changed from #ddd */
        border-left: none; /* Remove side menu border style */
    }

    .top-menu-items .submenu a:hover {
        background-color: #34495e;
        color: white;
    }

    /* Mobile Submenu Active */
    .top-menu-items .submenu a.active {
        background-color: var(--theme-active-bg); /* Mobile often uses simpler active style */
        color: var(--theme-mobile-submenu-active-text); /* Use specific variable if needed, e.g., white */
        font-weight: bold;
        border-left: none; /* Ensure no side border */
    }

    /* Container for project sub-items (Mobile) */
    #project-submenu-container {
        display: none;
        width: 100%;
        padding: 0;
        margin: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1); /* Darker border for light bg */
        background-color: #f4f4f4; /* Light gray background */
    }

    #project-submenu-container.open {
        display: block;
    }

    /* --- Styles for items INSIDE the project container (Mobile) --- */

    #project-submenu-container .category-link {
        padding: 12px 25px;
        background-color: #e9e9e9;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #ddd;
        border-left: none; /* No side border */
    }

    #project-submenu-container .category-link:hover {
        background-color: #ddd;
        color: #333;
    }

    /* Mobile Project Container Category Link Active */
    #project-submenu-container .category-link.active {
        background-color: var(--theme-active-bg);
        color: var(--theme-active-text);
        border-left: none; /* No side border */
    }

    #project-submenu-container .submenu {
        padding: 0;
        margin: 0;
        width: 100%;
        background-color: #f4f4f4;
        display: none;
        border-left: none; /* No side border */
    }

    #project-submenu-container .submenu.open {
        display: block;
    }

    #project-submenu-container .submenu a {
        padding: 12px 35px;
        font-weight: normal;
        color: #333;
        background-color: #f4f4f4;
        border-bottom: 1px solid #eee;
        border-left: none; /* Default no border */
    }

    #project-submenu-container .submenu a:hover {
        background-color: #ddd;
        color: #333;
    }

    /* Mobile Project Container Submenu Link Active */
    #project-submenu-container .submenu a.active {
        background-color: var(--theme-mobile-project-submenu-active-bg); /* Use mobile-specific project var */
        color: var(--theme-mobile-project-submenu-active-text); /* Use mobile-specific project var */
        font-weight: bold;
        /* Apply border like desktop submenu active, but adjust padding */
        border-left: 4px solid var(--theme-mobile-project-submenu-active-border); /* Use mobile-specific project var */
        padding-left: calc(35px - 4px); /* Adjust padding */
    }

    .top-menu-items > * {
        margin: 0;
        box-sizing: border-box;
    }

    /* More specific selector and stronger styling for the Projects link */
    .top-menu-items > a#projects {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative;
    }

    /* Ensure the arrow is properly aligned and sized */
    .top-menu-items > a#projects .projects-arrow-mobile {
        display: inline-block !important;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        height: 1em;
    }

    .top-menu-items > * {
        margin: 0;
        box-sizing: border-box;
    }
}

/* Style the "Back to Main" link specifically */
.back-to-main-link {
    /* display: inline-flex; (Optional, use if needed with ::before) */
    /* align-items: center; (Optional, use if needed with ::before) */
    position: relative; /* Needed if using absolute positioning on ::before */
    /* Adjust padding if removing the space from text impacts layout */
    /* padding: 15px 20px; */
}

/* Add the arrow using ::before */
.back-to-main-link::before {
    content: "←";         /* The arrow character */
    display: inline-block; /* Allows better positioning control */
    margin-right: 0.4em;   /* Space between arrow and text */

    /* --- Vertical Alignment Options (Choose ONE or combine carefully) --- */

    /* Adjust slightly if needed: */
    vertical-align: 0.1em; /* Example: Lower it slightly */

    /* Option B: Relative positioning (fine-tuning) */
    /* position: relative; */
    /* top: -1px; */ /* Adjust px or em value to shift vertically */

    /* Option C: Transform (another fine-tuning method) */
     /* transform: translateY(-1px); */

    /* --- End Alignment Options --- */
}

/* Mobile Projects Link Arrow */
.projects-arrow-mobile {
    height: 1em; /* Slightly larger for better visibility */
    width: auto;
    display: none; /* Hidden by default, JS will show it on mobile */
    flex-shrink: 0; /* Prevent arrow from shrinking */
    position: relative; 
    top: 0; 

    /* Overrides to ensure no extra styling from general img rules */
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    border: none;
    margin: 0; /* Reset margins, especially margin-bottom from general 'a img' */
    overflow: visible; /* Reset overflow from general 'a img' */
}


#content-container {
     /* Add a background color if you want to see its bounds during testing, then remove */
     /* background-color: lightcoral;  <-- TEMPORARY FOR DEBUGGING */
     position: relative; /* Or flex, grid - whatever your layout needs */
     /* Ensure it has dimensions, e.g., if it's supposed to fill space */
     flex-grow: 1; /* If in a flex container */
     width: 100%;
     /* Potentially a min-height if content can be small */
 }