/* ==========================================================================
   rise-dsf-popup.css — Denver Sketch Festival promo popup

   Enqueued only while rise_dsf_popup_is_active() (functions.php) — i.e.
   until RISE_DSF_POPUP_END, and never on the DSF page itself. Markup is
   built lazily by rise_render_dsf_popup() only for visitors who haven't
   seen it this session, so the logo below is never fetched otherwise.

   Palette matches the DSF page hero (rise_dsf_hero_css() in
   page-denver-sketch-festival.php): teal → blue gradient, gold accents.
   ========================================================================== */

.rise-dsf-popup-overlay {
	--dsf-blue:      #1d5fd6;
	--dsf-blue-dark: #123c8f;
	--dsf-navy:      #0d1b3d;
	--dsf-gold:      #fdbb14;
	--dsf-teal:      #2fb8c9;

	position:        fixed;
	inset:           0;
	z-index:         99999;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         20px;
	background:      rgba( 13, 27, 61, 0.78 );
	opacity:         0;
	visibility:      hidden;
	pointer-events:  none;
	transition:      opacity var( --rise-dur-base ) var( --rise-ease ), visibility var( --rise-dur-base ) var( --rise-ease );
}

.rise-dsf-popup-overlay.is-visible {
	opacity:        1;
	visibility:     visible;
	pointer-events: auto;
}

.rise-dsf-popup {
	position:      relative;
	max-width:     460px;
	width:         100%;
	max-height:    calc( 100vh - 40px );
	overflow-y:    auto;
	padding:       36px 32px 30px;
	border:        2px solid var( --dsf-gold );
	border-radius: var( --rise-radius-lg );
	background:    linear-gradient( 135deg, var( --dsf-teal ) 0%, var( --dsf-blue ) 55%, var( --dsf-blue-dark ) 100% );
	color:         #FFFFFF;
	text-align:    center;
	box-shadow:    0 20px 60px rgba( 0, 0, 0, 0.5 );
	transform:     scale( 0.94 );
	transition:    transform var( --rise-dur-base ) var( --rise-ease );
}

.rise-dsf-popup-overlay.is-visible .rise-dsf-popup {
	transform: scale( 1 );
}

.rise-dsf-popup-close {
	position:    absolute;
	top:         6px;
	right:       10px;
	background:  none;
	border:      none;
	color:       #FFFFFF;
	font-size:   30px;
	line-height: 1;
	cursor:      pointer;
	padding:     4px 8px;
	text-shadow: 1px 1px 0 rgba( 0, 0, 0, 0.4 );
}
.rise-dsf-popup-close:hover,
.rise-dsf-popup-close:focus-visible {
	color: var( --dsf-gold );
}

.rise-dsf-popup-logo {
	display:       block;
	width:         auto;
	height:        140px;
	margin:        0 auto 16px;
	border-radius: var( --rise-radius-md );
	box-shadow:    0 6px 20px rgba( 0, 0, 0, 0.3 );
}

.rise-dsf-popup-eyebrow {
	margin:         0 0 6px;
	color:          rgba( 255, 255, 255, 0.85 );
	font-family:    var( --rise-font-heading );
	font-weight:    var( --rise-fw-bold );
	font-size:      var( --rise-fs-caption );
	text-transform: uppercase;
	letter-spacing: var( --rise-ls-caps );
}

.rise-dsf-popup-headline {
	margin:         0 0 6px;
	color:          #FFFFFF;
	font-family:    var( --rise-font-display );
	font-weight:    400;
	font-size:      clamp( 2rem, 1.4rem + 2.6vw, 2.6rem );
	line-height:    var( --rise-lh-tight );
	letter-spacing: var( --rise-ls-display );
	text-shadow:    2px 2px 0 rgba( 13, 27, 61, 0.55 );
}

.rise-dsf-popup-dates {
	margin:         0 0 14px;
	color:          var( --dsf-gold );
	font-family:    var( --rise-font-heading );
	font-weight:    var( --rise-fw-heavy );
	font-size:      var( --rise-fs-h5 );
	text-transform: uppercase;
	letter-spacing: var( --rise-ls-caps );
}

.rise-dsf-popup-text {
	margin:      0 0 22px;
	color:       #FFFFFF;
	font-family: var( --rise-font-body );
	font-size:   var( --rise-fs-small );
	line-height: var( --rise-lh-normal );
}

.rise-dsf-popup-ctas {
	display:        flex;
	flex-direction: column;
	gap:            10px;
}

.rise-dsf-popup-btn {
	display:         block;
	padding:         14px 24px;
	background:      var( --dsf-gold );
	color:           var( --dsf-navy ) !important;
	font-family:     var( --rise-font-heading );
	font-size:       var( --rise-fs-button );
	font-weight:     var( --rise-fw-heavy );
	text-transform:  uppercase;
	letter-spacing:  var( --rise-ls-caps );
	text-decoration: none !important;
	border:          2px solid var( --dsf-gold );
	border-radius:   var( --rise-radius-pill );
	transition:      background var( --rise-dur-fast ), color var( --rise-dur-fast ), border-color var( --rise-dur-fast );
}
.rise-dsf-popup-btn:hover,
.rise-dsf-popup-btn:focus-visible {
	background: #FFFFFF;
	border-color: #FFFFFF;
}

.rise-dsf-popup-btn--alt {
	background: transparent;
	color:      #FFFFFF !important;
	border-color: rgba( 255, 255, 255, 0.7 );
}
.rise-dsf-popup-btn--alt:hover,
.rise-dsf-popup-btn--alt:focus-visible {
	background:   rgba( 255, 255, 255, 0.12 );
	border-color: #FFFFFF;
}

@media ( max-width: 480px ) {
	.rise-dsf-popup      { padding: 32px 20px 24px; }
	.rise-dsf-popup-logo { height: 110px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.rise-dsf-popup-overlay,
	.rise-dsf-popup { transition: none; }
}