/*
 * Neumorphic style layer for the ENTER Studio Moodle front page.
 * Scoped to body#page-site-index so nothing else on the site is touched.
 * Light and dark palettes follow the visitor's system preference.
 */

/* ============================================================
   1. Palette
   ============================================================ */

body#page-site-index {
  --neu-bg-primary: #eef1f6;
  --neu-bg-secondary: #d5dae4;
  --neu-shadow-dark: #aeb4c0;
  --neu-shadow-light: #ffffff;

  --neu-primary: #5c00bf;
  --neu-primary-soft: #7c3aed;
  --neu-primary-bright: #a87fff;

  --neu-text: #333a45;
  --neu-text-strong: #1f2530;
  --neu-text-muted: #6b7280;

  --neu-radius-lg: 24px;
  --neu-radius-md: 16px;
  --neu-radius-sm: 12px;

  --neu-t-fast: 150ms;
  --neu-t-normal: 300ms;
}

@media (prefers-color-scheme: dark) {
  body#page-site-index {
    --neu-bg-primary: #363c48;
    --neu-bg-secondary: #232833;
    --neu-shadow-dark: #171b23;
    --neu-shadow-light: #454c5a;

    --neu-primary: #a87fff;
    --neu-primary-soft: #8b5cf6;
    --neu-primary-bright: #c4a6ff;

    --neu-text: #d7dbe3;
    --neu-text-strong: #f1f3f7;
    --neu-text-muted: #a2aab8;
  }
}

/* ============================================================
   2. Canvas
   ============================================================ */

body#page-site-index {
  /* Canvas runs darker than the surfaces so raised cards separate from it. */
  background: linear-gradient(160deg, var(--neu-bg-secondary), var(--neu-bg-primary));
  background-attachment: fixed;
  color: var(--neu-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body#page-site-index #page,
body#page-site-index #page-content,
body#page-site-index #page-wrapper,
body#page-site-index .main-inner,
body#page-site-index #topofscroll {
  background: transparent;
}

body#page-site-index h1,
body#page-site-index h2,
body#page-site-index h3,
body#page-site-index h4,
body#page-site-index h5 {
  color: var(--neu-text-strong);
  letter-spacing: -0.02em;
  font-weight: 600;
}

body#page-site-index a {
  color: var(--neu-primary);
}

body#page-site-index ::selection {
  background: var(--neu-primary-soft);
  color: #fff;
}

/* ============================================================
   3. Neumorphic primitives
   ============================================================ */

body#page-site-index .neu-raised,
body#page-site-index #region-main,
body#page-site-index .card,
body#page-site-index .coursebox,
body#page-site-index .block {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
  border: none;
  border-radius: var(--neu-radius-lg);
  box-shadow:
    8px 8px 16px var(--neu-shadow-dark),
    -8px -8px 16px var(--neu-shadow-light);
}

body#page-site-index #region-main {
  padding: 28px 26px;
  margin-top: 8px;
}

@media (max-width: 575.98px) {
  body#page-site-index #region-main {
    padding: 18px 14px;
    border-radius: var(--neu-radius-md);
  }
}

body#page-site-index .card-body,
body#page-site-index .card-header,
body#page-site-index .card-footer {
  background: transparent;
  border: none;
}

/* ============================================================
   4. Navbar
   ============================================================ */

body#page-site-index .navbar.fixed-top {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  border: none;
  box-shadow:
    0 6px 16px var(--neu-shadow-dark),
    0 -2px 10px var(--neu-shadow-light);
}

body#page-site-index .navbar .nav-link,
body#page-site-index .navbar .navbar-brand,
body#page-site-index .navbar .usermenu,
body#page-site-index .navbar .login a {
  color: var(--neu-text) !important;
  border-radius: var(--neu-radius-sm);
  transition: transform var(--neu-t-fast), box-shadow var(--neu-t-fast);
}

body#page-site-index .navbar .nav-link:hover,
body#page-site-index .navbar .login a:hover {
  color: var(--neu-primary) !important;
  transform: translateY(-1px);
}

