/*
 Theme Name:   Bluegen Marine Child
 Theme URI:    https://bmgfull.local/
 Description:  Child theme of Hello Elementor for Bluegen Marine.
 Author:       Rendez Tech
 Author URI:   https://bmgfull.local/
 Template:     hello-elementor
 Version:      1.2.5
 Text Domain:  bluegen-marine-child
*/

/* =====================================================================
   BlueGen Marine brand reset — overrides Hello Elementor defaults with
   the brand palette/typography from bluegenmarine.com so any markup
   that isn't styled by an Elementor widget (WP core blocks, comments,
   search forms, 404/search pages, browser default button/input chrome)
   still matches the live brand.
   ===================================================================== */

:root{
	--blue:#006ebd;
	--blue-dark:#00588f;
	--cyan:#31bdf3;
	--cyan-num:#42aad7;
	--navy:#0e3854;
	--navy-nav:#024886;
	--logo-green:#17b26a;
	--e-global-color-primary:var(--blue);
	--e-global-color-secondary:var(--navy);
	--e-global-color-text:var(--navy);
	--e-global-color-accent:var(--cyan);
}

/* ---- Base typography ---- */
html{
	scroll-behavior:smooth;
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
}
body{
	font-family:'Montserrat', sans-serif;
	font-weight:500;
	color:var(--navy);
	background:#fff;
}
h1,h2,h3,h4,h5,h6{
	font-family:'Montserrat', sans-serif;
	color:var(--navy);
}

/* ---- Links ---- */
a{
	color:var(--blue);
	text-decoration:none;
	transition:color .2s ease;
}
a:hover,
a:focus{
	color:var(--blue-dark);
}
.comments-area a,
.page-content a{
	text-decoration:underline;
}

/* ---- Selection ---- */
::selection{
	background:var(--cyan);
	color:#fff;
}

/* ---- Buttons / form controls (WP core blocks, comment form,
       search form, Elementor button widget defaults) ---- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.wp-element-button,
.elementor-button{
	background:linear-gradient(90deg, var(--blue) 0%, var(--cyan) 50%, var(--logo-green) 100%);
	background-repeat:no-repeat;
	background-size:200% auto;
	background-position:0% 50%;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:700;
	font-size:1rem;
	letter-spacing:.03em;
	padding:.7em 1.6em;
	border-radius:.4em;
	border:none;
	white-space:nowrap;
	cursor:pointer;
	transition:background-position .5s ease;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.elementor-button:hover{
	background-position:100% 50%;
	color:#fff;
}

/* ---- Header widget overrides ----
   Elementor's Button/Nav-Menu widgets carry a built-in Global Kit
   typography/color default (Accent/Primary) that Elementor re-emits per
   post at the same selector specificity as a page builder reset, win or
   lose depending on file order. Pin the brand values here explicitly so
   the header always renders from the theme's own CSS, not the kit. */
.elementor-widget-button .elementor-button{
	background:linear-gradient(90deg, var(--blue) 0%, var(--cyan) 50%, var(--logo-green) 100%) !important;
	background-repeat:no-repeat !important;
	background-size:200% auto !important;
	background-position:0% 50% !important;
	color:#fff !important;
	font-family:Arial, Helvetica, sans-serif !important;
	font-weight:700 !important;
	letter-spacing:.03em !important;
	padding:.7em 1.6em !important;
	border-radius:.4em !important;
}
.elementor-widget-button .elementor-button:hover{
	background-position:100% 50% !important;
	color:#fff !important;
}
.elementor-widget-navigation-menu a.hfe-menu-item,
.elementor-widget-navigation-menu a.hfe-sub-menu-item{
	font-family:Arial, Helvetica, sans-serif !important;
	font-weight:700 !important;
	letter-spacing:.02em !important;
}

/* ---- Form fields ---- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select{
	font-family:'Montserrat', sans-serif;
	color:var(--navy);
	border:1px solid #cfe2ee;
	border-radius:.4em;
	padding:.6em .9em;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus{
	outline:none;
	border-color:var(--blue);
	box-shadow:0 0 0 2px rgba(0,110,189,.2);
}

/* ---- WP core blocks ---- */
blockquote{
	border-left:3px solid var(--cyan);
	color:var(--navy);
	padding-left:1.25rem;
}
::marker{ color:var(--blue); }

