/* =========================================================
   Phoenix Rising Counseling – styles.buttons.css
   All button + CTA styling lives here.
   Hierarchy:
   - Primary: booking (gradient)
   - Secondary: phone (solid dark teal)
   - Tertiary: get-started (purple outline / hybrid)
   ========================================================= */


/* ---------- 1. Core Button Base ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition:
            background-color 0.15s ease,
            color 0.15s ease,
            border-color 0.15s ease,
            box-shadow 0.15s ease,
            transform 0.08s ease,
            filter 0.15s ease;
    outline: none;
    line-height: 1.2;
}

/* Default focus style if a variant doesn't override it */
.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}


/* ---------- 2. Primary CTAs – Booking (Patrick & Aundretta) ---------- */

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: var(--color-text-on-dark);
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-accent-dark));
    color: var(--color-text-on-dark);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20);
    text-decoration: none;
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

/* Booking role hook – used for “Book / Schedule with …” */
.btn-booking {
    margin: 1.25rem 0 1.5rem;
}


/* ---------- 3. Secondary CTAs – Phone (“Call Now”) ---------- */

.btn-phone {
    background-color: var(--color-accent-muted);   /* dark teal */
    border-color: var(--color-accent-dark);
    color: var(--color-text-on-dark);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
    font-weight: 500;
}

.btn-phone:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-on-dark);
    text-decoration: none;
}

.btn-phone:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
}


/* ---------- 4. Tertiary CTAs – “Get Started Today” (Hybrid) ---------- */

/* Outline/ghost variant used as base */
.btn-ghost {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

/* Tertiary role hook – hybrid text-link + subtle pill */
.btn-get-started {
    font-size: 0.9rem;
    padding: 0.4rem 1.2rem;
    box-shadow: none;
    margin: 1.1rem 0 0.5rem;
}

.btn-ghost.btn-get-started:hover {
    background-color: rgba(193, 65, 255, 0.06); /* very light purple tint */
    border-color: var(--color-primary-dark);
    text-decoration: underline;
}

.btn-ghost.btn-get-started:focus-visible {
    background-color: rgba(193, 65, 255, 0.06);
    border-color: var(--color-accent);
}


/* ---------- 5. Size / Layout Helpers ---------- */

.btn-lg {
    padding: 0.8rem 1.8rem;
    font-size: 1rem;
}

.btn-inline {
    font-size: 0.9rem;
    padding: 0.4rem 1.1rem;
}

/* Header-specific button sizing (used in top nav) */
.btn-header {
    font-size: 0.9rem;
    padding: 0.45rem 1.3rem;
}


/* ---------- 6. Section-Level Behaviour ---------- */

/* Center primary CTAs in key sections */
.section-hero .btn-booking,
.section-getting-started .btn-booking,
.section-payment-insurance-nsa .btn-booking {
    margin-left: auto;
    margin-right: auto;
}

/* Center get-started CTAs under their micro-trust stacks */
.section-hero .btn-get-started,
.section-what-to-expect .btn-get-started,
.section-trauma .btn-get-started,
.section-family .btn-get-started {
    margin-left: auto;
    margin-right: auto;
    display: inline-flex;
}

/* Phone buttons: keep them near related copy, not full-width bars on desktop */
.section-hero .btn-phone,
.section-payment-insurance-nsa .btn-phone,
.section-contact .btn-phone {
    margin: 1.25rem 0;
}


/* ---------- 7. Responsive Behaviour ---------- */

/* On phones, booking + phone CTAs go full-width; tertiary stays content-width */
@media (max-width: 640px) {
    .btn-booking,
    .btn-phone {
        display: flex;
        width: 100%;
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- 8. Disabled / Closed State ---------- */

/* Used for "Booking closed" buttons in the booking table */
.btn-disabled {
    /* kill the gradient from .btn-primary/.btn-booking */
    background: var(--color-bg-translucent);
    background-image: none;
    border-color: #b4b4bc;

    color: #2b2b32;           /* softer dark text on grey */
    opacity: 0.95;

    cursor: not-allowed;
    pointer-events: none;

    /* keep some depth but less than active buttons */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);

    /* remove grayscale filter entirely */
    filter: none;
}

/* Kill hover/active animation on disabled buttons */
.btn-disabled:hover,
.btn-disabled:active {
    transform: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}