/* =========================================================
 * PRESS 365 — Header
 * Version: 1.3.0
 * =========================================================
 *
 * Typography aligned with PRESS 365 Core Design System.
 * Existing layout, breaking ticker and interactions preserved.
 * ======================================================= */


/* =========================================================
 * 1. Outer Wrapper
 * ======================================================= */

.p365-header-wrap {
	position: relative;

	z-index:
		var(--p365-z-header);

	width:
		100%;

	padding:
		12px var(--p365-gutter) 0;
}


/* =========================================================
 * 2. Unified Header Shell
 * ======================================================= */

.p365-header-shell {
	position: relative;

	width:
		100%;

	max-width:
		var(--p365-container);

	margin-inline:
		auto;

	overflow:
		hidden;

	border-radius:
		20px;

	background:
		var(--p365-white);

	box-shadow:
		0 12px 36px
		rgba(3, 47, 51, 0.09);
}


/* =========================================================
 * 3. Main Header
 * ======================================================= */

.p365-header-main {
	position: relative;

	background:
		linear-gradient(
			100deg,
			var(--p365-dark) 0%,
			#063b40 58%,
			var(--p365-teal) 100%
		);

	color:
		var(--p365-white);
}


.p365-header-inner {
	display:
		grid;

	grid-template-columns:
		auto minmax(0, 1fr) auto;

	align-items:
		center;

	gap:
		clamp(28px, 3vw, 52px);

	min-height:
		76px;

	padding:
		0 clamp(24px, 3vw, 42px);
}


/* =========================================================
 * 4. Logo
 * ======================================================= */

.p365-header-logo {
	display:
		flex;

	align-items:
		center;

	flex-shrink:
		0;
}


.p365-header-logo
.custom-logo-link {
	display:
		flex;

	align-items:
		center;
}


.p365-header-logo
.custom-logo {
	display:
		block;

	width:
		auto;

	height:
		62px;

	max-width:
		260px;

	object-fit:
		contain;
}


.p365-header-logo__fallback {
	direction:
		ltr;

	display:
		inline-flex;

	align-items:
		center;

	gap:
		7px;

	color:
		var(--p365-white);

	font-size:
		27px;

	font-weight:
		var(--p365-weight-extrabold);

	line-height:
		1;
}


.p365-header-logo__365 {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	min-height:
		37px;

	padding:
		2px 9px;

	border-radius:
		4px;

	background:
		var(--p365-orange);

	color:
		var(--p365-white);

	font-weight:
		var(--p365-weight-black);
}


/* =========================================================
 * 5. Navigation
 * ======================================================= */

.p365-header-nav {
	min-width:
		0;
}


.p365-header-menu {
	display:
		flex;

	align-items:
		stretch;

	justify-content:
		flex-start;

	gap:
		clamp(24px, 2.5vw, 42px);

	min-height:
		76px;

	margin:
		0;

	padding:
		0;

	list-style:
		none;
}


.p365-header-menu > li {
	position:
		relative;

	display:
		flex;

	align-items:
		center;

	margin:
		0;
}


.p365-header-menu > li > a {
	position:
		relative;

	display:
		flex;

	align-items:
		center;

	height:
		100%;

	padding:
		2px 0 0;

	color:
		rgba(255,255,255,.83);

	font-size:
		14px;

	font-weight:
		var(--p365-weight-bold);

	line-height:
		1;

	white-space:
		nowrap;

	transition:
		color var(--p365-transition-fast);
}


.p365-header-menu > li > a:hover {
	color:
		var(--p365-white);
}


/* =========================================================
 * 6. Active Navigation
 * ======================================================= */

.p365-header-menu
> li.current-menu-item::after,

.p365-header-menu
> li.current-menu-ancestor::after,

.p365-header-menu
> li.current_page_item::after {
	content:
		"";

	position:
		absolute;

	right:
		0;

	bottom:
		0;

	width:
		100%;

	height:
		3px;

	border-radius:
		3px 3px 0 0;

	background:
		var(--p365-orange);
}


.p365-header-menu
> li.current-menu-item > a,

.p365-header-menu
> li.current-menu-ancestor > a,

.p365-header-menu
> li.current_page_item > a {
	color:
		var(--p365-white);

	font-weight:
		var(--p365-weight-extrabold);
}


/* =========================================================
 * 7. Actions
 * ======================================================= */

.p365-header-actions {
	direction:
		ltr;

	display:
		flex;

	align-items:
		center;

	gap:
		12px;

	flex-shrink:
		0;
}


