/*
Theme Name: Gawior Dmuchańce Nowy Motyw
Theme URI: https://gawior-dmuchance.pl
Author: Szymon Tadejewski
Description: Nowoczesny motyw strony głównej dla firmy wynajmującej dmuchańce.
Version: 1.0
Text Domain: gawior-dmuchance
*/

:root {
    --primary-blue: #0b3c5d;
    --light-blue: #0056b3;
    --accent-red: #e61a22;
    --accent-yellow: #ffcc00;
    --text-dark: #333333;
    --text-muted: #666666;
    --bg-light: #f9f9f9;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

body {
    color: var(--text-dark);
    background-color: #ffffff;
    overflow-x: hidden;
}

/* 1. Header & Navigation */
/* 1. Header & Navigation */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10%;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px; /* Zwiększony lekko odstęp między zamkiem a tekstem */
}

/* NOWE STYLE DLA CZERWONEGO LOGO ZAMKU */
.logo-castle-img {
    height: 45px;      /* Optymalna wysokość dopasowana do tekstu */
    width: auto;       /* Zachowanie proporcji */
    object-fit: contain;
}

.logo-text h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-blue);
    line-height: 1;
}

.logo-text span {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-red);
    letter-spacing: 1px;
}

/* Style dla menu dynamicznego WordPress */
nav ul {
    display: flex;
    list-style: none;
    gap: 25px;
}

nav ul li a {
    text-decoration: none;
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    transition: color 0.3s;
}

nav ul li.current-menu-item a, nav ul li a:hover {
    color: var(--accent-red);
}

/* Ukrycie przycisku hamburgera oraz jego otoczenia na komputerach */
#menu-toggle, 
header #menu-toggle,
header ul #menu-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: none !important;
    border: none !important;
    list-style: none !important;
    list-style-type: none !important;
}

#menu-toggle::before,
#menu-toggle::after {
    content: "" !important;
    display: none !important;
}

#menu-toggle div {
    width: 25px;
    height: 3px;
    background: var(--primary-blue);
    margin: 4px 0;
    transition: 0.3s ease-in-out;
}

/* BEZWZGLĘDNE USUNIĘCIE PUSTYCH ELEMENTÓW MENU (KROPKI Z BLADCSS.PNG) */
nav ul li:empty,
nav ul li a:empty,
header nav ul li:not(:has(a)) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

nav ul {
    list-style: none !important;
    list-style-type: none !important;
}

/* 2. Hero Section */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 550px;
    position: relative;
}

.hero-left {
    padding: 60px 10% 60px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    max-width: 600px;
}

.hero-left h2 {
    font-size: 52px;
    font-weight: 800;
    color: var(--primary-blue);
    line-height: 1.1;
    text-transform: uppercase;
}

.hero-left h2 span {
    color: var(--accent-red);
    display: block;
}

.hero-left h3 {
    font-size: 28px;
    color: var(--primary-blue);
    margin: 15px 0 30px 0;
    font-weight: 700;
}

.hero-left p {
    font-size: 16px;
    color: var(--text-dark);
    line-height: 1.6;
    margin-bottom: 35px;
    font-weight: 600;
}

.btn-call {
    background-color: var(--accent-red);
    color: white;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    width: fit-content;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(230, 26, 34, 0.4);
    transition: transform 0.3s;
}

.btn-call:hover {
    transform: scale(1.05);
}

.hero-right {
    position: relative;
    background: var(--accent-yellow);
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
    padding: 40px 40px 40px 60px;
    display: grid;
    grid-template-areas: 
        "main main"
        "sub1 sub2";
    gap: 15px;
    align-content: center; /* Trzyma cały kolaż zwarty na środku */
}

/* IDEALNY KADR DLA WIELKIEJ ZJEŻDŻALNI */
.hero-right {
    position: relative;
    background: var(--accent-yellow);
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
    padding: 40px 40px 40px 60px;
    display: grid;
    grid-template-areas: 
        "main main"
        "sub1 sub2";
    gap: 15px;
    align-items: center; /* Idealnie centruje cały zestaw zdjęć w żółtym tle (góra/dół) */
}

/* IDEALNIE WYCENTROWANE ZDJĘCIA (CATCH THE CENTER) */
.img-main { 
    grid-area: main; 
    width: 100%; 
    height: 420px; 
    object-fit: cover; 
    object-position: center center; /* Pełne wyśrodkowanie kadru wielkiej zjeżdżalni */
    border-radius: 20px; 
}

