@charset "UTF-8";
:root {
  /* Twoje dotychczasowe zmienne generowane przez Joomlę (np. --primary, --link-color) */
  /* Wymuszenie na natywnym Bootstrapie, aby używał zmiennych z Gdyni */
  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);
  --bs-link-color: var(--link-color);
  --bs-link-hover-color: var(--link-hover-color);
  --bs-body-color: var(--body-color);
  --bs-body-bg: var(--body-bg);
  /* Precyzyjne mapowanie dla modułu Breadcrumbs (Ścieżki powrotu) wewnątrz SPPB */
  --bs-breadcrumb-divider-color: var(--body-color);
  --bs-breadcrumb-item-active-color: var(--graycolor3, #6c757d);
}

/* Przełamanie izolacji stylów w SP Page Builderze */
.sppagebuilder .breadcrumb-item a {
  color: var(--link-color);
}

.sppagebuilder .breadcrumb-item a:hover {
  color: var(--link-hover-color);
}

.sppagebuilder .breadcrumb-item.active {
  color: var(--bs-breadcrumb-item-active-color);
}

.container-header {
  background-color: var(--headerbg);
}
.container-header a,
.container-header button.mod-menu__heading {
  color: var(--headerlinkcolor);
}
.container-header a:hover, .container-header a:focus,
.container-header button.mod-menu__heading:hover,
.container-header button.mod-menu__heading:focus {
  color: var(--headerlinkcolorh);
}

.container-header .metismenu > li > a:hover::after, .container-header .metismenu > li > button:hover::before, .container-header .metismenu > li.active > a::after, .container-header .metismenu > li.active > button::before {
  background: var(--bodycolor);
}

.metismenu.mod-menu .mm-toggler:after {
  border-top-color: var(--headerlinkcolor);
}

.offcanvas-menu .offcanvas-content {
  background-color: var(--offcanvasbg);
}
.offcanvas-menu .offcanvas-content :where(.mod-menu__toggle-sub) {
  color: var(--offcanvaslinkcolor);
}
.offcanvas-menu .offcanvas-content :where(.mod-menu__toggle-sub):hover, .offcanvas-menu .offcanvas-content :where(.mod-menu__toggle-sub):focus {
  color: var(--offcanvaslinkcolorh);
}
.offcanvas-menu .navbar-toggler .burger-icon > span {
  background-color: var(--offcanvaslinkcolor);
}
.offcanvas-menu a,
.offcanvas-menu .mod-list li > a {
  color: var(--offcanvaslinkcolor);
}
.offcanvas-menu a:hover, .offcanvas-menu a:focus,
.offcanvas-menu .mod-list li > a:hover,
.offcanvas-menu .mod-list li > a:focus {
  color: var(--offcanvaslinkcolorh);
}
.offcanvas-menu .mod-list li.current > a {
  color: var(--offcanvaslinkcolorh);
}
.offcanvas-menu .mod-list li.current > a:hover, .offcanvas-menu .mod-list li.current > a:focus {
  color: var(--offcanvaslinkcolorh);
}

.navbar-toggler .burger-icon > span {
  background-color: var(--headerlinkcolor);
}

.form-control,
.form-check-input {
  background-color: rgb(from var(--link-color) r g b/0.3);
  border-color: rgb(from var(--link-color) r g b/0.5);
}
.form-control:hover, .form-control:focus,
.form-check-input:hover,
.form-check-input:focus {
  background-color: rgb(from var(--link-hover-color) r g b/0.3);
  border-color: rgb(from var(--link-hover-color) r g b/0.5);
}

.form-check-input {
  background-color: rgb(from var(--link-color) r g b/0.3);
  border-color: rgb(from var(--link-color) r g b/0.5);
}
.form-check-input:checked {
  background-color: var(--link-hover-color);
  border-color: var(--link-hover-color);
}

.input-group-text {
  color: var(--link-color);
  border-color: rgb(from var(--link-color) r g b/0.5);
  background-color: var(--body-bg);
}

.custom-select,
.form-select {
  border-color: rgb(from var(--link-color) r g b/0.5);
}
button.input-password-toggle,
button.plg_system_webauthn_login_button {
  color: var(--link-color);
  border-color: rgb(from var(--link-color) r g b/0.5);
}
button.input-password-toggle svg circle,
button.input-password-toggle svg path,
button.plg_system_webauthn_login_button svg circle,
button.plg_system_webauthn_login_button svg path {
  fill: var(--link-color);
}
button.input-password-toggle:hover svg circle,
button.input-password-toggle:hover svg path, button.input-password-toggle:focus svg circle,
button.input-password-toggle:focus svg path,
button.plg_system_webauthn_login_button:hover svg circle,
button.plg_system_webauthn_login_button:hover svg path,
button.plg_system_webauthn_login_button:focus svg circle,
button.plg_system_webauthn_login_button:focus svg path {
  fill: var(--body-bg);
}

