/* Rugare Medical premium header and navigation system. */
:root {
	--header-height: 5.125rem;
	--header-height-compact: 4.625rem;
	--nav-breakpoint: 74rem;
	--nav-panel-radius: .5rem;
	--nav-panel-shadow: 0 1.25rem 3.25rem rgb(11 58 91 / 16%), 0 .25rem .75rem rgb(11 58 91 / 7%);
	--nav-item-height: 2.75rem;
	--mobile-nav-header-height: 4.75rem;
}

.topbar { position: relative; z-index: var(--z-header); border: 0; background: var(--rugare-navy); color: rgb(255 255 255 / 86%); }
.topbar__inner, .site-header__inner, .site-search-panel__inner { width: min(100% - (2 * var(--gutter)), 96rem); margin-inline: auto; }
.topbar__inner { display: flex; min-height: 2.25rem; align-items: center; justify-content: space-between; gap: 1.5rem; }
.topbar__context { display: flex; min-width: 0; align-items: center; gap: .85rem; white-space: nowrap; }
.topbar__status-message { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--rugare-white); font-size: .8125rem; }
.topbar__status-message strong { font-size: inherit; font-weight: 600; }
.topbar__status { width: .4375rem; height: .4375rem; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--rugare-health-green); box-shadow: none; }
.topbar__location { padding-left: .85rem; border-left: 1px solid rgb(255 255 255 / 20%); color: rgb(255 255 255 / 84%); font-size: .8125rem; font-weight: 500 !important; text-decoration: none; }
.topbar__location:hover, .topbar__location:focus-visible { color: var(--rugare-white); text-decoration: underline; text-underline-offset: .2rem; }
.topbar__links { display: flex; align-items: center; gap: 0; padding: 0; margin: 0; list-style: none; }
.topbar__links li { display: flex; align-items: center; }
.topbar__links li + li { padding-left: .8rem; border-left: 1px solid rgb(255 255 255 / 18%); margin-left: .8rem; }
.topbar__links a { display: inline-flex; min-height: 2rem; align-items: center; gap: .35rem; color: rgb(255 255 255 / 86%); font-size: .8125rem; font-weight: 500 !important; text-decoration: none; white-space: nowrap; }
.topbar__links a:hover, .topbar__links a:focus-visible { color: var(--rugare-white); text-decoration: underline; text-underline-offset: .2rem; }
.topbar :is(a):focus-visible { border-radius: .125rem; outline: 2px solid var(--rugare-white); outline-offset: 2px; }
.topbar__links .icon { width: .8rem; height: .8rem; color: inherit; }
.topbar__mobile-label { display: none; }

.site-header { position: sticky; z-index: var(--z-header); top: 0; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 98%); box-shadow: 0 .2rem .8rem rgb(11 58 91 / 5%); backdrop-filter: blur(14px) saturate(145%); transition: box-shadow .18s ease, background-color .18s ease; }
.site-header.is-scrolled { background: rgb(255 255 255 / 99%); box-shadow: 0 .75rem 2rem rgb(11 58 91 / 11%); }
.site-header__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; min-height: var(--header-height); align-items: center; gap: clamp(.7rem, 1.15vw, 1.15rem); transition: min-height .18s ease; }
.site-header.is-scrolled .site-header__inner { min-height: var(--header-height-compact); }
.brand { display: block; width: clamp(11.25rem, 12vw, 12.8125rem); flex: 0 0 auto; }
.brand picture, .brand__logo { display: block; width: 100%; height: auto; }
.brand__logo { aspect-ratio: 1660 / 620; object-fit: contain; }
.site-header.is-scrolled .brand { width: clamp(10.75rem, 11.5vw, 12rem); }

