/*
Theme Name: Astra Child
Template: astra
Description: Motyw potomny – Paintball Radom
*/

/* 1. Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Montserrat:wght@300;400;500;700&family=Teko:wght@500;700&family=Permanent+Marker&family=Rubik+Distressed&family=Rubik+Wet+Paint&family=Fugaz+One&family=Black+Ops+One&family=New+Rocker&display=swap');

:root {
    /* Fonty do wyboru - zmień poniższy font na inny, aby przetestować:
       - 'Fugaz One', sans-serif      <- Dynamiczny, pochylony, sportowy (Sugerowany!)
       - 'Permanent Marker', cursive   <- Agresywny marker, grunge/graffiti
       - 'Rubik Wet Paint', system-ui  <- Rozpryski mokrej farby (idealne pod paintball!)
       - 'Rubik Distressed', system-ui <- Zniszczony szablon wojskowy
       - 'Black Ops One', system-ui    <- Wojskowy szablon / militarny styl
       - 'New Rocker', system-ui       <- Agresywny, ostry, rockowo-metalowy
    */
    --font-varsity: 'Black Ops One', system-ui;
}

/* 2. Czcionka Varsity dla nagłówków i .elementor-heading-title */
h1, h2, h3,
.elementor-heading-title {
    font-family: var(--font-varsity) !important;
    font-weight: 400 !important;
}

/* 3. Czcionka techniczna Orbitron dla tabel cenowych i .machine-font */
.machine-font,
.elementor-price-table,
.pricing-table,
table.pricing,
.price-table {
    font-family: 'Teko', sans-serif !important;
}

/* 4. Stylizacja przycisków .elementor-button */
.elementor-button,
.elementor-button:link,
.elementor-button:visited,
.elementor .elementor-button {
    font-family: var(--font-varsity) !important;
    font-weight: 400 !important;
    background-color: #FF0000 !important;
    border-color: #FF0000 !important;
    color: #FFFFFF !important;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.elementor-button:hover,
.elementor-button:focus,
.elementor .elementor-button:hover,
.elementor .elementor-button:focus {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #FF0000 !important;
    box-shadow:
        0 0 4px #FF0000,
        0 0 8px #FF0000 !important;
}

/* 5. Efekt zoom hover dla .klikalny-kafelek */
.klikalny-kafelek {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.klikalny-kafelek:hover {
    transform: scale(1.03) !important;
    box-shadow:
        0 0 10px rgba(255, 0, 0, 0.3),
        0 0 20px rgba(255, 0, 0, 0.15) !important;
}