/* ---- Site header (HFE renders header templates inside #masthead) ----
   Matches the fixed, fading-white nav bar from bluegenmarine.com so
   the Elementor-built header behaves the same as the static site.
   #masthead is HFE's own wrapper id, stable regardless of template
   post ID — more reliable than a custom Advanced-tab CSS class, which
   Elementor does not propagate onto a template's outermost container. */
.ehf-header #masthead{
	position:fixed;
	top:0; left:0; right:0;
	z-index:1030;
	background:linear-gradient(180deg, #fff 0%, #fff 30%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%);
	transition:box-shadow .35s ease;
}
/* Equalize .e-con-inner vertical padding so sticky header doesn't shift */
.ehf-header #masthead .e-con-inner{ padding-top:1.5rem; padding-bottom:3rem; transition:padding .4s ease; }
/* Sticky fill: a solid-white overlay fades in once the page is scrolled,
   turning the white→transparent gradient into a full white→white backdrop.
   Painted below the header content (negative z-index) and above the element's
   own gradient, so animating its opacity "fills" the transparent lower edge. */
.ehf-header #masthead::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:linear-gradient(180deg, #fff 0%, #fff 100%);
	opacity:0;
	transition:opacity .4s ease;
	pointer-events:none;
}
.ehf-header #masthead.bmg-scrolled::before{ opacity:1; }
.ehf-header #masthead.bmg-scrolled{ box-shadow:0 4px 20px rgba(14,56,84,.10); }
.ehf-header #masthead.bmg-scrolled .site-nav{ padding-top:1.25rem; padding-bottom:1.25rem; }
.ehf-header #masthead.bmg-scrolled .e-con-inner{ padding-top:1.25rem; padding-bottom:1.25rem; }

/* ---- Navbar notification bell (injected next to the search icon) ---- */
.bmg-bell{ position:relative; display:inline-flex; align-items:center; margin:0 .4rem; }
.bmg-bell__btn{ position:relative; display:inline-flex; align-items:center; justify-content:center;
	background:none; border:0; padding:.35rem; cursor:pointer; line-height:0; }
