/* =========================================================================
BioEvidenceHub — site chrome (header, navigation, drawer, footer)
Everything here is menu-driven: the brand comes from the Custom Logo, the
links from the `primary` menu location, the mega panels from per-item flags
set in Appearance → Menus, and the language list from TranslatePress.
Nothing in this file assumes a specific link, label or category.
========================================================================= */
/* -------------------------------------------------------------------------
1. Header shell
---------------------------------------------------------------------- */
.beh-header {
position: relative;
background: var(--beh-surface);
border-block-end: 1px solid var(--beh-line);
z-index: var(--beh-z-header);
}
/* Sticky is a Customizer toggle, so it hangs off a body class rather than
being applied unconditionally. */
.beh-sticky-header .beh-header {
position: sticky;
inset-block-start: var(--beh-admin-bar);
}
/* Shrink-on-scroll rather than a full-height sticky bar: on a laptop the
reduced height gives back vertical reading space while keeping navigation
one click away. */
.beh-header__inner {
display: flex;
align-items: center;
gap: var(--beh-s-7);
min-block-size: var(--beh-header-h);
transition: min-block-size var(--beh-dur) var(--beh-ease);
}
.beh-header.is-shrunk {
box-shadow: var(--beh-shadow-xs);
}
.beh-header.is-shrunk .beh-header__inner {
min-block-size: 64px;
}
/* Optional announcement bar above the header. */
.beh-topbar {
background: var(--beh-navy);
color: #fff;
font-size: var(--beh-fs-sm);
font-weight: 600;
text-align: center;
padding-block: 0.5625rem;
}
.beh-topbar a {
color: #fff;
text-decoration: underline;
text-underline-offset: 2px;
}
/* -------------------------------------------------------------------------
2. Brand
---------------------------------------------------------------------- */
/*
* The element wrapping the brand.
*
* branding.php emits an on a posts-on-front homepage and a
* everywhere else, so that the site name is the page's primary heading only
* where that is actually true. Both carry document defaults that have no place
* in a header:
brings a 1rem bottom margin, which pushed the logo visibly
* above the centre line of the nav and the tools, and
would additionally
* bring the 4.5rem display size.
*
* Everything is reset to inherit, so the wrapper contributes nothing but
* semantics and the .beh-brand inside it controls the appearance.
*/
.beh-brand-wrap {
display: flex;
align-items: center;
margin: 0;
padding: 0;
min-inline-size: 0;
font: inherit;
letter-spacing: normal;
color: inherit;
}
.beh-brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
color: var(--beh-navy);
font-weight: 800;
font-size: 1.1875rem;
letter-spacing: -0.02em;
white-space: nowrap;
flex: none;
}
.beh-brand:hover {
color: var(--beh-navy);
}
/* The gradient tile used when no logo image has been uploaded. */
.beh-brand__mark {
display: grid;
place-items: center;
inline-size: 2.625rem;
block-size: 2.625rem;
border-radius: var(--beh-r-md);
background: linear-gradient(145deg, var(--beh-navy), var(--beh-primary));
color: #fff;
flex: none;
}
.beh-brand__mark .beh-i {
inline-size: 1.375rem;
block-size: 1.375rem;
}
/*
* The logo images.
*
* Height-constrained with width:auto so any lockup ratio is respected — the
* client can swap in a different file from the Customizer without the header
* needing a change. The intrinsic width/height on the ![]()
reserves the right
* box before the file arrives, so the header never jumps.
*/
.beh-brand--logo {
gap: 0;
}
/*
* Logo heights come from tokens so each placement can be sized independently
* from the Customizer. Constraining the HEIGHT and letting the width follow
* means any lockup ratio keeps its proportions — including a replacement file
* with a completely different shape.
*
* The header's own height is a min-block-size, so a taller logo makes the bar
* taller rather than being cropped, and chrome.js republishes --beh-header-h
* so the sticky offsets and dropdown alignment follow automatically.
*/
.beh-brand__img {
display: block;
block-size: auto;
max-block-size: var(--beh-logo-h);
inline-size: auto;
max-inline-size: 100%;
}
/* The shrunk header scales its logo with it, as a proportion rather than a
separate setting — one fewer control for a value that should always track
the main one. */
.beh-header.is-shrunk .beh-brand__img {
max-block-size: calc(var(--beh-logo-h) * 0.85);
}
.beh-footer .beh-brand__img {
max-block-size: var(--beh-logo-h-footer);
}
.beh-drawer__head .beh-brand__img {
max-block-size: var(--beh-logo-h-mobile);
}
/* The mobile size applies from the point the drawer takes over, which is what
a client means by "mobile" — not an arbitrary narrower breakpoint. */
@media (max-width: 860px) {
.beh-header .beh-brand__img {
max-block-size: var(--beh-logo-h-mobile);
}
.beh-header.is-shrunk .beh-brand__img {
max-block-size: calc(var(--beh-logo-h-mobile) * 0.85);
}
}
/* Kept for the square-mark contexts that still use it. */
.beh-brand__mark-img {
display: block;
border-radius: var(--beh-r-md);
}
/* -------------------------------------------------------------------------
3. Primary navigation
---------------------------------------------------------------------- */
.beh-nav {
display: flex;
align-items: center;
gap: var(--beh-s-7);
margin-inline-start: auto;
}
.beh-nav__list {
display: flex;
align-items: center;
gap: var(--beh-s-5);
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
}
.beh-nav__item {
position: relative;
}
.beh-nav__list a,
.beh-nav__toggle {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--beh-navy);
font-size: var(--beh-fs-base);
font-weight: 650;
background: none;
border: 0;
padding: 0;
}
.beh-nav__list a:hover,
.beh-nav__toggle:hover,
.beh-nav__item.is-open > .beh-nav__toggle {
color: var(--beh-primary);
}
/* The current page is marked with a hairline underline rather than another
colour, so the nav keeps a single accent. */
.beh-nav__item.current-menu-item > a,
.beh-nav__item.current-menu-ancestor > a,
.beh-nav__item.current-menu-parent > a,
.beh-nav__item.current_page_parent > a {
color: var(--beh-primary);
box-shadow: inset 0 -2px 0 var(--beh-primary);
}
.beh-nav__toggle .beh-i {
inline-size: 0.875rem;
block-size: 0.875rem;
color: var(--beh-primary);
transition: rotate var(--beh-dur) var(--beh-ease);
}
/*
* TranslatePress's "Language switcher" menu item.
*
* The plugin can add the switcher as a menu item whose title is markup — a
* flag image and the language name wrapped in spans. It is redundant next to
* the header switcher, but it is a documented plugin feature and an editor may
* well add one, so it is styled to sit correctly in the bar rather than left
* to render at whatever size the plugin's own CSS decides.
*/
.beh-nav__list .trp-language-switcher-container,
.beh-nav__list [class*='trp-'] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
line-height: 1.2;
}
.beh-nav__list img[class*='trp-flag'],
.beh-nav__list .trp-flag-image {
inline-size: 1.125rem;
block-size: auto;
border-radius: 2px;
display: inline-block;
flex: none;
}
.beh-nav__item.is-open > .beh-nav__toggle .beh-i {
rotate: 180deg;
}
/* -------------------------------------------------------------------------
4. Dropdown and mega panels
---------------------------------------------------------------------- */
/*
* A closed panel is display:none, not merely visibility:hidden.
*
* A hidden-but-displayed element still contributes to the document's scroll
* width. The 46rem mega panel hangs off a nav item in the middle of the bar,
* so on any viewport under about 1100px its right edge sat past the fold and
* gave the ENTIRE site a horizontal scrollbar — on every page, with the menu
* closed, for no visible reason. Taking it out of layout is the fix.
*
* The reveal is therefore an animation rather than a transition: transitions
* do not run across a display change, animations do. The result looks
* identical and the aria-expanded relationship is unaffected.
*/
.beh-nav__panel {
position: absolute;
/*
* Every panel opens from the same line: the bottom edge of the header.
*
* A plain dropdown is positioned against its own menu item, which sits
* vertically centred in the bar — so on its own it would open roughly 26px
* ABOVE the header's bottom edge, appearing to touch the menu item, while a
* mega panel (positioned against the header) opened below it. The two were
* visibly inconsistent.
*
* --beh-panel-offset is the measured distance from this item's bottom to
* the header's bottom, published by chrome.js. Adding it here lands both
* kinds of panel on exactly the same line, at any header height, whether
* the header is shrunk, and even if the menu has wrapped onto two rows.
*/
inset-block-start: calc(100% + var(--beh-panel-offset, 0px) + var(--beh-panel-gap));
inset-inline-start: 0;
z-index: var(--beh-z-dropdown);
display: none;
min-inline-size: 16.25rem;
margin: 0;
padding: 1.125rem 1.25rem;
list-style: none;
background: var(--beh-surface);
border: 1px solid var(--beh-line);
border-radius: var(--beh-r-lg);
box-shadow: var(--beh-shadow-xl);
}
.beh-nav__item.is-open > .beh-nav__panel {
display: grid;
animation: beh-panel-in var(--beh-dur-fast) var(--beh-ease);
}
/* Animates `transform`, not `translate`.
Those are two independent properties that compose, so the rise-on-open can
run here while `.is-shifted` keeps using `translate` to centre a panel that
would otherwise overflow. Using `translate` for both would make a shifted
panel jump sideways the moment the animation finished. */
@keyframes beh-panel-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* An invisible bridge across the gap between trigger and panel, so the panel
does not close while the cursor is travelling to it. */
.beh-nav__item--has-panel > :is(a, button)::before {
content: '';
position: absolute;
inset-inline: 0;
inset-block-start: 100%;
block-size: 14px;
}
.beh-nav__panel a {
display: flex;
align-items: center;
min-block-size: 2.625rem;
padding: 0.5rem 0.625rem;
border-radius: var(--beh-r-xs);
font-size: var(--beh-fs-sm);
font-weight: 600;
line-height: 1.25;
white-space: normal;
color: var(--beh-navy);
}
.beh-nav__panel a:hover {
background: var(--beh-pale);
color: var(--beh-primary);
}
/* Wide mega panel — what the 42-category taxonomy menu uses. Column count is
a per-menu-item setting, passed in as a custom property. */
.beh-nav__panel--mega {
/* The panel widens with its column count rather than being a fixed slab,
so a two-column submenu is not a mostly-empty 46rem box. ~13rem per
column fits a long category name on one line. */
inline-size: min(calc(var(--beh-mega-cols, 3) * 13rem), calc(100vw - 3rem));
grid-template-columns: repeat(var(--beh-mega-cols, 3), minmax(0, 1fr));
gap: 0 1.375rem;
/* A very long list still has to fit on a laptop: past this height the
panel scrolls internally instead of running off the bottom. */
max-block-size: min(70vh, 34rem);
overflow-y: auto;
overscroll-behavior: contain;
}
/*
* Mega panels anchor to the HEADER, not to the menu item that opens them.
*
* Anchored to its trigger, a 46rem panel opens wherever that trigger happens
* to sit — so a menu item towards the right of the bar throws the panel off
* the side of the screen, and no amount of nudging fixes every case. Anchored
* to the header and centred, it is always fully on screen at any width, which
* is how every large site with a mega menu does it.
*
* Only the mega variant does this. A short dropdown of four links belongs
* under the item it came from.
*/
@media (min-width: 861px) {
.beh-nav__item--mega {
position: static;
}
/* The item is no longer the positioning context, so the hover bridge
needs its own — otherwise it would stretch across the whole header. */
.beh-nav__item--mega > :is(a, button) {
position: relative;
}
.beh-nav__item--mega > .beh-nav__panel--mega {
/* Positioned against the header, so the gap alone is enough — no
per-item offset, and none is inherited. */
inset-block-start: calc(100% + var(--beh-panel-gap));
inset-inline-start: 50%;
--beh-panel-offset: 0px;
margin-block-start: 0;
translate: -50% 0;
}
}
/* No rules between mega panel rows. With four columns of short links the
hairlines read as a table grid rather than a menu, and the column gaps
already separate the groups. */
/* Panels near the end of the bar open towards the centre instead of off-screen. */
.beh-nav__item--align-end > .beh-nav__panel {
inset-inline-start: auto;
inset-inline-end: 0;
}
/* JS adds this when a panel would still overflow the viewport. */
.beh-nav__panel.is-shifted {
inset-inline-start: 50%;
translate: -50% 0;
}
.beh-nav__item.is-open > .beh-nav__panel.is-shifted {
translate: -50% 0;
}
.beh-nav__desc {
display: block;
font-size: var(--beh-fs-xs);
font-weight: 500;
color: var(--beh-muted);
margin-block-start: 0.125rem;
}
/* -------------------------------------------------------------------------
5. Header tools
---------------------------------------------------------------------- */
.beh-tools {
display: flex;
align-items: center;
gap: var(--beh-s-3);
flex: none;
}
.beh-iconbtn {
display: grid;
place-items: center;
inline-size: 2.375rem;
block-size: 2.375rem;
border: 0;
border-radius: 50%;
background: var(--beh-pale);
color: var(--beh-navy);
transition: background var(--beh-dur-fast) var(--beh-ease),
color var(--beh-dur-fast) var(--beh-ease);
}
.beh-iconbtn:hover {
background: var(--beh-primary);
color: #fff;
}
.beh-iconbtn .beh-i {
inline-size: 1.125rem;
block-size: 1.125rem;
}
/* -------------------------------------------------------------------------
6. Language switcher
---------------------------------------------------------------------- */
.beh-lang {
position: relative;
}
.beh-lang__toggle {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 0.625rem;
border: 1px solid transparent;
border-radius: var(--beh-r-sm);
background: none;
color: var(--beh-navy);
font-size: var(--beh-fs-sm);
font-weight: 700;
}
.beh-lang__toggle:hover,
.beh-lang.is-open .beh-lang__toggle {
border-color: var(--beh-line);
background: var(--beh-surface-soft);
}
.beh-lang__toggle .beh-i--chevron-down {
inline-size: 0.8125rem;
block-size: 0.8125rem;
color: var(--beh-primary);
}
.beh-lang__flag {
inline-size: 1.125rem;
block-size: auto;
border-radius: 2px;
display: inline-block;
flex: none;
}
/* 25 languages will not fit in one laptop-height column, so the panel runs in
two columns with a capped height — one glance instead of one long scroll. */
.beh-lang__panel {
position: absolute;
inset-block-start: calc(100% + 6px);
inset-inline-end: 0;
z-index: var(--beh-z-dropdown);
inline-size: 19.5rem;
columns: 2;
column-gap: 0.5rem;
max-block-size: min(32.5rem, 70vh);
overflow-y: auto;
overscroll-behavior: contain;
margin: 0;
padding: 0.625rem 0.75rem;
list-style: none;
background: var(--beh-surface);
border: 1px solid var(--beh-line);
border-radius: var(--beh-r-md);
box-shadow: var(--beh-shadow-xl);
/* Same reasoning as the nav panels above: a closed 19.5rem panel anchored
to the end of the bar would otherwise widen the document. */
display: none;
}
.beh-lang.is-open .beh-lang__panel {
display: block;
animation: beh-panel-in var(--beh-dur-fast) var(--beh-ease);
}
.beh-lang__panel li {
break-inside: avoid;
}
.beh-lang__panel a {
display: flex;
align-items: center;
gap: 0.4375rem;
padding: 0.375rem 0.4375rem;
border-radius: var(--beh-r-xs);
font-size: var(--beh-fs-sm);
font-weight: 650;
color: var(--beh-navy);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.beh-lang__panel a:hover {
background: var(--beh-pale);
color: var(--beh-primary);
}
.beh-lang__panel .is-current > a {
color: var(--beh-primary);
background: var(--beh-primary-050);
}
/* -------------------------------------------------------------------------
7. Header search
---------------------------------------------------------------------- */
.beh-headersearch {
position: absolute;
inset-inline: 0;
inset-block-start: 100%;
z-index: var(--beh-z-dropdown);
background: var(--beh-surface);
border-block-end: 1px solid var(--beh-line);
box-shadow: var(--beh-shadow-md);
padding-block: var(--beh-s-5);
display: none;
}
.beh-headersearch.is-open {
display: block;
}
.beh-searchform {
display: flex;
gap: var(--beh-s-2);
align-items: center;
}
.beh-searchform__field {
flex: 1;
min-inline-size: 0;
padding: 0.8125rem 1rem;
border: 1px solid var(--beh-line);
border-radius: var(--beh-r-sm);
background: var(--beh-surface);
font-size: var(--beh-fs-md);
color: var(--beh-navy);
}
.beh-searchform__field::placeholder {
color: var(--beh-muted-soft);
}
.beh-searchform__field:focus {
border-color: var(--beh-primary);
outline: none;
box-shadow: 0 0 0 3px var(--beh-primary-050);
}
/* -------------------------------------------------------------------------
8. Mobile trigger + responsive switch
---------------------------------------------------------------------- */
.beh-burger {
display: none;
}
/*
* Applies from the moment the desktop nav appears (861px), not from 1101px.
*
* Between 861px and 1100px the horizontal menu is shown but the drawer has
* not taken over yet. That band previously kept the old flow layout, so on a
* small laptop or a landscape tablet a menu of any length pushed straight
* past the viewport and gave the whole site a horizontal scrollbar.
*/
@media (min-width: 861px) {
/*
* Three tracks: brand, navigation, tools — with the navigation centred in
* the middle track.
*
* The nav used to be absolutely positioned at left:50% with a translate,
* which centres it but takes it out of flow: it has no idea the brand and
* the tools exist. As soon as the menu grew past the space between them it
* simply overlapped the logo. A grid keeps the same centred appearance
* while letting the three regions actually negotiate for width.
*/
.beh-header__inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--beh-s-5);
}
.beh-nav {
display: flex;
justify-content: center;
min-inline-size: 0;
margin: 0;
gap: var(--beh-s-7);
}
.beh-nav__list {
/* A menu that outgrows the middle track wraps onto a second line
rather than colliding with its neighbours. */
flex-wrap: wrap;
justify-content: center;
row-gap: 0.25rem;
}
.beh-tools {
margin-inline-start: 0;
justify-self: end;
}
}
@media (max-width: 1100px) and (min-width: 861px) {
.beh-nav__list {
gap: 0.875rem;
}
.beh-nav__list a,
.beh-nav__toggle {
font-size: var(--beh-fs-sm);
}
.beh-lang__toggle span:not(.beh-lang__flag) {
display: none;
}
}
@media (max-width: 860px) {
.beh-header__inner {
min-block-size: 68px;
gap: var(--beh-s-3);
}
.beh-burger {
display: grid;
}
/* Desktop nav and the language dropdown are replaced wholesale by the
drawer rather than restyled into it — one behaviour per breakpoint is
far easier to reason about than a hybrid that has to be both. */
.beh-nav,
.beh-tools .beh-lang {
display: none;
}
.beh-tools {
margin-inline-start: auto;
}
}
/* -------------------------------------------------------------------------
9. Mobile drawer
---------------------------------------------------------------------- */
.beh-drawer {
position: fixed;
inset: 0;
z-index: var(--beh-z-drawer);
visibility: hidden;
}
.beh-drawer.is-open {
visibility: visible;
}
.beh-drawer__scrim {
position: absolute;
inset: 0;
background: rgb(7 19 47 / 45%);
opacity: 0;
transition: opacity var(--beh-dur) var(--beh-ease);
}
.beh-drawer.is-open .beh-drawer__scrim {
opacity: 1;
}
.beh-drawer__panel {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
inline-size: min(22.5rem, 88vw);
background: var(--beh-surface);
box-shadow: var(--beh-shadow-lg);
display: flex;
flex-direction: column;
translate: 100% 0;
transition: translate var(--beh-dur) var(--beh-ease);
overscroll-behavior: contain;
}
/* The panel enters from the inline-end edge, which is the left side in RTL. */
[dir='rtl'] .beh-drawer__panel {
translate: -100% 0;
}
.beh-drawer.is-open .beh-drawer__panel {
translate: 0;
}
.beh-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--beh-s-4);
padding: var(--beh-s-4) var(--beh-s-5);
border-block-end: 1px solid var(--beh-line);
flex: none;
}
.beh-drawer__body {
flex: 1;
overflow-y: auto;
padding: var(--beh-s-4) var(--beh-s-5) var(--beh-s-10);
}
.beh-drawer__foot {
flex: none;
padding: var(--beh-s-4) var(--beh-s-5);
border-block-start: 1px solid var(--beh-line);
background: var(--beh-surface-soft);
}
/* Nested menus become accordions. */
.beh-drawer__menu,
.beh-drawer__menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.beh-drawer__menu > li {
border-block-end: 1px solid var(--beh-line-soft);
}
/*
* A drawer row is a flex line: label, then chevron.
*
* An item that points at a real page renders as TWO siblings — the link and a
* separate disclosure button — so that a keyboard user can open the submenu
* without being navigated away. With the
as a plain block and the link at
* width:100%, that button had nowhere to go but the next line, while an item
* whose URL is "#" renders as one button and stayed on a single line. Hence
* "Blog" wrapping and "Kategorie" not.
*
* Making the row a flex container puts both on the same line in either case;
* the submenu takes a full-width basis so it still drops underneath.
*/
.beh-drawer__item {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.beh-drawer__menu a,
.beh-drawer__menu .beh-nav__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--beh-s-3);
flex: 1 1 auto;
min-inline-size: 0;
padding: 0.8125rem 0;
font-size: var(--beh-fs-md);
font-weight: 650;
color: var(--beh-navy);
text-align: start;
}
/* The chevron button sits beside the label, sized to its icon. */
.beh-drawer__menu a + .beh-nav__toggle {
flex: none;
inline-size: auto;
justify-content: center;
padding-inline: var(--beh-s-3);
}
/* The submenu always starts a new line inside the row. */
.beh-drawer__menu ul {
flex-basis: 100%;
}
.beh-drawer__menu ul {
display: none;
margin-block-end: var(--beh-s-3);
padding-inline-start: var(--beh-s-4);
border-inline-start: 2px solid var(--beh-primary);
max-block-size: 18.75rem;
overflow-y: auto;
overscroll-behavior: contain;
}
.beh-drawer__menu .is-open > ul {
display: block;
}
.beh-drawer__menu ul a {
padding: 0.5rem 0;
font-size: var(--beh-fs-sm);
font-weight: 600;
color: var(--beh-body);
}
/* A native select beats a 25-item accordion on a phone: it uses the OS
picker, which is faster to operate and already localised. */
.beh-lang-select {
inline-size: 100%;
padding: 0.6875rem 0.75rem;
border: 1px solid var(--beh-line);
border-radius: var(--beh-r-sm);
background: var(--beh-surface);
font-size: var(--beh-fs-base);
font-weight: 650;
color: var(--beh-navy);
}
/* Stop the page behind the drawer scrolling while it is open. */
body.beh-locked {
overflow: hidden;
}
/* -------------------------------------------------------------------------
10. Footer
---------------------------------------------------------------------- */
.beh-footer {
background: var(--beh-footer-bg);
color: var(--beh-footer-text);
padding-block: var(--beh-s-16) var(--beh-s-6);
font-size: var(--beh-fs-base);
}
.beh-footer__grid {
display: grid;
grid-template-columns: 1.25fr repeat(3, 1fr);
gap: var(--beh-s-10);
}
.beh-footer h2,
.beh-footer h3 {
color: var(--beh-footer-head);
font-size: 1.0625rem;
letter-spacing: -0.01em;
margin-block-end: var(--beh-s-4);
}
.beh-footer a {
color: var(--beh-footer-text);
}
.beh-footer a:hover {
color: #fff;
}
.beh-footer__menu {
margin: 0;
padding: 0;
list-style: none;
}
.beh-footer__menu a {
display: block;
padding-block: 0.4375rem;
}
.beh-footer .beh-brand,
.beh-footer .beh-brand:hover {
color: #fff;
}
.beh-footer__tagline {
margin-block-start: var(--beh-s-4);
max-inline-size: 30ch;
}
.beh-footer__social {
display: flex;
gap: var(--beh-s-2);
margin-block-start: var(--beh-s-5);
}
.beh-footer__social a {
display: grid;
place-items: center;
inline-size: 2.25rem;
block-size: 2.25rem;
border: 1px solid var(--beh-footer-line);
border-radius: 50%;
transition: background var(--beh-dur-fast) var(--beh-ease),
border-color var(--beh-dur-fast) var(--beh-ease);
}
.beh-footer__social a:hover {
background: var(--beh-primary);
border-color: var(--beh-primary);
}
.beh-footer__social .beh-i {
inline-size: 1rem;
block-size: 1rem;
}
/* The medical disclaimer is the most legally significant text on the page:
it gets a rule above it and never drops below 13px. */
.beh-footer__disclaimer {
border-block-start: 1px solid var(--beh-footer-line);
margin-block-start: var(--beh-s-10);
padding-block-start: var(--beh-s-6);
font-size: var(--beh-fs-sm);
line-height: 1.7;
}
.beh-footer__bar {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--beh-s-5);
margin-block-start: var(--beh-s-5);
font-size: var(--beh-fs-sm);
}
.beh-footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.beh-footer__legal li {
display: inline-flex;
align-items: center;
}
.beh-footer__legal li + li::before {
content: '\00B7';
margin-inline-end: 0.5rem;
color: var(--beh-footer-line);
}
/* -------------------------------------------------------------------------
11. Back to top
---------------------------------------------------------------------- */
.beh-to-top {
position: fixed;
inset-block-end: 1.5rem;
inset-inline-end: 1.5rem;
z-index: var(--beh-z-sticky);
display: grid;
place-items: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border: 1px solid var(--beh-line);
border-radius: 50%;
background: var(--beh-surface);
color: var(--beh-navy);
box-shadow: var(--beh-shadow-md);
opacity: 0;
translate: 0 12px;
pointer-events: none;
transition: opacity var(--beh-dur) var(--beh-ease),
translate var(--beh-dur) var(--beh-ease),
background var(--beh-dur-fast) var(--beh-ease);
}
.beh-to-top.is-visible {
opacity: 1;
translate: 0;
pointer-events: auto;
}
.beh-to-top:hover {
background: var(--beh-primary);
border-color: var(--beh-primary);
color: #fff;
}
@media (max-width: 1000px) {
.beh-footer__grid {
grid-template-columns: 1fr 1fr;
gap: var(--beh-s-8);
}
}
@media (max-width: 640px) {
.beh-footer__grid {
grid-template-columns: 1fr;
}
.beh-footer__bar {
flex-direction: column;
gap: var(--beh-s-3);
}
.beh-to-top {
inset-block-end: 1rem;
inset-inline-end: 1rem;
}
}
/* Administrator-only prompt shown in the drawer when no menu is assigned. */
.beh-drawer__setup {
margin: var(--beh-s-4) 0 0;
padding: var(--beh-s-4);
background: var(--beh-surface-soft);
border: 1px dashed var(--beh-line-strong);
border-radius: var(--beh-r-md);
font-size: var(--beh-fs-base);
font-weight: 700;
}