/* ===========================================================================
   ZS Grójec — style odtworzone z oryginalnego szablonu Helix3 (KM-4972)
   Cel: wygląd 1:1 po migracji Joomla 3.10 → 6.1 i Helix3 → Helix Ultimate.
   Kolory wiodące z preset4 Helix3: #9c2a28 (bordo), #e61c19 (hover).
   =========================================================================== */

/* Moduły klienta używają klas Font Awesome 4 (.fa .fa-calendar itd.),
   a Joomla 6 dostarcza Font Awesome 6 — dołączamy FA4 dla zgodności.
   @import musi pozostać przed wszystkimi regułami. */
@import url("fontawesome4-compat.css");

/* ---------------------------------------------------------------------------
   Górny pasek ikon — moduł „SOCIAL TOP”
   --------------------------------------------------------------------------- */
.kk {
    padding: 0;
    margin: 0;
    text-align: right;
    float: right;
}

.kk ul {
    display: inline-block;
    float: left;
    margin-right: 6px;
    list-style: none;
    padding: 0;
}

.kk ul li {
    display: inline-block;
    margin: 0 2px;
    padding: 0;
}

.kk ul li a {
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    transition: all 0.2s;
    border-radius: 4px;
}

.kk ul li a:before {
    display: none;
}

.kk ul li a .fa {
    font-size: 24px;
    line-height: 40px;
}

.kk ul li a i {
    color: #fff;
}

.kk ul li a.planzajec  { background-color: #6699ff; }
.kk ul li a.edziennik  { background-color: #e75b33; }
.kk ul li a.facebook   { background-color: #3b5998; }
.kk ul li a.bip        { background-color: #69047c; }
.kk ul li a.edukacja   { background-color: #ffd11a; }
.kk ul li a.zastepstwa { background-color: #4500bc; }
.kk ul li a.informatyk { background-color: #2ca810; }

.kk ul li a.facebook:hover,
.kk ul li a.edukacja:hover,
.kk ul li a.informatyk:hover,
.kk ul li a.planzajec:hover,
.kk ul li a.zastepstwa:hover,
.kk ul li a.edziennik:hover,
.kk ul li a.bip:hover {
    background-color: #344454;
}

/* ---------------------------------------------------------------------------
   Nagłówki modułów — bordowy pasek z białym tekstem.
   !important, bo zminifikowany template.css Helix Ultimate ma wyższą specyficzność.
   --------------------------------------------------------------------------- */
.sp-module .sp-module-title {
    font-size: 18px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    background-color: #9c2a28 !important;
    color: #fff !important;
    padding: 8px 5px 10px 10px !important;
    margin: 0 0 12px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Helix Ultimate opakowuje moduły w kartę z ramką i cieniem — oryginał ich nie ma. */
#sp-right .sp-module,
#sp-left .sp-module {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 22px;
}

/* ---------------------------------------------------------------------------
   Drobiazgi przeniesione z oryginału
   --------------------------------------------------------------------------- */
.entry-image {
    overflow: hidden;
}

.entry-image img,
.feature-img-wrapper img {
    transition: .4s;
}

.entry-image:hover img,
.feature-img-wrapper:hover img {
    transform: scale(1.09) rotate(1deg);
}

.page-header {
    margin-top: 0 !important;
}

/* ---------------------------------------------------------------------------
   Breadcrumb — w Helix Ultimate sekcja potrafi nachodzić na pasek menu.
   --------------------------------------------------------------------------- */
#sp-breadcrumb {
    clear: both;
    position: relative;
    z-index: 1;
    padding: 10px 0;
}

#sp-breadcrumb .breadcrumb {
    margin: 0;
    background: transparent;
    padding: 0;
}

/* ---------------------------------------------------------------------------
   Nagłówek: wysokość zależna od zawartości.
   Helix Ultimate wymusza height: var(--header_height) (sztywne 90px). Menu tej
   strony ma 10 pozycji + wyszukiwarkę, więc zawija się pod logo (tak jak
   w oryginalnym Helix3) i przy sztywnej wysokości wychodziło poza nagłówek,
   nachodząc na breadcrumb.
   --------------------------------------------------------------------------- */
#sp-header {
    height: auto !important;
    min-height: var(--header_height);
}

#sp-header .row {
    row-gap: 0;
}

#sp-menu {
    height: auto !important;
}

/* ---------------------------------------------------------------------------
   Menu główne — typografia jak w oryginale (Helix3):
   wersaliki, 12px, odstęp liter, czarny tekst.
   --------------------------------------------------------------------------- */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.9px;
    color: #000;
    font-weight: 600;
    /* Węższe odstępy — przy 10 pozycjach i kontenerze 1140px domyślne
       paddingi Helix Ultimate powodowały zawinięcie „Galerii" do 2. wiersza. */
    padding-left: 9px;
    padding-right: 9px;
}

.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a {
    color: #9c2a28;
}

/* Ikony przy pozycjach menu (przeniesione z Helix3: params.icon → menu_icon_css) */
.sp-megamenu-parent > li > a > .fa,
.sp-megamenu-parent > li > a > i {
    margin-right: 5px;
}

/* Menu wyśrodkowane — w oryginale było pod logo, na całej szerokości */
#sp-menu .sp-megamenu-wrapper {
    justify-content: center;
    flex-wrap: wrap;
}

