:root {
	--bn-bg: #ffffff;
	--bn-surface: #f6f8fa;
	--bn-text: #17222b;
	--bn-soft-text: #5f6b76;
	--bn-line: #e6eaee;
	--bn-tap: 44px;
}

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

.bn-mobile-header,
.bn-mobile-overlay,
.bn-mobile-menu-panel,
.bn-mobile-search-panel {
	display: none;
}

@media (min-width: 1280px) {
	.bn-container {
		width: min(1240px, calc(100% - 48px));
	}

	.bn-article-content {
		max-width: 720px;
	}
}

@media (min-width: 1024px) {
	.bn-article-content {
		font-size: 18px;
		line-height: 1.9;
		max-width: 720px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.bn-container {
		width: min(100% - 32px, 960px);
	}

	.bn-hero-grid,
	.bn-feature-block,
	.bn-three-column-grid,
	.bn-single-layout {
		grid-template-columns: 1fr;
	}

	.bn-archive-grid,
	.bn-related-grid,
	.bn-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bn-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bn-article-content {
		font-size: 18px;
		line-height: 1.9;
		max-width: 720px;
	}
}

@media (max-width: 1023px) {
	body {
		background: var(--bn-bg);
		color: var(--bn-text);
	}

	body.has-sticky-header.is-sticky-header-ready {
		padding-top: var(--bn-sticky-header-height, 0px);
	}

	body.admin-bar .bn-mobile-menu-panel,
	body.admin-bar .bn-mobile-search-panel {
		top: 32px;
	}

	body.admin-bar.has-sticky-header .bn-mobile-header {
		top: 32px;
	}

	body.admin-bar .bn-mobile-overlay {
		top: 32px;
	}

	.has-mobile-panel {
		overflow: hidden;
	}

	.has-mobile-panel body {
		overflow: hidden;
	}

	.bn-container {
		width: min(100% - 24px, 720px);
	}

	.bn-header {
		display: none;
	}

	.bn-mobile-header {
		position: relative;
		top: 0;
		z-index: 1100;
		display: grid;
		grid-template-columns: var(--bn-tap) minmax(0, 1fr) var(--bn-tap);
		align-items: center;
		gap: 4px;
		min-height: 56px;
		padding: 0 12px;
		border-bottom: 1px solid var(--bn-line);
		background: var(--bn-bg);
		box-shadow: 0 8px 20px rgba(18, 75, 101, 0.08);
	}

	body.has-sticky-header .bn-mobile-header {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
	}

	.bn-mobile-brand {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		justify-self: center;
		min-height: var(--bn-tap);
		max-width: min(58vw, 190px);
		color: var(--bn-primary, #124b65);
		font-size: 22px;
		font-weight: 800;
		text-decoration: none;
	}

	.bn-mobile-brand img {
		max-width: 170px;
		max-height: 42px;
		width: auto;
		height: auto;
	}

	.bn-mobile-icon-btn,
	.bn-mobile-panel-head button,
	.bn-mobile-search-panel button,
	.bn-mobile-submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--bn-tap);
		min-height: var(--bn-tap);
		border: 0;
		background: transparent;
		color: var(--bn-text);
		font: inherit;
		font-size: 24px;
		cursor: pointer;
	}

	.bn-mobile-icon-btn[data-mobile-menu-open] {
		justify-self: start;
	}

	.bn-mobile-icon-btn[data-mobile-search-open] {
		justify-self: end;
	}

	.bn-mobile-overlay {
		position: fixed;
		inset: 0;
		z-index: 1190;
		display: block;
		background: rgba(10, 18, 28, 0.48);
		opacity: 0;
		visibility: hidden;
		backdrop-filter: blur(4px);
		transition: opacity 0.22s ease, visibility 0.22s ease;
	}

	.bn-mobile-overlay.is-open {
		opacity: 1;
		visibility: visible;
	}

	.bn-mobile-menu-panel,
	.bn-mobile-search-panel {
		position: fixed;
		z-index: 1200;
		display: flex;
		background: var(--bn-bg);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
	}

	.bn-mobile-menu-panel {
		top: 0;
		bottom: 0;
		left: 0;
		flex-direction: column;
		width: min(88vw, 390px);
		max-width: calc(100% - 38px);
		border-right: 1px solid var(--bn-line);
		box-shadow: 18px 0 48px rgba(15, 31, 45, 0.22);
		transform: translateX(-104%);
	}

	.bn-mobile-search-panel {
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: max-content;
		padding: 12px;
		border-bottom: 1px solid var(--bn-line);
		box-shadow: 0 14px 34px rgba(15, 31, 45, 0.18);
		transform: translate(0, -100%);
	}

	.bn-mobile-menu-panel.is-open,
	.bn-mobile-search-panel.is-open {
		opacity: 1;
		visibility: visible;
		transform: translate(0);
	}

	.bn-mobile-panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 0 0 auto;
		min-height: 68px;
		padding: 0 16px;
		border-bottom: 1px solid var(--bn-line);
		color: var(--bn-primary, #124b65);
		font-size: 22px;
	}

	.bn-mobile-panel-brand {
		display: inline-flex;
		align-items: center;
		min-width: 0;
		color: var(--bn-primary, #124b65);
		font-weight: 800;
		text-decoration: none;
	}

	.bn-mobile-panel-brand img {
		max-width: 180px;
		max-height: 44px;
		width: auto;
		height: auto;
	}

	.bn-mobile-close {
		border-radius: 50%;
		background: var(--bn-surface);
		font-size: 28px;
	}

	.bn-mobile-search-panel input {
		min-height: var(--bn-tap);
		border: 1px solid var(--bn-line);
		background: var(--bn-bg);
		color: var(--bn-text);
		padding: 0 12px;
		font: inherit;
	}

	.bn-mobile-search-panel button[type="submit"] {
		min-height: var(--bn-tap);
		border: 0;
		background: var(--bn-primary, #124b65);
		color: #fff;
		padding: 0 14px;
		font: inherit;
		font-weight: 800;
	}

	.bn-mobile-menu-panel nav {
		flex: 1 1 auto;
		min-height: 0;
		padding: 4px 0 16px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.bn-mobile-menu,
	.bn-mobile-menu-panel .bn-menu {
		display: block;
	}

	.bn-mobile-menu,
	.bn-mobile-menu ul,
	.bn-mobile-menu-panel .bn-menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.bn-mobile-menu li,
	.bn-mobile-menu-panel .bn-menu li {
		position: relative;
	}

	.bn-mobile-menu > li,
	.bn-mobile-menu-panel .bn-menu > li {
		background: var(--bn-bg);
	}

	.bn-mobile-menu a,
	.bn-mobile-menu-panel .bn-menu a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		min-height: 44px;
		padding: 10px 58px 10px 18px;
		border-bottom: 1px solid var(--bn-line);
		color: var(--bn-text);
		font-size: 17px;
		font-weight: 800;
		line-height: 1.35;
		text-decoration: none;
		overflow-wrap: anywhere;
	}

	.bn-mobile-menu > li.is-submenu-open > a,
	.bn-mobile-menu-panel .bn-menu > li.is-submenu-open > a,
	.bn-mobile-menu > li.current-menu-item > a,
	.bn-mobile-menu-panel .bn-menu > li.current-menu-item > a,
	.bn-mobile-menu > li.current-menu-ancestor > a,
	.bn-mobile-menu-panel .bn-menu > li.current-menu-ancestor > a {
		color: var(--bn-breaking, #e8192c);
	}

	.bn-mobile-menu li.is-submenu-open > a,
	.bn-mobile-menu-panel .bn-menu li.is-submenu-open > a {
		background: #fff5f6;
	}

	.bn-mobile-menu .sub-menu,
	.bn-mobile-menu .children,
	.bn-mobile-menu-panel .bn-menu .sub-menu,
	.bn-mobile-menu-panel .bn-menu .children {
		position: static;
		opacity: 1;
		visibility: visible;
		min-width: 0;
		border: 0;
		border-left: 3px solid rgba(232, 25, 44, 0.18);
		background: #f8fafc;
		box-shadow: none;
		transform: none;
	}

	.bn-mobile-menu .menu-item-has-children > a::after,
	.bn-mobile-menu .page_item_has_children > a::after,
	.bn-mobile-menu-panel .bn-menu .menu-item-has-children > a::after,
	.bn-mobile-menu-panel .bn-menu .page_item_has_children > a::after {
		display: none;
	}

	.bn-mobile-menu .sub-menu a,
	.bn-mobile-menu .children a,
	.bn-mobile-menu-panel .bn-menu .sub-menu a,
	.bn-mobile-menu-panel .bn-menu .children a {
		min-height: 42px;
		margin: 0;
		padding: 9px 54px 9px 28px;
		border-bottom: 1px solid rgba(214, 221, 229, 0.82);
		color: #56616f;
		font-size: 14px;
		font-weight: 700;
	}

	.bn-mobile-menu .sub-menu .sub-menu a,
	.bn-mobile-menu .children .children a,
	.bn-mobile-menu-panel .bn-menu .sub-menu .sub-menu a,
	.bn-mobile-menu-panel .bn-menu .children .children a {
		padding-left: 42px;
		background: #fff;
		color: #64707d;
		font-size: 13px;
	}

	.bn-mobile-menu .sub-menu .sub-menu .sub-menu a,
	.bn-mobile-menu .children .children .children a,
	.bn-mobile-menu-panel .bn-menu .sub-menu .sub-menu .sub-menu a,
	.bn-mobile-menu-panel .bn-menu .children .children .children a {
		padding-left: 54px;
		color: #717d8a;
	}

	.bn-mobile-menu [data-mobile-menu-depth="1"] > a::before,
	.bn-mobile-menu-panel .bn-menu [data-mobile-menu-depth="1"] > a::before,
	.bn-mobile-menu [data-mobile-menu-depth="2"] > a::before,
	.bn-mobile-menu-panel .bn-menu [data-mobile-menu-depth="2"] > a::before,
	.bn-mobile-menu [data-mobile-menu-depth="3"] > a::before,
	.bn-mobile-menu-panel .bn-menu [data-mobile-menu-depth="3"] > a::before {
		content: "";
		flex: 0 0 auto;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: currentColor;
		opacity: 0.45;
	}

	.bn-mobile-submenu-toggle {
		position: absolute;
		top: 0;
		right: 12px;
		z-index: 1;
		width: 44px;
		min-width: 44px;
		height: 44px;
		min-height: 44px;
		border: 0;
		border-left: 1px solid rgba(214, 221, 229, 0.86);
		border-radius: 0;
		background: transparent;
		color: #8a96a3;
		transition: background 0.2s ease, color 0.2s ease;
	}

	.bn-mobile-submenu-toggle:focus-visible {
		outline: 2px solid var(--bn-breaking, #e8192c);
		outline-offset: -3px;
	}

	.bn-mobile-menu .sub-menu .bn-mobile-submenu-toggle,
	.bn-mobile-menu .children .bn-mobile-submenu-toggle,
	.bn-mobile-menu-panel .bn-menu .sub-menu .bn-mobile-submenu-toggle,
	.bn-mobile-menu-panel .bn-menu .children .bn-mobile-submenu-toggle {
		top: 0;
		right: 8px;
		width: 42px;
		min-width: 42px;
		height: 42px;
		min-height: 42px;
	}

	.bn-mobile-submenu-toggle span {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-right: 1.8px solid currentColor;
		border-bottom: 1.8px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}

	.bn-mobile-submenu-toggle[aria-expanded="true"] {
		background: rgba(232, 25, 44, 0.08);
		color: var(--bn-breaking, #e8192c);
	}

	.bn-mobile-submenu-toggle[aria-expanded="true"] span {
		transform: rotate(225deg);
	}

	.bn-mobile-drawer-footer {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		flex: 0 0 auto;
		padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--bn-line);
		background: var(--bn-surface);
	}

	.bn-mobile-drawer-footer a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 40px;
		background: var(--bn-bg);
		color: var(--bn-primary, #124b65);
		font-weight: 800;
		text-decoration: none;
	}

	.bn-mobile-search-panel form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 8px;
		position: relative;
		width: 100%;
	}

	.bn-mobile-search-panel .bn-header-live-search {
		right: 0;
	}

	.bn-mobile-search-panel .bn-header-live-search a {
		grid-template-columns: 52px minmax(0, 1fr);
	}

	.bn-mobile-search-panel .bn-header-live-search img,
	.bn-mobile-search-panel .bn-header-live-search span[aria-hidden="true"] {
		width: 52px;
		height: 38px;
	}

	.bn-hero-side,
	.bn-card-grid,
	.bn-archive-grid,
	.bn-related-grid,
	.bn-search-popular,
	.bn-footer-grid,
	.bn-single-layout,
	.bn-article-body-wrap {
		grid-template-columns: 1fr;
	}

	.bn-hero-grid {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.bn-hero-lead,
	.bn-hero-side {
		flex: 0 0 88%;
		scroll-snap-align: start;
	}

	.bn-card-small,
	.bn-r-card-medium,
	.bn-search-result {
		grid-template-columns: 1fr;
	}

	.bn-r-card,
	.bn-card,
	.bn-search-result {
		width: 100%;
	}

	.bn-r-card a,
	.bn-card a,
	.bn-search-result a,
	.bn-filter-tabs button,
	.bn-load-more {
		min-height: var(--bn-tap);
	}

	.bn-article-content {
		max-width: 720px;
		font-size: 17px;
		line-height: 1.9;
	}

	.bn-article-title {
		font-size: 31px;
	}

	.bn-share-bar {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.bn-ad-mobile-sticky {
		position: fixed;
		left: 50%;
		bottom: calc(env(safe-area-inset-bottom) + 8px);
		z-index: 1090;
		width: min(320px, calc(100% - 24px));
		min-height: 50px;
		background: var(--bn-bg);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
		transform: translateX(-50%);
	}

	.bn-mobile-ad-close {
		position: absolute;
		top: -12px;
		right: -10px;
		width: 28px;
		height: 28px;
		border: 0;
		border-radius: 50%;
		background: var(--bn-breaking, #e8192c);
		color: #fff;
		font-size: 18px;
	}
}

@media (max-width: 782px) {
	body.admin-bar .bn-mobile-menu-panel,
	body.admin-bar .bn-mobile-search-panel {
		top: 46px;
	}

	body.admin-bar.has-sticky-header .bn-mobile-header {
		top: 46px;
	}

	body.admin-bar .bn-mobile-overlay {
		top: 46px;
	}
}

@media (max-width: 420px) {
	.bn-mobile-menu-panel {
		width: min(92vw, 360px);
		max-width: calc(100% - 24px);
	}
}