/*
 * WP AI-tify — Components CSS
 * Reusable components: buttons, forms, cards.
 * Not loaded on AI Canvas pages.
 */

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.wpaitify-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-family: var(--wpaitify-font);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border-radius: var(--wpaitify-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--wpaitify-transition);
    white-space: nowrap;
}
.wpaitify-btn--primary { background: var(--wpaitify-primary); color: #ffffff; border-color: var(--wpaitify-primary); }
.wpaitify-btn--primary:hover { background: var(--wpaitify-primary-dark); border-color: var(--wpaitify-primary-dark); color: #ffffff; }
.wpaitify-btn--secondary { background: transparent; color: var(--wpaitify-primary); border-color: var(--wpaitify-primary); }
.wpaitify-btn--secondary:hover { background: var(--wpaitify-primary); color: #ffffff; }
.wpaitify-btn--dark { background: var(--wpaitify-secondary); color: #ffffff; border-color: var(--wpaitify-secondary); }
.wpaitify-btn--dark:hover { background: #1a2530; border-color: #1a2530; color: #ffffff; }
.wpaitify-btn--sm { padding: 8px 18px; font-size: 0.875rem; }
.wpaitify-btn--lg { padding: 16px 40px; font-size: 1.125rem; }
.wpaitify-btn:focus-visible { outline: 2px solid var(--wpaitify-primary); outline-offset: 2px; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.wpaitify-form-group { margin-bottom: 20px; }
.wpaitify-label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.wpaitify-input,
.wpaitify-textarea,
.wpaitify-select {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--wpaitify-font);
    font-size: 1rem;
    border: 1px solid var(--wpaitify-border);
    border-radius: var(--wpaitify-radius);
    background: var(--wpaitify-surface);
    color: var(--wpaitify-text);
    transition: border-color var(--wpaitify-transition), box-shadow var(--wpaitify-transition);
}
.wpaitify-input:focus,
.wpaitify-textarea:focus,
.wpaitify-select:focus {
    outline: none;
    border-color: var(--wpaitify-primary);
    box-shadow: 0 0 0 3px rgba(24,142,245,0.15);
}
.wpaitify-textarea { resize: vertical; min-height: 120px; }

/* ── Card ────────────────────────────────────────────────────────────────── */
.wpaitify-card {
    background: var(--wpaitify-surface);
    border-radius: var(--wpaitify-radius);
    box-shadow: var(--wpaitify-shadow);
    overflow: hidden;
    transition: transform var(--wpaitify-transition), box-shadow var(--wpaitify-transition);
}
.wpaitify-card:hover { transform: translateY(-2px); box-shadow: var(--wpaitify-shadow-lg); }
.wpaitify-card__body { padding: 24px; }
.wpaitify-card__title { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; }
.wpaitify-card__text { color: var(--wpaitify-text-muted); font-size: 0.95rem; }

/* ── Badge / Tag ─────────────────────────────────────────────────────────── */
.wpaitify-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 20px;
    background: rgba(24,142,245,0.1);
    color: var(--wpaitify-primary);
}

/* ── Section heading ─────────────────────────────────────────────────────── */
.wpaitify-section-heading { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.wpaitify-section-heading .wpaitify-badge { margin-bottom: 12px; }
.wpaitify-section-heading h2 { margin-bottom: 12px; }
.wpaitify-section-heading p { color: var(--wpaitify-text-muted); }

/* ── Gutenberg block overrides ───────────────────────────────────────────── */
.entry-content .wp-block-image { margin: 24px 0; }
.entry-content .wp-block-image img { border-radius: var(--wpaitify-radius); }
.entry-content .wp-block-quote { border-left-color: var(--wpaitify-primary); }
.entry-content .wp-block-button__link {
    background: var(--wpaitify-primary);
    border-radius: var(--wpaitify-radius);
    font-family: var(--wpaitify-font);
    font-weight: 600;
}
.entry-content .wp-block-separator { border-color: var(--wpaitify-border); }
.entry-content .alignwide { max-width: calc(var(--wpaitify-max-width) + 120px); margin-left: auto; margin-right: auto; }
.entry-content .alignfull { max-width: none; width: 100%; }

/* ── WordPress core classes ──────────────────────────────────────────────── */
.alignleft { float: left; margin-right: 24px; margin-bottom: 16px; }
.alignright { float: right; margin-left: 24px; margin-bottom: 16px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--wpaitify-text-muted); text-align: center; margin-top: 8px; }