/* =========================================================
   SafeNest-style Calendar (Plugin-Scoped, Self-Contained)
   ========================================================= */



/* =========================================================
   Neutralize theme utility classes (bdhwk-safe override)
   ========================================================= */

.sn-gcal .bdhwk {
  /* text/layout sanity */
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;

  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;

  /* ensure grid/flex doesn’t collapse */
  flex-direction: row !important;
  align-items: initial !important;
}


/* Make day headers and day cells participate in the grid */
.sn-gcal .sn-gcal-weekdays,
.sn-gcal .sn-gcal-days {
  display: contents;
}


.sn-gcal * {
  box-sizing: border-box;
}

.sn-gcal {
  /* Design tokens (plugin-local, no theme dependency) */
  --sn-purple: #702f8a;
  --sn-purple-soft: #faf5ff;
  --sn-green-light: #a1d683;
  --sn-green-dark: #2f6326;
  --sn-orange: #e96f27;

  --sn-border: #e0e0e6;
  --sn-bg-soft: #f9fafb;
  --sn-bg-white: #ffffff;

  --sn-text-main: #111827;
  --sn-text-muted: #6b7280;

  --sn-radius-cell: 12px;
  --sn-radius-pill: 999px;

  --sn-shadow-hover: 0 5px 16px rgba(15, 23, 42, 0.14);
  --sn-shadow-pill: 0 6px 14px rgba(15, 23, 42, 0.18);

  --sn-today-bg: #f8e8ff;


  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--sn-text-main);
}

/* Box sizing isolation */
.sn-gcal,
.sn-gcal * {
  box-sizing: border-box;
}

/* =========================================================
   Calendar Grid
   ========================================================= */

.sn-gcal .sn-gcal-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

/* Day name headers (Sun–Sat) */
.sn-gcal .sn-gcal-weekday {
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: #9ca3af;
  padding: 4px 2px;
}

.sn-gcal-title{
font-size: 1.6rem;
font-weight: 700;
color: var(--text-main);
}



/* =========================================================
   Day Cells
   ========================================================= */

.sn-gcal .sn-gcal-day {
  box-sizing: border-box;

  background: var(--sn-bg-soft);
  border-radius: var(--sn-radius-cell);
  padding: 6px;
  min-height: 150px;

  display: flex;
  flex-direction: column;
  gap: 4px;

  transition: background 0.15s ease,
              box-shadow 0.15s ease,
              transform 0.15s ease;
}

.sn-gcal .sn-gcal-day:hover {
  background: var(--sn-bg-white);
  box-shadow: var(--sn-shadow-hover);
  transform: translateY(-1px);
  z-index: 2;
}

.sn-gcal .sn-gcal-day.is-out {
  opacity: 0.35;
  background-color:#702f8a30;
}

.sn-gcal .sn-gcal-day.is-today {
  background: #f8e8ff;
}

/* Day number */
.sn-gcal .sn-gcal-daynum {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--sn-text-main);
}

/* =========================================================
   Event Pills
   ========================================================= */

.sn-gcal .sn-gcal-item {
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: var(--sn-radius-pill);
  border-color: transparent;
  background: var(--sn-purple);
  color: #ffffff;
  font-size: 0.65rem;
  line-height: 1.2;
  cursor: pointer;
  max-width: 100%;

  /* --- FIX FOR CLAMP OVERFLOW --- */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* =========================================================
   Category Color Mapping
   ========================================================= */

/* Fundraising (purple) */
.sn-gcal .sn-cat-fundraising {
  background: var(--sn-purple);
}

/* Volunteer Opportunity (light green) */
.sn-gcal .sn-cat-volunteer {
  background: var(--sn-green-light);
  color: #1f3a1f;
}

/* Community Edu (dark green) */
.sn-gcal .sn-cat-communityedu {
  background: var(--sn-green-dark);
}

/* Fallback / uncategorized */
.sn-gcal .sn-cat-default {
  background: var(--sn-orange);
}

/* =========================================================
   Toolbar / Buttons
   ========================================================= */

.sn-gcal .sn-gcal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.sn-gcal-toolbar-right{
 padding-right: 40px;
}

.sn-gcal .sn-gcal-btn {
  border: 1px solid var(--sn-border);
  background: var(--sn-bg-soft);
  border-radius: 30px;
  cursor: pointer;

  font-size: 0.75rem;
  color: var(--sn-text-muted);

  display: inline-flex;
  align-items: center;
  gap: 4px;

  transition: all 0.16s ease;
}

.sn-gcal .sn-gcal-btn:hover {
  background: var(--sn-purple);
  color: #ffffff;
  border-color: var(--sn-purple);
  box-shadow: 0 6px 14px rgba(112, 47, 138, 0.3);
  transform: translateY(-1px);
}

.sn-gcal .sn-gcal-btn.is-active {
  background: var(--sn-purple);
  color: #ffffff;
  border-color: var(--sn-purple);
}

/* =========================================================
   Filters
   ========================================================= */

.sn-gcal .sn-gcal-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.sn-gcal .sn-gcal-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--sn-text-muted);
}

.sn-gcal .sn-gcal-filters select,
.sn-gcal .sn-gcal-filters input {
  border: 1px solid var(--sn-border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.75rem;
}

/* =========================================================
   Modal / Overlay 
   ========================================================= */

.sn-gcal .sn-gcal-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.sn-gcal .sn-gcal-modal.open {
  display: flex;
}

/* Modal card */
.sn-gcal .sn-gcal-modal-inner {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  width: 100%;
  max-width: 640px;
  margin: 16px;

  /* viewport safety */
  max-height: calc(100vh - 32px);
  overflow: hidden;

  /* layout */
  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 18px 20px 16px;

  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.3);
}

/* Close button */
.sn-gcal .sn-gcal-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  outline: none !important;

  border: none;
  background:transparent;
  border-radius: 999px;

  width: 36px;
  height: 36px;

  font-size: 20px;
  line-height: 1;
  cursor: pointer;

  color: #6b7280;
}

.sn-gcal .sn-gcal-modal-close:hover {
 color: #111827;
}

/* Title */
.sn-gcal .event-details-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sn-text-main);
  margin-bottom: 2px;
}

/* Meta rows */
.sn-gcal .event-details-meta {
  font-size: 0.8rem;
  color: var(--sn-text-muted);
}

.sn-gcal .event-details-meta strong {
  color: var(--sn-purple);
}

/* Scrollable description*/
.sn-gcal .event-details-description {
  margin-top: 6px;

  font-size: 0.82rem;
  color: var(--sn-text-main);

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* header + title + meta + padding allowance */
  max-height: calc(100vh - 260px);

  padding-right: 6px;

  overflow-wrap: anywhere;
  word-break: break-word;
}

/* TEMP: hide filters/search until parameters are finalized */
.sn-gcal .sn-gcal-filters,
.sn-gcal .sn-gcal-search,
.sn-gcal .sn-gcal-toolbar-right {
  display: none !important;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 768px) {
  .sn-gcal .sn-gcal-day {
    min-height: 76px;
  }
}