/*
 VerFinder global layout rhythm.
 Base interval: 32px desktop, 24px mobile.
 The desktop header is split into two rows. Half-gaps on adjacent
 rows combine into one full base interval between visible elements.
*/

/* Desktop: top edge -> logo = 32px. */
body .tm-header.uk-visible@m .tm-headerbar-top {
    padding-top: var(--vf-space) !important;
    padding-bottom: calc(var(--vf-space) / 2) !important;
}

/* Desktop: logo -> menu.  The two 16px half-gaps add to 32px. */
body .tm-header.uk-visible@m > .uk-navbar-container,
body .tm-header.uk-visible@m > .uk-navbar-container .uk-navbar {
    min-height: 0 !important;
}

body .tm-header.uk-visible@m > .uk-navbar-container .uk-navbar-nav > li > a {
    min-height: 0 !important;
    padding-top: calc(var(--vf-space) / 2) !important;
    padding-bottom: calc(var(--vf-space) / 2) !important;
}

/* Desktop: menu -> breadcrumb/first content. Again 16 + 16 = 32. */
body[class] #tm-main {
    padding-top: calc(var(--vf-space) / 2) !important;
}

/* Breadcrumb -> the first page block keeps the full 32px base interval. */
body[class] #tm-main > .uk-container > nav[aria-label="Breadcrumb"] {
    margin-bottom: var(--vf-space) !important;
}

/* Mobile header has one visible row. Use 24px above the logo,
   then 12px below it + 12px above the main content = 24px. */
@media (max-width: 959px) {
    body .tm-header-mobile .uk-navbar,
    body .tm-header-mobile .uk-navbar-item,
    body .tm-header-mobile .uk-navbar-toggle {
        min-height: 0 !important;
    }

    body .tm-header-mobile .uk-navbar-item {
        padding-top: var(--vf-space-mobile) !important;
        padding-bottom: calc(var(--vf-space-mobile) / 2) !important;
    }

    body[class] #tm-main {
        padding-top: calc(var(--vf-space-mobile) / 2) !important;
    }

    body[class] #tm-main > .uk-container > nav[aria-label="Breadcrumb"] {
        margin-bottom: var(--vf-space-mobile) !important;
    }
}