/* ==========================================================================
   THEME: GROOVY - "Summer of Love, Milano"

   60s/70s hippie vibes
   Warm earth tones, psychedelic pops
   Organic shapes, peace & love
   ========================================================================== */

[data-theme="groovy"] {
  /* Colors */
  --color-bg: #FEFAE0;
  --color-bg-alt: #FFF8DC;
  --color-text: #2D2A32;
  --color-text-muted: #6B6572;
  --color-accent: #E85D04;
  --color-accent-hover: #D45A03;
  --color-secondary: #606C38;
  --color-tertiary: #F72585;
  --color-warm: #F9C846;
  --color-success: #606C38;
  --color-danger: #E85D04;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;

  /* Borders & Radius - soft, organic */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --border-width: 3px;

  /* Shadows - soft, warm */
  --shadow-sm: 0 4px 12px rgba(232, 93, 4, 0.15);
  --shadow-md: 0 8px 24px rgba(232, 93, 4, 0.2);

  /* Wave height for transitions */
  --wave-height: 50px;
}

/* ==========================================================================
   BASE THEME STYLES
   ========================================================================== */

[data-theme="groovy"] body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  position: relative;
}

/* Subtle pattern overlay */
[data-theme="groovy"] body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(232, 93, 4, 0.05) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(247, 37, 133, 0.05) 0%, transparent 50%),
                    radial-gradient(circle at 40% 80%, rgba(96, 108, 56, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* ==========================================================================
   CONTROLS
   ========================================================================== */

[data-theme="groovy"] .theme-toggle,
[data-theme="groovy"] .lang-toggle {
  background: var(--color-bg);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-full);
}

[data-theme="groovy"] .theme-toggle:hover,
[data-theme="groovy"] .lang-toggle:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  transform: rotate(-5deg) scale(1.05);
}

[data-theme="groovy"] .theme-toggle__icon::before {
  content: "B&W";
  font-size: 0.6rem;
  font-weight: 600;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

[data-theme="groovy"] .hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  padding-bottom: calc(var(--space-xl) + var(--wave-height));
  position: relative;
  text-align: center;
  overflow: visible;

  /* Groovy couple illustration background - with space in center for text */
  background-image:
    linear-gradient(to bottom, rgba(254,250,224,0.3) 0%, rgba(254,250,224,0.1) 40%, rgba(254,250,224,0.4) 100%),
    url('../images/generated/gemini_groovy_20260109_091940.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Parallax effect */
}

/* Wavy bottom border for Hero */
[data-theme="groovy"] .hero::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: var(--wave-height);
  background: var(--color-bg-alt);
  clip-path: polygon(
    0% 100%,
    0% 60%,
    5% 65%,
    10% 55%,
    15% 70%,
    20% 50%,
    25% 65%,
    30% 45%,
    35% 60%,
    40% 40%,
    45% 55%,
    50% 35%,
    55% 50%,
    60% 40%,
    65% 55%,
    70% 45%,
    75% 60%,
    80% 50%,
    85% 65%,
    90% 55%,
    95% 70%,
    100% 60%,
    100% 100%
  );
  z-index: 10;
}

/* Decorative sunburst */
[data-theme="groovy"] .hero__decoration {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vmax;
  height: 150vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    var(--color-warm) 0deg 15deg,
    transparent 15deg 30deg,
    var(--color-warm) 30deg 45deg,
    transparent 45deg 60deg,
    var(--color-warm) 60deg 75deg,
    transparent 75deg 90deg,
    var(--color-warm) 90deg 105deg,
    transparent 105deg 120deg,
    var(--color-warm) 120deg 135deg,
    transparent 135deg 150deg,
    var(--color-warm) 150deg 165deg,
    transparent 165deg 180deg,
    var(--color-warm) 180deg 195deg,
    transparent 195deg 210deg,
    var(--color-warm) 210deg 225deg,
    transparent 225deg 240deg,
    var(--color-warm) 240deg 255deg,
    transparent 255deg 270deg,
    var(--color-warm) 270deg 285deg,
    transparent 285deg 300deg,
    var(--color-warm) 300deg 315deg,
    transparent 315deg 330deg,
    var(--color-warm) 330deg 345deg,
    transparent 345deg 360deg
  );
  opacity: 0.15;
  animation: slowSpin 120s linear infinite;
  z-index: 0;
}

@keyframes slowSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

[data-theme="groovy"] .hero__content {
  position: relative;
  z-index: 1;
}

