/* ==========================================================================
   SCGE PLUGIN BRIDGE — v2 (for SCGE 10.8+)
   --------------------------------------------------------------------------
   Smile Channel Guest Engine v10.8 introduced a complete two-column light
   redesign of the guest profile page. The new shortcode markup uses .sp-*
   classes (sp = "speaker profile") and ships with its own light cream
   palette + theme gold (#B8862A) baked in. The plugin author has already
   done 95% of the harmonization work.

   This bridge does the remaining 5%:
   1. Aligns the legacy .sg-* card markup (used in carousels, grids, popups)
      with theme cards.
   2. Sets the .scge-* CSS variables to match theme tokens for older
      components (search filters, pagination, popup, carousel arrows).
   3. Tunes a few .sp-* details on the new profile page where the plugin's
      defaults don't quite hit theme spec — typography weights, header
      spacing under the fixed nav, and the unclaimed banner.

   Critical scoping note:
   The new SCGE profile uses .sp-* classes — same prefix as the Stage
   Portal plugin, which is unrelated. To avoid collision, every rule
   targeting an SCGE .sp-* class is scoped to `.scge-app.scge-sp` so it
   only matches inside the SCGE wrapper. Stage Portal styling lives in
   stage-portal-bridge.css and is scoped to plain .sp-* (no .scge-app
   ancestor).
   ========================================================================== */

/* ==========================================================================
   1. LEGACY .scge-* CSS VARIABLES (for older modules)
   The carousel, grid, popup, and search modules still use the original
   --scge-* variables. We override them at the theme scope.
   ========================================================================== */
