/*
 * Public site chrome: the one navbar (partials/public-nav.leaf), the one
 * footer (partials/public-footer.leaf) and the shared marketing buttons.
 * Linked from partials/public-assets.leaf on every public page, the
 * homepage included. Not part of the Tailwind build, so `npm run build`
 * does not touch it. Colours, spacing and type come from the --fk-* tokens
 * in Resources/css/tokens.css (compiled into admin.css, which every public
 * page loads first).
 *
 * The mobile menu is a <details> element: it opens and closes with no
 * script. Everything that moves moves on transform or opacity.
 */

/* ---------- Inter (self-hosted) ----------
 * Inter 4 variable (weights 100-900) from @fontsource-variable/inter 5.2.8,
 * SIL Open Font License 1.1 (Public/fonts/inter/5.2.8/LICENSE.txt). Three
 * subsets: Latin, Latin Extended and Cyrillic (the ru locale); the browser
 * downloads a subset only when the page uses a character in its range. The
 * files are served with a one-year immutable cache, so an upgrade goes in a
 * new version folder rather than overwriting these. The family is named
 * "Inter" so Tailwind's font-sans stack picks it up unchanged. */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/inter/5.2.8/inter-cyrillic-wght-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/inter/5.2.8/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/inter/5.2.8/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* `hidden` must win over utility display classes (flex, grid) on the
   elements scripts show and hide. */
[hidden] {
    display: none !important;
}