/* Peace symbol */
[data-theme="groovy"] .hero__symbol {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--space-md);
  border: 4px solid var(--color-accent);
  border-radius: 50%;
  position: relative;
}

[data-theme="groovy"] .hero__symbol::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 50%;
  background: var(--color-accent);
  transform: translate(-50%, 0);
}

[data-theme="groovy"] .hero__symbol::after {
  content: "";
  position: absolute;
  top: 35%;
  left: 50%;
  width: 70%;
  height: 4px;
  background: var(--color-accent);
  transform: translate(-50%, 0) rotate(45deg);
  transform-origin: center;
}

[data-theme="groovy"] .hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: var(--color-accent);
}

[data-theme="groovy"] .hero__name {
  display: block;
  transition: transform 0.3s ease;
}

[data-theme="groovy"] .hero__name:hover {
  transform: rotate(-3deg) scale(1.02);
}

[data-theme="groovy"] .hero__name--diana {
  color: var(--color-tertiary);
  text-shadow:
    2px 2px 0 white,
    3px 3px 6px rgba(0,0,0,0.4);
}

[data-theme="groovy"] .hero__name--mattia {
  color: var(--color-secondary);
  text-shadow:
    2px 2px 0 white,
    3px 3px 6px rgba(0,0,0,0.4);
}

[data-theme="groovy"] .hero__ampersand {
  display: block;
  font-size: 0.5em;
  color: var(--color-accent);
  margin: var(--space-xs) 0;
  transform: rotate(-10deg);
}

[data-theme="groovy"] .hero__subtitle {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  font-style: italic;
  margin-top: var(--space-md);
  color: white;
  -webkit-text-stroke: 0;
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.8),
    2px 2px 4px rgba(0,0,0,0.5);
}

[data-theme="groovy"] .hero__date {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: var(--radius-full);
  transform: rotate(-2deg);
}

/* Countdown */
[data-theme="groovy"] .countdown {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}

[data-theme="groovy"] .countdown__unit {
  text-align: center;
  padding: var(--space-sm);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius-md);
  min-width: 70px;
  transform: rotate(var(--rotate, 0deg));
}

[data-theme="groovy"] .countdown__unit:nth-child(1) { --rotate: -3deg; }
[data-theme="groovy"] .countdown__unit:nth-child(3) { --rotate: 2deg; }
[data-theme="groovy"] .countdown__unit:nth-child(5) { --rotate: -2deg; }
[data-theme="groovy"] .countdown__unit:nth-child(7) { --rotate: 3deg; }

[data-theme="groovy"] .countdown__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-accent);
}

[data-theme="groovy"] .countdown__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

[data-theme="groovy"] .countdown__separator {
  display: none;
}

/* Scroll indicator */
[data-theme="groovy"] .hero__scroll {
  position: absolute;
  bottom: var(--space-lg);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  animation: bounce 2s ease infinite;
}

/* ==========================================================================
   SECTION TITLES
   ========================================================================== */

[data-theme="groovy"] .section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 900;
  font-style: italic;
  color: var(--color-accent);
}

[data-theme="groovy"] .section-title--small {
  font-size: 1.5rem;
}

/* ==========================================================================
   EVENT SECTION
   ========================================================================== */

[data-theme="groovy"] .event {
  padding: var(--space-2xl) var(--space-md);
  padding-bottom: calc(var(--space-2xl) + var(--wave-height));
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg-alt) 100%);
  position: relative;
}

/* Wavy bottom border for Event - matches RSVP green */
[data-theme="groovy"] .event::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: var(--wave-height);
  background: var(--color-secondary);
  clip-path: polygon(
    0% 100%,
    0% 40%,
    8% 55%,
    16% 35%,
    24% 50%,
    32% 30%,
    40% 45%,
    48% 25%,
    56% 40%,
    64% 20%,
    72% 35%,
    80% 25%,
    88% 40%,
    96% 30%,
    100% 45%,
    100% 100%
  );
  z-index: 10;
}

[data-theme="groovy"] .event__timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}

[data-theme="groovy"] .event__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transform: rotate(var(--rotate, 0deg));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="groovy"] .event__card:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: var(--shadow-md);
}

[data-theme="groovy"] .event__card--meetup { --rotate: -1deg; }
[data-theme="groovy"] .event__card--ceremony { --rotate: 1deg; }
[data-theme="groovy"] .event__card--reception { --rotate: -0.5deg; }

[data-theme="groovy"] .event__time {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  font-style: italic;
  color: var(--color-accent);
}

[data-theme="groovy"] .event__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  color: var(--color-secondary);
}

