/* =============================================================
   lovable_behavior.css

   Behavior-only utilities for the new "lovable" UI.
   This file deliberately contains BEHAVIOR (interaction, motion,
   show/hide on hover) and NOT visual appearance (colors,
   backgrounds, borders, typography). Visual styling is expected
   to come from Tailwind utility classes in styles.css.

   Why a separate file?
   - The legacy button_ripple.css and button_drop.css mix
     behavior with legacy appearance and target raw element
     selectors (button, a, nav menuitem). That makes them unsafe
     to reuse in the new UI and impossible to prune cleanly later.
   - Everything here is namespaced with a `lovable-` prefix so the
     legacy CSS can be deleted later without affecting the new UI.

   Classes provided:
   - .lovable-ripple        : press / hover micro-interaction
                              (no colors, no borders).
   - .lovable-dropdown      : hover-driven dropdown container
                              (the menu under it is hidden until
                              the container is hovered).
   - .lovable-dropdown-menu : the panel that appears on hover.
   ============================================================= */


/* -------------------------------------------------------------
   Ripple / press micro-interaction
   Behavior only: scale on press, subtle hover dim, smooth
   transition. No background, no border, no color.
   Apply on a <button> or <a> together with whatever appearance
   classes you want (Tailwind, etc.).
   ------------------------------------------------------------- */
.lovable-ripple {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

.lovable-ripple:hover {
    filter: brightness(85%);
}

.lovable-ripple:active {
    transform: scale(0.92);
}


/* -------------------------------------------------------------
   Hover dropdown
   Behavior only: the menu panel is hidden by default and revealed
   when the user hovers (or keyboard-focuses) the container.
   Appearance (background, border, shadow, spacing, text) must be
   supplied by the markup (Tailwind utility classes recommended).

   Markup contract:
     <div class="lovable-dropdown">
         <button type="button" ...>Label</button>
         <div class="lovable-dropdown-menu" role="menu">
             ...items...
         </div>
     </div>
   ------------------------------------------------------------- */
.lovable-dropdown {
    position: relative;
    display: inline-block;
}

.lovable-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    z-index: 50;

    /* Hidden by default. We use opacity + visibility instead of
       display:none so a fade transition is possible and so that
       focus inside the menu works smoothly. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

/* Reveal on hover of the container, or when any descendant has
   keyboard focus (accessibility). */
.lovable-dropdown:hover > .lovable-dropdown-menu,
.lovable-dropdown:focus-within > .lovable-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}