:root {
      --background: white;
      --background-alt: #f7f5f2; /* gave your second background its own variable */
      --background-divider: #dddddd;
      --card: #c4c4c40a;
      --button: #000000;
      /* --button-foreground: #6a6e73; */
      --button-foreground: #4d9dff;
    }


    .instrument-serif-regular {
      font-family: "Instrument Serif", serif;
      font-weight: 400;
      font-style: normal;
    }

    .instrument-serif-regular-italic {
      font-family: "Instrument Serif", serif;
      font-weight: 400;
      font-style: italic;
    }


    .highlight-yellow {
      /* background-color: #fffae6; Light yellow */
      background-color: #fff3d0;
      padding: 0.2rem 0.8rem;
      display: inline-block;
      border-radius: 4px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      /* Override gradient text transparency */
      background-clip: padding-box !important;
      -webkit-background-clip: padding-box !important;
      -webkit-text-fill-color: #000000 !important;
      color: #2f3133 !important;
    }    

    .title.is-1 {
        font-size: 7rem;
    }

    /* Tablet and below */
    @media screen and (max-width: 1023px) {
        .title.is-1 {
            font-size: 4.5rem;
        }
    }

    /* Mobile */
    @media screen and (max-width: 768px) {
        .title.is-1 {
            font-size: 4rem;
        }

        /* Hide decorative background elements on mobile */
        .hero.is-white::before,
        .hero.is-white::after,
        .hero-content::before,
        .hero-content::after {
            display: none;
        }
    }    

    /* Global look */
    html, body {
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
      background-color: var(--background);
      color: var(--button-foreground);
    }

    html {
    overflow-y: scroll;
    }

    .button {
      border-radius: 2rem;;
    }
    /* Override Bulma primary to use custom palette */
    .is-primary,
    .button.is-primary {
      background-color: var(--button) !important;
      border-color: var(--button) !important;
      color: #fff !important;
    }

    .button.is-light {
      background-color: var(--background-alt);
      color: var(--button-foreground);
    }

    -button.is-background {
      background-color: var(--background);
      color: var(--button-foreground);
    }

    .navbar {
      background-color: var(--background);
      border-bottom: 1px solid var(--background-alt);
    }

    /* Hero & CTA background */
    .hero.is-white {
      background-color: var(--background);
      position: relative;
      overflow: hidden;
      background-image:
        /* Vertical grid lines */
        repeating-linear-gradient(
            to right,
            rgba(200, 220, 255, 0.25) 0,
            rgba(200, 220, 255, 0.25) 1px,
            transparent 1px,
            transparent 50px
        ),
        /* Horizontal grid lines */
        repeating-linear-gradient(
            to bottom,
            rgba(200, 220, 255, 0.25) 0,
            rgba(200, 220, 255, 0.25) 1px,
            transparent 1px,
            transparent 50px
        ),
        /* Main radial gradient */
        radial-gradient(
            ellipse at center,
            #fdfdff 70%,
            #f0f6ff 100%
        );
      background-size: 50px 50px, 50px 50px, 100% 100%;
    }

    /* Decorative background scales of justice */
    .hero.is-white::before,
    /* .hero.is-white::after {
      content: '⚖';
      position: absolute;
      font-size: 250px;
      color: rgba(200, 220, 240, 0.05);
      z-index: 0;
      filter: blur(7px);
    } */

    .hero.is-white::before {
      left: 10%;
      top: 50%;
      transform: translateY(-50%) rotate(-15deg);
    }

    .hero.is-white::after {
      right: 8%;
      top: 15%;
      transform: rotate(15deg);
    }

    /* Hero content wrapper for decorative shapes */
    .hero-content {
      position: relative;
      z-index: 1;
      /* max-width: 750px; */
      margin: 0 auto;
    }

    /* Decorative square and circle shapes */
    .hero-content::before,
    .hero-content::after {
      content: '';
      display: block;
      position: absolute;
      border: 3px solid rgba(200, 220, 240, 0.15);
      z-index: -1;
      filter: blur(1px);
    }

    .hero-content::before {
      /* Square */
      width: 150px;
      height: 150px;
      left: -5%;
      top: -5%;
      transform: rotate(10deg);
    }

    .hero-content::after {
      /* Circle */
      width: 120px;
      height: 120px;
      border-radius: 50%;
      right: -5%;
      bottom: -5%;
    }

    .has-background-primary-light {
      background-color: var(--background-alt) !important;
    }

    /* Boxes (feature cards) */
    .box {
      background-color: var(--card);
      /* border: 1px solid #e5e5e5; */
    }

  

    .icon .material-icons { line-height: 1; }


    /* background: linear-gradient(90deg, #003f60, #6a6e73, #b36a4c); */
    .gradient-text {
    /* background: linear-gradient(90deg, #000000, #2f3133, #b36a4c); */
    background: linear-gradient(90deg, #000000, #1b5556, #068127);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    /* font-weight: 700; */
    }


    .has-text-primary_lex {

      color: var(--button)
    }



/* --- CONVERTED CSS using RGBA for background fade --- */


    .modal {
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      /* transition: opacity 0.4s ease, visibility 0.4s ease; */
    }


    .modal-card {
      transform: translateY(-20px) scale(0.95);
      background-color: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      /* border: 1px solid rgba(255, 255, 255, 0.3); */
      /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); */
      box-shadow: 0 8px 32px rgba(255 202 67 / 15%);
      border: 2px solid rgba(255,255,255,0.2);
      border-radius: 20px;
    }

    .modal-card-head,
    .modal-card-body {
      background-color: transparent;
    }


    .modal.is-active {
      transform: translateY(0) scale(1);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    /* .modal-background {
      background-color: rgba(10, 10, 10, 0);
      transition: background-color 0.4s ease;
    } */

    .modal.is-active .modal-background {
      background-color: rgba(10, 10, 10, 0.2);
    }



    


    
      /* List container - remove default list styling */
    .cases-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    /* Custom styling for individual case items in the list */
    .case-item {
      border: 1px solid var(--background-divider);
      border-radius: 8px;
      transition: all 0.2s ease-in-out;
      overflow: hidden; /* Ensures link fills entire item */
    }

    /* Case link - make it fill the entire list item */
    .case-link {
      display: flex;
      width: 100%;
      text-decoration: none;
      color: inherit;
    }

    /* Add a subtle shadow and lift on hover for better interactivity */
    .case-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(10, 10, 10, 0.08);
    }

    /* Add space between the items, but not after the last one */
    .case-item:not(:last-child) {
      margin-bottom: 1rem;
    }

    /* Custom style for the sidebar menu background */
    .sidebar-menu {
      background-color: var(--background);
    }    

    /*
    * Custom Sidebar Menu Styles
    * -------------------------- */

    /* Apply a soft radius to all menu links */

    .menu-list a {
      background-color: var(--background);
    }

    /* Base style for all sidebar menu links - add transition here */
    .sidebar-menu .menu-list a {
      background-color: transparent;
      transition: opacity 0.2s ease;
    }

    /* Style for inactive menu links - make them more transparent */
    .sidebar-menu .menu-list a:not(.is-active) {
      opacity: 0.5;
    }

    /* Style for the currently active menu link - full opacity, no background */
    .sidebar-menu .menu-list a.is-active {
      background-color: transparent !important;
      color: var(--button-foreground);
      opacity: 1 !important;
    }

    /* Style for hovering over an inactive menu link - increase opacity on hover */
    .sidebar-menu .menu-list a:not(.is-active):hover {
      background-color: transparent;
      opacity: 0.8;
    }    

    /* Add vertical spacing between sidebar menu items */
    .sidebar-menu .menu-list li:not(:last-child) {
      margin-bottom: 0.5rem; /* Adjust this value as you see fit */
    }    

    /* Custom class for a fixed-width sidebar column */
    .sidebar-fixed-width {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      flex: none; /* Prevents the column from growing or shrinking */
      width: 200px; /* Set your desired fixed width here */
      transition: width 0.3s ease-in-out;
      z-index: 10;
    }

    /* Collapsed sidebar state */
    .sidebar-fixed-width.sidebar-collapsed {
      width: 60px;
    }

    /* Offset main content to account for fixed sidebar - desktop only */
    @media screen and (min-width: 769px) {
      .columns.is-gapless {
        padding-left: 200px;
      }

      /* Reduce parent padding when sidebar is collapsed */
      .columns.is-gapless:has(.sidebar-fixed-width.sidebar-collapsed) {
        padding-left: 60px !important;
      }

      /* Make main content expand to fill available space */
      #index_main {
        margin-left: 0;
        width: calc(100vw - 200px);
      }

      /* Expand main content when sidebar is collapsed */
      .sidebar-fixed-width.sidebar-collapsed ~ .column {
        width: calc(100vw - 60px) !important;
      }
    }

    /* Mobile: no padding offset needed */
    @media screen and (max-width: 768px) {
      .columns.is-gapless {
        padding-left: 0;
      }

      #index_main {
        width: 100%;
      }
    }

    /* Reduce padding when collapsed */
    .sidebar-collapsed .sidebar-menu {
      padding: 0.5rem !important;
    }

    /* Hide text elements when collapsed */
    .sidebar-collapsed .sidebar-text {
      opacity: 0;
      width: 0;
      overflow: hidden;
      transition: opacity 0.2s ease-in-out;
    }

    /* Show text when expanded */
    .sidebar-text {
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
    }

    /* Center icons when collapsed */
    .sidebar-collapsed .icon-text {
      justify-content: center;
    }

    /* Adjust menu items when collapsed */
    .sidebar-collapsed .menu-list a {
      justify-content: center;
      padding: 0.75rem 0.5rem;
      border-radius: 4px;
    }

    /* Ensure active item doesn't look too large when collapsed */
    .sidebar-collapsed .menu-list a.is-active {
      padding: 0.75rem 0.5rem;
    }

    /* Hide menu label when collapsed */
    .sidebar-collapsed .menu-label {
      opacity: 0;
      height: 0;
      overflow: hidden;
      margin: 0;
    }

    /* Adjust logo area when collapsed */
    .sidebar-collapsed .sidebar-logo-text {
      display: none;
    }

    /* Hide menu label but keep toggle button visible when collapsed */
    .sidebar-collapsed .menu-label-container .menu-label {
      display: none;
    }

    .sidebar-collapsed .menu-label-container {
      justify-content: center;
      margin-bottom: 1.5rem;
    }

    /* Adjust toggle button positioning when collapsed */
    .sidebar-collapsed .sidebar-toggle-btn {
      margin: 0;
      padding: 0.5rem;
    }

    /* Adjust logout button when collapsed */
    .sidebar-collapsed .button {
      padding: 0.75rem 0.5rem;
      justify-content: center;
    }

    /* Toggle button styling */
    .sidebar-toggle-btn {
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
      color: var(--button-foreground);
      transition: color 0.2s ease;
    }

    .sidebar-toggle-btn:hover {
      color: var(--button);
    }

    /* Tooltip for collapsed items */
    .sidebar-collapsed [data-tooltip] {
      position: relative;
    }

    .sidebar-collapsed [data-tooltip]:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 70px;
      top: 50%;
      transform: translateY(-50%);
      background-color: var(--button);
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      white-space: nowrap;
      z-index: 1000;
      font-size: 0.875rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .sidebar-collapsed [data-tooltip]:hover::before {
      content: '';
      position: absolute;
      left: 65px;
      top: 50%;
      transform: translateY(-50%);
      border: 5px solid transparent;
      border-right-color: var(--button);
      z-index: 1000;
    }

    .sidebar-toggle-icon.material-icons {
      font-size: 15px;/* your desired size */;
    }

    .navbar {
      border-bottom: 1px solid var(--background-alt);
    }

    .navbar-burger {
      color: var(--button-foreground);
    }     


    .navbar-container {
      font-size: 1.3em;
    }

    .navbar-container .is-justify-content-center {
      font-size: 1rem;
    }

    .navbar-text {
      color: var(--button-foreground)
    }

    
    /* Graph container css */

     .graph-container {
      width: 100%;
      /* height: 100vh; */
      height: 500px;  /* Or calc(50vh) for half viewport, etc. */
      overflow: hidden;  /* Optional: Clip any overflow */

      background-color: #ffffff;
      cursor: move;
      position: relative;
    }

    .graph-container svg {
      width: 100%;
      height: 100%;
    }

    .node {
      stroke: #151515;
      stroke-width: 1.5px;
      transition: fill 0.2s ease-in-out, transform 0.2s ease-in-out;
    }

    .node-label {
      fill: #3c3c3c;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-size: 10px;
      pointer-events: none;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .link {
      stroke: #555;
      stroke-opacity: 0.6;
      transition: stroke 0.2s ease-in-out, stroke-opacity 0.2s ease-in-out;
    }

    .controls-panel {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 10;
      background-color: #2c2c2c;
      padding: 1.5rem;
      border-radius: 6px;
      max-width: 250px;
    }
    .controls-panel .label {
      color: #ccc;
    }


    .tabs li.is-active a {

      color: var(--button-foreground)
    }