/* ── Sammy — White & Pink Theme ─────────────────────────────── */
/* ideas.krisadamstv.com/sammy                                  */
/* Sammy is special. Her colours are white and pink.             */
/* This overrides the global dark theme completely.              */
/*                                                               */
/* Architecture notes for future me:                             */
/*  - .sammy-fullscreen: the widget viewport (above the fold)    */
/*  - .sammy-info-section: everything below the fold             */
/*  - .sammy-episodes: episode cards, extensible                 */
/*  - .sammy-hero-slot: reserved for future custom graphics      */
/*  - Popup suppression: tangent/whisper/rabbit-hole killed here */
/* ─────────────────────────────────────────────────────────────  */

/* ── Sammy Pink Palette ──────────────────────────────────────── */

:root {
  --sammy-white:       #ffffff;
  --sammy-off-white:   #faf8f9;
  --sammy-pink:        #e9578a;
  --sammy-pink-light:  #f7c5d8;
  --sammy-pink-soft:   #fde8f0;
  --sammy-pink-deep:   #c74070;
  --sammy-pink-glow:   rgba(233, 87, 138, 0.12);
  --sammy-text:        #2d2d3a;
  --sammy-text-light:  #6b6b80;
  --sammy-text-muted:  #a0a0b0;
  --sammy-border:      #eee0e6;
  --sammy-card-bg:     #fff5f8;
}


/* ── Global Theme Override ───────────────────────────────────── */

body {
  background: var(--sammy-white) !important;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(233, 87, 138, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(247, 197, 216, 0.06) 0%, transparent 50%) !important;
  color: var(--sammy-text) !important;
}

/* Remove the dark hero image entirely — widget is the hero */
.hero { display: none !important; }

/* Override global design tokens for this page */
.content {
  --text-primary: var(--sammy-text);
  --text-secondary: var(--sammy-text-light);
  --text-muted: var(--sammy-text-muted);
  --accent-primary: var(--sammy-pink);
  --accent-secondary: var(--sammy-pink-light);
  --bg-primary: var(--sammy-white);
  --bg-secondary: var(--sammy-off-white);
  --bg-card: var(--sammy-card-bg);
  --border: var(--sammy-border);
  padding-top: 0;
  padding-bottom: 0;
  color: var(--sammy-text);
}

/* Break out of the content grid — widget fills the viewport */
.sammy-fullscreen {
  grid-column: full-start / full-end !important;
}

/* Info section also breaks out for full control */
.sammy-info-section {
  grid-column: full-start / full-end !important;
}


/* ── Kill Popup Overlays ─────────────────────────────────────── */
/* These from ideas.js overlap the adventure buttons. Gone.      */

.weave-tangent,
.weave-whisper,
.weave-rabbit-hole,
.weave-pulse {
  display: none !important;
}

/* Kill ambient particles on white background — they look wrong */
.weave-particles {
  display: none !important;
}

/* Kill cursor glow — designed for dark theme */
.cursor-glow {
  display: none !important;
}

/* Reading progress bar — make it pink */
.weave-progress-bar {
  background: var(--sammy-pink) !important;
}


/* ── Fullscreen Widget Container ─────────────────────────────── */

.sammy-fullscreen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.5rem;
  position: relative;
  background: #0d0b14;
  background-image:
    radial-gradient(ellipse at 30% 55%, rgba(233, 87, 138, 0.09) 0%, transparent 50%),
    radial-gradient(ellipse at 72% 28%, rgba(160, 80, 200, 0.05) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(233, 87, 138, 0.04) 0%, transparent 35%);
}

/* Loading state — warm muted on dark bg */
.sammy-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  color: #7a7390;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

@keyframes sammyLoadRing {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.sammy-loading-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--sammy-pink-light);
  border-top-color: var(--sammy-pink);
  animation: sammyLoadRing 1s linear infinite;
}


/* ── Info Section Below the Fold ─────────────────────────────── */

.sammy-info-section {
  max-width: 680px;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
}

.sammy-info-section h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--sammy-text);
  margin: 3rem 0 1rem;
  letter-spacing: -0.01em;
}

.sammy-info-section h2:first-child {
  margin-top: 0;
}

.sammy-info-section p {
  color: var(--sammy-text-light);
  line-height: 1.8;
  margin-bottom: 1.2em;
}

.sammy-info-section strong {
  color: var(--sammy-text);
  font-weight: 600;
}


