/**
 * Priority Homepage Information System - CSS
 * Location: C:\xampp\htdocs\hbc\assets\css\priority_info.css
 *
 * CHANGES (from previous version):
 * - Modal now opens FULLSCREEN (100% viewport) - was capped at 1200px wide / 90vh tall
 * - Image in modal now scales to fill nearly all available vertical space
 *   while preserving aspect ratio - was hard-capped at 500px tall
 * - Header and footer compacted slightly to give more room to the image
 * - Mobile responsive simplified (was special-case; now fullscreen always)
 *
 * UNCHANGED:
 * - The 5-second preview card on the homepage (.priority-preview-card)
 * - All button styles
 * - All animations
 */

/* =============================================================================
   HOMEPAGE PREVIEW (5-second card below mission statement) - UNCHANGED
   ============================================================================= */
#priority-info-preview {
    display: none;
    margin: 30px auto;
    max-width: 800px;
    animation: slideDown 0.5s ease-out;
}

.priority-preview-card {
    background: linear-gradient(135deg, #00bcd4 0%, #667eea 100%);
    color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    text-align: center;
}

.priority-preview-card .preview-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.priority-preview-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.priority-preview-card p {
    font-size: 16px;
    line-height: 1.6;
}

/* Collapse animation */
#priority-info-preview.collapsing {
    animation: collapseToButton 0.5s ease-in forwards;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes collapseToButton {
    0%   { opacity: 1; transform: scale(1);   max-height: 500px; }
    100% { opacity: 0; transform: scale(0.1); max-height: 0; }
}

/* =============================================================================
   "VIEW INFORMATION" BUTTON - UNCHANGED
   ============================================================================= */
#priority-info-button {
    display: none;
    text-align: center;
    margin: 30px auto;
}

#priority-info-button button {
    background: linear-gradient(135deg, #00bcd4, #667eea);
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,188,212,0.4);
    transition: all 0.3s;
}

#priority-info-button button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,188,212,0.6);
}

#priority-info-button.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

/* =============================================================================
   FULLSCREEN MODAL (the bit that changed)
   ============================================================================= */
#priority-info-modal {
    display: none;
    position: fixed;
    inset: 0;                              /* top:0 right:0 bottom:0 left:0 */
    background: rgba(0,0,0,0.95);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.modal-container {
    /* CHANGED: was 90%/1200px/90vh - now fills the whole window */
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    background: white;
    border-radius: 0;                      /* CHANGED: was 15px - no rounding when fullscreen */
    box-shadow: none;                      /* CHANGED: was a deep shadow - irrelevant fullscreen */
    display: flex;
    flex-direction: column;
}

.modal-header {
    background: linear-gradient(135deg, #00bcd4 0%, #667eea 100%);
    color: white;
    padding: 12px 24px;                    /* CHANGED: was 20px 30px - compacted */
    border-radius: 0;                      /* CHANGED: was 15px 15px 0 0 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;                        /* don't get squeezed by flex */
}

.modal-header h2 {
    margin: 0;
    font-size: 22px;
}

#page-indicator {
    font-size: 14px;
    opacity: 0.9;
}

.modal-content {
    padding: 16px 24px;                    /* CHANGED: was 40px - less wasted space around image */
    overflow-y: auto;                      /* if text+image are too tall, content area scrolls */
    flex: 1;                               /* fills all remaining vertical space */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;                         /* allow flex children to shrink */
}

