/**
 * Notification Bar Styles
 *
 * Uses Xtra Theme design tokens from theme.json with fallbacks.
 *
 * Design tokens:
 * - Colors: var(--wp--preset--color--*)
 * - Spacing: var(--wp--preset--spacing--*)
 * - Font sizes: var(--wp--preset--font-size--*)
 */

/* ========================================
   Base Bar
   Hidden by default; JS adds .visible class
   ======================================== */

.xtra-notif {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--20, 0.5rem);
    padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--40, 1.5rem);
    font-family: var(--wp--preset--font-family--system-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    line-height: 1.4;
    color: #fff;
    position: relative;
    z-index: 9999;
}

.xtra-notif.visible {
    display: flex;
}

/* ========================================
   Style Variants
   ======================================== */

.xtra-notif--info {
    background-color: var(--wp--preset--color--primary, #3B6EA5);
}

.xtra-notif--warning {
    background-color: #d97706;
}

.xtra-notif--urgent {
    background-color: #dc2626;
}

/* ========================================
   Content Layout
   ======================================== */

.xtra-notif__content {
    flex: 1;
    text-align: center;
    min-width: 0;
}

.xtra-notif__message {
    word-wrap: break-word;
}

/* ========================================
   Link
   ======================================== */

.xtra-notif__link {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    white-space: nowrap;
}

.xtra-notif__link:hover {
    opacity: 0.85;
}

/* ========================================
   Dismiss Button
   ======================================== */

.xtra-notif__dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.8;
    transition: opacity 150ms ease;
}

.xtra-notif__dismiss:hover {
    opacity: 1;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 600px) {
    .xtra-notif {
        padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--30, 1rem);
        font-size: clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem);
    }
}