/* ============================================================
   floralabels.com.pl — Custom Theme CSS dla TYPO3 14 + Bootstrap Package 16
   ============================================================
   $primary    #065f46;  — ciemnozielony
   $secondary  #22c55e;  — jasnozielony
   $tertiary   #fbbf24;  — żółty mocny
   $quaternary #f97316;  — pomarańczowy
   $default    #111827;  — szary bardzo ciemny
   Breadcrumb  #fef3c7
   ============================================================ */
 
/* ===== ZMIENNE GLOBALNE ===== */
:root {
    --online-primary:    #065f46;
    --online-secondary:  #22c55e;
    --online-tertiary:   #fbbf24;
    --online-quaternary: #f97316;
    --online-default:    #111827;
    --online-white:      #ffffff;
 
    --bs-primary:              #065f46;
    --bs-primary-rgb:          6, 95, 70;
    --bs-secondary:            #22c55e;
    --bs-secondary-rgb:        34, 197, 95;
    --bs-link-color:           #d98500;
    --bs-link-color-rgb:       217, 133, 0;
    --bs-link-hover-color:     #d94d00;
    --bs-link-hover-color-rgb: 217, 77, 0;
}

/* ============================================================
   BODY - obrazek w tle
   ============================================================ */


body {
    background-image: url('/fileadmin/user_upload/floralabels/background_floralabels.webp');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
 
/* ============================================================
   NAWIGACJA
   ============================================================ */
 
/* Czarne tło + żółta linia NA GÓRZE + biała linia NA DOLE */
.navbar-mainnavigation {
    background:    var(--online-tertiary) !important;
    /* Ciemnozielony cień (R:10, G:30, B:10) z 30% przezroczystością */
    box-shadow:    0 10px 20px #065f4633 !important;
    border-top:    4px solid var(--online-primary) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.35) !important;
    position:      relative;
    overflow:      visible !important;
}
 
/* linki */
.navbar-mainnavigation .nav-link {
    color:      rgba(6, 95, 70, 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-primary) !important;
    font-weight:      600;
}
 
/* ---- 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 -5px 0 !important;  /* -2px = kompensacja border-bottom */
        height:        3px !important;
        background:    var(--online-primary) !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-primary);
}
 
/* 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:   #fbbf24;
    border:       1px solid #333;
    border-top:   3px solid var(--online-primary);
    border-radius:0;
}
 
.navbar-mainnavigation .dropdown-menu .nav-link {
    color: rgba(6, 95, 70,0.75) !important;
}
 
.navbar-mainnavigation .dropdown-menu .nav-link:hover {
    color:      var(--online-white) !important;
    background: #065f46;
}
 
/* mobilny collapse */
@media (max-width: 991px) {
    .navbar-mainnavigation .navbar-collapse {
        background:   #fbbf24;
        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-quaternary) !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-primary) !important;
    --frame-color:      #888888;
    --frame-background: var(--online-primary);
    --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 (Background Color)
   ============================================================ */
 
.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(6, 95, 70, 0.25);
}
 
/* ============================================================
   SCROLL TO TOP  
   ============================================================ */
.scroll-top {
    background-color: var(--online-primary) !important;
}
.scroll-top:hover {
    background-color: var(--online-quaternary) !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);
}