body#page-site-index .navbar .nav-link.active {
  box-shadow:
    inset 3px 3px 6px var(--neu-shadow-dark),
    inset -3px -3px 6px var(--neu-shadow-light);
}

body#page-site-index .navbar-toggler {
  border-radius: var(--neu-radius-sm);
  box-shadow:
    4px 4px 8px var(--neu-shadow-dark),
    -4px -4px 8px var(--neu-shadow-light);
}

body#page-site-index .dropdown-menu {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
  border: none;
  border-radius: var(--neu-radius-md);
  box-shadow:
    8px 8px 16px var(--neu-shadow-dark),
    -8px -8px 16px var(--neu-shadow-light);
}

body#page-site-index .dropdown-item {
  color: var(--neu-text);
  border-radius: var(--neu-radius-sm);
}

body#page-site-index .dropdown-item:hover,
body#page-site-index .dropdown-item:focus {
  background: transparent;
  color: var(--neu-primary);
}

/* ============================================================
   5. Buttons
   ============================================================ */

body#page-site-index .btn {
  border: none;
  border-radius: var(--neu-radius-sm);
  font-weight: 500;
  padding: 11px 24px;
  transition: transform var(--neu-t-fast), box-shadow var(--neu-t-fast);
}

body#page-site-index .btn:not(.btn-primary):not(.btn-success):not(.btn-danger) {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
  color: var(--neu-text);
  box-shadow:
    5px 5px 10px var(--neu-shadow-dark),
    -5px -5px 10px var(--neu-shadow-light);
}

body#page-site-index .btn-primary {
  background: linear-gradient(145deg, var(--neu-primary-soft), var(--neu-primary));
  color: #fff;
  box-shadow: 5px 5px 12px var(--neu-shadow-dark);
}

body#page-site-index .btn:hover {
  transform: translateY(-2px);
}

body#page-site-index .btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 3px 3px 6px var(--neu-shadow-dark),
    inset -3px -3px 6px var(--neu-shadow-light);
}

/* ============================================================
   6. Inputs
   ============================================================ */

body#page-site-index input[type="text"],
body#page-site-index input[type="email"],
body#page-site-index input[type="password"],
body#page-site-index input[type="search"],
body#page-site-index select,
body#page-site-index textarea,
body#page-site-index .form-control {
  background: linear-gradient(145deg, var(--neu-bg-secondary), var(--neu-bg-primary));
  border: none;
  border-radius: var(--neu-radius-sm);
  color: var(--neu-text);
  padding: 11px 16px;
  box-shadow:
    inset 4px 4px 8px var(--neu-shadow-dark),
    inset -4px -4px 8px var(--neu-shadow-light);
}

body#page-site-index .form-control:focus {
  background: linear-gradient(145deg, var(--neu-bg-secondary), var(--neu-bg-primary));
  color: var(--neu-text);
  box-shadow:
    inset 4px 4px 8px var(--neu-shadow-dark),
    inset -4px -4px 8px var(--neu-shadow-light),
    0 0 0 3px rgba(124, 58, 237, 0.35);
}

body#page-site-index ::placeholder {
  color: var(--neu-text-muted);
  opacity: 1;
}

/* ============================================================
   7. Course cards (enrolled course list for signed-in users)
   ============================================================ */

body#page-site-index .coursebox {
  padding: 20px 22px;
  margin-bottom: 22px;
  transition: transform var(--neu-t-normal), box-shadow var(--neu-t-normal);
}

body#page-site-index .coursebox:hover {
  transform: translateY(-3px);
  box-shadow:
    11px 11px 22px var(--neu-shadow-dark),
    -11px -11px 22px var(--neu-shadow-light);
}

body#page-site-index .coursebox .coursename a {
  color: var(--neu-text-strong);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
}

body#page-site-index .coursebox .coursename a:hover {
  color: var(--neu-primary);
}

body#page-site-index .courseimage img,
body#page-site-index .coursebox img {
  border-radius: var(--neu-radius-md);
}

