/**
 * File: assets/css/anchor-links.css
 * Description: Custom anchor link styles for improved user experience
 * Version: 1.12.0
 * Last Modified: 2025-06-26
 *
 * How it works:
 * - Automatically adds anchor links to h2-h6 headings in posts (h1 excluded)
 * - Anchor links are invisible by default (opacity: 0)
 * - When hovering over a heading, the anchor link appears (opacity: 1)
 * - Clicking the anchor link (#) updates the URL with the heading ID
 * - The ID is automatically generated from the heading text
 * - Example: "My Heading" becomes #my-heading
 *
 * Color Usage:
 * - Uses GeneratePress accent color (var(--accent)) which can be configured in:
 *   WordPress Admin > Appearance > Customize > Colors > Global Colors
 * - Override this color here if needed for design consistency by changing
 *   'color: var(--accent)' to a specific color like 'color: #4a89dd'
 */

/* ===========================================
 * Table of Contents:
 * ===========================================
 * 1. Scroll Behavior
 *    - Smooth scrolling for anchor links
 *
 * 2. Heading Styles
 *    - Positioning and display for headings
 *    - Scroll margin adjustments
 *
 * 3. Anchor Link Visibility
 *    - Hover effects
 *    - Transition animations
 *
 * 4. Anchor Link Appearance
 *    - Symbol styling
 *    - Color and sizing
 * ===========================================
 */

/* ===========================================
 * 1. Scroll Behavior
 * ===========================================
 */

/* Base styles */
html {
    scroll-behavior: smooth;
}

/* ===========================================
 * 2. Heading Styles
 * ===========================================
 */

/* Only apply these styles to single posts */
body.single-post article.post {
    .entry-content h2,
    .entry-content h3,
    .entry-content h4,
    .entry-content h5,
    .entry-content h6 {
        position: relative;
        scroll-margin-top: 20px;
    }
    
    .gb-headline {
        position: relative;
        scroll-margin-top: 20px;
    }

/* ===========================================
 * 3. Anchor Link Visibility
 * ===========================================
 */

    /* Anchor link visibility on hover and focus */
    .entry-content h2:hover .anchor-link,
    .entry-content h3:hover .anchor-link,
    .entry-content h4:hover .anchor-link,
    .entry-content h5:hover .anchor-link,
    .entry-content h6:hover .anchor-link,
    .gb-headline:hover .anchor-link,
    .entry-content h2:focus-within .anchor-link,
    .entry-content h3:focus-within .anchor-link,
    .entry-content h4:focus-within .anchor-link,
    .entry-content h5:focus-within .anchor-link,
    .entry-content h6:focus-within .anchor-link,
    .gb-headline:focus-within .anchor-link,
    .anchor-link:focus {
        opacity: 1;
    }

    .anchor-link {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        margin-left: 0.5rem;
        text-decoration: none;
        display: inline-block;
        vertical-align: baseline;
        
        /* Improve keyboard accessibility */
        &:focus {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-radius: 2px;
        }
        
        /* Better touch targets for mobile */
        @media (max-width: 768px) {
            min-width: 44px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    }

/* ===========================================
 * 4. Anchor Link Appearance
 * ===========================================
 */

    /* Default anchor link icon (hash) */
    .anchor-link::after,
    .anchor-link-hash::after {
        content: "#";
        font-size: 0.8em;
        color: var(--accent);
        font-weight: normal;
        line-height: 1;
    }
    
    /* Chain/link icon - GitHub style */
    .anchor-link-chain::after {
        content: "🔗";
        font-size: 0.8em;
        color: var(--accent);
        font-weight: normal;
        line-height: 1;
    }
    
    /* Copy/clipboard icon - modern style */
    .anchor-link-copy::after {
        content: "📋";
        font-size: 0.8em;
        color: var(--accent);
        font-weight: normal;
        line-height: 1;
    }
    
    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .anchor-link::after {
            color: currentColor;
            font-weight: bold;
        }
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        .anchor-link {
            transition: none;
        }
    }
    
    /* Print styles - hide anchor links */
    @media print {
        .anchor-link {
            display: none !important;
        }
    }
}