/**
 * One Big Future — Forcast header/menu overrides.
 */

/* Hide off-canvas hamburger; mobile uses .hamburger_menu.bytf__mobile-menu only */
.main-header-two .hamburger__menu.toggle-hidden-bar {
	display: none !important;
}

/* White header bar — taller logo row */
.main-header-two .header__top-main-wrap {
	padding: 28px 0;
	min-height: 96px;
}

.main-header-two .header__top-main-wrap-inner {
	align-items: center;
	gap: 16px;
	min-height: 56px;
}

.main-header-two .byteflows_logo {
	flex: 0 0 auto;
	max-width: 170px;
}

.main-header-two .byteflows_logo a img {
	max-height: 58px;
	width: auto;
}

.main-header-two .byteflows_menu {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.main-header-two .byteflows_menu .byteflows_menu-nav {
	flex-wrap: nowrap;
	justify-content: center;
}

.main-header-two .byteflows_menu .byteflows_menu-nav > li:not(:last-child) {
	padding-right: 20px;
}

.main-header-two .byteflows_menu .byteflows_menu-nav > li > a {
	padding: 10px 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

.main-header-two .byteflows_right_header {
	flex: 0 0 auto;
}

/* Hide dark/light mode toggle */
.main-header-two .dark__switch,
.main-header-two .empath-switch-box__input,
.main-header-two #dark-mode-toggle {
	display: none !important;
}

/* Hide bookmarks when disabled in Forcast Options */
body.obf-bookmarks-off .bytf__bookmark,
body.obf-bookmarks-off .bookmark-trigger {
	display: none !important;
}

/* Category strip */
.main-header-two .header__category-maenu .byteflows_category-nav {
	flex-wrap: nowrap;
	justify-content: center;
	overflow-x: auto;
	scrollbar-width: none;
}

.main-header-two .header__category-maenu .byteflows_category-nav::-webkit-scrollbar {
	display: none;
}

.main-header-two .header__category-maenu .byteflows_category-nav > li > a {
	white-space: nowrap;
	font-size: 13px;
	text-transform: none;
}

@media (max-width: 1280px) {
	.main-header-two .byteflows_menu .byteflows_menu-nav > li > a {
		font-size: 12px;
	}

	.main-header-two .byteflows_menu .byteflows_menu-nav > li:not(:last-child) {
		padding-right: 14px;
	}
}

@media (max-width: 992px) {
	.main-header-two .header__top-main-wrap {
		padding: 18px 0;
		min-height: 72px;
	}

	.main-header-two .byteflows_logo a img {
		max-height: 48px;
	}

	.main-header-two .byteflows_menu {
		display: none;
	}
}

/* Single post footer: tagged list + social icons */
.single__footer-wrapper {
	gap: 20px 24px;
	align-items: center;
}

.single__footer-wrapper .post_tags {
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
	align-items: baseline;
	row-gap: 8px;
	column-gap: 8px;
}

/* Tag link pills: see obf-engine/assets/css/article-detail.css. */
.single__footer-wrapper .post_tags .post-tags-list {
	flex: 1 1 180px;
	min-width: 0;
}

.single__footer-wrapper .single__top-social {
	flex: 0 0 auto;
	margin-left: auto;
	max-width: 100%;
}

.single__footer-wrapper .social-box {
	width: auto;
	margin: 0;
}

.single__footer-wrapper .share-wrap {
	display: inline-flex;
	flex-wrap: nowrap;
	flex-shrink: 0;
	gap: 6px;
	align-items: center;
	justify-content: flex-end;
}

.single__footer-wrapper .single__top-social .share-wrap a,
.single__footer-wrapper .single__top-social .empath-print-btn {
	margin-left: 0;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.single__footer-wrapper {
		flex-direction: column;
		align-items: flex-start;
	}

	.single__footer-wrapper .single__top-social {
		margin-left: 0;
		margin-top: 12px;
		width: 100%;
	}

	.single__footer-wrapper .share-wrap {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
}

/* OBF static pages (About, Mandate, Team, etc.) */
body.obf-static-page .empath__breadcrumb-wrapper,
body.obf-static-page .empath__breadcrumb-single {
	display: none !important;
}

body.obf-static-page .internal__pading {
	padding: 0;
}

.obf-job-card__thumb-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 95px;
	height: 95px;
	border-radius: 50%;
	background: var(--obf-accent);
	color: #fff;
	font: 800 14px/1 var(--obf-font, sans-serif);
	letter-spacing: 0.06em;
}

.obf-contact-block__closing {
	margin-top: 16px;
	font: 300 16px/1.68 var(--obf-font, sans-serif);
	color: var(--obf-ink-body, #1d1b19);
}

.obf-email-card__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: var(--obf-r-input, 6px);
	background: var(--obf-surface, #fff);
	border: 1px solid var(--obf-border-warm, #f0e0d2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--obf-accent);
}

.obf-email-card__label {
	font: 600 11px/1 var(--obf-font, sans-serif);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--obf-gray-40, #999);
}

.obf-address-block__pin {
	color: var(--obf-accent);
	margin-top: 2px;
}

.obf-address-block__title {
	font: 700 13px/1 var(--obf-font, sans-serif);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--obf-ink, #141414);
}

.obf-address-block__text {
	margin-top: 7px;
	font: 300 15px/1.55 var(--obf-font, sans-serif);
	color: var(--obf-body-muted, #46433f);
}

/* Author designation under the byline name */
.singe__post-meta .bytf__postmeta ul li.authore {
	align-items: center;
}

.authore__name-wrap {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.2;
}

.authore__designation {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--obf-accent, #ef671f);
	margin-top: 2px;
}

.theme_author__Designation {
	margin: 2px 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--obf-accent, #ef671f);
}

/* Single post — italicise the intro excerpt */
.single__one_top .post_excerpt p {
	font-style: italic;
}

/* Content image captions */
.empath__single-content figure.wp-block-image,
.entry-content figure.wp-block-image {
	margin-bottom: 22px;
}

.empath__single-content figcaption,
.empath__single-content .wp-element-caption,
.empath__single-content .wp-caption-text,
.entry-content figcaption,
.entry-content .wp-element-caption,
.entry-content .wp-caption-text,
.post__thumb-single .obf-featured-caption {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	font-style: italic;
	color: var(--obf-body-muted, #6b6b6b);
	text-align: center;
}

.post__thumb-single .obf-featured-caption {
	margin-bottom: 4px;
}

/* Featured image: keep the desktop banner ratio (~92:45) on every viewport */
.post__thumb-single img {
	width: 100%;
	height: auto !important;
	aspect-ratio: 92 / 45;
	object-fit: cover;
}

/* Recent Post widget thumbnails: match the landscape ratio of the hero/top image */
.empath__recent-img {
	flex: 0 0 120px;
	max-width: 120px;
}

.empath__recent-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 92 / 45;
	object-fit: cover;
}

/* Category badge: full rectangle instead of the angled ribbon cut */
.empath-cate-badge {
	clip-path: none !important;
	padding-right: 9px;
	border-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

/* Share bar + tag pills: styled by the OBF Signal-Detail design.
 * See obf-engine/assets/css/article-detail.css. */

/* ------------------------------------------------------------------ *
 * Quotes & Pull Quotes — styled by the OBF design system.
 * See obf-engine/assets/css/content-typography.css (tag spec).
 * Only the cite ::after reset stays here (theme adds a dash). */
.empath__single-content blockquote cite::after,
.empath__single-content .wp-block-quote cite::after,
.empath__single-content .wp-block-pullquote cite::after,
.empath__single-content blockquote::after,
.empath__single-content .wp-block-quote::after {
	content: none;
	display: none;
}

/* Technology grid (2586bda): always cap at 2 cards (widget can render an
   extra item; keep it to exactly two on every breakpoint). */
.elementor-element-2586bda .grid__style-three:nth-child(n + 3) {
	display: none !important;
}

/* ==========================================================================
   Homepage top section (#083324f) — mobile layout
   Desktop keeps its original 3-column magazine layout untouched.
   Mobile is reordered to lead with the "Nine of the best TV" overlay banner
   as the hero, followed by 2 small Technology cards, then Featured Post, etc.

   Technique: flatten the columns with `display: contents` on mobile so every
   widget becomes a direct flex child of the section container, then use
   `order` to sequence them independently of their column.
   ========================================================================== */
@media (max-width: 767px) {
	.elementor-element-083324f > .elementor-container {
		display: flex;
		flex-direction: column;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Flatten lead + side columns only; keep OBF Experts column in the flex tree. */
	.elementor-element-083324f > .elementor-container > .elementor-column.elementor-element-93ccdf4,
	.elementor-element-083324f > .elementor-container > .elementor-column.elementor-element-dfaa529,
	.elementor-element-083324f > .elementor-container > .elementor-column.elementor-element-93ccdf4 > .elementor-widget-wrap,
	.elementor-element-083324f > .elementor-container > .elementor-column.elementor-element-dfaa529 > .elementor-widget-wrap {
		display: contents;
	}

	.elementor-element-083324f > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget,
	.elementor-element-083324f > .elementor-container > .elementor-widget {
		order: 40;
		margin-bottom: 26px;
	}

	.elementor-element-083324f > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget.elementor-element-2877097,
	.elementor-element-083324f > .elementor-container > .elementor-widget.elementor-element-2877097 {
		order: 1 !important;
		margin-bottom: 0 !important;
		width: calc(100% + 2 * var(--obf-gutter, 18px)) !important;
		max-width: none !important;
		margin-left: calc(-1 * var(--obf-gutter, 18px)) !important;
		margin-right: calc(-1 * var(--obf-gutter, 18px)) !important;
	}

	.elementor-element-083324f > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget.elementor-element-2586bda,
	.elementor-element-083324f > .elementor-container > .elementor-widget.elementor-element-2586bda {
		order: 2 !important;
		margin-bottom: 0 !important;
	}

	.elementor-element-083324f > .elementor-container > .elementor-column.elementor-element-36acabc {
		order: 3 !important;
		margin-bottom: 26px !important;
	}

	.elementor-element-083324f > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget.elementor-element-0ab59e3,
	.elementor-element-083324f > .elementor-container > .elementor-widget.elementor-element-0ab59e3 {
		order: 4 !important;
		width: 100% !important;
		max-width: 100% !important;
		align-self: stretch !important;
		box-sizing: border-box;
	}

	.elementor-element-083324f > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget.elementor-element-986546e,
	.elementor-element-083324f > .elementor-container > .elementor-widget.elementor-element-986546e {
		order: 5 !important;
		width: 100% !important;
		max-width: 100% !important;
		align-self: stretch !important;
		box-sizing: border-box;
	}

	.elementor-element-083324f > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget.elementor-element-e992cd2,
	.elementor-element-083324f > .elementor-container > .elementor-widget.elementor-element-e992cd2 {
		order: 6 !important;
	}

	/* Side gutter matches footer; container padding handles alignment. */
	.elementor-element-083324f {
		--obf-hp-gutter: var(--obf-gutter, 18px);
	}

	.elementor-element-083324f .elementor-element-2877097,
	.elementor-element-083324f .elementor-element-2586bda {
		width: 100% !important;
		max-width: 100% !important;
		align-self: stretch !important;
	}

	.elementor-element-083324f .elementor-widget:not(.elementor-element-2877097):not(.elementor-element-2586bda) > .elementor-widget-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}

	/* Heading widgets render the title directly (no .elementor-widget-container). */
	.elementor-element-083324f .elementor-widget-heading > .elementor-heading-title {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Lead + side editorial — full column width; gutter from section container. */
	.elementor-element-2877097 .elementor-widget-container,
	.elementor-element-2586bda > .elementor-widget-container {
		border-top: none !important;
		border-bottom: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-bottom: 0;
		margin-bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   Mobile polish
   1) Kill horizontal overflow (the sticky header container ran ~8px past the
      viewport). That stray overflow created a phantom horizontal/bottom scroll
      that showed up as white space after the footer on real devices, and also
      threw off the left/right alignment.
   2) Add a little breathing room on the left/right of the page content.
   ========================================================================== */
@media (max-width: 767px) {
	html,
	body {
		position: relative;
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		overscroll-behavior-y: none;
	}

	/* Homepage content gutter — same as footer (--obf-gutter = 18px on mobile). */
	.elementor-636 > .elementor-section > .elementor-container {
		padding-left: var(--obf-gutter, 18px);
		padding-right: var(--obf-gutter, 18px);
	}

	.elementor-636 .elementor-top-section > .elementor-column > .elementor-element-populated {
		padding-left: 0;
		padding-right: 0;
	}

	/* Theme (non-Elementor) templates: single posts, archives, pages. */
	.container {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Media inside article content must never exceed the viewport. */
	.empath__single-content img,
	.empath__single-content video,
	.empath__single-content iframe,
	.empath__single-content table,
	.empath__single-content pre {
		max-width: 100% !important;
		height: auto;
	}

	.empath__single-content iframe {
		width: 100% !important;
	}
}

/* overflow-x: clip is far more reliable than hidden on iOS Safari for
   stopping stray left/right scroll, so prefer it where supported. */
@supports (overflow: clip) {
	@media (max-width: 767px) {
		html,
		body {
			overflow-x: clip;
		}
	}
}

/* Back-to-top — rounded pill button (OBF design). */
html body .back-top-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	line-height: 1;
}

html body .back-top-btn svg {
	display: block;
}