/* 
================================================================================
START: CSS Custom Properties (Root Variables)
This section defines the primary color palette for the mega menu components.
Using CSS variables allows for easy theme management and consistent color
application across the styles.
================================================================================ 
*/
  :root {
    --primary-color: #6a0dad; /* Purple, color: #6a0dad */
    --accent-color: #ffd700;  /* Gold,   color: #ffd700 */
    --accent-dark: #daa520;   /* Darker gold, color: #daa520 */
  }


/* 
================================================================================
START: Pulsating Animation Keyframes
This defines the "pulsate-border-shadow" animation. It creates a slow, smooth
transition for the border color and the box-shadow glow, cycling from the
primary purple color to the accent yellow color and back, creating a living,
breathing effect for the menu windows.
================================================================================ 
*/
  @keyframes pulsate-border-shadow {
    from {
      border-color: var(--primary-color);
      box-shadow: 0 0 15px 0 rgba(106, 13, 173, 0.7), 0 10px 30px rgba(0, 0, 0, 0.25);
    }
    to {
      border-color: var(--accent-color);
      box-shadow: 0 0 25px 5px rgba(255, 215, 0, 0.8), 0 10px 30px rgba(0, 0, 0, 0.25);
    }
  }


/* 
================================================================================
START: Mega Menu Window Base Styles
These styles define the fundamental appearance and behavior of the draggable,
resizable mega menu windows. The border and box-shadow now have the pulsating
animation applied.
================================================================================ 
*/
  /* Fixed-position window that can be centered, dragged, resized */
  .mega-menu-window {
    display: none;
    position: fixed;
    z-index: 12000;
    /* MODIFIED: Initial shadow and border color set to match the animation start. */
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 15px 0 rgba(106, 13, 173, 0.7), 0 10px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    overflow: auto;
    will-change: top, left, width, height, opacity, transform;
    background: #fff;
    /* ADDED: This line applies the slow pulsating animation. */
    animation: pulsate-border-shadow 4s infinite alternate ease-in-out;
  }
  .mega-menu-window.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

  /* Used briefly while clamping to avoid transition jank */
  .mega-menu-window.__clamp {
    transition: none !important;
  }


/* 
================================================================================
START: Drag and Resize Handle Styles
This section styles the interactive handles for the mega menu windows. It
defines the invisible resize handles around the borders and sets the cursor to
indicate draggability on the header and resizability on the edges.
================================================================================ 
*/
  /* Drag + resize affordances (unchanged layout-wise) */
  .resize-handle { position: absolute; width: 12px; height: 12px; background: transparent; z-index: 12001; }
  .resize-nw { top: -6px; left: -6px; cursor: nwse-resize; } .resize-ne { top: -6px; right: -6px; cursor: nesw-resize; }
  .resize-sw { bottom: -6px; left: -6px; cursor: nesw-resize; } .resize-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
  .resize-n  { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
  .resize-s  { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
  .resize-w  { top: 50%; left: -6px; transform: translateY(-50%); cursor: ew-resize; }
  .resize-e  { top: 50%; right: -6px; transform: translateY(-50%); cursor: ew-resize; }
  .drag-handle { cursor: move; user-select: none; }


/* 
================================================================================
START: Reset Layout Button Styles
These styles control the appearance and position of the "Reset Menu Layout"
button. This button allows users to return all mega menu windows to their
default size and position.
================================================================================ 
*/
  #reset-layout-button {
    position: fixed; bottom: 20px; right: 20px; z-index: 12002;
    background-color: var(--accent-color); /* #ffd700 */
    color: var(--primary-color);           /* #6a0dad */
    font-family: 'Poppins', sans-serif; font-weight: 600; border: none;
    padding: 10px 20px; border-radius: 5px; cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: background-color 0.3s;
  }
  #reset-layout-button:hover { background-color: var(--accent-dark); /* #daa520 */ }


/* 
================================================================================
START: Responsive Design (Media Queries)
This section contains media queries to adapt the mega menu functionality for
smaller screens. On mobile devices, the drag/resize handles and reset button
are hidden, and the menu window is forced into a static, full-width modal view.
================================================================================ 
*/
  /* Mobile: force a sane viewport-fit dialog (no drag/resize handles) */
  @media (max-width: 991px) { 
    #reset-layout-button { 
      display: none; 
    } 
  }

  @media (max-width: 768px) {
    .mega-menu-window {
      width: 95vw !important;
      left: 2.5vw !important;
      top: 80px !important;
      transform: none !important;
      max-height: calc(100vh - 100px);
    }
    .resize-handle { 
      display: none; 
    }
  }


/* 
================================================================================
START: Box Sizing and Final Constraints
This small section ensures consistent box-sizing for the mega menu windows and
applies a final max-width constraint to specific menu IDs, preventing them
from becoming too wide on large screens.
================================================================================ 
*/
  .mega-menu-window { 
    box-sizing: border-box; 
  }
  #mega-menu-about, #mega-menu-careers, #mega-menu-gallery { 
    max-width: calc(100vw - 20px); 
  }