.fk-nav,
.fk-site-footer,
.fk-site-btn {
    font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* ---------- Skip link ---------- */

.fk-skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: calc(var(--fk-z-nav) + 1);
    padding: 0.5rem 0.9rem;
    border-radius: var(--fk-radius-md);
    background: var(--fk-surface-inverse);
    color: var(--fk-text-inverse);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

.fk-skip-link:focus {
    transform: none;
    outline: 2px solid var(--fk-focus, var(--fk-primary-text));
    outline-offset: 2px;
}

/* ---------- Navbar ---------- */

.fk-nav.navbar {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: var(--fk-z-nav);
    color: var(--fk-ink);
    background-color: var(--fk-glass-bg);
    border-bottom: 1px solid var(--fk-hairline);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* The homepage hero has its own top wash, so the bar starts clear there and
   main.js adds .navbar-blur once the page scrolls. */
.fk-nav.fk-nav--overlay:not(.navbar-blur) {
    background-color: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* main.js also toggles Tailwind's bg-white/80 and shadow-sm on .navbar.
   Keep the glass on the token. */
.fk-nav.navbar.navbar-blur {
    background-color: var(--fk-glass-bg);
    box-shadow: none;
}

.fk-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fk-space-md);
    max-width: var(--fk-container);
    height: 4rem;
    margin-inline: auto;
    padding-inline: var(--fk-gutter);
}

/* The brand may shrink (the wordmark truncates); .fk-nav__end never does, so the
   menu button is always fully on screen, down to 320px. */
.fk-nav__brand {
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    color: var(--fk-ink);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.fk-nav__logo {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
}

.fk-nav__wordmark {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fk-nav__links {
    display: none;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fk-nav__links a,
.fk-nav__signin {
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-small);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.fk-nav__links a:hover,
.fk-nav__signin:hover {
    color: var(--fk-ink);
}

.fk-nav__links a[aria-current="page"] {
    color: var(--fk-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--fk-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.5em;
}

.fk-nav__end {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.75rem;
}

.fk-nav__signin {
    display: none;
}

.fk-nav__cta {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.9rem;
    border-radius: var(--fk-radius-pill);
    background: var(--fk-surface-inverse);
    color: var(--fk-text-inverse);
    font-size: var(--fk-font-small);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Theme switcher (components/theme-switcher): icon-only in the bar from 640px,
   labelled in the menu panel below that. */
.fk-nav__theme {
    display: none;
}

.fk-nav__theme [data-action="set-theme"] {
    padding: 0.35rem 0.45rem;
}

.fk-nav__panel-theme {
    display: flex;
    justify-content: center;
    margin-top: var(--fk-space-xs);
    padding-top: var(--fk-space-xs);
    border-top: 1px solid var(--fk-hairline);
}

/* Mobile menu: a 44px button. */
.fk-nav__menu {
    flex: 0 0 auto;
}

.fk-nav__menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--fk-hairline);
    border-radius: var(--fk-radius-md);
    background: var(--fk-surface-raised);
    color: var(--fk-ink);
    cursor: pointer;
    list-style: none;
}

.fk-nav__menu > summary::-webkit-details-marker {
    display: none;
}

.fk-nav__menu-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.fk-nav__menu-icon--close,
.fk-nav__menu[open] .fk-nav__menu-icon--open {
    display: none;
}

.fk-nav__menu[open] .fk-nav__menu-icon--close {
    display: block;
}

.fk-nav__panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    inset-inline: var(--fk-gutter);
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--fk-space-sm);
    border: 1px solid var(--fk-hairline);
    border-radius: var(--fk-radius-lg);
    background: var(--fk-surface-raised);
    box-shadow: var(--fk-shadow-xl);
}

/* A closed <details> still lays out its content in Chrome (content-visibility),
   and the panel then widened the page by ~24px at 640-1023px. Take it out of
   layout until the menu opens. */
.fk-nav__menu:not([open]) .fk-nav__panel {
    display: none;
}

.fk-nav__panel ul {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fk-nav__panel a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: var(--fk-space-sm);
    border-radius: var(--fk-radius-md);
    color: var(--fk-ink);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
}

.fk-nav__panel a:hover,
.fk-nav__panel a[aria-current="page"] {
    background: var(--fk-surface-alt);
}

.fk-nav__panel a[aria-current="page"] {
    font-weight: 600;
}

.fk-nav__panel-end {
    gap: var(--fk-space-xs);
    margin-top: var(--fk-space-xs);
    padding-top: var(--fk-space-xs);
    border-top: 1px solid var(--fk-hairline);
}

.fk-nav__panel .fk-nav__panel-cta a {
    justify-content: center;
    background: var(--fk-surface-inverse);
    color: var(--fk-text-inverse);
    font-weight: 600;
}

.fk-nav__panel .fk-nav__panel-cta a:hover {
    background: var(--fk-surface-inverse);
    opacity: 0.92;
}

@media (prefers-reduced-motion: no-preference) {
    .fk-nav__menu[open] .fk-nav__panel {
        animation: fk-nav-panel-in var(--fk-duration-fast, 160ms) var(--fk-ease-out, ease-out);
    }
}

@keyframes fk-nav-panel-in {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }
}

.fk-nav__links a:focus-visible,
.fk-nav__signin:focus-visible,
.fk-nav__cta:focus-visible,
.fk-nav__brand:focus-visible,
.fk-nav__menu > summary:focus-visible,
.fk-nav__panel a:focus-visible {
    outline: 2px solid var(--fk-focus, var(--fk-primary-text));
    outline-offset: 3px;
}

/* Get Started sits in the bar from 370px (it fits beside the full wordmark and the
   menu button); below that it is the last item in the menu. */
@media (min-width: 370px) {
    .fk-nav__cta {
        display: inline-flex;
    }

    .fk-nav__panel-cta {
        display: none;
    }
}

@media (min-width: 640px) {
    .fk-nav__signin {
        display: inline;
    }

    .fk-nav__theme {
        display: block;
    }

    .fk-nav__panel-theme {
        display: none;
    }

    .fk-nav__panel-end {
        display: none;
    }
}

@media (min-width: 1024px) {
    .fk-nav__links {
        display: flex;
    }

    .fk-nav__menu {
        display: none;
    }
}

/* Long URLs, addresses and inline code in body copy (the privacy policy's
   supervisory authority link, Kotlin and REST API identifiers in the docs)
   wrap instead of widening the page at 320px. */
.prose a,
main p > code,
main li > code {
    overflow-wrap: anywhere;
}

/* ---------- Footer ---------- */

.fk-site-footer {
    padding-block: var(--fk-space-2xl);
    border-top: 1px solid var(--fk-hairline);
    background: var(--fk-surface);
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-small);
}

.fk-site-footer__wrap {
    width: min(var(--fk-container), 100%);
    margin-inline: auto;
    padding-inline: var(--fk-gutter);
}

.fk-site-footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fk-space-xl) var(--fk-space-lg);
}

.fk-site-footer__about {
    grid-column: 1 / -1;
}

/* A column holds one link group, or two stacked (Company over Legal). */
.fk-site-footer__col {
    display: grid;
    align-content: start;
    gap: var(--fk-space-xl);
}

.fk-site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fk-ink);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
}

.fk-site-footer__brand img {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
}

.fk-site-footer__tagline {
    max-width: 18rem;
    margin: var(--fk-space-md) 0 0;
    line-height: var(--fk-leading-body);
}