#announcement-display {
    /* CHANGED: removed min-height: 400px (was preventing natural sizing) */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.announcement-full {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* -------- THE KEY CHANGE: image fills the window, aspect ratio preserved -------- */
.announcement-full-image {
    max-width: 100%;                       /* never wider than the modal content area */
    max-height: calc(100vh - 280px);       /* leaves ~280px for header + title + meta + body + controls */
    width: auto;                           /* let the browser size by aspect ratio */
    height: auto;                          /* same */
    object-fit: contain;                   /* extra safety: no stretch if a parent forces dimensions */
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/*
 * HOW THIS WORKS:
 *
 * - max-width: 100% caps the rendered width at the container width
 * - max-height: calc(100vh - 280px) caps the height to "viewport minus reserved space"
 *   The 280px reserves room for: modal header (~52px) + modal controls (~68px)
 *   + title text (~38px) + date meta (~30px) + breathing space (~92px)
 * - With both width: auto AND height: auto, the browser scales the image down
 *   uniformly to fit within both caps, NEVER distorting the aspect ratio
 * - On a 1920x1080 screen, the image can now be up to ~800px tall (was 500px)
 * - On a 4K (2160 tall) screen, the image can be up to ~1880px tall
 * - On a tablet (~768 tall), the image can be up to ~488px tall
 *
 * Examples:
 *   Image 1920x1080 in a 1920x1080 window: renders 1440x810 (limited by height)
 *   Image  800x1200 in a 1920x1080 window: renders 533x800 (portrait, limited by height)
 *   Image 3000x1000 in a 1920x1080 window: renders 1872x624 (wide, limited by width)
 */

.announcement-full h2 {
    font-size: 28px;
    color: #2c3e50;
    margin: 0 0 10px;
    flex-shrink: 0;
}

.announcement-meta {
    color: #7f8c8d;
    font-size: 14px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.announcement-full-content {
    font-size: 17px;
    line-height: 1.7;
    color: #34495e;
    text-align: left;
    max-width: 900px;
    margin: 0 auto;
    white-space: pre-wrap;
    flex-shrink: 0;
}

/* Reset for the "show homepage" iframe panel in the modal */
.homepage-refresh {
    text-align: center;
    padding: 100px 20px;
}

.homepage-refresh h2 {
    font-size: 48px;
    color: #00bcd4;
    margin-bottom: 20px;
}

.homepage-refresh p {
    font-size: 20px;
    color: #7f8c8d;
}

.homepage-embed {
    width: 100%;
    min-height: 600px;
}

.homepage-embed iframe {
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* =============================================================================
   MODAL CONTROLS (Previous / Next / Auto / Home buttons)
   ============================================================================= */
.modal-controls {
    background: #ecf0f1;
    padding: 12px 24px;                    /* CHANGED: was 20px 30px - compacted */
    border-radius: 0;                      /* CHANGED: was 0 0 15px 15px */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;                        /* don't get squeezed by flex */
}

#manual-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

#auto-controls {
    display: none;
    gap: 12px;
    align-items: center;
}

.control-btn {
    padding: 10px 20px;                    /* CHANGED: was 12px 24px - compacted */
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-previous { background: #95a5a6; color: white; }
.btn-previous:hover { background: #7f8c8d; }

.btn-next { background: #3498db; color: white; }
.btn-next:hover { background: #2980b9; }

.btn-auto { background: #27ae60; color: white; }
.btn-auto:hover { background: #229954; }

.btn-manual { background: #f39c12; color: white; }
.btn-manual:hover { background: #e67e22; }

.btn-home { background: #e74c3c; color: white; }
.btn-home:hover { background: #c0392b; }

#auto-delay-select {
    padding: 9px 13px;
    border: 2px solid #00bcd4;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: white;
    cursor: pointer;
}

/* =============================================================================
   MOBILE / TABLET — text and controls a bit smaller; modal stays fullscreen
   ============================================================================= */
@media (max-width: 768px) {
    .modal-header        { padding: 10px 16px; }
    .modal-header h2     { font-size: 18px; }
    .modal-content       { padding: 12px 16px; }
    .announcement-full h2 { font-size: 22px; }
    .announcement-full-content { font-size: 15px; }

    /* Reserve a bit less vertical room on mobile so the image stays big */
    .announcement-full-image {
        max-height: calc(100vh - 230px);
    }

    .modal-controls { padding: 10px 12px; }
    .control-btn    { padding: 8px 14px; font-size: 12px; }
}