#fw-section-custom-html-1ee3354d-2896-4cf1-9fc8-7c80465a3742 {

/* =========================
   PlayfulPuffer Calendar Theme
   Palette:
   Primary: #27257c
   Background: #e1c820
   Text: #ff3131
   Text over Primary: #ffffff
   ========================= */

:root{
  --pp-primary: #27257c;
  --pp-bg: #e1c820;
  --pp-text: #ff3131;
  --pp-on-primary: #ffffff;

  /* tuned neutrals derived from your palette */
  --pp-border: rgba(39, 37, 124, 0.35);
  --pp-surface: rgba(39, 37, 124, 0.08);
  --pp-shadow: rgba(39, 37, 124, 0.18);
}

/* Scope everything to the calendar block (classes from the earlier embed snippet) */
.fw-gcal{
  max-width: 1100px;
  margin: 0 auto;

  color: var(--pp-text);
}

/* Header */
.fw-gcal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.fw-gcal__title{
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pp-text);
}

/* Tabs (pill control) */
.fw-gcal__tabs{
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;

  border: 1px solid var(--pp-border);
  background: rgba(225, 200, 32, 0.55); /* background-tinted */
  box-shadow: 0 6px 18px rgba(39, 37, 124, 0.12);
}

.fw-gcal__tab{
  appearance: none;
  border: 0;
  background: transparent;

  padding: 10px 14px;
  cursor: pointer;

  font: inherit;
  font-weight: 800;
  letter-spacing: 0.01em;

  color: var(--pp-primary);
  opacity: 0.95;

  transition: transform 140ms ease, background-color 140ms ease, opacity 140ms ease;
}

.fw-gcal__tab:hover{
  opacity: 1;
  background: rgba(39, 37, 124, 0.10);
}

.fw-gcal__tab:active{
  transform: translateY(1px);
}

/* Active tab uses Primary with Text over Primary */
.fw-gcal__tab.is-active{
  background: var(--pp-primary);
  color: var(--pp-on-primary);
  opacity: 1;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* Accessible focus ring aligned to Primary */
.fw-gcal__tab:focus-visible{
  outline: 3px solid rgba(39, 37, 124, 0.55);
  outline-offset: 2px;
}

/* Calendar “card” frame */
.fw-gcal__frame{
  position: relative;
  width: 100%;
  height: 820px;

  border-radius: 18px;
  overflow: hidden;

  border: 1px solid var(--pp-border);

  /* background uses your site background with subtle primary glaze */
  background: linear-gradient(
    180deg,
    rgba(225, 200, 32, 0.90),
    rgba(225, 200, 32, 0.65)
  );

  box-shadow:
    0 18px 40px rgba(39, 37, 124, 0.16),
    0 2px 0 rgba(39, 37, 124, 0.10);
}

/* iframe fits and softens edges */
.fw-gcal__iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;

  /* slight rounding so the embed sits “inside” the card */
  border-radius: 16px;
  background: transparent;
}

/* Footer link */
.fw-gcal__footer{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.fw-gcal__link{
  color: var(--pp-primary);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 0.95;
  transition: opacity 140ms ease;
}

.fw-gcal__link:hover{
  opacity: 1;
}

/* Mobile density */
@media (max-width: 720px){
  .fw-gcal__frame{ height: 700px; }
  .fw-gcal__tabs{ width: 100%; }
  .fw-gcal__tab{ flex: 1; text-align: center; }
}

@media (max-width: 420px){
  .fw-gcal__frame{ height: 620px; }
}

}