/* ============================================================
   8. Badges
   ============================================================ */

body#page-site-index .badge {
  border-radius: 999px;
  padding: 7px 15px;
  font-weight: 500;
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
  color: var(--neu-text);
  box-shadow:
    4px 4px 8px var(--neu-shadow-dark),
    -4px -4px 8px var(--neu-shadow-light);
}

body#page-site-index .badge-primary,
body#page-site-index .badge.bg-primary {
  background: linear-gradient(145deg, var(--neu-primary-soft), var(--neu-primary));
  color: #fff;
}

/* ============================================================
   9. Focus, skip link, scrollbar, motion
   ============================================================ */

body#page-site-index a:focus-visible,
body#page-site-index button:focus-visible,
body#page-site-index input:focus-visible,
body#page-site-index [tabindex]:focus-visible {
  outline: 3px solid var(--neu-primary);
  outline-offset: 2px;
}

body#page-site-index .sr-only-focusable:focus,
body#page-site-index .skip-block:focus {
  background: var(--neu-primary);
  color: #fff;
  border-radius: var(--neu-radius-sm);
  padding: 12px 24px;
  font-weight: 500;
}

body#page-site-index *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body#page-site-index *::-webkit-scrollbar-track {
  background: var(--neu-bg-secondary);
  border-radius: 5px;
}

body#page-site-index *::-webkit-scrollbar-thumb {
  background: linear-gradient(145deg, var(--neu-shadow-dark), var(--neu-bg-secondary));
  border-radius: 5px;
}

@media (prefers-reduced-motion: reduce) {
  body#page-site-index *,
  body#page-site-index *::before,
  body#page-site-index *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   10. Existing hand-written content
   The front page summary is built from inline-styled blocks.
   These rules lift the recurring patterns onto neumorphic
   surfaces so the page stays coherent in both palettes.
   ============================================================ */

body#page-site-index .course-content,
body#page-site-index .sitetopic,
body#page-site-index .topics.frontpage,
body#page-site-index li.section,
body#page-site-index .no-overflow,
body#page-site-index .description-inner {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* White panels -> raised neumorphic surfaces. */
body#page-site-index .summarytext [style*="background: #fff"],
body#page-site-index .summarytext [style*="background:#fff"],
body#page-site-index .summarytext [style*="background: white"],
body#page-site-index .summarytext [style*="background: rgb(255, 255, 255)"],
body#page-site-index .summarytext [style*="background-color: rgb(255, 255, 255)"],
body#page-site-index .summarytext [style*="background-color: #fff"] {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  border: none !important;
  border-radius: var(--neu-radius-md) !important;
  box-shadow:
    7px 7px 14px var(--neu-shadow-dark),
    -7px -7px 14px var(--neu-shadow-light) !important;
  color: var(--neu-text) !important;
}

/* Thin purple hairlines that read as noise on a soft canvas. */
body#page-site-index .summarytext [style*="border: 1px solid rgba(92, 0, 191, 0.15)"],
body#page-site-index .summarytext [style*="border: 1px solid rgba(92,0,191,0.15)"],
body#page-site-index .summarytext [style*="border: 1.5px solid rgba(92,0,191,0.25)"] {
  border: none !important;
}

/* Outlined purple buttons -> raised pills. */
body#page-site-index .summarytext a[style*="border: 2px solid rgb(92, 0, 191)"],
body#page-site-index .summarytext a[style*="border: 2px solid #5C00BF"] {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  border: none !important;
  border-radius: 999px !important;
  color: var(--neu-primary) !important;
  box-shadow:
    5px 5px 10px var(--neu-shadow-dark),
    -5px -5px 10px var(--neu-shadow-light) !important;
  transition: transform var(--neu-t-fast);
}

body#page-site-index .summarytext a[style*="border: 2px solid rgb(92, 0, 191)"]:hover,
body#page-site-index .summarytext a[style*="border: 2px solid #5C00BF"]:hover {
  transform: translateY(-2px);
}

