/**
 * CTA Button — hover colours, width and alignment.
 * Loaded on the front end and in the editor (the .editor-styles-wrapper rule
 * below is also what makes WordPress copy this file into the editor canvas).
 *
 * Hover: the theme's .cta:hover / .cta-outline:hover rules use !important, and
 * a link rule carries an ID in a :not(), so the old inline hover rules lost.
 * Tripled class + :not(#pf-cta) + !important beats all of them. Only applied
 * when a hover colour has been chosen (has-hover-* flags), so untouched
 * buttons keep the theme's default hover.
 */
.editor-styles-wrapper .wp-block-pemfit-cta-button { cursor: text; }

.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button:not(#pf-cta):hover.has-hover-text   { color: var(--cta-hover-color) !important; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button:not(#pf-cta):hover.has-hover-bg     { background-color: var(--cta-hover-bg) !important; background-image: none !important; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button:not(#pf-cta):hover.has-hover-border { border-color: var(--cta-hover-border-color) !important; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.has-hover-border:hover { border-style: solid; }

/* ── Alignment (desktop → tablet → mobile) ───────────────────────────────── */
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button[class*="cta-a"] { display: flex; flex: 0 0 auto; }
:where(.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button[class*="cta-a"]) { width: fit-content; }  /* low specificity so the width rules below win */
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-a-start  { margin-left: 0;    margin-right: auto; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-a-center { margin-left: auto; margin-right: auto; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-a-end    { margin-left: auto; margin-right: 0; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-a-none   { margin-left: 0;    margin-right: 0; }
@media (max-width: 991px) {
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-at-start  { margin-left: 0;    margin-right: auto; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-at-center { margin-left: auto; margin-right: auto; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-at-end    { margin-left: auto; margin-right: 0; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-at-none   { margin-left: 0;    margin-right: 0; }
}
@media (max-width: 600px) {
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-am-start  { margin-left: 0;    margin-right: auto; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-am-center { margin-left: auto; margin-right: auto; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-am-end    { margin-left: auto; margin-right: 0; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-am-none   { margin-left: 0;    margin-right: 0; }
}

/* The theme .cta has flex:1, which stretches buttons in a row and ignores
   width — so every width/position rule sets flex explicitly. */
/* ── Width ───────────────────────────────────────────────────────────────── */
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-w-auto   { flex: 0 0 auto; width: auto; max-width: none; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-w-full   { flex: 0 0 100%; width: 100%; max-width: 100%; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-w-custom { flex: 0 0 auto; width: var(--cta-w); max-width: 100%; }
@media (max-width: 991px) {
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-wt-auto   { flex: 0 0 auto; width: auto; max-width: none; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-wt-full   { flex: 0 0 100%; width: 100%; max-width: 100%; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-wt-custom { flex: 0 0 auto; width: var(--cta-wt); max-width: 100%; }
}
@media (max-width: 600px) {
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-wm-auto   { flex: 0 0 auto; width: auto; max-width: none; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-wm-full   { flex: 0 0 100%; width: 100%; max-width: 100%; }
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.cta-wm-custom { flex: 0 0 auto; width: var(--cta-wm); max-width: 100%; }
}
.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button[class*="cta-w"], .wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button[class*="cta-wt"], .wp-block-pemfit-cta-button.wp-block-pemfit-cta-button.wp-block-pemfit-cta-button[class*="cta-wm"] { box-sizing: border-box; }