[data-theme="groovy"] .event__location {
  font-size: 1.125rem;
  font-weight: 600;
}

[data-theme="groovy"] .event__address {
  color: var(--color-text);
  opacity: 0.8;
}

[data-theme="groovy"] .event__description {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text);
}

[data-theme="groovy"] .event__note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--color-tertiary);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(247, 37, 133, 0.1);
  border-radius: var(--radius-full);
  display: inline-block;
}

[data-theme="groovy"] .event__map-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(232, 93, 4, 0.1);
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
}

[data-theme="groovy"] .event__map-link:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ==========================================================================
   RSVP SECTION
   ========================================================================== */

[data-theme="groovy"] .rsvp {
  padding: var(--space-2xl) var(--space-md);
  padding-bottom: calc(var(--space-2xl) + var(--wave-height));
  color: var(--color-bg);
  position: relative;
  overflow: visible;

  /* VW van groovy background - FULL COVER with parallax */
  background-color: var(--color-secondary);
  background-image:
    linear-gradient(to bottom, rgba(96,108,56,0.85) 0%, rgba(96,108,56,0.75) 50%, rgba(96,108,56,0.85) 100%),
    url('../images/generated/gemini_groovy_20260108_181724.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Parallax effect */
}

/* Wavy bottom border for RSVP - matches Kids pink */
[data-theme="groovy"] .rsvp::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: var(--wave-height);
  background: var(--color-tertiary);
  clip-path: polygon(
    0% 100%,
    0% 50%,
    6% 35%,
    12% 55%,
    18% 40%,
    24% 60%,
    30% 45%,
    36% 65%,
    42% 50%,
    48% 70%,
    54% 55%,
    60% 75%,
    66% 60%,
    72% 45%,
    78% 65%,
    84% 50%,
    90% 70%,
    96% 55%,
    100% 40%,
    100% 100%
  );
  z-index: 10;
}

[data-theme="groovy"] .rsvp__intro {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  opacity: 0.9;
  margin-bottom: var(--space-xl);
}

[data-theme="groovy"] .rsvp__form {
  max-width: 500px;
  margin: 0 auto;
}

[data-theme="groovy"] .rsvp__step {
  display: none;
}

[data-theme="groovy"] .rsvp__step--active {
  display: block;
  animation: fadeIn 0.3s ease;
}

[data-theme="groovy"] .rsvp__step-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-style: italic;
  text-align: center;
  margin-bottom: var(--space-lg);
}

[data-theme="groovy"] .rsvp__choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

[data-theme="groovy"] .rsvp__hint {
  text-align: center;
  font-style: italic;
  opacity: 0.8;
  margin-bottom: var(--space-lg);
}

/* Form inputs */
[data-theme="groovy"] .form-label {
  color: var(--color-bg);
  opacity: 0.9;
}

[data-theme="groovy"] .form-input {
  background: var(--color-bg);
  border: none;
  color: var(--color-text);
  border-radius: var(--radius-md);
}

[data-theme="groovy"] .form-input:focus {
  box-shadow: 0 0 0 4px rgba(254, 250, 224, 0.3);
}

/* Buttons */
[data-theme="groovy"] .btn--primary {
  background: var(--color-warm);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  border-radius: var(--radius-full);
  border: none;
  transform: rotate(-1deg);
  transition: all 0.2s ease;
}

[data-theme="groovy"] .btn--primary:hover {
  transform: rotate(1deg) scale(1.05);
  box-shadow: var(--shadow-md);
}

[data-theme="groovy"] .btn--ghost {
  color: var(--color-bg);
  opacity: 0.8;
}

[data-theme="groovy"] .btn--ghost:hover {
  opacity: 1;
}

[data-theme="groovy"] .btn--yes,
[data-theme="groovy"] .btn--no {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-bg);
  color: var(--color-bg);
  transition: all 0.2s ease;
}

[data-theme="groovy"] .btn--yes {
  background: var(--color-warm);
  color: var(--color-text);
  border-color: var(--color-warm);
  transform: rotate(-2deg);
}

[data-theme="groovy"] .btn--yes:hover {
  transform: rotate(0deg) scale(1.05);
}

[data-theme="groovy"] .btn--no {
  background: transparent;
  transform: rotate(1deg);
}

[data-theme="groovy"] .btn--no:hover {
  background: var(--color-bg);
  color: var(--color-secondary);
  transform: rotate(0deg) scale(1.05);
}

/* Guest entries */
[data-theme="groovy"] .guests-list {
  margin-bottom: var(--space-lg);
}