/* Filled brand buttons keep the gradient, gain the soft edge. */
body#page-site-index .summarytext [style*="background-color: rgb(92, 0, 191)"],
body#page-site-index .summarytext [style*="linear-gradient(135deg, #5C00BF"] {
  border-radius: var(--neu-radius-md) !important;
  border: none !important;
  box-shadow: 6px 6px 14px var(--neu-shadow-dark) !important;
}

/* Muted greys were picked for a white page; re-point them at the palette. */
body#page-site-index .summarytext [style*="color: #666"],
body#page-site-index .summarytext [style*="color: #888"],
body#page-site-index .summarytext [style*="color:#666"] {
  color: var(--neu-text-muted) !important;
}

body#page-site-index .summarytext [style*="color: rgb(92, 0, 191)"],
body#page-site-index .summarytext [style*="color: #5C00BF"],
body#page-site-index .summarytext [style*="color:#5C00BF"] {
  color: var(--neu-primary) !important;
}

/* Images inside the hand-built blocks. */
body#page-site-index .summarytext img.img-fluid {
  border-radius: var(--neu-radius-md);
}

/* Horizontal rules become soft dividers. */
body#page-site-index .summarytext hr {
  border: none;
  height: 2px;
  background: transparent;
  box-shadow:
    inset 0 2px 4px var(--neu-shadow-dark),
    inset 0 -1px 2px var(--neu-shadow-light);
}

/* ============================================================
   11. Phones
   The hand-written blocks carry fixed widths from a desktop-first
   layout, so on narrow screens they push the page sideways and
   text gets cut off. These rules let them shrink instead.
   ============================================================ */

@media (max-width: 767.98px) {
  body#page-site-index .summarytext {
    overflow-x: hidden;
  }

  /* Inline runs (icon + label pairs) are flex items that refuse to shrink,
     so a long line pushes the page sideways. Let them wrap internally.
     The two-column blocks keep their 300px minimum and stack as designed. */
  body#page-site-index .summarytext strong,
  body#page-site-index .summarytext a,
  body#page-site-index .summarytext span {
    min-width: 0;
  }

  /* The blocks carry fixed pixel widths up to 1000px, which is what
     actually pushes the page sideways on a phone. Cap everything. */
  body#page-site-index .summarytext *,
  body#page-site-index .summarytext {
    max-width: 100% !important;
  }

  body#page-site-index .summarytext img,
  body#page-site-index .summarytext video,
  body#page-site-index .summarytext iframe {
    height: auto !important;
  }

  body#page-site-index .summarytext [style*="display: flex"],
  body#page-site-index .summarytext [style*="display:flex"] {
    flex-wrap: wrap !important;
  }
}

/* Dark palette: text inside the hand-written blocks stays readable. */
@media (prefers-color-scheme: dark) {
  body#page-site-index .summarytext,
  body#page-site-index .summarytext p,
  body#page-site-index .summarytext span,
  body#page-site-index .summarytext li,
  body#page-site-index .summarytext div,
  body#page-site-index .summarytext strong,
  body#page-site-index .summarytext td {
    color: var(--neu-text);
  }

  body#page-site-index .summarytext [style*="color: #221F20"],
  body#page-site-index .summarytext [style*="color: rgb(34, 31, 32)"],
  body#page-site-index .summarytext [style*="color: #000"],
  body#page-site-index .summarytext [style*="color: black"] {
    color: var(--neu-text) !important;
  }

  /* Screenshots and product shots shot on white get a soft frame
     instead of glaring against the dark canvas. */
  body#page-site-index .summarytext img {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }
}

/* ============================================================
   12. Signed-in chrome
   Elements that only appear once somebody is logged in.
   ============================================================ */

/* Tell the browser which palette the page is using so the window
   scrollbar and form widgets match instead of staying light. */
html:has(body#page-site-index) {
  color-scheme: light dark;
}

