/*
 * phc-cta.css — single source of truth for PHC CTA button styles.
 *
 * CONTRACT: All colour / background / border / hover / size visual decisions
 * for buttons carrying `phc-cta phc-cta--gold|outline|navy` live in THIS FILE.
 * Do NOT set `button_text_color`, `background_color`, `border_*`, `text_padding`,
 * or any `*_hover_*` property on these buttons in Elementor or in build scripts —
 * if you do, the inline style will override this file and you've created
 * the exact drift this pilot exists to prevent.
 *
 * Typography (font-family, weight, size, letter-spacing) remains an Elementor
 * widget setting — it's editorial, not structural.
 */

/* ── Shared size + structure (guarantees uniform height across all CTAs) ── */
.phc-cta .elementor-button {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 200px;
    height: 54px;
    padding: 0;
    border-radius: 0;
    border-style: solid;
    border-width: 1.5px;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.35s cubic-bezier(.22,.61,.36,1),
                border-color 0.35s cubic-bezier(.22,.61,.36,1),
                width 0.35s cubic-bezier(.22,.61,.36,1);
}

/* Ink-sweep fill — slides in from left on hover / focus-visible */
.phc-cta .elementor-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #CCC2B0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
    z-index: 0;
    pointer-events: none;
}

/* Content sits above the ink-sweep */
.phc-cta .elementor-button-content-wrapper {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

/* Animated arrow — reveals on hover / focus-visible, inherits color.
   In idle, width/margin collapse to 0 (with overflow:hidden) so the arrow
   takes ZERO layout space — text stays perfectly centered. On hover, the
   arrow expands to its natural 17px + 8px margin = the +25px the button
   itself grows by, keeping everything flush.

   Glyph is Feather "arrow-right" rendered via CSS mask, so
   background-color: currentColor keeps it in sync with the navy
   text-flip on hover. Mask-size pinned to 17px (the same width the
   prior unicode → reserved) so the +25px hover-grow stays exact. */
.phc-cta .elementor-button-content-wrapper::after {
    content: "";
    display: inline-block;
    overflow: hidden;
    width: 0;
    height: 17px;
    margin-left: 0;
    opacity: 0;
    transform: translateX(-8px);
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: left center;
            mask-position: left center;
    -webkit-mask-size: 17px 17px;
            mask-size: 17px 17px;
    transition:
        width       0.35s cubic-bezier(.22,.61,.36,1),
        margin-left 0.35s cubic-bezier(.22,.61,.36,1),
        opacity     0.35s cubic-bezier(.22,.61,.36,1) 0.05s,
        transform   0.35s cubic-bezier(.22,.61,.36,1) 0.05s;
}

/* ── Variant: solid gold (Book Consultation) ──────────────────────── */
.phc-cta.phc-cta--gold .elementor-button {
    background-color: #9B8764;
    border-color: #9B8764;
}

/* ── Variant: outline gold (Partner With Us) ──────────────────────── */
.phc-cta.phc-cta--outline .elementor-button {
    background-color: transparent;
    border-color: #9B8764;
}

/* ── Variant: solid navy (Become a Partner) ──────────────────────── */
.phc-cta.phc-cta--navy .elementor-button {
    background-color: #0E1B2B;
    border-color: #0E1B2B;
}

/* ── Section override: client-partner section — both CTAs are 240×48 ── */
.phc-client-partner .phc-cta .elementor-button {
    width: 240px;
    height: 48px;
}

/* ── Section override: program-card slot — Learn More renders as a LINK
       across every breakpoint per Figma node 2018:8061 (mobile shown,
       desktop follows the same look). No border, no padding, transparent
       background — just label + arrow. Mobile is always visible; desktop
       still slides the slot in on card-hover, but the revealed content is
       a link, not a button. The shared ink-sweep fill, +25px hover-grow,
       and bevel clip-path are all neutralised below — none of them makes
       sense on a borderless link.
       Force white text even when the link is empty: a placeholder card
       with no href renders as <a> without href, which the theme reset
       paints dark via `a:not([href]):not([tabindex]){color:inherit}`
       (0,2,1). The 4-class selector below (0,4,0) outranks it, so the
       client can clear a link in the editor without the label going dark. */
.phc-program-pair__cta-slot .phc-cta .elementor-button,
.phc-program-pair__cta-slot .phc-cta .elementor-button:hover,
.phc-program-pair__cta-slot .phc-cta .elementor-button:focus-visible {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 22px;
    justify-content: flex-start;
    /* Base button has `overflow: hidden` for the ink-sweep; on a link with no
       ink-sweep, that hidden flag clips the arrow when it translates +4px on
       hover. Let it overflow so the arrow can move freely. */
    overflow: visible;
}

/* Kill the ink-sweep fill — a link has no panel for the swipe to read against. */
.phc-program-pair__cta-slot .phc-cta .elementor-button::before {
    display: none;
}

/* Arrow is permanently visible at Figma's 24×24 size, 8px gap from label.
   Keeps the shared Feather arrow-right mask defined on
   .phc-cta .elementor-button-content-wrapper::after — only opacity / width
   / transform are flipped so it stops being a hover-reveal. */
.phc-program-pair__cta-slot .phc-cta .elementor-button-content-wrapper::after {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    opacity: 1;
    transform: none;
    -webkit-mask-size: 24px 24px;
            mask-size: 24px 24px;
    transition: transform 0.25s cubic-bezier(.22,.61,.36,1);
}

/* Subtle hover: arrow nudges 4px right and STAYS 24×24 (no underline — Figma is plain text).
   The shared `.phc-cta .elementor-button:hover ... ::after` rule further down resets the arrow
   to 17×17 / margin-left:8 / opacity:1 / transform:translateX(0) for the bordered button's
   reveal animation. That rule has 4-class specificity and beats a shorter slot rule on source
   order, so the slot's hover state has to re-assert width / height / mask-size / opacity /
   margin-left here — otherwise the arrow visibly shrinks 24→17 on hover and looks "cut". */
.phc-program-pair__cta-slot .phc-cta .elementor-button:hover .elementor-button-content-wrapper::after,
.phc-program-pair__cta-slot .phc-cta .elementor-button:focus-visible .elementor-button-content-wrapper::after {
    width: 24px;
    height: 24px;
    -webkit-mask-size: 24px 24px;
            mask-size: 24px 24px;
    opacity: 1;
    margin-left: 8px;
    transform: translateX(4px);
}

/* ── Hover (all variants) — width grows +25px (17px arrow + 8px margin), ── */
/*    ink sweep reveals #CCC2B0, text flips to navy                          */
.phc-cta .elementor-button:hover,
.phc-cta .elementor-button:focus-visible {
    color: #0E1B2B;
    border-color: #CCC2B0;
    width: 225px;
}

/* Client-partner section: idle 240×48 → hover 265×48 (same +25 rule) */
.phc-client-partner .phc-cta .elementor-button:hover,
.phc-client-partner .phc-cta .elementor-button:focus-visible {
    width: 265px;
}

.phc-cta .elementor-button:hover::before,
.phc-cta .elementor-button:focus-visible::before {
    transform: scaleX(1);
}

.phc-cta .elementor-button:hover .elementor-button-content-wrapper::after,
.phc-cta .elementor-button:focus-visible .elementor-button-content-wrapper::after {
    opacity: 1;
    transform: translateX(0);
    width: 17px;
    margin-left: 8px;
}

/* ── Modifier: no-arrow — used on header CTAs. Hides the arrow and cancels
       the +25px hover growth so the button stays the same width on hover. ── */
.phc-cta.phc-cta--no-arrow .elementor-button-content-wrapper::after {
    display: none;
}
.phc-cta.phc-cta--no-arrow .elementor-button:hover,
.phc-cta.phc-cta--no-arrow .elementor-button:focus-visible {
    width: 200px;
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .phc-cta .elementor-button,
    .phc-cta .elementor-button::before,
    .phc-cta .elementor-button-content-wrapper::after {
        transition: none;
    }
}

/* ── Native "Justified" alignment support ─────────────────────── */
/* Lets the client stretch a CTA to full width via the native Content > Alignment
   control (Justified), per breakpoint, instead of the default fixed 200px width.
   Compound .phc-cta.elementor-*-align-justified beats .phc-cta .elementor-button. */
.phc-cta.elementor-align-justified .elementor-button,
.phc-cta.elementor-align-justified .elementor-button:hover,
.phc-cta.elementor-align-justified .elementor-button:focus-visible {
    width: 100%;
}
@media (max-width: 1024px) {
    .phc-cta.elementor-tablet-align-justified .elementor-button,
    .phc-cta.elementor-tablet-align-justified .elementor-button:hover,
    .phc-cta.elementor-tablet-align-justified .elementor-button:focus-visible {
        width: 100%;
    }
}
@media (max-width: 767px) {
    .phc-cta.elementor-mobile-align-justified .elementor-button,
    .phc-cta.elementor-mobile-align-justified .elementor-button:hover,
    .phc-cta.elementor-mobile-align-justified .elementor-button:focus-visible {
        width: 100%;
    }
}