/**
 * Event-microsite frame & body-pattern presets.
 *
 * Served from the wactivity public dir; linked by the event renderer.
 * Every visual parameter is a CSS custom property with a sensible default,
 * so a microsite's theme JSON can override any knob without editing this
 * file or the renderer.
 *
 * Token contract (consumed by selectors below, emitted by event-renderer.ts):
 *
 *   Palette (from theme.palette)
 *     --brand, --brand-dark, --brand-light
 *     --accent, --accent-light
 *     --surface, --surface-alt
 *     --ink, --ink-muted
 *     --body-bg
 *
 *   Typography (from theme.typography — font stacks, not URLs)
 *     --font-display, --font-heading, --font-body, --font-accent
 *
 *   Radius / shadow scales
 *     --radius, --shadow
 *
 *   Frame geometry (from theme.frameConfig — all optional)
 *     --frame-max-width       (default: 920px)
 *     --frame-top-margin      (default: 75px)
 *     --frame-padding-block   (default: 40px)
 *     --frame-padding-inline  (default: 32px)
 *     --frame-inset           (default: 20px)   double-border inset
 *     --frame-inset-inner     (default: 4px)    inner of the double
 *     --frame-border-color    (default: var(--accent))
 *     --frame-border-outer-opacity  (default: 0.4)
 *     --frame-border-inner-opacity  (default: 0.2)
 *     --frame-border-shadow-rgb     (default: 74,20,25)  stacked shadow tint
 *
 *   Section defaults (consumed by block CSS inside the frame)
 *     --section-padding-block   (default: 4rem)
 *     --section-max-inner-width (default: 850px)
 *
 * Block-level CSS (headings, descriptions, buttons) reads the vars above;
 * none of the block styles live in this file. This file only defines what
 * "frame X" and "pattern Y" mean.
 *
 * Changing a frame preset here updates every microsite using it on the next
 * page load — cache headers below make the impact predictable.
 */

/* ---------- Baseline inside the frame ---------- */

.pb-event {
  color: var(--ink, #1a1a1a);
  background: var(--surface, transparent);
  font-family: var(--font-body, Georgia, serif);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.pb-event .pb-page {
  /* Undo the generic .pb-page defaults — we want the frame to drive size
     and padding, not the page-builder generic wrapper. */
  background: transparent;
  color: inherit;
  font-family: inherit;
  padding: 0;
  max-width: none;
}

.pb-event h2,
.pb-event h3 {
  font-family: var(--font-heading, Georgia, serif);
  color: var(--brand-dark, var(--brand, inherit));
  line-height: 1.3;
}

/* H1 inside an event frame is hero-level display (couple names, event title).
   Uses --hero-font with a sensible fallback chain so a theme without a
   display font still looks correct. Microsites that prefer H1 = regular
   heading can set `--hero-font: var(--font-heading)` in theme.frameConfig. */
.pb-event h1,
.pb-event .pb-heading-display {
  font-family: var(--hero-font, var(--font-display, var(--font-heading, Georgia, serif)));
  color: var(--brand-dark, var(--brand, inherit));
  line-height: 1.15;
  font-weight: 400;
}

.pb-event .pb-heading {
  font-family: var(--font-heading, Georgia, serif);
  color: var(--brand-dark, var(--brand, inherit));
}
/* H1-tagged .pb-heading gets the display treatment explicitly (the heading
   block renders `<h1 class="pb-heading">…</h1>` — the element selector above
   applies, but we repeat it here for specificity when custom CSS tries to
   override). */
.pb-event h1.pb-heading {
  font-family: var(--hero-font, var(--font-display, var(--font-heading, Georgia, serif)));
}

.pb-event .pb-description {
  color: var(--ink, inherit);
  line-height: 1.9;
}

/* ---------- Frame: none ---------- */
/* No visible frame — content flows at full width of the shell content area. */

.pb-event-frame-none {
  width: 100%;
}

/* ---------- Frame: minimal ---------- */
/* Centered column, no decorative borders. Good for modern / corporate. */

.pb-event-frame-minimal {
  max-width: var(--frame-max-width, 920px);
  margin: var(--frame-top-margin, 0) auto;
  padding: var(--frame-padding-block, 3rem) var(--frame-padding-inline, 2rem);
  background: var(--surface, transparent);
  border-radius: var(--radius, 0);
  box-shadow: var(--shadow, none);
}

/* ---------- Frame: paper ---------- */
/* Centered card with double gold-line border + stacked shadow.
   All geometry driven by CSS vars — the ":paper" preset just picks the
   defaults that make this look "invitation-like". */

.pb-event-frame-paper {
  position: relative;
  max-width: var(--frame-max-width, 920px);
  margin: var(--frame-top-margin, 75px) auto 0;
  padding: var(--frame-padding-block, 40px) var(--frame-padding-inline, 32px)
           calc(var(--frame-padding-block, 40px) * 2);
  background-color: var(--surface, #F8F4ED);
  box-shadow:
    0 0 0 1px var(--frame-border-color, var(--accent, rgba(196,162,101,0.3))),
    0 0 0 6px rgba(var(--frame-border-shadow-rgb, 74,20,25), 0.15),
    0 0 0 7px var(--frame-border-color, var(--accent, rgba(196,162,101,0.2))),
    var(--shadow, 0 25px 80px rgba(0,0,0,0.5));
}

/* Double inner border (the "gold frame"). Purely decorative. */
.pb-event-frame-paper::before {
  content: '';
  position: absolute;
  inset: var(--frame-inset, 20px);
  border: 1px solid var(--frame-border-color, var(--accent, currentColor));
  opacity: var(--frame-border-outer-opacity, 0.4);
  pointer-events: none;
}
.pb-event-frame-paper::after {
  content: '';
  position: absolute;
  inset: calc(var(--frame-inset, 20px) + var(--frame-inset-inner, 4px));
  border: 1px solid var(--frame-border-color, var(--accent, currentColor));
  opacity: var(--frame-border-inner-opacity, 0.2);
  pointer-events: none;
}

/* ---------- Frame: edge-to-edge ---------- */
/* Full-viewport width, no side padding. For immersive photo-first sites. */

.pb-event-frame-edge-to-edge {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--surface, transparent);
}

/* ---------- Body patterns ---------- */
/* Applied to .pb-event; stacks on top of --surface. */

.pb-event-pattern-none {
  /* no-op */
}

.pb-event-pattern-subtle-noise {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.02) 100%);
}

