/**
 * Apricot Editor Tools — editor iframe styles.
 *
 * Loaded only inside the TinyMCE iframe (via mce_css filter).
 * Mirrors the front-end appearance of .cta-button so editors
 * see an accurate preview while writing.
 *
 * To add a new style:
 *  1. Add the entry to BUTTON_STYLES in tinymce-plugin.js.
 *  2. Add a matching .cta-{value} rule block below.
 *
 * @package Apricot_Editor_Tools
 */

/* ── Base — shared across all button styles ──────────────────────────── */

.cta-button {
	display:         inline-block;
	padding:         0.6em 1.4em;
	font-size:       0.9375rem;       /* 15 px at 16 px root */
	font-weight:     600;
	font-family:     inherit;
	line-height:     1.4;
	text-align:      center;
	text-decoration: none;
	white-space:     nowrap;
	cursor:          pointer;
	border-radius:   4px;
	border:          2px solid transparent;
	transition:      background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── Primary ──────────────────────────────────────────────────────────── */

.cta-button.cta-primary {
	background-color: #FFBB84;   /* Apricot brand orange */
	border-color:     #FFBB84;
	color:            #000000;
}

.cta-button.cta-primary:hover,
.cta-button.cta-primary:focus {
	background-color: #f0a060;
	border-color:     #f0a060;
	color:            #333041;
}

/* ── Secondary ───────────────────────────────────────────────────────── */

.cta-button.cta-secondary {
	background-color: #333041;   /* dark navy */
	border-color:     #333041;
	color:            #ffffff;
}

.cta-button.cta-secondary:hover,
.cta-button.cta-secondary:focus {
	background-color: #333041;
	border-color:     #333041;
	color:            #ffffff;
}

/* ── Outline ─────────────────────────────────────────────────────────── */

.cta-button.cta-outline {
	background-color: transparent;
	border-color:     #FFBB84;
	color:            #FFBB84;
}

.cta-button.cta-outline:hover,
.cta-button.cta-outline:focus {
	background-color: #f0a060;
	border-color:     #f0a060;
	color:            #ffffff;
}