/**
 * Shared components
 */

/* Buttons - Design Language primary / secondary */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--size-touch);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-button);
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: none;
    text-align: center;
    border: var(--border-width-md) solid transparent;
    cursor: pointer;
    transition: var(--transition-default);
}

.btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-glow-md);
    transform: var(--hover-lift);
}

.btn--secondary {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-text);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
    background: var(--color-primary-soft);
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    box-shadow: var(--shadow-glow-md);
    transform: var(--hover-lift);
}

/* Outline CTA - aligned to secondary button language */
.blog-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-touch);
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-5);
    background: transparent;
    border: var(--border-width-md) solid var(--color-primary);
    border-radius: var(--radius-button);
    color: var(--color-text);
    font-family: var(--font-family-body);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: none;
    transition: var(--transition-default);
}

.blog-link:hover,
.blog-link:focus-visible {
    background: var(--color-primary-soft);
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    box-shadow: var(--shadow-glow-md);
    transform: var(--hover-lift);
}

/* Social links (legacy shared pattern) */
.social-links {
    display: flex;
    justify-content: center;
    gap: var(--space-7);
    margin: var(--space-7) 0;
    flex-wrap: wrap;
}

.social-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition-default);
}

.social-links a:hover,
.social-links a:focus-visible {
    color: var(--color-secondary);
    transform: var(--hover-lift);
}

.social-icon {
    width: var(--size-social-icon);
    height: var(--size-social-icon);
    background: var(--color-card);
    border: var(--border-width-sm) solid var(--color-border-strong);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
    color: var(--color-muted);
    transition: var(--transition-default);
}

.social-links a:hover .social-icon,
.social-links a:focus-visible .social-icon {
    color: var(--color-text);
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-md);
}

.social-icon .icon {
    width: var(--size-icon-lg);
    height: var(--size-icon-lg);
}

/* Form status messages */
.message {
    margin-top: var(--space-3);
    padding: var(--space-3);
    text-align: center;
    display: none;
    border-radius: var(--radius-input);
}

.message.success {
    background: var(--color-success-bg);
    border: var(--border-width-sm) solid var(--color-success-border);
    color: var(--color-success-text);
}

.message.error {
    background: var(--color-error-bg);
    border: var(--border-width-sm) solid var(--color-error-border);
    color: var(--color-error-text);
}

/* Back navigation (blog post) */
.back-button {
    display: inline-block;
    margin-bottom: var(--space-5);
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-md);
    letter-spacing: var(--letter-spacing-sm);
    transition: var(--transition-default);
}

.back-button:hover,
.back-button:focus-visible {
    color: var(--color-secondary);
}

.back-button::before {
    content: '← ';
}

.error-return {
    margin-top: var(--space-5);
}