/* ============================================
   MCS Help Center Styles
   help.css
   ============================================ */

/* --------------------------------------------
   CSS Variables
   -------------------------------------------- */
:root {
    --help-font-stack   : 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --help-bg           : #f8f9fa;
    --help-content-bg   : #ffffff;
    --help-border       : #e8eaed;
    --help-border-light : #f0f1f2;
    --help-text         : #333333;
    --help-text-muted   : #555555;
    --help-text-light   : #777777;
    --help-accent       : #3388cc;
    --help-accent-hover : #155AA4;
    --help-accent-dark  : #032c60;
    --help-highlight    : #fecd67;
    --help-menu-width   : 300px;
    --help-max-width    : 1400px;
    --help-radius       : 8px;
    --help-radius-sm    : 4px;
    --help-shadow       : 0 1px 3px rgba(0, 0, 0, 0.08);
    --help-shadow-md    : 0 4px 12px rgba(0, 0, 0, 0.1);
    --help-shadow-lg    : 0 8px 24px rgba(0, 0, 0, 0.12);
    --help-transition   : 0.2s ease;
}

/* --------------------------------------------
   Base Section Layout
   -------------------------------------------- */
.help-section {
    background-color : var(--help-bg);
    flex-grow        : 1;
    padding          : 40px 20px;
}

.help-container {
    width          : 100%;
    max-width      : var(--help-max-width);
    margin         : 0 auto;
    display        : flex;
    flex-direction : row;
    gap            : 20px;
}

*, *::before, *::after {
    box-sizing : border-box;
}

/* --------------------------------------------
   Code Block Overrides
   -------------------------------------------- */

.help-container pre code.hljs {
    border-radius : 10px;
}

/* --------------------------------------------
   Sidebar Menu
   -------------------------------------------- */
.help-sidebar {
    width       : var(--help-menu-width);
    min-width   : var(--help-menu-width);
    flex-shrink : 0;
}

.help-menu-wrap {
    position      : sticky;
    top           : 20px;
    background    : var(--help-content-bg);
    border        : 1px solid var(--help-border);
    border-radius : var(--help-radius);
    box-shadow    : var(--help-shadow);
    max-height    : calc(100vh - 40px);
    overflow-y    : auto;
    overflow-x    : hidden;
}

/* Custom scrollbar for menu */
.help-menu-wrap::-webkit-scrollbar {
    width : 6px;
}

.help-menu-wrap::-webkit-scrollbar-track {
    background : transparent;
}

.help-menu-wrap::-webkit-scrollbar-thumb {
    background    : var(--help-border);
    border-radius : 3px;
}

.help-menu-wrap::-webkit-scrollbar-thumb:hover {
    background : #ccc;
}

.help-menu {
    padding : 16px 0;
}

/* Menu row base styles */
.help-menu-row {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    padding        : 5px 20px;
    cursor         : pointer;
    color          : var(--help-text);
    font-size      : 14px;
    line-height    : 1.4;
    transition     : background-color var(--help-transition), color var(--help-transition);
    border-left    : 3px solid transparent;
    user-select    : none;
}

.help-menu-row:hover {
    background-color : var(--help-bg);
    color            : var(--help-accent);
}

.help-menu-row a {
    color           : inherit;
    text-decoration : none;
    flex-grow       : 1;
}

.help-menu-row a:hover {
    text-decoration : none;
}

