/* ==========================================================================
   Library Utility Widget Styles — libraryhours24.com
   Mobile-first, accessible, dark-mode-aware
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom Properties (scoped to this widget)
   -------------------------------------------------------------------------- */
:root {
    /* Status: Open */
    --lu-open-bg: #ecfdf5;
    --lu-open-border: #10b981;
    --lu-open-text: #065f46;
    --lu-open-dot: #10b981;

    /* Status: Closing Soon */
    --lu-closing-bg: #fffbeb;
    --lu-closing-border: #f59e0b;
    --lu-closing-text: #92400e;
    --lu-closing-dot: #f59e0b;

    /* Status: Closed */
    --lu-closed-bg: #fef2f2;
    --lu-closed-border: #ef4444;
    --lu-closed-text: #991b1b;
    --lu-closed-dot: #ef4444;

    /* Action button variants */
    --lu-catalog-color: #2563eb;
    --lu-catalog-bg: #eff6ff;
    --lu-card-color: #059669;
    --lu-card-bg: #ecfdf5;
    --lu-room-color: #7c3aed;
    --lu-room-bg: #f5f3ff;
    --lu-directions-color: #ea580c;
    --lu-directions-bg: #fff7ed;
    --lu-call-color: #0d9488;
    --lu-call-bg: #f0fdfa;
    --lu-website-color: #4f46e5;
    --lu-website-bg: #eef2ff;

    /* Holiday alert */
    --lu-holiday-bg: #fffbeb;
    --lu-holiday-border: #fbbf24;
    --lu-holiday-text: #92400e;

    /* Shared */
    --lu-transition: 0.2s ease;
    --lu-radius: var(--radius-xl, 0.75rem);
    --lu-radius-pill: var(--radius-full, 9999px);
    --lu-font: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* ==========================================================================
   1. STATUS BANNER  (.library-status-widget)
   ========================================================================== */
.library-status-widget {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: var(--lu-radius);
    border: 2px solid transparent;
    font-family: var(--lu-font);
    transition: box-shadow var(--lu-transition), border-color var(--lu-transition);
}

/* — Status dot (shared) — */
.library-status-widget .status-dot {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
}

/* — Library name — */
.library-status-widget .status-library-name {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--line-height-tight, 1.25);
}

/* — Status label (e.g. "Open Now", "Closed") — */
.library-status-widget .status-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* — Time detail (e.g. "Closes at 9 PM") — */
.library-status-widget .status-time {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    margin-left: auto;
    white-space: nowrap;
}

/* --- Open state --- */
.library-status--open {
    background-color: var(--lu-open-bg);
    border-color: var(--lu-open-border);
    color: var(--lu-open-text);
}

.library-status--open .status-dot {
    background-color: var(--lu-open-dot);
    animation: lu-pulse 2s ease-in-out infinite;
}

/* --- Closing Soon state --- */
.library-status--closing {
    background-color: var(--lu-closing-bg);
    border-color: var(--lu-closing-border);
    color: var(--lu-closing-text);
}

.library-status--closing .status-dot {
    background-color: var(--lu-closing-dot);
}

/* --- Closed state --- */
.library-status--closed {
    background-color: var(--lu-closed-bg);
    border-color: var(--lu-closed-border);
    color: var(--lu-closed-text);
}

.library-status--closed .status-dot {
    background-color: var(--lu-closed-dot);
}

/* Pulse keyframes for "open" dot */
@keyframes lu-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
}

/* Responsive: stack on very small screens */
@media (max-width: 479px) {
    .library-status-widget {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .library-status-widget .status-time {
        margin-left: 0;
        width: 100%;
        padding-top: 0.25rem;
        border-top: 1px solid currentColor;
        border-top-color: inherit;
        opacity: 0.6;
    }
}

/* ==========================================================================
   2. QUICK ACTION BUTTONS  (.library-actions)
   ========================================================================== */
.library-actions {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding: 0.5rem 0;
}

.library-actions::-webkit-scrollbar {
    display: none;
}

/* Individual button */
.library-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid transparent;
    border-radius: var(--lu-radius-pill);
    font-family: var(--lu-font);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    scroll-snap-align: start;
    transition:
        transform var(--lu-transition),
        box-shadow var(--lu-transition),
        background-color var(--lu-transition),
        border-color var(--lu-transition);
    user-select: none;
}

