/* House Nest phone menu (Newspaper theme's mobile menu, every page).
   Order: menu list, then social icons, then newsletter. Brand: black, white, mint #00ff9a, Montserrat. */

/* Solid white panel, so the page behind doesn't show through */
html body #td-mobile-nav { background: #ffffff; }
html body #td-mobile-nav .td-mobile-container {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: 64px; /* room for the close button, which stays top-right */
	padding-bottom: 32px;
}
html body #td-mobile-nav .td-mobile-content { order: 1; }
html body #td-mobile-nav .td-menu-socials-wrap { order: 2; position: static; }
html body #td-mobile-nav .hnh-mm-news { order: 3; }

/* Close button pinned top-right */
html body #td-mobile-nav .td-mobile-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
}

/* Menu items: centred and extra bold */
html body #td-mobile-nav .td-mobile-main-menu > li > a,
html body #td-mobile-nav .td-mobile-main-menu .sub-menu a {
	display: block;
	padding: 12px 20px !important;
	text-align: center !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 900 !important;
	letter-spacing: .02em;
	color: #000000 !important;
}
/* Hover / tap: mint underline, the text stays black (also for the current page) */
html body #td-mobile-nav .td-mobile-main-menu > li:not(.hn-menu-cta) > a:is(:hover, :active, :focus),
html body #td-mobile-nav .td-mobile-main-menu > li.current-menu-item:not(.hn-menu-cta) > a {
	color: #000000 !important;
}
html body #td-mobile-nav .td-mobile-main-menu > li:not(.hn-menu-cta) > a:is(:hover, :active, :focus-visible) {
	text-decoration: underline !important;
	text-decoration-color: #00ff9a !important;
	text-decoration-thickness: 3px !important;
	text-underline-offset: 6px !important;
}
html body #td-mobile-nav .td-mobile-main-menu > li > a .td-icon-menu-right { display: none; }
/* The mint menu button (class hn-menu-cta) as a pill in the phone menu too */
html body #td-mobile-nav .td-mobile-main-menu > li.hn-menu-cta > a {
	display: inline-block;
	margin: 10px auto 0;
	padding: 12px 24px !important;
	background: #00ff9a;
	border-radius: 999px;
	color: #000000 !important;
}
html body #td-mobile-nav .td-mobile-main-menu > li.hn-menu-cta { text-align: center; }

/* Social icons below the menu, using House Nest's own icons */
html body #td-mobile-nav .td-menu-socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 22px 0 0;
	padding: 0 20px;
	float: none;
	width: auto;
}
html body #td-mobile-nav .td-menu-socials .td-social-icon-wrap { margin: 0; }
html body #td-mobile-nav .td-menu-socials a {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: center / cover no-repeat;
	transition: transform .15s ease;
}
html body #td-mobile-nav .td-menu-socials a:hover { transform: translateY(-2px); }
html body #td-mobile-nav .td-menu-socials a i { display: none !important; } /* hide the theme's icon font */
html body #td-mobile-nav .td-menu-socials a[href*="facebook.com"]   { background-image: url("https://housenest.net/wp-content/uploads/2026/04/favicon_www_facebook_com_64x64.png"); }
html body #td-mobile-nav .td-menu-socials a[href*="instagram.com"]  { background-image: url("https://housenest.net/wp-content/uploads/2026/04/favicon_www_instagram_com_64x64.png"); }
html body #td-mobile-nav .td-menu-socials a[href*="soundcloud.com"] { background-image: url("https://housenest.net/wp-content/uploads/2026/04/favicon_soundcloud_com_64x64.jpg"); }
html body #td-mobile-nav .td-menu-socials a[href*="spotify.com"]    { background-image: url("https://housenest.net/wp-content/uploads/2026/04/favicon_open_spotify_com_64x64.png"); }
html body #td-mobile-nav .td-menu-socials a[href*="twitter.com"],
html body #td-mobile-nav .td-menu-socials a[href*="x.com"]          { background-image: url("https://housenest.net/wp-content/uploads/2026/04/favicon_x_com_64x64.png"); }
html body #td-mobile-nav .td-menu-socials a[href*="youtube.com"]    { background-image: url("https://housenest.net/wp-content/uploads/2026/04/favicon_youtube_com_64x64.png"); }
html body #td-mobile-nav .td-menu-socials a[href*="threads."]       { background-image: url("https://housenest.net/wp-content/uploads/2026/04/favicon_www_threads_com_64x64.png"); }

/* Newsletter below the icons: the same form and look as the article newsletter */
html body #td-mobile-nav .hnh-mm-news {
	margin: 30px 20px 0;
	padding: 0;
	background: transparent;
	color: #000000;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
}
html body #td-mobile-nav .hnh-mm-news .hnh-mm-title { margin: 0 0 6px; font-size: 28px; font-weight: 900; line-height: 1.15; color: #000000; }
html body #td-mobile-nav .hnh-mm-news .hnh-mm-text { margin: 0 0 16px; font-size: 17px; font-weight: 500; line-height: 1.3; color: #000000; }
html body #td-mobile-nav .hnh-mm-news input[type="email"] {
	display: block;
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 2px solid #000000;
	border-radius: 0;
	background: #ffffff;
	color: #000000;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 700;
	box-sizing: border-box;
}
html body #td-mobile-nav .hnh-mm-news input[type="email"]::placeholder { color: #000000; opacity: 1; }
html body #td-mobile-nav .hnh-mm-news button {
	display: block;
	width: 100%;
	height: 48px;
	margin-top: 14px;
	border: 0;
	border-radius: 0;
	background: #00ff9a;
	color: #000000;
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	font-weight: 700;
	text-transform: none; /* "Sign Up", like the article newsletter */
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
html body #td-mobile-nav .hnh-mm-news button:is(:hover, :active, :focus-visible) { background: #000000; color: #00ff9a; }
html body #td-mobile-nav .hnh-mm-news .hnh-mm-disclaimer { margin: 14px 0 8px; font-size: 13px; font-weight: 700; color: #000000; }
html body #td-mobile-nav .hnh-mm-news .hnh-mm-consent {
	position: static !important; /* the theme pins every label in this menu to the top-left */
	top: auto !important;
	left: auto !important;
	opacity: 1 !important;
	pointer-events: auto !important; /* the theme makes labels in this menu ignore taps */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: #000000;
	cursor: pointer;
}
html body #td-mobile-nav .hnh-mm-news .hnh-mm-consent input { width: 16px; height: 16px; margin: 0; accent-color: #000000; pointer-events: auto !important; cursor: pointer; }