/* ── Episode Cards ───────────────────────────────────────────── */

.sammy-episodes {
  margin: 2rem 0;
}

.sammy-episode-card {
  background: var(--sammy-card-bg);
  border: 1px solid var(--sammy-border);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  position: relative;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.sammy-episode-card.current {
  border-color: var(--sammy-pink-light);
  box-shadow: 0 4px 24px var(--sammy-pink-glow);
}

.sammy-episode-card.upcoming {
  opacity: 0.6;
  border-style: dashed;
}

.sammy-episode-card p {
  margin-bottom: 0.5em;
}

.sammy-episode-card p:last-child {
  margin-bottom: 0;
}

.sammy-episode-badge {
  display: inline-block;
  background: var(--sammy-pink);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25em 0.8em;
  border-radius: 99px;
  margin-bottom: 0.75rem;
}

.sammy-episode-badge.soon {
  background: var(--sammy-pink-light);
  color: var(--sammy-pink-deep);
}

/* ── Episode Progress States ─────────────────────────────────── */

.sammy-episode-card.sammy-ep-done {
  opacity: 0.75;
  border-color: #b8e6cd;
  box-shadow: none;
}

.sammy-episode-card.sammy-ep-done .sammy-episode-badge {
  background: rgba(90, 185, 140, 0.15);
  color: #3d9e72;
  border: 1px solid rgba(90, 185, 140, 0.3);
}

.sammy-episode-card.sammy-ep-next {
  border-color: var(--sammy-pink);
  box-shadow: 0 4px 24px var(--sammy-pink-glow);
}

.sammy-episode-card.sammy-ep-next .sammy-episode-badge {
  background: var(--sammy-pink);
  color: white;
  animation: sammyPulse 2s ease-in-out infinite;
}

/* ── Episode Header (inside widget) ─────────────────────────── */

.sammy-episode-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--sammy-border);
  opacity: 0.7;
}

.sammy-ep-badge {
  display: inline-block;
  background: var(--sammy-pink-soft);
  color: var(--sammy-pink-deep);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.2em 0.55em;
  border-radius: 4px;
  border: 1px solid var(--sammy-pink-light);
}

.sammy-ep-dot {
  color: var(--sammy-text-muted);
  font-size: 0.55rem;
}

.sammy-ep-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--sammy-text-light);
  letter-spacing: 0.01em;
}

/* ── Next Episode Button ─────────────────────────────────────── */

.sammy-next-ep-btn {
  display: inline-block;
  background: rgba(233, 87, 138, 0.85) !important;
  color: white !important;
  text-decoration: none;
  border: 1px solid rgba(233, 87, 138, 0.5);
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: 8px;
  margin-top: 0.75rem;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  letter-spacing: 0.01em;
}

.sammy-next-ep-btn:hover {
  background: rgba(233, 87, 138, 1) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(233, 87, 138, 0.35);
}


/* ── Reserved: Hero Slot for Custom Graphics ─────────────────── */
/* Future: drop a .sammy-hero-slot div with a custom image/      */
/* animation between episodes or at section breaks.              */

.sammy-hero-slot {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin: 2rem 0;
}

.sammy-hero-slot img {
  width: 100%;
  display: block;
  border-radius: 16px;
}


/* ── Footer Override ─────────────────────────────────────────── */

.footer {
  background: var(--sammy-off-white) !important;
  border-top: 1px solid var(--sammy-border) !important;
}

.footer-town-mark {
  color: var(--sammy-text-light) !important;
}

.footer-town-sub {
  color: var(--sammy-text-muted) !important;
}

.footer-town-glyph {
  color: var(--sammy-pink) !important;
}


/* ── Mobile Adjustments ──────────────────────────────────────── */

@media (max-width: 640px) {
  .sammy-fullscreen {
    min-height: 100svh;
    padding: 1.25rem 1rem;
  }

  .sammy-info-section {
    padding: 3rem 1rem 2rem;
  }

  .sammy-info-section h2 {
    font-size: 1.3rem;
  }

  .sammy-episode-card {
    padding: 1.25rem 1.5rem;
  }
}

.sammy-coda-text {
  font-size: 1.4rem;
  font-weight: 300;
  color: #f2ecff;
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
}