.bmg-bell__icon{ width:21px; height:21px; fill:#0E3854; transition:fill .2s ease; }
.bmg-bell__btn:hover .bmg-bell__icon{ fill:var(--blue); }
.bmg-bell__badge{ position:absolute; top:-2px; right:-3px; min-width:17px; height:17px; padding:0 4px;
	border-radius:999px; background:#e23b3b; color:#fff; font-size:11px; font-weight:700; line-height:17px;
	text-align:center; box-shadow:0 0 0 2px #fff; box-sizing:border-box; }
/* Mobile/tablet header icon strip: keep the hamburger, bell and search on one
   row, uniformly sized (22px icons in 40px tap targets), centred and aligned. */
@media (max-width:1024px){
	.elementor-element-f2cefcc{ flex-wrap:nowrap !important; gap:10px !important; align-items:center !important; }
	.elementor-element-cb4fb86 .bmg-bell{ margin:0; }
	/* Equal, centred tap targets */
	.elementor-element-cb4fb86 .eael-simple-menu-toggle,
	.elementor-element-6ac3504 > a,
	.elementor-element-cb4fb86 .bmg-bell__btn{
		width:40px !important; height:40px !important; padding:0 !important;
		display:inline-flex !important; align-items:center; justify-content:center; }
	/* Uniform 22px icons in brand navy */
	.elementor-element-cb4fb86 .eael-simple-menu-toggle svg,
	.elementor-element-6ac3504 svg,
	.elementor-element-cb4fb86 .bmg-bell__icon{
		width:22px !important; height:22px !important; fill:var(--navy) !important; color:var(--navy); }
	.elementor-element-cb4fb86 .bmg-bell__btn:hover .bmg-bell__icon{ fill:var(--blue) !important; }
	/* Badge nudged to the icon corner now the button is 40px */
	.elementor-element-cb4fb86 .bmg-bell__badge{ top:2px; right:2px; }
	/* Strip the plugin's hamburger background so it reads as a plain navy icon
	   like the bell and search, and zero out widget margins for exact centring. */
	.elementor-element-cb4fb86 .eael-simple-menu-toggle{ background:transparent !important;
		border:0 !important; box-shadow:none !important; }
	.elementor-element-f2cefcc > *{ margin:0 !important; }
	.elementor-element-f2cefcc > .elementor-widget,
	.elementor-element-f2cefcc > .elementor-widget > .elementor-widget-container,
	.elementor-element-f2cefcc > .bmg-bell{ display:flex !important; align-items:center; }
	.elementor-element-cb4fb86 .eael-simple-menu-toggle svg,
	.elementor-element-6ac3504 svg,
	.elementor-element-cb4fb86 .bmg-bell__icon{ display:block; vertical-align:middle; }
	/* Drop the EA menu container's white bg + cyan side borders (the stray line) */
	.elementor-element-cb4fb86 .eael-simple-menu-container{ background:transparent !important; border:0 !important; }
	/* Equal-height, centred boxes so all three icons share one baseline */
	.elementor-element-f2cefcc > .elementor-element-db2457b,
	.elementor-element-f2cefcc > .elementor-element-6ac3504,
	.elementor-element-f2cefcc > .bmg-bell,
	.elementor-element-6ac3504 .elementor-icon-wrapper,
	.elementor-element-6ac3504 .elementor-icon{
		height:40px !important; line-height:0 !important; display:flex !important;
		align-items:center !important; justify-content:center !important; padding:0 !important; margin:0 !important; }
}

/* ---- Touch-friendly mobile menu overlay (replaces EA flyout on mobile) ---- */
.bmg-mnav{ position:fixed; inset:0; z-index:100000; background:rgba(3,18,31,.55);
	opacity:0; visibility:hidden; transition:opacity .25s ease,visibility .25s; }
.bmg-mnav.is-open{ opacity:1; visibility:visible; }
html.bmg-mnav-lock, html.bmg-mnav-lock body{ overflow:hidden; }
.bmg-mnav__panel{ position:absolute; top:0; left:0; bottom:0; width:min(92vw,420px);
	background:linear-gradient(180deg, var(--navy) 0%, #072236 100%); color:#fff;
	padding:1.1rem 1.4rem 2.4rem; overflow-y:auto; -webkit-overflow-scrolling:touch;
	transform:translateX(-100%); transition:transform .3s ease; box-shadow:0 0 50px rgba(0,0,0,.5); }
.bmg-mnav.is-open .bmg-mnav__panel{ transform:translateX(0); }
.bmg-mnav__top{ display:flex; align-items:center; justify-content:space-between; padding:.4rem 0 1rem;
	border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:.4rem; }
.bmg-mnav__brand{ font-weight:700; font-size:1.1rem; letter-spacing:.02em; color:var(--cyan); }
.bmg-mnav__close{ width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center;
	border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:#fff;
	cursor:pointer; padding:0; transition:background .2s ease,border-color .2s ease; }
.bmg-mnav__close-icon{ width:24px; height:24px; display:block; }
.bmg-mnav__close:hover{ background:var(--blue); border-color:var(--blue); }
.bmg-mnav__list, .bmg-mnav__sub{ list-style:none; margin:0; padding:0; }
.bmg-mnav__item--l0{ border-top:1px solid rgba(255,255,255,.12); }
.bmg-mnav__row{ display:flex; align-items:center; gap:.6rem; }
.bmg-mnav__item--l0 > .bmg-mnav__row{ min-height:52px; }
.bmg-mnav__link{ flex:1; min-width:0; color:#fff; text-decoration:none; font-weight:600; font-size:1.2rem;
	padding:.55rem 0; line-height:1.25; }
.bmg-mnav__link:hover{ color:var(--cyan); }
.bmg-mnav__count{ color:var(--cyan); font-size:.72rem; font-weight:700; margin-left:.45rem; vertical-align:middle; }
.bmg-mnav__toggle{ flex:0 0 auto; width:38px; height:38px; display:inline-flex; align-items:center;
	justify-content:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
	border-radius:8px; color:#fff; cursor:pointer; padding:0; transition:background .2s ease; }
.bmg-mnav__toggle:hover{ background:var(--blue); border-color:var(--blue); }
.bmg-mnav__sign{ position:relative; display:block; width:16px; height:16px; color:currentColor; }
.bmg-mnav__sign::before,.bmg-mnav__sign::after{ content:""; position:absolute; top:50%; left:50%;
	background:currentColor; border-radius:2px; transform:translate(-50%,-50%); }
.bmg-mnav__sign::before{ width:16px; height:2px; }
.bmg-mnav__sign::after{ width:2px; height:16px; transition:opacity .2s ease; }
.bmg-mnav__item.is-open > .bmg-mnav__row .bmg-mnav__sign::after{ opacity:0; }
.bmg-mnav__sub{ display:none; }
.bmg-mnav__item.is-open > .bmg-mnav__sub--l1{ display:block; padding:.1rem 0 .7rem .1rem; }
.bmg-mnav__item.is-open > .bmg-mnav__sub--l2{ display:grid; grid-template-columns:1fr 1fr;
	gap:.1rem .9rem; padding:.2rem 0 .7rem .2rem; }
.bmg-mnav__item--l1{ border-top:1px solid rgba(255,255,255,.08); }
.bmg-mnav__item--l1 > .bmg-mnav__row{ min-height:44px; }
.bmg-mnav__item--l1 > .bmg-mnav__row .bmg-mnav__link{ font-size:1rem; font-weight:500; color:#cfe0ee; }
.bmg-mnav__item--l2 > .bmg-mnav__row{ min-height:38px; }
.bmg-mnav__item--l2 .bmg-mnav__link{ font-size:.85rem; font-weight:500; color:#9fb6c9; padding:.4rem 0; }
.bmg-mnav__item--l2 .bmg-mnav__link:hover{ color:var(--cyan); }
.bmg-mnav__item--l1 .bmg-mnav__toggle{ width:32px; height:32px; }
@media (min-width:1025px){ .bmg-mnav{ display:none; } }
body.ehf-header{
	scroll-padding-top:6.5rem;
}
body:not(.elementor-editor-active).ehf-header{
	padding-top:6.5rem;
}
/* Pull the page content up by the header height so it sits fully behind the
   fixed, fading header (transparent overlay) instead of starting below it.
   The body padding above reserves the space; this negative margin cancels it
   so #content's top edge meets the viewport top, under the header. */
body:not(.elementor-editor-active).ehf-header #content{
	margin-top:-6.5rem;
}
.navbar-brand img{
	max-width:165px;
	width:165px;
	height:auto;
}

/* ---- Converted vessel detail pages (Elementor container layout) ----
   The Bootstrap `.container` wrapper is replaced by an Elementor inner
   container tagged `.bmg-boxed`; reproduce the static max-width + gutters
   so the ported section CSS lines up exactly. */
.bmg-boxed{
	width:100%;
	max-width:1400px;
	margin-inline:auto;
	padding-inline:12px;
}
/* Elementor wraps HTML-widget markup in .elementor-widget-container; let the
   contact image column stretch full height like the static flex row. Scope to
   the image column only — a blanket height:100% on every contact-section HTML
   widget also hit the Corporate Office / Shipyard Facility cards, forcing each
   to its own content height and breaking their flex equal-height stretch. */
.bmg-vessel .contact-section .contact-img-col .elementor-widget-html,
.bmg-vessel .contact-section .contact-img-col .elementor-widget-container{ height:100%; }

@media screen and (max-width: 1024px) {
.ehf-header #masthead{
	padding-bottom: 0px;
}
.ehf-header #masthead .e-con-inner{ padding-top:0rem; padding-bottom: 2.5rem; }

.ehf-header #masthead.bmg-scrolled .e-con-inner{ padding-top:0rem; padding-bottom:.25rem; }

}
@media screen and (max-width: 767px) {
.ehf-header #masthead.bmg-scrolled .e-con-inner{ padding-top: .75rem; padding-bottom: .75rem; }
}

/* Search clear/reset button — plain white background with a brand-navy "X"
   that switches to brand blue on hover (HFE #clear-with-button). */
#clear-with-button{
	background:#ffffff !important;
	border:0 !important;
	border-radius:8px;
	padding:0 8px;
}
#clear-with-button i{
	color:#0E3854 !important;
	transition:color .15s ease;
}
#clear-with-button:hover i,
#clear-with-button:focus i{
	color:var(--blue) !important; /* #006ebd */
}

/* EAEL Simple Menu: the "toggle text" renders the active page's label and is
   absolutely positioned with a negative right offset, so it bleeds over the
   top-right corner on tablet/mobile. The hamburger icon is the real toggle, so
   hide the stray label. */
.eael-simple-menu-toggle-text{
	display:none !important;
}