/* ============================================================
   online.com.pl — Custom Theme CSS dla TYPO3 14 + Bootstrap Package 16
   ============================================================
   $primary    #00AEEF  — niebieski
   $secondary  #E5007E  — magenta
   $tertiary   #FFED00  — żółty
   $quaternary #1a1a1a  — czarny
   $default    #eaebec  — szary jasny
   Breadcrumb  #00AEEF
   ============================================================ */
 
/* ===== ZMIENNE GLOBALNE ===== */
:root {
    --online-primary:    #00AEEF;
    --online-secondary:  #E5007E;
    --online-tertiary:   #FFED00;
    --online-quaternary: #1a1a1a;
    --online-default:    #eaebec;
    --online-white:      #ffffff;
 
    --bs-primary:              #00AEEF;
    --bs-primary-rgb:          0, 174, 239;
    --bs-secondary:            #E5007E;
    --bs-secondary-rgb:        229, 0, 126;
    --bs-link-color:           #00AEEF;
    --bs-link-color-rgb:       0, 174, 239;
    --bs-link-hover-color:     #0090C7;
    --bs-link-hover-color-rgb: 0, 144, 199;
}
 
/* ============================================================
   NAWIGACJA
   ============================================================ */
 
/* Czarne tło + żółta linia NA GÓRZE + biała linia NA DOLE */
.navbar-mainnavigation {
    background:    var(--online-quaternary) !important;
    box-shadow:    none !important;
    border-top:    4px solid var(--online-tertiary) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.35) !important;
    position:      relative;
    overflow:      visible !important;
}
 
/* linki */
.navbar-mainnavigation .nav-link {
    color:      rgba(255, 255, 255, 0.75) !important;
    transition: color 0.15s ease;
}
 
.navbar-mainnavigation .nav-link:hover,
.navbar-mainnavigation .nav-link:focus {
    color: var(--online-white) !important;
}
 
.navbar-mainnavigation .nav-link.active,
.navbar-mainnavigation .nav-item.active > .nav-link {
    color: var(--online-white) !important;
}
 
/* ---- żółta linia PRZY DOLNEJ KRAWĘDZI paska (desktop) ---- */
@media (min-width: 992px) {
 
    /* reset linii z Bootstrap Package i ustawienie nowej */
    .navbar-mainnavigation .nav-link.nav-link-main:before {
        /* pozycja: przyklejona do dołu paska włącznie z border-bottom */
        inset:         auto 0 -2px 0 !important;  /* -2px = kompensacja border-bottom */
        height:        5px !important;
        background:    var(--online-tertiary) !important;
        border-radius: 0 !important;
        opacity:       0;
        width:         auto !important;
        transition:    opacity 0.15s ease !important;
        transform:     none !important;
    }
 
    /* hover */
    .navbar-mainnavigation .nav-link.nav-link-main:hover:before,
    .navbar-mainnavigation .nav-link.nav-link-main:focus:before {
        opacity: 0.65 !important;
    }
 
    /* aktywny */
    .navbar-mainnavigation .nav-link.nav-link-main.active:before,
    .navbar-mainnavigation .nav-link.nav-link-main.show:before,
    .navbar-mainnavigation .nav-item.active .nav-link.nav-link-main:before {
        opacity: 1 !important;
    }
}
 
/* logo */
.navbar-mainnavigation .navbar-brand {
    color: var(--online-white);
}
 
/* hamburger mobilny */
.navbar-mainnavigation .navbar-toggler {
    color:        var(--online-white);
    border-color: rgba(255, 255, 255, 0.3);
}
 
/* ikona hamburgera */
.navbar-mainnavigation .navbar-toggler-icon,
.navbar-mainnavigation .navbar-toggler-icon:before,
.navbar-mainnavigation .navbar-toggler-icon:after {
    background-color: var(--online-white) !important;
}
 
/* dropdown */
.navbar-mainnavigation .dropdown-menu {
    background:   #222222;
    border:       1px solid #333;
    border-top:   3px solid var(--online-tertiary);
    border-radius:0;
}
 
.navbar-mainnavigation .dropdown-menu .nav-link {
    color: rgba(255,255,255,0.75) !important;
}
 
