/**
 * Header_Styles — Mobile_Header presentation for the iForest Global_Header.
 *
 * Spec: responsive-mobile-header (design.md sections 8/9 "Header_Script" /
 * "Header_Styles" and "Key Design Decisions").
 *
 * Responsibilities (Req 1.1, 1.2, 1.3, 2.4, 2.5, 3.1, 3.2, 3.3, 8.2, 8.4, 8.5):
 *   - Present the Mobile_Header (hamburger + collapsible Nav_Panel + per-item
 *     submenu toggles) at viewport widths <= 1024px (the Tablet_Breakpoint upper
 *     bound), mirroring IForest_Header_Layout::MOBILE_MAX.
 *   - Preserve the Desktop_Header untouched at >= 1025px (the Desktop_Breakpoint
 *     lower bound). The only desktop-scoped rule here hides the mobile-only
 *     submenu toggle buttons so the existing `nav ul li:hover > ul` hover
 *     behaviour in navbar.css keeps driving desktop submenus (Req 8.2).
 *
 * ----------------------------------------------------------------------------
 * SHARED CLASS / STATE CONTRACT  (dependent tasks MUST mirror these names)
 * ----------------------------------------------------------------------------
 * Progressive enhancement is gated by a single class added to the header root
 * by the Header_Script (task 6.1, assets/js/header-mobile.js) on init. Without
 * the script, the navigation renders fully expanded and reachable (Req 9.x);
 * with the script, the collapsed/hamburger presentation below activates.
 *
 *   ENHANCEMENT CLASS .......... `iforest-enhanced`     (added to <header> root)
 *   Hamburger_Toggle ........... `.iforest-hamburger`   (<button>, aria-expanded
 *                                 reflects panel open state: "true"/"false")
 *   Nav_Panel .................. `#iforest-nav-panel` / `.iforest-nav-panel`
 *   Nav_Panel OPEN state ....... `.iforest-nav-panel.is-open`
 *   Submenu_Toggle ............. `.iforest-submenu-toggle` (<button>, aria-expanded
 *                                 reflects submenu open state; the controlled
 *                                 submenu <ul> is the toggle's immediate sibling)
 *   Account_Area (desktop copy)  `.iforest-account-area--desktop`
 *   Account_Area (mobile copy) . `.iforest-account-area--mobile`  (inside panel)
 *
 * Notes:
 *   - The Account_Area copy swap is purely breakpoint-driven (not enhancement
 *     gated) so the mobile copy is reachable even without JavaScript (Req 9.1).
 *   - Submenu visibility is driven by `aria-expanded` on the toggle so the CSS
 *     and the accessibility state can never drift (Req 7.3).
 *   - `!important` is used selectively to override the equally-important hover
 *     rules in navbar.css (e.g. `nav ul li:hover > ul { display: block !important }`).
 * ----------------------------------------------------------------------------
 */

/* ============================================================================
 * MOBILE_HEADER  —  viewport width <= 1024px (Mobile_Breakpoint + Tablet_Breakpoint)
 * Req 1.1, 1.2, 8.4, 8.5
 * ========================================================================== */
