/**
 * Frontend styles for the Notice Count Container block
 */

/* Main Container */
.gcnb-notice-count-container {
    position: relative;
    width: 100%;
    /* No padding or margin adjustments for badge - true overlay */
}

/* Count Badge - True Overlay */
.gcnb-notice-count-badge {
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 98;
    pointer-events: none; /* Don't interfere with clicks on inner content */
    
    /* Badge styling */
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    
    /* Centering */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Visual enhancement */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 2px solid white;
    
    /* Ensure it's above all content */
    transform: translateZ(0); /* Create stacking context */
}

/* Inner Container - Normal Flow */
.gcnb-inner-container {
    width: 100%;
    min-height: 50px;
    /* No special positioning - normal document flow */
    /* Content flows naturally without badge interference */
}

/* Badge is consistent 36px across all viewports */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .gcnb-notice-count-badge {
        border: 3px solid white;
        box-shadow: 0 0 0 1px #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .gcnb-notice-count-badge {
        transition: none;
    }
}

/* Print styles - hide badge in print */
@media print {
    .gcnb-notice-count-badge {
        display: none;
    }
}

/* Ensure container works in various contexts */
.gcnb-notice-count-container * {
    box-sizing: border-box;
}

/* Support for WordPress alignment classes */
.gcnb-notice-count-container.alignwide,
.gcnb-notice-count-container.alignfull {
    width: 100%;
}

/* RTL support */
.rtl .gcnb-notice-count-badge {
    right: auto;
    left: -12px;
}