/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .standard-card a{
    color: #0060c0;
    font-weight: 400;
  }
  
  .standard-card a:hover{
    color: #071d33;
    font-weight: 400;
  }

  .highlight {
    background-color: yellow;
  }
  

      /* Sidebar search styling */
      .sidebar-search {
        margin-bottom: 15px;
      }
      #sidebar-search-input {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
      /* Fixed Sidebar */
      #sidebar {
        position: fixed;
        top: 100px;  /* Adjust if your header is taller */
        width: 240px !important;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        background-color: #fff;
        border-right: 1px solid #ddd;
        padding: 20px;
        z-index: 1000;
      }
      #sidebar ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      #sidebar li {
        margin-bottom: 10px;
      }
      /* Sidebar link styling with hover and active states */
      .grade-toggle, 
      #sidebar ul.grade-dropdown a {
        display: block;
        text-decoration: none;
        color: #333;
        padding: 5px;
        border-radius: 4px;
        transition: background-color 0.2s ease, color 0.2s ease;
      }
      .grade-toggle:hover, 
      #sidebar ul.grade-dropdown a:hover {
        background-color: #f0f0f0;
        color: #111;
      }
      /* When an item is active (by scroll or click) */
      #sidebar a.active {
        background-color: #ddd;
        color: #000;
      }
      /* Dropdown list hidden by default */
      .grade-dropdown {
        display: none;
        padding-left: 15px;
      }
      /* When parent li has .active, show dropdown */
      #sidebar li.active > .grade-dropdown {
        display: block;
      }
      /* Hide items during search */
      .hidden {
        display: none !important;
      }
      /* Main layout as Flexbox so sidebar and main content are side by side */
      .main-layout {
        display: flex;
        flex-direction: row;
      }
      main {
        flex: 1;
        padding: 20px;
        background-color: #f9f9f9;
      }

/* The Flex container that holds sidebar + main */
.main-layout {
    display: flex;         /* side-by-side layout */
    flex-direction: row;   /* default is row, but just to clarify */
  }

  /* Hover and Active States for Sidebar Links */

/* Hover over the grade link */
.grade-toggle {
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    color: #333;
    display: block;
    padding: 5px 0;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  
  /* On hover, change background and text color */
  .grade-toggle:hover {
    background-color: #f0f0f0; /* Light gray background */
    color: #111;              /* Darker text color */
  }
  
  /* Show an "active" state for the clicked (selected) item */
  #sidebar li.active > a.grade-toggle {
    background-color: #ddd; /* Slightly darker gray */
    color: #000;
  }
  
  /* Sub-menu (domain) links can also have a hover effect */
  .grade-dropdown a {
    text-decoration: none;
    color: #555;
    display: block;
    padding: 4px 0;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  
  /* Hover for sub-menu items */
  .grade-dropdown a:hover {
    background-color: #f2f2f2;
    color: #111;
  }
  
  /* Optionally highlight the sub-menu item if you want an "active" state there too */
  #sidebar li.active .grade-dropdown a[href*="CURRENT_SECTION_ID"] {
    background-color: #ddd;
    color: #000;
  }
  
  
  /* Fixed/Sticky Sidebar that does NOT cover the header */
  #sidebar {
    position: sticky; /* Alternatively, use position: fixed if you want it always in view */
    top: 100px;       /* Adjust this value to be below your header */
    left: 0;
    width: 350px;
    max-height: calc(100vh - 100px); /* Prevent overflow past viewport */
    overflow-y: auto;
    background-color: #fff;
    border-right: 1px solid #ddd;
    padding: 20px;
    z-index: 1000;
  }
  
  /* Sidebar list styles */
  #sidebar ul {
    list-style: none;
    padding-left: 0;
  }
  
  #sidebar li {
    margin-bottom: 10px;
  }
  
  /* Grade toggle styling */
  #sidebar .grade-toggle {
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    display: block;
    color: #333;
    padding: 5px;
  }
  
  /* Dropdown list initially hidden */
  #sidebar ul.grade-dropdown {
    display: none;
    margin-top: 5px;
    padding-left: 15px;
  }
  
  /* Show dropdown when parent has .active */
  #sidebar li.active ul.grade-dropdown {
    display: block;
  }
  
  /* Dropdown link styling */
  #sidebar ul.grade-dropdown a {
    text-decoration: none;
    color: #555;
    display: block;
    padding: 3px 0;
  }
  
  /* Ensure main content doesn't get covered by sidebar */
  main {
    padding: 20px;
  }
  
  
  /* Base Typography */
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    padding: 20px;
  }
  
  /* Hero Section */
  .alignment-hero {
    background: linear-gradient(135deg, #8254EA 0%, #E86DEC 100%) !important;
    padding: 30px 20px;
    border-radius: 8px;
    margin-bottom: 40px;
    text-align: center;
    margin-top: 20px;
  }
  
  .alignment-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: white;
  }
  
  .alignment-hero p {
    font-size: 1.2rem;
    color: white;
  }
  
  /* Standards Grid Wrap */
  .standards-grid-wrap {
    display: flex;
    justify-content: center;
  }
  
  /* Standards Grid */
  .standards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
    width: 96%;
  }


  
   h2 {
    grid-column: 1 / -1;
    margin-bottom: 1px;
    font-size: 2.4rem;
    font-weight: 900;
    background: linear-gradient(135deg, #8254EA, #E86DEC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradient-animation 3s ease infinite;
    margin-top: 20px;
  }

  h3{
    background: linear-gradient(135deg, #8254EA, #E86DEC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradient-animation 3s ease infinite;
  }

  h4{
    color: #0060c0 !important;
  }
  
  /* Standard Blocks */
  .standard-card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }
  
  .standard-card h4 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #333;
  }
  
  .standard-card p, 
  .standard-card ul {
    margin-bottom: 10px;
  }
  
  .standard-card ul {
    list-style: none;
    padding-left: 20px;
  }
  
  .standard-card li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
  }
  
  .standard-card li:last-child {
    border-bottom: none;
  }
  
  /* Download Section */
  .download-section {
    background-color: #f0f8ff;
    border: 1px dashed #0066cc;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-bottom: 40px;
  }
  
  .download-section h2 {
    margin-bottom: 15px;
    font-size: 1.8rem;
    color: #005bb5;
  }
  
  /* Footer */
  footer {
    text-align: center;
    font-size: 0.9rem;
    color: #777;
    margin-top: 40px;
    border-top: 1px solid #e2e2e2;
    padding-top: 20px;
  }
  
  /* Keyframes for gradient animation */
  @keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  

  /* ========== Base Layout (Desktop) ========== */