.smile-channel-theme .scge-app {
	--scge-primary:    #B8862A;
	--scge-primary-h:  #8B6420;
	--scge-secondary:  #B8862A;
	--scge-accent:     #B8862A;
	--scge-accent2:    #1A1814;

	--scge-text:    #1A1814;
	--scge-muted:   #6B6558;
	--scge-hint:    #9A9384;
	--scge-bg:      #FAF8F3;
	--scge-white:   #FFFFFF;
	--scge-border:  #E5E0D2 !important;

	--scge-green:    #2D7A4F;
	--scge-yellow:   #B8862A;
	--scge-red:      #DC2626;
	--scge-green-bg: #ECFDF5;
	--scge-yellow-bg:#F5EAD0;

	--scge-radius:    12px;
	--scge-radius-sm: 6px;

	--scge-shadow:    0 2px 8px rgba(60, 50, 30, 0.06);
	--scge-shadow-lg: 0 24px 48px -20px rgba(60, 50, 30, 0.22);

	--scge-tr:       0.4s cubic-bezier(0.16, 1, 0.3, 1);
	--scge-tr-fast:  0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. TYPOGRAPHY HARMONIZATION (for legacy .sg-* components)
   ========================================================================== */
.smile-channel-theme .scge-app,
.smile-channel-theme .scge-app * {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.smile-channel-theme .scge-app .sg-card-name,
.smile-channel-theme .scge-app .sg-section-title {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
	color: var(--tsc-text-2) !important;
}

/* ==========================================================================
   3. LEGACY GUEST CARDS (.sg-card)
   Used by [smile_guest_grid], [smile_guest_carousel], [smile_guest_popup],
   and the "More Guests" related row at the bottom of the profile page.
   ========================================================================== */
.smile-channel-theme .scge-app .sg-card {
	background: #FFFFFF !important;
	border: 1px solid var(--tsc-line) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 8px rgba(60, 50, 30, 0.06) !important;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.smile-channel-theme .scge-app .sg-card:hover {
	transform: translateY(-6px) scale(1.02) !important;
	box-shadow:
		0 24px 48px -20px rgba(60, 50, 30, 0.25),
		0 0 0 1px rgba(184, 134, 42, 0.35) !important;
}

.smile-channel-theme .scge-app .sg-card-img {
	aspect-ratio: 2 / 3;
}

.smile-channel-theme .scge-app .sg-card-img img {
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.smile-channel-theme .scge-app .sg-card:hover .sg-card-img img {
	transform: scale(1.08) !important;
}

.smile-channel-theme .scge-app .sg-card-name {
	font-size: 1.25rem !important;
}

.smile-channel-theme .scge-app .sg-card-title {
	color: var(--tsc-text-mute) !important;
	font-size: 0.75rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

.smile-channel-theme .scge-app .sg-badge--feat,
.smile-channel-theme .scge-app .sg-badge--top {
	background: var(--tsc-gold) !important;
	color: #FFFFFF !important;
	border-radius: 999px !important;
	padding: 4px 12px !important;
	font-size: 0.65rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	box-shadow: 0 4px 12px rgba(184, 134, 42, 0.4) !important;
}

/* ==========================================================================
   4. NEW GUEST PROFILE — .scge-app.scge-sp (v10.8+ markup)
   The plugin already styles this beautifully with its own --sp-* variables
   that match the theme palette. We only nudge a few details.

   IMPORTANT: every selector here is scoped to `.scge-app.scge-sp` so it
   does NOT collide with the Stage Portal plugin's .sp-* classes.
   ========================================================================== */

/* Override the plugin's --sp-* variables to use exact theme tokens
   (the plugin's defaults are already very close, this just enforces
   single source of truth so future theme palette changes propagate). */
.smile-channel-theme .scge-app.scge-sp {
	--sp-bg:       var(--tsc-cream);
	--sp-bg-2:     var(--tsc-cream-2);
	--sp-card:     #FFFFFF;
	--sp-ink:      var(--tsc-text);
	--sp-ink-2:    var(--tsc-text-2);
	--sp-ink-3:    var(--tsc-text-mute);
	--sp-ink-4:    var(--tsc-text-dim);
	--sp-line:     var(--tsc-line);
	--sp-gold:     var(--tsc-gold);
	--sp-gold-2:   var(--tsc-gold-soft);
	--sp-gold-dark:var(--tsc-gold-deep);
	--sp-gold-soft:var(--tsc-gold-pale);
}

/* Unclaimed banner — sits at the very top of the profile, prompts the
   speaker to claim ownership. Plugin styles it as a yellow strip; we
   make it a soft gold pill that doesn't fight the rest of the page. */
.smile-channel-theme .scge-app.scge-sp .sp-claim-banner {
	background: var(--tsc-gold-pale) !important;
	border: 1px solid rgba(184, 134, 42, 0.3) !important;
	color: var(--tsc-gold-deep) !important;
	border-radius: 12px !important;
	padding: 0.875rem 1.25rem !important;
	font-size: 0.875rem !important;
	margin-bottom: 1.5rem !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-claim-banner a {
	color: var(--tsc-gold-deep) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}

/* Header — Playfair on the speaker name */
.smile-channel-theme .scge-app.scge-sp .sp-hdr-name {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-hdr-title {
	color: var(--tsc-text-mute) !important;
}

/* CTA buttons in the header — match theme pill style */
.smile-channel-theme .scge-app.scge-sp .sp-btn {
	font-family: 'Inter', sans-serif !important;
	border-radius: 999px !important;
	padding: 0.85rem 1.5rem !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	line-height: 1 !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-btn--gold {
	background: var(--tsc-gold) !important;
	border: 1px solid var(--tsc-gold) !important;
	color: #FFFFFF !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-btn--gold:hover {
	background: var(--tsc-gold-deep) !important;
	border-color: var(--tsc-gold-deep) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 28px -12px rgba(184, 134, 42, 0.5) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-btn--outline {
	background: #FFFFFF !important;
	border: 1px solid var(--tsc-line) !important;
	color: var(--tsc-text) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-btn--outline:hover {
	border-color: var(--tsc-gold) !important;
	color: var(--tsc-gold-deep) !important;
	background: var(--tsc-cream-2) !important;
	transform: translateY(-2px) !important;
}

/* Chips (categories, tier badges) */
.smile-channel-theme .scge-app.scge-sp .sp-chip {
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	font-size: 0.6875rem !important;
	padding: 4px 12px !important;
	border-radius: 999px !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-chip--gold {
	background: var(--tsc-gold-pale) !important;
	color: var(--tsc-gold-deep) !important;
	border: 1px solid rgba(184, 134, 42, 0.3) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-chip--indigo {
	background: var(--tsc-cream-2) !important;
	color: var(--tsc-text-mute) !important;
	border: 1px solid var(--tsc-line) !important;
}

/* Cards inside the main content column */
.smile-channel-theme .scge-app.scge-sp .sp-card {
	background: #FFFFFF !important;
	border: 1px solid var(--tsc-line) !important;
	border-radius: 16px !important;
	box-shadow: 0 2px 8px rgba(60, 50, 30, 0.06) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-card-title {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-weight: 500 !important;
	color: var(--tsc-text-2) !important;
	letter-spacing: -0.01em !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-card-count {
	color: var(--tsc-text-mute) !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 500 !important;
	font-size: 0.75rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
}

/* Episode cards inside the profile */
.smile-channel-theme .scge-app.scge-sp .sp-ep {
	border-radius: 12px !important;
	overflow: hidden !important;
	border: 1px solid var(--tsc-line) !important;
	background: #FFFFFF !important;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-ep:hover {
	transform: translateY(-4px) !important;
	border-color: rgba(184, 134, 42, 0.35) !important;
	box-shadow: 0 24px 48px -20px rgba(60, 50, 30, 0.22) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-ep-play {
	background: rgba(255, 255, 255, 0.95) !important;
	color: var(--tsc-gold) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-ep-title {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-weight: 500 !important;
	color: var(--tsc-text-2) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-ep-date,
.smile-channel-theme .scge-app.scge-sp .sp-ep-dur {
	font-family: 'Inter', sans-serif !important;
	color: var(--tsc-text-mute) !important;
	font-weight: 500 !important;
}

/* Books */
.smile-channel-theme .scge-app.scge-sp .sp-book {
	border: 1px solid var(--tsc-line) !important;
	background: #FFFFFF !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-book:hover {
	transform: translateY(-4px) !important;
	border-color: rgba(184, 134, 42, 0.35) !important;
	box-shadow: 0 24px 48px -20px rgba(60, 50, 30, 0.22) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-book-name {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-weight: 500 !important;
	color: var(--tsc-text-2) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-book-link {
	color: var(--tsc-gold) !important;
	font-weight: 600 !important;
	transition: color 0.2s !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-book-link:hover {
	color: var(--tsc-gold-deep) !important;
}

/* Sticky right sidebar — "Book This Speaker" card */
.smile-channel-theme .scge-app.scge-sp .sp-book-card {
	background: linear-gradient(180deg, var(--tsc-gold-pale) 0%, #FFFFFF 100%) !important;
	border: 1px solid rgba(184, 134, 42, 0.3) !important;
	border-radius: 16px !important;
	box-shadow: 0 12px 32px -12px rgba(184, 134, 42, 0.18) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-book-card-title {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-weight: 500 !important;
	color: var(--tsc-text) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-meta-row {
	color: var(--tsc-text-mute) !important;
	font-size: 0.875rem !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-meta-row svg {
	color: var(--tsc-gold) !important;
}

/* About section — "Show more" toggle button */
.smile-channel-theme .scge-app.scge-sp .sp-about-toggle {
	color: var(--tsc-gold) !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-about-toggle:hover {
	color: var(--tsc-gold-deep) !important;
}

.smile-channel-theme .scge-app.scge-sp .sp-about-toggle.is-open svg {
	transform: rotate(180deg) !important;
}

/* ==========================================================================
   5. SEARCH FILTERS (used by [smile_guest_grid search="true"])
   ========================================================================== */
.smile-channel-theme .scge-app .sg-filters {
	background: #FFFFFF !important;
	border: 1px solid var(--tsc-line) !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 8px rgba(60, 50, 30, 0.06) !important;
	padding: 1rem 1.25rem !important;
}

.smile-channel-theme .scge-app .sg-search-input,
.smile-channel-theme .scge-app .sg-filter-select {
	background: var(--tsc-cream) !important;
	border: 1px solid var(--tsc-line) !important;
	color: var(--tsc-text) !important;
	font-family: 'Inter', sans-serif !important;
	border-radius: 8px !important;
}

.smile-channel-theme .scge-app .sg-search-input:focus,
.smile-channel-theme .scge-app .sg-filter-select:focus {
	border-color: var(--tsc-gold) !important;
	outline: 2px solid rgba(184, 134, 42, 0.2) !important;
	outline-offset: 0 !important;
}

.smile-channel-theme .scge-app .sg-btn--load {
	background: var(--tsc-text) !important;
	color: var(--tsc-cream) !important;
	border: 1px solid var(--tsc-text) !important;
	border-radius: 999px !important;
	padding: 0.95rem 1.75rem !important;
	font-weight: 600 !important;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.smile-channel-theme .scge-app .sg-btn--load:hover {
	background: var(--tsc-gold) !important;
	border-color: var(--tsc-gold) !important;
	color: #FFFFFF !important;
}

/* ==========================================================================
   6. POPUP MODAL (used by [smile_guest_popup] / card clicks)
   ========================================================================== */
.smile-channel-theme .scge-app .sg-popup-trigger {
	background: var(--tsc-text) !important;
	color: var(--tsc-cream) !important;
	border-radius: 999px !important;
	padding: 0.85rem 1.75rem !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	border: none !important;
	cursor: pointer !important;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.smile-channel-theme .scge-app .sg-popup-trigger:hover {
	background: var(--tsc-gold) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 28px -12px rgba(184, 134, 42, 0.5) !important;
}

/* ==========================================================================
   7. CAROUSEL ARROWS
   ========================================================================== */
.smile-channel-theme .scge-app .sg-carousel-prev,
.smile-channel-theme .scge-app .sg-carousel-next {
	background: #FFFFFF !important;
	color: var(--tsc-text) !important;
	border: 1px solid var(--tsc-line) !important;
	box-shadow: 0 2px 8px rgba(60, 50, 30, 0.1) !important;
	border-radius: 50% !important;
	width: 44px !important;
	height: 44px !important;
	transition: all 0.3s !important;
}

.smile-channel-theme .scge-app .sg-carousel-prev:hover,
.smile-channel-theme .scge-app .sg-carousel-next:hover {
	background: var(--tsc-gold) !important;
	border-color: var(--tsc-gold) !important;
	color: #FFFFFF !important;
}

/* ==========================================================================
   8. AUTH FORMS (login, register)
   The new claim profile page (.scge-claim) ships its own complete styling
   that already matches the theme — we leave it alone.
   ========================================================================== */
.smile-channel-theme .scge-app .sd-auth {
	border: 1px solid var(--tsc-line) !important;
	border-radius: 16px !important;
	box-shadow: 0 24px 64px -24px rgba(60, 50, 30, 0.22) !important;
}

.smile-channel-theme .scge-app .sd-auth .sd-btn--primary {
	background: var(--tsc-text) !important;
	color: var(--tsc-cream) !important;
	border-radius: 999px !important;
}

.smile-channel-theme .scge-app .sd-auth .sd-btn--primary:hover {
	background: var(--tsc-gold) !important;
	color: #FFFFFF !important;
}

/* ==========================================================================
   9. SINGLE GUEST PAGE WRAPPER
   The theme template (single-smile_guest.php) wraps profile output in
   .tsc-scge-single. The new plugin profile already has good padding,
   so we just ensure top spacing clears the fixed header.
   ========================================================================== */
.tsc-scge-single {
	padding-top: 2.5rem;
	padding-bottom: 5rem;
	background: var(--tsc-cream);
	min-height: calc(100vh - 80px);
}

@media (min-width: 1024px) {
	.tsc-scge-single {
		padding-top: 4rem;
	}
}

.tsc-scge-single .scge-app {
	max-width: 100%;
	margin: 0 auto;
}