.sammy-coda-subtext {
  font-size: 0.8rem;
  color: #b0a8c4;
  max-width: 480px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.sammy-restart {
  margin: 0 auto;
  display: block;
}

.sammy-path-summary {
  margin-top: 2rem;
  font-size: 0.7rem;
  color: #7a6e8a;
  opacity: 0.9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Responsive overrides for widget are in sammy_widget.css */
@media (max-width: 640px) {
  #sammy-adventure {
    margin: 0 0.5rem;
  }
}

/* ── v4 Visual Reset: Sammy Signature Look ───────────────────── */

.content > h1#sammy {
  display: none;
}

body {
  background:
    radial-gradient(circle at 8% 12%, rgba(53, 131, 255, 0.14), transparent 42%),
    radial-gradient(circle at 92% 76%, rgba(246, 81, 135, 0.16), transparent 45%),
    linear-gradient(180deg, #f7fbff 0%, #f1f6fb 56%, #ecf2f9 100%) !important;
  color: #1a2a41 !important;
}

.sammy-hero-intro {
  grid-column: full-start / full-end !important;
  max-width: 920px;
  margin: 1.2rem auto 2rem;
  display: block;
  border: 1px solid rgba(21, 72, 144, 0.15);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 70px rgba(17, 56, 110, 0.15);
}

.sammy-hero-image {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
}

.sammy-hero-copy {
  padding: 2.1rem 2rem 1.95rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.92));
}

.sammy-kicker {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2f6bbf;
  font-weight: 700;
}

.sammy-hero-copy h2 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.14;
  color: #102a4c;
}

.sammy-hero-copy p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #324b6c;
}

.sammy-feature-image {
  grid-column: full-start / full-end !important;
  max-width: 1120px;
  margin: 0 auto 2.4rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.sammy-feature-image p {
  margin: 0;
}

.sammy-feature-art {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  transform-origin: center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.sammy-feature-image:hover .sammy-feature-art {
  transform: scale(1.018);
}

.sammy-fullscreen {
  background:
    linear-gradient(160deg, #0d2f59, #103566 48%, #133f78 100%);
  border-radius: 26px;
  border: 1px solid rgba(123, 187, 255, 0.22);
  box-shadow: 0 30px 90px rgba(9, 27, 51, 0.5);
  min-height: auto;
  margin: 0 auto 2.8rem;
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.sammy-fullscreen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 520ms ease;
  background-image:
    linear-gradient(165deg, rgba(7, 22, 46, 0.82), rgba(10, 39, 76, 0.72) 45%, rgba(18, 68, 124, 0.66) 100%),
    var(--sammy-episode-background-image, none);
  background-size: cover;
  background-position: center;
  filter: saturate(1.02) contrast(1.02);
}

.sammy-fullscreen.sammy-ep-art-ready::before {
  opacity: 1;
}

.sammy-fullscreen > * {
  position: relative;
  z-index: 1;
}

.sammy-info-section {
  max-width: 820px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(23, 78, 150, 0.12);
  border-radius: 20px;
  box-shadow: 0 14px 50px rgba(13, 48, 95, 0.12);
  padding: 2.8rem 2rem 2.4rem;
}

.sammy-info-section h2 {
  color: #123866;
  letter-spacing: -0.015em;
}

.sammy-info-section p {
  color: #2c4668;
}

.sammy-ep-summary {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.sammy-ep-copy {
  min-width: 0;
}

.sammy-ep-thumb,
.sammy-episode-thumb {
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  border: 1px solid rgba(184, 220, 255, 0.34);
  box-shadow: 0 12px 30px rgba(3, 18, 39, 0.22);
  background: rgba(255, 255, 255, 0.14);
}

.sammy-episode-card-media {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.sammy-episode-card-body {
  min-width: 0;
}

.sammy-episode-card a {
  color: #17487f;
  text-decoration: none;
}

.sammy-episode-card a:hover {
  color: #0f66b5;
}

.sammy-episode-card:hover .sammy-episode-thumb,
.sammy-episode-card:focus-within .sammy-episode-thumb {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(9, 40, 81, 0.28);
}

.sammy-episode-thumb {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

@media (max-width: 900px) {
  .sammy-hero-image {
    min-height: 210px;
    max-height: 260px;
  }

  .sammy-info-section {
    padding: 2.1rem 1.25rem 1.9rem;
  }

  .sammy-ep-summary,
  .sammy-episode-card-media {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .sammy-ep-thumb,
  .sammy-episode-thumb {
    width: 78px;
    height: 78px;
    border-radius: 16px;
  }
}