html:has(body#page-site-index)::-webkit-scrollbar,
body#page-site-index #page::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html:has(body#page-site-index)::-webkit-scrollbar-track,
body#page-site-index #page::-webkit-scrollbar-track {
  background: var(--neu-bg-secondary);
}

html:has(body#page-site-index)::-webkit-scrollbar-thumb,
body#page-site-index #page::-webkit-scrollbar-thumb {
  background: linear-gradient(145deg, var(--neu-shadow-dark), var(--neu-bg-secondary));
  border-radius: 5px;
}

/* Course-level tab bar (Home / Settings / Participants / ...).
   Boost paints it solid white, which cuts a bright band across the page.
   Rebuilt as the reference tab component: inset track, raised active pill. */
body#page-site-index .secondary-navigation {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body#page-site-index .secondary-navigation {
  margin-bottom: 8px;
}

/* The inset track lives on the nav, not on the list. Moodle's moremenu
   script folds items into "More" whenever the list grows taller than its
   parent, so the list itself must keep its stock box. */
body#page-site-index .secondary-navigation .moremenu {
  background: linear-gradient(145deg, var(--neu-bg-secondary), var(--neu-bg-primary)) !important;
  border-radius: var(--neu-radius-md);
  padding: 5px 8px;
  box-shadow:
    inset 4px 4px 8px var(--neu-shadow-dark),
    inset -4px -4px 8px var(--neu-shadow-light) !important;
}

body#page-site-index .secondary-navigation .nav-tabs {
  background: transparent;
  border: none;
  padding: 0;
}

/* Keep the horizontal footprint close to stock as well. */
body#page-site-index .secondary-navigation .nav-tabs .nav-link {
  border: none !important;
  border-radius: var(--neu-radius-sm);
  color: var(--neu-text-muted);
  font-weight: 500;
  padding: 8px 14px;
  transition: transform var(--neu-t-fast), box-shadow var(--neu-t-fast);
}

body#page-site-index .secondary-navigation .nav-tabs .nav-link:hover {
  color: var(--neu-text-strong);
  transform: translateY(-1px);
}

body#page-site-index .secondary-navigation .nav-tabs .dropdownmoremenu .nav-link {
  background: transparent;
}

body#page-site-index .secondary-navigation .nav-tabs .nav-link.active {
  background: linear-gradient(145deg, var(--neu-primary-soft), var(--neu-primary));
  color: #fff;
  box-shadow:
    4px 4px 8px var(--neu-shadow-dark),
    -4px -4px 8px var(--neu-shadow-light);
}

/* Enrolled course list: Moodle renders the cover at 100px wide, which
   turns a 854x377 banner into an unreadable chip. Give it a real
   thumbnail and set the row on one line. */
body#page-site-index .coursebox > .content {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

body#page-site-index .coursebox .courseimage {
  flex: 0 0 auto;
  width: 210px;
  max-width: 100%;
}

/* Boost caps course thumbnails at 100px, which squashes a 854x377 banner
   into an unreadable chip. Lift the cap and give it a real aspect ratio. */
body#page-site-index .coursebox .courseimage img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  border-radius: var(--neu-radius-md);
  box-shadow:
    5px 5px 10px var(--neu-shadow-dark),
    -5px -5px 10px var(--neu-shadow-light);
}

body#page-site-index .coursebox .summary,
body#page-site-index .coursebox .teachers {
  flex: 1 1 260px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body#page-site-index .coursebox .teachers li {
  list-style: none;
}

body#page-site-index .coursebox .coursename {
  margin-bottom: 14px;
}

/* Drawers and any other Bootstrap white surface on this page. */
body#page-site-index .drawer,
body#page-site-index .bg-white {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  color: var(--neu-text);
}

/* Editing-mode switch in the navbar. */
body#page-site-index .custom-control-label::before {
  background: linear-gradient(145deg, var(--neu-bg-secondary), var(--neu-bg-primary));
  border: none;
  box-shadow:
    inset 2px 2px 4px var(--neu-shadow-dark),
    inset -2px -2px 4px var(--neu-shadow-light);
}