/* Peekaboot brand mapping over Bulma 1.0.4.
   Bulma derives its whole colour system from HSL components, so re-branding is a matter
   of three numbers: the mark's green, hsl(93 64% 43%) - the same value
   peekaboot-frontend's tokens.css documents as "straight off the artwork". */
:root {
    --bulma-primary-h: 93;
    --bulma-primary-s: 64%;
    --bulma-primary-l: 43%;

    --bulma-family-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                            Roboto, sans-serif;
    --bulma-family-code: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    --bulma-radius: 6px;
    --bulma-radius-large: 8px;

    /* The brand green is a FILL colour: white on it is 2.6:1 and it is 2.6:1 on white.
       Anything drawn as text on the page background uses these instead - the same split
       tokens.css makes between --pk-primary and --pk-primary-text. */
    --pk-link: #487e1b;         /* 4.91:1 on white */
    --pk-link-hover: #3a6516;
    --pk-sidebar-active: #487e1b;
}

[data-theme="dark"] {
    /* On the dark surface the green clears AA outright, so fill and text tone converge -
       again mirroring tokens.css. This site renders on Bulma's own dark scheme background
       (hsl(221 14% 9%) = #14161a), not the product's #0d1117 - overriding
       --bulma-scheme-h/s/main-l to chase that four-hex-value difference would re-tune every
       grey Bulma derives in dark mode (borders, alt backgrounds, muted text) and risk its
       internal contrast guarantees, for a difference that is imperceptible side by side. */
    --pk-link: #84cf3d;         /* 9.46:1 on Bulma's dark scheme background, hsl(221 14% 9%) */
    --pk-link-hover: #9bdb5e;
    --pk-sidebar-active: #84cf3d;
}

a,
.content a {
    color: var(--pk-link);
}

a:hover,
.content a:hover {
    color: var(--pk-link-hover);
}

/* The navbar, and on doc pages the sidebar, precede <main>; keyboard users get one jump
   past them. Off-screen until focused, so sighted mouse users never see it. */
.pk-skip-link {
    position: absolute;
    top: 0.5rem;
    left: -999px;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--bulma-scheme-main);
    color: var(--pk-link);
}

.pk-skip-link:focus {
    left: 0.5rem;
}

/* Layout: fixed navbar, sticky sidebar, readable measure for prose. */
.pk-layout {
    display: flex;
    gap: 2rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.pk-sidebar {
    flex: 0 0 15rem;
    position: sticky;
    top: 5rem;
    align-self: flex-start;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

.pk-sidebar__section {
    margin-bottom: 1.5rem;
}

.pk-sidebar__heading {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bulma-text-weak);
    margin-bottom: 0.5rem;
}

.pk-sidebar__link {
    display: block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--bulma-radius);
    color: var(--bulma-text);
}

.pk-sidebar__link:hover {
    background: var(--bulma-background);
    color: var(--pk-link);
}

.pk-sidebar__link.is-current {
    background: var(--bulma-background);
    color: var(--pk-sidebar-active);
    font-weight: 600;
}

.pk-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Wide content must scroll inside its own box, never the page body. */
.pk-content .highlight,
.pk-content pre,
.pk-content .table-container {
    overflow-x: auto;
    max-width: 100%;
}

.pk-content img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--bulma-border);
    border-radius: var(--bulma-radius-large);
}

/* Deep-link affordance appended to every heading id in .pk-content (see site.js). Stays in
   flow at all times so revealing it never shifts the line; opacity, not display, is what
   toggles it so a keyboard user tabbing onto it still sees it appear. Selectors carry an
   extra .pk-content so they outrank the sitewide ".content a" rule above, which would
   otherwise paint this the same saturated link colour at all times. */
.pk-content .pk-heading-anchor {
    margin-left: 0.4em;
    font-size: 0.75em;
    font-weight: 400;
    color: var(--bulma-text-weak);
    text-decoration: none;
    opacity: 0;
    white-space: nowrap;
}

.pk-content h2:hover .pk-heading-anchor,
.pk-content h3:hover .pk-heading-anchor,
.pk-content h4:hover .pk-heading-anchor,
.pk-content .pk-heading-anchor:focus {
    opacity: 1;
}

.pk-content .pk-heading-anchor:hover {
    color: var(--pk-link);
}

/* Callouts. Coloured left rule plus a tinted ground - never coloured body text. */
.pk-callout {
    border-left: 4px solid var(--bulma-primary);
    background: var(--bulma-background);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--bulma-radius) var(--bulma-radius) 0;
    margin: 1.5rem 0;
}

.pk-callout--warning {
    border-left-color: var(--bulma-warning);
}

.pk-callout--danger {
    border-left-color: var(--bulma-danger);
}

.pk-callout > :last-child {
    margin-bottom: 0;
}

/* The mark is two-tone: its slate magnifier is 1.4:1 on the dark ground and vanishes.
   Same swap peekaboot-frontend does, same reason.
   The url()s below are root-relative, not run through Liquid's relative_url filter like
   everywhere else on the site — this file has no front matter, so Jekyll doesn't process
   it and {{ }} would ship as literal text. Correct today only because _config.yml's
   baseurl is "". If baseurl ever becomes non-empty, these two paths break and must be
   made front-matter-and-relative_url or otherwise site-root-aware. */
.pk-logo {
    height: 28px;
    width: 28px;
    background-image: url('/assets/img/logo-mark.png');
    background-size: contain;
    background-repeat: no-repeat;
}

[data-theme="dark"] .pk-logo {
    background-image: url('/assets/img/logo-mark-dark.png');
}

@media screen and (max-width: 768px) {
    .pk-layout {
        flex-direction: column;
    }

    .pk-sidebar {
        position: static;
        flex-basis: auto;
        max-height: none;
    }
}

/* Each release collapses: 0.1.0 alone carries the whole pre-release history. */
.pk-release {
    border-top: 1px solid var(--bulma-border);
    padding: 1.25rem 0;
}

.pk-release__summary {
    cursor: pointer;
}

.pk-release__summary > .title,
.pk-release__summary > .subtitle {
    display: inline;
    margin-bottom: 0;
}