/**
 * Mega-menu styling for the mo_filter header_menu() output, adapted to the
 * dma-nav dark header. Theme-only — no plugin changes.
 */

.dma-nav .menu-container { position: static; float: none; max-width: none; }
.dma-nav nav.menu { position: static; }

/* Top-level row */
.dma-nav .main-menu { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.dma-nav .main-menu > li { position: static; }
.dma-nav .main-menu > li > a {
	color: var(--ivory, #efe7d6);
	text-transform: uppercase; letter-spacing: .14em;
	font-size: 14px !important; font-weight: 500; text-decoration: none;
	display: block; padding: 6px 0; white-space: nowrap; cursor: pointer;
}
.dma-nav .main-menu > li > a:hover { color: var(--gold, #c8a96a); }
/* Light-header states need !important: mo_filter's `.menu>ul>li a:not(.custom)`
   { color:#fff } out-specifies any class-only selector we can write.
   Covers BOTH the scrolled solid header and pages without a dark hero
   (404, search) where the header sits on a light background. */
.dma-nav--solid .main-menu > li > a,
body:not(.has-hero) .dma-nav .main-menu > li > a {
	color: var(--txt-2, #333) !important;
}
.dma-nav--solid .main-menu > li > a:hover,
body:not(.has-hero) .dma-nav .main-menu > li > a:hover {
	color: var(--gold-deep, #846a3a) !important;
}

/* "Get Started" (#menu_tf) is li>div>a, not li>a, so the top-level item rule
   misses it. Re-apply the same style explicitly. */
.dma-nav .main-menu #menu_tf {
	display: block; cursor: pointer;
}
.dma-nav .main-menu #menu_tf a {
	color: var(--ivory, #efe7d6) !important;
	text-transform: uppercase !important; letter-spacing: .14em !important;
	font-size: 14px !important; font-weight: 500 !important;
	text-decoration: none !important; white-space: nowrap !important;
	display: block; padding: 35px 8px;
}
.dma-nav .main-menu #menu_tf a:hover { color: var(--gold, #c8a96a) !important; }
.dma-nav--solid .main-menu #menu_tf a,
body:not(.has-hero) .dma-nav .main-menu #menu_tf a { color: var(--txt-2, #333) !important; }
.dma-nav--solid .main-menu #menu_tf a:hover,
body:not(.has-hero) .dma-nav .main-menu #menu_tf a:hover { color: var(--gold-deep, #846a3a) !important; }

/* Hide the plugin's mobile checkbox-toggle controls on desktop */
.dma-nav .menu-toggle, .dma-nav .menu-mobile,
.dma-nav .submenu-toggle, .dma-nav .submenu-toggle-label { display: none !important; }

/* Full-width dark dropdown panel */
.dma-nav .main-menu > li > ul {
	display: none;
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--navy, #0E1B2A); color: #fff;
	padding: 2.25rem clamp(1rem, 5vw, 4rem);
	z-index: 300; box-shadow: 0 24px 48px rgba(0,0,0,.35);
	max-height: 88vh; overflow-y: auto; overflow-x: hidden; list-style: none; margin: 0;
}
.dma-nav .main-menu > li:hover > ul,
.dma-nav .main-menu > li:focus-within > ul,
.dma-nav .main-menu > li.dma-open > ul {
	display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem 2rem;
}
/* Invisible hover-bridge: lets the cursor travel from the nav item down into the
   panel without crossing a dead zone that would close the dropdown. */
.dma-nav .main-menu > li > ul::before {
	content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 2.75rem;
}
.dma-nav .main-menu > li > ul > li { flex: 1 1 21%; min-width: 180px; }
/* Yacht Charter: the 4 sections (each has a .card) become equal, non-wrapping columns */
.dma-nav .main-menu > li > ul > li:has(> .card) { flex: 1 1 0 !important; max-width: 25%; min-width: 0 !important; }

/* Section headings */
.dma-nav .main-menu > li > ul .h5,
.dma-nav .main-menu > li > ul .h5.text-white {
	color: var(--gold, #c8a96a) !important;
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	margin-bottom: .85rem; display: block;
}

/* Strip Bootstrap card/list backgrounds on the dark panel */
.dma-nav .main-menu .card,
.dma-nav .main-menu .list-group,
.dma-nav .main-menu .list-group-item {
	background: transparent !important; border: none !important;
	padding-left: 0; padding-right: 0;
}
.dma-nav .main-menu .card { width: 100% !important; }

/* Links + labels */
.dma-nav .main-menu a { color: rgba(239,231,214,.85); text-decoration: none; }
.dma-nav .main-menu a:hover { color: var(--gold, #c8a96a); }
.dma-nav .main-menu .h6 { color: #fff !important; font-size: 13px; font-weight: 400; margin: 0; }

/* Thumbnails (boat type / extras / locations) — keep them small + uniform */
.dma-nav .main-menu .list-group-item img {
	width: 100% !important; height: 58px !important; object-fit: cover !important;
	border-radius: 6px; margin-bottom: .3rem;
}
.dma-nav .main-menu .list-group-item { padding: .3rem 0; }

/* Hide the old "X" close pseudo-element if it bleeds in */
.dma-nav .main-menu > li > ul::after { content: none !important; }

/* ============================================================
   About Us mega-panel — wider layout + glass broker section
   ============================================================ */

/* Span the full flex row */
.dma-nav .main-menu > li > ul > li.fullwidth { flex: 1 1 100%; }

/* Strip Bootstrap's max-width + padding from container-xxl so the About
   panel uses the full dropdown width. Also remove bg-white. */
.dma-nav .main-menu .container-xxl {
	background: transparent !important;
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/* Left address column: navy, sticky so it stays visible as the broker list scrolls. */
.dma-nav .main-menu .greybg {
	background-color: var(--navy, #0E1B2A) !important;
	position: sticky;
	top: 0;
	align-self: flex-start;
}
/* Plain <p> text in dma_address() has no explicit colour — force ivory. */
.dma-nav .main-menu .greybg p,
.dma-nav .main-menu .greybg .h3 {
	color: rgba(239,231,214,.85) !important;
}

/* Right panel — flat. Scrolling is handled by the dropdown <ul> itself. */
.dma-nav .main-menu .whitebg {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* Replace Bootstrap's negative-margin gutter with flex gap — but ONLY on the
   team-member row (col-lg-12 > .row), NOT the badge row (.mo_credentials > .row). */
.dma-nav .main-menu .col-lg-12 > .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
	gap: 14px !important;
}

/* Plugin adds .overflow-hidden (Bootstrap) to the team col — that clips card
   borders and box-shadows at the edges. Force it visible so glass cards render
   fully. Add a touch of padding so shadows have room at the very edges. */
.dma-nav .main-menu .col-lg-12 {
	overflow: visible !important;
	padding: 4px 6px !important;
}

/* Back to 2-column. Width = calc(50% - half-gap) so 2 cards + 14px gap = 100%. */
.dma-nav .main-menu .team_member {
	flex: 0 0 calc(50% - 7px) !important;
	max-width: calc(50% - 7px) !important;
	width: calc(50% - 7px) !important;
	margin: 0 !important;
}

/* Plugin's mo_main-v8.css sets .team_member { background: white } —
   override with individual glass card per broker. */
.dma-nav .main-menu .team_member,
.dma-nav .main-menu .cya_table_item {
	background: rgba(255,255,255,0.09) !important;
	backdrop-filter: blur(14px) saturate(1.5);
	-webkit-backdrop-filter: blur(14px) saturate(1.5);
	border: 1px solid rgba(255,255,255,0.15) !important;
	border-radius: 14px !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.12),
		0 4px 24px rgba(0,0,0,0.22) !important;
}

/* All links inside the glass panel: ivory (background is dark navy) */
.dma-nav .main-menu .whitebg a { color: rgba(239,231,214,.88) !important; }
.dma-nav .main-menu .whitebg a:hover { color: var(--gold, #c8a96a) !important; }

/* Team member cards — inner content padding (Bootstrap gutter now zeroed above). */
.dma-nav .main-menu .team_member { padding: 14px 14px !important; }

/* 1. Kill the plugin's inline height:265px */
.dma-nav .main-menu .team_member .text-center[style*="height"] {
	height: auto !important; min-height: 0 !important;
}
/* 2. Profile photo */
.dma-nav .main-menu .team_member img.teamimg {
	width: 110px !important; height: 110px !important; max-width: 110px !important;
	object-fit: cover !important; border-radius: 50% !important;
	border: 2px solid rgba(239,231,214,0.22) !important;
	display: block !important; margin: 0 auto 10px !important;
}
/* 3. Name — serif, ivory on glass */
.dma-nav .main-menu .team_member .text .h4 {
	font-family: var(--serif) !important;
	font-size: 18px !important; font-weight: 400 !important;
	color: var(--ivory, #efe7d6) !important;
	margin: 0 0 4px !important; letter-spacing: .01em !important;
	text-transform: none !important;
}
/* 4. Role — mono small-caps, muted ivory */
.dma-nav .main-menu .team_member .text .h5 {
	font-family: var(--mono) !important;
	font-size: 9px !important; font-weight: 400 !important;
	letter-spacing: .16em !important; text-transform: uppercase !important;
	color: rgba(239,231,214,.5) !important; margin: 0 0 10px !important;
}
/* 5. Contact text + links */
.dma-nav .main-menu .team_member .text p:not(.h4):not(.h5) {
	color: rgba(239,231,214,.75) !important; font-size: 13px !important;
}
.dma-nav .main-menu .team_member .text a {
	color: rgba(239,231,214,.85) !important;
	font-size: 13px !important; padding: 2px 0 !important;
}
.dma-nav .main-menu .team_member .text a:hover { color: var(--gold, #c8a96a) !important; }
/* 6. Hide broken small icon images */
.dma-nav .main-menu .team_member .text img { display: none !important; }
/* 7. Suppress <br> separators in the contact block (plugin uses them as spacers) */
.dma-nav .main-menu .team_member br { display: none !important; }
/* 8. Tighten paragraph margins so contact lines stack compactly */
.dma-nav .main-menu .team_member .text p { margin-bottom: 2px !important; }

/* Certification badge logos are dark PNGs — invert them to white on the
   dark glass panel. Trustpilot image has coloured stars so leave it alone. */
.dma-nav .main-menu .whitebg img.foot_logo {
	filter: brightness(0) invert(1) !important;
	opacity: 0.72 !important;
}
/* Trustpilot static image: boost brightness so "Excellent" text is readable */
.dma-nav .main-menu .whitebg a[href*="trustpilot"] img {
	filter: brightness(1.35) !important;
}

/* About/Contact Page button → gold outlined pill */
.dma-nav .main-menu .btn.mo_moinfo {
	background: transparent !important;
	color: var(--gold-deep, #9A7B4D) !important;
	border: 1px solid var(--gold-deep, #9A7B4D) !important;
	border-radius: 999px !important;
	font-family: var(--mono) !important; font-size: 10px !important;
	font-weight: 600 !important; letter-spacing: .2em !important;
	text-transform: uppercase !important;
	padding: 9px 22px !important; box-shadow: none !important;
}
.dma-nav .main-menu .btn.mo_moinfo:hover {
	background: var(--gold-deep, #9A7B4D) !important; color: #fff !important;
}

@media (max-width: 991px) {
	/* On small screens the desktop bar's copy is hidden; the SAME mega-menu is
	   rendered inside the hamburger drawer (.dma-drawer__mega) instead. */
	.dma-nav .menu-container { display: none; }
}

/* ============================================================
   Mobile drawer — the production mega-menu RESTYLED to the new theme.
   Same elements as the desktop menu, in the editorial dark-drawer look.
   The cloned plugin markup is aggressively NORMALISED (every node loses its
   Bootstrap/old-theme colours, backgrounds and floats), then the theme look is
   re-applied: serif top-level rows, gold section labels, clean links, ghost
   buttons. Accordion driven by dma-nav.js. Gold resolves bright (dark surface).
   ============================================================ */
.dma-drawer__mega,
.dma-drawer__mega .menu-container,
.dma-drawer__mega nav.menu { position: static; max-width: none; float: none; display: block; background: none; }

/* Drawer fills the screen on mobile (no page peeking behind it). */
@media (max-width: 991px) {
	.dma-drawer--nav { width: min(100vw, 420px) !important; max-width: 100vw !important; }
}

/* 1) NORMALISE — strip every inherited Bootstrap/old-theme colour, bg & float */
.dma-drawer__mega .main-menu,
.dma-drawer__mega .main-menu * {
	background: transparent !important; box-shadow: none !important;
	color: rgba(244,239,230,0.78) !important; float: none !important; max-width: 100% !important;
}

/* 2) Remove non-text chrome entirely */
.dma-drawer__mega .menu-toggle,
.dma-drawer__mega .menu-mobile,
.dma-drawer__mega .submenu-toggle,
.dma-drawer__mega .submenu-toggle-label,
.dma-drawer__mega .main-menu a i,
.dma-drawer__mega .main-menu a .fa,
.dma-drawer__mega .main-menu img,
.dma-drawer__mega .main-menu .badge,
.dma-drawer__mega .main-menu hr { display: none !important; }

/* 3) Flatten layout — cards / grid / list-groups / floated columns → plain blocks */
.dma-drawer__mega .main-menu .card,
.dma-drawer__mega .main-menu .list-group,
.dma-drawer__mega .main-menu .list-group-item,
.dma-drawer__mega .main-menu .container,
.dma-drawer__mega .main-menu .container-xxl,
.dma-drawer__mega .main-menu .row,
.dma-drawer__mega .main-menu [class*="col-"],
.dma-drawer__mega .main-menu > li > ul li,
.dma-drawer__mega .main-menu > li > ul ul {
	border: 0 !important; padding: 0 !important; margin: 0 !important; clear: both !important;
	width: 100% !important; display: block !important; flex: none !important; border-radius: 0 !important;
}

/* 4) Top-level rows — serif, matching .dma-drawer__menu */
.dma-drawer__mega .main-menu { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.dma-drawer__mega .main-menu > li { border-bottom: 1px solid rgba(244,239,230,0.08); }
.dma-drawer__mega .main-menu > li:empty { display: none; }
.dma-drawer__mega .main-menu > li.dma-drawer__has-sub { display: flex !important; flex-wrap: wrap; align-items: center; }
/* Some top-level items (e.g. "Get Started") wrap their link in a <div>; style
   those the same as direct top-level links so every top item matches. */
.dma-drawer__mega .main-menu > li > div { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.dma-drawer__mega .main-menu > li > a,
.dma-drawer__mega .main-menu > li > div > a {
	flex: 1 1 auto; display: block; padding: 16px 0 !important;
	font-family: var(--serif, serif) !important; font-size: 26px !important; font-weight: 300 !important;
	line-height: 1.1; letter-spacing: -0.01em !important; color: var(--ivory, #efe7d6) !important;
	text-transform: none !important; text-decoration: none;
}
.dma-drawer__mega .main-menu > li > a:hover,
.dma-drawer__mega .main-menu > li > div > a:hover { color: var(--gold-text) !important; }
.dma-drawer__mega .dma-drawer__subtoggle {
	flex: 0 0 auto; width: 44px !important; height: 44px; display: flex; align-items: center; justify-content: center;
	color: var(--ivory, #efe7d6) !important; border: 0 !important; cursor: pointer; transition: transform 220ms ease;
}
.dma-drawer__mega .main-menu > li.is-open > .dma-drawer__subtoggle { transform: rotate(180deg); }

/* 5) Accordion panel */
.dma-drawer__mega .main-menu.js-nav > li > ul { display: none; }
.dma-drawer__mega .main-menu.js-nav > li.is-open > ul { display: block; }
.dma-drawer__mega .main-menu > li > ul { flex-basis: 100%; padding: 2px 0 22px !important; margin: 0; list-style: none; }
.dma-drawer__mega .main-menu ul { list-style: none; }
.dma-drawer__mega .main-menu > li > ul > li { margin-bottom: 4px !important; }

/* 6) Section labels (Price Level, Boat Length, Locations…) — gold mono caps */
.dma-drawer__mega .main-menu .h2,
.dma-drawer__mega .main-menu .h3,
.dma-drawer__mega .main-menu .h4,
.dma-drawer__mega .main-menu .h5 {
	display: block; color: var(--gold-text) !important;
	font-family: var(--mono, monospace) !important; font-size: 10px !important; font-weight: 500 !important;
	letter-spacing: 0.22em !important; text-transform: uppercase !important; margin: 20px 0 6px !important; padding: 0;
}
/* .h6 is used for ITEM titles (e.g. "High End Yachts"), not section labels —
   render it as a clean link, not a gold uppercase heading. */
.dma-drawer__mega .main-menu .h6 {
	display: block; color: rgba(244,239,230,0.78) !important;
	font-family: var(--sans, sans-serif) !important; font-size: 14px !important; font-weight: 400 !important;
	letter-spacing: 0.01em !important; text-transform: none !important; margin: 0 !important; padding: 0 !important;
}
/* Card titles (e.g. location names) — readable serif sub-heading (was dark-on-dark) */
.dma-drawer__mega .main-menu .card-title {
	display: block; color: var(--ivory) !important; font-family: var(--serif, serif) !important;
	font-size: 17px !important; font-weight: 400 !important; text-transform: none !important;
	letter-spacing: 0 !important; margin: 10px 0 2px !important;
}

/* 7) Links — clean muted ivory, normal case (panel links only; the serif
   top-level rows win by specificity). Overrides the plugin's gold/uppercase. */
.dma-drawer__mega .main-menu a {
	display: block; color: rgba(244,239,230,0.72) !important;
	font-family: var(--sans, sans-serif) !important; font-size: 14px !important; font-weight: 400 !important;
	letter-spacing: 0.01em !important; text-transform: none !important; line-height: 1.3;
	padding: 8px 0 !important; text-decoration: none;
	transition: color 200ms ease, padding-left 200ms ease;
}
.dma-drawer__mega .main-menu a:hover { color: var(--gold-text) !important; padding-left: 6px; }

/* 8) Buttons ("All locations", "About/Contact"…) — theme gold ghost pill (was teal) */
.dma-drawer__mega .main-menu .btn,
.dma-drawer__mega .main-menu a.btn,
.dma-drawer__mega .main-menu .btn-primary {
	display: inline-block !important; width: auto !important; margin: 12px 0 4px !important;
	padding: 10px 20px !important; border: 1px solid var(--gold-text) !important; border-radius: 999px !important;
	color: var(--gold-text) !important; background: transparent !important;
	font-family: var(--sans, sans-serif) !important; font-size: 11px !important; font-weight: 500 !important;
	letter-spacing: 0.16em !important; text-transform: uppercase !important; text-align: center !important; line-height: 1.2;
}
.dma-drawer__mega .main-menu .btn:hover,
.dma-drawer__mega .main-menu .btn-primary:hover { background: var(--gold-text) !important; color: var(--navy) !important; }

/* 9) TWO-LEVEL accordion — each labelled section collapses behind its heading,
   so an open top-section shows a short list of section names, not 100+ links.
   dma-nav.js adds .dma-sec to sections that have a heading + .sec-open on tap. */
.dma-drawer__mega .main-menu .dma-sec { border-top: 1px solid rgba(244,239,230,0.07); }
.dma-drawer__mega .main-menu .dma-sec > .h1,
.dma-drawer__mega .main-menu .dma-sec > .h2,
.dma-drawer__mega .main-menu .dma-sec > .h3,
.dma-drawer__mega .main-menu .dma-sec > .h4,
.dma-drawer__mega .main-menu .dma-sec > .h5,
.dma-drawer__mega .main-menu .dma-sec > .h6 {
	position: relative; cursor: pointer; -webkit-user-select: none; user-select: none;
	margin: 0 !important; padding: 15px 26px 15px 0 !important;
	font-size: 12px !important; color: rgba(244,239,230,0.92) !important; letter-spacing: 0.16em !important;
}
.dma-drawer__mega .main-menu .dma-sec > .h1::after,
.dma-drawer__mega .main-menu .dma-sec > .h2::after,
.dma-drawer__mega .main-menu .dma-sec > .h3::after,
.dma-drawer__mega .main-menu .dma-sec > .h4::after,
.dma-drawer__mega .main-menu .dma-sec > .h5::after,
.dma-drawer__mega .main-menu .dma-sec > .h6::after {
	content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
	font-family: var(--sans, sans-serif); font-size: 16px; font-weight: 300; color: rgba(244,239,230,0.5);
}
.dma-drawer__mega .main-menu .dma-sec.sec-open > .h1::after,
.dma-drawer__mega .main-menu .dma-sec.sec-open > .h2::after,
.dma-drawer__mega .main-menu .dma-sec.sec-open > .h3::after,
.dma-drawer__mega .main-menu .dma-sec.sec-open > .h4::after,
.dma-drawer__mega .main-menu .dma-sec.sec-open > .h5::after,
.dma-drawer__mega .main-menu .dma-sec.sec-open > .h6::after { content: "\2013"; color: var(--gold-text); }
.dma-drawer__mega .main-menu .dma-sec.sec-open > .h1,
.dma-drawer__mega .main-menu .dma-sec.sec-open > .h2,
.dma-drawer__mega .main-menu .dma-sec.sec-open > .h3,
.dma-drawer__mega .main-menu .dma-sec.sec-open > .h4,
.dma-drawer__mega .main-menu .dma-sec.sec-open > .h5,
.dma-drawer__mega .main-menu .dma-sec.sec-open > .h6 { color: var(--gold-text) !important; }
/* collapse a section's content (everything except its heading) until opened */
.dma-drawer__mega .main-menu .dma-sec > :not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6) { display: none !important; }
.dma-drawer__mega .main-menu .dma-sec.sec-open > :not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6) { display: block !important; }
.dma-drawer__mega .main-menu .dma-sec > ul { padding-bottom: 10px !important; }

/* 10) FLOW FIX — the plugin sets .main-menu { position: fixed } for its own mobile
   menu; inside our drawer that pulls the menu out of flow (mega collapses to 0,
   CTA overlaps). Force it back into normal flow and pin Inquire to the bottom. */
/* The plugin sets .main-menu { overflow: scroll } for its own mobile menu, which
   forces a permanent scrollbar corner to render as a small white square. */
.dma-drawer__mega .main-menu { position: static !important; overflow: visible !important; }
#dma-nav-drawer .dma-drawer__body { display: flex !important; flex-direction: column !important; }
#dma-nav-drawer .dma-drawer__cta { margin-top: auto !important; }