:root{
  --dbg-max-wide: 1320px;
  --dbg-max-normal: 1140px;
  --dbg-gutter: 16px;

  /* These are injected from template parameters (see index.php). */
  --dbg-body-bg:#ffffff;
  --dbg-header-bg:#f5f5f5;
  --dbg-footer-bg:#060454;
  --dbg-top1-bg:#060454;
  --dbg-text-primary:#060454;
  --dbg-text-h2:#4a4e55;
  --dbg-link:#00acf6;
  --dbg-button:#00acf6;
  --dbg-social-color:#060454;
  --dbg-menu-toggle:#060454;
  --dbg-menu-bg:#060454;

  --dbg-border: rgba(0,0,0,.08);
  --dbg-radius: 10px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--dbg-body-bg);
  color:var(--dbg-text-primary);
  line-height:1.5;
}

/* Typography colors */
h1, h3{ color:var(--dbg-text-primary); }
h2{ color:var(--dbg-text-h2); }

/* Links + buttons */
a{ color:var(--dbg-link); }
a:hover{ opacity:.9; }

.btn-primary,
.btn.btn-primary{
  background-color:var(--dbg-button);
  border-color:var(--dbg-button);
}

.btn-primary:hover,
.btn.btn-primary:hover{ opacity:.95; }

.dbg-container{ margin:0 auto; padding:0 var(--dbg-gutter); max-width:var(--dbg-max-wide); }
.dbg-container--normal{ max-width:var(--dbg-max-normal); }
.dbg-container--wide{ max-width:var(--dbg-max-wide); }

/* Accessibility */
.dbg-skiplink{ position:absolute; left:-999px; top:0; padding:10px 12px; background:#000; color:#fff; z-index:9999; }
.dbg-skiplink:focus{ left:10px; top:10px; }

/* Sticky header */
.dbg-header{
  position:sticky;
  top:0;
  z-index:1200;
  background:var(--dbg-header-bg);
  border-bottom:1px solid var(--dbg-border);
}

.dbg-header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
}

.dbg-brand__link{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.dbg-brand__text{ font-weight:800; font-size:1.1rem; letter-spacing:.2px; }
/* Logo sizing (bigger by default, slightly smaller on phones) */
.dbg-logo{ height:58px; width:auto; display:block; }

@media (max-width: 720px){
  .dbg-logo{ height:48px; }
}

.dbg-header__right{ display:flex; align-items:center; gap:8px; }

/* Social icons */
.dbg-social{ display:flex; gap:6px; align-items:center; }
.dbg-social__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  text-decoration:none;
  color:var(--dbg-social-color);
}
.dbg-social__icon{ width:20px; height:20px; fill: currentColor; }

/* Hamburger */
.dbg-menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  color:var(--dbg-menu-toggle);
  cursor:pointer;
}
.dbg-menu-toggle__icon{ width:30px; height:30px; fill: currentColor; }

/* Offcanvas menu */
.dbg-offcanvas-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:1990;
}

.dbg-offcanvas{
  position:fixed;
  top:0;
  right:-340px;
  width:340px;
  max-width:85vw;
  height:100vh;
  background:var(--dbg-menu-bg);
  color:#fff;
  z-index:2000;
  transition:right .22s ease;
  overflow:auto;
}

.dbg-offcanvas.is-open{ right:0; }

.dbg-offcanvas__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.18);
}

.dbg-offcanvas__title{ font-weight:800; letter-spacing:.2px; }

.dbg-offcanvas__close{
  width:40px;
  height:40px;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
}
.dbg-offcanvas__close svg{ width:22px; height:22px; fill: currentColor; }

.dbg-offcanvas__nav{ padding:12px 16px 20px; }

