/* ====================================================================
   NAPLES — Mobile Menu Restyle
   --------------------------------------------------------------------
   Restyles the legacy etna-mobile-menu plugin chrome to match Naples
   palette + typography without touching the plugin itself. Scoped to
   body.naples-redesign so it never affects other clinic sites that
   use the same plugin.
   ==================================================================== */


/* ====================================================================
   TOOLBAR — the top fixed bar with hamburger + Contact button
   ==================================================================== */

body.naples-redesign #eiiMenuToolbar {
	background: var(--naples-primary);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	font-family: var(--naples-font-body);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.naples-redesign #eiiMenuToolbar .eiiContactButton,
body.naples-redesign .eiiContactButton {
	background: var(--naples-white);
	color: var(--naples-primary);
	font-family: var(--naples-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: none;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

body.naples-redesign #eiiMenuToolbar .eiiContactButton:hover,
body.naples-redesign #eiiMenuToolbar .eiiContactButton:focus,
body.naples-redesign .eiiContactButton:hover,
body.naples-redesign .eiiContactButton:focus {
	background: var(--naples-bg-light);
	color: var(--naples-primary);
	outline: 0;
	text-decoration: none;
}

body.naples-redesign #eiiMenuToolbar .eiiContactButton .eii-mm-button,
body.naples-redesign .eiiContactButton .eii-mm-button {
	color: var(--naples-primary);
	font-family: var(--naples-font-body);
}


/* ====================================================================
   HAMBURGER — the 3-line icon (teal in all states)
   ==================================================================== */

body.naples-redesign .hamburger .hamburger-inner,
body.naples-redesign .hamburger .hamburger-inner::before,
body.naples-redesign .hamburger .hamburger-inner::after {
	background-color: var(--naples-primary);
}

body.naples-redesign .hamburger.is-active .hamburger-inner,
body.naples-redesign .hamburger.is-active .hamburger-inner::before,
body.naples-redesign .hamburger.is-active .hamburger-inner::after {
	background-color: var(--naples-primary);
}

body.naples-redesign .hamburger:hover .hamburger-inner,
body.naples-redesign .hamburger:hover .hamburger-inner::before,
body.naples-redesign .hamburger:hover .hamburger-inner::after {
	background-color: #1d4658;
}


/* ====================================================================
   DRAWER — the slide-out menu panel
   ==================================================================== */

body.naples-redesign #eiiMenuNav {
	background: var(--naples-white);
	font-family: var(--naples-font-body);
	color: var(--naples-primary);
}

body.naples-redesign #eiiMenu,
body.naples-redesign #eiiMenu.menu {
	background: var(--naples-white);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--naples-font-body);
}


/* ====================================================================
   MENU ITEMS — top-level links
   ==================================================================== */

body.naples-redesign #eiiMenu li,
body.naples-redesign #eiiMenu li.menu-item {
	background: var(--naples-white);
	font-family: var(--naples-font-body);
	list-style: none;
	border-bottom: 1px solid var(--naples-bg-light);
	margin: 0;
	padding: 0;
}

body.naples-redesign #eiiMenu li::before,
body.naples-redesign #eiiMenu li::after {
	content: none;
	display: none;
}

body.naples-redesign #eiiMenu li a {
	display: block;
	padding: 16px 20px;
	color: var(--naples-primary);
	font-family: var(--naples-font-body);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.3px;
	line-height: 1.4;
	text-decoration: none;
	text-transform: none;
	background: transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.naples-redesign #eiiMenu li a:hover,
body.naples-redesign #eiiMenu li a:focus {
	background: var(--naples-bg-light);
	color: #1d4658;
	text-decoration: none;
	outline: 0;
}

body.naples-redesign #eiiMenu li a:visited {
	color: var(--naples-primary);
}

body.naples-redesign #eiiMenu li.current-menu-item > a,
body.naples-redesign #eiiMenu li.current_page_item > a,
body.naples-redesign #eiiMenu li.current-menu-ancestor > a {
	color: #1d4658;
	background: var(--naples-bg-light);
	font-weight: 600;
}


/* ====================================================================
   SUBMENU — accordion children
   ==================================================================== */

body.naples-redesign #eiiMenu li .sub-menu,
body.naples-redesign #eiiMenu li ul.sub-menu,
body.naples-redesign #eiiMenu li.menu-item-has-children > ul {
	background: var(--naples-bg-light);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.naples-redesign #eiiMenu li .sub-menu li,
body.naples-redesign #eiiMenu li ul.sub-menu li {
	background: var(--naples-bg-light);
	border-bottom: 1px solid rgba(37, 89, 111, 0.08);
}

