/* ============================================================================
   VARDLY brand styles — landing page and the few docs overrides.

   Every brand colour is declared once here as a custom property and
   re-declared for dark mode. No colour literal belongs anywhere below the
   :root blocks. The docs accent ramp itself lives in
   assets/docs/scss/_variables.scss and custom/colors/_pine.scss.
   ========================================================================= */

:root {
    /* Brand — from ../vardly-frontend/src/theme.ts */
    --vy-pine: #1f6f5f;
    --vy-pine-light: #4f9d8b;
    --vy-pine-dark: #14483d;
    --vy-brass: #c8a24a;
    --vy-brass-light: #e0c98b;
    --vy-brass-dark: #9a7a2e;
    /* Brass is not quite light enough to carry 12.8px text on the pine panel
       (measures 4.49:1 against the required 4.5); this pale step is. */
    --vy-brass-pale: #ecdaa8;

    /* Surfaces and text */
    --vy-surface: #f2f7f5;
    --vy-surface-raised: #ffffff;
    --vy-surface-inverse: #14483d;
    --vy-ink: #16241f;
    --vy-ink-muted: #4a5b55;
    --vy-ink-inverse: #f2f7f5;
    --vy-ink-inverse-muted: #c3d6d0;
    --vy-border: #d7e4df;
    --vy-border-strong: #b6ccc5;

    /* Status — meaning only, never decoration */
    --vy-status-open: #b3541e;
    --vy-status-overdue: #8f1d1d;
    --vy-status-closed: #1f6f5f;

    /* Type and rhythm */
    --vy-display: 'Goldman', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vy-section-y: clamp(3.5rem, 8vw, 6rem);
    --vy-radius: 10px;
}

html[data-dark-mode] {
    --vy-surface: #101816;
    --vy-surface-raised: #16211e;
    --vy-surface-inverse: #0b1210;
    --vy-ink: #e8f0ed;
    --vy-ink-muted: #a9bdb7;
    --vy-ink-inverse: #e8f0ed;
    --vy-ink-inverse-muted: #a9bdb7;
    --vy-border: #26332f;
    --vy-border-strong: #35453f;

    /* On a near-black surface the brand green cannot carry text at AA;
       step up the ramp instead. */
    --vy-pine: #6cb5a1;
    --vy-brass: #dcbb74;
    --vy-status-open: #e08a4e;
    --vy-status-overdue: #e06767;
    --vy-status-closed: #6cb5a1;
}

/* --------------------------------------------------------------------------
   Header

   The landing page uses the docs stylesheet (see layouts/partials/head.html),
   which does not carry the theme's non-docs top bar. The header is our own
   markup anyway, so it is styled here in full.
   ----------------------------------------------------------------------- */

.vy-topnav {
    position: relative;
    z-index: 10;
    padding: 0.85rem 0;
    background: var(--vy-surface-raised);
    border-bottom: 1px solid var(--vy-border);
}

.vy-topnav .navigation-menu {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vy-topnav .navigation-menu li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    border-radius: var(--vy-radius);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--vy-ink);
    text-decoration: none;
}

.vy-topnav .navigation-menu li a:hover,
.vy-topnav .navigation-menu li a:focus-visible {
    color: var(--vy-pine);
    background: var(--vy-surface);
}

.vy-topnav .navigation-menu .material-icons {
    font-size: 1.1rem;
    margin-right: 0.3rem;
}

.vy-topnav #mode {
    min-width: 44px;
    min-height: 44px;
    color: var(--vy-ink-muted);
}

/* The hamburger is desktop-hidden; #navigation is shown inline by the theme's
   toggleMenu(), so the default state has to be display:none below the
   breakpoint and an explicit display on it. */
.vy-topnav .navbar-toggle {
    display: none;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--vy-border-strong);
    border-radius: var(--vy-radius);
}

.vy-topnav .navbar-toggle .lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.vy-topnav .navbar-toggle .lines span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--vy-ink);
}

@media (max-width: 991.98px) {
    .vy-topnav .navbar-toggle {
        display: inline-flex;
    }

    .vy-topnav #navigation {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        padding: 0.5rem 1rem 1rem;
        background: var(--vy-surface-raised);
        border-bottom: 1px solid var(--vy-border);
    }

    .vy-topnav .navigation-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
    }

    .vy-topnav .navigation-menu li a {
        width: 100%;
    }
}

.vy-topnav .vy-wordmark {
    font-family: var(--vy-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--vy-pine);
    text-decoration: none;
    /* Reserve the wordmark's box so a late font swap cannot shift the header. */
    display: inline-block;
    min-width: 7.5rem;
}

.vy-topnav .vy-wordmark:hover,
.vy-topnav .vy-wordmark:focus-visible {
    color: var(--vy-pine-dark);
}

html[data-dark-mode] .vy-topnav .vy-wordmark:hover,
html[data-dark-mode] .vy-topnav .vy-wordmark:focus-visible {
    color: var(--vy-brass);
}

