/* -----------------------------------------------------------------
    Header & Navigation Styling (Mobile-First & Responsive)
-----------------------------------------------------------------*/
header {
   background-color: #2c3e50;
   color: #ffffff;
   padding: 1rem;
   position: relative;
   z-index: 9999;
}

.navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 1200px;
   margin: 0 auto;
}

/* Logo Styling (Restored) */
.logo a {
   color: #f4e8c1;
   text-decoration: none;
   font-size: 1.5rem;
   font-weight: bold;
   letter-spacing: 0.05em;
   transition: color 0.3s ease;
}

.logo a:hover {
   color: #ffffff;
}

/* Hide Checkbox Input */
.nav-toggle {
   display: none;
}

/* Hamburger Icon Styling (Restored) */
.hamburger {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 30px;
   height: 21px;
   cursor: pointer;
}

.hamburger .bar {
   height: 3px;
   width: 100%;
   background-color: #f4e8c1;
   border-radius: 3px;
   transition: all 0.3s ease;
}

/* Navigation Links (Mobile Dropdown Overlay) */
.nav-links {
   display: none;
   flex-direction: column;
   position: absolute;
   top: 100%; /* Sits directly below the header box */
   left: 0;
   width: 100%; /* Spans full screen width */
   background-color: #2c3e50; /* Solid background prevents transparency overlap */
   list-style: none;
   padding: 1rem 0;
   margin: 0;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
   z-index: 100000;
}

.nav-links li {
   text-align: center;
   margin: 0;
}

.nav-links li a {
   display: block;
   padding: 0.75rem 1rem;
   color: #ffffff;
   text-decoration: none;
   font-weight: 500;
   transition:
      background-color 0.2s ease,
      color 0.2s ease;
}

.nav-links li a:hover,
.nav-links li a.active {
   background-color: #1a252f;
   color: #f4e8c1;
}

/* Toggle Mobile Menu via Checkbox */
.nav-toggle:checked ~ .nav-links {
   display: flex;
}

/* Animated Hamburger to "X" when open */
.nav-toggle:checked ~ .hamburger .bar:nth-child(1) {
   transform: translateY(9px) rotate(45deg);
}

.nav-toggle:checked ~ .hamburger .bar:nth-child(2) {
   opacity: 0;
}

