/**
 * Alert Bar Component Styles - Updated with Menu Hiding Support
 * 
 * This file contains styles specific to the alert bar component.
 * It imports the main variables and uses them for styling.
 */

/* TEST */

 @import url('../../assets/css/main-variables.css');

 .alert-bar {
   width: 100%;
   height: 36px;
   position: relative;
   display: flex;
   align-items: center;
   transition: all 0.3s ease; /* Updated to animate all properties */
   z-index: 1000; /* Ensure it stays on top but below mobile menu */
 }
 
 /* Disabled/Dismissed state - decorative gradient bar */
 .alert-bar.disabled,
 .alert-bar.dismissed {
   height: 8px;
   background: linear-gradient(to left, var(--secondary-300), var(--primary-300));
   overflow: hidden;
 }
 
 .alert-bar.disabled .container,
 .alert-bar.dismissed .container {
   display: none;
 }
 
 /* NEW: Hidden state when mobile menu is open */
 .alert-bar.menu-open-hidden {
   transform: translateY(-100%);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   height: 0;
   overflow: hidden;
   transition: all 0.3s ease;
 }
 
 .alert-bar .container {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   width: 100%;
   height: 100%;
 }
 
 /* Alert message base styles */
 .alert-message {
   margin: 0;
   font-family: var(--font-primary);
   font-size: 0.75rem; /* 12px equivalent */
   font-weight: var(--font-weight-black);
   line-height: 1;
   color: inherit; /* Inherit from parent for flexibility */
   text-align: center;
   text-transform: uppercase;
   transition: transform 0.2s ease;
 }
 
 /* Link wrapper for alert message */
 .alert-message-link {
   text-decoration: none;
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.2s ease;
   cursor: pointer;
   padding: var(--spacing-1) var(--spacing-2);
   border-radius: var(--radius-sm);
 }
 
 /* Hover effect for linked alert messages */
 .alert-message-link:hover {
   transform: scale(1.025);
   text-decoration: none;
 }
 
 /* Ensure message inside link inherits properly */
 .alert-message-link .alert-message {
   color: inherit;
 }
 
 /* Close button */
 .alert-close {
   background: none;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   margin-left: var(--spacing-4);
   color: inherit;
   position: absolute;
   right: var(--spacing-4);
   top: 50%;
   transform: translateY(-50%);
   font-size: 1rem; /* 16px equivalent */
   transition: opacity 0.2s ease;
   z-index: 1001; /* Above the link */
 }
 
 .alert-close:hover {
   opacity: 0.7;
 }
 
 .alert-close i {
   font-size: inherit;
 }
 
 /* Color variations for different alert types */
 .alert-bar.bg-red-500 {
   background-color: var(--red-500);
 }
 
 .alert-bar.bg-yellow-400 {
   background-color: var(--yellow-400);
 }
 
 .alert-bar.bg-green-500 {
   background-color: var(--green-500);
 }
 
 .alert-bar.bg-blue-500 {
   background-color: var(--blue-500);
 }
 
 /* Text color utilities */
 .alert-bar.text-white {
   color: white;
 }
 
 .alert-bar.text-gray-50 {
   color: var(--gray-50);
 }
 
 .alert-bar.text-gray-900 {
   color: var(--gray-900);
 }
 
 .alert-bar.text-primary-900 {
   color: var(--primary-900);
 }
 
 .alert-bar.text-primary-100 {
   color: var(--primary-100);
 }
 
 /* Accessibility improvements */
 .alert-message-link:focus {
   outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
 .alert-close:focus {
   outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
 /* Ensure proper contrast for links */
 .alert-bar.bg-primary-900 .alert-message-link:hover,
 .alert-bar.bg-red-500 .alert-message-link:hover,
 .alert-bar.bg-blue-500 .alert-message-link:hover,
 .alert-bar.bg-green-500 .alert-message-link:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
 .alert-bar.bg-primary-100 .alert-message-link:hover,
 .alert-bar.bg-yellow-400 .alert-message-link:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
 /* Responsive Adjustments */
 @media (max-width: 768px) {
   .alert-bar {
     height: 32px; /* Slightly smaller on mobile */
   }
   
   .alert-close {
     right: var(--spacing-2);
   }
   
   .alert-message {
     font-size: 0.7rem; /* Slightly smaller on mobile */
   }
   
   /* Reduce scaling effect on mobile for better touch interaction */
   .alert-message-link:hover {
     transform: scale(1.02);
   }
 }
 
 @media (max-width: 480px) {
   .alert-bar {
     height: 28px; /* Even smaller on very small screens */
   }
   
   .alert-message {
     font-size: 0.65rem;
     padding: 0 var(--spacing-8); /* Add padding to prevent overlap with close button */
   }
   
   .alert-close {
     font-size: 0.9rem;
   }
 }