/* ==========================================================================
   Calendar Section Class Naming Strategy
   ==========================================================================

   .section-wrapper.calendar-section   → Wraps the full calendar section
   .full-width                         → Allows calendar to span full container width
   .section#calendar                   → Semantic section ID for anchor linking
   h2                                  → Section title (loaded from JSON)
   [data-tockify-calendar]             → Calendar embed container (loaded from JSON)

   This structure supports:
   - Modular content loading from JSON
   - External calendar embedding via Tockify
   - Future enhancements like calendar filters, overlays, or responsive resizing

   ==========================================================================
*//* ---------------------
   Calendar Page Wrapper
   --------------------- */
#calendar {
  max-width: 1100px;                  /* keeps it screen-aware */
  margin: 3rem auto;                  /* centers the calendar */
  padding: 2rem;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* Section wrappers for consistency */
.calendar-section,
.section,
.section-wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.full-width {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Calendar heading polish */
.calendar-section h2,
#calendar h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-green);
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
}
.calendar-section h2::after,
#calendar h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--primary-green);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

/* Responsive awareness */
#calendar iframe {
  width: 100%;
  min-height: 700px;                  /* ensures visibility */
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
  #calendar {
    padding: 1rem;
    margin: 2rem 1rem;
  }
  #calendar iframe {
    min-height: 600px;
  }
}