/**
 * BeTube - Landing Page
 * Supplemental styles for the Elementor page template.
 *
 * Everything Elementor can express through its own controls is set in the
 * template, not here. What remains are the five things a page builder has no
 * control for: sticky positioning, a decorative pseudo-element, a viewport
 * rule that does not line up with an Elementor breakpoint, a stretched link,
 * and a scroll-driven visibility toggle.
 *
 * Theme:   BeTube Video WordPress Theme
 * Company: JoinWebs
 * Author:  Shabir Ahmad
 */

/* --------------------------------------------------------------------------
   0. Column shrinking
   Flex items default to `min-width: auto`, which means a column containing a
   wide image reports that image's intrinsic width as its minimum and refuses
   to shrink - crushing its siblings. Every column in this layout is meant to
   be width-driven, not content-driven, so they are all allowed to shrink and
   the images scale inside them. Elementor exposes no min-width control, which
   is why this lives here.
   -------------------------------------------------------------------------- */

.btp-col,
.btp-demo-card,
.btp-elite-card,
.btp-hero > .e-con {
	min-width: 0;
}

.btp-col img,
.btp-demo-card img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   1. Anchor scrolling
   Replaces the original jQuery `.sliding-link` animation. Native smooth
   scrolling costs nothing, needs no library, and honours reduced-motion.
   `scroll-padding-top` keeps section headings clear of the sticky navbar.
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 76px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------------------------
   2. Sticky navbar
   Elementor's Sticky effect is a Pro feature; `position: sticky` is two lines
   and has no JavaScript cost.
   -------------------------------------------------------------------------- */

.btp-navbar {
	position: sticky;
	top: 0;
	z-index: 1020;
}

.btp-brand img {
	display: block;
}

/* Bootstrap's `.navbar-expand-lg` collapses the menu below 992px. The original
   markup ships no toggle button, so the links are simply hidden there - this
   reproduces that exactly. See README for the optional off-canvas menu. */
@media (max-width: 991.98px) {
	.btp-nav-links {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   3. Hero backdrop
   The rotated red lozenge behind the hero. Purely decorative, so it lives on
   a pseudo-element and stays out of the DOM. Offsets are copied verbatim from
   the original css/demo.css, including its Bootstrap breakpoints.
   -------------------------------------------------------------------------- */

.btp-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	width: 120rem;
	height: 67.5rem;
	bottom: calc(100% - 400px);
	left: calc(100% - 1130px);
	border-radius: 1000px;
	background: #dc3545;
	transform: rotate(-47deg);
	pointer-events: none;
}

/* Keep the hero's own content above the lozenge. */
.btp-hero > .e-con {
	z-index: 1;
}

@media (max-width: 1599px) {
	.btp-hero::after {
		bottom: calc(100% - 280px);
		left: calc(100% - 840px);
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.btp-hero::after {
		bottom: calc(100% - 140px);
		left: calc(100% - 510px);
	}
}

@media (max-width: 575.98px) {
	.btp-hero::after {
		bottom: calc(100% - 150px);
		left: calc(100% - 300px);
	}
}

/* --------------------------------------------------------------------------
   4. Icon tiles
   The original `.media_icon` is a 70px-wide rounded tile. Elementor styles the
   icon chip from font-size + padding, so it can only ever be square; this
   restores the original proportions. Colour, radius, size and spacing all
   remain editable from the panel.
   -------------------------------------------------------------------------- */

.btp-icon-box .elementor-icon,
.btp-media-icon .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 60px;
	padding: 0;
	line-height: 1;
}

/*
 * Elementor 3.18+ can render icons as inline SVG rather than an icon font
 * (the `e_font_icon_svg` feature, on by default in 4.x). The SVG carries its
 * own intrinsic size, so pin it to the font-size the Icon Box control sets and
 * let it inherit the icon colour.
 */
.btp-icon-box .elementor-icon svg,
.btp-media-icon .elementor-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.btp-icon-box .elementor-icon-box-icon {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   5. Demo cards
   The whole card is an anchor (Elementor container with HTML tag `a`), which
   replaces Bootstrap's `.stretched-link` for these tiles.
   -------------------------------------------------------------------------- */

.btp-demo-card,
.btp-demo-card:hover,
.btp-demo-card:focus {
	text-decoration: none;
}

.btp-demo-card:focus-visible,
.btp-elite-card .elementor-button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;
}

/* The elite cards keep a real button, so the button itself is stretched over
   the card - the same trick `.stretched-link` used in the original. */
.btp-elite-card .btp-stretched .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   6. Back to top
   Visibility is toggled by assets/js/betube-demo.js.
   -------------------------------------------------------------------------- */

.btp-back-to-top-wrap {
	pointer-events: none;
}

.btp-back-to-top {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.btp-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.btp-back-to-top {
		transition: none;
	}
}
.btp-elite-deck {
	margin: 0 auto;
}