/* A visible focus ring everywhere, not only where Bootstrap happens to add one.
   The theme's `.btn` rules clear the outline at a higher specificity, so the
   icon buttons in the header and sidebar are named explicitly. */
a:focus-visible,
button:focus-visible,
.vy-btn:focus-visible,
.vy-topnav #mode:focus-visible,
.vy-topnav .navbar-toggle:focus-visible,
#top-header .btn:focus-visible,
#sidebar .btn:focus-visible,
.docs-content .btn:focus-visible,
div.code-toolbar .toolbar button:focus-visible {
    outline: 3px solid var(--vy-brass);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Hover-only affordances: the theme already reveals the code-block copy button
   on :focus-within as well as :hover, so it is keyboard-reachable. The heading
   permalink is visibility:hidden at rest and marked aria-hidden — decorative,
   duplicating the fragment already reachable from the table of contents — so it
   is deliberately left alone rather than made focusable. */

/* --------------------------------------------------------------------------
   Landing — shared section furniture
   ----------------------------------------------------------------------- */

.vy-section {
    padding: var(--vy-section-y) 0;
    background: var(--vy-surface-raised);
    color: var(--vy-ink);
}

.vy-section--tint {
    background: var(--vy-surface);
}

.vy-section--inverse {
    background: var(--vy-surface-inverse);
    color: var(--vy-ink-inverse);
}

.vy-section--inverse .vy-section-lead,
.vy-section--inverse .vy-card p {
    color: var(--vy-ink-inverse-muted);
}

.vy-section-head {
    max-width: 46rem;
    margin-bottom: 3rem;
}

.vy-section-title {
    font-family: var(--vy-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    line-height: 1.2;
    margin-bottom: 0.9rem;
    color: inherit;
}

.vy-section-lead {
    font-size: 1.075rem;
    line-height: 1.65;
    color: var(--vy-ink-muted);
    margin-bottom: 0;
}

.vy-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vy-brass-dark);
    margin-bottom: 0.85rem;
}

html[data-dark-mode] .vy-eyebrow,
.vy-section--inverse .vy-eyebrow {
    color: var(--vy-brass);
}

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

.vy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    border-radius: var(--vy-radius);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vy-btn-primary {
    background: var(--vy-pine);
    color: #ffffff;
    border-color: var(--vy-pine);
}

.vy-btn-primary:hover,
.vy-btn-primary:focus-visible {
    background: var(--vy-pine-dark);
    border-color: var(--vy-pine-dark);
    color: #ffffff;
}

html[data-dark-mode] .vy-btn-primary {
    background: var(--vy-pine);
    border-color: var(--vy-pine);
    color: #08110e;
}

.vy-btn-secondary {
    background: transparent;
    color: var(--vy-ink);
    border-color: var(--vy-border-strong);
}

.vy-btn-secondary:hover,
.vy-btn-secondary:focus-visible {
    border-color: var(--vy-pine);
    color: var(--vy-pine);
}

/* The hero is dark in both appearances, so a secondary button inside it always
   needs the inverse treatment — otherwise it is dark-on-dark in light mode. */
.vy-section--inverse .vy-btn-secondary,
.vy-hero .vy-btn-secondary {
    color: var(--vy-ink-inverse);
    border-color: rgba(242, 247, 245, 0.45);
}

.vy-section--inverse .vy-btn-secondary:hover,
.vy-section--inverse .vy-btn-secondary:focus-visible,
.vy-hero .vy-btn-secondary:hover,
.vy-hero .vy-btn-secondary:focus-visible {
    border-color: var(--vy-brass);
    color: var(--vy-brass);
}

/* --------------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------- */

.vy-hero {
    position: relative;
    isolation: isolate;
    background: var(--vy-surface-inverse);
    color: var(--vy-ink-inverse);
    padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(3.5rem, 9vw, 7rem);
    overflow: hidden;
}

.vy-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.vy-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 40%;
}

/* The scrim is what makes the hero text pass AA over the photograph. It is
   opaque enough on its own that the text is legible even if the image never
   loads (the surface below it is already dark). */
.vy-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
        rgba(11, 18, 16, 0.94) 0%,
        rgba(11, 18, 16, 0.88) 42%,
        rgba(11, 18, 16, 0.62) 72%,
        rgba(11, 18, 16, 0.45) 100%);
}

.vy-hero-title {
    font-family: var(--vy-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: clamp(2.6rem, 8vw, 4.5rem);
    line-height: 1.05;
    margin: 0 0 1rem;
    color: var(--vy-ink-inverse);
}

.vy-hero-tagline {
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    font-weight: 500;
    line-height: 1.35;
    color: var(--vy-ink-inverse);
    margin-bottom: 1rem;
}

.vy-hero-sub {
    font-size: 1.075rem;
    line-height: 1.65;
    color: var(--vy-ink-inverse-muted);
    max-width: 38rem;
    margin-bottom: 2rem;
}

.vy-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.vy-hero-note {
    margin: 1.75rem 0 0;
    font-size: 0.95rem;
    color: var(--vy-ink-inverse-muted);
    max-width: 34rem;
}

.vy-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--vy-brass-light);
    border: 1px solid rgba(200, 162, 74, 0.5);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Cards — feature grid, compliance, platform split
   ----------------------------------------------------------------------- */

