/*
 * Canonical portal-owned site chrome CSS.
 * Merged from base.css, manual.css, javadoc-dark-theme.css, and (former)
 * build-tool.css / build-tool-modern.css — one rule per unique selector
 * (priority: manual.css > javadoc-dark-theme.css > base.css > build-tool.css).
 * Loaded by every doc page via build_tool_head.template.
 */

/* Self-hosted Lato font faces. Duplicated here (also in gradle/gradle base.css / manual.css)
   because javadoc pages don't load either of those, and chrome uses font-weight: 500 (semibold)
   which would otherwise fall back to synthesized bold on javadoc. */

/* ===== top-level rules ===== */

.hamburger {
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: auto;
    padding: 11px 10px;
}

.hamburger:focus { outline: 0; }

.hamburger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--fg-color);
    border-radius: 1px;
}

.hamburger__bar + .hamburger__bar { margin-top: 4px; }

.logo {
    display: inline-block;
    width: 200px;
    padding: 10px;
}

/* Lock the header logo SVG at its intended size — the <svg width="158" height="33"> HTML attributes
   have the lowest CSS specificity, so any ambient container rule (e.g. javadoc's flex constraints,
   font-metric-driven inline sizing) could otherwise change how it renders. */
.logo svg {
    width: 158px;
    height: 33px;
    display: block;
}

.site-footer {
    position: relative;
    z-index: 2;
    background-color: var(--footer-color);
    padding: 0 0 0 0;
    border-top: 1px solid var(--various-border-color);
    transition: background-color 0.3s ease;
}