.primary-navigation { align-self: stretch; justify-self: end; }
.mobile-navigation__intro { display: none; }
.primary-menu { display: flex; height: 100%; align-items: stretch; gap: clamp(0, .18vw, .16rem); padding: 0; margin: 0; list-style: none; }
.primary-menu > li { position: relative; display: flex; align-items: stretch; }
.primary-menu > li > :is(a, .submenu-toggle) { position: relative; display: inline-flex; min-height: 100%; align-items: center; justify-content: center; gap: .45rem; padding: .55rem clamp(.42rem, .48vw, .68rem); border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: .9375rem; font-weight: 600 !important; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.primary-menu > li > :is(a, .submenu-toggle)::after { position: absolute; right: .55rem; bottom: 0; left: .55rem; height: 3px; background: transparent; content: ''; transform: scaleX(.45); transition: background-color .16s ease, transform .16s ease; }
.primary-menu > li > :is(a, .submenu-toggle):hover, .primary-menu > li > :is(a, .submenu-toggle):focus-visible { background: transparent; color: var(--theme-blue-text); }
.primary-menu > li > :is(a, .submenu-toggle):hover::after { background: rgb(16 118 184 / 34%); transform: scaleX(1); }
.primary-menu > li.is-open > .submenu-toggle { color: var(--theme-blue-text); }
.primary-menu > li.is-open > .submenu-toggle::after { background: var(--rugare-health-green); transform: scaleX(1); }
.primary-menu > li > [aria-current='page'], .primary-menu > li.is-current > .submenu-toggle, .primary-menu > li:has(.nav-panel [aria-current='page']) > .submenu-toggle { background: transparent; color: var(--theme-blue-text); box-shadow: none; }
.primary-menu > li > [aria-current='page']::after, .primary-menu > li.is-current > .submenu-toggle::after, .primary-menu > li:has(.nav-panel [aria-current='page']) > .submenu-toggle::after { background: var(--rugare-health-green); transform: scaleX(1); }
.primary-menu > .nav-group--linked > .nav-group__overview { padding-right: .25rem; }
.primary-menu > .nav-group--linked > .submenu-toggle--split { min-width: 2.25rem; min-height: 2.5rem; align-self: center; justify-content: center; padding: 0; border-radius: .25rem; margin-left: .05rem; }
.primary-menu > .nav-group--linked > .submenu-toggle--split::after { display: none; }
.primary-menu > .nav-group--linked > .submenu-toggle--split:hover,
.primary-menu > .nav-group--linked > .submenu-toggle--split:focus-visible,
.primary-menu > .nav-group--linked.is-open > .submenu-toggle--split { background: var(--color-blue-surface); color: var(--theme-blue-text); }
.primary-menu > .nav-group--linked.is-current > .nav-group__overview,
.primary-menu > .nav-group--linked:has(.nav-panel [aria-current='page']) > .nav-group__overview { color: var(--theme-blue-text); }
.primary-menu > .nav-group--linked.is-current > .nav-group__overview::after,
.primary-menu > .nav-group--linked:has(.nav-panel [aria-current='page']) > .nav-group__overview::after { right: 0; background: var(--rugare-health-green); transform: scaleX(1); }
.primary-menu > .nav-group--linked.is-open > .nav-group__overview { color: var(--theme-blue-text); }
.submenu-toggle__icon { width: .42rem; height: .42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.12rem) rotate(45deg); transition: transform .16s ease; }
.nav-group.is-open > .submenu-toggle .submenu-toggle__icon, .mobile-more-toggle[aria-expanded='true'] .submenu-toggle__icon { transform: translateY(.1rem) rotate(225deg); }