[data-theme="groovy"] .guest-entry {
  position: relative;
  padding: var(--space-md);
  background: rgba(254, 250, 224, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

[data-theme="groovy"] .guest-entry__remove {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  color: var(--color-bg);
  opacity: 0.6;
  padding: var(--space-xs);
}

[data-theme="groovy"] .guest-entry__remove:hover {
  opacity: 1;
}

[data-theme="groovy"] .rsvp__add-guest {
  width: 100%;
  padding: var(--space-md);
  border: 2px dashed rgba(254, 250, 224, 0.4);
  border-radius: var(--radius-md);
  color: var(--color-bg);
  opacity: 0.8;
  margin-bottom: var(--space-lg);
}

[data-theme="groovy"] .rsvp__add-guest:hover {
  border-color: var(--color-warm);
  color: var(--color-warm);
  opacity: 1;
}

[data-theme="groovy"] .rsvp__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Messages */
[data-theme="groovy"] .rsvp__message {
  text-align: center;
  padding: var(--space-xl);
}

[data-theme="groovy"] .rsvp__message-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
}

[data-theme="groovy"] .rsvp__message--success .rsvp__message-text {
  color: var(--color-warm);
}

/* ==========================================================================
   KIDS SECTION - FLOWER POWER STYLE
   ========================================================================== */

[data-theme="groovy"] .kids {
  padding: var(--space-2xl) var(--space-md);
  padding-bottom: calc(var(--space-2xl) + var(--wave-height));
  text-align: center;
  position: relative;
  overflow: visible;

  /* Kids flower power background with parallax */
  background-color: var(--color-tertiary);
  background-image:
    linear-gradient(to bottom, rgba(247,37,133,0.8) 0%, rgba(247,37,133,0.65) 50%, rgba(247,37,133,0.8) 100%),
    url('../images/generated/gemini_groovy_20260109_094430.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Parallax effect */
}

/* Wavy bottom border for Kids - matches Gift orange */
[data-theme="groovy"] .kids::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: var(--wave-height);
  background: var(--color-accent);
  clip-path: polygon(
    0% 100%,
    0% 45%,
    4% 60%,
    8% 40%,
    12% 55%,
    16% 35%,
    20% 50%,
    24% 30%,
    28% 45%,
    32% 25%,
    36% 40%,
    40% 20%,
    44% 35%,
    48% 25%,
    52% 40%,
    56% 30%,
    60% 45%,
    64% 35%,
    68% 50%,
    72% 40%,
    76% 55%,
    80% 45%,
    84% 60%,
    88% 50%,
    92% 65%,
    96% 55%,
    100% 70%,
    100% 100%
  );
  z-index: 10;
}

[data-theme="groovy"] .kids__content {
  max-width: 550px;
  margin: 0 auto;
  padding: var(--space-xl);
  background: rgba(254,250,224,0.95);
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius-lg);
  transform: rotate(-1deg);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
}

[data-theme="groovy"] .kids .section-title {
  color: var(--color-tertiary);
  margin-bottom: var(--space-md);
}

[data-theme="groovy"] .kids__text {
  font-size: 1.4rem;
  margin-bottom: var(--space-md);
  color: var(--color-text);
  font-weight: 500;
}

[data-theme="groovy"] .kids__note {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-bg);
  font-size: 1.15rem;
  background: var(--color-tertiary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  display: inline-block;
  transform: rotate(1deg);
}

/* ==========================================================================
   GIFT SECTION
   ========================================================================== */

[data-theme="groovy"] .gift {
  padding: var(--space-2xl) var(--space-md);
  padding-bottom: calc(var(--space-2xl) + var(--wave-height));
  color: var(--color-bg);
  position: relative;
  overflow: visible;

  /* Japan groovy background - FULL COVER with parallax */
  background-color: var(--color-accent);
  background-image:
    linear-gradient(to bottom, rgba(232,93,4,0.75) 0%, rgba(232,93,4,0.65) 50%, rgba(232,93,4,0.75) 100%),
    url('../images/generated/gemini_groovy_20260109_092412.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Parallax effect */
}

/* Wavy bottom border for Gift - matches Social green */
[data-theme="groovy"] .gift::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: var(--wave-height);
  background: var(--color-secondary);
  clip-path: polygon(
    0% 100%,
    0% 35%,
    5% 50%,
    10% 30%,
    15% 45%,
    20% 25%,
    25% 40%,
    30% 20%,
    35% 35%,
    40% 15%,
    45% 30%,
    50% 20%,
    55% 35%,
    60% 25%,
    65% 40%,
    70% 30%,
    75% 45%,
    80% 35%,
    85% 50%,
    90% 40%,
    95% 55%,
    100% 45%,
    100% 100%
  );
  z-index: 10;
}