.library-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.library-action-btn:active {
    transform: translateY(0);
}

.library-action-btn:focus-visible {
    outline: 2px solid var(--primary-color, #1e40af);
    outline-offset: 2px;
}

.library-action-btn svg,
.library-action-btn i,
.library-action-btn .action-icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    font-size: 1.1em;
}

/* — Variant: Catalog (blue) — */
.library-action-btn--catalog {
    background-color: var(--lu-catalog-bg);
    color: var(--lu-catalog-color);
    border-color: var(--lu-catalog-color);
}

.library-action-btn--catalog:hover {
    background-color: var(--lu-catalog-color);
    color: #fff;
}

/* — Variant: Card (green) — */
.library-action-btn--card {
    background-color: var(--lu-card-bg);
    color: var(--lu-card-color);
    border-color: var(--lu-card-color);
}

.library-action-btn--card:hover {
    background-color: var(--lu-card-color);
    color: #fff;
}

/* — Variant: Room (purple) — */
.library-action-btn--room {
    background-color: var(--lu-room-bg);
    color: var(--lu-room-color);
    border-color: var(--lu-room-color);
}

.library-action-btn--room:hover {
    background-color: var(--lu-room-color);
    color: #fff;
}

/* — Variant: Directions (orange) — */
.library-action-btn--directions {
    background-color: var(--lu-directions-bg);
    color: var(--lu-directions-color);
    border-color: var(--lu-directions-color);
}

.library-action-btn--directions:hover {
    background-color: var(--lu-directions-color);
    color: #fff;
}

/* — Variant: Call (teal) — */
.library-action-btn--call {
    background-color: var(--lu-call-bg);
    color: var(--lu-call-color);
    border-color: var(--lu-call-color);
}

.library-action-btn--call:hover {
    background-color: var(--lu-call-color);
    color: #fff;
}

/* — Variant: Website (indigo) — */
.library-action-btn--website {
    background-color: var(--lu-website-bg);
    color: var(--lu-website-color);
    border-color: var(--lu-website-color);
}

.library-action-btn--website:hover {
    background-color: var(--lu-website-color);
    color: #fff;
}

/* Desktop: wrap into grid */
@media (min-width: 768px) {
    .library-actions {
        display: flex;
        flex-wrap: wrap;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .library-action-btn {
        scroll-snap-align: none;
    }
}

@media (min-width: 1024px) {
    .library-actions {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.625rem;
    }

    .library-action-btn {
        justify-content: center;
    }
}

/* ==========================================================================
   3. HOLIDAY ALERT  (.library-holiday-alert)
   ========================================================================== */
.library-holiday-alert {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background-color: var(--lu-holiday-bg);
    border: 1px solid var(--lu-holiday-border);
    border-radius: var(--lu-radius);
    color: var(--lu-holiday-text);
    font-family: var(--lu-font);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-normal, 1.5);
    transition:
        opacity var(--lu-transition),
        max-height 0.3s ease,
        padding 0.3s ease,
        margin 0.3s ease;
    overflow: hidden;
}

.library-holiday-alert .holiday-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.library-holiday-alert .holiday-text {
    flex: 1;
}

.library-holiday-alert .holiday-dismiss {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-md, 0.375rem);
    color: var(--lu-holiday-text);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--lu-transition);
}

.library-holiday-alert .holiday-dismiss:hover {
    background-color: rgba(146, 64, 14, 0.1);
}

.library-holiday-alert .holiday-dismiss:focus-visible {
    outline: 2px solid var(--lu-holiday-border);
    outline-offset: 2px;
}

/* Dismissed state — applied via JS */
.library-holiday-alert.is-dismissed {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-width: 0;
    pointer-events: none;
}

/* ==========================================================================
   4. SAVE MY LIBRARY  (.library-save-btn)
   ========================================================================== */