.navbar-mainnavigation .dropdown-menu .nav-link:hover {
    color:      var(--online-white) !important;
    background: #333333;
}
 
/* mobilny collapse */
@media (max-width: 991px) {
    .navbar-mainnavigation .navbar-collapse {
        background:   #222222;
        border-top:   3px solid var(--online-tertiary);
        padding:      0.5rem 1rem 1rem;
        margin-top:   0;
    }
 
    .navbar-mainnavigation .navbar-nav .nav-link {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding:       0.65rem 0.5rem !important;
    }
 
    .navbar-mainnavigation .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }
}
 
/* ============================================================
   LINKI I PRZYCISKI W TREŚCI
   ============================================================ */
 
.frame a[class=""],
.frame a:not([class]) {
    color: var(--online-primary);
}
 
.frame a[class=""]:hover,
.frame a:not([class]):hover {
    color: #0090C7;
}
 
/* primary — niebieski */
.btn-primary,
.frame-type-felogin_login input[type=submit] {
    --bs-btn-color:              var(--online-white);
    --bs-btn-bg:                 var(--online-primary);
    --bs-btn-border-color:       var(--online-primary);
    --bs-btn-hover-color:        var(--online-white);
    --bs-btn-hover-bg:           #0090C7;
    --bs-btn-hover-border-color: #0090C7;
    --bs-btn-active-bg:          #007BAB;
    --bs-btn-active-border-color:#007BAB;
    --bs-btn-focus-shadow-rgb:   0, 174, 239;
}
 
.btn-outline-primary {
    --bs-btn-color:              var(--online-primary);
    --bs-btn-border-color:       var(--online-primary);
    --bs-btn-hover-color:        var(--online-white);
    --bs-btn-hover-bg:           var(--online-primary);
    --bs-btn-hover-border-color: var(--online-primary);
}
 
/* secondary — magenta */
.btn-secondary {
    --bs-btn-color:              var(--online-white);
    --bs-btn-bg:                 var(--online-secondary);
    --bs-btn-border-color:       var(--online-secondary);
    --bs-btn-hover-color:        var(--online-white);
    --bs-btn-hover-bg:           #C4006B;
    --bs-btn-hover-border-color: #C4006B;
}
 
/* ============================================================
   BREADCRUMB — niebieski (#00AEEF)
   ============================================================ */
 
.breadcrumb-section {
    background-color: var(--online-primary) !important;
    opacity: 0.65 !important;    
    border-bottom: 2px solid rgba(255, 255, 255, 0.35) !important;
}
 
.breadcrumb-section .breadcrumb {
    background-color: transparent;
}
 
.breadcrumb-section .breadcrumb-item,
.breadcrumb-section .breadcrumb-item a,
.breadcrumb-section .breadcrumb-item.active,
.breadcrumb-section .breadcrumb-item + .breadcrumb-item::before {
    color: var(--online-white) !important;
}
 
.breadcrumb-section .breadcrumb-item a:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}
 
/* ============================================================
   STOPKA GÓRNA — magenta ($secondary)
   ============================================================ */
 
.footer-section-content {
    background:         var(--online-secondary) !important;
    --frame-color:      var(--online-white);
    --frame-background: var(--online-secondary);
    --frame-link-color: var(--online-white);
    --frame-link-hover-color: rgba(255, 255, 255, 0.75);
    border-bottom:      4px solid var(--online-tertiary) !important;
}
 
.footer-section-content,
.footer-section-content p,
.footer-section-content a,
.footer-section-content li,
.footer-section-content h1,
.footer-section-content h2,
.footer-section-content h3,
.footer-section-content h4,
.footer-section-content h5 {
    color: var(--online-white) !important;
}
 
.footer-section-content a:hover {
    color:           rgba(255, 255, 255, 0.75) !important;
    text-decoration: underline;
}
 
.footer-navigation-link,
.footer-navigation-link:hover {
    color: var(--online-white) !important;
}
 
.footer-sociallinks .sociallinks-link {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color:            var(--online-white) !important;
}
 
.footer-sociallinks .sociallinks-link:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}
 
