/*
 * EF TV header presentation.
 * Extracted from style.css without selector or declaration changes.
 */

/* ==========================================================
   EF TV HEADER - Global Netflix-like Menu
   Scope: All TV pages
   Purpose:
   - Hide Streamit subscribe/update crown button.
   - Align menu left beside logo.
   - Convert first menu item into compact hamburger-like entry.
   - Keep menu consistent outside the home page.
   ========================================================== */

/* Hide subscribe/update crown button globally. */
#default-header .subscribe-btn,
#default-header a.subscribe-btn,
#default-header .btn-warning-subtle {
	display: none !important;
}

/* Header layout aligned left. */
#default-header > .container-fluid > .d-flex {
	justify-content: flex-start !important;
	gap: 2rem !important;
}

#default-header #site-navigation {
	margin-left: 1.1rem !important;
	margin-right: 0 !important;
}

#default-header #navbarSupportedContent {
	justify-content: flex-start !important;
}

#default-header .streamit-header-right {
	margin-left: auto !important;
}

/* First menu item as hamburger. */
#menu-main-menu > li:first-child > a {
	padding-inline: .45rem !important;
}

#menu-main-menu > li:first-child > a .streamit-menu-item-title {
	font-size: 0 !important;
}

#menu-main-menu > li:first-child > a .streamit-menu-item-title::before {
	content: "☰";
	font-size: 18px !important;
	line-height: 1 !important;
	color: var(--ef-tv-white) !important;
	font-weight: 500 !important;
}

#menu-main-menu > li:first-child:hover > a .streamit-menu-item-title::before,
#menu-main-menu > li:first-child:hover > a .toggledrop {
	color: var(--ef-tv-red) !important;
}

/* Narrow dropdown. */
#menu-main-menu > li:first-child > .sub-menu {
	min-width: 150px !important;
	width: 150px !important;
	padding: .55rem 0 !important;
	background: var(--ef-tv-header-glass) !important;
	border: 1px solid var(--ef-tv-border-soft) !important;
	border-radius: 6px !important;
	box-shadow: var(--ef-tv-shadow-heavy) !important;
}

/* Visual Home option inside the hamburger dropdown. */
#menu-main-menu > li:first-child > .sub-menu::before {
	content: "Home";
	display: block;
	padding: .55rem 1rem;
	color: var(--ef-tv-white);
	font-weight: 600;
	font-size: 14px;
	cursor: default;
}

#menu-main-menu > li:first-child > .sub-menu a {
	padding: .55rem 1rem !important;
	color: var(--ef-tv-white) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

#menu-main-menu > li:first-child > .sub-menu a:hover,
#menu-main-menu > li:first-child > .sub-menu li:hover > a,
#menu-main-menu > li:first-child > .sub-menu li:hover .streamit-menu-item-title {
	color: var(--ef-tv-red) !important;
	background: transparent !important;
}

/* ==========================================================
   EF TV HEADER - Home Transparent / Sticky Dark
   Scope: Home only
   Purpose:
   - Header floats over hero.
   - Transparent at top.
   - Dark/glass when the theme applies sticky classes.
   ========================================================== */

body.home #default-header.header-default,
body.home #default-header.header-default.has-sticky {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 9999 !important;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)) !important;
	box-shadow: none !important;
	transition: background .28s ease, backdrop-filter .28s ease, box-shadow .28s ease !important;
}

body.home #default-header.header-default .container-fluid,
body.home #default-header.header-default .navbar,
body.home #default-header.header-default .deafult-header,
body.home #default-header.header-default .streamit-header-right {
	background: transparent !important;
	box-shadow: none !important;
}

body.home #default-header.header-default.header-sticky,
body.home #default-header.header-default.has-sticky.header-sticky,
body.home #default-header.header-default.menu-sticky,
body.home #default-header.header-default.sticky,
body.home body.header-sticky #default-header.header-default {
	background: var(--ef-tv-header-dark) !important;
	backdrop-filter: blur(14px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .38) !important;
}

/* Keep header above hero video/background. */
body.home #default-header.header-default {
	z-index: 9999 !important;
}