body.naples-redesign #eiiMenu li .sub-menu li a,
body.naples-redesign #eiiMenu li ul.sub-menu li a {
	background: transparent;
	padding-left: 36px;
	font-size: 14px;
	font-weight: 400;
	color: var(--naples-primary);
}

body.naples-redesign #eiiMenu li .sub-menu li a:hover,
body.naples-redesign #eiiMenu li ul.sub-menu li a:hover {
	background: rgba(255, 255, 255, 0.6);
	color: #1d4658;
}

body.naples-redesign #eiiMenu li.menu-item-has-children > a::after {
	color: var(--naples-primary);
}


/* ====================================================================
   PHONE LINK & SEARCH (if present in the menu)
   ==================================================================== */

body.naples-redesign #eiiMenuContact,
body.naples-redesign #eiiMenuPhone,
body.naples-redesign #eiiMenuSearch {
	background: var(--naples-bg-light);
	font-family: var(--naples-font-body);
}

body.naples-redesign #eiiMenuContact a,
body.naples-redesign #eiiMenuPhone a,
body.naples-redesign #eiiMenuSearch input {
	color: var(--naples-primary);
	font-family: var(--naples-font-body);
}


/* ====================================================================
   GLOBAL FAMILY OVERRIDE — catch-all for missed elements
   ==================================================================== */

body.naples-redesign #eiiMenuToolbar *,
body.naples-redesign #eiiMenuNav *,
body.naples-redesign #eiiMenu * {
	font-family: var(--naples-font-body);
}


/* ====================================================================
   DEFENSIVE OVERRIDES
   --------------------------------------------------------------------
   When the drawer opens, plugin may toggle classes that flip the
   Contact button colors. Lock it in all states.
   ==================================================================== */

body.naples-redesign .eiiContactButton,
body.naples-redesign .eiiContactButton.is-active,
body.naples-redesign .eiiContactButton.open,
body.naples-redesign #eiiMenuToolbar.is-open .eiiContactButton,
body.naples-redesign #eiiMenuToolbar.menu-open .eiiContactButton,
body.naples-redesign #eiiMenuToolbar.eii-mm-open .eiiContactButton {
	background: var(--naples-white);
	color: var(--naples-primary);
}

body.naples-redesign .eiiContactButton .eii-mm-button,
body.naples-redesign .eiiContactButton.is-active .eii-mm-button,
body.naples-redesign .eiiContactButton.open .eii-mm-button,
body.naples-redesign #eiiMenuToolbar.is-open .eiiContactButton .eii-mm-button,
body.naples-redesign #eiiMenuToolbar.menu-open .eiiContactButton .eii-mm-button,
body.naples-redesign #eiiMenuToolbar.eii-mm-open .eiiContactButton .eii-mm-button {
	color: var(--naples-primary);
}


/* ====================================================================
   MENU ITEMS — high-specificity override
   --------------------------------------------------------------------
   Legacy theme uses selectors like `body.eii-gallery #eiiMenu li a`
   (3 classes/ids). Mine was 2 (body + #eiiMenu li a). Add body class
   prefix to win the cascade without !important.
   ==================================================================== */

html body.naples-redesign #eiiMenuNav,
html body.naples-redesign #eiiMenu,
html body.naples-redesign #eiiMenu li,
html body.naples-redesign #eiiMenu li a,
html body.naples-redesign #eiiMenu .menu li a {
	font-family: var(--naples-font-body);
}

html body.naples-redesign #eiiMenu li a,
html body.naples-redesign #eiiMenu .menu li a,
html body.naples-redesign #eiiMenuNav #eiiMenu li a {
	color: var(--naples-primary);
	font-family: var(--naples-font-body);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.3px;
	line-height: 1.4;
	text-transform: none;
	text-decoration: none;
	padding: 16px 20px;
	background: transparent;
}

html body.naples-redesign #eiiMenu li a:hover,
html body.naples-redesign #eiiMenu li a:focus,
html body.naples-redesign #eiiMenu .menu li a:hover {
	color: #1d4658;
	background: var(--naples-bg-light);
}

html body.naples-redesign #eiiMenu li a:visited {
	color: var(--naples-primary);
}

/* Submenu */
html body.naples-redesign #eiiMenu li .sub-menu li a,
html body.naples-redesign #eiiMenu li ul.sub-menu li a,
html body.naples-redesign #eiiMenuNav #eiiMenu li .sub-menu li a {
	color: var(--naples-primary);
	font-family: var(--naples-font-body);
	font-size: 14px;
	font-weight: 400;
	padding-left: 36px;
}

/* All text descendants — last resort family inheritance */
html body.naples-redesign #eiiMenuToolbar,
html body.naples-redesign #eiiMenuToolbar *,
html body.naples-redesign #eiiMenuNav,
html body.naples-redesign #eiiMenuNav * {
	font-family: var(--naples-font-body);
}