.nav-toggle:checked ~ .hamburger .bar:nth-child(3) {
   transform: translateY(-9px) rotate(-45deg);
}
/* -----------------------------------------------------------------
    Upcoming Events Section 
-----------------------------------------------------------------*/
.upcoming-events {
   border: 2px solid #2c3e50;
   background-color: #ffffff;
   border-radius: 4px;
   overflow: hidden;
   margin-bottom: 2rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.events-header {
   background-color: #2c3e50;
   color: #ffffff;
   padding: 0.75rem 1rem;
   text-align: center;
}

.events-header h2 {
   font-size: 1.25rem;
   font-weight: 600;
   margin: 0;
   letter-spacing: 0.03em;
}

.events-table {
   display: flex;
   flex-direction: column;
}

.event-row {
   display: flex;
   border-bottom: 1px solid #e0e0e0;
}

.event-row:last-child {
   border-bottom: none;
}

.event-title {
   width: 25%;
   min-width: 120px;
   padding: 1.25rem 1rem;
   font-weight: bold;
   color: #2c3e50;
   border-right: 1px solid #e0e0e0;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   background-color: #fdfdfd;
}

.event-description {
   width: 75%;
   padding: 1.25rem 1.5rem;
   color: #555555;
   line-height: 1.6;
   display: flex;
   align-items: center;
}

/* -----------------------------------------------------------------
    Footer Styling
-----------------------------------------------------------------*/
footer {
   background-color: #2c3e50;
   color: #ffffff;
   padding: 1.25rem 1rem;
   margin-top: auto;
   text-align: center;
}

.footer-container {
   max-width: 1200px;
   margin: 0 auto;
}

.footer-container p {
   margin: 0;
   font-size: 0.9rem;
   color: #f4e8c1;
}

/* -----------------------------------------------------------------
    Event One Moon Integration Styling
-----------------------------------------------------------------*/
.event-with-moon {
   display: flex;
   align-items: center;
   gap: 1.25rem;
}

/* Small inline moon graphic */
.inline-moon-graphic {
   flex-shrink: 0;
   width: 45px;
   height: 45px;
   background-color: #2c3e50;
   border-radius: 50%;
   position: relative;
   box-shadow: inset -10px 0 0 0 #f4e8c1;
   border: 2px solid #2c3e50;
}

.event-text-content {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
}

.event-text-content strong {
   color: #2c3e50;
   font-size: 1.05rem;
}

.event-text-content p {
   margin: 0;
   color: #555555;
   font-size: 0.95rem;
   line-height: 1.5;
}

.moon-source-link {
   font-size: 0.85rem;
   color: #2c3e50;
   text-decoration: none;
   font-weight: 600;
   margin-top: 0.25rem;
   transition: color 0.2s ease;
}

.moon-source-link:hover {
   color: #d4a373;
   text-decoration: underline;
}

/* Responsive adjustment for small screens */
@media screen and (max-width: 600px) {
   .event-with-moon {
      flex-direction: column;
      align-items: flex-start;
   }
}

/* -----------------------------------------------------------------
    Recent Posts Section Styling
-----------------------------------------------------------------*/
.recent-posts-section {
   border: 2px solid #2c3e50;
   background-color: #ffffff;
   border-radius: 4px;
   overflow: hidden;
   margin-bottom: 2rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.posts-header {
   background-color: #2c3e50;
   color: #ffffff;
   padding: 0.75rem 1rem;
   text-align: center;
}

.posts-header h3 {
   font-size: 1.15rem;
   font-weight: 600;
   margin: 0;
   letter-spacing: 0.03em;
   color: #f4e8c1;
}

.posts-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.posts-list li {
   border-bottom: 1px solid #e0e0e0;
}

.posts-list li:last-child {
   border-bottom: none;
}

.posts-list li a {
   display: block;
   padding: 1rem 1.25rem;
   color: #2c3e50;
   text-decoration: none;
   font-weight: 500;
   transition:
      background-color 0.2s ease,
      color 0.2s ease;
}

.posts-list li a:hover {
   background-color: #fdfdfd;
   color: #d4a373;
   padding-left: 1.5rem;
}

/* -----------------------------------------------------------------
    Articles Page Styling
-----------------------------------------------------------------*/
.articles-layout {
   display: flex;
   gap: 2rem;
   padding: 2rem 1rem;
   max-width: 1200px;
   margin: 0 auto;
}

.articles-content {
   flex: 3;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.page-title-box {
   background-color: #2c3e50;
   color: #ffffff;
   padding: 1.5rem;
   border-radius: 4px;
}

.page-title-box h1 {
   margin: 0 0 0.5rem 0;
   font-size: 1.75rem;
   color: #f4e8c1;
}

.page-title-box p {
   margin: 0;
   color: #e0e0e0;
}

.article-card {
   background-color: #ffffff;
   border: 2px solid #2c3e50;
   border-radius: 4px;
   padding: 1.5rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.article-card h2 {
   color: #2c3e50;
   margin-top: 0;
   margin-bottom: 0.25rem;
   font-size: 1.35rem;
}

.article-meta {
   font-size: 0.85rem;
   color: #777777;
   margin-bottom: 1rem;
   font-style: italic;
}

.article-card p {
   line-height: 1.6;
   color: #333333;
   margin: 0;
}

/* Sidebar Widgets */
.articles-sidebar {
   flex: 1;
   min-width: 250px;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.sidebar-widget {
   border: 2px solid #2c3e50;
   background-color: #ffffff;
   border-radius: 4px;
   overflow: hidden;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.widget-header {
   background-color: #2c3e50;
   padding: 0.75rem 1rem;
}

.widget-header h3 {
   margin: 0;
   color: #f4e8c1;
   font-size: 1.1rem;
}

.widget-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.widget-list li {
   border-bottom: 1px solid #e0e0e0;
}

.widget-list li:last-child {
   border-bottom: none;
}

.widget-list li a {
   display: block;
   padding: 0.75rem 1rem;
   color: #2c3e50;
   text-decoration: none;
   font-weight: 500;
   transition:
      color 0.2s ease,
      background-color 0.2s ease;
}

.widget-list li a:hover {
   background-color: #f9f6f0;
   color: #d4a373;
}

/* Active Nav Indicator */
.nav-links li a.active {
   color: #f4e8c1;
   font-weight: bold;
}

/* -----------------------------------------------------------------
    Detail Page Layout & Styling
-----------------------------------------------------------------*/
.detail-container {
   display: flex;
   gap: 1.5rem;
   max-width: 1200px;
   margin: 0 auto;
   padding: 1.5rem 1rem;
}

.detail-left-sidebar {
   flex: 1;
   min-width: 250px;
}

.sidebar-box {
   background-color: #ffffff;
   border: 2px solid #2c3e50;
   border-radius: 4px;
   padding: 1.25rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sidebar-box h3 {
   color: #2c3e50;
   margin-top: 0;
   margin-bottom: 0.75rem;
   border-bottom: 1px solid #e0e0e0;
   padding-bottom: 0.5rem;
}

.sidebar-box p {
   color: #555555;
   line-height: 1.6;
   font-size: 0.95rem;
   margin: 0;
}

.detail-main-content {
   flex: 3;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

/* Dynamic JS Media / Video Box */
.media-box {
   background-color: #2c3e50;
   border: 2px solid #2c3e50;
   border-radius: 4px;
   overflow: hidden;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.video-wrapper {
   position: relative;
   width: 100%;
   background-color: #000000;
}

.media-caption {
   background-color: #2c3e50;
   color: #f4e8c1;
   padding: 0.75rem 1rem;
   font-weight: 600;
   text-align: center;
}

.video-wrapper video {
   display: block;
   max-height: 450px;
   object-fit: cover;
}

/* Detail Bottom Row Layout */
.detail-bottom-row {
   display: flex;
   gap: 1.5rem;
}

.about-organization-box {
   flex: 3;
   background-color: #ffffff;
   border: 2px solid #2c3e50;
   border-radius: 4px;
   padding: 1.25rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.about-organization-box h3 {
   color: #2c3e50;
   margin-top: 0;
   margin-bottom: 0.75rem;
   border-bottom: 1px solid #e0e0e0;
   padding-bottom: 0.5rem;
}

.about-organization-box p {
   color: #555555;
   line-height: 1.6;
   margin: 0;
}

.detail-external-links {
   flex: 1;
   min-width: 180px;
   background-color: #ffffff;
   border: 2px solid #2c3e50;
   border-radius: 4px;
   padding: 1.25rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.detail-external-links h3 {
   color: #2c3e50;
   margin-top: 0;
   margin-bottom: 0.75rem;
   border-bottom: 1px solid #e0e0e0;
   padding-bottom: 0.5rem;
}

.detail-external-links ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.detail-external-links li {
   margin-bottom: 0.5rem;
}

.detail-external-links a {
   color: #2c3e50;
   text-decoration: none;
   font-weight: 500;
   transition: color 0.2s ease;
}

.detail-external-links a:hover {
   color: #d4a373;
   text-decoration: underline;
}

/* Ensure body takes full height and uses flexbox layout */
body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   margin: 0;
}

/* -----------------------------------------------------------------
    References Page Styling
-----------------------------------------------------------------*/
.references-layout {
   display: flex;
   gap: 2rem;
   padding: 2rem 1rem;
   max-width: 1200px;
   margin: 0 auto;
   width: 100%;
}

.references-content {
   flex: 3;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.references-card {
   background-color: #ffffff;
   border: 2px solid #2c3e50;
   border-radius: 4px;
   padding: 1.5rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.references-card h2 {
   color: #2c3e50;
   margin-top: 0;
   margin-bottom: 1rem;
   font-size: 1.35rem;
   border-bottom: 1px solid #e0e0e0;
   padding-bottom: 0.5rem;
}

.citation-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.citation-list li {
   margin-bottom: 1rem;
   line-height: 1.6;
   color: #333333;
   padding-left: 1.5rem;
   text-indent: -1.5rem;
}

.citation-list li:last-child {
   margin-bottom: 0;
}

.citation-list a {
   color: #2c3e50;
   text-decoration: underline;
   word-break: break-all;
}

.citation-list a:hover {
   color: #d4a373;
}

.references-sidebar {
   flex: 1;
   min-width: 220px;
}

/* -----------------------------------------------------------------
    Contact Page Styling
-----------------------------------------------------------------*/
.contact-layout {
   display: flex;
   gap: 2rem;
   padding: 2rem 1rem;
   max-width: 1200px;
   margin: 0 auto;
   width: 100%;
}

.contact-content {
   flex: 3;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.contact-form {
   background-color: #ffffff;
   border: 2px solid #2c3e50;
   border-radius: 4px;
   padding: 1.75rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.form-group label {
   font-weight: 600;
   color: #2c3e50;
   font-size: 0.95rem;
}

.form-group input,
.form-group textarea,
.form-group select {
   width: 100%;
   padding: 0.75rem 1rem;
   border: 1px solid #cccccc;
   border-radius: 4px;
   font-size: 1rem;
   font-family: inherit;
   transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
   outline: none;
   border-color: #2c3e50;
   box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.15);
}

.submit-btn {
   background-color: #2c3e50;
   color: #f4e8c1;
   border: none;
   padding: 0.85rem 1.5rem;
   font-size: 1rem;
   font-weight: bold;
   border-radius: 4px;
   cursor: pointer;
   align-self: flex-start;
   transition:
      background-color 0.2s ease,
      color 0.2s ease;
}

.submit-btn:hover {
   background-color: #1a252f;
   color: #ffffff;
}

.contact-sidebar {
   flex: 1;
   min-width: 240px;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.contact-info-body {
   padding: 1rem 1.25rem;
   color: #333333;
   line-height: 1.6;
}

.contact-info-body p {
   margin: 0 0 0.5rem 0;
}

.contact-info-body p:last-child {
   margin-bottom: 0;
}