/* Górny pasek ikon — oryginał ma je w kontenerze o stałej szerokości */
#sp-top-bar {
    padding: 6px 0;
}

/* ---------------------------------------------------------------------------
   Nagłówek — układ jak w oryginale (Helix3):
   logo po lewej i hamburger po prawej w JEDNYM wierszu, menu pod spodem.
   W oryginale wynikało to z float:right na #offcanvas-toggler wewnątrz kolumny
   menu; Helix Ultimate używa flexboxa, więc odtwarzamy to jawnie.
   --------------------------------------------------------------------------- */
#sp-header .row {
    position: relative;
}

/* Hamburger jest opakowany w .offcanvas-toggler-* — pozycjonujemy wrapper. */
#sp-header .offcanvas-toggler-secondary,
#sp-header .offcanvas-toggler-right {
    position: absolute !important;
    top: 0;
    right: 15px;
    z-index: 5;
}

/* Szerokość kontenera jak w oryginale (~1140px).
   Bootstrap 5 ustawia --bs-container max-width w media query aż do 1320px,
   dlatego nadpisujemy zmienną i wartość. */
#sp-top-bar .container,
#sp-header .container,
#sp-breadcrumb .container,
#sp-main-body .container,
#sp-bottom .container,
#sp-footer .container,
.sp-slider .container,
body .container {
    max-width: 1140px !important;
}

/* ---------------------------------------------------------------------------
   Detale nagłówka z oryginału (Helix3):
   ramka wokół hamburgera, linia pod logo, białe pole treści na szarym tle.
   --------------------------------------------------------------------------- */
#sp-header .burger-icon {
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 2px;
}

#sp-header .burger-icon > span {
    background-color: #000;
}

/* Linia oddzielająca wiersz logo od menu (oryginał miał obramowanie sekcji). */
#sp-menu {
    border-top: 1px solid #eee;
}

/* Układ „boxed": biała kolumna treści na jasnoszarym tle strony. */
body.layout-boxed,
body {
    background-color: #f0f0f0;
}

#sp-top-bar,
#sp-header,
#sp-menu,
#sp-breadcrumb,
#sp-main-body,
#sp-bottom,
#sp-footer,
.sp-slider {
    background-color: #fff;
}

#sp-top-bar {
    background-color: #f5f5f5;
}

/* ===========================================================================
   DOSTĘPNOŚĆ (WCAG 2.1 AA) — KM-4972
   =========================================================================== */

/* --- 1.3.1: strona główna musi mieć <h1>, ale oryginał go nie pokazywał.
       Nagłówek jest dostępny dla czytników ekranu i niewidoczny wizualnie,
       więc wygląd pozostaje zgodny z oryginałem. --- */
.view-featured .page-header h1 {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- 2.4.1: link „Przejdź do treści” — widoczny tylko przy fokusie klawiatury --- */
.zsg-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 10px 18px;
    background: #9c2a28;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 3px 0;
}

.zsg-skip-link:focus,
.zsg-skip-link:focus-visible {
    left: 0;
    color: #fff;
    outline: 3px solid #ffd11a;
    outline-offset: 2px;
}

/* --- 1.4.3: kontrast tekstu w górnym pasku był 2.61 (wymagane 4.5).
       #595959 na #f5f5f5 daje ~4.6. --- */
#sp-top-bar,
#sp-top-bar a:not([class]) {
    color: #595959;
}

/* --- 2.4.7: wyraźny fokus klawiatury w całym serwisie --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #9c2a28;
    outline-offset: 2px;
}

/* Zakładki galerii muszą pokazywać fokus (input jest ukryty, więc na etykiecie) */
.zsg-sc-tabs__radio:focus-visible + .zsg-sc-tabs__label {
    outline: 3px solid #9c2a28;
    outline-offset: 2px;
}