/**
 * 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. */
.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; }

/* ============================================================
   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; }
}