/**
 * BD Media — masthead design (two-band publication header).
 *
 * SCOPE: everything is scoped to .elementor-3220, the Elementor header template. Nothing here can
 * reach article content, JetBlog cards, the footer or the sidebar.
 *
 * STRUCTURE THIS SKINS
 *   BAND 1  masthead   full-width, centred logo, air above and below, hairline rule beneath
 *   BAND 2  nav bar    nav left, search right, sticky
 *
 * DESIGN PRINCIPLES APPLIED
 *   - the brand is given room to be READ, not shrunk to fit a row
 *   - exactly one accent colour (#BE1E51) and it is used only for state (active, hover, focus)
 *   - hairlines (1px, #e6e8ec) do the separating; no boxes, no shadows at rest
 *   - typography carries the hierarchy: size and weight, not colour and ornament
 *   - the sticky band is the nav, so the masthead can be generous without costing vertical space
 */

/* ======================= masthead supporting elements =======================
   These exist so the masthead band has something on both sides of the logo. A centred logo alone in
   a full-width band reads as an unfinished page — this is the single biggest reason the header looked
   "empty". Publications anchor the band with a dateline and a subscribe action.
   ------------------------------------------------------------------------- */

.elementor-3220 .bdm-dateline {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8b93a1;
	line-height: 1.4;
	white-space: nowrap;
}
.elementor-3220 .bdm-tagline {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: #17202e;
	line-height: 1.4;
	white-space: nowrap;
}
.elementor-3220 .bdm-utility {
	margin: 0;
	font-size: 13px;
	color: #8b93a1;
	line-height: 1.4;
	white-space: nowrap;
}
.elementor-3220 .bdm-utility a {
	color: #6b7280;
	text-decoration: none;
	transition: color .15s ease;
}
.elementor-3220 .bdm-utility a:hover {
	color: #BE1E51;
}
.elementor-3220 .bdm-utility span {
	margin: 0 6px;
	color: #cfd4dc;
}

/* the subscribe action */
.elementor-3220 .elementor-button {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .01em;
	box-shadow: none;
	transition: background .15s ease, border-color .15s ease;
}
.elementor-3220 .elementor-button:hover {
	background: #a01845;
}

/* The three masthead parts share the row evenly so the logo stays optically centred.
   🔴 `!important` IS REQUIRED HERE, not laziness. Elementor's generated stylesheet is enqueued AFTER
   this file, so at equal specificity Elementor wins — with plain rules the container stayed
   `.e-con-full { width:100% }` and both side columns took the full 1240px, shoving the logo and the
   Subscribe action off-screen. Elementor sets width on `.e-con-full` and flex on the element class;
   both have to be overridden explicitly. */
.elementor-3220 .elementor-element-bdmcol1,
.elementor-3220 .elementor-element-bdmcol2 {
	flex: 1 1 0 !important;
	width: auto !important;
	max-width: 50% !important;
	min-width: 0;
}

/* the logo sits between them, fixed, so the two 1fr sides stay equal */
.elementor-3220 .elementor-element-5558458 {
	flex: 0 0 auto !important;
	width: auto !important;
}

/* ========================== the masthead band ============================= */

.elementor-3220 {
	background: #fff;
	position: relative;
}

/* The content column is 1240px (matching the body). The RULES span the full viewport, so the
   masthead reads as a full-width band rather than a floating box — that boxed-rule artefact was
   the main thing making the header look unfinished. Standard full-bleed-vs-content split. */
.elementor-3220 .elementor-element-0362447 {
	position: relative;
}
.elementor-3220 .elementor-element-0362447::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 3px;
	background: #BE1E51;
}
.elementor-3220 .elementor-element-88605d9 {
	position: relative;
	padding-top: 16px !important;
	padding-bottom: 14px !important;
}
.elementor-3220 .elementor-element-88605d9::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100vw;
	height: 1px;
	background: #e6e8ec;
}
.elementor-3220 .elementor-element-a6127f2,
.elementor-3220 .elementor-element-5d32032,
.elementor-3220 .elementor-element-b9b3eb5 {
	position: relative;
}
.elementor-3220 .elementor-element-a6127f2::after,
.elementor-3220 .elementor-element-5d32032::after,
.elementor-3220 .elementor-element-b9b3eb5::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100vw;
	height: 1px;
	background: #e6e8ec;
}