/* =========================================================
 * 8. Search Button
 * ======================================================= */

.p365-header-search-toggle {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	width:
		40px;

	height:
		40px;

	border-radius:
		50%;

	color:
		rgba(255,255,255,.92);

	transition:
		color var(--p365-transition-fast),
		background-color var(--p365-transition-fast);
}


.p365-header-search-toggle:hover {
	background:
		rgba(255,255,255,.08);

	color:
		var(--p365-white);
}


/* =========================================================
 * 9. LIVE
 * ======================================================= */

.p365-header-live {
	direction:
		ltr;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		7px;

	min-height:
		38px;

	padding:
		0 14px;

	border:
		1px solid rgba(255,255,255,.48);

	border-radius:
		var(--p365-radius-round);

	color:
		var(--p365-white);

	font-size:
		11px;

	font-weight:
		var(--p365-weight-bold);

	line-height:
		1;

	letter-spacing:
		.04em;
}


.p365-header-live:hover {
	border-color:
		var(--p365-orange);

	color:
		var(--p365-white);
}


.p365-header-live__dot {
	position:
		relative;

	display:
		block;

	width:
		7px;

	height:
		7px;

	flex:
		0 0 7px;

	border-radius:
		50%;

	background:
		var(--p365-orange);
}


.p365-header-live__dot::before {
	content:
		"";

	position:
		absolute;

	inset:
		-4px;

	border:
		1px solid rgba(243,154,34,.42);

	border-radius:
		50%;

	animation:
		p365-live-pulse 1.8s ease-out infinite;
}


@keyframes p365-live-pulse {

	0% {
		transform:
			scale(.7);

		opacity:
			1;
	}

	100% {
		transform:
			scale(1.6);

		opacity:
			0;
	}
}


/* =========================================================
 * 10. Search Panel
 * ======================================================= */

.p365-header-search {
	padding:
		0 clamp(22px,3vw,42px)
		22px;

	background:
		var(--p365-dark);
}


.p365-header-search[hidden] {
	display:
		none;
}


.p365-header-search__form {
	position:
		relative;

	display:
		flex;

	align-items:
		center;

	max-width:
		680px;

	margin-inline:
		auto;
}


.p365-header-search__input {
	width:
		100%;

	height:
		48px;

	margin:
		0;

	padding:
		0 18px 0 54px;

	border:
		1px solid rgba(255,255,255,.16);

	border-radius:
		11px;

	outline:
		0;

	background:
		rgba(255,255,255,.08);

	color:
		var(--p365-white);

	font-size:
		14px;

	font-weight:
		var(--p365-weight-medium);

	line-height:
		1.5;
}


.p365-header-search__input::placeholder {
	color:
		rgba(255,255,255,.55);

	font-weight:
		var(--p365-weight-regular);
}


.p365-header-search__input:focus {
	border-color:
		rgba(243,154,34,.75);

	background:
		rgba(255,255,255,.11);
}


.p365-header-search__submit {
	position:
		absolute;

	left:
		5px;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	width:
		42px;

	height:
		38px;

	color:
		var(--p365-white);
}


/* =========================================================
 * 11. Breaking News Bar
 * ======================================================= */

.p365-breaking {
	direction:
		rtl;

	position:
		relative;

	display:
		grid;

	grid-template-columns:
		auto minmax(0,1fr) auto;

	align-items:
		stretch;

	min-height:
		48px;

	background:
		var(--p365-white);

	color:
		var(--p365-text-dark);
}


/* =========================================================
 * 12. Breaking Label
 * ======================================================= */

.p365-breaking-label {
	position:
		relative;

	z-index:
		5;

	isolation:
		isolate;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	min-width:
		118px;

	min-height:
		48px;

	padding:
		0 25px 0 34px;

	background:
		transparent;

	color:
		var(--p365-white);

	font-size:
		13px;

	font-weight:
		var(--p365-weight-extrabold);

	line-height:
		1;

	white-space:
		nowrap;
}


.p365-breaking-label > span {
	position:
		relative;

	z-index:
		3;
}


/*
 * Main orange shape.
 */

.p365-breaking-label::after {
	content:
		"";

	position:
		absolute;

	z-index:
		0;

	inset:
		0;

	background:
		linear-gradient(
			105deg,
			#f29216 0%,
			var(--p365-orange) 48%,
			#ffa01f 100%
		);

	clip-path:
		polygon(
			16px 0,
			100% 0,
			100% 100%,
			0 100%
		);
}


