/* Global reset & box sizing */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* Base page styles */
body {
font-family: Arial, sans-serif;
background-color: #05061a;
color: #f1f1f1;
padding: 20px;
}

/* Centered container */
.container {
max-width: 1200px;
margin: 0 auto;
}

/* Header */
.site-header {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 20px;
background: linear-gradient(90deg, #0B3D91, #061c47);
border-radius: 8px;
border-bottom: 4px solid #FC3D21;
}

h1 {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #ffffff;
letter-spacing: 1px;
}

.subtitle {
text-align: center;
color: #bbbbbb;
margin-bottom: 20px;
}

/* Text-based NASA badge (used instead of the official NASA logo image) */
.nasa-badge {
font-family: Verdana, sans-serif;
font-weight: bold;
font-size: 28px;
color: #ffffff;
background-color: #0B3D91;
border: 3px solid #FC3D21;
border-radius: 6px;
padding: 8px 14px;
letter-spacing: 2px;
}

/* Date-picker & button row */
.filters {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
margin-bottom: 20px;
padding: 0 20px;
}

/* Inputs and buttons */
input[type="date"],
button {
font-family: Arial, sans-serif;
font-weight: normal;
color: #222;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
line-height: 1.4;
width: 100%;
background-color: #ffffff;
}

/* Button specific */
button {
background-color: #FC3D21;
color: #ffffff;
cursor: pointer;
font-weight: bold;
border: none;
}
button:hover {
background-color: #d6330f;
}

/* Stack horizontally on wider screens */
@media (min-width: 600px) {
.filters {
flex-direction: row;
padding: 0;
}

input[type="date"],
button {
width: auto;
}
}

/* Random space fact box */
.fact-box {
text-align: center;
background-color: #0B3D91;
color: #ffffff;
padding: 12px 20px;
border-radius: 6px;
margin-bottom: 20px;
font-style: italic;
}

.fact-box:empty {
display: none;
}

/* Loading message */
.loading-msg {
text-align: center;
padding: 20px;
font-size: 18px;
color: #FC3D21;
font-weight: bold;
}

.hidden {
display: none;
}

/* Gallery flex container */
.gallery {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
justify-content: center;
}

/* Gallery items */
.gallery-item {
flex: 1 1 100%;
min-width: 280px;
max-width: 500px;
background: #11132e;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.4);
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* LevelUp: Hover zoom effect */
.gallery-item:hover {
transform: scale(1.04);
box-shadow: 0 6px 16px rgba(252, 61, 33, 0.4);
}

/* Three columns on wider screens */
@media (min-width: 1000px) {
.gallery-item {
flex: 0 1 31%;
}
}

.gallery-item img,
.gallery-item .video-thumb {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 4px;
border: none;
}

.gallery-item h3 {
margin-top: 10px;
padding: 5px 5px 0;
font-size: 16px;
color: #ffffff;
}

.gallery-item p {
margin-top: 4px;
padding: 0 5px 5px;
font-size: 14px;
color: #bbbbbb;
}

.video-link {
display: block;
text-align: center;
padding: 60px 10px;
background-color: #0B3D91;
color: #ffffff;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
}

/* Placeholder content */
.placeholder {
flex: 1 1 100%;
text-align: center;
padding: 40px;
color: #cccccc;
}

.placeholder-icon {
font-size: 48px;
margin-bottom: 20px;
font-weight: bold;
color: #FC3D21;
}

.error {
color: #FC3D21;
text-align: center;
padding: 20px;
font-weight: bold;
}

/* Modal overlay */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 100;
}

.modal-content {
background: #11132e;
border: 2px solid #FC3D21;
border-radius: 8px;
max-width: 700px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: 20px;
position: relative;
}

.modal-close {
position: absolute;
top: 10px;
right: 15px;
font-size: 28px;
color: #ffffff;
cursor: pointer;
}

.modal-content img,
.modal-video {
width: 100%;
max-height: 400px;
object-fit: contain;
border-radius: 4px;
margin-bottom: 15px;
border: none;
}

.modal-content h2 {
color: #ffffff;
margin-bottom: 8px;
}

.modal-date {
color: #FC3D21;
font-weight: bold;
margin-bottom: 12px;
}

.modal-content p {
color: #dddddd;
line-height: 1.5;
margin-bottom: 10px;
}

/* Mobile tweak */
@media (max-width: 480px) {
.site-header {
flex-direction: column;
}
}


/* Fix: .modal.hidden must override .modal's display:flex */
.modal.hidden {
display: none;
}