/* Global styles for Berceau - Bulma CSS variable overrides and custom styles */

/*
 * Bulma CSS Variable Overrides
 * 
 * Customize the Bulma theme by overriding CSS variables.
 * These variables affect the entire application's color scheme and typography.
 * 
 * For a complete list of available Bulma CSS variables, see:
 * https://bulma.io/documentation/customize/with-css-variables/
 */

:root {
  /* Primary Color - Used for primary buttons, links, and key UI elements
   * Default: HSL(171, 100%, 41%) - Turquoise
   * Format: Hue (0-360), Saturation (0-100%), Lightness (0-100%)
   */
  --bulma-primary-h: 217;
  --bulma-primary-s: 71%;
  --bulma-primary-l: 53%;

  /* Link Color - Used for text links and link buttons
   * Default: HSL(229, 53%, 53%) - Blue
   */
  --bulma-link-h: 217;
  --bulma-link-s: 71%;
  --bulma-link-l: 53%;

  /* Typography - Font family for the entire application
   * Default: system font stack
   */
  --bulma-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";

  /* Border Radius - Roundness of elements
   * Default: 4px
   * Uncomment to customize:
   * --bulma-radius: 6px;
   * --bulma-radius-small: 3px;
   * --bulma-radius-large: 8px;
   * --bulma-radius-rounded: 9999px;
   */
}

/*
 * Custom Overrides
 * 
 * Add project-specific styles that override or extend Bulma defaults.
 * Keep these minimal - prefer using Bulma's built-in classes when possible.
 */

 .left-menu {
    width: 300px !important;

    nav {
      height: 100vh;
    }

    @media (max-width: 768px) {
      width: 100% !important;

      nav {
        height: auto;
      }
    }
 }

@media (max-width: 768px) {
  .demo-page {
    padding: 1rem;
  }
}

/*
 * Sidebar Submenu Styles
 * 
 * Styles for expandable navigation sections in the left menu.
 */

/* Parent menu item with children */
.menu-parent {
  .menu-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.5em 0.75em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1em;
    color: inherit;
    border-radius: var(--bulma-radius, 4px);

    &::after {
      content: "▸";
      margin-left: auto;
      font-weight: 600;
      opacity: 0.8;
      transform: rotate(0deg);
      transition: transform 120ms ease-in-out;
    }

    &[aria-expanded="true"]::after {
      transform: rotate(90deg);
    }

    &:hover {
      background-color: var(--bulma-scheme-main-bis);
    }

    &:focus {
      outline: 2px solid var(--bulma-link);
      outline-offset: -2px;
    }
  }

  /* Submenu collapsed by default */
  .submenu {
    display: none;
    margin-left: 0.75em;
    margin-top: 0.25em;
    list-style: none;
    padding-left: 0.75em;
    border-left: 1px solid var(--bulma-border, rgba(0, 0, 0, 0.12));
  }

  /* Show submenu when expanded */
  &.is-expanded .submenu {
    display: block;
  }
}