/* ─── Buttons (global) ───────────────────────
   Globalne style dla core/button block. Default styling (kolor, padding,
   font, border, hover) jest w theme.json styles.elements.button — tu tylko:
   - layout grupy buttonów (gap, flex-wrap)
   - SVG ikonki wewnątrz buttonów (np. inline arrows)
   - warianty block styles: is-style-ghost, is-style-red
     (zarejestrowane w inc/blocks/styles.php)

   Ikony before-buttona (is-style-catalog, tel:) są w _button-icons.scss. */

.wp-block-buttons {
    gap: var(--wp--preset--spacing--sm);
    flex-wrap: wrap;
    align-items: center;
}

.wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    gap: var(--wp--preset--spacing--sm);
    transition-duration: .25s;
}

.wp-block-button__link svg {
    width: var(--wp--custom--size--icon--sm);
    height: var(--wp--custom--size--icon--sm);
    flex-shrink: 0;
}

/* Ghost variant — białe tło, ciemny tekst, delikatny shadow. Używane np.
   na hero jako CTA telefoniczny obok głównego accent buttona. */
.wp-block-button.is-style-ghost .wp-block-button__link {
    background: #fff;
    color: var(--wp--preset--color--primary, #0a1628);
    border: 1px solid rgba(10, 22, 40, 0.08);
    box-shadow: 0 6px 18px -8px rgba(10, 22, 40, 0.25);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
    background: #fff;
    color: var(--wp--preset--color--accent, #171234);
    border-color: rgba(10, 22, 40, 0.18);
}

/* Red variant — accent-2 (red) background. */
.wp-block-button.is-style-red .wp-block-button__link {
    background: var(--wp--preset--color--accent-2, #dc2626);
    color: var(--wp--preset--color--white, #ffffff);
    border-color: var(--wp--preset--color--accent-2, #dc2626);
}

.wp-block-button.is-style-red .wp-block-button__link:hover,
.wp-block-button.is-style-red .wp-block-button__link:focus {
    background: var(--wp--preset--color--accent, #171234);
    border-color: var(--wp--preset--color--accent, #171234);
    color: var(--wp--preset--color--white, #ffffff);
}

/* Language variants — kompaktowe buttony z flagą (mockup switcher).
   Transparent bg, ink-3 text, hover na light. is-active = primary text. */
.wp-block-button[class*="is-style-lang-"] .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--ink-3);
    border: var(--wp--custom--size--border--hairline) solid transparent;
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
    font-size: var(--wp--preset--font-size--text-small);
    font-weight: 600;
    box-shadow: none;
    line-height: 1;
}

.wp-block-button[class*="is-style-lang-"] .wp-block-button__link:hover,
.wp-block-button[class*="is-style-lang-"] .wp-block-button__link:focus {
    background: var(--wp--preset--color--light);
    color: var(--wp--preset--color--primary);
    border-color: transparent;
}

.wp-block-button.is-active[class*="is-style-lang-"] .wp-block-button__link {
    color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--light);
}

/* Flagi w switcherze — img zamiast tekstu. Kompaktowy prostokąt z lekkim
   radiusem. Flagi ZAWSZE pełna czytelność (opacity 1) — aktywny stan
   oznaczamy ramką + tłem accent-2, nie przezroczystością. */
.kordit-lang .wp-block-button__link {
    padding: 4px;
    border: 1.5px solid transparent;
    border-radius: var(--wp--custom--radius--sm, 4px);
    background: transparent;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.kordit-lang__flag {
    display: block;
    width: 22px;
    height: auto;
    border-radius: 2px;
    object-fit: cover;
}

.kordit-lang .wp-block-button__link:hover,
.kordit-lang .wp-block-button__link:focus {
    border-color: var(--wp--preset--color--light);
    transform: translateY(-1px);
}

/* Aktywny język — wyraźna czerwona ramka + delikatne tło + pełna opacity. */
.kordit-lang .wp-block-button.is-active .wp-block-button__link {
    border-color: var(--wp--preset--color--accent-2);
    background: color-mix(in srgb, var(--wp--preset--color--accent-2) 10%, transparent);
}