/* =========================================================================
   AYEIM — SITE CHROME (header, mega-nav, mobile nav, footer)
   ========================================================================= */

/* Hide Divi's default chrome entirely — the child theme ships its own. */
#main-header, #top-header, #et-secondary-nav, #main-footer, #footer-bottom,
.et_pb_scroll_top { display: none !important; }
#page-container { padding-top: 0 !important; }
#et-main-area { padding-top: 0 !important; }

/* ---------- Header --------------------------------------------------- */
.site-header {
	--bar-h: var(--header-h);   /* 76px at rest */
	--logo-h: 42px;
	position: sticky; top: 0; z-index: 500;
	background: rgba(251, 251, 253, 0.7);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.28s var(--ease), background 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
/* On scroll: tighter, opaque, subtle separation — understated, not a panel. */
.site-header.is-stuck {
	--bar-h: 58px;
	--logo-h: 34px;
	background: rgba(251, 251, 253, 0.94);
	border-bottom-color: var(--line);
	box-shadow: 0 1px 0 rgba(20, 18, 31, 0.04), 0 6px 24px -16px rgba(20, 18, 31, 0.25);
}
.site-header__bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem; height: var(--bar-h);
	transition: height 0.28s var(--ease);
}
.site-header__logo { display: flex; align-items: center; }
.site-header__logo svg, .site-header__logo img {
	height: var(--logo-h); width: auto; display: block;
	transition: height 0.28s var(--ease);
}
.site-header.is-stuck .header-actions .btn { padding-block: 0.7rem; }
@media (max-width: 560px) {
	.site-header { --logo-h: 38px; }
	.site-header.is-stuck { --logo-h: 32px; }
}