.fk-site-footer__byline {
    margin: var(--fk-space-xs) 0 0;
}

.fk-site-footer__social {
    margin-top: var(--fk-space-md);
}

.fk-site-footer h2 {
    margin: 0 0 var(--fk-space-md);
    color: var(--fk-ink);
    font-size: var(--fk-font-eyebrow);
    font-weight: 600;
    letter-spacing: var(--fk-tracking-eyebrow);
    text-transform: uppercase;
}

.fk-site-footer ul {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fk-site-footer a {
    color: inherit;
    text-decoration: none;
}

.fk-site-footer a.fk-site-footer__brand {
    color: var(--fk-ink);
}

.fk-site-footer a:hover {
    color: var(--fk-ink);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.fk-site-footer__social a:hover {
    text-decoration: none;
}

.fk-site-footer a:focus-visible {
    outline: 2px solid var(--fk-ink);
    outline-offset: 3px;
    border-radius: var(--fk-radius-sm);
}

.fk-site-footer__bar {
    margin-top: var(--fk-space-2xl);
    padding-top: var(--fk-space-lg);
    border-top: 1px solid var(--fk-hairline);
    /* Copyright at the start, theme switcher (components/theme-switcher) at the end; they
     * stack once the row runs out of room. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fk-space-md);
}

.fk-site-footer__bar p {
    margin: 0;
}

/* Below 1024px the brand block spans the row and the four columns sit 2x2
 * under it; that holds down to phone width, where the longest label
 * ("Terms of Service") still fits half the row. */
@media (min-width: 1024px) {
    .fk-site-footer__grid {
        grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
    }

    .fk-site-footer__about {
        grid-column: auto;
    }
}

/* ---------- SDK docs layout (layouts/docs-sdk.leaf) ---------- */

.docs-sidebar a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--fk-radius-md);
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-small);
    font-weight: 500;
    text-decoration: none;
}

.docs-sidebar a::before {
    content: "";
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--fk-hairline);
}

.docs-sidebar a:hover {
    background: var(--fk-surface-alt);
    color: var(--fk-ink);
}

.docs-sidebar a[aria-current] {
    background: var(--fk-primary-soft);
    color: var(--fk-primary-text);
}

.docs-sidebar a[aria-current]::before {
    background: var(--fk-primary);
}

.docs-sections-bar a {
    flex: none;
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-small);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.docs-sections-bar a[aria-current] {
    color: var(--fk-primary-text);
}

.docs-sidebar a:focus-visible,
.docs-sections-bar a:focus-visible {
    outline: 2px solid var(--fk-focus, var(--fk-primary-text));
    outline-offset: 2px;
}

.docs-versions {
    margin-bottom: 3rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--fk-hairline);
    border-radius: var(--fk-radius-lg);
    background: var(--fk-surface-alt);
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-small);
    line-height: var(--fk-leading-body);
}

.docs-versions h2 {
    margin: 0 0 0.25rem;
    color: var(--fk-ink);
    font-size: 1rem;
    font-weight: 700;
}

.docs-versions p {
    margin: 0;
}

.docs-versions code {
    padding: 0.05rem 0.3rem;
    border-radius: 0.3rem;
    background: var(--fk-surface-raised);
    font-size: 0.85em;
}

.docs-install {
    max-width: 100%;
}

.docs-install > span:not(.docs-install__prompt) {
    overflow-wrap: anywhere;
}

/* ---------- Buttons ---------- */

.fk-site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.65rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--fk-radius-pill);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.fk-site-btn--primary {
    background: var(--fk-surface-inverse);
    color: var(--fk-text-inverse);
}

.fk-site-btn--accent {
    background: var(--fk-accent-gradient);
    color: var(--fk-primary-contrast, #111827);
}

.fk-site-btn--quiet {
    border-color: var(--fk-hairline);
    background: var(--fk-surface-raised);
    color: var(--fk-ink);
}

.fk-site-btn--block {
    width: 100%;
}

.fk-site-btn:disabled,
.fk-site-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.fk-site-btn:focus-visible {
    outline: 2px solid var(--fk-focus, var(--fk-primary-text));
    outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    .fk-nav__cta,
    .fk-site-btn {
        transition: transform var(--fk-duration-fast) var(--fk-ease-out);
    }

    .fk-nav__cta:hover,
    .fk-site-btn:not(:disabled):hover {
        transform: translateY(-1px);
    }
}