/* Chevron icon */
.help-menu-chevron {
    width           : 20px;
    min-width       : 20px;
    font-size       : 10px;
    color           : var(--help-text-light);
    transition      : transform var(--help-transition);
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.help-menu-chevron.expanded {
    transform : rotate(90deg);
}

.help-menu-label {
    flex-grow : 1;
}

/* Selected menu item */
.help-menu-row.selected {
    background-color  : #f0f7ff;
    border-left-color : var(--help-accent);
    color             : var(--help-accent);
    font-weight       : 500;
}

/* Submenu containers */
.help-submenu {
    display          : none;
    flex-direction   : column;
    background-color : rgba(0, 0, 0, 0.01);
}

.help-submenu.expanded {
    display : flex;
}

/* Nested level indentation */
.help-submenu .help-menu-row {
    padding-left : 40px;
}

.help-submenu .help-submenu .help-menu-row {
    padding-left : 56px;
}

.help-submenu .help-submenu .help-submenu .help-menu-row {
    padding-left : 72px;
}

.help-submenu .help-submenu .help-submenu .help-submenu .help-menu-row {
    padding-left : 88px;
}

/* Category headers (top-level items with children) */
.help-menu-row.category {
    font-weight    : 600;
    color          : var(--help-accent-dark);
    font-size      : 13px;
    text-transform : uppercase;
    letter-spacing : 0.3px;
    padding-top    : 16px;
    padding-bottom : 10px;
    margin-top     : 8px;
    border-top     : 1px solid var(--help-border-light);
}

.help-menu-row.category:first-child {
    margin-top  : 0;
    border-top  : none;
    padding-top : 10px;
}

.help-menu-row.category:hover {
    background-color : transparent;
    color            : var(--help-accent);
}

/* --------------------------------------------
   Main Content Area
   -------------------------------------------- */
.help-content {
    flex-grow : 1;
    min-width : 0;
}

.help-content-inner {
    background    : var(--help-content-bg);
    border        : 1px solid var(--help-border);
    border-radius : var(--help-radius);
    box-shadow    : var(--help-shadow);
    padding       : 48px 56px;
}

/* --------------------------------------------
   Breadcrumb Navigation
   -------------------------------------------- */
.help-breadcrumb {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    flex-wrap      : wrap;
    gap            : 8px;
    margin-bottom  : 32px;
    padding-bottom : 24px;
    border-bottom  : 1px solid var(--help-border-light);
    font-size      : 13px;
    color          : var(--help-text-muted);
}

.help-breadcrumb-item {
    display     : flex;
    align-items : center;
    gap         : 8px;
}

.help-breadcrumb-item a {
    color           : var(--help-text-muted);
    text-decoration : none;
    transition      : color var(--help-transition);
}

.help-breadcrumb-item a:hover {
    color : var(--help-accent);
}

.help-breadcrumb-separator {
    color     : var(--help-border);
    font-size : 10px;
}

.help-breadcrumb-current {
    color       : var(--help-text);
    font-weight : 500;
}

/* --------------------------------------------
   Typography
   -------------------------------------------- */
.help-content h1 {
    font-size      : 32px;
    font-weight    : 600;
    color          : var(--help-accent-dark);
    margin         : 0 0 32px 0;
    line-height    : 1.3;
    letter-spacing : -0.5px;
}

.help-content h2 {
    font-size      : 22px;
    font-weight    : 600;
    color          : var(--help-text);
    margin         : 48px 0 20px 0;
    padding-bottom : 12px;
    border-bottom  : 2px solid var(--help-highlight);
    line-height    : 1.4;
}

.help-content h2:first-of-type {
    margin-top : 0;
}

.help-content h3 {
    font-size   : 20px;
    font-weight : 600;
    color       : var(--help-text);
    margin      : 36px 0 16px 0;
    line-height : 1.4;
}

.help-content h4 {
    font-size   : 16px;
    font-weight : 600;
    color       : var(--help-text);
    margin      : 36px 0 16px 0;
    line-height : 1.4;
}

.help-content p {
    font-size   : 15px;
    line-height : 1.7;
    color       : var(--help-text);
    margin      : 0 0 16px 0;
}

.help-content ul,
.help-content ol {
    margin       : 0 0 16px 0;
    padding-left : 24px;
}

.help-content li {
    font-size     : 15px;
    line-height   : 1.7;
    color         : var(--help-text);
    margin-bottom : 8px;
}

/* --------------------------------------------
   Content Box (for grouped content sections)
   -------------------------------------------- */
.help-box {
    margin : 24px 0;
}

.help-box > p:first-child {
    margin-top : 0;
}

.help-box > p:last-child {
    margin-bottom : 0;
}

/* Note/Callout box */
.help-note {
    background-color : #fffbf0;
    border           : 1px solid #f5e6c8;
    border-left      : 4px solid var(--help-highlight);
    border-radius    : var(--help-radius-sm);
    padding          : 16px 20px;
    margin           : 24px 0;
}

.help-note p {
    margin : 0;
}

.help-note b {
    color : var(--help-accent-dark);
}

/* --------------------------------------------
   Keyword Styling
   -------------------------------------------- */
key-word {
    display       : inline;
    background    : linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    color         : var(--help-accent-dark);
    padding       : 2px 8px;
    border-radius : var(--help-radius-sm);
    font-weight   : 500;
    font-size     : 0.95em;
    border        : 1px solid #d4e5f7;
}

/* --------------------------------------------
   Tables
   -------------------------------------------- */
.help-table {
    width           : 100%;
    border-collapse : collapse;
    margin          : 24px 0;
    font-size       : 14px;
    box-shadow      : var(--help-shadow);
    border-radius   : var(--help-radius);
    overflow        : hidden;
}

.help-table thead {
    background : linear-gradient(135deg, var(--help-accent-dark) 0%, #0a4a8a 100%);
}

.help-table thead th {
    color          : #ffffff;
    font-weight    : 600;
    text-align     : left;
    padding        : 14px 20px;
    font-size      : 13px;
    text-transform : uppercase;
    letter-spacing : 0.5px;
}

.help-table tbody tr {
    border-bottom : 1px solid var(--help-border-light);
    transition    : background-color var(--help-transition);
}

.help-table tbody tr:last-child {
    border-bottom : none;
}

.help-table tbody tr:hover {
    background-color : #f8fbff;
}

.help-table tbody td {
    padding        : 14px 20px;
    color          : var(--help-text);
    vertical-align : top;
    line-height    : 1.6;
}

.help-table tbody td:first-child {
    font-weight : 600;
    color       : var(--help-accent-dark);
    white-space : nowrap;
    width       : 160px;
}

/* --------------------------------------------
   Images
   -------------------------------------------- */
.help-image {
    margin     : 28px 0;
    text-align : center;
}

.help-image img {
    max-width     : 100%;
    height        : auto;
    border        : 1px solid var(--help-border);
    border-radius : var(--help-radius);
    box-shadow    : var(--help-shadow-md);
    cursor        : pointer;
    transition    : box-shadow var(--help-transition), transform var(--help-transition);
}

.help-image img:hover {
    box-shadow : var(--help-shadow-lg);
    transform  : translateY(-2px);
}

.help-image-caption {
    margin-top : 12px;
    font-size  : 13px;
    color      : var(--help-text-light);
    font-style : italic;
}

/* --------------------------------------------
   Lightbox
   -------------------------------------------- */
.help-lightbox {
    display          : none;
    position         : fixed;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    background-color : rgba(0, 0, 0, 0.9);
    z-index          : 10000;
    cursor           : pointer;
    opacity          : 0;
    transition       : opacity 0.3s ease;
}

.help-lightbox.active {
    display         : flex;
    align-items     : center;
    justify-content : center;
    opacity         : 1;
}

.help-lightbox-content {
    position   : relative;
    max-width  : 95%;
    max-height : 95%;
}

.help-lightbox-content img {
    max-width     : 100%;
    max-height    : 90vh;
    border-radius : var(--help-radius);
    box-shadow    : var(--help-shadow-lg);
}

.help-lightbox-close {
    position    : absolute;
    top         : -40px;
    right       : 0;
    color       : #ffffff;
    font-size   : 32px;
    font-weight : 300;
    cursor      : pointer;
    opacity     : 0.8;
    transition  : opacity var(--help-transition);
    line-height : 1;
}

.help-lightbox-close:hover {
    opacity : 1;
}

.help-lightbox-caption {
    position   : absolute;
    bottom     : -40px;
    left       : 0;
    right      : 0;
    text-align : center;
    color      : #ffffff;
    font-size  : 14px;
    opacity    : 0.9;
}

/* --------------------------------------------
   Page Title Header
   -------------------------------------------- */
.help-page-header {
    background    : linear-gradient(135deg, #f8f9fa 0%, #e8eaed 100%);
    border-bottom : 1px solid var(--help-border);
    padding       : 48px 20px;
}

.help-page-header-inner {
    max-width    : var(--help-max-width);
    margin       : 0 auto;
    padding-left : 50px; /* Align with content area (menu width + gap) */
}

.help-page-title {
    color          : var(--help-accent-dark);
    font-size      : 32px;
    font-weight    : 600;
    margin         : 0 0 12px 0;
    letter-spacing : -0.5px;
}

.help-page-description {
    color       : var(--help-text-muted);
    font-size   : 16px;
    line-height : 1.6;
    margin      : 0;
    max-width   : 700px;
}

/* --------------------------------------------
   Footer (if needed within help section)
   -------------------------------------------- */
.help-footer {
    text-align : center;
    padding    : 24px;
    font-size  : 13px;
    color      : var(--help-text-light);
    border-top : 1px solid var(--help-border);
    margin-top : 40px;
}

/* --------------------------------------------
   Utility Classes
   -------------------------------------------- */
.help-mt-0 {
    margin-top : 0;
}

.help-mb-0 {
    margin-bottom : 0;
}

.help-mt-sm {
    margin-top : 16px;
}

.help-mb-sm {
    margin-bottom : 16px;
}

.help-mt-md {
    margin-top : 24px;
}

.help-mb-md {
    margin-bottom : 24px;
}

.help-mt-lg {
    margin-top : 40px;
}

.help-mb-lg {
    margin-bottom : 40px;
}


/* --------------------------------------------
   Card Grid (for overview/index pages)
   -------------------------------------------- */
.help-card-grid {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 20px;
}

.help-card {
    background    : #ffffff;
    border        : 1px solid var(--help-border);
    border-radius : var(--help-radius);
    padding       : 24px 28px;
    transition    : box-shadow var(--help-transition), transform var(--help-transition);
}

.help-card:hover {
    box-shadow : var(--help-shadow-md);
    transform  : translateY(-1px);
    cursor     : pointer;
}

.help-card-title {
    font-size   : 16px;
    font-weight : 600;
    color       : var(--help-accent-dark);
    margin      : 0 0 12px 0 !important;
}

.help-card-links {
    list-style   : none;
    margin       : 0 !important;
    padding-left : 10px !important;
}

.help-card-links li {
    padding       : 0 0 0 8px;
    position      : relative;
    margin-bottom : 0 !important;
}

.help-card-links li::before {
    content     : '›';
    position    : absolute;
    left        : -5px;
    top         : 0;
    color       : var(--help-accent);
    font-size   : 14px;
    font-weight : 600;
}

.help-card-links a {
    color           : var(--help-text);
    text-decoration : none;
    font-size       : 14px;
    transition      : color var(--help-transition);
}

.help-card-links a:hover {
    color : var(--help-accent);
}

/* --------------------------------------------
   Full-Width Container (no sidebar)
   -------------------------------------------- */
.help-container-full {
    width         : 100%;
    max-width     : var(--help-max-width);
    margin        : 0 auto;
    background    : var(--help-content-bg);
    border        : 1px solid var(--help-border);
    border-radius : var(--help-radius);
    box-shadow    : var(--help-shadow);
    padding       : 48px 56px;
}

/* Centered page header (for pages without sidebar) */
.help-page-header-centered {
    padding-left : 0;
    text-align   : center;
}

.help-page-header-centered .help-page-description {
    margin-left  : auto;
    margin-right : auto;
}

/* --------------------------------------------
   Featured Card Variant (with icon)
   -------------------------------------------- */
.help-card-featured {
    display        : flex;
    flex-direction : column;
}

.help-card-icon {
    margin-bottom : 16px;
}

.help-card-icon img {
    width  : 48px;
    height : 48px;
}

.help-card-description {
    font-size     : 14px;
    color         : var(--help-text-muted);
    margin        : 0 0 16px 0;
    line-height   : 1.5;
}

/* Larger card grid for overview pages */
.help-card-grid-lg {
    grid-template-columns : repeat(3, 1fr);
    gap                   : 24px;
}

/* --------------------------------------------
   Print Styles
   -------------------------------------------- */
@media print {
    .help-sidebar {
        display : none;
    }

    .help-content-inner {
        box-shadow : none;
        border     : none;
        padding    : 0;
    }

    .help-lightbox {
        display : none !important;
    }
}