/* PaperWURK Theme CSS */

/* Root variables and specific rules for the PaperWURK theme */
.paperwurk-theme {
    /* CSS Variable Overrides */
    --cmnt-toolbar-bg: #EFEBEA;
    --cmnt-toolbar-item-color: #002D5A;
    --cmnt-toolbar-item-active-color: #002D5A;
    --cmnt-toolbar-icon-size: 28px;
    --cmnt-toolbar-label-font-size: 10px;

    --cmm-bg-color: #EFEBEA;
    --cmm-text-color: #002D5A;
    --cmm-border-color: #DCD7D3;
    --cmm-width: 100%;
    --cmm-max-width: 100%;
    --cmm-box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    --cmm-header-bg: var(--cmm-bg-color);
    --cmm-header-padding: 15px 20px; /* This is for the content area of the header in mobile-menu.css */
    --cmm-close-icon-color: #002D5A;
    
    --cmm-burger-trigger-color: #002D5A; /* PaperWURK burger color */
    --cmm-burger-line-color: #002D5A;    /* PaperWURK burger line color */

    --cmm-list-item-padding: 12px 20px;
    --cmm-list-item-font-size: 16px;
    --cmm-list-item-color: #002D5A;
    --cmm-list-item-hover-bg: #E0DACE;
    --cmm-list-item-hover-color: #002D5A;
    --cmm-list-item-active-color: #0056b3; 
    --cmm-list-item-active-font-weight: bold;
    
    --cmm-submenu-opener-icon-color: #002D5A;
    --cmm-submenu-opener-icon-size: 20px;
    --cmm-submenu-open-item-bg: transparent;
    --cmm-submenu-open-item-color: var(--cmm-list-item-active-color);
    --cmm-submenu-bg: var(--cmm-bg-color);
    --cmm-submenu-item-indent: 30px;
    --cmm-submenu-item-font-size: 15px;
    --cmm-submenu-nested-item-indent: 45px;
    --cmm-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Tab Styling for PaperWURK */
    --cmm-tabs-bg: #E0DACE; /* Slightly darker beige for tab bar background */
    --cmm-tab-padding: 12px 15px;
    --cmm-tab-font-size: 14px;
    --cmm-tab-font-weight: bold; /* Bolder tab labels */
    --cmm-tab-color: var(--cmm-text-color); /* Dark blue, same as other text */
    --cmm-tab-active-color: var(--cmm-text-color); /* Active tab text also dark blue */
    --cmm-tab-active-border-color: #002D5A; /* Dark blue underline for active tab */
    --cmm-tab-active-bg: var(--cmm-bg-color); /* Main menu background for active tab selected area */

    /* Specific PaperWURK variables for custom elements */
    --paperwurk-logo-height: 30px;
    --paperwurk-demo-button-bg: #002D5A;
    --paperwurk-demo-button-color: #fff;
    --paperwurk-demo-button-padding: 8px 15px;
    --paperwurk-demo-button-radius: 20px;
    --paperwurk-demo-button-font-size: 14px;
    --paperwurk-demo-button-font-weight: bold;

    --cmm-top-level-item-font-weight: bold; 
    --cmm-top-level-item-font-size: 18px;
    --cmm-active-link-text-color-override: #2a79ff;
    --cmm-submenu-item-font-weight: normal;
    --cmm-has-submenu-padding-right: 10px;

    /* New variables for deeper submenu levels */
    --cmm-nested-submenu-bg: #F6F4F0; /* Slightly lighter than main beige, or a subtle contrast */
    --cmm-nested-submenu-item-font-size: 14px;
}

/* Specific structural/element styles for PaperWURK theme */
.paperwurk-theme .mobile-nav-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid var(--cmm-border-color);
    padding: 10px 15px; 
}

/* Ensure the default title is hidden for PaperWURK theme */
.paperwurk-theme .mobile-nav-header .nav-title {
    display: none !important; /* Made more specific or important */
}

/* The custom injected header content div */
.paperwurk-theme .paperwurk-header { 
    display: flex;
    align-items: center;
    flex-grow: 1; /* Allow it to take up available space */
    /* If .paperwurk-header itself contains logo and button that need space-between:
       justify-content: space-between; 
    */
}

.paperwurk-theme .paperwurk-logo {
    height: var(--paperwurk-logo-height);
    width: auto;
    margin-right: auto; /* Pushes demo button and X to the right */
}

.paperwurk-theme .paperwurk-demo-button {
    background-color: var(--paperwurk-demo-button-bg);
    color: var(--paperwurk-demo-button-color);
    border: none;
    padding: var(--paperwurk-demo-button-padding);
    border-radius: var(--paperwurk-demo-button-radius);
    font-size: var(--paperwurk-demo-button-font-size);
    font-weight: var(--paperwurk-demo-button-font-weight);
    cursor: pointer;
    margin-left: 15px; /* Space from logo if logo doesn't push it far enough */
    flex-shrink: 0;
}

/* The close button itself */
.paperwurk-theme .mobile-nav-header .close-mobile-nav {
    margin-left: 15px; /* Space from the demo button */
    flex-shrink: 0; 
}

/* Style for the main menu items in PaperWURK */
.paperwurk-theme .mobile-nav-content .menu-list > li > a {
    font-weight: var(--cmm-top-level-item-font-weight);
    font-size: var(--cmm-top-level-item-font-size);
}

.paperwurk-theme .mobile-nav-content .menu-list li.wd-active > a .nav-link-text {
     color: var(--cmm-active-link-text-color-override);
}

/* Adjust submenu padding/look for PaperWURK */
.paperwurk-theme .mobile-nav-content .sub-menu li a {
    padding-left: var(--cmm-submenu-item-indent);
    font-weight: var(--cmm-submenu-item-font-weight);
    font-size: var(--cmm-submenu-item-font-size);
}

.paperwurk-theme .mobile-nav-content .menu-list li.has-submenu > a {
     padding-right: var(--cmm-has-submenu-padding-right);
}

.paperwurk-theme .mobile-nav-content .submenu-opener svg {
    width: var(--cmm-submenu-opener-icon-size);
    height: var(--cmm-submenu-opener-icon-size);
}

/* Styling for nested submenu panels and their items */
.paperwurk-theme .mobile-nav-content .sub-menu .sub-menu {
    background-color: var(--cmm-nested-submenu-bg);
    /* You could also add a subtle border or inset shadow here if desired */
    /* border-top: 1px solid var(--cmm-border-color); */
}

.paperwurk-theme .mobile-nav-content .sub-menu .sub-menu li a {
    font-size: var(--cmm-nested-submenu-item-font-size);
    /* The padding-left for these is already handled by a more specific rule 
       .mobile-nav-content .sub-menu .sub-menu li a { padding-left: var(--cmm-submenu-nested-item-indent); }
       in the base mobile-menu.css, which uses its own variable. 
       We ensure that variable (--cmm-submenu-nested-item-indent) is also configurable if needed. 
       For now, we just set the font size for these deeper items. 
    */
}