/* ============================================================
   wksplywanie.pl — wyglad STAREJ strony (protostar) na Cassiopei (J5)
   Tlo images/bgmax/tlo.jpg + zielony #54a276 + Open Sans + logo.
   Wgrac jako: media/templates/site/cassiopeia/css/user.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

/* --- Tlo strony: stale tlo.jpg + zielony pasek u gory --- */
body.site {
  background: #ffffff url('/images/bgmax/tlo.jpg') no-repeat center top fixed !important;
  background-size: cover !important;
  border-top: 3px solid #54a276;
  font-family: 'Open Sans', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, .site-title {
  font-family: 'Open Sans', sans-serif;
}

/* --- Naglowek z logo: biala belka ZAWEZONA do szerokosci kontenera (jak menu) --- */
.container-header {
  background: transparent !important;     /* zdejmij pelnoszerokie tlo szablonu */
  background-image: none !important;
  box-shadow: none !important;
  margin-top: .5rem;
}
/* biala belka TYLKO pod logo (NIE pod menu .container-nav) */
.container-header > .grid-child:not(.container-nav):not(.container-search) {
  max-width: 1320px;                      /* szerokosc tresci Cassiopei = pasek menu */
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 6px;
}
/* logo z kryciem 90% (10% przezroczystosci) */
.container-header .navbar-brand img,
.container-header .logo img {
  opacity: 0.9;
}

/* ============================================================
   MENU — zielony pasek z bialym, czytelnym tekstem
   ============================================================ */
.container-nav {
  background: #54a276;
  border-radius: 6px;
  padding: 0 .5rem;
}
.container-nav .navbar-nav .nav-item .nav-link,
.navbar-nav .nav-link {
  color: #ffffff !important;
  font-weight: 600;
}
.container-nav .navbar-nav .nav-link:hover,
.container-nav .navbar-nav .nav-link:focus {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}
.container-nav .navbar-nav .active > .nav-link,
.container-nav .navbar-nav .current > .nav-link {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}
/* hamburger / toggler na zielonym pasku */
.container-nav .navbar-toggler { color: #fff; border-color: rgba(255,255,255,.5); }

/* ============================================================
   TRESC — wyrazne panele na tle
   ============================================================ */
.container-component .grid-child,
.container-component .item-page,
.container-component .blog,
main .com-content-article,
.container-component > * {
  /* zostawiamy elastycznie, panel dajemy nizej na komponent */
}
.container-component {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
}

/* moduly / karty (np. "Na skroty") */
.card,
.sidebar-right .card,
.moduletable {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 6px;
}

/* stopka */
.container-footer {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 6px;
}

/* --- Linki i przyciski w tresci --- */
.container-component a,
.sidebar-right a { color: #54a276; }
.container-component a:hover,
.sidebar-right a:hover { color: #3f7d5a; }

.btn-primary, .button, button.btn-primary {
  background: #54a276; border-color: #54a276;
}
.btn-primary:hover, .btn-primary:focus, .button:hover {
  background: #3f7d5a; border-color: #3f7d5a;
}
.btn-outline-primary { color: #54a276; border-color: #54a276; }
.btn-outline-primary:hover { background: #54a276; border-color: #54a276; color: #fff; }