/**
 * Group Block Feature - Frontend CSS
 * 
 * Frontend styles for the Group Block feature including:
 * - Block visibility (disabled/scheduled)
 * - Link functionality
 * 
 * @package Advance_Block_Features
 * @since 1.0.0
 */

/* --------------------------------
   Block Visibility Styles
-------------------------------- */

/* 
 * Note: Disabled blocks are completely hidden on the frontend
 * This CSS is for any additional styling needed for other states
 */

/* Add custom styles for group blocks with specific attributes if needed */
.wp-block-group.has-abf-attributes {
    /* Custom styles for blocks with our attributes */
}

/* 
 * These styles will only apply if a developer uses the 
 * 'abf_disabled_block_content' filter to show disabled blocks
 * with a custom message instead of hiding them completely
 */
.wp-block-group.abf-disabled-block {
    opacity: 0.7;
    position: relative;
    border: 2px dashed #cc0000;
    padding: 20px;
    margin: 10px 0;
}

.wp-block-group.abf-disabled-block::before {
    content: attr(data-abf-disabled-message);
    display: block;
    background-color: #cc0000;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
}

/* --------------------------------
   Link Functionality Styles
-------------------------------- */

/* Style for linked groups on the frontend */
.abf-group-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Remove default link styling */
.abf-group-link:hover,
.abf-group-link:focus,
.abf-group-link:active {
    color: inherit;
    text-decoration: none;
}

/* Focus styles for accessibility */
.abf-group-link:focus {
    outline: none;
}

.abf-group-link:focus .wp-block-group.is-linked {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Ensure linked groups maintain their layout */
.wp-block-group.is-linked {
    transition: all 0.2s ease;
}

/* Add a subtle indicator for linked groups if needed */
.wp-block-group.is-linked.has-link-indicator::after {
    content: "\2197"; /* Up-right arrow character */
    display: inline-block;
    margin-left: 5px;
    font-size: 0.8em;
    vertical-align: super;
}