/**
 * Full-screen navigation panel.
 * dr-amramal.com · 2026-09-21 · v2
 *
 * NAMESPACE: every selector is `.nav2`-scoped. The root element carries both
 * `blockmenusfull` (the class the theme's existing jQuery toggle looks for) and
 * `nav2`, so the six root rules the old stylesheet still applies are overridden
 * here with `.blockmenusfull.nav2` — a higher specificity, not a !important.
 * Nothing else in this file names a class the theme owns except the documented
 * body.blockmenusfull__body hook at the end.
 *
 * CACHE: LiteSpeed strips ?ver= site-wide. To ship an edit, RENAME this file
 * (nav-panel-v3.css …) and update the handle in functions.php. The handle is
 * listed in hv3_skip_optimizer() so the optimizer never serves a stale copy.
 *
 * Design system: the site's "Clinical Navy & Gold".
 * RTL: no letter-spacing anywhere — it breaks Arabic letter joining.
 * LNA ships 400 / 600 / 700 only; nothing here asks for 800 or 900.
 */

.blockmenusfull.nav2 {
	--n2-navy: #1B3F6B;
	--n2-navy-deep: #143152;
	--n2-blue: #1F6FBF;
	--n2-gold: #C9960C;
	--n2-gold-hi: #FFD966;
	--n2-wa: #0E7C6B;
	--n2-line: rgb(255 255 255 / .13);
	--n2-dim: rgb(255 255 255 / .62);
	--n2-shell: 1180px;
	--n2-ease: cubic-bezier(.16, 1, .3, 1);

	/* Replaces the old panel wholesale: the photo behind the links is gone, the
	   entrance is 420ms instead of 800ms, and it now sits above the floating
	   contact CTA (z-index 1030) instead of under it. */
	background-image: none;
	background: radial-gradient(120% 90% at 85% 0%, #1d4a7d 0%, transparent 60%),
		linear-gradient(160deg, var(--n2-navy) 0%, var(--n2-navy-deep) 70%);
	z-index: 1100;
	transform: none;
	transition: opacity .34s var(--n2-ease), visibility .34s var(--n2-ease);
	display: flex;
	flex-direction: column;
	overscroll-behavior: contain;
	font-family: 'LNA', system-ui, -apple-system, 'Segoe UI', sans-serif;
	direction: rtl;
	scrollbar-color: rgb(255 255 255 / .28) transparent;
	scrollbar-width: thin;
}
.blockmenusfull.nav2::-webkit-scrollbar { width: 6px; }
.blockmenusfull.nav2::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .28); border-radius: 99px; }
.blockmenusfull.nav2::-webkit-scrollbar-track { background: transparent; }

.nav2 *, .nav2 *::before, .nav2 *::after { box-sizing: border-box; }
:where(.nav2) :where(h2, p, ul, li) { margin: 0; padding: 0; }
:where(.nav2) :where(ul) { list-style: none; }
:where(.nav2) :where(a) { color: inherit; text-decoration: none; }
:where(.nav2) :where(img) { max-width: 100%; height: auto; display: block; }
.nav2 ::selection { background: var(--n2-gold); color: var(--n2-navy-deep); }
.nav2 :focus-visible { outline: 2px solid var(--n2-gold-hi); outline-offset: 3px; border-radius: 4px; }
.nav2-ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.nav2__shell { width: 100%; max-width: var(--n2-shell); margin-inline: auto; padding-inline: 20px; }

