/* =====================================================================
   Biwer Musek – Cassiopeia look modelled on the old "zoka" (Shape5) template
   Upload to: media/templates/site/cassiopeia/css/user.css
   (Cassiopeia loads this file automatically after its own CSS)
   ===================================================================== */

:root {
  --bm-brown: #623f3f;        /* old button colour */
  --bm-brown-light: #896767;  /* old button hover  */
  --bm-text: #1e1e1e;         /* old menu text     */
  --bm-muted: #666666;        /* old menu hover    */
  --bm-border: #d8d8d8;       /* old accordion border */
  --bm-width: 1140px;

  --cassiopeia-color-primary: #ffffff;
  --cassiopeia-color-link: var(--bm-brown);
  --cassiopeia-color-hover: var(--bm-brown-light);
  --link-color: var(--bm-brown);
  --link-hover-color: var(--bm-brown-light);
}

body.site {
  font-family: Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  background: #fff;
}
h1, h2, h3, h4 { text-transform: none; color: var(--bm-text); }

/* ---------- Header: white, logo centred, menu centred below ---------- */
.container-header {
  background: #fff !important;
  background-image: none !important;
  box-shadow: none;
  border-bottom: 1px solid #ececec;
}
.container-header > .grid-child:first-child {
  justify-content: center;
  padding: 1.5rem 1rem .75rem;
}
.container-header .navbar-brand { margin: 0 auto; text-align: center; }
.container-header .navbar-brand img { max-height: 130px; width: auto; }
.container-header .navbar-brand a,
.container-header .site-description { color: var(--bm-text); }