/* (Already defined in your main CSS) 
   The sidebar is on the left, main content on the right. */

/* ========== For screens up to 1024px ========== */
@media (max-width: 1024px) {
    /* Optionally shrink the sidebar a bit for mid-sized screens */
    #sidebar {
      width: 300px; /* or whatever you prefer */
    }
  }
  
  /* ========== For screens up to 768px ========== */
  @media (max-width: 768px) {
    /* Stack the layout vertically: sidebar on top, then main content */
    .main-layout {
      flex-direction: column; /* Switch from row to column */
    }
  
    /* Make the sidebar full-width and not fixed/sticky */
    #sidebar {
      position: relative;  /* remove sticky/fixed positioning */
      top: auto;
      left: auto;
      width: 100%;         /* let it stretch across entire width */
      max-height: none;    /* let the sidebar grow as needed */
      margin-bottom: 20px; /* space between sidebar and main */
      border-right: none;  /* remove vertical border */
      border-bottom: 1px solid #ddd; /* add a horizontal divider */
      padding: 15px;       /* reduce or adjust as you prefer */
    }
  
    /* Remove left margin from main so it spans the full width */
    main {
      margin-left: 0;
      padding: 15px;       /* adjust to your preference */
    }
  }
  
  
  /* ========== For screens up to 480px ========== */
  @media (max-width: 480px) {
    #sidebar {
      padding: 10px;
      font-size: 0.9rem;
    }
  
    .alignment-hero h1 {
      font-size: 1.8rem;
    }
    .alignment-hero p {
      font-size: 1rem;
    }
    main {
      padding: 10px;
    }
    .standard-card {
      padding: 15px;
    }
  }
  
  /* ========== For screens up to 320px ========== */
  @media (max-width: 320px) {
    body {
      padding: 5px;
      font-size: 0.85rem;
    }
    .alignment-hero h1 {
      font-size: 1.6rem;
    }
    .alignment-hero p {
      font-size: 0.9rem;
    }
    #sidebar,
    #sidebar a {
      font-size: 0.8rem;
    }
    main {
      padding: 5px;
    }
  }