/* Shared button styles for the cta-banner layout (both variants). Loaded via
   the cross-layout dependency declared in castroverde_enqueue_flexible_styles()
   (functions.php). */

.cta-btn {
    border-radius: 0.125rem;
    padding: 0.75rem 2rem;
    min-height: 3rem;
    gap: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
}

/* .fixed-cta-text (style.css) sizes itself to height:1em/line-height:1.2,
   which clips descenders (g/y/p) — scoped to this component instead of
   touching the global rule shared by the site's other CTA buttons. */
.cta-btn .fixed-cta-text {
    height: 1.2em;
}

/* No color change on hover — text and icon share the same dark green on both states. */
.cta-btn-primary,
.cta-btn-primary:hover {
    background-color: var(--bs-white);
    color: var(--bs-secondary-500);
}

.cta-btn-secondary,
.cta-btn-secondary:visited,
.cta-btn-secondary:hover {
    background-color: transparent;
    border: 0.0625rem solid var(--bs-white);
    color: var(--bs-white);
}

/* .fixed-cta-text's own structure/animation is global (style.css); only the
   hover trigger is component-specific, same pattern as .cta-split-btn:hover. */
.cta-btn:hover .fixed-cta-text span {
    transform: translateY(-100%);
}

.cta-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cta-btn-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

/* Width itself is set by the layout: .cta-banner-actions switches to
   flex-direction:column and this button stretches to fill it (default
   align-items:stretch on a flex column), so no width rule is needed here —
   this helper doesn't need to know which breakpoint its container stacks at. */
@media screen and (max-width: 48em) {
    .cta-btn {
        justify-content: center;
    }
}