.btn-primary,
.sppb-btn-primary {
  --btn-color: var(--btncolor);
  --btn-bg: var(--btnbg);
  --btn-border-color: var(--btnbg);
  --btn-hover-color: var(--btncolorh);
  --btn-hover-bg: var(--btnbgh);
  --btn-hover-border-color: var(--btnbgh);
  --btn-active-color: var(--btncolorh);
  --btn-active-bg: var(--btnbgh);
  --btn-active-border-color: var(--btnbgh);
  --btn-disabled-color: var(--btncolor);
  --btn-disabled-bg: var(--btnbg);
  --btn-disabled-border-color: var(--btnbg);
  color: var(--body-bg) !important;
  background-color: var(--btnbg) !important;
  border-color: var(--btnbg) !important;
}
.btn-primary:hover, .btn-primary:focus,
.sppb-btn-primary:hover,
.sppb-btn-primary:focus {
  background-color: var(--btnbgh) !important;
  border-color: var(--btnbgh) !important;
}

.btn-secondary,
.sppb-btn-secondary {
  color: var(--btnbg) !important;
  background-color: var(--body-bg) !important;
  border-color: var(--btnbg) !important;
}
.btn-secondary:hover, .btn-secondary:focus,
.sppb-btn-secondary:hover,
.sppb-btn-secondary:focus {
  color: var(--body-bg) !important;
  background-color: var(--btnbgh) !important;
  border-color: var(--btnbgh) !important;
}

.btn-link,
.sppb-btn-link {
  color: var(--link-color) !important;
}
.btn-link:hover, .btn-link:focus,
.sppb-btn-link:hover,
.sppb-btn-link:focus {
  color: var(--link-hover-color) !important;
}

.boxed .blog-item {
  --cassiopeia-color-primary: var(--link-color);
}

.pagination {
  --pagination-active-bg: var(--link-color);
}

.container-topbar {
  background-color: var(--topbarbg);
}

.container-bottom,
.container-footer {
  color: var(--footercolor);
  background-color: var(--footerbg);
  background-image: none;
}
.container-bottom a,
.container-bottom .mod-menu__heading,
.container-bottom .icon-chevron-down,
.container-footer a,
.container-footer .mod-menu__heading,
.container-footer .icon-chevron-down {
  color: var(--footerlinkcolor);
}
.container-bottom a:hover, .container-bottom a:focus,
.container-bottom .mod-menu__heading:hover,
.container-bottom .mod-menu__heading:focus,
.container-bottom .icon-chevron-down:hover,
.container-bottom .icon-chevron-down:focus,
.container-footer a:hover,
.container-footer a:focus,
.container-footer .mod-menu__heading:hover,
.container-footer .mod-menu__heading:focus,
.container-footer .icon-chevron-down:hover,
.container-footer .icon-chevron-down:focus {
  color: var(--footerlinkcolorh);
}
.container-bottom .current a,
.container-footer .current a {
  color: var(--footerlinkcolorh);
}
.container-bottom .current a:hover, .container-bottom .current a:focus,
.container-footer .current a:hover,
.container-footer .current a:focus {
  color: var(--footerlinkcolorh);
}

.offline-card .header {
  color: var(--headercolor);
  background-color: var(--headerbg);
  background-image: none;
}

.tags a.btn {
  color: var(--link-color);
}
.tags a.btn:hover, .tags a.btn:focus {
  color: var(--link-hover-color);
}

.tag .tag-count.badge {
  color: var(--link-color);
  background-color: var(--body-bg) !important;
  border-color: var(--link-color);
}

.card {
  background-color: var(--body-bg);
  border-color: rgb(from var(--link-color) r g b/0.3);
}
.card .card-header {
  background-color: rgb(from var(--link-color) r g b/0.2);
  border-bottom-color: rgb(from var(--link-color) r g b/0.3);
}

.list-group-item {
  color: var(--link-color);
  border-color: rgb(from var(--link-color) r g b/0.3);
}
.list-group-item:hover, .list-group-item:focus {
  color: var(--link-hover-color);
}

figcaption {
  color: var(--body-color);
}

svg#signet .st0 {
  fill: var(--link-color);
}

.mod-languages img {
  border-color: var(--body-bg);
}

.mod-menu :where(.mod-menu__toggle-sub) {
  color: var(--link-color);
}

.mod-menu a .fas,
.mod-menu a .fa-solid,
.mod-menu a .fa-brands,
.mod-menu a [class^=icon-],
.mod-menu a [class*=" icon-"] {
  color: var(--link-color);
  transition: color 0.2s ease-in-out;
}
.mod-menu a .fas:hover,
.mod-menu a .fa-solid:hover,
.mod-menu a .fa-brands:hover,
.mod-menu a [class^=icon-]:hover,
.mod-menu a [class*=" icon-"]:hover {
  color: var(--link-hover-color);
}
.mod-menu a:hover .fas, .mod-menu a:hover .fa-solid, .mod-menu a:hover .fa-brands, .mod-menu a:hover [class^=icon-], .mod-menu a:hover [class*=" icon-"] {
  color: var(--link-hover-color);
}

.mod-list li.current > a {
  color: var(--body-color);
}