.pb-event-pattern-paper-grain {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E");
}

/* ---------- Inline language switcher ---------- */
/* Rendered by event-renderer when ≥2 enabled languages exist. Designed to
   sit at the top of the paper frame as a small row of ES | EN | FR buttons. */

.pb-event .pb-event-lang-switcher {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0 1rem;
  margin-top: var(--lang-switcher-offset, -1rem);
}

.pb-event .pb-event-lang {
  padding: 0.25rem 0.5rem;
  font-family: var(--font-body, inherit);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted, var(--ink, inherit));
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.pb-event .pb-event-lang:hover {
  color: var(--brand-dark, var(--brand, inherit));
}
.pb-event .pb-event-lang-active {
  color: var(--brand-dark, var(--brand, inherit));
  border-bottom-color: var(--accent, currentColor);
  font-weight: 600;
}
.pb-event .pb-event-lang-sep {
  color: var(--accent, rgba(0,0,0,0.35));
  font-size: 0.75rem;
  opacity: 0.5;
}

/* ---------- Countdown block ---------- */

.pb-event .pb-countdown {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--countdown-gap, 3rem);
  margin: var(--countdown-margin, 3rem auto);
  padding: var(--countdown-padding, 2rem 1rem);
  background: var(--countdown-bg, var(--brand, transparent));
  color: var(--countdown-ink, var(--surface, inherit));
  border-radius: var(--radius, 0);
  position: relative;
}

.pb-event .pb-countdown-cards {
  text-align: center;
}
.pb-event .pb-countdown-inline {
  gap: var(--countdown-gap-inline, 1.5rem);
  padding: var(--countdown-padding-inline, 1rem);
}

.pb-event .pb-countdown-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4rem;
}
.pb-event .pb-countdown-number {
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--countdown-number-size, clamp(2.2rem, 6vw, 4rem));
  line-height: 1;
  font-weight: 400;
  color: var(--countdown-number-color, var(--surface, var(--ink, inherit)));
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}
.pb-event .pb-countdown-label {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 0.8rem;
  color: var(--countdown-label-color, var(--accent-light, var(--accent, inherit)));
  font-weight: 500;
}
.pb-event .pb-countdown-reached {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--countdown-number-color, var(--surface, inherit));
  text-align: center;
  width: 100%;
}

/* ---------- FAQ accordion ---------- */

.pb-event .pb-faq {
  max-width: var(--faq-max-width, 750px);
  margin: var(--faq-margin, 2rem auto);
}
.pb-event .pb-faq-item {
  border-bottom: 1px solid var(--faq-divider, var(--accent, rgba(0,0,0,0.2)));
  padding: 1.5rem 0;
}
.pb-event .pb-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--brand-dark, var(--brand, inherit));
  list-style: none;
  /* Hide the default triangle marker across browsers */
}
.pb-event .pb-faq-question::-webkit-details-marker { display: none; }
.pb-event .pb-faq-question::marker { content: ''; }
.pb-event .pb-faq-indicator {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent, var(--brand, inherit));
  transition: transform 0.25s ease;
  line-height: 1;
  width: 1.25em;
  text-align: center;
}
.pb-event .pb-faq-item[open] .pb-faq-indicator {
  /* Rotation achieves "+ → ×" visually via CSS alone; the JS hydration also
     swaps the text content for browsers that skip the rotation animation. */
  transform: rotate(45deg);
}
.pb-event .pb-faq-answer {
  padding-top: 1rem;
  color: var(--ink-muted, var(--ink, inherit));
  line-height: 1.9;
  font-size: 0.95rem;
}
.pb-event .pb-faq-answer p:first-child { margin-top: 0; }

/* ---------- Small screens ---------- */

@media (max-width: 768px) {
  .pb-event-frame-paper {
    margin-left: var(--frame-mobile-side-margin, 8px);
    margin-right: var(--frame-mobile-side-margin, 8px);
    padding: var(--frame-mobile-padding-block, 24px)
             var(--frame-mobile-padding-inline, 16px);
  }
  .pb-event-frame-paper::before {
    inset: calc(var(--frame-inset, 20px) * 0.6);
  }
  .pb-event-frame-paper::after {
    inset: calc(var(--frame-inset, 20px) * 0.6 + var(--frame-inset-inner, 4px));
  }
  .pb-event-frame-minimal {
    padding: var(--frame-mobile-padding-block, 2rem)
             var(--frame-mobile-padding-inline, 1.25rem);
  }
}

@media (max-width: 480px) {
  .pb-event-frame-paper {
    margin-left: 0;
    margin-right: 0;
  }
}