.primary-menu .nav-panel { position: absolute; top: calc(100% + .375rem); right: auto; left: 0; display: none; width: 20rem; max-width: calc(100vw - 2rem); max-height: min(74vh, 38rem); overflow-x: hidden; overflow-y: auto; padding: .5rem !important; border: 1px solid rgb(11 58 91 / 14%); border-top: 3px solid var(--rugare-health-green); border-radius: var(--nav-panel-radius); background: var(--surface); box-shadow: var(--nav-panel-shadow); scrollbar-color: var(--rugare-brand-blue) transparent; scrollbar-width: thin; transform: none; }
.nav-group.is-open > .nav-panel, html:not(.has-navigation-js) .nav-group:focus-within > .nav-panel { display: block !important; }
.nav-group--services .nav-panel, .nav-group--insurance .nav-panel { width: 21.5rem; }
.nav-group--insurance .nav-panel, .nav-group--community .nav-panel, .nav-group--company .nav-panel { right: 0; left: auto; }
.nav-panel::before { display: none; }
.nav-panel__grid, .nav-panel--compact .nav-panel__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.nav-panel__section h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .55rem; color: var(--muted); font-family: var(--font-body); font-size: .75rem; font-weight: 700; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; }
.nav-panel__section h3::before { width: 1rem; height: 2px; flex: 0 0 auto; background: var(--rugare-health-green); content: ''; }
.nav-panel__list { display: grid; gap: .125rem; padding: 0; margin: 0; list-style: none; }
.primary-menu .nav-panel li { padding: 0; margin: 0; }
.primary-menu .nav-panel a { display: grid; width: 100%; min-height: var(--nav-item-height); align-content: center; gap: .12rem; padding: .5rem .75rem; border: 0; border-radius: .25rem; color: var(--ink); font-size: .9375rem; font-weight: 600 !important; line-height: 1.3; text-decoration: none; transition: background-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease; }
.primary-menu .nav-panel a::after { display: none; }
.primary-menu .nav-panel a small { color: var(--muted); font-size: .8125rem; font-weight: 400; line-height: 1.35; }
.primary-menu .nav-panel a:hover, .primary-menu .nav-panel a:focus-visible { background: var(--color-blue-surface); color: var(--theme-blue-text); transform: translateX(.125rem); }
.primary-menu .nav-panel a:focus-visible { outline: 2px solid var(--rugare-brand-blue); outline-offset: -2px; }
.primary-menu .nav-panel a[aria-current='page'] { background: var(--color-green-surface); color: var(--ink); box-shadow: inset 3px 0 var(--rugare-health-green); }
.nav-group--services .nav-panel__list > li:last-child { padding-top: .375rem; border-top: 1px solid var(--line); margin-top: .375rem; }
.nav-panel__section--actions .nav-panel__list { display: flex; flex-wrap: wrap; gap: .4rem .8rem; }
.nav-panel__section--actions .nav-panel__list li { flex: 1 1 10rem; }
.primary-menu .nav-panel__item--emphasis a { color: var(--theme-blue-text); }
.primary-menu .nav-panel__item--emphasis a span::after { margin-left: .35rem; content: '\2192'; }
.mobile-more-toggle, .mobile-navigation-actions { display: none; }