.img-sub1 { 
    grid-area: sub1; 
    width: 100%; 
    height: 220px; 
    object-fit: cover; 
    object-position: center center; /* Pełne wyśrodkowanie pierwszego zamku */
    border-radius: 20px; 
}

.img-sub2 { 
    grid-area: sub2; 
    width: 100%; 
    height: 220px; 
    object-fit: cover; 
    object-position: center center; /* Pełne wyśrodkowanie drugiej zjeżdżalni */
    border-radius: 20px; 
}

/* RESPONSYWNOŚĆ DLA TELEFONÓW */
@media (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hero-right {
        clip-path: none;
        padding: 20px;
    }
    .img-main { height: 260px; object-position: center center; }
    .img-sub1, .img-sub2 { height: 160px; object-position: center center; }
}

/* SZYBKA POPRAWKA RESPONSYWNOŚCI DLA SMARTFONÓW */
@media (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    .hero-left {
        padding: 40px 20px;
        max-width: 100%;
        text-align: center;
    }
    
    .btn-call {
        margin: 0 auto;
    }

    .hero-right {
        clip-path: none; /* Usuwamy skos na telefonie, żeby zdjęcia były równe */
        padding: 20px;
        grid-template-rows: auto;
    }
    
    .img-main { height: 240px; }
    .img-sub1, .img-sub2 { height: 160px; }
}
/* 3. Features Section */
.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 60px 10%;
    background-color: #fff;
}

