/*
 * Compatibility bridge: maps legacy ISP CSS custom property names → HO design
 * tokens. This lets the isp-app.css class names inherit HO values without
 * rewriting 2,000+ lines of selectors.
 */
:root {
  /* Colours */
  --primary-color:        var(--ho-delft-500);
  --primary-hover:        var(--ho-delft-600);
  --accent-color:         var(--ho-orange-500);
  --border-color:         var(--ho-border);
  --border-radius:        var(--ho-radius-md);

  /* Aliases used by module CSS (oefeningen.css, type_in_the_blanks.css) */
  --color-primary:        var(--ho-delft-500);
  --color-accent:         var(--ho-orange-500);
  --color-sidebar:        var(--ho-delft-700);
  --color-border:         var(--ho-border);

  /* Text */
  --text-main:            var(--ho-fg);
  --text-muted:           var(--ho-fg-muted);
  --text-light:           var(--ho-fg-subtle);

  /* Backgrounds */
  --bg-page:              var(--ho-bg);
  --bg-subtle:            var(--ho-bg-sunken);
  --bg-raised:            var(--ho-bg-raised);

  /* Layout */
  --sidebar-width:        248px;
  --content-px:           clamp(1.5rem, 4vw, 4rem);
  --content-py:           1.5rem;

  /* Spacing */
  --space-xs:             var(--ho-sp-1);
  --space-sm:             var(--ho-sp-2);
  --space-md:             var(--ho-sp-4);
  --space-lg:             var(--ho-sp-5);
  --space-xl:             var(--ho-sp-6);
  --space-2xl:            var(--ho-sp-7);

  /* Cards & radius */
  --radius-card:          var(--ho-radius-lg);
  --radius-sm:            var(--ho-radius-sm);

  /* Transitions */
  --transition-duration:  var(--ho-dur-3);
}

/* Override sidebar active/hover colours to HO orange */
.app-sidebar-tab.active {
  background: var(--ho-orange-50) !important;
  color:      var(--ho-orange-600) !important;
}

.app-sidebar-tab:hover:not(.active) {
  background: var(--ho-polder-100) !important;
}

.app-sidebar-menu ul.menu li a.is-active,
.app-sidebar-menu .menu-item--active-trail > a {
  background:        var(--ho-orange-50) !important;
  border-left-color: var(--ho-orange-500) !important;
  color:             var(--ho-orange-700) !important;
}

/* Page-title bar: HO delft background */
.isp-page-title-bar {
  background: var(--ho-delft-500) !important;
}

.isp-page-title-bar__title,
.isp-page-title-bar__eyebrow,
.isp-page-title-bar__subtitle {
  color: #fff !important;
}

/* Sidebar header: HO brand instead of ISP */
.app-sidebar-header {
  border-bottom: 1px solid var(--ho-border) !important;
}

.site-logo-placeholder {
  gap: var(--ho-sp-2) !important;
}

.site-logo-placeholder span {
  font-family: var(--ho-font-display) !important;
  font-weight: 700 !important;
  color: var(--ho-ink-700) !important;
  letter-spacing: -0.03em !important;
}

/* Course nav primary menu inside l-sidebar for lesson pages */
.l-sidebar nav ul.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.l-sidebar nav ul.menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ho-fg);
  border-radius: var(--ho-radius-sm);
  text-decoration: none;
  transition: background 120ms;
}
.l-sidebar nav ul.menu a:hover {
  background: var(--ho-bg-sunken);
}
.l-sidebar nav ul.menu a.is-active,
.l-sidebar nav ul.menu li.menu-item--active-trail > a {
  background: var(--ho-orange-50);
  color: var(--ho-orange-700);
  font-weight: 600;
}

/* Drupal admin toolbar: shrink the app grid to fit below the fixed bar */
body.toolbar-fixed .l-app {
  height: calc(100dvh - 39px);
  margin-top: 39px;
}
body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .l-app {
  height: calc(100dvh - 39px - 48px);
  margin-top: calc(39px + 48px);
}

/* Lesson mode bar inside l-main (no extra top padding needed) */
.lesson-mode-bar {
  background: #fff;
  border-bottom: 1px solid var(--ho-border);
  padding: 12px 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}