/* 
    This widget attempts to use CSS variables from the existing theme!
    Fallback values are provided if they are not found.
    used variables:
    --primary, --primary-light, --dark, --dark-light, --text
    Example:
    :root {
    --primary: #6e48aa;
    --primary-light: #9c6eed;
    --dark: #1a1a2e;
    --dark-light: #393053;
    --text: #f4f4f4;
    }
*/

.corner-nav-widget {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001; /* Ensure it's above other content like modals */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Base font for the widget */
}

.corner-nav-widget .cnw-trigger {
    background-color: var(--dark-light, #393053); /* Fallback color if var is not defined */
    color: var(--text, #f4f4f4);
    border: 1px solid var(--primary, #6e48aa);
    padding: 0; /* SVG centered by flex */
    border-radius: 50%; /* Circular button */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;  /* Good touch target size */
    height: 44px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.corner-nav-widget .cnw-trigger:hover,
.corner-nav-widget .cnw-trigger:focus {
    background-color: var(--primary, #6e48aa);
    box-shadow: 0 0 10px var(--primary-light, #9c6eed);
    outline: none; /* Custom focus styling */
}

.corner-nav-widget .cnw-trigger svg {
    width: 22px; 
    height: 22px;
    fill: currentColor; /* Takes color from parent button */
}

.corner-nav-widget .cnw-menu {
    display: none; /* Hidden by default, JS toggles */
    position: absolute;
    top: calc(100% + 8px); /* Position below the trigger with a small gap */
    right: 0; /* Align to the right edge of the trigger's container */
    background-color: var(--dark, #1a1a2e);
    border: 1px solid var(--primary-light, #9c6eed);
    border-radius: 8px;
    min-width: 200px; /* Adjust as needed */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Ensures border-radius clips list items */
    
    /* Animation for appearing */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.corner-nav-widget .cnw-menu.is-open {
    display: block; /* Show the menu */
    opacity: 1;
    transform: translateY(0);
}

.corner-nav-widget .cnw-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.corner-nav-widget .cnw-menu li a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--text, #f4f4f4);
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-bottom: 1px solid var(--dark-light, #393053); /* Separator line */
    white-space: nowrap; /* Prevent text wrapping */
}

.corner-nav-widget .cnw-menu li:last-child a {
    border-bottom: none; /* No separator for the last item */
}

.corner-nav-widget .cnw-menu li a:hover,
.corner-nav-widget .cnw-menu li a:focus {
    background-color: var(--primary, #6e48aa);
    color: white; /* Ensure text is visible on primary bg */
    outline: none;
}

/* Style for the current page link */
.corner-nav-widget .cnw-menu li a.cnw-current-page {
    background-color: var(--primary-light, #9c6eed);
    color: white; 
    font-weight: bold;
}
.corner-nav-widget .cnw-menu li a.cnw-current-page:hover,
.corner-nav-widget .cnw-menu li a.cnw-current-page:focus {
    background-color: var(--primary, #6e48aa); /* Darken slightly on hover for current page */
}