/* Shared sizing for header tools and the user menu across themes and pages. */
html body.hx-site .main-header {
    --header-tool-size:38px;
}
html body.hx-site .main-header .header-actions :is(#searchToggle,#themeToggle,.hx-appearance > summary) {
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    width:var(--header-tool-size);
    min-width:var(--header-tool-size);
    height:var(--header-tool-size);
    min-height:var(--header-tool-size);
    padding:0;
    gap:0;
    flex-shrink:0;
}
html body.hx-site .main-header .header-actions #userMenuBtn {
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    height:var(--header-tool-size);
    min-height:var(--header-tool-size);
    flex-shrink:0;
}
html body.hx-site .main-header .header-actions .hx-appearance > summary span { display:none; }
html body.hx-site .main-header .header-actions :is(#searchToggle,#themeToggle,.hx-appearance > summary) > i {
    font-size:16px;
    line-height:1;
    width:16px;
    text-align:center;
    margin:0;
}
html body.hx-site .main-header .header-actions :is(#searchToggle,#themeToggle,.hx-appearance > summary,#userMenuBtn):focus-visible {
    outline:2px solid var(--hx-accent);
    outline-offset:3px;
}
@media(max-width:1199px), (pointer:coarse) {
    html body.hx-site .main-header { --header-tool-size:44px; }
}

html body.hx-site .main-header #mobileMenuToggle {
    box-sizing:border-box;
    width:var(--header-tool-size);
    min-width:var(--header-tool-size);
    height:var(--header-tool-size);
    min-height:var(--header-tool-size);
    padding:0;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
html body.hx-site .main-header #mobileMenuToggle > i { font-size:18px; line-height:1; }
html body.hx-site .main-header #mobileMenuToggle:focus-visible { outline:2px solid var(--hx-accent); outline-offset:3px; }
/* Keep one sizing rule for original and uploaded logos. The image keeps its
   aspect ratio and uses the available space beside the touch controls. */
html[data-variant] body.hx-site[data-page] .main-header .logo-section {
    gap:8px;
    min-width:0;
}
html[data-variant] body.hx-site[data-page] .main-header .navbar-brand {
    display:flex;
    align-items:center;
    flex:0 1 160px;
    width:160px;
    max-width:100%;
    min-width:0;
    height:var(--header-tool-size);
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    box-sizing:border-box;
}
html[data-variant] body.hx-site[data-page] .main-header .navbar-brand :is(img,svg.hx-logo-light,svg.hx-logo-dark) {
    display:block;
    width:100%;
    height:100%;
    min-width:0;
    max-width:100%;
    max-height:none;
    margin:0;
    object-fit:contain;
    object-position:left center;
}
@media(min-width:768px) {
    html[data-variant] body.hx-site[data-page] .main-header .header-container { flex-wrap:nowrap; }
}
@media(max-width:767px) {
    html[data-variant] body.hx-site[data-page] .main-header .header-container { column-gap:4px; }
    html[data-variant] body.hx-site[data-page] .main-header .logo-section { gap:6px; }
}