/* Site-wide type scale (+10%) — scales rem-based theme/Tailwind text */
html {
    font-size: 110%;
}

/*
 * Header keeps a fixed 16px baseline so +10% body text does not overflow into social/search.
 * (Page content below the header still uses the scaled root size.)
 */
.makita-site-header {
    font-size: 16px;
}

/* Header layout — logo + nav aligned right with even item spacing */

.makita-site-header > .max-w-screen-2xl > .flex.items-center {
    min-height: 4rem;
    gap: 0.5rem;
}

/* Logo — never shrink; stay above nav if space is tight */
.makita-site-header > .max-w-screen-2xl > .flex > a.flex.shrink-0 {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.makita-site-header > .max-w-screen-2xl > .flex > a.flex.shrink-0 img {
    height: 3rem !important;
    width: auto !important;
}

@media (min-width: 640px) {
    .makita-site-header > .max-w-screen-2xl > .flex > a.flex.shrink-0 img {
        height: 3.25rem !important;
    }
}

@media (min-width: 1280px) {
    .makita-site-header > .max-w-screen-2xl > .flex > a.flex.shrink-0 img {
        height: 3.5rem !important;
    }
}

/* Desktop nav — xl (1280px)+ only; below that use mobile menu (patched in header HTML) */
@media (min-width: 1280px) {
    .makita-site-header > .max-w-screen-2xl > .flex.items-center {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .makita-site-header .makita-header-nav {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        column-gap: 0 !important;
        margin-left: 0.75rem !important;
        margin-right: 0.35rem !important;
        min-width: 0;
        max-width: 100%;
        padding-right: 0;
        overflow: visible;
    }

    /* Equal horizontal rhythm: padding on each slot (link or dropdown wrapper) */
    .makita-site-header .makita-header-nav > a.makita-header-nav-link,
    .makita-site-header .makita-header-nav > .makita-header-nav-dropdown {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
        margin: 0;
    }

    .makita-site-header .makita-header-nav > a.makita-header-nav-link {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
        font-size: 14px;
        letter-spacing: 0;
    }

    .makita-site-header .makita-header-nav > .makita-header-nav-dropdown > .makita-header-nav-link {
        padding: 0.35rem 0 !important;
        font-size: 14px;
    }

    .makita-site-header .makita-header-nav-dropdown > .makita-header-nav-link::after {
        margin-left: 0.2rem;
        vertical-align: middle;
    }

    /* Social icons need more width — show from 2xl */
    .makita-site-header > .max-w-screen-2xl > .flex > div:has(.makita-header-social) {
        display: none !important;
    }

    .makita-site-header > .max-w-screen-2xl > .flex > .flex.items-center.shrink-0:last-child {
        flex-shrink: 0;
        margin-left: 0;
    }
}

@media (min-width: 1280px) and (max-width: 1535px) {
    .makita-site-header > .max-w-screen-2xl > .flex > a.flex.shrink-0 img {
        height: 2.75rem !important;
    }
}

@media (min-width: 1536px) {
    .makita-site-header > .max-w-screen-2xl > .flex > div:has(.makita-header-social) {
        display: flex !important;
        flex-shrink: 0;
    }

    .makita-site-header .makita-header-social {
        margin-left: 0;
        flex-shrink: 0;
    }

    .makita-site-header .makita-header-nav {
        margin-right: 0.5rem !important;
        overflow: visible;
    }

    .makita-site-header .makita-header-nav > a.makita-header-nav-link,
    .makita-site-header .makita-header-nav > .makita-header-nav-dropdown {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .makita-site-header .makita-header-nav > a.makita-header-nav-link,
    .makita-site-header .makita-header-nav > .makita-header-nav-dropdown > .makita-header-nav-link {
        font-size: 15px;
    }

    .makita-site-header .makita-header-nav > a.makita-header-nav-link,
    .makita-site-header .makita-header-nav > .makita-header-nav-dropdown {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }
}