/* Rock Software Oy — site styles. Palette taken from rapakivi granite. */
:root {
    --basalt: #1f2a2e;      /* text, dark surfaces */
    --quartz: #eef0ee;      /* page background */
    --feldspar: #c88a72;    /* the stone's pink, rules */
    --feldspar-deep: #8f5e4f;
    --rim: #e9e6dc;         /* the pale rim around each ovoid */
    --lichen: #3f5e50;      /* links, focus */
    --muted: #55636a;

    --font: "Familjen Grotesk", system-ui, sans-serif;
    --gutter: clamp(16px, 4vw, 56px);
    --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--quartz);
    color: var(--basalt);
    font-family: var(--font);
    font-size: 1.125rem;
    line-height: 1.55;
}

a { color: var(--lichen); text-underline-offset: 0.2em; }
a:focus-visible { outline: 3px solid var(--lichen); outline-offset: 3px; border-radius: 2px; }

/* Masthead */
.masthead {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: baseline;
    padding: 24px var(--gutter);
}
/* On a wide screen the bar is not a box of its own: the wordmark, the language
   switch and the links sit in the masthead's own row, as they always have. */
.masthead-bar { display: contents; }
.wordmark {
    color: var(--basalt);
    font-weight: 700;
    font-size: 1.375rem;
    letter-spacing: -0.02em;
    text-decoration: none;
}
.masthead-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-left: auto; font-size: 1rem; }
.masthead-nav a,
.masthead .lang-switch { padding: 6px 0; color: var(--basalt); font-size: 1rem; text-decoration: none; }
.masthead-nav a:hover,
.masthead .lang-switch:hover { text-decoration: underline; }

/* The button that opens the links on a phone. Hidden everywhere else, and
   hidden without JavaScript, where the links are shown instead. */
.menu-toggle { display: none; }

/* Hero: text on the left, the stone on the right */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--gutter);
    align-items: stretch;
    padding: clamp(24px, 6vw, 88px) 0 0 var(--gutter);
}
.hero-text { align-self: center; padding-bottom: clamp(24px, 6vw, 88px); }
.hero h1 {
    margin: 0 0 0.6em;
    font-size: clamp(2.5rem, 6.4vw, 5.25rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.035em;
    max-width: 14ch;
}
.lede { margin: 0; max-width: 46ch; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); color: var(--muted); }

.hero-stone {
    position: relative;
    margin: 0;
    min-height: 420px;
    border-radius: 0 0 0 28px;
    overflow: hidden;
    background: var(--feldspar-deep);
}
.hero-stone svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-stone figcaption {
    position: absolute;
    left: 20px;
    bottom: 16px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--basalt);
    color: var(--rim);
    font-size: 0.875rem;
}