[data-theme="groovy"] .gift .section-title {
  color: var(--color-bg);
}

[data-theme="groovy"] .gift__content {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

[data-theme="groovy"] .gift__destination {
  margin-bottom: var(--space-lg);
}

[data-theme="groovy"] .gift__destination-label {
  display: block;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-bg);
  margin-bottom: var(--space-xs);
}

[data-theme="groovy"] .gift__destination-place {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 900;
  font-style: italic;
  color: var(--color-bg);
  transform: rotate(-2deg);
  display: inline-block;
}

[data-theme="groovy"] .gift__description {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--color-bg);
  margin-bottom: var(--space-xl);
}

[data-theme="groovy"] .gift__iban {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  transform: rotate(1deg);
}

[data-theme="groovy"] .gift__iban-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

[data-theme="groovy"] .gift__iban-note {
  font-size: 0.75rem;
  font-weight: normal;
  opacity: 0.8;
}

[data-theme="groovy"] .gift__iban-value {
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  word-break: break-all;
  margin-bottom: var(--space-xs);
}

[data-theme="groovy"] .gift__iban-beneficiary {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

[data-theme="groovy"] .gift__iban-beneficiary strong {
  color: var(--color-text);
}

[data-theme="groovy"] .gift__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  color: var(--color-accent);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(232, 93, 4, 0.1);
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
}

[data-theme="groovy"] .gift__copy:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

[data-theme="groovy"] .gift__causale {
  font-size: 0.875rem;
  opacity: 0.9;
}

[data-theme="groovy"] .gift__causale strong {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  margin-top: var(--space-xs);
}

/* ==========================================================================
   SOCIAL SECTION - PHOTO COLLAGE STYLE
   ========================================================================== */

[data-theme="groovy"] .social {
  padding: var(--space-2xl) var(--space-md);
  padding-bottom: calc(var(--space-2xl) + var(--wave-height));
  text-align: center;
  position: relative;
  overflow: visible;

  /* Photo collage background with parallax */
  background-color: var(--color-secondary);
  background-image:
    linear-gradient(to bottom, rgba(96,108,56,0.85) 0%, rgba(96,108,56,0.7) 50%, rgba(96,108,56,0.85) 100%),
    url('../images/generated/gemini_groovy_20260109_093124.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Parallax effect */
}

/* Wavy bottom border for Social - matches Footer pink */
[data-theme="groovy"] .social::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: var(--wave-height);
  background: var(--color-tertiary);
  clip-path: polygon(
    0% 100%,
    0% 55%,
    7% 40%,
    14% 60%,
    21% 45%,
    28% 65%,
    35% 50%,
    42% 70%,
    49% 55%,
    56% 75%,
    63% 60%,
    70% 45%,
    77% 65%,
    84% 50%,
    91% 70%,
    100% 55%,
    100% 100%
  );
  z-index: 10;
}

[data-theme="groovy"] .social__content {
  padding: var(--space-xl);
  background: rgba(254,250,224,0.95);
  border-radius: var(--radius-lg);
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
  border: var(--border-width) solid var(--color-text);
}

[data-theme="groovy"] .social__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

[data-theme="groovy"] .social__hashtag {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 900;
  font-style: italic;
  color: var(--color-bg);
  background: var(--color-accent);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  display: inline-block;
  transform: rotate(1deg);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

[data-theme="groovy"] .footer {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  background: var(--color-tertiary);
  color: var(--color-bg);
}

[data-theme="groovy"] .footer__names {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  font-style: italic;
}

[data-theme="groovy"] .footer__date {
  opacity: 0.8;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Disable parallax on mobile/touch devices (doesn't work well on iOS) */
@media (max-width: 1024px), (hover: none) {
  [data-theme="groovy"] .hero,
  [data-theme="groovy"] .rsvp,
  [data-theme="groovy"] .kids,
  [data-theme="groovy"] .gift,
  [data-theme="groovy"] .social {
    background-attachment: scroll;
  }
}

@media (min-width: 768px) {
  [data-theme="groovy"] .event__card {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  [data-theme="groovy"] .event__time {
    flex: 0 0 100px;
  }

  [data-theme="groovy"] .btn--yes,
  [data-theme="groovy"] .btn--no {
    width: auto;
    flex: 1;
  }

  [data-theme="groovy"] .countdown__unit {
    min-width: 90px;
    padding: var(--space-md);
  }
}