.site-footer a {
    color: var(--footer-link-color, #02303A);
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    text-decoration: underline;
}

.site-footer-secondary {
    background-color: var(--top-header-color);
    border-top: 1px solid var(--various-border-color);
    width: 100%;
    position: relative;
    z-index: 2;
    transition: background-color 0.3s ease;
}

.site-footer-secondary a { color: var(--footer-other-text-color); }

.site-footer-secondary__contents {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

.site-footer-secondary__links a:not(:first-child) { padding-left: 10px; }

.site-footer-secondary__links a:not(:last-child) { padding-right: 10px; }

.site-footer__copy { flex-shrink: 1; }

.site-footer__copy {
    flex-grow: 0;
}

.site-footer__logo {
    flex: 0 0 auto;
    margin-right: 10px;
    margin-left: 10px;
}

.site-footer__logo svg { width: 35px; height: 35px; }

.site-footer__navigation {
    display: flex;
    justify-content: center;
    padding: 30px 12px;
    max-width: 62.5rem;
    margin: 0 auto;
}

.site-footer__subscribe-newsletter {
    width: 100%;
    max-width: 480px;
    text-align: center;
}

.site-footer__subscribe-newsletter .disclaimer {
    color: var(--footer-other-text-color);
    font-size: 0.75rem;
    opacity: 0.55;
}

.site-footer__subscribe-newsletter .email {
    line-height: 40px;
    width: 250px;
    color: #1DA2BD;
    font-size: 16px;
    padding-left: 20px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 1px solid var(--footer-form-color);
}

.site-footer__subscribe-newsletter .email,
.site-footer__subscribe-newsletter .submit {
    height: 40px;
}

.site-footer__subscribe-newsletter .newsletter-form {
    padding-top: 6px;
    display: flex;
    justify-content: center;
    border: 0;
}

.site-footer__subscribe-newsletter .newsletter-form__header h5 {
    color: var(--text-color);
    margin-top: 0;
}

.site-footer__subscribe-newsletter .submit {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    width: 100px;
    background-color: #1BA8CB;
    color: #fff;
    font-weight: 500;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-style: none;
    cursor: pointer;
    transition: all .3s ease;
}

.site-footer__subscribe-newsletter p {
    font-size: 0.875rem;
    margin: 2px 0 0 2px;
    opacity: 0.7;
}

.site-header {
    /* Light-theme scoped variables. Dark-theme counterparts live in [data-theme="dark"] .site-header below.
       These need to be defined here (not just at :root) because submenu backgrounds and other chrome
       elements read them via var(--menu-burger-color) etc. — without these, unstyled = transparent. */
    --text-color: #02303A;
    --fg-color: #000;
    --top-header-color: #fff;
    --box-shadow-color: rgba(0, 0, 0, .15);
    --menu-burger-color: #fff;
    --header-border-color: #dddddd;

    /* Explicit typography baseline so chrome doesn't inherit differences from the surrounding page —
       javadoc's stock stylesheet.css sets body { font-family: DejaVu Sans; font-size: 14.2px } which
       would otherwise leak into the header. Setting these on .site-header lets everything inside
       (nav items, submenu links, hamburger button, version selector) render identically across
       user manual / DSL / javadoc / kotlin-dsl / release notes. */
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-color);

    background-color: var(--top-header-color);
    /* padding + height mirror gradle.org's site-header (padding: 12px; height: 80px) so
       the docs chrome sits at the same visual size as the marketing site. */
    padding: 12px;
    height: 80px;
    box-sizing: border-box;
    transition: background-color 0.3s ease;

    /* Vertically center inner content (the <nav>) within the fixed 80px box. gradle.org
       doesn't need this because their nav items happen to fill the box, but our nav items
       are shorter — without flex centering they stick to the top of the padding area. */
    display: flex;
    align-items: center;

    /* Establish a high-z stacking context so submenus pop out above other page chrome —
       javadoc's <nav class="top-nav">, Dokka's ui-kit sticky navbar on kotlin-dsl pages,
       etc. — all of which follow the site-header in DOM order and would otherwise render
       on top of expanded submenus. Value chosen to comfortably beat third-party doc-tool
       CSS while leaving headroom for modals/toasts that legitimately need to render above. */
    position: relative;
    z-index: 9999;
}

/* Same isolation for the footer — javadoc pages excluded anyway (build.gradle),
   but DSL / kotlin-dsl / release notes all benefit. */
.site-footer, .site-footer-secondary {
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.site-header div {
    font-family: 'Lato', Arial, sans-serif;
}

/* Single canonical rule for the version display slot. Vertical positioning is handled
   by .site-header's flex centering (align-items: center) — no margin-top hacks. */
.site-header-version {
    color: #1da2bd;
    font-size: 20px;
    line-height: 1;
}

.site-header__navigation {
    z-index: 2;
    display: flex;
    flex-direction: column;
    /* Fill the parent .site-header (which is now display:flex + align-items:center) so
       the nav spans full width instead of shrinking to content. Matches gradle.org's
       .site-header__navigation { width: 100% }. */
    width: 100%;
}

.site-header__navigation-collapsible {
    flex: 1 1 auto;
    height: 210px;
    overflow: visible;
    transition: height 0.3s ease;
}

.site-header__navigation-header {
    display: flex;
    flex: 0 0 auto;
    margin-left: 12px;
}

.site-header__navigation-header a {
    align-self: center;
    border-bottom: 0 none;
    /* Override release-notes/DSL baked `height: 36px` that crops the logo. */
    height: auto;
}

.site-header__navigation-item {
    flex: 0 1 auto;
    font-size: 16px;
    width: 250px;
    /* Explicit margin/padding reset — user manual's manual.css has a global `li { margin: 0;
       padding: 0 }` reset, but DSL (base.css) and release notes don't, so without this,
       nav items render 4px taller on those doc types (browser default li margin). Setting
       explicitly here guarantees identical item height regardless of ambient CSS. */
    margin: 0;
    padding: 0;
}

.site-header__navigation-item .site-header__navigation-link {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 100%;
    padding: 5px;
    line-height: 20px;
    border: 0 none;
    color: var(--text-color);
    text-decoration: none;
    transition: none;
}

.site-header__navigation-item .site-header__navigation-link svg path {
    fill: currentColor;
}

.site-header__navigation-item .site-header__navigation-link.active {
    font-weight: 500;
}

.site-header__navigation-item .site-header__navigation-link:hover {
    color: #1DA2BD;
}

.site-header__navigation-item .site-header__navigation-link:hover path {
    fill: #1DA2BD;
}

.site-header__navigation-items {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    height: 100%;
    margin: 0 20px;
    padding-top: 12px;
    padding-left: 0;
    list-style-type: none;
}

.site-header__navigation-submenu-item { padding: 2px 0; }

.site-header__navigation-submenu-section {
    position: relative;
}

.site-header__navigation-submenu-section .site-header__navigation-link:hover path {
    fill: none;
}

.site-header__navigation-submenu-section .site-header__navigation-submenu {
    display: none;
    width: 170px;
    background-color: var(--menu-burger-color);
    top: 100%;
    left: 7px;
    padding: 3px 10px 6px 10px;
    z-index: 100;
}

.site-header__navigation-submenu-section .site-header__navigation-submenu .site-header__navigation-submenu-item-link {
    width: 100%;
    color: var(--text-color);
    white-space: nowrap;
    display: inline-block;
    padding-top: 3px;
    border: 0 none;
    transition: none;
}

.site-header__navigation-submenu-section .site-header__navigation-submenu .site-header__navigation-submenu-item-link .site-header__navigation-submenu-item-link-text {
    display: inline-block;
    font-size: 16px;
}

.site-header__navigation-submenu-section .site-header__navigation-submenu .site-header__navigation-submenu-item-link-text {
    display: inline-block;
    font-size: 16px;
}

.site-header__navigation-submenu-section .site-header__navigation-submenu .site-header__navigation-submenu-item-link:hover {
    color: #1DA2BD;
}

.site-header__navigation-submenu-section.open .site-header__navigation-submenu {
    display: block;
}

.theme-toggle {
    cursor: pointer;
    display: inline-block;
}

/* ===== Version selector (inlined into .site-header via site-header.html) ===== */

/* .site-header__navigation-items has float:right at desktop; suppress it here
   so the version <ul> doesn't escape its .site-header__navigation-header slot. */
.site-header__version-select {
    float: none;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

/* Tint the shared :after triangle arrow blue on the version selector so it stands out
   as an interactive control (rest of the nav sections keep the default text color). */
.site-header__version-select > .site-header__navigation-submenu-section:after {
    color: #1DA2BD;
}

.site-header__version-select .site-header__navigation-item {
    font-size: 20px;
    width: auto;
}

.site-header__version-select .site-header__navigation-submenu-item,
.site-header__version-select .site-header__navigation-submenu-item-link {
    font-size: 16px;
    font-weight: 400;
    height: auto;
}

.site-header__version-select .site-header__navigation-submenu {
    left: 0;
}

.site-header__version-select .site-header-version {
    padding-left: 0;
}

/* Reserve room for the :after dropdown arrow — version text is too short otherwise.
   Extra class in selector beats userguide's baked `:last-of-type { padding-right: 0 }`. */
.site-header__version-select .site-header__navigation-item .site-header__navigation-link {
    padding-right: 30px;
}

@media screen and (min-width: 64rem) {
    /* Hover bridge: keeps submenu open while moving mouse down to it */
    .site-header__version-select .site-header__navigation-submenu-section::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 0;
        width: 100%;
        height: 25px;
        background: transparent;
    }
}

/* ===== dark-theme overrides ===== */

[data-theme="dark"] .logo {
    color: #fff;
}

[data-theme="dark"] .logo svg path:not([fill^="url"]) {
    fill: currentColor;
}

[data-theme="dark"] .site-footer-secondary {
    border-top: none;
}

[data-theme="dark"] .site-footer {
    --footer-link-color: #cccccc;
}

[data-theme="dark"] .site-footer__logo svg path {
    fill: #fff;
}

[data-theme="dark"] .site-header {
    --text-color: #aaa;
    --fg-color: #fff;
    --top-header-color: #242526;
    --box-shadow-color: rgba(255, 255, 255, .15);
    --menu-burger-color: #242526;
    --header-border-color: #444;
}

@media (max-width: 1023px) {
    

    

    .site-footer__navigation {
            flex-direction: column;
        }

    /* .site-header base rule (padding: 12px; height: 80px; position: relative) already
       matches gradle.org — no mobile override needed. */

    .site-header-version { display: none; }

    .site-header__navigation-collapsible {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: var(--top-header-color);
            z-index: 100;
            max-height: calc(100vh - 60px);
            overflow-y: auto;
            height: auto;
        }

    .site-header__navigation-collapsible--collapse {
            display: none;
        }

    .site-header__navigation-item { width: 100%; }

    .site-header__navigation-item,
        .site-header__navigation-submenu-section .site-header__navigation-submenu .site-header__navigation-submenu-item-link .site-header__navigation-submenu-item-link-text {
            font-size: 18px;
        }

    .site-header__navigation-items {
            max-height: none;
            flex-wrap: nowrap;
            height: auto;
            padding-bottom: 1rem;
        }

    .site-header__navigation-submenu-section .site-header__navigation-submenu {
            padding: 0 1rem 0.5rem 1.5rem;
            display: none;
        }

    .site-header__navigation-submenu-section.open .site-header__navigation-submenu {
            display: block;
        }

}

@media (min-width: 1024px) {
    .javadoc .notification ~ .site-header, .release-notes .notification ~ .site-header {
            top: auto;
        }

    .site-header {
            box-shadow: 0 2px 2px 0 var(--box-shadow-color);
            margin-bottom: 0;
            /* padding/z-index intentionally not overridden — base rule (padding: 12px,
               z-index: 9999) matches gradle.org sizing + our stacking context needs. */
        }

    .site-header__navigation {
            flex-direction: row;
        }

    .site-header__navigation-button { display: none; }

    .site-header__navigation-collapsible { height: auto; }

    .site-header__navigation-header {
            margin-top: 5px;
        }

    .site-header__navigation-item {
            width: auto;
        }

    .site-header__navigation-item .site-header__navigation-link {
            padding: 15px 26px;
        }

    .site-header__navigation-items {
            flex-direction: row;
            align-items: center;
            float: right;
            width: auto;
            padding-top: 0;
        }

    

    .site-header__navigation-submenu-section .site-header__navigation-submenu {
            position: absolute;
            border: 1px solid #9a9a9a;
            border-radius: 3px;
        }

    .site-header__navigation-submenu-section:after {
            content: '\2023';
            font-size: 28px;
            position: absolute;
            transform: rotate(90deg);
            margin-right: 10px;
            top: 5px;
            right: -2px;
        }

    .site-header__navigation-submenu-section:hover .site-header__navigation-submenu {
            display: block;
        }

}

@media all and (max-height: 56.25rem) {
    .site-footer__navigation {
            margin: 1.5rem auto 1.5rem auto;
            padding-top: 0;
            padding-bottom: 0;
        }

}

@media all and (max-width: 29.99rem) {
    .site-footer-secondary__links { display: none; }

    .site-footer__copy { order: 2; text-align: right; }

    

    .site-footer__logo { order: 1; text-align: left; }

    .site-footer__navigation {
            margin: 0.5rem auto;
        }

    .site-footer-secondary__links {
            display: none;
        }

}

@media screen and (min-width: 100rem) {
    

    .site-footer__navigation {
            padding-left: 0;
        }

}

@media screen and (min-width: 64rem) {
    

    

    .site-footer__navigation {
            flex-wrap: wrap;
        }

    .site-header  {
            margin-bottom: 0;
            z-index: 2;
        }

    .site-header__navigation-header {
            margin-top: 5px;
        }

    /* .site-header__navigation-submenu-section:after arrow already defined in the
       @media (min-width: 1024px) block above; that also matches 64rem+ screens (assuming
       16px root font-size), so no need to re-declare here. */

}

@media screen and (min-width: 75rem) {
    

    .site-footer__navigation {
            flex-wrap: wrap;
            margin-left: auto;
            padding-left: 3rem;
        }

    .site-footer__subscribe-newsletter {
            /* A fix so subscribe disclaimer does not go under long ToC */
            max-width: calc(100% - 17rem);
        }

}

@media screen and (min-width: 80rem) {
    .site-footer__subscribe-newsletter {
            max-height: none;
        }

}