/* Style typical Joomla menu markup inside offcanvas */
.dbg-offcanvas__nav ul{ list-style:none; padding:0; margin:0; }
.dbg-offcanvas__nav li{ margin:0; }
.dbg-offcanvas__nav a{
  display:block;
  padding:10px 6px;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.dbg-offcanvas__nav a:hover{ color:var(--dbg-link); }

/* Submenus default hidden (JS will manage panels) */
.dbg-offcanvas__nav ul ul{ display:none; }
.dbg-offcanvas__nav ul ul[hidden]{ display:none !important; }

/* Parent item: space for chevron */
.dbg-offcanvas__nav li.dbg-has-children{ position:relative; }
.dbg-offcanvas__nav li.dbg-has-children > a{ padding-right:44px; }

.dbg-offcanvas__nav .dbg-submenu-toggle{
  position:absolute;
  top:50%;
  right:4px;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.dbg-offcanvas__nav .dbg-submenu-toggle span{ font-size:22px; line-height:1; }
.dbg-offcanvas__nav .dbg-submenu-toggle:focus{ outline:2px solid rgba(255,255,255,.35); outline-offset:2px; }


/* Sections under header */
.dbg-showcase{ width:100%; }

.dbg-top1{
  background:var(--dbg-top1-bg);
  color:#fff;
  padding:18px 0;
}
.dbg-top1 a{ color:#fff; text-decoration:underline; }
.dbg-top1 a:hover{ color:var(--dbg-link); }

.dbg-top2,
.dbg-top3{ padding:18px 0; }

/* Main layout (with optional sidebars) */
.dbg-main{ padding:18px 0 28px; }

.dbg-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}

.dbg-layout.has-left.has-right{ grid-template-columns: 280px 1fr 280px; }
.dbg-layout.has-left:not(.has-right){ grid-template-columns: 280px 1fr; }
.dbg-layout.has-right:not(.has-left){ grid-template-columns: 1fr 280px; }

.dbg-sidebar{ min-width:0; }
.dbg-content{ min-width:0; }

/* Hide sidebars for mobile app < 720px */
@media (max-width: 720px){
  .dbg-layout{ grid-template-columns: 1fr !important; }
  .dbg-sidebar{ display:none; }
}

/* Footer */
.dbg-footer{
  background:var(--dbg-footer-bg);
  color:#fff;
  padding:20px 0;
}

.dbg-footer__menu{ margin-bottom:14px; }

/* Footer menu: force horizontal (some core/module CSS can override list styling) */
.dbg-footer__menu ul,
.dbg-footer__menu ul.nav,
.dbg-footer__menu ul.menu,
.dbg-footer__menu ul.mod-menu,
.dbg-footer__menu ul.mod-list{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
}

/* Also ensure items don't stack as block elements */
.dbg-footer__menu li,
.dbg-footer__menu li.nav-item{
  position:relative;
  padding:0 10px;
  margin:0 !important;
  display:inline-flex;
}

.dbg-footer__menu li:not(:last-child)::after{
  content:"·";
  position:absolute;
  right:-2px;
  top:0;
  color:rgba(255,255,255,.75);
}

.dbg-footer__menu a{ color:#fff; text-decoration:none; }
.dbg-footer__menu a:hover{ color:var(--dbg-link); }

.dbg-footer__modules{ margin: 10px 0 0; }

.dbg-footer__copyright{
  margin-top:12px;
  text-align:center;
  opacity:.9;
  font-size:.95rem;
}


/* Logo sizing via template params */
.dbg-logo svg,
.dbg-logo img{
  height: var(--dbg-logo-h-desktop, 64px);
  width: auto;
  display: block;
}
@media (max-width: 991.98px){
  .dbg-logo svg,
  .dbg-logo img{ height: var(--dbg-logo-h-tablet, 56px); }
}
@media (max-width: 719.98px){
  .dbg-logo svg,
  .dbg-logo img{ height: var(--dbg-logo-h-mobile, 48px); }
}


/* === Offcanvas menu: drilldown + separators (scoped; does not affect page layout) === */
.dbg-offcanvas .module-title,
.dbg-offcanvas .moduletitle,
.dbg-offcanvas .module > h3,
.dbg-offcanvas .module > h2{
  display:none !important;
}

.dbg-offcanvas__nav .mod-menu ul,
.dbg-offcanvas__nav ul.menu,
.dbg-offcanvas__nav ul.nav{
  list-style:none;
  margin:0;
  padding:0;
}

.dbg-offcanvas__nav .mod-menu a,
.dbg-offcanvas__nav a{
  color:#fff;
}

.dbg-offcanvas__nav .dbg-menu-panel{
  display:none;
}
.dbg-offcanvas__nav .dbg-menu-panel.is-active{
  display:block;
}

.dbg-offcanvas__nav .dbg-menu-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.dbg-offcanvas__nav .dbg-menu-link{
  display:block;
  padding:18px 20px;
  text-decoration:none;
  flex:1 1 auto;
}
.dbg-offcanvas__nav .dbg-menu-chev{
  background:transparent;
  border:0;
  color:rgba(255,255,255,.85);
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin-right:6px;
}
.dbg-offcanvas__nav .dbg-menu-chev svg{ width:18px; height:18px; }

.dbg-offcanvas__back{
  background:transparent;
  border:0;
  color:#fff;
  width:44px;
  height:44px;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0;
  margin-right:6px;
}
.dbg-offcanvas.is-submenu .dbg-offcanvas__back{ display:flex; }


/* --- Offcanvas menu title visibility + drilldown --- */
.dbg-offcanvas__head .dbg-menu-title{
  color:#ffffff;
  opacity:1;
  visibility:visible;
  font-weight:600;
  letter-spacing:.08em;
}

/* Back button */
.dbg-offcanvas__back{
  border:0;
  background:transparent;
  padding:0.25rem;
  margin-right:0.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
}
.dbg-offcanvas__back svg{width:24px;height:24px;fill:currentColor;}

/* Submenu defaults (JS toggles [hidden]) */
.dbg-offcanvas__nav .mod-menu ul[hidden]{display:none !important;}
.dbg-offcanvas__nav .mod-menu li{position:relative;}
.dbg-offcanvas__nav .mod-menu li.dbg-has-children > .dbg-submenu-toggle{
  position:absolute;
  right:0.75rem;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:rgba(255,255,255,0.75);
  font-size:1.75rem;
  line-height:1;
  padding:0;
}
.dbg-offcanvas__nav .mod-menu li.dbg-has-children > a{
  padding-right:2.5rem; /* ruimte voor chevron */
}


/* --- DBG Offcanvas Menu: ensure title visible and submenus toggleable --- */
.dbg-offcanvas-header .dbg-menu-title{
  color:#fff;
  opacity:1;
  visibility:visible;
  font-weight:600;
  letter-spacing:.08em;
}

/* Default: hide submenus */
.dbg-offcanvas .mod-menu ul ul,
.dbg-offcanvas .menu ul ul{
  display:none;
}

/* Parent items layout: reserve room for chevron */
.dbg-offcanvas .mod-menu li.dbg-has-submenu,
.dbg-offcanvas .menu li.dbg-has-submenu{
  position:relative;
}

.dbg-offcanvas .mod-menu li.dbg-has-submenu > a,
.dbg-offcanvas .menu li.dbg-has-submenu > a{
  padding-right:44px;
}

/* Chevron toggle button */
.dbg-offcanvas .dbg-submenu-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.dbg-offcanvas .dbg-submenu-toggle::before{
  content:"›";
  font-size:26px;
  line-height:1;
  transition:transform .15s ease;
}

/* Open state */
.dbg-offcanvas li.dbg-open > .dbg-submenu-toggle::before{
  transform:rotate(90deg);
}

/* Submenu styling */
.dbg-offcanvas ul.dbg-submenu{
  padding-left:18px;
}