/* =============================================================
   TV Series Landing Page Styles
   Enqueued only on: TV Series Page template (tv-series-page.php)
   ============================================================= */

/* --------------------------------------------------------------
   Remove default .wrapper padding so banner bleeds edge-to-edge
   -------------------------------------------------------------- */

.tv-series-wrapper {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* --------------------------------------------------------------
   Banner Section
   -------------------------------------------------------------- */

.tv-series-wrapper .tvs-banner-section {
	padding: 20px 0 0;
	background-color: #134878;
	color: #ffffff;
	overflow: visible;
}

.tv-series-wrapper .tvs-banner-heading,
.tv-series-wrapper .tvs-banner-subtext {
	color: #ffffff;
}

.tv-series-wrapper .tvs-banner-text-col {
	max-width: 480px;
	margin-right: 40px;
}

.tv-series-wrapper .tvs-banner-heading {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	margin-bottom: 20px;
	line-height: 1.2;
}

.tv-series-wrapper .tvs-banner-subtext {
	font-size: 1.25rem;
	line-height: 1.7;
	margin-bottom: 0;
}

.tv-series-wrapper .tvs-banner-subtext a {
	color: #f5a623;
	text-decoration: underline;
	font-weight: 600;
}

.tv-series-wrapper .tvs-banner-subtext a:hover {
	color: #ffffff;
}

/* Image column — push down to overlap the next section */
.tv-series-wrapper .tvs-banner-image-col {
	position: relative;
	top: 30px;
	max-width: 480px;
}

.tv-series-wrapper .tvs-banner-image {
	width: 100%;
	max-height: 420px;
	height: auto;
	object-fit: contain;
	display: block;
}

/* --------------------------------------------------------------
   Video Section
   -------------------------------------------------------------- */

.tv-series-wrapper .tvs-video-section {
	padding: 120px 0 80px; /* extra top padding absorbs the 30px image overlap + breathing room */
	background-color: #f8f8f8;
}

.tv-series-wrapper .tvs-section-heading {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 700;
	text-align: center;
	margin-bottom: 16px;
}

.tv-series-wrapper .tvs-section-subtext {
	font-size: 1.25rem;
	line-height: 1.7;
	text-align: center;
	margin-bottom: 36px;
}

/* Most web fonts only ship regular + bold weights, so jumping
   font-weight straight to 900 usually renders no differently than
   700 (the browser just fakes it). A subtle text-shadow "thickens"
   the strokes instead, giving a visibly heavier look regardless of
   which weights the font file actually has. */
.tv-series-wrapper .tvs-section-subtext strong,
.tv-series-wrapper .tvs-section-subtext b {
	font-weight: 700;
	text-shadow: 0.15px 0 0 currentColor;
}

/* Responsive 16:9 iframe embed */
.tv-series-wrapper .tvs-video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 ratio */
	height: 0;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.tv-series-wrapper .tvs-video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------
   Angel Account Button
   -------------------------------------------------------------- */

.tv-series-wrapper .tvs-button-wrap {
	text-align: center;
	margin-bottom: 40px;
}

.tv-series-wrapper .tvs-angel-buttons-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
}

.tv-series-wrapper .tvs-angel-btn {
	font-size: 1.1rem !important;
	padding: 14px 36px !important;
	height: auto !important;
	min-height: 52px !important;
	line-height: 1.4 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Episode buttons use a darker teal-blue instead of the yellow/
   orange theme, so they read as visually distinct from the donate
   button elsewhere on the site. Matches the teal accent color in
   the trailer thumbnail and header logo. */
.tv-series-wrapper .tvs-episode-btn {
	background-color: #2CA3BC !important;
	border: none !important;
	border-radius: 50px !important;
	color: #ffffff !important;
}

.tv-series-wrapper .tvs-episode-btn:hover {
	background-color: #1B8FA6 !important;
	color: #ffffff !important;
}

/* Short intro line above the trailer embed, matching the bold
   weight/style set by the user directly in the field content. */
.tv-series-wrapper .tvs-trailer-intro {
	margin-bottom: 20px;
}

.tv-series-wrapper .tvs-movie-night-wrap {
	margin-top: 40px;
	margin-bottom: 0;
}

/* --------------------------------------------------------------
   Movie Night Modal
   -------------------------------------------------------------- */

.tvs-movie-night-modal .modal-dialog {
	max-width: 560px;
}

@media (min-width: 768px) {
	.tvs-movie-night-modal .modal-dialog {
		max-width: 700px;
	}
}

@media (min-width: 1200px) {
	.tvs-movie-night-modal .modal-dialog {
		max-width: 800px;
	}
}

/* -----------------------------------------------------------------
   Keep the modal above the site's sticky header. Some themes give
   the sticky nav a z-index that can end up rendering above Bootstrap's
   default modal stack (1050/1040), especially if the background
   scrolls slightly while the modal is open. Force the modal and its
   backdrop comfortably higher than the header.
   ----------------------------------------------------------------- */

.tvs-movie-night-modal {
	z-index: 10060 !important;
}

/* Scoped to a body class we toggle via JS only while THIS modal is
   open (see script below) — a bare ".modal-backdrop" selector would
   also boost the footer's separate "Receive our email updates"
   modal's backdrop whenever it's opened on this page, breaking it. */
body.tvs-movie-modal-open .modal-backdrop {
	z-index: 10050 !important;
}

/* Belt-and-suspenders: Bootstrap already adds overflow:hidden to
   body.modal-open, this just reinforces it in case a theme rule
   elsewhere weakens it. */
body.modal-open {
	overflow: hidden !important;
}

.tvs-movie-night-modal .modal-content {
	border-radius: 8px;
	border: none;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	/* Prevent Gravity Forms' Orbital theme from switching to its
	   dark-mode color set when the visitor's OS/browser is in dark
	   mode — the modal itself is always light, so force that context. */
	color-scheme: light only;
}

.tvs-movie-night-modal .modal-header {
	border-bottom: none;
	padding: 0;
	position: relative;
	min-height: 0;
}

.tvs-movie-night-modal .modal-header .close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 10;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f2f2f2;
	border-radius: 50%;
	opacity: 1;
	font-size: 1.25rem;
	line-height: 1;
	color: #134878;
	text-shadow: none;
}

