/*
Theme Name: SensorMan
Theme URI:
Author: OSIO Design Team
Author URI:
Description: A child theme for OpenSensors
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: sensorman
Tags:
*/

/* ==========================================================================
   Products mobile overlay fallback
   The Products submenu's rich desktop layout (icons, descriptions, MMT
   panel) lives in a Custom HTML block, so below the 600px breakpoint —
   where the mega-menu CSS doesn't apply — it would otherwise render as
   unstyled, run-together text. Each link already carries WordPress's own
   ".wp-block-navigation-item__content" class (same as Resources/Company's
   native nav-link items), so this just hides the desktop-only extras and
   lets the default overlay component styling take over, matching every
   other submenu.
   ========================================================================== */
@media (max-width: 599.98px) {
	.mmt-mega,
	.mmt-mega__list {
		display: flex;
		flex-direction: column;
		gap: var(--wp--style--block-gap, 2em);
	}

	.mmt-mega__desc,
	.mmt-mega__panel-desc,
	.mmt-mega__panel-cta {
		display: none;
	}

	.mmt-mega__text {
		display: block;
	}
}

/* ==========================================================================
   Mega-menu dropdowns: Products, Resources, Company
   Desktop only (matches core's own 600px nav breakpoint) — below that the
   Navigation block's default overlay menu is left completely untouched.
   ========================================================================== */
@media (min-width: 600px) {

	/* Shared dropdown chrome — same box treatment and hover state everywhere */
	.wp-block-navigation ul.nav-mega.wp-block-navigation__submenu-container {
		display: grid;
		width: max-content;
		padding: 6px;
		border: 2px solid var(--wp--preset--color--contrast, #2f2d34);
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
	}

	.wp-block-navigation ul.nav-mega .wp-block-navigation-item__content {
		border-radius: 0;
		transition: background-color .15s ease;
	}

	.wp-block-navigation ul.nav-mega .wp-block-navigation-item__content:hover,
	.wp-block-navigation ul.nav-mega .wp-block-navigation-item__content:focus {
		background: var(--wp--preset--color--accent-5, #f4f6f7);
	}

	/* Products: icon + description list with an MMT Framework highlight panel,
	   flush under the toggle. The nav wrapper carries "items-justified-right",
	   which core forces every dropdown to the right edge via a 5-class-
	   specificity rule — match that specificity here rather than fighting it
	   with !important. */
	.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child.nav-mega-products .wp-block-navigation__submenu-container,
	.wp-block-navigation ul.nav-mega-products.wp-block-navigation__submenu-container {
		display: block;
		gap: 0;
		padding: 0;
		border: 2px solid var(--wp--preset--color--contrast, #2f2d34);
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
		overflow: hidden;
		left: 0;
		right: auto;
	}

	.wp-block-navigation ul.nav-mega-products .wp-block-navigation-item {
		display: block;
	}

	.mmt-mega {
		display: flex;
		align-items: stretch;
	}

	.mmt-mega__list {
		display: flex;
		flex-direction: column;
		width: 310px;
		padding: 6px;
		background: #fff;
	}

	.wp-block-navigation .mmt-mega__item {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 12px 16px;
		border-radius: 0;
		text-decoration: none;
		color: #202020;
		transition: background-color .15s ease;
	}

	.mmt-mega__item:hover,
	.mmt-mega__item:focus {
		background: var(--wp--preset--color--accent-5, #f4f6f7);
	}

	.mmt-mega__text {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.mmt-mega__title {
		font-weight: 700;
		font-size: 15px;
		color: #202020;
	}

	.mmt-mega__desc {
		font-size: 13px;
		color: #788f9b;
	}

	.wp-block-navigation .mmt-mega__panel {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 240px;
		padding: 24px;
		background: var(--wp--preset--color--accent-1, #eecc37);
		color: #202020;
		text-decoration: none;
		border-left: 2px solid var(--wp--preset--color--contrast, #2f2d34);
	}

	.mmt-mega__panel-title {
		display: block;
		font-weight: 700;
		font-size: 15px;
	}

	.mmt-mega__panel-desc {
		display: block;
		font-size: 13px;
		line-height: 1.4;
	}

	.mmt-mega__panel-cta {
		display: block;
		font-weight: 700;
		font-size: 15px;
		text-decoration: none;
	}

	.mmt-mega__panel:hover .mmt-mega__panel-cta,
	.mmt-mega__panel:focus .mmt-mega__panel-cta {
		text-decoration: underline;
	}

	/* Resources: 2-column link grid, right-aligned under the toggle */
	.wp-block-navigation ul.nav-mega-resources.wp-block-navigation__submenu-container {
		grid-template-columns: repeat(2, minmax(220px, 1fr));
		gap: 0 6px;
		min-width: 480px;
		left: auto;
		right: 0;
	}

	.wp-block-navigation ul.nav-mega-resources .wp-block-navigation-item__content {
		font-weight: 700;
		font-size: 15px;
		color: #202020;
		white-space: nowrap;
	}

	/* Company: single-column link list, right-aligned under the toggle */
	.wp-block-navigation ul.nav-mega-company.wp-block-navigation__submenu-container {
		grid-template-columns: minmax(200px, 1fr);
		min-width: 220px;
		left: auto;
		right: 0;
	}

	.wp-block-navigation ul.nav-mega-company .wp-block-navigation-item__content {
		font-weight: 700;
		font-size: 15px;
		color: #202020;
		white-space: nowrap;
	}

}

/* ==========================================================================
   Dropdown-style menu item utility class
   Add "nav-dropdown-item" to a navigation-link block's Advanced ->
   Additional CSS Class(es) field (per item, not on the wp:navigation block
   itself) to give it the same look as the header mega-menu items: bold
   label, full-width tap target, sharp corners, hover shading + underline,
   and a muted color when it's the current page (no hover state then).
   ========================================================================== */
.wp-block-navigation-item.nav-dropdown-item {
	width: 100%;
}

.wp-block-navigation-item.nav-dropdown-item > .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	border-radius: 0;
	font-weight: 700;
	font-size: 15px;
	color: #202020;
	padding: 12px 16px;
	white-space: nowrap;
	transition: background-color .15s ease;
}

.wp-block-navigation-item.nav-dropdown-item:not(.current-menu-item) > .wp-block-navigation-item__content:hover,
.wp-block-navigation-item.nav-dropdown-item:not(.current-menu-item) > .wp-block-navigation-item__content:focus {
	background: var(--wp--preset--color--accent-5, #f4f6f7);
}

.wp-block-navigation-item.nav-dropdown-item:not(.current-menu-item) > .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.wp-block-navigation-item.nav-dropdown-item:not(.current-menu-item) > .wp-block-navigation-item__content:focus .wp-block-navigation-item__label {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-1, #eecc37);
}

.wp-block-navigation-item.nav-dropdown-item.current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	color: var(--wp--preset--color--accent-4, #788f9b);
}