.vy-card {
    height: 100%;
    padding: 1.6rem;
    background: var(--vy-surface-raised);
    border: 1px solid var(--vy-border);
    border-radius: var(--vy-radius);
}

.vy-section--tint .vy-card {
    background: var(--vy-surface-raised);
}

.vy-section--inverse .vy-card {
    background: rgba(242, 247, 245, 0.05);
    border-color: rgba(242, 247, 245, 0.16);
}

.vy-card h3 {
    font-size: 1.12rem;
    font-weight: 700;
    margin: 0.9rem 0 0.5rem;
    color: inherit;
}

.vy-card p {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--vy-ink-muted);
    margin-bottom: 0;
}

.vy-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--vy-radius);
    background: var(--vy-pine);
    color: #ffffff;
}

.vy-section--inverse .vy-card-icon {
    background: var(--vy-brass);
    color: #14100a;
}

html[data-dark-mode] .vy-card-icon {
    color: #08110e;
}

.vy-card-icon .material-icons {
    font-size: 24px;
}

/* Compliance list */
.vy-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vy-check-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.5rem 0;
    line-height: 1.55;
    color: var(--vy-ink-muted);
}

.vy-check-list .material-icons {
    font-size: 20px;
    color: var(--vy-pine);
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.vy-section--inverse .vy-check-list li {
    color: var(--vy-ink-inverse-muted);
}

.vy-section--inverse .vy-check-list .material-icons {
    color: var(--vy-brass);
}

/* --------------------------------------------------------------------------
   Platform split — API and AI, equal weight
   ----------------------------------------------------------------------- */

.vy-split-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border: 1px solid rgba(242, 247, 245, 0.16);
    border-radius: var(--vy-radius);
    background: rgba(242, 247, 245, 0.05);
}

.vy-split-col h3 {
    font-family: var(--vy-display);
    font-weight: 700;
    letter-spacing: 0.03em;
    font-size: 1.4rem;
    margin: 1rem 0 0.75rem;
}

.vy-split-col p {
    color: var(--vy-ink-inverse-muted);
    line-height: 1.65;
}

.vy-split-col .vy-btn {
    align-self: flex-start;
    margin-top: auto;
}

.vy-split-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.vy-split-list li {
    padding: 0.35rem 0 0.35rem 1.2rem;
    position: relative;
    color: var(--vy-ink-inverse-muted);
    line-height: 1.55;
}

.vy-split-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vy-brass);
}

/* --------------------------------------------------------------------------
   Status marker — "not generally available yet"
   ----------------------------------------------------------------------- */

.vy-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(179, 84, 30, 0.14);
    color: var(--vy-status-open);
    border: 1px solid currentColor;
}

.vy-status .material-icons {
    font-size: 16px;
}

/* On the inverse (pine) surface the burnt-orange status colour cannot carry
   text at AA — lift it to the brass accent, which still reads as "attention"
   without competing with the avvik status colours used in the product. */
.vy-section--inverse .vy-status {
    background: rgba(200, 162, 74, 0.16);
    color: var(--vy-brass-pale);
}

/* Block-level variant used at the top of a documentation page. */
.vy-status-note {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    margin: 0 0 1.75rem;
    border-radius: var(--vy-radius);
    border: 1px solid var(--vy-status-open);
    background: rgba(179, 84, 30, 0.08);
    color: var(--vy-ink);
    line-height: 1.6;
}

.vy-status-note .material-icons {
    color: var(--vy-status-open);
    flex: 0 0 auto;
}

.vy-status-note p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Closing CTA
   ----------------------------------------------------------------------- */

.vy-cta {
    text-align: center;
}

.vy-cta .vy-hero-cta {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Documentation overrides
   ----------------------------------------------------------------------- */

/* Outbound link to the canonical Sirktek documentation. */
.vy-ekstern {
    white-space: nowrap;
}

.vy-ekstern .material-icons {
    font-size: 15px;
    vertical-align: -2px;
    margin-left: 0.15em;
    opacity: 0.75;
}

/* Wide tables and code blocks scroll inside their own box, never the page. */
.docs-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
}

.docs-content pre {
    overflow-x: auto;
}

/* Keep the body measure comfortable on wide screens. */
.docs-content > p,
.docs-content > ul,
.docs-content > ol {
    max-width: 46rem;
}

/* --------------------------------------------------------------------------
   404
   ----------------------------------------------------------------------- */

.vy-404 {
    padding: clamp(4rem, 12vw, 8rem) 0;
    text-align: center;
    background: var(--vy-surface);
    color: var(--vy-ink);
}

.vy-404-code {
    font-family: var(--vy-display);
    font-size: clamp(3.5rem, 12vw, 6rem);
    line-height: 1;
    color: var(--vy-pine);
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Motion
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}