/* ── bar: logo + a close target you can actually hit ───────────────────── */
.nav2__bar { flex: none; border-block-end: 1px solid var(--n2-line); background: rgb(20 49 82 / .55); backdrop-filter: blur(6px); }
.nav2__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.nav2__logo img { width: auto; max-height: 40px; }
.nav2__logo span { color: #fff; font-size: 17px; font-weight: 700; }
.nav2__close {
	/* was ~20px in the top-left corner and black on navy */
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 12px;
	color: #fff;
	background: rgb(255 255 255 / .09);
	border: 1px solid var(--n2-line);
	transition: background-color .2s var(--n2-ease), color .2s var(--n2-ease), transform .2s var(--n2-ease);
}
.nav2__close svg { width: 22px; height: 22px; }
.nav2__close:hover { background: var(--n2-gold); color: var(--n2-navy-deep); transform: rotate(90deg); }

/* ── body ──────────────────────────────────────────────────────────────── */
.nav2__body {
	flex: 1;
	display: flex;
	align-items: center;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: clamp(22px, 4vh, 52px);
	-webkit-overflow-scrolling: touch;
}
.nav2__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(22px, 3vw, 44px);
	align-items: start;
}
.nav2__col { min-width: 0; }
.nav2__title {
	font-size: clamp(15px, 1.5vw, 17px);
	font-weight: 700;
	line-height: 1.5;
	color: var(--n2-gold-hi);
	padding-block-end: 12px;
	margin-block-end: 6px;
	border-block-end: 1px solid var(--n2-line);
	text-wrap: balance;
}
.nav2__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* 48px floor: nine of the old links were under 44px */
	min-height: 48px;
	padding-block: 10px;
	font-size: clamp(14.5px, 1.4vw, 16px);
	font-weight: 600;
	line-height: 1.65;
	color: #fff;
	border-block-end: 1px solid var(--n2-line);
	transition: color .2s var(--n2-ease);
}
.nav2__list li:last-child .nav2__link { border-block-end: 0; }
.nav2__link .nav2-chev { width: 15px; height: 15px; flex: none; color: var(--n2-dim); transition: transform .24s var(--n2-ease), color .2s var(--n2-ease); }
.nav2__link:hover, .nav2__link:focus-visible { color: var(--n2-gold-hi); }
.nav2__link:hover .nav2-chev, .nav2__link:focus-visible .nav2-chev { color: var(--n2-gold-hi); transform: translateX(-4px); }
.nav2__link.is-here { color: var(--n2-gold-hi); }
.nav2__link.is-here .nav2-chev { color: var(--n2-gold-hi); }

/* ── contact pair ──────────────────────────────────────────────────────── */
.nav2__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
	margin-block-start: clamp(24px, 4vh, 44px);
	padding-block-start: clamp(20px, 3vh, 32px);
	border-block-start: 1px solid var(--n2-line);
}
.nav2__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 22px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	transition: filter .2s var(--n2-ease), transform .2s var(--n2-ease);
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.nav2__cta svg { width: 19px; height: 19px; flex: none; }
.nav2__cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
/* white on #0E7C6B = 5.10:1 · navy on gold = 4.89:1 */
.nav2__cta--wa { background: var(--n2-wa); color: #fff; }
.nav2__cta--tel { background: linear-gradient(135deg, var(--n2-gold-hi), var(--n2-gold)); color: var(--n2-navy-deep); }

/* ── the one authored moment: columns arrive in sequence ───────────────── */
.blockmenusfull.nav2 .nav2__col,
.blockmenusfull.nav2 .nav2__actions {
	opacity: 0;
	transform: translateY(14px);
}
.blockmenusfull.nav2.active .nav2__col,
.blockmenusfull.nav2.active .nav2__actions {
	opacity: 1;
	transform: none;
	transition: opacity .5s var(--n2-ease), transform .5s var(--n2-ease);
	transition-delay: calc(90ms + var(--nav2-i, 0) * 70ms);
}

/* ── narrow ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.nav2__body { align-items: flex-start; }
	/* No forced single column: the auto-fit track above already collapses to one
	   column below ~500px and gives two back on a 740px landscape phone, which a
	   hard `1fr` here was throwing away. */
	.nav2__grid { gap: 26px; }
	.nav2__bar-inner { min-height: 64px; }
	.nav2__logo img { max-height: 34px; }
	.nav2__cta { min-height: 54px; }
}
@media (max-height: 620px) {
	.nav2__body { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.blockmenusfull.nav2,
	.blockmenusfull.nav2 .nav2__col,
	.blockmenusfull.nav2 .nav2__actions,
	.nav2 .nav2-chev,
	.nav2__close,
	.nav2__cta { transition-duration: .01ms !important; transition-delay: 0s !important; }
	.blockmenusfull.nav2 .nav2__col,
	.blockmenusfull.nav2 .nav2__actions { opacity: 1; transform: none; }
}

/**
 * The floating contact CTA is fixed and would otherwise sit on top of the open
 * panel — it covered the last menu items on small screens. The theme already
 * puts `blockmenusfull__body` on <body> while the panel is open, so that class
 * is the natural hook. Two CTAs competing on one screen is also just wrong.
 */
body.blockmenusfull__body .fcta-side,
body.blockmenusfull__body .fcta-bar { display: none; }