.site-header__actions { display: flex; align-items: center; gap: .4rem; padding: 0; border: 0; border-radius: 0; background: transparent; }
.site-header__action { position: relative; display: inline-flex; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 0; background: transparent; text-decoration: none; box-shadow: none; cursor: pointer; transition: color .16s ease, transform .16s ease; }
.site-header__action .icon { width: 1.05rem; height: 1.05rem; }
.site-header__utility--call { border: none; background: transparent; color: var(--rugare-brand-blue); }
.site-header__utility--whatsapp { border: none; background: transparent; color: #128c4a; }
.search-toggle { color: var(--rugare-navy); }
.site-header__action:hover, .site-header__action:focus-visible { border: none; background: transparent; color: var(--theme-blue-text); text-decoration: none; box-shadow: none; transform: translateY(-1px); }
.site-header__utility--whatsapp:hover, .site-header__utility--whatsapp:focus-visible { border: none; background: transparent; color: #08783c; }
.search-toggle[aria-expanded='true'] { border: none; background: transparent; color: var(--rugare-brand-blue); box-shadow: none; }
.site-header__action::after { position: absolute; z-index: 2; top: calc(100% + .55rem); left: 50%; padding: .42rem .62rem; border-radius: .3rem; background: var(--rugare-navy); color: var(--rugare-white); content: attr(data-tooltip); font-size: .75rem; font-weight: 650; letter-spacing: .01em; opacity: 0; pointer-events: none; transform: translate(-50%, -.15rem); transition: opacity .14s ease, transform .14s ease; white-space: nowrap; }
.site-header__action:hover::after, .site-header__action:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.site-header__appointment { min-height: 2.875rem; padding-inline: 1rem; border-radius: .25rem; font-size: .9375rem; white-space: nowrap; }
.menu-toggle { display: none; width: 3rem; min-width: 3rem; height: 3rem; min-height: 3rem; align-items: center; justify-content: center; padding: .7rem; border: none; background: transparent; color: var(--rugare-navy); cursor: pointer; }
.menu-toggle[aria-expanded='true'] { border: none; background: transparent; box-shadow: none; }
.menu-toggle:focus-visible, .site-header__action:focus-visible { outline: 3px solid var(--rugare-navy); outline-offset: 3px; }
.site-search-panel { position: absolute; top: 100%; right: 0; left: 0; border-block: 1px solid var(--line); background: rgb(244 250 253 / 99%); box-shadow: 0 1rem 2.5rem rgb(11 58 91 / 10%); }
.site-search-panel__inner { display: grid; grid-template-columns: minmax(14rem, .7fr) minmax(0, 1.3fr); gap: 1.5rem; align-items: center; padding-block: 1.2rem; }

.admin-bar .site-header { top: 32px; }

@media (max-width: 73.999rem) {
	.site-header__inner { grid-template-columns: minmax(0, 1fr) auto auto; min-height: var(--mobile-nav-header-height); gap: .55rem; }
	.site-header.is-scrolled .site-header__inner { min-height: 4.5rem; }
	.brand, .site-header.is-scrolled .brand { width: clamp(8rem, 21vw, 10rem); }
	.site-header__actions { grid-column: 2; }
	.site-header__appointment { display: none; }
	.menu-toggle { display: inline-flex; grid-column: 3; }
	html.has-navigation-js .primary-navigation { position: absolute; z-index: var(--z-navigation); top: 100%; right: 0; left: 0; display: block; width: 100%; height: auto; max-height: calc(100dvh - 7.65rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: .8rem var(--gutter) max(1.25rem, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 1.5rem 3rem rgb(11 58 91 / 20%); opacity: 0; pointer-events: none; transform: translateY(-.25rem); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; visibility: hidden; }
	html.has-navigation-js .primary-navigation.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; visibility: visible; }
	.mobile-navigation__intro { display: grid; gap: .1rem; padding: .25rem .45rem .9rem; border-bottom: 1px solid var(--line); margin-bottom: .15rem; }
	.mobile-navigation__intro strong { color: var(--rugare-navy); font-size: 1rem; font-weight: 700; }
	.mobile-navigation__intro span { color: var(--muted); font-size: .8125rem; line-height: 1.4; }
	.primary-menu { display: block; height: auto; }
	.primary-menu > li { display: block; }
	.primary-menu > li + li { border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
	.primary-menu > li > :is(a, .submenu-toggle) { width: 100%; min-height: 3.25rem; justify-content: space-between; padding: .7rem .45rem; font-size: 1rem; }
	.primary-menu > li > :is(a, .submenu-toggle)::after { display: none; }
	.primary-menu > .nav-group--linked { position: relative; }
	.primary-menu > .nav-group--linked > .nav-group__overview { padding-right: 3.5rem; }
	.primary-menu > .nav-group--linked > .submenu-toggle--split { position: absolute; z-index: 2; top: .25rem; right: 0; width: 3rem; min-width: 3rem; min-height: 2.75rem; justify-content: center; padding: 0; border-left: 1px solid var(--line); border-radius: 0; margin: 0; }
	.primary-menu .nav-panel { position: static; right: auto; left: auto; width: 100%; max-width: none; max-height: none; padding: .2rem 0 .8rem .7rem !important; overflow: visible; border: 0; border-left: 2px solid var(--rugare-health-green); border-radius: 0; background: transparent; box-shadow: none; transform: none; }
	.nav-panel__grid, .nav-group--medical-aid .nav-panel__grid, .nav-group--insurance .nav-panel__grid, .nav-panel--compact .nav-panel__grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
	.nav-panel__section h3 { margin: 0 0 .25rem .55rem; font-size: .75rem; }
	.nav-panel__section h3::before { width: .7rem; }
	.primary-menu .nav-panel a { min-height: 2.875rem; padding: .55rem .65rem; border-radius: .25rem; font-size: .9375rem; transform: none; }
	.nav-group--services .nav-panel__list > li:last-child { padding-top: .25rem; margin-top: .25rem; }
	.primary-menu .nav-panel a small { display: none; }
	.nav-panel__section--actions .nav-panel__list { display: grid; grid-template-columns: 1fr; gap: .15rem; }
	.mobile-more-toggle { display: flex; width: 100%; min-height: 3rem; align-items: center; justify-content: space-between; padding: .55rem; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--theme-blue-text); font-size: .9375rem; font-weight: 700; cursor: pointer; }
	html.has-navigation-js .nav-panel__section--mobile-more { display: none; }
	html.has-navigation-js .mobile-more-toggle[aria-expanded='true'] + .nav-panel__section--mobile-more { display: block; }
	.mobile-navigation-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding-top: 1rem; border-top: 1px solid var(--line); margin-top: .75rem; }
	.mobile-navigation-actions a { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .45rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: .25rem; color: var(--rugare-navy); font-size: .9375rem; font-weight: 700; text-align: center; text-decoration: none; }
	.mobile-navigation-actions__appointment { grid-column: 1 / -1; border-color: var(--rugare-brand-blue) !important; color: var(--rugare-white) !important; }
	.mobile-navigation-actions .icon { width: 1rem; height: 1rem; }
	body.menu-open { position: fixed; width: 100%; overflow: hidden; }
	body.menu-open::before { position: fixed; z-index: var(--z-backdrop); inset: 0; background: rgb(11 58 91 / 48%); content: ''; }
	.site-search-panel__inner { grid-template-columns: 1fr; }
}

@media (max-width: 64rem) {
	.topbar__inner { align-items: center; padding-block: 0; }
	.topbar__links .topbar__item--directions { display: none; }
}

@media (max-width: 55rem) {
	.topbar__links .topbar__item--whatsapp { display: none; }
}

@media (max-width: 48rem) {
	.topbar__inner { min-height: 2.25rem; justify-content: space-between; gap: .75rem; padding-block: 0; }
	.topbar__location, .topbar__links .topbar__item--whatsapp, .topbar__links .topbar__item--directions { display: none; }
	.topbar__desktop-label { display: none; }
	.topbar__mobile-label { display: inline; }
	.topbar__status-message, .topbar__links a { font-size: .8125rem; }
	.topbar__links { margin-left: auto; }
	.topbar__links li { padding: 0; border: 0; margin: 0; }
	.topbar__item--call .icon { display: none; }
	.site-header__actions { gap: .3rem; padding: 0; }
	.site-header__action { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; }
	.site-header__action::after { display: none; }
	html.has-navigation-js .primary-navigation { height: auto; max-height: calc(100dvh - 7.65rem); }
}

@media (max-width: 26.875rem) {
	:root { --gutter: .75rem; }
	.brand, .site-header.is-scrolled .brand { width: 7.25rem; }
	.site-header__inner { gap: .25rem; }
}

@media (max-width: 22.5rem) {
	.brand, .site-header.is-scrolled .brand { width: 6.25rem; }
	.site-header__action { width: 2.625rem; min-width: 2.625rem; height: 2.75rem; }
	.menu-toggle { width: 2.75rem; min-width: 2.75rem; }
}

@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header, .site-header__inner, .site-header__action, .submenu-toggle__icon, .primary-menu .nav-panel a, html.has-navigation-js .primary-navigation { transition: none; }
}