/* Offerings: heading in a narrow column, text beside it */
.offerings { padding: clamp(40px, 8vw, 112px) var(--gutter) 0; }
.offering {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 16px var(--gutter);
    padding: 40px 0 48px;
    border-top: 2px solid var(--feldspar);
    scroll-margin-top: 24px;
}
.offering h3 {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.offering-body p { margin: 0 0 1.25em; max-width: var(--measure); }
.tags {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tags li {
    padding: 6px 14px;
    border: 1.5px solid var(--basalt);
    border-radius: 999px;
    font-size: 0.9375rem;
}

/* Contact */

/* A dark band straight into the dark footer: no light stripe between them,
   the feldspar rule already separates the two. */
main:has(> .band-dark:last-child) + .contact { margin-top: 0; }

.contact {
    margin-top: clamp(40px, 8vw, 112px);
    border-top: 2px solid var(--feldspar);
    padding: clamp(40px, 6vw, 72px) var(--gutter) 32px;
    background: var(--basalt);
    color: var(--rim);
}
.contact h2 { margin: 0 0 24px; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; }
.contact dl { display: flex; flex-wrap: wrap; gap: 24px 64px; margin: 0 0 48px; }
/* Three details, not five: measured so they wrap into a compact block instead
   of one thin row stretched across the dark band. */
.contact dl { max-width: 480px; }
.contact dt { font-size: 0.875rem; color: var(--feldspar); }
.contact dd { margin: 4px 0 0; font-size: 1.25rem; }
.contact a { color: var(--rim); }
.contact a:focus-visible { outline-color: var(--feldspar); }
.contact .small { margin: 0; font-size: 0.875rem; opacity: 0.7; }

/* Phones */
@media (max-width: 760px) {
    .hero { grid-template-columns: 1fr; padding: 28px var(--gutter) 0; }
    .hero-text { padding-bottom: 0; }
    .hero-stone { min-height: 148px; margin: 0 calc(-1 * var(--gutter)); border-radius: 0; }
    .offering { grid-template-columns: 1fr; padding: 28px 0 36px; }
}

/* Text for screen readers only: kept out of sight, never out of the tree */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The arrow that marks a link leaving this site */
.external-cue { margin-left: 6px; }

/* Skip link: visible only once it has focus */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10;
    padding: 10px 16px;
    background: var(--basalt);
    color: var(--rim);
}
.skip-link:focus { left: 8px; top: 8px; }

/* Buttons */
.button {
    display: inline-block;
    padding: 12px 22px;
    border: 2px solid var(--basalt);
    border-radius: 999px;
    background: var(--basalt);
    color: var(--rim);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
}
.button:hover { background: var(--lichen); border-color: var(--lichen); }
/* Quiet variant: a link that proves something, not a call to action. */
.button-quiet { background: transparent; color: var(--basalt); }
.button-quiet:hover { background: var(--basalt); color: var(--rim); }
.hero-actions { margin: 28px 0 0; }

.masthead .lang-switch {
    order: 1;
    padding-left: 24px;
    border-left: 1.5px solid var(--feldspar);
    font-weight: 500;
}

/* Content bands share the heading column of the offerings */
.band { padding: clamp(40px, 8vw, 112px) var(--gutter) 0; scroll-margin-top: 16px; }
.band-head { border-top: 2px solid var(--feldspar); padding-top: 40px; }
.band-head h2 {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.band-intro { margin: 16px 0 0; max-width: var(--measure); color: var(--muted); }
.band-outro { margin: 32px 0 0; max-width: var(--measure); }
.offerings .band-head { margin-bottom: 8px; }
.offerings .offering:first-of-type { border-top: 0; }

.band-dark {
    margin-top: clamp(40px, 8vw, 112px);
    padding-bottom: clamp(40px, 8vw, 96px);
    background: var(--basalt);
    color: var(--rim);
}
.band-dark .band-head { border-top: 0; padding-top: 0; }
.band-dark a { color: var(--rim); }
.band-dark a:focus-visible { outline-color: var(--feldspar); }

/* Products: one card per product, built from config/site.php */
.products {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--gutter);
    justify-content: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 480px));
}
/* A lone product would leave most of a desktop row empty, so it gets the
   room of two. Set from the product count, so it stops applying by itself
   as soon as a second product is added to config/site.php. */
