/**
 * Nova Customizer Tooltips CSS
 * Styles for the contextual help system
 */

/* The Help Icon (?) */
.blog-over-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #d1d5db;
    /* Subtle gray */
    color: #4b5563;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    margin-left: 8px;
    cursor: help;
    border: none;
    padding: 0;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.blog-over-help-icon:hover,
.blog-over-help-icon:focus,
.blog-over-help-icon.blog-over-tooltip-active {
    background: #2271b1;
    /* WordPress Blue */
    color: #fff;
    outline: none;
}

.blog-over-help-icon-inner {
    pointer-events: none;
    /* Let clicks pass to button */
}

/* The Tooltip Popup */
.blog-over-help-tooltip {
    position: fixed;
    /* Fixed to break out of overflow:hidden */
    background: #1e1e1e;
    color: #fff;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 280px;
    z-index: 9999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.blog-over-help-tooltip.blog-over-tooltip-active {
    opacity: 1;
    visibility: visible;
}

/* Hide the original description */
.blog-over-description-hidden {
    display: none !important;
}

/* PREVENT FLICKER: Hide descriptions for Nova controls by default */
li[id^="customize-control-nova"] .customize-control-description {
    display: none;
}

/* REVEAL: Show description if it's a NOTE (marked by JS) */
li[id^="customize-control-nova"].blog-over-has-note .customize-control-description {
    display: block !important;
    /* Maintain the Note Styling */
    border-left: 3px solid #f59e0b;
    padding-left: 8px;
    margin-top: 8px;
    color: #4b5563;
}

/* REVEAL: Show description if Out of Scope (marked by JS) */
li[id^="customize-control-nova"].blog-over-out-of-scope .customize-control-description {
    display: block !important;
}

/* Style for NOTE descriptions (which stay visible) */
.customize-control-description.blog-over-has-note {
    /* Optional: Make note descriptions stand out slightly */
    border-left: 3px solid #f59e0b;
    /* Amber warning color */
    padding-left: 8px;
    margin-top: 8px;
    color: #4b5563;
}