/* The logo is now the HORIZONTAL lockup — 1732x363, a 4.77:1 ratio.
   SET BOTH DIMENSIONS EXPLICITLY. With `height:52px; width:auto` the element was still being
   squashed to its container's 152px (LazySizes is also in play here — the img carries
   `lazyautosizes`, which lets the rendered width feed back into the srcset choice). An explicit
   248x52 removes every ambiguity and is exact for a 4.77:1 mark.
   Two clamps previously broke this and both are overridden:
     1. `max-width: 51%` inherited on the Elementor image widget — the old square logo rendered at
        37px because of it, however the box was sized.
     2. `width:100%` lets Elementor's container maths take over.
   `!important` is required because Elementor's generated stylesheet is enqueued AFTER this file. */
.elementor-3220 .elementor-element-5558458 img {
	display: block;
	width: 248px !important;
	height: 52px !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain;
}
.elementor-3220 .elementor-element-5558458,
.elementor-3220 .elementor-element-5558458 .elementor-widget-container {
	width: auto !important;
	max-width: none !important;
	line-height: 0;
}
.elementor-3220 .elementor-element-5558458 a {
	display: block;
	line-height: 0;
}
@media (max-width: 1024px) {
	.elementor-3220 .elementor-element-5558458 img { width: 210px !important; height: 44px !important; }
}
@media (max-width: 767px) {
	.elementor-3220 .elementor-element-5558458 img { width: 165px !important; height: 35px !important; }
}

/* ============================== the nav band ============================== */

/* the sticky bar itself: needs an opaque background or content shows through when pinned */
.elementor-3220 .elementor-element-a6127f2,
.elementor-3220 .elementor-element-5d32032 {
	background: #fff;
	border-bottom: 1px solid #e6e8ec;
	min-height: 48px;
}
.elementor-3220 .elementor-element-b9b3eb5 {
	background: #fff;
	border-bottom: 1px solid #e6e8ec;
}

/* --------------------------------- nav ---------------------------------- */

/* Elementor leaves this UL as flex with flex-wrap:wrap — that is what broke the menu onto a
   ragged second line. A nav bar never wraps; narrow screens swap to the toggle markup. */
.elementor-3220 ul.elementor-nav-menu {
	flex-wrap: nowrap !important;
}

.elementor-3220 .elementor-nav-menu--main .elementor-item {
	color: #17202e;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .005em;
	text-transform: none;
	padding: 14px 2px !important;
	line-height: 1.2;
	white-space: nowrap;
	transition: color .15s ease;
}
.elementor-3220 .elementor-nav-menu--main .elementor-item:hover,
.elementor-3220 .elementor-nav-menu--main .elementor-item:focus,
.elementor-3220 .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: #BE1E51;
}
/* tighter, heavier underline indicator than Elementor's default */
.elementor-3220 .elementor-nav-menu--main.e--pointer-underline .elementor-item::after {
	height: 2px;
	background-color: #BE1E51;
	bottom: 6px;
}

/* spacing between top-level items — even, and never so wide the bar looks sparse */
.elementor-3220 .elementor-nav-menu--main .elementor-nav-menu > li {
	margin-left: 22px;
}
.elementor-3220 .elementor-nav-menu--main .elementor-nav-menu > li:first-child {
	margin-left: 0;
}