.primary-nav { display: flex; align-items: center; gap: 0.25rem; }
.primary-nav > li { position: relative; list-style: none; }
.primary-nav > li > a,
.primary-nav > li > button {
	display: inline-flex; align-items: center; gap: 0.25rem;
	padding: 0.6rem 0.7rem;
	font: inherit; font-size: var(--fs-sm); font-weight: 550;
	color: var(--text-soft); background: none; border: 0; cursor: pointer;
	border-radius: var(--r-sm); white-space: nowrap;
	transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.primary-nav > li > a:hover,
.primary-nav > li > button:hover,
.primary-nav > li.is-open > button,
.primary-nav > li > a[aria-current="page"] { color: var(--brand-700); background: var(--brand-50); }
.primary-nav .caret { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.primary-nav > li.is-open .caret { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }

/* ---------- Mega menu ------------------------------------------------- */
.mega {
	position: absolute; top: calc(100% + 10px); left: 50%;
	transform: translateX(-50%) translateY(-6px);
	width: max-content; max-width: min(92vw, 720px);
	background: var(--white);
	border: 1px solid var(--line); border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	padding: 1.25rem;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.primary-nav > li.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 0.25rem 1.5rem; }
.mega__grid--3 { grid-template-columns: repeat(3, minmax(170px, 1fr)); }
.mega__link { display: block; padding: 0.6rem 0.7rem; border-radius: var(--r-sm); }
.mega__link:hover { background: var(--brand-50); }
.mega__link strong { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.mega__link span { display: block; font-size: var(--fs-xs); color: var(--text-mute); margin-top: 0.1rem; }
.mega__foot { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: var(--fs-sm); }

/* ---------- Mobile nav --------------------------------------------------- */
.nav-toggle {
	display: none; width: 42px; height: 42px; position: relative;
	border: 1px solid var(--line-strong); border-radius: var(--r-md);
	background: var(--white); cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle svg.i { width: 20px; height: 20px; }
.nav-toggle svg.nav-toggle__close { display: none; }
body.nav-open .nav-toggle svg.nav-toggle__open { display: none; }
body.nav-open .nav-toggle svg.nav-toggle__close { display: block; }

.mobile-nav {
	position: fixed; inset: 0; z-index: 480;
	background: var(--paper);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.28s var(--ease), visibility 0.28s;
	overflow-y: auto; overflow-x: hidden;
	padding: calc(var(--header-h) + 1rem) var(--gutter) 3rem;
	overscroll-behavior: contain;
	max-width: 100vw;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
/* While the drawer is open: header is opaque and back to full size so the
   drawer's top padding lines up under it. */
body.nav-open .site-header {
	background: var(--paper);
	--bar-h: var(--header-h);
	--logo-h: 42px;
}
.mobile-nav__group { border-bottom: 1px solid var(--line); }
.mobile-nav__group > a,
.mobile-nav__group > button {
	width: 100%; display: flex; justify-content: space-between; align-items: center;
	padding: 1rem 0.25rem; font: inherit; font-size: 1.05rem; font-weight: 600;
	background: none; border: 0; color: var(--text); cursor: pointer; text-align: left;
}
.mobile-nav__group > button .i { transition: transform 0.2s var(--ease); }
.mobile-nav__group.is-open > button .i { transform: rotate(180deg); }
.mobile-nav__sub { display: none; padding: 0 0.25rem 0.75rem; }
.mobile-nav__group.is-open .mobile-nav__sub { display: block; }
.mobile-nav__sub a { display: block; padding: 0.6rem 0; font-size: var(--fs-sm); color: var(--text-soft); }
.mobile-nav__cta { margin-top: 1.5rem; display: grid; gap: 0.6rem; }

@media (max-width: 1200px) {
	.primary-nav, .header-actions .btn--ghost { display: none; }
	.nav-toggle { display: inline-flex; }
	body.nav-open { overflow: hidden; }
}
/* Keep the primary CTA in the header as long as it fits; below that it lives
   in the mobile drawer (which shows it prominently). */
@media (max-width: 560px) {
	.header-actions .btn { display: none; }
}
@media (min-width: 1201px) and (max-width: 1320px) {
	.primary-nav { gap: 0; }
	.primary-nav > li > a, .primary-nav > li > button { padding-inline: 0.55rem; }
}

/* ---------- Footer -------------------------------------------------- */
/* One primary composition on desktop: brand block | five nav groups.
   Then a single compact utility strip (copyright + legal). Not oversized. */
.site-footer { background: var(--ink-900); color: var(--text-invert-soft); }
.site-footer a { color: var(--text-invert-soft); transition: color 0.16s var(--ease); }
.site-footer a:hover { color: #fff; }

.site-footer__main {
	padding-block: clamp(2.5rem, 2rem + 2.2vw, 3.75rem);
	display: grid;
	grid-template-columns: minmax(220px, 280px) 1fr;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}

/* Brand block */
.site-footer__logo { display: inline-block; }
.site-footer__logo svg { height: 40px; width: auto; display: block; }
.site-footer__brand .ayeim-logo-mark { fill: #ffffff; }
.site-footer__brand .ayeim-logo-word { fill: var(--text-invert-soft); }
.site-footer__tagline { font-size: var(--fs-sm); color: var(--text-invert-soft); margin: 0.9rem 0 1.1rem; }
.site-footer__quick { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-bottom: 1.25rem; }
.site-footer__quick a { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; }

.site-footer__social { display: flex; gap: 0.5rem; }
.site-footer__social a {
	width: 34px; height: 34px; flex: none;
	border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-sm);
	display: grid; place-items: center; color: var(--text-invert-soft);
	transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.site-footer__social a:hover { color: #fff; border-color: var(--brand-400); background: rgba(101, 71, 151, 0.28); }
.site-footer__social a:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; }
.site-footer__social .i { width: 17px; height: 17px; }
.site-footer__social a.is-placeholder { opacity: 0.5; cursor: default; border-style: dashed; }
.site-footer__social a.is-placeholder:hover { color: var(--text-invert-soft); border-color: rgba(255, 255, 255, 0.16); background: none; }

.site-footer__cta { margin-top: 1.35rem; color: var(--brand-200); font-size: var(--fs-sm); font-weight: 600; }
.site-footer__cta:hover { color: #fff; }

/* Nav groups — one row of five columns on desktop */
.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.75rem 1.25rem;
}
.site-footer__col { min-width: 0; }
.site-footer__col > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; }
.site-footer__col > summary::-webkit-details-marker { display: none; }
.site-footer__col > summary .i { display: none; }
.site-footer__col h3 {
	font-size: var(--fs-xs); letter-spacing: 0.11em; text-transform: uppercase;
	color: #fff; margin: 0 0 1rem;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin: 0.5rem 0; }
.site-footer__col a { font-size: var(--fs-sm); }

/* Compact utility strip — the ONLY secondary row */
.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: 1.2rem;
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem;
	font-size: var(--fs-xs); color: var(--text-invert-soft);
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }

@media (max-width: 1080px) {
	.site-footer__main { grid-template-columns: 1fr; gap: 2.25rem; }
	.site-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	/* Mobile: brand block, then each group as a disclosure accordion. */
	.site-footer__nav { grid-template-columns: 1fr; gap: 0; }
	.site-footer__col { border-top: 1px solid rgba(255, 255, 255, 0.12); }
	.site-footer__col:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
	.site-footer__col > summary { cursor: pointer; padding: 0.95rem 0; }
	.site-footer__col > summary .i { display: block; width: 16px; height: 16px; color: var(--text-invert-soft); transition: transform 0.2s var(--ease); }
	.site-footer__col[open] > summary .i { transform: rotate(180deg); }
	.site-footer__col h3 { margin: 0; }
	.site-footer__col ul { padding: 0 0 1rem; }
	.site-footer__col li { margin: 0.25rem 0; }
	.site-footer__col li a { display: block; padding: 0.3rem 0; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }
}
/* Desktop: JS holds every group open; the heading is not interactive. */
@media (min-width: 761px) {
	.site-footer__col > summary { pointer-events: none; }
}
/* No-JS fallback: show the lists (they render collapsed for the mobile accordion). */
.no-js .site-footer__col > ul { display: block; }

/* ---------- In-page sticky sub-navigation --------------------------- */
/* Sits just below the header; the header is 58px once the page is scrolled,
   which is the only state in which the sub-nav is ever stuck. */
.subnav {
	position: sticky; top: 58px; z-index: 400;
	background: rgba(251, 251, 253, 0.9);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--line);
}
.subnav__inner { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a {
	white-space: nowrap; padding: 0.9rem 0.85rem; font-size: var(--fs-sm);
	font-weight: 550; color: var(--text-soft); border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--brand-700); }
.subnav a.is-active { color: var(--brand-700); border-bottom-color: var(--brand-600); }

/* ---------- OpenEMR hub visual ------------------------------------- */
.emrhub { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1/1; margin-inline: auto; }
.emrhub__core {
	position: absolute; inset: 33%; border-radius: var(--r-lg);
	background: var(--ink-900); color: #fff; display: grid; place-items: center;
	text-align: center; font-weight: 700; font-size: var(--fs-sm); box-shadow: var(--sh-lg); z-index: 3;
}
/* Official OpenEMR logo sits on a subtle light plate — its brand colours
   (grey wordmark, red EKG line) need contrast against the dark container.
   The logo itself is never recoloured or filtered. */
.emrhub__logo {
	display: block; width: 86%;
	background: #fff;
	border-radius: 9px;
	padding: 0.68rem 0.62rem;
}
.emrhub__logo img {
	display: block; width: 100%; height: auto;
}
.emrhub__ring { position: absolute; inset: 8%; border: 1px dashed var(--brand-200); border-radius: 50%; }
.emrhub__node {
	position: absolute; transform: translate(-50%, -50%);
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill);
	padding: 0.35rem 0.7rem; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
	box-shadow: var(--sh-sm); z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
	.emrhub__ring { animation: spin 70s linear infinite; }
}

/* ---------- Search --------------------------------------------------- */
.search-form { display: flex; gap: 0.6rem; max-width: 540px; }
.search-form input { flex: 1; }
.search-result { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.search-result .tag { margin-bottom: 0.5rem; }

/* ---------- 404 ----------------------------------------------------- */
.error-404 { text-align: center; padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.error-404 .code { font-size: clamp(4rem, 2rem + 12vw, 9rem); font-weight: 800; letter-spacing: -0.04em; color: var(--brand-100); line-height: 1; }