@media (max-width: 1024px) {

	/* ---- Account_Area copy swap (breakpoint-driven, not enhancement gated) ----
	 * Show the mobile copy (rendered inside the Nav_Panel), hide the desktop
	 * copy that lives in `.logo-menu-right`. Req 3.2, 5.x placement. */
	.iforest-account-area--desktop {
		display: none !important;
	}

	.iforest-account-area--mobile {
		display: block;
	}

	/* ------------------------------------------------------------------------
	 * ENHANCED state only — collapsed hamburger presentation.
	 * Everything below is scoped under `.iforest-enhanced` so the no-script
	 * fallback keeps the navigation fully expanded and reachable (Req 9.1/9.2).
	 * ---------------------------------------------------------------------- */

	/* Hamburger_Toggle becomes the visible menu control, presented as a compact
	 * icon button (the markup renders a Font Awesome bars/x icon, not text), so
	 * it sits neatly to the right of the logo (Req 1.1, 1.2, 2.x). */
	.iforest-enhanced .iforest-hamburger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		border: none;
		background: #021526;
		color: #fff;
		padding: 2.2vw 2.8vw;
		font-size: 6vw;
		line-height: 1;
		border-radius: 0.3vw;
	}

	.iforest-enhanced .iforest-hamburger:hover,
	.iforest-enhanced .iforest-hamburger:focus {
		background: #000;
	}

	/* Open/close affordance (Req 2.4, 2.5). The script flips aria-expanded; the
	 * CSS swaps the visible glyph so the closed state shows the hamburger icon
	 * and the open state shows the close (x) icon. */
	.iforest-enhanced .iforest-hamburger .iforest-hamburger__open {
		display: inline;
	}

	.iforest-enhanced .iforest-hamburger .iforest-hamburger__close {
		display: none;
	}

	.iforest-enhanced .iforest-hamburger[aria-expanded="true"] .iforest-hamburger__open {
		display: none;
	}

	.iforest-enhanced .iforest-hamburger[aria-expanded="true"] .iforest-hamburger__close {
		display: inline;
	}

	/* Header row layout (Req 3.3): keep the logo and the Hamburger_Toggle on a
	 * single row with the hamburger pushed to the RIGHT of the logo, and let the
	 * Nav_Panel drop to its own FULL-WIDTH row beneath them when it opens.
	 *
	 * The hamburger and the panel both live inside `.logo-menu-mid`, while the
	 * logo is in the sibling `.logo-menu-left`. `display: contents` unwraps the
	 * mid container so its children (hamburger + panel) become direct flex items
	 * of `.main-wrapper`. The hamburger then right-aligns next to the logo via
	 * `margin-left: auto`, and the panel spans the FULL header width (not just
	 * the space beside the logo) via `flex-basis: 100%`. */
	.iforest-enhanced .main-wrapper {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.iforest-enhanced .logo-menu-left {
		display: inline-block;
	}

	.iforest-enhanced .logo-menu-mid {
		display: contents;
	}

	.iforest-enhanced .iforest-hamburger {
		margin-left: auto;
		visibility: visible;
	}

	/* The desktop Account_Area wrapper is empty on mobile (its contents are
	 * hidden and a mobile copy lives inside the Nav_Panel), so drop it from the
	 * row layout entirely to keep the logo + hamburger alignment clean. */
	.logo-menu-right {
		display: none;
	}

	/* Nav_Panel — collapsed (hidden) until opened (Req 1.1, 1.2). flex-basis:100%
	 * makes it wrap onto its own full-width row beneath the logo + hamburger. */
	.iforest-enhanced .iforest-nav-panel {
		display: none;
		width: 100%;
		flex-basis: 100%;
		visibility: visible;
	}

	/* Nav_Panel — open: a clean white dropdown that spans the full header width,
	 * scrolls if the menu is tall, and is visually separated from the header
	 * (Req 3.1, 3.2). */
	.iforest-enhanced .iforest-nav-panel.is-open {
		display: block;
		max-height: 80vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #ffffff;
		border-top: 1px solid #e3e3e3;
		box-shadow: 0 8px 18px rgba(2, 21, 38, 0.14);
	}

	/* ------------------------------------------------------------------------
	 * Panel CONTENTS readability (NOT enhancement-gated, so the no-JS expanded
	 * menu is legible too). These selectors are anchored on `#topbar` + the
	 * `.iforest-nav-panel` class so they out-specify navbar.css's
	 * `#topbar nav a { font-size: 1vw !important }` (which is not wrapped in a
	 * min-width query and would otherwise shrink the text to ~1vw on mobile).
	 * Sizes use px so they stay legible regardless of viewport width.
	 * ---------------------------------------------------------------------- */
	#topbar .iforest-nav-panel nav {
		position: static;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	#topbar .iforest-nav-panel nav ul {
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	/* Each menu item is a row: the link fills the row and the Submenu_Toggle
	 * sits at its right; any child <ul> wraps to the next full-width line. */
	#topbar .iforest-nav-panel nav ul li {
		display: flex !important;
		flex-wrap: wrap;
		align-items: stretch;
		width: 100% !important;
		margin: 0 !important;
		border-bottom: 1px solid #e3e3e3;
		background: transparent !important;
	}

	#topbar .iforest-nav-panel nav ul li a {
		flex: 1 1 auto;
		display: block;
		min-width: 0;
		padding: 14px 16px !important;
		font-size: 16px !important;
		line-height: 1.4 !important;
		font-weight: 600 !important;
		color: #021526 !important;
		background: transparent !important;
		text-decoration: none !important;
		border-radius: 0 !important;
	}

	#topbar .iforest-nav-panel nav ul li a:hover,
	#topbar .iforest-nav-panel nav ul li a:focus {
		background: #f2f5ef !important;
		color: #4a7a13 !important;
	}

	/* Inline caret glyphs that the static fallback markup adds inside links are
	 * redundant with the Submenu_Toggle button — hide them to avoid clutter. */
	#topbar .iforest-nav-panel nav ul li a > i {
		display: none;
	}

	/* Nested submenus: a light tint and progressive indentation so the hierarchy
	 * reads clearly. Overrides navbar.css's green/absolute desktop submenu look. */
	#topbar .iforest-nav-panel nav ul ul {
		flex-basis: 100%;
		width: 100% !important;
		float: none !important;
		position: static !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #f5f7f3 !important;
		border-radius: 0 !important;
	}

	#topbar .iforest-nav-panel nav ul ul li {
		width: 100% !important;
		border-bottom: 1px solid #e8ece4;
	}

	#topbar .iforest-nav-panel nav ul ul li a {
		padding: 12px 16px 12px 30px !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		color: #2a2a2a !important;
	}

	#topbar .iforest-nav-panel nav ul ul ul li a {
		padding-left: 44px !important;
		font-size: 14px !important;
	}

	/* Submenu_Toggle: a clearly tappable +/- accordion control at the right edge
	 * of each parent row (the markup renders an empty <button>, so the glyph is
	 * drawn here). Distinct from the destination link (Req 4.1, 4.5). */
	#topbar .iforest-nav-panel .iforest-submenu-toggle {
		flex: 0 0 auto;
		align-self: stretch;
		width: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: none;
		border-left: 1px solid #e3e3e3;
		background: transparent;
		color: #021526;
		cursor: pointer;
	}

	#topbar .iforest-nav-panel .iforest-submenu-toggle::before {
		content: "+";
		font-size: 22px;
		font-weight: 400;
		line-height: 1;
	}

	#topbar .iforest-nav-panel .iforest-submenu-toggle[aria-expanded="true"]::before {
		content: "\2212"; /* minus sign */
	}

	#topbar .iforest-nav-panel .iforest-submenu-toggle:hover,
	#topbar .iforest-nav-panel .iforest-submenu-toggle:focus {
		background: #f2f5ef;
	}

	/* ---- Submenu collapse / expand, driven by the toggle's aria-expanded ----
	 * Enhancement-gated so the no-JS menu stays fully expanded and reachable
	 * (Req 9.1). The `!important` beats navbar.css's hover rule
	 * `nav ul li:hover > ul { display: block !important }` (Req 4.2, 4.3). */
	.iforest-enhanced #topbar .iforest-nav-panel nav ul ul {
		display: none !important;
	}

	/* The controlled submenu is the toggle button's immediate sibling <ul>; show
	 * it only when its Submenu_Toggle is expanded. Works at every nesting level
	 * (Req 4.2, 4.3, 4.4, 7.3). */
	.iforest-enhanced #topbar .iforest-nav-panel .iforest-submenu-toggle[aria-expanded="true"] + ul {
		display: block !important;
	}

	/* Mobile Account_Area inside the open panel (Req 3.2). */
	#topbar .iforest-nav-panel .iforest-account-area--mobile {
		display: block;
		width: 100%;
		padding: 16px;
		background: #021526;
	}

	#topbar .iforest-nav-panel .iforest-account-area--mobile a {
		color: #ffffff !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		text-decoration: none !important;
		line-height: 1.6;
	}

	#topbar .iforest-nav-panel .iforest-account-area--mobile a:hover,
	#topbar .iforest-nav-panel .iforest-account-area--mobile a:focus {
		color: #8fce3f !important;
	}
}

/* ============================================================================
 * DESKTOP_HEADER  —  viewport width >= 1025px (Desktop_Breakpoint)
 * Req 1.3, 8.1, 8.2, 8.5
 * ----------------------------------------------------------------------------
 * Desktop layout is owned by navbar.css and must stay pixel-identical. The only
 * adjustments here remove the mobile-only controls so the existing hover-driven
 * submenus and horizontal layout are untouched.
 * ========================================================================== */
@media (min-width: 1025px) {

	/* Hide the Hamburger_Toggle; the horizontal Primary_Menu is shown by
	 * navbar.css's default (non-media-query) rules (Req 1.3). */
	.iforest-hamburger {
		display: none !important;
	}

	/* Hide the Submenu_Toggle buttons so the desktop hover submenus
	 * (`nav ul li:hover > ul`) remain the activation mechanism (Req 8.2). */
	.iforest-submenu-toggle {
		display: none !important;
	}

	/* Show the desktop Account_Area copy, hide the mobile copy (Req 8.1). */
	.iforest-account-area--mobile {
		display: none !important;
	}

	.iforest-account-area--desktop {
		display: block;
	}
}