.tvs-movie-night-modal .modal-header .close:hover {
	background-color: #e2e2e2;
	color: #134878;
	opacity: 1;
}

.tvs-movie-night-modal .modal-body {
	padding: 50px 40px 40px;
	background-color: #ffffff;
}

/* -----------------------------------------------------------------
   Force readable text colors regardless of Gravity Forms' Orbital
   theme dark-mode variables. Uses the #tvsMovieNightModal ID plus
   !important since GF's own theme CSS loads after ours and matches
   on similar specificity, so it otherwise wins the cascade.
   ----------------------------------------------------------------- */

#tvsMovieNightModal .gform_wrapper,
#tvsMovieNightModal .gform_heading,
#tvsMovieNightModal .gform_body,
#tvsMovieNightModal .gform_fields {
	background-color: transparent !important;
}

#tvsMovieNightModal .gform_title {
	font-size: 1.6rem !important;
	font-weight: 700 !important;
	color: #134878 !important;
	margin-bottom: 12px !important;
}

#tvsMovieNightModal .gform_description {
	font-size: 1rem !important;
	line-height: 1.7 !important;
	color: #333333 !important;
}

#tvsMovieNightModal .gform_heading {
	margin-bottom: 24px !important;
}

#tvsMovieNightModal .gfield_label,
#tvsMovieNightModal label {
	font-weight: 600 !important;
	color: #134878 !important;
	margin-bottom: 6px !important;
}

#tvsMovieNightModal .gfield_description,
#tvsMovieNightModal .gfield_validation_message {
	color: #666666 !important;
}

/* Form field spacing */
#tvsMovieNightModal .gfield {
	margin-bottom: 16px !important;
}

#tvsMovieNightModal .ginput_container input {
	width: 100% !important;
	padding: 10px 14px !important;
	height: 46px !important;
	line-height: 1.3 !important;
	font-size: 0.95rem !important;
	border: 1px solid #d5d5d5 !important;
	border-radius: 6px !important;
	background-color: #ffffff !important;
	color: #333333 !important;
}

/* Validation error messages — GF's default tooltip is positioned
   absolutely based on coordinate math that breaks inside the
   modal's stacking context, causing it to overlap other fields
   instead of tucking under the erroring one. Force it back into
   normal document flow. */
#tvsMovieNightModal .validation_message,
#tvsMovieNightModal .gfield_validation_message,
#tvsMovieNightModal .gform_validation_message,
#tvsMovieNightModal .gfield_description.validation_message {
	position: static !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 6px 0 0 0 !important;
	padding: 8px 12px !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	box-shadow: none !important;
	background-color: #fdecea !important;
	border: 1px solid #f5c6cb !important;
	border-radius: 6px !important;
	color: #a94442 !important;
	font-size: 0.9rem !important;
	line-height: 1.4 !important;
	z-index: auto !important;
}

/* Kill the little pointer/arrow the tooltip version usually has */
#tvsMovieNightModal .validation_message::before,
#tvsMovieNightModal .validation_message::after,
#tvsMovieNightModal .gfield_validation_message::before,
#tvsMovieNightModal .gfield_validation_message::after {
	display: none !important;
}

#tvsMovieNightModal .gform_footer {
	margin-top: 10px !important;
	padding: 0 !important;
}

/* Submit button — this form renders the legacy underscored
   "gform_button" class (confirmed via DevTools), so target that
   directly; the hyphenated "gform-button" is kept as a fallback
   in case other forms on the site use the newer Orbital markup. */
#tvsMovieNightModal .gform-button,
#tvsMovieNightModal .gform_button {
	padding: 12px 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	line-height: 1.3 !important;
	font-size: 1rem !important;
	display: inline-flex !important;
}

/* --------------------------------------------------------------
   Responsive — Tablet
   -------------------------------------------------------------- */

@media (max-width: 991px) {
	.tv-series-wrapper .tvs-banner-text-col {
		margin-right: 20px;
		max-width: 320px;
	}

	.tv-series-wrapper .tvs-banner-image-col {
		max-width: 320px;
	}

	.tv-series-wrapper .tvs-banner-heading {
		margin-bottom: 16px;
	}
}

/* --------------------------------------------------------------
   Responsive — Mobile
   -------------------------------------------------------------- */

@media (max-width: 767px) {
	.tv-series-wrapper .tvs-banner-section {
		padding: 20px 0 40px;
	}

	.tv-series-wrapper .tvs-banner-image-col {
		position: static;
		top: 0;
		margin-top: 20px;
	}

	.tv-series-wrapper .tvs-banner-text-col {
		margin-right: 0;
		max-width: 100%;
	}

	.tv-series-wrapper .tvs-video-section {
		padding: 40px 0 60px;
	}

	.tv-series-wrapper .tvs-angel-buttons-wrap {
		flex-direction: column;
		align-items: stretch;
	}

	.tv-series-wrapper .tvs-angel-btn {
		width: 100%;
	}
}