/* ==========================================================================
   Header
   ========================================================================== */

.header {
    overflow: hidden;
}

.print .header {
    display: none;
}



/* ==========================================================================
   Nav
   ========================================================================== */

.header__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    max-width: 1280px;
    margin: 0 auto;
}

.is-mobile .header__nav {
    font-size: 14px;
}



/* ==========================================================================
   Logo Link
   ========================================================================== */

.header__logo-link {
    display: inline-flex;
    align-items: center;
    padding: 28px 24px 18px;
}

.is-mobile .header__logo-link {
    padding: 24px 16px 20px;
}



/* ==========================================================================
   Logo SVG
   ========================================================================== */

.header__logo-svg {
    width: 128px;
}

.is-mobile .header__logo-svg {
    width: 113px;
}


/* ==========================================================================
   Logo Text
   ========================================================================== */

.header__logo-text {
    color: var(--text-color);
    transition: var(--dark-mode-transition);
}



/* ==========================================================================
   Logo Dot
   ========================================================================== */

.header__logo-dot {
    color: var(--link-color);
    transition: var(--dark-mode-transition);
}



/* ==========================================================================
   Links
   ========================================================================== */

.header__links {
    display: flex;
    padding: 0 24px;
    align-items: center;
}

.is-mobile .header__links {
    padding: 0 12px;
    gap: 4px;
}



/* ==========================================================================
   Link
   ========================================================================== */

a.header__link {
    padding: 8px;
    color: inherit;
    transition: inherit;
    font-weight: 600;
    font-weight: bold;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.is-mobile a.header__link {
    padding: 4px;
}