/*
 * White diagonal separator.
 */

.p365-breaking-label::before {
	content:
		"";

	position:
		absolute;

	z-index:
		2;

	top:
		0;

	bottom:
		-4px;

	left:
		10px;

	width:
		3px;

	background:
		var(--p365-white);

	transform:
		skewX(-18deg);

	transform-origin:
		center;
}


/* =========================================================
 * 13. Breaking Viewport
 * ======================================================= */

.p365-breaking-viewport {
	direction:
		ltr;

	position:
		relative;

	display:
		flex;

	align-items:
		center;

	min-width:
		0;

	overflow:
		hidden;

	padding:
		0 18px;
}


.p365-breaking-viewport::before,
.p365-breaking-viewport::after {
	display:
		none;
}


/* =========================================================
 * 14. Infinite Breaking Track
 * ======================================================= */

.p365-breaking-track {
	--p365-breaking-distance: 1000px;
	--p365-breaking-duration: 40s;

	display:
		flex;

	align-items:
		center;

	width:
		max-content;

	min-width:
		max-content;

	will-change:
		transform;

	transform:
		translate3d(0,0,0);
}


.p365-breaking-track.is-ready {
	animation:
		p365-breaking-scroll-right
		var(--p365-breaking-duration)
		linear
		infinite;
}


.p365-breaking-track.is-ready:hover {
	animation-play-state:
		paused;
}


.p365-breaking-track.is-ready:focus-within {
	animation-play-state:
		paused;
}


@keyframes p365-breaking-scroll-right {

	from {
		transform:
			translate3d(
				calc(
					var(--p365-breaking-distance)
					* -1
				),
				0,
				0
			);
	}

	to {
		transform:
			translate3d(
				0,
				0,
				0
			);
	}
}


/* =========================================================
 * 15. Breaking Group
 * ======================================================= */

.p365-breaking-group {
	direction:
		rtl;

	display:
		flex;

	align-items:
		center;

	flex:
		0 0 auto;

	width:
		max-content;
}


/* =========================================================
 * 16. Breaking Item
 * ======================================================= */

.p365-breaking-item {
	display:
		inline-flex;

	align-items:
		center;

	flex:
		0 0 auto;

	padding:
		0 18px;

	color:
		#485d5f;

	font-size:
		12px;

	font-weight:
		var(--p365-weight-medium);

	line-height:
		1.5;

	white-space:
		nowrap;
}


a.p365-breaking-item:hover {
	color:
		var(--p365-orange-dark);
}


/* =========================================================
 * 17. Breaking Separator
 * ======================================================= */

.p365-breaking-dot {
	display:
		block;

	width:
		5px;

	height:
		5px;

	flex:
		0 0 5px;

	border-radius:
		50%;

	background:
		var(--p365-orange);
}


/* =========================================================
 * 18. Empty Breaking State
 * ======================================================= */

.p365-breaking-empty {
	display:
		flex;

	align-items:
		center;

	height:
		100%;

	padding-inline:
		15px;

	color:
		var(--p365-muted);

	font-size:
		12px;

	font-weight:
		var(--p365-weight-regular);

	line-height:
		1.5;
}


/* =========================================================
 * 19. Last Update
 * ======================================================= */

.p365-breaking-update {
	direction:
		rtl;

	display:
		flex;

	align-items:
		center;

	gap:
		6px;

	min-width:
		145px;

	padding:
		0 22px;

	border-right:
		1px solid var(--p365-border);

	color:
		var(--p365-muted);

	font-size:
		11px;

	font-weight:
		var(--p365-weight-medium);

	line-height:
		1.4;

	white-space:
		nowrap;
}


.p365-breaking-update strong {
	color:
		var(--p365-teal);

	font-size:
		12px;

	font-weight:
		var(--p365-weight-bold);
}


/* =========================================================
 * 20. Mobile Toggle
 * ======================================================= */

.p365-header-mobile-toggle {
	display:
		none;

	align-items:
		center;

	justify-content:
		center;

	width:
		42px;

	height:
		42px;

	border:
		1px solid rgba(255,255,255,.15);

	border-radius:
		50%;

	color:
		var(--p365-white);
}


.p365-header-mobile-toggle__close {
	display:
		none;
}


.p365-header-mobile-toggle.is-open
.p365-header-mobile-toggle__open {
	display:
		none;
}


.p365-header-mobile-toggle.is-open
.p365-header-mobile-toggle__close {
	display:
		flex;
}