.feature-card { display: flex; align-items: flex-start; gap: 15px; }
.feature-card i { font-size: 32px; color: var(--light-blue); }
.feature-card h4 { font-size: 14px; font-weight: 700; color: var(--primary-blue); text-transform: uppercase; margin-bottom: 5px; }
.feature-card p { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* 4. How it works Section */
.how-it-works { background-color: var(--bg-light); padding: 60px 10%; text-align: center; }
.how-it-works h2 { font-size: 32px; color: var(--primary-blue); text-transform: uppercase; margin-bottom: 40px; position: relative; display: inline-block; }
.how-it-works h2::after { content: ''; position: absolute; bottom: -10px; left: 25%; width: 50%; height: 4px; background-color: var(--accent-yellow); border-radius: 2px; }

.steps-container { display: flex; justify-content: space-between; align-items: flex-start; position: relative; margin-bottom: 50px; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 10px; }
.step-number { position: absolute; top: -15px; left: calc(50% - 40px); background-color: var(--light-blue); color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; z-index: 2; }
.step:nth-child(2) .step-number { background-color: var(--accent-red); }
.step:nth-child(3) .step-number { background-color: var(--accent-yellow); color: var(--primary-blue); }

.step-icon-wrap { width: 80px; height: 80px; border: 2px solid #e0e0e0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: white; margin-bottom: 20px; }
.step-icon-wrap i { font-size: 28px; color: var(--primary-blue); }
.step h4 { font-size: 15px; color: var(--primary-blue); font-weight: 700; margin-bottom: 5px; }
.step p { font-size: 13px; color: var(--text-muted); }
.step:not(:last-child)::after { content: '\2192'; position: absolute; right: -10px; top: 25px; font-size: 24px; color: #ccc; }

/* Contact Sticky Bar */
.contact-bar { background-color: var(--primary-blue); border-radius: 50px; padding: 15px 30px; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 15px; max-width: 1000px; margin: 0 auto; }
.bar-btn { display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; padding: 12px 25px; border-radius: 30px; font-weight: 700; font-size: 15px; text-transform: uppercase; transition: opacity 0.3s; }
.bar-btn:hover { opacity: 0.9; }
.bar-btn.red { background-color: var(--accent-red); }
.bar-btn.blue { background-color: #0078ff; }
.bar-btn.green { background-color: #25d366; }

/* 5. Footer Quick Info */
.footer-info { display: flex; justify-content: space-between; padding: 25px 10%; background-color: #fff; border-top: 1px solid #eeeeee; font-size: 13px; font-weight: 600; color: var(--primary-blue); }
.info-item { display: flex; align-items: center; gap: 8px; }
.info-item i { color: var(--accent-red); }
/* --- STYLE DLA PODSTRON ORAZ AKTUALNOŚCI --- */
.page-header-top,
.archive-hero { 
    background: linear-gradient(135deg, var(--primary-blue, #0056b3) 0%, #003d82 100%); 
    color: white; 
    padding: 75px 10%; 
    text-align: center; 
    position: relative; 
    overflow: hidden; 
}

/* SPECJALNA WARSTWA NA KULKI */
.page-header-top::before,
.archive-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    
    /* GIGANTYCZNA ILOŚĆ KULEK (16 SZTUK - ŻÓŁTE I CZERWONE) */
    background-image: 
        /* Lewa strona */
        radial-gradient(circle, var(--accent-yellow) 20%, transparent 21%),
        radial-gradient(circle, var(--accent-red) 20%, transparent 21%),
        radial-gradient(circle, var(--accent-yellow) 20%, transparent 21%),
        radial-gradient(circle, var(--accent-red) 20%, transparent 21%),
        radial-gradient(circle, var(--accent-yellow) 20%, transparent 21%),
        radial-gradient(circle, var(--accent-red) 20%, transparent 21%),
        
        /* Prawa strona */
        radial-gradient(circle, var(--accent-red) 20%, transparent 21%),
        radial-gradient(circle, var(--accent-yellow) 20%, transparent 21%),
        radial-gradient(circle, var(--accent-red) 20%, transparent 21%),
        radial-gradient(circle, var(--accent-yellow) 20%, transparent 21%),
        radial-gradient(circle, var(--accent-red) 20%, transparent 21%),
        radial-gradient(circle, var(--accent-yellow) 20%, transparent 21%),
        
        /* Środek (góra i dół wokół tekstu) */
        radial-gradient(circle, var(--accent-yellow) 20%, transparent 21%),
        radial-gradient(circle, var(--accent-red) 20%, transparent 21%),
        radial-gradient(circle, var(--accent-yellow) 20%, transparent 21%),
        radial-gradient(circle, var(--accent-red) 20%, transparent 21%);

    /* Rozmiary (od 30px do 55px) */
    background-size: 55px 55px, 45px 45px, 35px 35px, 50px 50px, 40px 40px, 30px 30px,
                     55px 55px, 45px 45px, 35px 35px, 50px 50px, 40px 40px, 30px 30px,
                     42px 42px, 38px 38px, 48px 48px, 32px 32px;
    
    /* Pozycje kulek */
    background-position: 
        2% 15%,  5% 55%,  8% 85%,  14% 30%, 18% 70%, 25% 10%,  /* Lewo */
        98% 20%, 95% 60%, 92% 80%, 86% 40%, 82% 75%, 75% 90%, /* Prawo */
        35% 15%, 42% 85%, 60% 10%, 68% 80%;                   /* Środek */
        
    background-repeat: no-repeat;
    opacity: 0.9;
    
    /* Animacja */
    animation: megaFastFloating 2.5s ease-in-out infinite alternate;
}

/* WESOŁE KROPKI OBOK TYTUŁU */
.page-header-top h1,
.archive-hero h1 { 
    font-size: 44px !important; /* Nadpisujemy stary, sztywny rozmiar z PHP */
    font-weight: 800; 
    text-transform: uppercase; 
    margin: 0 0 10px 0 !important; 
    position: relative;
    display: inline-block;
    padding: 0 45px;
    z-index: 2; 
}

/* Kropki z lewej strony napisu */
.page-header-top h1::before,
.archive-hero h1::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    width: 20px; 
    height: 20px;
    background-color: var(--accent-red);
    border-radius: 50%;
    box-shadow: -12px 10px 0 0 var(--accent-yellow); 
    animation: fastPulsingDots 1.2s ease-in-out infinite alternate;
}

/* Kropki z prawej strony napisu */
.page-header-top h1::after,
.archive-hero h1::after {
    content: '';
    position: absolute;
    right: 5px;
    top: 50%;
    width: 22px; 
    height: 22px;
    background-color: var(--accent-yellow);
    border-radius: 50%;
    box-shadow: 12px -8px 0 0 var(--accent-red); 
    animation: fastPulsingDots 1.2s ease-in-out infinite alternate-reverse;
}

/* Opisy pod tytułami */
.page-header-top p,
.archive-hero p { 
    font-size: 16px; 
    opacity: 0.9; 
    position: relative; 
    z-index: 2; 
    margin: 0 !important;
}

/* ==========================================================================
   ANIMACJE
   ========================================================================== */
@keyframes megaFastFloating {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-20px) scale(1.02); }
}

@keyframes fastPulsingDots {
    0% { transform: translateY(-50%) scale(0.8); }
    100% { transform: translateY(-50%) scale(1.25); }
}
.cennik-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 60px 10%; background-color: var(--bg-light); }
.cennik-card { background: white; border-radius: 20px; padding: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); text-align: center; }
.cennik-img-wrap { background: #bafff0; padding: 15px; border-radius: 15px; margin-bottom: 20px; display: inline-block; width: 100%; max-width: 300px; }
.cennik-img-wrap img { width: 100%; height: 200px; object-fit: contain; }
.cennik-price { font-size: 32px; font-weight: 800; margin: 15px 0; }
.cennik-card:nth-child(1) .cennik-price { color: var(--accent-red); }
.cennik-card:nth-child(2) .cennik-price { color: var(--primary-blue); }
.cennik-card:nth-child(3) .cennik-price { color: var(--accent-red); }
.cennik-card:nth-child(4) .cennik-price { color: #25d366; }
.cennik-features { list-style: none; text-align: left; max-width: 240px; margin: 0 auto; }
.cennik-features li { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--text-dark); }
.cennik-features li i { color: #25d366; margin-right: 10px; }

.faq-container { padding: 60px 10%; background-color: #fff; display: flex; flex-direction: column; gap: 20px; }
.faq-item { display: flex; align-items: flex-start; gap: 20px; background: white; border: 2px solid #eef2f5; border-radius: 20px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.faq-icon { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; flex-shrink: 0; }
.faq-item:nth-child(1) .faq-icon, .faq-item:nth-child(6) .faq-icon { background-color: var(--accent-red); }
.faq-item:nth-child(2) .faq-icon, .faq-item:nth-child(5) .faq-icon { background-color: var(--light-blue); }
.faq-item:nth-child(3) .faq-icon { background-color: #25d366; }
.faq-item:nth-child(4) .faq-icon { background-color: var(--accent-yellow); color: var(--primary-blue); }
.faq-content h3 { font-size: 18px; color: var(--primary-blue); margin-bottom: 8px; font-weight: 700; }
.faq-content p { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

.kontakt-page-container { padding: 60px 10%; display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; background-color: var(--bg-light); }
.kontakt-info-box { background: white; border-radius: 20px; padding: 40px 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 35px; border: 1px solid #eee; }
.kontakt-info-item { display: flex; align-items: center; gap: 20px; }
.kontakt-info-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 22px; flex-shrink: 0; }
.kontakt-info-item:nth-child(1) .kontakt-info-icon { background-color: var(--accent-red); }
.kontakt-info-item:nth-child(2) .kontakt-info-icon { background-color: var(--light-blue); }
.kontakt-info-item:nth-child(3) .kontakt-info-icon { background-color: #25d366; }
.kontakt-info-text h3 { font-size: 20px; color: var(--primary-blue); font-weight: 800; }
.kontakt-info-text p { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.kontakt-form-box { background: white; border-radius: 20px; padding: 40px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid #eee; }
.kontakt-form-box h2 { color: var(--primary-blue); font-size: 26px; font-weight: 800; margin-bottom: 25px; text-align: right; }

.kontakt-form-box .grunion-field-wrap { margin-bottom: 15px; }
.kontakt-form-box label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; color: var(--text-dark); }
.kontakt-form-box input[type="text"], .kontakt-form-box input[type="email"], .kontakt-form-box input[type="tel"], .kontakt-form-box input[type="date"], .kontakt-form-box textarea { width: 100%; padding: 12px 20px; border: 1px solid #eef2f5; background-color: #f8fafc; border-radius: 12px; font-family: inherit; font-size: 14px; color: var(--text-dark); outline: none; transition: border-0.3s; }
.kontakt-form-box input:focus, .kontakt-form-box textarea:focus { border-color: var(--light-blue); }
.kontakt-form-box button[type="submit"], .kontakt-form-box .pushbutton-wide { background-color: var(--accent-red); color: white; padding: 12px 40px; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; text-transform: uppercase; display: block; margin: 20px auto 0 auto; box-shadow: 0 4px 15px rgba(230, 26, 34, 0.3); }

/* ==========================================================================
   GLOBALNE EMULACJE MEDIA QUERIES - PORZĄDKOWANIE I UNIKANIE KONFLIKTÓW
   ========================================================================== */

@media (max-width: 992px) {
    .hero { grid-template-columns: 1fr; }
    .hero-left { padding: 40px 5%; margin: 0 auto; text-align: center; }
    .btn-call { margin: 0 auto; }
    .hero-right { clip-path: none; padding: 20px 5%; }
    .features { grid-template-columns: repeat(2, 1fr); }
    .footer-info { flex-direction: column; gap: 15px; align-items: center; }
}

/* KOMPLETNY ORAZ BEZBŁĘDNY UKŁAD DLA EKRANÓW MOBILNYCH */
@media (max-width: 768px) {
    /* Wymuszenie wyświetlenia przycisku hamburgera na smartfonie */
    #menu-toggle,
    header #menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 10px !important;
        z-index: 10001 !important;
    }

    /* Blokada przed niszczącymi regułami z dawnej linii dla 576px */
    header {
        display: flex !important;
        flex-direction: row !important; 
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 20px !important;
        background: #ffffff !important;
    }

    /* Schowanie standardowego poziomego menu i zamiana w panel boczny */
    header nav {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important; 
        width: 75% !important;
        max-width: 300px !important;
        height: 100vh !important;
        background: #ffffff !important;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1) !important;
        padding: 80px 30px !important;
        transition: right 0.4s ease-in-out !important;
        z-index: 10000 !important;
        display: block !important;
    }

    /* Po kliknięciu - wysunięcie */
    header nav.toggled {
        right: 0 !important;
    }

    nav ul {
        flex-direction: column !important;
        gap: 25px !important;
        display: flex !important;
    }

    nav ul li a {
        font-size: 18px !important;
        display: block !important;
        width: 100% !important;
    }

    /* Animacja trzech kresek do znaku X */
    #menu-toggle.active div:nth-child(1) { transform: rotate(-45deg) translate(-5px, 5px); }
    #menu-toggle.active div:nth-child(2) { opacity: 0; }
    #menu-toggle.active div:nth-child(3) { transform: rotate(45deg) translate(-5px, -5px); }

    /* SEKCJA: JAK TO DZIAŁA - WYPROSTOWANIE CAŁKOWITEGO ROZJECHANIA */
    .steps-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 60px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .step {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        position: relative !important;
    }

    /* Reset i perfekcyjne wycentrowanie kolorowych numerków nad białym kołem */
    .step-number {
        position: absolute !important;
        top: -15px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
    }

    /* Idealne ustawienie strzałek pod tekstem, wskazujących w dół */
    .step:not(:last-child)::after {
        content: '\2193' !important;
        position: absolute !important;
        left: 50% !important;
        bottom: -45px !important;
        top: auto !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        font-size: 24px !important;
        color: #ccc !important;
        display: block !important;
    }

    /* Pozostałe poprawki widoków kolumnowych */
    .features { grid-template-columns: 1fr !important; }
    .hero-right { grid-template-areas: "main" "sub1" "sub2" !important; grid-template-columns: 1fr !important; }
    .hero-left h2 { font-size: 36px !important; }
    .cennik-grid, .kontakt-page-container { grid-template-columns: 1fr !important; }
    .kontakt-form-box h2 { text-align: center !important; }
}
/* Delikatne zmniejszenie zamku na telefonie, żeby zmieścił się obok tekstu i burgera */
.logo-castle-img {
    height: 35px !important;
}
/* --- POPRAWKA RESPENSYWNOŚCI DLA TELEFONÓW --- */
@media (max-width: 768px) {
    /* Zmniejszamy cały kontener nagłówka, żeby nie był za wielki */
    .page-header-top,
    .archive-hero { 
        padding: 45px 5% !important; 
    }

    /* Zmniejszamy tekst tytułu (np. Aktualności, Cennik) */
    .page-header-top h1,
    .archive-hero h1 { 
        font-size: 26px !important; /* Zmniejszone z 44px, teraz zmieści się w jednej linii */
        padding: 0 35px !important;  /* Lekko zmniejszamy odstęp na kropki */
    }

    /* Dopasowujemy wielkość kulek obok tekstu na telefonie, żeby nie zasłaniały liter */
    .page-header-top h1::before,
    .archive-hero h1::before {
        width: 14px !important;
        height: 14px !important;
        box-shadow: -8px 6px 0 0 var(--accent-yellow) !important;
    }

    .page-header-top h1::after,
    .archive-hero h1::after {
        width: 15px !important;
        height: 15px !important;
        box-shadow: 8px -5px 0 0 var(--accent-red) !important;
    }
    
    /* Subtelnie zmniejszamy też podtekst */
    .page-header-top p,
    .archive-hero p {
        font-size: 14px !important;
    }
}