.library-save-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: var(--gray-50, #f9fafb);
    border: 1.5px solid var(--gray-300, #d1d5db);
    border-radius: 50%;
    color: var(--gray-500, #6b7280);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition:
        transform var(--lu-transition),
        color var(--lu-transition),
        border-color var(--lu-transition),
        background-color var(--lu-transition);
}

.library-save-btn:hover {
    color: #ef4444;
    border-color: #fca5a5;
    background-color: #fef2f2;
}

.library-save-btn:focus-visible {
    outline: 2px solid var(--primary-color, #1e40af);
    outline-offset: 2px;
}

/* Active / saved state */
.library-save-btn.is-saved {
    color: #ef4444;
    border-color: #ef4444;
    background-color: #fef2f2;
    animation: lu-heart-pop 0.35s ease;
}

@keyframes lu-heart-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Tooltip */
.library-save-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.3rem 0.6rem;
    background: var(--gray-900, #111827);
    color: #fff;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
    border-radius: var(--radius-md, 0.375rem);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--lu-transition), transform var(--lu-transition);
    z-index: 10;
}

.library-save-btn::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--gray-900, #111827);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--lu-transition);
    z-index: 10;
}

.library-save-btn:hover::after,
.library-save-btn:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.library-save-btn:hover::before,
.library-save-btn:focus-visible::before {
    opacity: 1;
}

/* ==========================================================================
   5. PRINT HOURS  (.library-print-btn)
   ========================================================================== */
.library-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1.5px solid var(--gray-300, #d1d5db);
    border-radius: var(--lu-radius);
    font-family: var(--lu-font);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--gray-700, #374151);
    cursor: pointer;
    transition:
        background-color var(--lu-transition),
        border-color var(--lu-transition),
        color var(--lu-transition);
}

.library-print-btn:hover {
    background-color: var(--gray-100, #f3f4f6);
    border-color: var(--gray-400, #9ca3af);
}

.library-print-btn:focus-visible {
    outline: 2px solid var(--primary-color, #1e40af);
    outline-offset: 2px;
}

.library-print-btn svg,
.library-print-btn i,
.library-print-btn .print-icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    font-size: 1.1em;
}

/* --- Print Media Styles --- */
@media print {
    /* Hide everything by default */
    body * {
        visibility: hidden;
    }

    /* Show only the print card and its children */
    .library-print-card,
    .library-print-card * {
        visibility: visible;
    }

    .library-print-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 2rem;
        background: #fff;
        color: #000;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: 12pt;
        line-height: 1.6;
    }

    .library-print-card .print-header {
        text-align: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #000;
    }

    .library-print-card .print-header h2 {
        font-size: 18pt;
        margin-bottom: 0.25rem;
    }

    .library-print-card .print-header p {
        font-size: 10pt;
        color: #444;
    }

    /* Hours table */
    .library-print-card table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1.5rem;
    }

    .library-print-card th,
    .library-print-card td {
        padding: 0.5rem 0.75rem;
        text-align: left;
        border-bottom: 1px solid #ccc;
        font-size: 11pt;
    }

    .library-print-card th {
        font-weight: 700;
        border-bottom: 2px solid #000;
    }

    .library-print-card tr:nth-child(even) {
        background-color: #f5f5f5;
    }

    /* Today highlight in print */
    .library-print-card tr.is-today {
        font-weight: 700;
    }

    .library-print-card .print-footer {
        text-align: center;
        font-size: 9pt;
        color: #666;
        border-top: 1px solid #ccc;
        padding-top: 0.75rem;
    }

    /* Hide interactive elements in print */
    .library-actions,
    .library-save-btn,
    .library-print-btn,
    .library-holiday-alert .holiday-dismiss,
    .no-print {
        display: none !important;
    }
}

/* ==========================================================================
   6. DARK MODE  (@media prefers-color-scheme: dark)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Status: Open (dark) */
        --lu-open-bg: #064e3b;
        --lu-open-border: #059669;
        --lu-open-text: #a7f3d0;
        --lu-open-dot: #34d399;

        /* Status: Closing Soon (dark) */
        --lu-closing-bg: #78350f;
        --lu-closing-border: #d97706;
        --lu-closing-text: #fde68a;
        --lu-closing-dot: #fbbf24;

        /* Status: Closed (dark) */
        --lu-closed-bg: #7f1d1d;
        --lu-closed-border: #dc2626;
        --lu-closed-text: #fecaca;
        --lu-closed-dot: #f87171;

        /* Action buttons (dark) */
        --lu-catalog-color: #60a5fa;
        --lu-catalog-bg: #1e3a5f;
        --lu-card-color: #34d399;
        --lu-card-bg: #064e3b;
        --lu-room-color: #a78bfa;
        --lu-room-bg: #3b1f6e;
        --lu-directions-color: #fb923c;
        --lu-directions-bg: #7c2d12;
        --lu-call-color: #2dd4bf;
        --lu-call-bg: #134e4a;
        --lu-website-color: #818cf8;
        --lu-website-bg: #312e81;

        /* Holiday alert (dark) */
        --lu-holiday-bg: #78350f;
        --lu-holiday-border: #b45309;
        --lu-holiday-text: #fde68a;
    }

    /* Action button hover in dark mode: slightly lighter fill */
    .library-action-btn--catalog:hover {
        background-color: var(--lu-catalog-color);
        color: #1e293b;
    }

    .library-action-btn--card:hover {
        background-color: var(--lu-card-color);
        color: #1e293b;
    }

    .library-action-btn--room:hover {
        background-color: var(--lu-room-color);
        color: #1e293b;
    }

    .library-action-btn--directions:hover {
        background-color: var(--lu-directions-color);
        color: #1e293b;
    }

    .library-action-btn--call:hover {
        background-color: var(--lu-call-color);
        color: #1e293b;
    }

    .library-action-btn--website:hover {
        background-color: var(--lu-website-color);
        color: #1e293b;
    }

    /* Save button dark adjustments */
    .library-save-btn {
        background: #1f2937;
        border-color: #4b5563;
        color: #9ca3af;
    }

    .library-save-btn:hover {
        color: #f87171;
        border-color: #f87171;
        background-color: #7f1d1d;
    }

    .library-save-btn.is-saved {
        color: #f87171;
        border-color: #f87171;
        background-color: #7f1d1d;
    }

    .library-save-btn::after {
        background: #e5e7eb;
        color: #111827;
    }

    .library-save-btn::before {
        border-top-color: #e5e7eb;
    }

    /* Print button dark adjustments */
    .library-print-btn {
        border-color: #4b5563;
        color: #d1d5db;
    }

    .library-print-btn:hover {
        background-color: #374151;
        border-color: #6b7280;
    }

    /* Holiday dismiss dark */
    .library-holiday-alert .holiday-dismiss:hover {
        background-color: rgba(253, 230, 138, 0.15);
    }

    /* Pulse glow in dark mode */
    @keyframes lu-pulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
        }
        50% {
            box-shadow: 0 0 0 6px rgba(52, 211, 153, 0);
        }
    }
}