/* =========================================================
 * 21. Mobile Menu
 * ======================================================= */

.p365-header-mobile-menu {
	padding:
		4px 20px 22px;

	background:
		var(--p365-dark);
}


.p365-header-mobile-menu[hidden] {
	display:
		none;
}


.p365-mobile-menu {
	margin:
		0;

	padding:
		0;

	border-top:
		1px solid rgba(255,255,255,.10);

	list-style:
		none;
}


.p365-mobile-menu li {
	margin:
		0;

	border-bottom:
		1px solid rgba(255,255,255,.08);
}


.p365-mobile-menu a {
	display:
		flex;

	align-items:
		center;

	min-height:
		52px;

	color:
		rgba(255,255,255,.82);

	font-size:
		14px;

	font-weight:
		var(--p365-weight-bold);

	line-height:
		1.4;
}


.p365-mobile-menu a:hover {
	color:
		var(--p365-white);
}


.p365-mobile-menu
.current-menu-item > a,
.p365-mobile-menu
.current-menu-ancestor > a,
.p365-mobile-menu
.current_page_item > a {
	color:
		var(--p365-orange);

	font-weight:
		var(--p365-weight-extrabold);
}


/* =========================================================
 * 22. Sticky
 * ======================================================= */

.p365-header-wrap--sticky {
	position:
		sticky;

	top:
		0;
}


/* =========================================================
 * 23. Tablet
 * ======================================================= */

@media (max-width: 1100px) {

	.p365-header-inner {
		gap:
			24px;
	}


	.p365-header-menu {
		gap:
			21px;
	}


	.p365-header-menu > li > a {
		font-size:
			12px;

		font-weight:
			var(--p365-weight-bold);
	}


	.p365-header-logo
	.custom-logo {
		height:
			50px;

		max-width:
			205px;
	}
}


/* =========================================================
 * 24. Mobile
 * ======================================================= */

@media (max-width: 900px) {

	.p365-header-wrap {
		padding:
			10px 10px 0;
	}


	.p365-header-shell {
		border-radius:
			16px;
	}


	.p365-header-inner {
		display:
			flex;

		justify-content:
			space-between;

		min-height:
			68px;

		padding:
			0 16px;
	}


	.p365-header-logo
	.custom-logo {
		height:
			44px;

		max-width:
			180px;
	}


	.p365-header-nav {
		display:
			none;
	}


	.p365-header-mobile-toggle {
		display:
			inline-flex;
	}


	.p365-header-actions {
		gap:
			6px;
	}


	.p365-header-live {
		min-height:
			35px;

		padding:
			0 10px;

		font-size:
			10px;

		font-weight:
			var(--p365-weight-bold);
	}


	.p365-header-search-toggle {
		width:
			36px;

		height:
			36px;
	}


	/* Breaking */

	.p365-breaking {
		grid-template-columns:
			auto minmax(0,1fr);

		min-height:
			44px;
	}


	.p365-breaking-label {
		min-width:
			82px;

		min-height:
			44px;

		padding:
			0 17px 0 26px;

		font-size:
			12px;

		font-weight:
			var(--p365-weight-extrabold);
	}


	.p365-breaking-label::after {
		clip-path:
			polygon(
				13px 0,
				100% 0,
				100% 100%,
				0 100%
			);
	}


	.p365-breaking-label::before {
		left:
			5px;

		width:
			4px;
	}


	.p365-breaking-update {
		display:
			none;
	}


	.p365-breaking-viewport {
		padding:
			0 10px;
	}


	.p365-breaking-item {
		padding:
			0 14px;

		font-size:
			11px;

		font-weight:
			var(--p365-weight-medium);
	}
}


/* =========================================================
 * 25. Small Mobile
 * ======================================================= */

@media (max-width: 480px) {

	.p365-header-logo
	.custom-logo {
		height:
			40px;

		max-width:
			155px;
	}


	.p365-header-live {
		display:
			none;
	}


	.p365-breaking-label {
		min-width:
			72px;

		padding:
			0 13px 0 22px;
	}


	.p365-mobile-menu a {
		font-size:
			14px;

		font-weight:
			var(--p365-weight-bold);
	}
}


/* =========================================================
 * 26. Reduced Motion
 * ======================================================= */

@media (prefers-reduced-motion: reduce) {

	.p365-breaking-track.is-ready {
		animation:
			none;

		transform:
			translate3d(0,0,0);
	}


	.p365-header-live__dot::before {
		animation:
			none;
	}
}