/* the desktop nav row sizes itself; it must not be forced to 100% inside a flex row */
.elementor-3220 .elementor-element-a6127f2 {
	width: auto !important;
	flex: 1 1 auto !important;
	min-width: 0;
}
.elementor-3220 .elementor-element-a6127f2 .elementor-element-1168f9b {
	width: auto !important;
	flex: 0 1 auto;
}

/* ------------------------------- dropdowns ------------------------------- */

.elementor-3220 .elementor-nav-menu--dropdown,
.elementor-3220 .elementor-nav-menu--main .sub-menu {
	background: #fff;
	border: 1px solid #e6e8ec;
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(16, 24, 40, .10);
	padding: 8px;
	min-width: 232px;
	overflow: hidden;
}
.elementor-3220 .elementor-nav-menu--dropdown .elementor-sub-item,
.elementor-3220 .elementor-nav-menu--main .sub-menu .elementor-sub-item {
	color: #2b3444;
	font-weight: 500;
	font-size: 14px;
	padding: 9px 14px !important;
	border-radius: 6px;
	text-transform: none;
	transition: background .12s ease, color .12s ease;
}
.elementor-3220 .elementor-nav-menu--dropdown .elementor-sub-item:hover,
.elementor-3220 .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover {
	background: #fdf2f6;
	color: #BE1E51;
}
.elementor-3220 .sub-menu > li {
	margin: 0 !important;
}

/* --------------------------------- search -------------------------------- */

.elementor-3220 .elementor-search-form {
	width: 224px;
	flex: 0 0 auto;
}
.elementor-3220 .elementor-search-form__container {
	border: 1px solid #dfe3e9;
	border-radius: 8px;
	background: #fff;
	min-height: 38px;
	transition: border-color .15s ease, box-shadow .15s ease;
	overflow: hidden;
}
.elementor-3220 .elementor-search-form__container:hover {
	border-color: #c7ccd6;
}
.elementor-3220 .elementor-search-form__container:focus-within {
	border-color: #BE1E51;
	box-shadow: 0 0 0 3px rgba(190, 30, 81, .12);
}
.elementor-3220 .elementor-search-form__input {
	font-size: 14px;
	color: #17202e;
	padding: 0 12px;
	border: 0;
	background: transparent;
}
.elementor-3220 .elementor-search-form__input::placeholder {
	color: #8b93a1;
}
.elementor-3220 .elementor-search-form__submit {
	background: transparent;
	color: #6b7280;
	min-width: 42px;
	transition: color .15s ease, background .15s ease;
}
.elementor-3220 .elementor-search-form__submit:hover {
	background: #fdf2f6;
	color: #BE1E51;
}

/* ----------------------------- tablet / mobile ---------------------------- */

.elementor-3220 .elementor-menu-toggle {
	border: 1px solid #dfe3e9;
	border-radius: 8px;
	color: #17202e;
	padding: 8px;
	transition: border-color .15s ease, color .15s ease;
}
.elementor-3220 .elementor-menu-toggle:hover {
	border-color: #BE1E51;
	color: #BE1E51;
}
.elementor-3220 .elementor-menu-toggle svg {
	fill: currentColor;
}
.elementor-3220 .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	box-shadow: 0 18px 30px rgba(16, 24, 40, .12);
}

/* ------------------------- sticky behaviour ------------------------------- */

/* when the nav band is pinned, lift it off the page */
.elementor-3220 .elementor-sticky--active,
.elementor-3220 .elementor-sticky--effects {
	box-shadow: 0 2px 16px rgba(16, 24, 40, .09);
}
/* the masthead's brand rule must not be duplicated by a sticky clone */
.elementor-3220 .elementor-sticky--active::before,
.elementor-3220 .elementor-sticky--effects::before {
	display: none;
}

@media (max-width: 1180px) {
	.elementor-3220 .elementor-search-form { width: 176px; }
	.elementor-3220 .elementor-nav-menu--main .elementor-nav-menu > li { margin-left: 18px; }
}

/* (stale logo max-height rule removed — superseded by the explicit width/height rules above) */