/* ==========================================================================
   7. ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Ensure focus-visible is distinct everywhere */
.library-status-widget:focus-visible,
.library-holiday-alert:focus-visible {
    outline: 2px solid var(--primary-color, #1e40af);
    outline-offset: 2px;
}

/* Reduced motion: disable animations */
@media (prefers-reduced-motion: reduce) {
    .library-status--open .status-dot {
        animation: none;
    }

    .library-save-btn.is-saved {
        animation: none;
    }

    .library-action-btn:hover {
        transform: none;
    }

    .library-holiday-alert.is-dismissed {
        transition: none;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}

/* Screen-reader only utility */
.library-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   8. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* 480px — Small phones → standard mobile */
@media (min-width: 480px) {
    .library-status-widget {
        padding: 1.125rem 1.5rem;
        gap: 1rem;
    }

    .library-status-widget .status-library-name {
        font-size: var(--font-size-xl, 1.25rem);
    }

    .library-action-btn {
        padding: 0.5rem 1.125rem;
    }
}

/* 768px — Tablet */
@media (min-width: 768px) {
    .library-status-widget {
        padding: 1.25rem 1.75rem;
        gap: 1rem;
    }

    .library-status-widget .status-dot {
        width: 16px;
        height: 16px;
    }

    .library-status-widget .status-library-name {
        font-size: var(--font-size-2xl, 1.5rem);
    }

    .library-status-widget .status-time {
        font-size: var(--font-size-lg, 1.125rem);
    }

    .library-holiday-alert {
        padding: 0.875rem 1.25rem;
        font-size: var(--font-size-base, 1rem);
    }

    .library-save-btn {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.3rem;
    }
}

/* 1024px — Desktop */
@media (min-width: 1024px) {
    .library-status-widget {
        padding: 1.5rem 2rem;
    }

    .library-status-widget .status-library-name {
        font-size: var(--font-size-2xl, 1.5rem);
    }
}