/* === MOBILE MENU STYLE MATCH TO DESKTOP === */

.offcanvas-body {
  background-color: #555;        /* match desktop main menu */
  color: #fff;
}

.offcanvas-body .mod-menu a,
.offcanvas-body .mod-menu span {
  display: block;
  padding: 14px 18px;
  color: #fff;
  background-color: #555;
  border-bottom: 1px solid #444;
  transition: background-color 250ms linear;
}

.offcanvas-body .mod-menu a:hover,
.offcanvas-body .mod-menu span:hover {
  background-color: #000;        /* same hover as desktop */
  color: #fff;
}

/* handle active items */
.offcanvas-body .active > a,
.offcanvas-body .active > span {
  background-color: #000;
  font-weight: bold;
}

/* sub-menu styling inside mobile menu */
.offcanvas-body .mod-menu__sub {
  display: none;
  background-color: #444;        /* slightly darker for nested look */
  padding-left: 1rem;
  margin-bottom: 5px;
}

.offcanvas-body .mod-menu__sub a {
  background-color: #444;
  color: #fff;
  border: none;
  padding: 10px 18px;
}

/* when a submenu is toggled open (via .open class or JS) */
.offcanvas-body .mod-menu__sub.open {
  display: block !important;
}

/* subtoggle (arrow button) styling */
.offcanvas-body .subtoggle {
  filter: invert(1);             /* white arrows on dark bg */
  transition: transform 0.2s linear;
}

.offcanvas-body .subtoggle.open {
  transform: rotate(-180deg);
}

/* ensure links fill full width of mobile drawer */
.offcanvas-body .nav-item {
  width: 100%;
  border-bottom: 1px solid #444;
}

/* remove double borders at end */
.offcanvas-body .nav-item:last-child {
  border-bottom: none;
}


/* === CENTERED JOOMLA BANNER WITH BLACK FRAME & SHADOW === */
.mod-banners,
.bannergroup {
  width: min(1200px, 100%);
  margin: 1.5rem auto 2rem;   /* centers module */
  text-align: center;
}

/* Normal images or linked images */
.bannergroup img,
.bannergroup a img,
.mod-banners img,
.mod-banners a img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 3px solid #000 !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

/* In case template outputs the banner as a link with background image */
.bannergroup a,
.mod-banners a {
  display: inline-block;
  border: 3px solid #000 !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  margin: 0 auto;
}