.container-header .container-nav {
  justify-content: center;
  padding-top: 0;
  padding-bottom: .75rem;
  position: relative;
}
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button,
.container-header .metismenu.mod-menu .metismenu-item > a,
.container-header .metismenu.mod-menu .metismenu-item > button {
  color: var(--bm-text) !important;
  font-size: 1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.container-header .metismenu.mod-menu .metismenu-item > a:hover,
.container-header .metismenu.mod-menu .metismenu-item.active > a,
.container-header .metismenu.mod-menu .metismenu-item > button:hover {
  color: var(--bm-muted) !important;
  text-decoration: none;
}
.container-header .metismenu.mod-menu .metismenu-item > a:after,
.container-header .metismenu.mod-menu .metismenu-item.active > a:after { background: var(--bm-brown); }
/* dropdowns: white with grey border, like the old S5 flex menu */
.container-header .metismenu.mod-menu .mm-collapse {
  background: rgba(255,255,255,.97) !important;
  border: 1px solid #999;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.container-header .metismenu.mod-menu .mm-collapse a { color: var(--bm-text) !important; text-transform: none; }
.container-header .metismenu.mod-menu .mm-collapse a:hover { color: var(--bm-muted) !important; background: #f4f3f3; }
.container-header .container-nav > nav,
.container-header .container-nav > .navbar { margin-left: auto; margin-right: auto; flex: 0 1 auto; }
.container-header .container-nav .mod-menu { justify-content: center; }
/* mobile menu toggler */
.container-header .navbar-toggler { color: var(--bm-text); border-color: #999; }

/* Facebook link: top right corner */
.container-header .container-search {
  position: absolute; top: .75rem; right: 1rem; margin: 0;
}
.container-header .container-search p { margin: 0; }

/* ---------- Homepage: horizontal photo accordion (old S5 accordion) ---------- */
.container-top-a {
  display: flex !important;
  gap: 0 !important;
  height: 500px;
  padding: 0 !important;
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid var(--bm-border);
}
.container-top-a > .top-a.card {
  flex: 1 1 0;
  margin: 0 !important;
  border: 0;
  border-left: 1px solid var(--bm-border);
  border-radius: 0;
  position: relative;
  background-color: #2b2b2b;
  background-size: cover;
  background-position: center;
  transition: flex-grow .9s ease;
  overflow: hidden;
}
.container-top-a > .top-a.card:first-child { border-left: 0; }
.container-top-a > .top-a.card:hover { flex-grow: 2.6; }
.container-top-a > .top-a.card:nth-child(1) { background-image: url("/images/img/slider/01.jpg"); }
.container-top-a > .top-a.card:nth-child(2) { background-image: url("/images/img/slider/02.jpg"); }
.container-top-a > .top-a.card:nth-child(3) { background-image: url("/images/img/slider/03.jpg"); }
.container-top-a > .top-a.card:nth-child(4) { background-image: url("/images/img/slider/04.jpg"); }
/* soft dark layer, lighter on hover (old "opacity layer") */
.container-top-a > .top-a.card::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(2,1,1,.35); transition: background .6s;
}
.container-top-a > .top-a.card:hover::before { background: rgba(2,1,1,.12); }
.container-top-a > .top-a.card > .card-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1.25rem;
  background: rgba(2,1,1,.25);
  color: #fff; z-index: 1;
}
.container-top-a h2 { margin: 0 0 .5rem; font-size: 1.6rem; text-transform: uppercase; }
.container-top-a h2 a,
.container-top-a h2 a:hover { color: #fff !important; text-decoration: none; }
.container-top-a .readmore { margin: 0; }
.container-top-a .readmore a,
.container-top-a .readmore a span {
  display: inline-block;
  color: #fff !important;
  background: var(--bm-brown);
  padding: .35rem .9rem;
  border-radius: 2px;
  text-decoration: none;
  font-size: .9rem;
}
.container-top-a .readmore a:hover { background: var(--bm-brown-light); }
/* the whole panel is clickable via its title link */
.container-top-a h2 a::after { content: ""; position: absolute; inset: 0; }
.container-top-a .readmore { position: relative; z-index: 2; }

/* ---------- Content + right column ---------- */
.site-grid { max-width: var(--bm-width); margin-left: auto; margin-right: auto; }
.container-sidebar-right .card {
  border: 1px solid #e5e5e5; border-radius: 0; box-shadow: none;
}
.container-sidebar-right .card-header {
  background: #f8f8f8; color: var(--bm-text);
  font-size: 1.05rem; text-transform: uppercase; border-bottom: 1px solid #e5e5e5;
}
.container-sidebar-right .mod-menu a { color: #333; }
.container-sidebar-right .mod-menu .active > a,
.container-sidebar-right .mod-menu a:hover { color: var(--bm-brown); }

.btn-primary, .btn-secondary, button.btn, .btn {
  background-color: var(--bm-brown); border-color: var(--bm-brown); color: #fff;
}
.btn-primary:hover, .btn-secondary:hover, button.btn:hover, .btn:hover {
  background-color: var(--bm-brown-light); border-color: var(--bm-brown-light); color: #fff;
}

/* ---------- Footer: light and centred ---------- */
.container-footer {
  background: #fff !important; background-image: none !important;
  color: #555; border-top: 1px solid #ececec; text-align: center;
}
.container-footer .grid-child { justify-content: center; }
.container-footer a { color: #555; }

/* ---------- Card grids (replacing the old Widgetkit grids) ---------- */
.bm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.bm-card {
  background: #fff;
  border: 1px solid #e3e3e3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bm-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: opacity .3s;
}
.bm-card a:hover img { opacity: .85; }
.bm-card-title { font-size: 1.1rem; margin: .9rem 1rem .4rem; }
.bm-card-title a { text-decoration: none; color: var(--bm-text); }
.bm-card-title a:hover { color: var(--bm-brown); }
.bm-card-body { margin: 0 1rem 1rem; font-size: .95rem; }
.bm-card-body p { margin: 0 0 .3rem; }
.bm-card-body ul { margin: 0; padding-left: 1.1rem; }

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  .container-top-a { flex-direction: column; height: auto; }
  .container-top-a > .top-a.card { flex: none; height: 150px; border-left: 0; border-top: 1px solid var(--bm-border); }
  .container-top-a > .top-a.card:first-child { border-top: 0; }
  .container-top-a > .top-a.card:hover { flex-grow: 0; }
  .container-header .container-search { position: static; text-align: center; }
}