/*
 * The website header inside the UPMED apps (see inc/app-bar.php).
 * Everything is scoped to .upmed-bar so it never changes the app's own styles.
 */

:root {
	--wp--preset--color--base: #ffffff;
	--wp--preset--color--brand: #00aeef;
	--wp--preset--color--brand-dark: #0077a8;
	--wp--preset--color--brand-deep: #005f87;
	--wp--preset--color--brand-soft: #e8f7fd;
	--wp--preset--color--surface: #f7fafc;
	--wp--preset--color--ink: #2b2727;
	--wp--preset--color--muted: #726868;
	--wp--preset--color--line: #e4eaee;
	--wp--preset--shadow--card: 0 1px 2px rgba(20, 40, 60, .05), 0 6px 20px rgba(20, 40, 60, .06);
	--site-h: 66px;
}
body.has-site-bar { padding-top: var(--site-h); }

.upmed-bar, .upmed-bar *, .upmed-cart, .upmed-cart * { box-sizing: border-box; }
.upmed-bar, .upmed-cart, .upmed-cart-overlay {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}
.upmed-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	height: var(--site-h);
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0 clamp(1rem, 3vw, 2rem);
	background: #fff;
	border-top: 3px solid var(--wp--preset--color--brand);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.upmed-bar a { color: var(--wp--preset--color--ink); text-decoration: none; }
.upmed-bar-logo { flex: none; display: block; }
.upmed-bar-logo img { display: block; width: 84px; height: auto; }

/* Main menu */
.upmed-bar-nav { margin-left: auto; }
.upmed-bar-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.4rem; }
.upmed-bar-nav li { position: relative; margin: 0; }
.upmed-bar-nav > ul > li > a { display: inline-block; padding: 0.3rem 0; font-size: 0.95rem; font-weight: 500; white-space: nowrap; }
.upmed-bar-nav > ul > li > a:hover { box-shadow: inset 0 -2px 0 var(--wp--preset--color--brand); }
.upmed-bar-nav .has-sub { display: flex; align-items: center; }
.upmed-bar-subbtn { width: 1.2rem; height: 1.6rem; border: 0; background: transparent; cursor: pointer; padding: 0; color: inherit; }
.upmed-bar-subbtn::before { content: ""; display: inline-block; width: 0.38rem; height: 0.38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.upmed-bar-nav .has-sub > ul {
	display: none;
	position: absolute;
	top: 100%;
	left: -0.75rem;
	min-width: 15rem;
	margin: 0.4rem 0 0;
	padding: 0.4rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--card);
	z-index: 60;
}
.upmed-bar-nav .has-sub:hover > ul, .upmed-bar-nav .has-sub:focus-within > ul, .upmed-bar-nav .has-sub.is-open > ul { display: block; }
.upmed-bar-nav .has-sub > ul a { display: block; padding: 0.45rem 0.75rem; border-radius: 8px; font-size: 0.95rem; }
.upmed-bar-nav .has-sub > ul a:hover { background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand-deep); }

/* Actions: search, cart, account, menu button */
.upmed-bar-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.upmed-bar-burger { display: none; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; align-items: center; justify-content: center; }
.upmed-bar-burger:hover { background: var(--wp--preset--color--brand-soft); }
.upmed-bar :focus-visible { outline: 3px solid var(--wp--preset--color--brand); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Smaller screens: the menu opens as a panel under the header */
@media (max-width: 1100px) {
	.upmed-bar-burger { display: inline-flex; }
	.upmed-bar-actions { margin-left: auto; }
	.upmed-bar-nav {
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		top: var(--site-h);
		max-height: calc(100vh - var(--site-h));
		overflow-y: auto;
		margin: 0;
		padding: 0.5rem clamp(1rem, 3vw, 2rem) 1.25rem;
		background: #fff;
		border-bottom: 1px solid var(--wp--preset--color--line);
		box-shadow: 0 12px 24px rgba(20, 40, 60, .08);
	}
	.upmed-bar-nav.is-open { display: block; }
	.upmed-bar-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
	.upmed-bar-nav > ul > li { border-bottom: 1px solid var(--wp--preset--color--line); flex-wrap: wrap; }
	.upmed-bar-nav > ul > li > a { padding: 0.75rem 0; font-weight: 600; flex: 1; }
	.upmed-bar-nav > ul > li > a:hover { box-shadow: none; color: var(--wp--preset--color--brand-deep); }
	.upmed-bar-subbtn { width: 2.4rem; height: 2.4rem; }
	.upmed-bar-nav .has-sub:hover > ul, .upmed-bar-nav .has-sub:focus-within > ul { display: none; }
	.upmed-bar-nav .has-sub > ul, .upmed-bar-nav .has-sub.is-open > ul {
		position: static;
		flex-basis: 100%;
		margin: 0 0 0.6rem;
		padding: 0 0 0 0.9rem;
		border: 0;
		border-left: 3px solid var(--wp--preset--color--brand);
		border-radius: 0;
		box-shadow: none;
	}
	.upmed-bar-nav .has-sub.is-open > ul { display: block; }
	.upmed-bar-nav .has-sub > ul a { padding: 0.35rem 0; color: var(--wp--preset--color--muted); }
}
@media (max-width: 599px) {
	:root { --site-h: 58px; }
	.upmed-bar { gap: 0.5rem; }
	.upmed-bar-logo img { width: 70px; }
	.upmed-join { display: none !important; }
	.upmed-login span, .upmed-account-menu summary span { display: none; }
}

/* Opened as an installed app: no website header, just the app. */
@media (display-mode: standalone), (display-mode: minimal-ui) {
	.upmed-bar { display: none; }
	:root { --site-h: 0px; }
}
@media print {
	.upmed-bar, .upmed-cart, .upmed-cart-overlay { display: none !important; }
	body.has-site-bar { padding-top: 0; }
}

/* Headings in the UPMED apps use the website's heading font (Lora). */
@font-face {
	font-family: "Lora";
	src: url("fonts/lora-latin-wght-normal.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
body.has-site-bar h1, body.has-site-bar h2, body.has-site-bar h3, body.has-site-bar h4 {
	font-family: Lora, Georgia, "Times New Roman", serif;
	font-weight: 600;
	letter-spacing: 0;
}