/**
 * Player sponsor details - [sps_player_sponsor]
 *
 * Layout only. Colours and type come from the theme, so the block sits in a
 * player profile without fighting it.
 */

.sps-player-sponsor {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
}

.sps-player-sponsor__kit {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.sps-player-sponsor__label {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

/* Logo and name share one anchor, so they stack as a single click target. */
.sps-player-sponsor__link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35em;
    text-decoration: none;
    color: inherit;
}

.sps-player-sponsor__link:hover .sps-player-sponsor__name,
.sps-player-sponsor__link:focus-visible .sps-player-sponsor__name {
    text-decoration: underline;
}

.sps-player-sponsor__logo {
    display: block;
    max-width: 160px;
    height: auto;
}

.sps-player-sponsor__name {
    font-weight: 600;
}

/* An unsold kit. Sits where the sponsor's name would, held back so a real
   sponsor still reads as the stronger of the two. */
.sps-player-sponsor__empty {
    font-style: italic;
    opacity: 0.75;
}

/**
 * Sponsor call-to-action - [sps_sponsor_cta]
 *
 * Reproduces the pair of Elementor containers this shortcode replaced: a dark
 * panel with a 5px radius, centred white Roboto 900 uppercase headings, and a
 * button that keeps Elementor's own styling via its classes.
 *
 * Colours reference the same globals the containers used - Secondary Black for
 * the panel, Primary for the text - with literal fallbacks so the block survives
 * outside an Elementor-built page.
 */

.sps-sponsor-cta {
    background: var(--e-global-color-6a7d6c5, #393939);
    border-radius: 5px;
    padding: 24px;
    text-align: center;
}

.sps-sponsor-cta__name,
.sps-sponsor-cta__message {
    font-family: "Roboto", Sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--e-global-color-primary, #ffffff);
    margin: 0 0 0.5em;
}

.sps-sponsor-cta__message:last-child {
    margin-bottom: 0;
}

/* Padding and letter-spacing carried over from the button widget it replaces.
   Structure and sizing still come from Elementor's own .elementor-button.

   The background has to be stated rather than inherited. The kit sets
   .elementor-button to the accent colour, but a later unscoped rule overrides it
   with #CE616100 - the same red at zero alpha - so an inherited background comes
   out invisible. Written as .sps-sponsor-cta .sps-sponsor-cta__button so it wins
   on specificity against a bare .elementor-button whatever order they load in,
   without resorting to !important.

   Hover keeps the same red deliberately: leaving it unset let Elementor's
   transparent override take the button away on hover. */
.sps-sponsor-cta .sps-sponsor-cta__button {
    font-family: "Roboto", Sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 20px;
    background-color: var(--e-global-color-accent, #CE6161);
    color: var(--e-global-color-primary, #ffffff);
}

.sps-sponsor-cta .sps-sponsor-cta__button:hover,
.sps-sponsor-cta .sps-sponsor-cta__button:focus {
    background-color: var(--e-global-color-accent, #CE6161);
    color: var(--e-global-color-primary, #ffffff);
}