/* ============================================================
   NAV.CSS — dropdown / submenu navigation (dev-foundation)
   ------------------------------------------------------------
   The client HTML layout (01-client-html-layout/index.html) has a flat
   5-item nav and assets/css/theme.css has NO submenu styling at all —
   this is a wholly new component, built to mirror the old site's nav
   structure (Meet Dr. Locke, Services, How to Find A Clinician, and
   Resources all have dropdowns) without which those pages would lose
   their only nav-level discoverability.

   theme.css itself is byte-identical to the client source and is never
   edited for this — everything nav-specific lives here. Only tokens
   already defined in theme.css's :root are used (--surface, --paper,
   --ink, --brass, --line, --line-2, --shadow, --display, --body); no
   new colors, radii, or motion curves are invented.

   Markup contract (see inc/nav.php Drstevenlocke_Primary_Nav_Walker /
   drstevenlocke_primary_nav_fallback, and header.php):

     <nav class="navlinks" id="nav">          <!-- theme.css: flex, gap:30px -->
       <ul id="primary-menu" class="navlinks-list">
         <li class="nav-item [has-children]">
           <a class="nav-link" href="...">Label</a>
           <button class="submenu-toggle" aria-haspopup="true"
                   aria-expanded="false" aria-controls="submenu-N">…chevron…</button>
           <ul class="submenu[ submenu-wide]" id="submenu-N">
             <li><a href="...">Child label</a></li>
           </ul>
         </li>
       </ul>
       <a class="btn btn-primary" href="...">Schedule a Consultation</a>
     </nav>

   assets/js/theme.js owns the open/close behaviour and aria-expanded
   state; this file owns the visual language and the CSS-only desktop
   hover affordance.
   ============================================================ */

/* ---------- MENU LIST ----------
   theme.css's original .navlinks (the <nav id="nav"> itself) was
   `display:flex;align-items:center;gap:30px` with bare <a> children —
   each link was a flex item, 30px apart, ending with the CTA button.
   The menu now lives one level deeper, inside <ul id="primary-menu">,
   so the same flex/gap rule is reapplied here to .navlinks-list. Two
   flex items now sit in the outer nav#nav.navlinks flex row — the
   <ul> and the CTA <a> — 30px apart, and the <ul>'s own top-level <li>
   items are 30px apart from each other, reproducing the original
   rhythm exactly rather than approximating it. */
.navlinks-list{
	display:flex;
	align-items:center;
	gap:30px;
	list-style:none;
}

.nav-item{
	position:relative;
	display:flex;
	align-items:center;
}

.nav-link{
	text-decoration:none;
	font-size:.9rem;
	font-weight:600;
	color:var(--ink);
	opacity:.82;
	transition:opacity .2s;
	white-space:nowrap;
}
.nav-link:hover,
.nav-item.open>.nav-link{opacity:1}

/* ---------- DROPDOWN TOGGLE ---------- */
.submenu-toggle{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:22px;
	height:22px;
	margin-left:2px;
	padding:0;
	border:0;
	background:none;
	color:var(--ink);
	opacity:.6;
	cursor:pointer;
	transition:opacity .2s ease,transform .2s ease;
}
.submenu-toggle:hover,
.submenu-toggle:focus-visible,
.nav-item.open>.submenu-toggle{opacity:1}
.submenu-toggle .chevron{
	width:10px;
	height:7px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.6;
	stroke-linecap:round;
	stroke-linejoin:round;
	transition:transform .25s ease;
}
.nav-item.open>.submenu-toggle .chevron{transform:rotate(180deg)}

/* Fallback-only case: a top-level item with no page of its own
   (How to Find A Clinician, Resources) collapses label + toggle into
   a single <button class="nav-link submenu-toggle">, so there is no
   dead "#" link. Overrides the icon-only sizing above — higher
   specificity (3 classes) wins over `.submenu-toggle` (1 class). */
button.nav-link.submenu-toggle{
	display:inline-flex;
	align-items:center;
	gap:.4em;
	width:auto;
	height:auto;
	margin-left:0;
	opacity:.82;
}
button.nav-link.submenu-toggle:hover,
button.nav-link.submenu-toggle:focus-visible{opacity:1}
button.nav-link.submenu-toggle .chevron{opacity:.75}

/* ---------- SUBMENU PANEL ---------- */
.submenu{
	list-style:none;
	position:absolute;
	top:calc(100% + 14px);
	left:0;
	min-width:240px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:10px;
	box-shadow:var(--shadow);
	padding:10px;
	opacity:0;
	visibility:hidden;
	transform:translateY(6px);
	transition:opacity .18s ease,transform .18s ease,visibility .18s;
	z-index:70;
}

/* Nine items (Services) is too long for one column at a comfortable
   row height; everything else (max 4 items — Resources) stays a
   single column. See Drstevenlocke_Primary_Nav_Walker::WIDE_THRESHOLD
   in inc/nav.php, which adds this class server-side based on actual
   child count rather than hardcoding "Services" by name. */
.submenu.submenu-wide{
	min-width:440px;
	column-count:2;
	column-gap:6px;
}
.submenu.submenu-wide li{break-inside:avoid}

.submenu a{
	display:block;
	text-decoration:none;
	font-size:.86rem;
	font-weight:600;
	color:var(--ink);
	opacity:.78;
	padding:9px 12px;
	border-radius:6px;
	transition:opacity .15s ease,background .15s ease,color .15s ease;
	white-space:nowrap;
}
.submenu a:hover,
.submenu a:focus-visible{
	opacity:1;
	background:var(--paper);
	color:var(--brass);
}

