/**
 * 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; }
/* 9. Structured contact (show_team parses the blob into email + chips) —
   pill row like the About-page broker cards, in dark-panel colours.
   !important + a.class specificity beat mo_filter's block-anchor rule
   (.menu > ul > li > ul > li a:not(.custom) { display:block; width:95% }). */
.dma-nav .main-menu .team_member .text a.team_contact_email {
	display: inline-block !important; width: auto !important;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	vertical-align: bottom;
}
.dma-nav .main-menu .team_member .text p.team_contact_chips {
	display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
	margin: 8px 0 0 !important;
}
.dma-nav .main-menu .team_member .text a.team_chip {
	display: inline-block !important; width: auto !important;
	font-family: var(--mono) !important; font-size: 10px !important;
	font-weight: 600 !important; letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: rgba(239,231,214,.85) !important;
	border: 1px solid rgba(239,231,214,.28) !important;
	border-radius: 999px !important; padding: 5px 12px !important;
	text-decoration: none !important;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.dma-nav .main-menu .team_member .text a.team_chip:hover {
	color: var(--gold, #c8a96a) !important;
	border-color: var(--gold, #c8a96a) !important;
	background: rgba(200,169,106,.08) !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.
   It ALSO caps .main-menu at max-height:92vh (≤1199px block) — inside the drawer
   that cap makes expanded accordion content spill past the box with overflow
   visible, so the pinned "Start now" CTA (laid out right after the box) renders
   ON TOP of the spilled menu items. Release the cap so the drawer body scrolls
   the full content and the CTA sits after the true end of the list. */
.dma-drawer__mega .main-menu { position: static !important; overflow: visible !important; max-height: none !important; }
#dma-nav-drawer .dma-drawer__body { display: flex !important; flex-direction: column !important; }
#dma-nav-drawer .dma-drawer__cta { margin-top: auto !important; }

/* ============================================================
   Destinations tab (theme-rendered — inc/nav-destinations.php).
   Only present on sites where mo_filter has no charter-area posts
   and therefore renders no "Location Info" tab (dmayachting).
   ============================================================ */
.dma-nav .main-menu .dma-dest-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
	margin-top: .25rem;
}
@media (max-width: 1399px) {
	.dma-nav .main-menu .dma-dest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* width:95% comes from the plugin's `.menu > ul > li > ul > li a:not(.custom)` */
.dma-nav .main-menu a.dma-dest-item {
	display: block !important; width: 100% !important;
	color: rgba(239,231,214,.85);
}
.dma-nav .main-menu .dma-dest-item__img {
	width: 100% !important; height: 104px !important; object-fit: cover !important;
	border-radius: 8px; margin-bottom: .5rem; display: block;
	transition: transform .35s ease, filter .35s ease;
}
.dma-nav .main-menu a.dma-dest-item:hover .dma-dest-item__img {
	transform: scale(1.03); filter: brightness(1.08);
}
.dma-nav .main-menu .dma-dest-item__label {
	display: block;
	font-family: var(--serif, serif); font-size: 17px; font-weight: 400;
	color: var(--ivory, #efe7d6); letter-spacing: .01em; line-height: 1.25;
}
.dma-nav .main-menu a.dma-dest-item:hover .dma-dest-item__label { color: var(--gold, #c8a96a); }

/* Mobile drawer clone: images are stripped there, so the grid becomes a
   plain link list like every other cloned panel. */
.dma-drawer__mega .main-menu .dma-dest-grid { display: block !important; }
.dma-drawer__mega .main-menu a.dma-dest-item { display: block !important; padding: 8px 0 !important; }
.dma-drawer__mega .main-menu .dma-dest-item__label {
	display: inline !important; font-family: var(--sans, sans-serif) !important;
	font-size: 14px !important; color: inherit !important;
}

/* ============================================================
   Extra tabs + About-panel links (menu-driven — inc/nav-extra-tabs.php).
   Rendered only on sites with the dma_header_extra / dma_about_extra
   menu locations assigned (dmayachting).
   ============================================================ */
/* Compact dropdown, anchored to its own tab (not the fullwidth panel). */
.dma-nav .main-menu > li.dma-extra-tab { position: relative !important; }
.dma-nav .main-menu > li.dma-extra-tab > ul {
	position: absolute !important; left: 0 !important; right: auto !important; top: 100% !important;
	width: max-content !important; min-width: 250px !important; max-width: 360px !important;
	display: none; background: var(--navy, #0E1B2A);
	padding: 1rem 1.3rem !important; margin: 0 !important;
	border-radius: 0 0 12px 12px; box-shadow: 0 24px 48px rgba(0,0,0,.35);
	z-index: 300; list-style: none;
	overflow: visible !important; max-height: none !important; height: auto !important;
}
.dma-nav .main-menu > li.dma-extra-tab:hover > ul,
.dma-nav .main-menu > li.dma-extra-tab:focus-within > ul,
.dma-nav .main-menu > li.dma-extra-tab.dma-open > ul { display: block !important; }
.dma-nav .main-menu > li.dma-extra-tab > ul > li {
	width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important;
}
.dma-nav .main-menu > li.dma-extra-tab > ul a {
	display: block !important; width: 100% !important;
	padding: 8px 0 !important; font-size: 14px !important;
	color: rgba(239,231,214,.85) !important; white-space: nowrap;
}
.dma-nav .main-menu > li.dma-extra-tab > ul a:hover { color: var(--gold, #c8a96a) !important; }

/* About panel chip row — company links under the About/Contact button. */
.dma-nav .main-menu .dma-about-extra {
	display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
	margin: 2px 0 12px !important;
}
.dma-nav .main-menu .dma-about-extra a {
	display: inline-block !important; width: auto !important;
	font-family: var(--mono, monospace) !important; font-size: 10px !important;
	font-weight: 600 !important; letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: rgba(239,231,214,.75) !important;
	border: 1px solid rgba(239,231,214,.24) !important;
	border-radius: 999px !important; padding: 5px 12px !important;
	text-decoration: none !important;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.dma-nav .main-menu .dma-about-extra a:hover {
	color: var(--gold, #c8a96a) !important;
	border-color: var(--gold, #c8a96a) !important;
	background: rgba(200,169,106,.08) !important;
}

/* Drawer clone: chips flatten to the standard link list like everything else. */
.dma-drawer__mega .main-menu .dma-about-extra { display: block !important; }

/* With extra tabs the bar carries 6+ items — compress below ~1550px so the
   logo never flex-collapses. Scoped via :has() to sites that HAVE extra tabs;
   sites without them (corsica et al) keep the default spacing.

   Shrink the logo via HEIGHT, never max-width: .dma-nav__logo-img sets an
   explicit height:46px, so clamping max-width squeezes the width while the
   height stays put — the brand mark renders horizontally squashed (the 494x82
   PNG was landing at 170x46, i.e. 61% of its correct width). With width:auto
   the height drives both axes and the aspect ratio is preserved. Heights are
   picked to land on the same footprint the old max-width values targeted
   (35px -> 211px, 28px -> 169px), so the crowding fix is unchanged.

   These bands are also floored at 992px: below that the desktop bar's copy is
   hidden and the mega-menu moves into the hamburger drawer (see the
   max-width:991px rule above), so there is nothing to compress — but an
   unbounded max-width kept cascading down and squashed the logo on phones. */
@media (min-width: 992px) and (max-width: 1550px) {
	.dma-nav:has(.dma-extra-tab) .main-menu { gap: 1rem !important; }
	.dma-nav:has(.dma-extra-tab) .main-menu > li > a,
	.dma-nav:has(.dma-extra-tab) .main-menu #menu_tf a { font-size: 12.5px !important; letter-spacing: .08em !important; }
	.dma-nav:has(.dma-extra-tab) .dma-nav__logo { flex-shrink: 0; }
	.dma-nav:has(.dma-extra-tab) .dma-nav__logo-img { height: 35px !important; }
}
@media (min-width: 992px) and (max-width: 1380px) {
	.dma-nav:has(.dma-extra-tab) .main-menu { gap: .65rem !important; }
	.dma-nav:has(.dma-extra-tab) .main-menu > li > a,
	.dma-nav:has(.dma-extra-tab) .main-menu #menu_tf a { font-size: 11.5px !important; letter-spacing: .05em !important; }
	.dma-nav:has(.dma-extra-tab) .main-menu > li > a > i { display: none !important; }
	.dma-nav:has(.dma-extra-tab) .dma-nav__logo-img { height: 28px !important; }
}
/* Phones: the full-height 46px mark is 277px wide and pushes the hamburger off
   a 320px screen, so step it down — proportionally, via height. */
@media (max-width: 991px) {
	.dma-nav:has(.dma-extra-tab) .dma-nav__logo-img { height: 34px !important; }
}
/* ============================================================
   Location Info v2 (.dma-li) — shallow, intent-grouped panel.
   Columns: Featured (2 thumb cards) / per-category text links /
   Planning & Guides text links / Locations (area + island rows).
   Rendered by get_areas_menu_modified() in mo_filter. Everything
   below reuses the panel's established vocabulary: gold mono-caps
   section headings, muted-ivory links, gold ghost pills.
   ============================================================ */

/* The plugin hardcodes dropdown panels to width:900px (mo_main-v8:
   `.has-submenu > ul { width:900px; margin:0 auto }`), which leaves the
   4 columns ~180px wide — too narrow for preview rows. The theme's base
   rule already sets left:0/right:0; releasing width lets THIS panel span
   the full .dma-nav width like the draft. Scoped to the Location Info tab
   so the other panels keep their current geometry. */
.dma-nav .main-menu > li.dma-li-tab > ul { width: auto !important; }

/* Whole panel runs in Montserrat — the same family the other panels' items
   use (mo_filter forces its .h6 item titles to Montserrat), so Location
   Info text matches "Price Level" columns exactly. Inherits to rows,
   view-all links, featured titles and the footer note. */
.dma-nav .main-menu .dma-li {
	font-family: var(--display, "Montserrat", "Helvetica Neue", Arial, sans-serif);
	font-weight: 400; /* body is weight 200; the other panels' items are 400 */
}

/* Column headings — identical to the Yacht Charter panel's "Price Level"
   headings (.h5): Montserrat 12px/400, .12em tracking, gold caps.
   font-family needs !important: critical-css.php inlines
   `html .h3{font-family:var(--serif)!important}` (its own counter-rule
   against mo_filter's h1-h6 Montserrat nuke) which otherwise wins. */
.dma-nav .main-menu .dma-li .h3,
.dma-nav .main-menu .dma-li .h3.text-white {
	color: var(--gold, #c8a96a) !important;
	font-family: var(--display, "Montserrat", "Helvetica Neue", Arial, sans-serif) !important;
	font-size: 12px !important; font-weight: 400 !important;
	letter-spacing: .12em !important; text-transform: uppercase;
	line-height: 1.4 !important;
	margin-bottom: .85rem; display: block;
}

/* Article preview rows — the draft's Locations-row pattern, used for every
   article link so each carries its preview photo. */
.dma-nav .main-menu .dma-li__row {
	display: flex; align-items: center; gap: 12px;
	padding: 6px 8px; margin: 0 -8px; border-radius: 6px;
	color: #fff; /* article titles pure white, same as the other panels' .h6 items */
}
.dma-nav .main-menu .dma-li__row img {
	width: 64px !important; height: auto !important; aspect-ratio: 300 / 120;
	object-fit: cover !important; border-radius: 4px; flex: none; margin: 0;
}
.dma-nav .main-menu .dma-li__row span { font-size: 13px; line-height: 1.45; }
.dma-nav .main-menu .dma-li__row:hover,
.dma-nav .main-menu .dma-li__row:focus-visible {
	background: rgba(184,151,102,.14); color: #fff;
}

/* "All … →" links — gold, standalone under each column */
.dma-nav .main-menu a.dma-li__more {
	display: block; color: var(--gold, #c8a96a); font-size: 13px;
	padding: 8px 8px 6px; margin: 4px -8px 0; border-radius: 6px;
}
.dma-nav .main-menu a.dma-li__more:hover { background: rgba(184,151,102,.14); color: var(--gold, #c8a96a); }

/* Featured cards — the only image-led article slots in the panel */
.dma-nav .main-menu .dma-li__feat {
	display: block; overflow: hidden; border-radius: 6px;
	background: var(--navy-2, #142333);
	border: 1px solid rgba(239,231,214,.08);
	margin-bottom: 14px;
}
.dma-nav .main-menu .dma-li__feat img {
	width: 100%; height: auto; aspect-ratio: 476 / 190; object-fit: cover; display: block;
	border-radius: 0; margin: 0;
}
.dma-nav .main-menu .dma-li__feat-body { display: block; padding: 10px 12px 12px; }
.dma-nav .main-menu .dma-li__feat-tag {
	display: block;
	font-family: var(--display, "Montserrat", "Helvetica Neue", Arial, sans-serif);
	font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
	color: var(--cta, #0FC2B2);
}
.dma-nav .main-menu .dma-li__feat-title {
	display: block; font-size: 13px; line-height: 1.4;
	color: #fff; margin-top: 4px;
}
.dma-nav .main-menu .dma-li__feat:hover .dma-li__feat-title { color: #fff; }

/* Locations — area page link as group heading, islands as small thumb-rows */
.dma-nav .main-menu .dma-li__area {
	display: block; font-size: 13.5px; font-weight: 500;
	color: #fff; padding: 6px 8px; margin: 6px -8px 0; border-radius: 6px;
}
.dma-nav .main-menu .dma-li__area:hover { background: rgba(184,151,102,.14); color: var(--gold, #c8a96a); }

/* Footer bar — "browse everything" exit (renders only when a hub is configured).
   The pill itself reuses the .btn.mo_moinfo gold ghost style defined above. */
.dma-nav .main-menu .dma-li__foot {
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
	margin-top: 1.5rem; padding-top: 1rem;
	border-top: 1px solid rgba(239,231,214,.12);
}
.dma-nav .main-menu .dma-li__foot .btn.mo_moinfo { margin: 0 !important; }
.dma-nav .main-menu .dma-li__foot-note { font-size: 12.5px; color: rgba(239,231,214,.5); }

/* Drawer: the clone flattens columns into .dma-sec accordions (Featured /
   Itineraries / Planning & Guides / Locations) via dma-nav.js — only the bits
   that don't degrade cleanly to text need adjusting. */
.dma-drawer__mega .dma-li__feat-tag { display: none !important; }
.dma-drawer__mega .dma-li__foot { border-top: 1px solid rgba(244,239,230,0.08) !important; padding-top: 12px !important; margin-top: 8px !important; }