/* veps: a little technical, fairly relaxed. Wasp yellow on ink. */

:root {
    --veps-yellow: #f6c21c;
    --veps-ink: #1d1c19;
    --veps-paper: #f6f3ec;
    --veps-mono: "Inconsolata", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --bulma-family-primary: var(--veps-mono);
    --bulma-family-secondary: var(--veps-mono);
    --bulma-family-code: var(--veps-mono);
    --bulma-body-size: 1.125em; /* Inconsolata runs small */

    /* Bulma's primary colour becomes the wasp yellow */
    --bulma-primary-h: 45deg;
    --bulma-primary-s: 92%;
    --bulma-primary-l: 54%;

    /* Links: a darker amber that stays readable on light backgrounds */
    --bulma-link-h: 42deg;
    --bulma-link-s: 100%;
    --bulma-link-l: 30%;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bulma-link-l: 60%;
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* Logo: Special Elite is subset to the characters in "{veps}" only */
.logo {
    font-family: "Special Elite", var(--veps-mono);
    font-weight: 400;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.logo-brace {
    color: var(--veps-yellow);
}

.navbar-brand .logo {
    font-size: 1.6rem;
}

/* Yellow button with ink text, e.g. the login button */
.button.is-veps {
    background: var(--veps-yellow);
    border-color: var(--veps-yellow);
    color: var(--veps-ink);
    font-weight: 700;
}

.button.is-veps:hover {
    background: var(--veps-paper);
    border-color: var(--veps-paper);
    color: var(--veps-ink);
}

/* Footer: always ink, like the navbar */
.footer.is-veps {
    background: var(--veps-ink);
    color: var(--veps-paper);
    border-top: 1px solid rgb(246 194 28 / 0.25);
}

.footer.is-veps .logo {
    color: var(--veps-paper);
}

/* Wasp stripe: a yellow section with ink text, between ink blocks */
.section.is-yellow {
    background: var(--veps-yellow);
    color: var(--veps-ink);
}

.section.is-yellow .content,
.section.is-yellow .content strong,
.section.is-yellow .content h1,
.section.is-yellow .content h2,
.section.is-yellow .content h3,
.section.is-yellow summary {
    color: var(--veps-ink);
}

/* Navbar: always ink, so the yellow in the logo stands out */
.navbar.is-veps,
.navbar.is-veps .navbar-menu,
.navbar.is-veps .navbar-dropdown {
    background: var(--veps-ink);
    color: var(--veps-paper);
}

.navbar.is-veps {
    border-bottom: 1px solid rgb(246 194 28 / 0.25);
}

.navbar.is-veps .logo {
    color: var(--veps-paper);
}

.navbar.is-veps .navbar-item,
.navbar.is-veps .navbar-link {
    background: transparent;
    color: var(--veps-paper);
}

.navbar.is-veps a.navbar-item:hover,
.navbar.is-veps .navbar-link:hover,
.navbar.is-veps .has-dropdown:hover > .navbar-link {
    background: rgb(255 255 255 / 0.06);
    color: var(--veps-yellow);
}

.navbar.is-veps .navbar-start .navbar-item.is-active,
.navbar.is-veps .navbar-start .navbar-link.is-active {
    color: var(--veps-yellow);
}

.navbar.is-veps .navbar-link:not(.is-arrowless)::after,
.navbar.is-veps .navbar-burger {
    color: var(--veps-yellow);
    border-color: var(--veps-yellow);
}

.navbar.is-veps .navbar-dropdown {
    border-top: 1px solid rgb(246 194 28 / 0.4);
}

/* Hero: a terminal-ish ink block */
.hero.is-veps {
    background: var(--veps-ink);
    color: var(--veps-paper);
}

.hero.is-veps .logo {
    font-size: clamp(3.5rem, 12vw, 7rem);
    line-height: 1;
    color: var(--veps-paper);
}

.hero.is-veps .slogan {
    margin-top: 1rem;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: var(--veps-yellow);
}

.hero.is-veps .slogan::before {
    content: "$ ";
    opacity: 0.5;
}

.cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    margin-left: 0.1em;
    vertical-align: text-bottom;
    background: currentColor;
    animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cursor { animation: none; }
}

.hero.is-veps .lead {
    max-width: 38rem;
    margin-top: 1.5rem;
    font-size: 1.2rem;
    opacity: 0.85;
}

.hero-contact {
    text-align: center;
}

/* On phones the button stacks below the text */
@media screen and (max-width: 768px) {
    .hero-contact {
        margin-top: 1rem;
        text-align: left;
    }
}

/* "Why veps?" — a small expandable aside */
.name-explainer summary {
    cursor: pointer;
    font-weight: 700;
}

.name-explainer summary::marker {
    content: "> ";
}

.name-explainer[open] summary::marker {
    content: "v ";
}

.page-body {
    white-space: pre-line;
}

.navbar.is-veps .navbar-dropdown .navbar-item.is-active {
    background: var(--veps-yellow);
    color: var(--veps-ink);
}