/* ============================================================
   STOPKA DOLNA — czarny ($quaternary)
   ============================================================ */
 
.footer-section-meta {
    background:         var(--online-quaternary) !important;
    --frame-color:      #888888;
    --frame-background: var(--online-quaternary);
    --frame-link-color: #aaaaaa;
}
 
.footer-section-meta,
.footer-section-meta p,
.footer-section-meta a,
.footer-section-meta li {
    color: #888888 !important;
}
 
.footer-section-meta a:hover {
    color: var(--online-white) !important;
}
 
/* ============================================================
   TŁA RAMEK — kolory motywu
   ============================================================ */
 
.frame-background-primary {
    --frame-color:            var(--online-white);
    --frame-background:       var(--online-primary);
    --frame-link-color:       var(--online-white);
    --frame-link-hover-color: rgba(255,255,255,0.8);
}
 
.frame-background-secondary {
    --frame-color:            var(--online-white);
    --frame-background:       var(--online-secondary);
    --frame-link-color:       var(--online-white);
    --frame-link-hover-color: rgba(255,255,255,0.8);
}
 
.frame-background-tertiary {
    --frame-color:            var(--online-quaternary);
    --frame-background:       var(--online-tertiary);
    --frame-link-color:       var(--online-quaternary);
    --frame-link-hover-color: #333;
}
 
.frame-background-quaternary {
    --frame-color:            var(--online-white);
    --frame-background:       var(--online-quaternary);
    --frame-link-color:       var(--online-primary);
    --frame-link-hover-color: #0090C7;
}
 
/* ============================================================
   PAGINACJA
   ============================================================ */
 
.page-link.active,
.active > .page-link {
    background-color: var(--online-primary) !important;
    border-color:     var(--online-primary) !important;
}
 
.page-link:hover {
    color: var(--online-primary);
}
 
/* ============================================================
   FORMULARZE — focus
   ============================================================ */
 
.form-control:focus {
    border-color: var(--online-primary);
    box-shadow:   0 0 0 0.25rem rgba(0, 174, 239, 0.25);
}
 
/* ============================================================
   SCROLL TO TOP
   ============================================================ */
 
.scroll-top:hover {
    background-color: var(--online-primary) !important;
}
 
/* ============================================================
   CAROUSEL — niebieski domyślnie
   ============================================================ */
 
.carousel-item {
    background-color: var(--online-primary);
}

/* ============================================================
   MENU BOCZNE (subnav)
   ============================================================ */

.subnav-nav {
    color: #00AEEF;
}

/* link w menu bocznym */
.subnav-link {
    color:        #00AEEF !important;
    border-color: rgba(0, 174, 239, 0.2);
    transition:   all 0.15s ease-in-out;
    border-style: solid;
    border-width: 3px; /* Tutaj zmieniasz grubość (np. z 1px na 3px) */
}

.subnav-link:hover,
.subnav-link:focus {
    color:            #00AEEF !important;
    background-color: rgba(0, 174, 239, 0.08);
    border-color:     rgba(0, 174, 239, 0.35);
}

/* aktywny element — magenta ($secondary) */
.active > .subnav-link {
    color:            #ffffff !important;
    background-color: rgba(229, 0, 126, 0.60);
    border-color:     rgba(229, 0, 126, 0.25);
    font-weight:      600;
}

/* strzałka przy aktywnym elemencie */
.active > .subnav-link:before {
    border-left-color: var(--online-secondary) !important;
}

/* zagnieżdżone podmenu */
.subnav-nav .subnav-nav {
    border-left-color: rgba(0, 174, 239, 0.08);
}

.subnav-nav .subnav-nav:before {
    background-color: rgba(0, 174, 239, 0.08);
}

/* separator */
.subnav-item .subnav-divider {
    background-color: rgba(40, 83, 20, 0.08);
    border-right-color: rgba(40, 83, 20, 0.2);
}

/* ============================================================
   TEXT AND ICON — ramka z zaokrąglonymi narożnikami i cieniem wersja CLAUDE
   ============================================================ */
