/**
 * Components Common Styles
 * 
 * Global styles shared across all components including animations,
 * spacing, and common utility classes
 */
.animar {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animar.animar--active {
    opacity: 1;
    transform: translateY(0);
}

/**
 * Common component spacing
 * 
 * Default margins and spacing for component sections
 */
.site-main > section {
    /* margin-bottom: 4rem; */
}

@media (min-width: 768px) {
    .site-main > section {
        /* margin-bottom: 6rem; */
    }
}

/**
 * Global Tooltip Styles
 * 
 * Reusable tooltip system accessible throughout the site
 */
.cs-tooltip {
    position: absolute;
    background: var(--neutral-100, #100F2A);
    color: var(--neutral-1000, #FFFFFF);
    padding: 8px 12px;
    border-radius: var(--radius-small, 4px);
    font-size: 14px;
    font-family: var(--font-family-primary, 'Poppins', sans-serif);
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.4;
    white-space: pre-line;
    word-wrap: break-word;
    z-index: var(--z-tooltip, 1070);
    pointer-events: none;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    max-width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cs-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Tooltip arrow */
.cs-tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

.cs-tooltip--top::after {
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--neutral-100, #100F2A);
}

.cs-tooltip--bottom::after {
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--neutral-100, #100F2A);
}

.cs-tooltip--left::after {
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--neutral-100, #100F2A);
}

.cs-tooltip--right::after {
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--neutral-100, #100F2A);
}