/* =============================================================================
   GeekWire Email Interstitial — v1.0.4
   Self-contained styles; does not rely on the Gulp theme pipeline.
   ============================================================================= */

/* Overlay
   The overlay itself scrolls when the modal exceeds the viewport. Centering
   uses `margin: auto` on the modal (works with `display: flex`) instead of
   `align-items: center` — flex-centered children that overflow the cross axis
   get clipped symmetrically (top and bottom), which would push the close
   button above the visible viewport on short viewports / in-app browsers.
   --------------------------------------------------------------------------- */
.gw-interstitial-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background-color: var(--gw-int-overlay, rgba(0, 0, 0, 0.6));
	overflow-y: auto;
	padding: 1rem;
}

.gw-interstitial-overlay.is-visible {
	display: flex;
}

/* Fade animation
   Two-frame rAF trick: display:flex must be set before opacity can transition */
.gw-interstitial-overlay.animate-fade {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gw-interstitial-overlay.animate-fade.is-animating {
	opacity: 1;
}

/* Slide-up animation */
.gw-interstitial-overlay.animate-slide_up .gw-interstitial-modal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.gw-interstitial-overlay.animate-slide_up.is-animating .gw-interstitial-modal {
	opacity: 1;
	transform: translateY(0);
}

/* Modal card
   `dvh` (dynamic viewport height) excludes space behind mobile browser chrome
   (in-app browsers, address bars). `vh` is the fallback for older browsers.
   `margin: auto` centers in the flex overlay AND lets the overlay scroll when
   the modal can't fit, so the close button is always reachable.
   --------------------------------------------------------------------------- */
.gw-interstitial-modal {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	max-height: 90dvh;
	margin: auto;
	overflow-y: auto;
	padding: 2rem 2rem 1.75rem;
	border-radius: 3px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.gw-interstitial-modal::-webkit-scrollbar {
	width: 4px;
}

.gw-interstitial-modal::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.18);
	border-radius: 2px;
}

/* Dismiss button — position: absolute, floats over the top of the modal.
   .gw-interstitial-body gets enough padding-top to clear it.
   --------------------------------------------------------------------------- */
.gw-interstitial-close {
	position: absolute;
	top: 0.875rem;
	right: 1rem;
	background: none;
	border: none;
	padding: 0;
	font-size: 0.8125rem;
	line-height: 1;
	white-space: nowrap; /* always one line — never wraps or truncates */
	cursor: pointer;
	text-decoration: underline;
	opacity: 0.6;
	color: inherit;
}

.gw-interstitial-close:hover,
.gw-interstitial-close:focus {
	opacity: 1;
	outline: none;
}

/* Logo
   --------------------------------------------------------------------------- */
.gw-interstitial-logo {
	text-align: center;
	margin-bottom: 1.25rem;
}

.gw-interstitial-logo img {
	max-height: 56px;
	width: auto;
	display: inline-block;
}

/* Body copy
   padding-top clears the absolute-positioned close button (one line, nowrap).
   --------------------------------------------------------------------------- */
.gw-interstitial-body {
	padding-top: 1.75rem;
}

.gw-interstitial-headline {
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.gw-interstitial-subheadline {
	font-size: 0.9375rem;
	margin-bottom: 1.25rem;
	opacity: 0.85;
}

/* Email input row
   --------------------------------------------------------------------------- */
#gw-interstitial-form .input-group {
	flex-wrap: nowrap;
}

#gw-interstitial-form .form-control {
	min-width: 0;
}

#gw-interstitial-form .gw-interstitial-submit {
	white-space: nowrap;
	flex-shrink: 0;
}

/* Validation error
   --------------------------------------------------------------------------- */
.gw-interstitial-error {
	color: #dc3545;
	font-size: 0.8125rem;
	margin-top: 0.375rem;
	min-height: 1.2em;
}

/* Newsletter pill buttons
   The real <input type="checkbox"> is hidden inside each <label>.
   Clicking the label toggles the checkbox; JS adds/removes .is-selected.
   Colors come from CSS custom properties set inline on .gw-interstitial-modal.
   --------------------------------------------------------------------------- */
.gw-int-pills {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5rem;
	row-gap: 0.625rem;
	margin-top: 0.875rem;
}


.gw-int-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	border-radius: 999px;
	border: 2px solid transparent;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	position: relative;
	/* default (unselected) state via CSS custom properties */
	background-color: var(--gw-int-pill-bg, #efefef);
	color: var(--gw-int-pill-text, #555555);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	margin: 0; /* reset Bootstrap label margin */
}

.gw-int-pill:hover {
	border-color: var(--gw-int-pill-sel-bg, #333333);
}

.gw-int-pill.is-selected {
	background-color: var(--gw-int-pill-sel-bg, #333333);
	color: var(--gw-int-pill-sel-text, #ffffff);
	border-color: var(--gw-int-pill-sel-bg, #333333);
}

/* Hide the real checkbox — it still submits with the form */
.gw-int-pill input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	pointer-events: none;
}

/* Tooltip — the native browser title attribute handles this.
   No custom CSS tooltip needed; avoids double-tooltip conflicts. */

/* Success state
   --------------------------------------------------------------------------- */
.gw-interstitial-success {
	padding: 1.25rem 0 0.5rem;
	text-align: center;
}

.gw-interstitial-success p {
	font-size: 1rem;
	margin: 0;
	line-height: 1.5;
}

/* Privacy fine print
   --------------------------------------------------------------------------- */
.gw-interstitial-privacy {
	font-size: 0.75rem;
	opacity: 0.55;
	margin-top: 1rem;
	margin-bottom: 0;
	line-height: 1.4;
}

/* Prevent body scroll when interstitial is open
   --------------------------------------------------------------------------- */
body.gw-interstitial-open {
	overflow: hidden;
}

/* Mobile
   --------------------------------------------------------------------------- */
@media (max-width: 575px) {
	.gw-interstitial-modal {
		padding: 1.75rem 1.25rem 1.5rem;
		max-height: 95vh;
		max-height: 95dvh;
	}

	/* Dismiss is nowrap/one-line so body padding only needs to clear its single line height */
	.gw-interstitial-body {
		padding-top: 2rem;
	}

	.gw-interstitial-headline {
		font-size: 1.2rem;
	}

	/* Stack email input + button vertically on small screens.
	   Bootstrap 5 sets flex: 1 1 auto; width: 1% on .form-control inside
	   .input-group. Changing flex-direction alone doesn't escape that flex
	   sizing context — switching to display:block removes it entirely. */
	#gw-interstitial-form .input-group {
		display: block;
	}

	#gw-interstitial-form .input-group .form-control {
		display: block;
		width: 100%;
		border-radius: 0.25rem !important;
		margin-bottom: 0.625rem;
		padding: 0.625rem 0.875rem;
		font-size: 1rem;
	}

	#gw-interstitial-form .gw-interstitial-submit {
		display: block;
		width: 100%;
		border-radius: 0.25rem !important;
		padding: 0.625rem 1rem;
		font-size: 1rem;
	}

	/* Slightly larger pill tap targets on mobile */
	.gw-int-pill {
		padding: 0.375rem 1rem;
		font-size: 0.8125rem;
	}
}