/* JS (assets/js/theme.js) measures each open panel against the
   viewport and adds this class when the right edge would clip, so
   dropdowns near the end of the nav (e.g. How to Find A Clinician,
   Resources) flip to hang from their right edge instead of their
   left. Detection is done at open time rather than hardcoded per
   item, so it stays correct if items are reordered or the viewport
   is narrower than expected. */
.nav-item.align-right>.submenu{
	left:auto;
	right:0;
}

/* Desktop only (> 940px; the mobile switch was moved from 720 to 940
   because six top-level items + CTA cannot fit between 721 and ~1010):
   hover opens the panel with no JS required; assets/js/theme.js
   additionally toggles the same .open class for keyboard/touch, so
   both paths render identically. */
@media(min-width:941px){
	/* Hidden panels still count toward scrollWidth; clip the header on
	   the x axis so an off-screen dropdown cannot cause page overflow. */
	header{overflow-x:clip}
	.nav-item:hover>.submenu,
	.nav-item.open>.submenu{
		opacity:1;
		visibility:visible;
		transform:none;
	}
}

/* Tighter rhythm for the narrow-desktop band (941-1100px) so the six
   items + CTA fit on one row. Uses the same 30px gap at >1100px. */
@media(min-width:941px) and (max-width:1100px){
	.navlinks,
	.navlinks-list{gap:16px}
}

/* Below 1240px the 2-column Services panel (~700px) would run past the
   viewport edge, so it collapses to one column (still 9 short rows). */
@media(min-width:941px) and (max-width:1240px){
	.submenu.submenu-wide{
		column-count:1;
		min-width:240px;
	}
}

/* ---------- MOBILE (existing .navlinks.open slide-in panel) ----------
   theme.css turns #nav.navlinks into a fixed slide-in panel at <=720px.
   The client CSS is locked, so the 721-940 range re-declares the same
   panel/toggle rules here (values copied from theme.css's 720 block).
   This section also adapts the new nested list to live inside it and
   turns each dropdown into an inline accordion instead of a
   hover/absolute panel. */
@media(max-width:940px){
	/* Locked theme.css:41 gives header.scrolled a backdrop-filter. Any filter
	   makes the header the containing block for position:fixed children, so
	   after 20px of scroll the slide-in #nav panel was squeezed into the
	   header's height (only "About Us" visible — iPhone SE / Galaxy A15,
	   2026-10-16). No blur at hamburger widths; same paper colour, opaque. */
	header.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)}
	.navlinks{
		position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--surface);
		flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px;
		padding:100px 32px 40px;transform:translateX(100%);transition:transform .32s ease;box-shadow:var(--shadow);z-index:55;
		overflow-y:auto;
	}
	.navlinks.open{transform:none}
	.menu-toggle{display:flex;z-index:56}
	.navlinks .btn{width:100%}
	.navlinks-list{
		flex-direction:column;
		align-items:stretch;
		width:100%;
		gap:4px;
	}

	.nav-item{
		flex-wrap:wrap;
		justify-content:space-between;
		width:100%;
		padding:6px 0;
	}

	.nav-item .nav-link{
		flex:1 1 auto;
		font-size:1.05rem;
		padding:6px 0;
	}

	.submenu-toggle{
		width:40px;
		height:40px;
		flex:0 0 auto;
	}

	/* Label-only parents (button.nav-link.submenu-toggle) match the
	   link+toggle rows: label left, chevron at the right (15px inset =
	   centre of the 40px toggle used by link parents). */
	button.nav-link.submenu-toggle{
		flex:1 1 100%;
		width:100%;
		height:auto;
		justify-content:space-between;
		text-align:left;
		font-family:inherit;
		line-height:inherit;
		padding:6px 15px 6px 0;
	}

	/* Accordion: static in the flow, height-limited + collapsed rather
	   than absolutely positioned + faded. flex-wrap on .nav-item above
	   forces this to its own line since it's set to full width and the
	   label + toggle together never fill the row.

	   visibility:hidden by default (only flipped to visible by the .open
	   rule below) so a collapsed accordion is genuinely inert: neither
	   max-height:0 nor overflow:hidden removes an element from the tab
	   order or the accessibility tree, so without this a keyboard user
	   could Tab into a clipped-to-zero-height child link, and a screen
	   reader's browse-mode cursor could still announce it as present.
	   This costs nothing visually — the box already renders at 0 height
	   with its content clipped by overflow:hidden while closed, so
	   visibility has no visible effect there; it only starts to matter
	   once .open raises max-height, at which point visibility:visible
	   is applied in the same rule. The max-height transition (the actual
	   slide animation) is untouched — visibility carries no transition
	   of its own, so it switches instantly and doesn't fight the .3s
	   height animation. */
	.nav-item .submenu{
		position:static;
		flex:0 0 100%;
		width:100%;
		opacity:1;
		visibility:hidden;
		transform:none;
		max-height:0;
		overflow:hidden;
		margin:0;
		padding:0 0 0 16px;
		border:0;
		box-shadow:none;
		background:transparent;
		transition:max-height .3s ease;
	}
	.nav-item.open>.submenu{
		visibility:visible;
		max-height:640px; /* comfortably above the longest list (Services, 9 items) */
	}
	.submenu.submenu-wide{
		column-count:1;
		min-width:0;
	}
	.submenu a{
		font-size:.98rem;
		opacity:.72;
		padding:10px 12px;
	}
}

/* ---------- REDUCED MOTION ----------
   Extends (does not replace) theme.css's own
   @media(prefers-reduced-motion:reduce) block — that block is part of
   the byte-identical client source and is left untouched; this is a
   second, separate block scoped to the nav-only properties introduced
   here. */
@media(prefers-reduced-motion:reduce){
	.submenu,
	.submenu-toggle,
	.submenu-toggle .chevron,
	.nav-item .submenu{
		transition:none!important;
	}
}