.products--single { grid-template-columns: minmax(min(100%, 320px), 680px); }
.product {
    padding: 28px;
    border: 2px solid var(--basalt);
    border-radius: 20px;
    background: #fff;
    scroll-margin-top: 16px;
}
.product-status {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--feldspar);
    color: var(--basalt);
    font-size: 0.8125rem;
    font-weight: 500;
}
.product h3 {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}
.product-tagline { margin: 6px 0 16px; max-width: 42ch; font-size: 1.125rem; color: var(--muted); }
.product-body { margin: 0 0 24px; max-width: 46ch; }
.product-label {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.product-price { margin: 0 0 24px; font-size: 0.9375rem; }
.product .tags { margin-bottom: 24px; }
.product-cta { margin: 0; }

/* Plain fact lists */
.facts {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 24px var(--gutter);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.facts h3 { margin: 0 0 6px; font-size: 1.125rem; font-weight: 600; }
.facts p { margin: 0; color: var(--muted); }

/* Standalone pages */
.page {
    max-width: calc(var(--measure) + 2 * var(--gutter) + 8ch);
    margin: 0 auto;
    padding: clamp(24px, 5vw, 64px) var(--gutter) clamp(40px, 8vw, 96px);
}
.page-head { max-width: var(--measure); }
.page-head h1 {
    margin: 0 0 0.5em;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.page .lede { max-width: var(--measure); }
.meta { margin: 16px 0 0; font-size: 0.875rem; color: var(--muted); }

.prose { max-width: var(--measure); margin-top: clamp(32px, 5vw, 56px); }
.prose h2 {
    margin: 2em 0 0.5em;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.015em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.5em 0 0.4em; font-size: 1.125rem; font-weight: 600; }
.prose p { margin: 0 0 1.1em; }
.prose code {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(31, 42, 46, 0.08);
    font-size: 0.9375em;
}
.band-dark .prose code { background: rgba(233, 230, 220, 0.15); }
.prose .plain { margin: 0 0 1.1em; padding-left: 1.2em; }
.prose .plain li { margin-bottom: 0.4em; }

.facts-list { display: grid; gap: 16px 48px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 0 0 1.5em; }
.facts-list dt { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.facts-list dd { margin: 4px 0 0; font-size: 1.125rem; }
.verify { margin: 0 0 1.5em; }

/* Footer navigation */
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0 0 32px; }
.footer-nav a { padding: 6px 0; font-weight: 500; }
/* Who sells this, next to the button that leaves the site. */
.product-maker { margin: 16px 0 0; font-size: 0.875rem; color: var(--muted); }

@media (max-width: 760px) {
    .band { padding-top: clamp(32px, 7vw, 64px); }
    .band-head { padding-top: 28px; }
    .product { padding: 22px; }
    .page { padding-top: 32px; }
    .contact dl { gap: 18px 40px; }
    /* 44px tap target: these links carry the trust anchor on a phone. */
    .footer-nav a { padding: 10px 0; }

    /* The menu on a phone: a bar that stays put, with the language switch in
       reach and the section links behind one button. They used to wrap into
       two rows of small links that scrolled away with the page. */
    .masthead {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        background: var(--quartz);
        border-bottom: 2px solid var(--feldspar);
    }
    /* Pinned only where the button can collapse it again: without the script
       the links stay open, and a pinned open list would eat the screen. */
    .js .masthead {
        position: sticky;
        top: 0;
        z-index: 20;
    }
    .masthead-bar {
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
        padding: 10px var(--gutter);
    }
    .wordmark { font-size: 1.1875rem; white-space: nowrap; }
    .masthead .lang-switch {
        order: 0;
        margin-left: auto;
        padding: 10px 0;
        border-left: 0;
        white-space: nowrap;
    }
    .js .menu-toggle {
        display: inline-flex;
        gap: 10px;
        align-items: center;
        min-height: 44px;
        padding: 9px 16px;
        border: 1.5px solid var(--basalt);
        border-radius: 999px;
        background: transparent;
        color: var(--basalt);
        font: inherit;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
    }
    .menu-icon {
        position: relative;
        display: block;
        width: 17px;
        height: 2px;
        background: currentColor;
    }
    .menu-icon::before,
    .menu-icon::after {
        content: "";
        position: absolute;
        left: 0;
        width: 17px;
        height: 2px;
        background: currentColor;
    }
    .menu-icon::before { top: -6px; }
    .menu-icon::after { top: 6px; }
    [aria-expanded="true"] .menu-icon { background: transparent; }
    [aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
    [aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }

    /* Collapsed only where the button exists to open it again. The rules
       below are for the panel under the bar; a nav inside the bar — the
       error page's two language links — stays the plain row it is. */
    .js .masthead-bar + .masthead-nav { display: none; }
    .js .masthead-bar + .masthead-nav.is-open { display: flex; }
    .masthead-bar + .masthead-nav {
        flex-direction: column;
        gap: 0;
        margin-left: 0;
        padding: 0 var(--gutter) 10px;
    }
    .masthead-bar + .masthead-nav a {
        padding: 13px 0;
        border-top: 1px solid rgba(31, 42, 46, 0.28);
        font-size: 1.0625rem;
    }

    /* Clear the sticky bar when a link jumps to a section. */
    .band, .contact { scroll-margin-top: 72px; }
}

/* The narrowest phones still in use: three items will not fit the bar as
   words, so the button keeps its icon and gives the label to screen readers
   only. */
@media (max-width: 374px) {
    .js .menu-toggle { padding: 9px 13px; }
    .menu-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Error pages put two buttons side by side */
.prose .button { margin: 0 12px 12px 0; }