/* =========================================================
   Božo Paradžik — Cassiopeia user overrides
   Rebuild of the original minimalist 2014 design (Joomla 5)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap');

:root,
body.site {
  --bozo-accent: #306781;
  --link-color: #306781;
  --template-link-color: #306781;
  --template-special-color: #306781;
  --cassiopeia-color-primary: #306781;
}

/* ---------- base ---------- */
body.site {
  background: #ffffff !important;
  color: #343434;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  padding-top: 0 !important;
}
.site .container-header,
.site .header,
.site .container-nav,
.site .container-banner,
.site .container-top,
.site .grid-child { background: #ffffff !important; box-shadow: none !important; }

/* remove Cassiopeia coloured top edge */
.site #top-spacer,
.site .skip-link { background: #ffffff !important; }

/* ---------- header / site title ---------- */
.container-header { padding: 2.2rem 0 0.4rem; }
.brand-logo, .navbar-brand { display: block; max-width: 100%; }
.site-title,
.brand-logo a,
.navbar-brand,
.navbar-brand a {
  font-family: 'Lato', sans-serif !important;
  font-weight: 200 !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(1.8rem, 5vw, 3.4rem);
  color: #5a5a5a !important;
  text-decoration: none !important;
  line-height: 1.05;
  white-space: nowrap;
}
.site-description { display: none; }

/* ---------- main navigation ---------- */
.container-nav .navbar,
.navbar { background: #ffffff !important; padding: 0; border: 0; }
nav.navbar .navbar-toggler { border: 0; color: #8a8a8a; }
ul.mod-menu,
.navbar-nav { gap: 1.4rem; align-items: center; }
ul.mod-menu > li > a,
.navbar .mod-menu a,
.navbar-nav .nav-link {
  text-transform: uppercase;
  font-weight: 300 !important;
  letter-spacing: 0.12em;
  font-size: 1.02rem;
  color: #8a8a8a !important;
  background: transparent !important;
  padding: 0.35rem 0.2rem !important;
}
ul.mod-menu > li > a:hover,
ul.mod-menu > li.current > a,
ul.mod-menu > li.active > a,
.navbar-nav .nav-link:hover,
.navbar-nav .current > .nav-link {
  color: #306781 !important;
  background: transparent !important;
}

/* ---------- content ---------- */
.container-component { padding-top: 2.5rem; }
.site main { min-height: 55vh; }
h1, h2, h3, .page-header h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color: #343434;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
p, li { font-weight: 300; line-height: 1.7; }
a { color: #306781; }
a:hover { color: #244f63; }

/* ---------- bass-scroll hero (home) ---------- */
.bozo-hero { text-align: center; margin: 2.5rem 0 3rem; }
.bozo-hero img { max-width: 95px; height: auto; }
/* strip Cassiopeia's card/border around the hero module */
.main-top.card,
.main-top.card .card-body,
.container-main-top .card {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.main-top.card .card-body { padding: 0 !important; }

/* ---------- footer ---------- */
.container-footer,
footer.container-footer {
  background: #ffffff !important;
  color: #9a9a9a;
  border-top: 1px solid #ededed;
  margin-top: 4rem;
  padding-top: 1.5rem;
  font-size: 0.85rem;
}
.container-footer a { color: #8a8a8a !important; text-transform: uppercase; letter-spacing: 0.08em; }
.container-footer a:hover { color: #306781 !important; }

/* tidy: hide Cassiopeia back-to-top default bg, keep minimal */
#back-top, .back-to-top-link { color: #306781; }

/* ===== faithful old-template layout ===== */

/* active MAIN-menu item only: small bass-clef icon (scoped to header nav) */
.container-nav ul.mod-menu > li.current > a,
.container-nav ul.mod-menu > li.active > a {
  background: url("/images/bass-schluessel.png") no-repeat left center !important;
  background-size: 13px 16px !important;
  padding-left: 22px !important;
  color: #888 !important;
}

/* centered, narrower content column (desktop) */
.site .container-component { position: relative; }
@media (min-width: 992px) {
  .site .container-component { max-width: 760px; margin-left: auto; margin-right: auto; }
}

/* bass-scroll decoration to the left of content on all non-home pages */
@media (min-width: 1100px) {
  body.com_content:not(.view-featured) .container-component::before {
    content: "";
    position: absolute; top: 4px; left: -88px;
    width: 49px; height: 128px;
    background: url("/images/schnecke.png") no-repeat left top;
    background-size: 49px 128px;
  }
}

/* sub-navigation (main-top): horizontal, like the old #submenu (13px / 400 / dark) */
.main-top.card { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.main-top.card .card-body { padding: 0 !important; }
.main-top ul.mod-menu {
  display: block; list-style: none; padding: 0; margin: .25rem 0 1.6rem;
}
.main-top ul.mod-menu > li {
  display: inline-block; margin: 0 22px 0 0;
}
.main-top ul.mod-menu a {
  text-transform: uppercase; letter-spacing: .04em;
  font-size: 13px; font-weight: 400; color: #343434 !important;
  text-decoration: none; background: none !important; padding: 0 !important;
}
.main-top ul.mod-menu a:hover { color: #306781 !important; }
.main-top ul.mod-menu .current > a { color: #306781 !important; }

/* ===== mobile / responsive ===== */
@media (max-width: 991px) {
  .site-title, .brand-logo a, .navbar-brand a { font-size: clamp(1.5rem, 8vw, 2.4rem); white-space: normal; }
  .container-header { padding: 1.4rem 0 .3rem; text-align: center; }
  .navbar { justify-content: center; }
  ul.mod-menu, .navbar-nav { gap: .9rem 1.1rem; justify-content: center; flex-wrap: wrap; }
  ul.mod-menu > li > a, .navbar-nav .nav-link { font-size: .92rem; }
  .site .container-component { padding-left: 1.1rem; padding-right: 1.1rem; }
  .bozo-hero img { max-width: 70px; }
  .container-footer { text-align: center; }
}

/* ---------- image gallery ({gallery} plugin) ---------- */
.bozo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin: 2rem 0;
}
.bozo-gallery-item { display: block; overflow: hidden; line-height: 0; }
.bozo-gallery-item img {
  width: 100%; height: 170px; object-fit: cover; display: block;
  transition: transform .35s ease, opacity .35s ease;
}
.bozo-gallery-item:hover img { transform: scale(1.05); opacity: .82; }

/* lightbox */
.bozo-lb {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(255,255,255,.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.bozo-lb.open { opacity: 1; pointer-events: auto; }
.bozo-lb img { max-width: 92vw; max-height: 86vh; box-shadow: 0 12px 45px rgba(0,0,0,.22); }
.bozo-lb button {
  position: absolute; background: none; border: 0; cursor: pointer;
  color: #306781; line-height: 1; padding: .3rem .6rem;
}
.bozo-lb-close { top: 14px; right: 22px; font-size: 2.4rem; }
.bozo-lb-prev { left: 14px; top: 50%; transform: translateY(-50%); font-size: 3rem; }
.bozo-lb-next { right: 14px; top: 50%; transform: translateY(-50%); font-size: 3rem; }
@media (max-width: 640px) {
  .bozo-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .bozo-gallery-item img { height: 120px; }
}