/**
 * SEO Typography Classes for Filebit.pl
 * 
 * Klasy zachowujące oryginalny wygląd przy prawidłowej hierarchii SEO
 * Data utworzenia: 2025-01-27
 * 
 * Używaj tych klas aby zachować identyczny wygląd przy zmianie tagów HTML
 * np. <h3> na <h1 class="h3-global-style">
 */

/* =================================================================
   GŁÓWNE STYLE NAGŁÓWKÓW - Najczęściej używane
   ================================================================= */

/* H3 Global Style - domyślny duży nagłówek (35px) */
.h3-global-style {
    font-weight: 700 !important;
    font-size: 35px !important;
    line-height: 60px !important;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* H3 Home Style - nagłówki na stronie głównej (24px) */
.h3-home-style {
    font-size: 1.5rem !important;    /* ~24px */
    font-weight: 400 !important;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* H4 Global Style - standardowe podnagłówki (16px, niebieski) */
.h4-global-style {
    color: #0176af !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* H4 Home Style - duże nagłówki funkcji na home (40px, biały) */
.h4-home-style {
    color: white !important;
    font-size: 2.5rem !important;    /* ~40px */
    font-weight: 700 !important;
    text-shadow: 2px 2px black !important;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* H5 Global Style - nagłówki z dolną linią (18px) */
.h5-global-style {
    border-bottom: 2px dotted #363636 !important;
    padding: 10px 0px !important;
    color: #363636 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* =================================================================
   STYLE SPECJALNE - Dla konkretnych sekcji
   ================================================================= */

/* Małe nagłówki w niebieskich kartach (10px) */
.h3-blue-card-style {
    font-size: 10px !important;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Nagłówki w sekcji cover (30px, czarny) */
.h3-cover-style {
    font-size: 30px !important;
    color: black !important;
    font-weight: 700 !important;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Duże nagłówki na stronach informacyjnych (45px) */
.h3-info-page-style {
    font-size: 45px !important;
    font-weight: 700 !important;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Nagłówki w stopce (18px, niebieski + linia) */
.h5-footer-style {
    font-size: 18px !important;
    color: #0176af !important;
    border-bottom: 2px dotted #0176af !important;
    padding-bottom: 8px !important;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* =================================================================
   PANEL UŻYTKOWNIKA - Style dla panelu
   ================================================================= */

/* Nagłówki w panelu użytkownika (17px) */
.h3-panel-style {
    font-size: 17px !important;
    display: block !important;
    margin-bottom: 20px !important;
}

/* =================================================================
   POMOCNICZE KLASY - Dodatkowe style
   ================================================================= */

/* Resetowanie domyślnych marginesów Bootstrap dla nagłówków SEO */
h1.h3-global-style,
h1.h3-home-style,
h1.h3-info-page-style,
h2.h3-global-style,
h2.h3-home-style,
h2.h4-home-style,
h2.h5-global-style,
h3.h4-global-style,
h3.h5-global-style,
h4.h5-global-style {
    /* Zachowujemy oryginalne marginesy */
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Klasa debugowania - pokazuje wszystkie nagłówki H1-H6 */
body.debug-headings h1,
body.debug-headings h2,
body.debug-headings h3,
body.debug-headings h4,
body.debug-headings h5,
body.debug-headings h6 {
    position: relative;
    border: 2px dashed red !important;
    padding: 5px !important;
}

body.debug-headings h1::before,
body.debug-headings h2::before,
body.debug-headings h3::before,
body.debug-headings h4::before,
body.debug-headings h5::before,
body.debug-headings h6::before {
    position: absolute;
    top: -20px;
    left: 0;
    background: red;
    color: white;
    padding: 2px 5px;
    font-size: 12px;
    font-weight: bold;
}

body.debug-headings h1::before { content: "H1"; }
body.debug-headings h2::before { content: "H2"; }
body.debug-headings h3::before { content: "H3"; }
body.debug-headings h4::before { content: "H4"; }
body.debug-headings h5::before { content: "H5"; }
body.debug-headings h6::before { content: "H6"; }

/* =================================================================
   MEDIA QUERIES - Responsywność
   ================================================================= */

@media (max-width: 768px) {
    .h3-global-style {
        font-size: 28px !important;
        line-height: 40px !important;
    }
    
    .h4-home-style {
        font-size: 2rem !important;    /* ~32px na mobile */
    }
    
    .h3-info-page-style {
        font-size: 32px !important;
    }
}

@media (max-width: 480px) {
    .h3-global-style {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    
    .h4-home-style {
        font-size: 1.75rem !important;  /* ~28px na małych ekranach */
    }
    
    .h3-info-page-style {
        font-size: 28px !important;
    }
}