/* 
.frame-type-texticon .texticon {
    border:        1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-shadow:    0 2px 12px rgba(0, 0, 0, 0.07),
                   0 1px 3px rgba(0, 0, 0, 0.05);
    padding:       1.5rem;
    transition:    box-shadow 0.2s ease;
}
 
.frame-type-texticon .texticon:hover {
    box-shadow:    0 4px 20px rgba(0, 0, 0, 0.20),
                   0 1px 4px rgba(0, 0, 0, 0.10);
}
*/
/* TEXT AND ICON — ramka z zaokrąglonymi narożnikami i cieniem wersja GEMINI
   wyrównuje wysokości ramek */

/* 1. GRUBSZA RAMKA */
.frame-type-texticon .texticon {
    border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px;
    padding: 1.5rem;
    background-color: #ffffff;
    transition: all 0.2s ease;
}

/* 2. ŁAŃCUCH WYSOKOŚCI (EQUAL HEIGHT) */

/* Rząd musi być flexem */
.section-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch !important;
}

/* Kolumna musi być flexem */
.section-column-third {
    display: flex !important;
    flex-direction: column !important;
}

/* WYMUSZENIE WZROSTU NA WSZYSTKICH WARSTWACH WEWNĄTRZ */
/* Dodajemy tutaj klasy, które widzę w Twoim inspektorze: .frame-container-default oraz .frame-inner */
.section-column-third .frame,
.frame-group-container,
.frame-group-inner,
.frame-container-default,
.frame-inner,
.texticon {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: auto !important;
}

/* Opcjonalnie: upewnij się, że tekst w środku nie jest ściśnięty */
.texticon-content {
    flex-grow: 1;
}

/* Hover dla ramki */
.frame-type-texticon .texticon:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20);
    border-color: rgba(0, 0, 0, 0.2) !important;
}

/* ============================================================
   GALLERY / TYLKO OBRAZY — ramka i wyrównanie wysokości
   ============================================================ */

/* obsługa do 10 kolumn */
    .gallery-item-size-7  { --gallery-columns: 4; }
    .gallery-item-size-8  { --gallery-columns: 4; }
    .gallery-item-size-9  { --gallery-columns: 5; }
    .gallery-item-size-10 { --gallery-columns: 5; }

@media (min-width: 576px) {
    .gallery-item-size-7  { --gallery-columns: 5; }
    .gallery-item-size-8  { --gallery-columns: 6; }
    .gallery-item-size-9  { --gallery-columns: 7; }
    .gallery-item-size-10 { --gallery-columns: 8; }
}

@media (min-width: 992px) {
    .gallery-item-size-7  { --gallery-columns: 7; }
    .gallery-item-size-8  { --gallery-columns: 8; }
    .gallery-item-size-9  { --gallery-columns: 9; }
    .gallery-item-size-10 { --gallery-columns: 10; }
}

/* wyrównanie wysokości wierszy */
.gallery-row {
    align-items: stretch;
}

.gallery-item {
    display:        flex;
    flex-direction: column;
}

.gallery-item figure {
    flex:           1;
    display:        flex;
    flex-direction: column;
    margin-bottom:  0;
}

.gallery-item figure picture,
.gallery-item figure a {
    flex:       1;
    display:    flex;
    min-height: 120px; /* minimalna wysokość ramki */
}

/* obrazki zachowują proporcje — bez przycinania */
.gallery-item figure img {
    width:            100%;
    height:           100%;
    object-fit:       contain;       /* zachowuje cały obrazek */
    object-position:  center center;
    background-color: #ffffff;       /* białe tło w pustych miejscach */
    display:          block;
}

/* delikatna ramka wokół każdego obrazka */
.gallery-item figure {
    border:        1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding:       4px;
    overflow:      hidden;
    box-shadow:    0 2px 6px rgba(0, 0, 0, 0.10);
    transition:    box-shadow 0.2s ease;
    background-color: #ffffff;       /* białe tło ramki */
}

.gallery-item figure:hover {
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.25);
}

/* caption pod obrazkiem */
.gallery-item .caption {
    padding:          0.4rem 0.6rem;
    font-size:        0.8rem;
    background-color: rgba(0, 0, 0, 0.02);
    border-top:       1px solid rgba(0, 0, 0, 0.06);
}