/* ============================================================================
   Public site pages (homepage editor)

   Styles for the editorially maintained public pages. Prefix "site-".
   Deliberately global rather than scoped: scoped CSS does not reach child
   components, and every block type is its own component.

   Layout comes from named variants only, never from values an editor could
   enter, so a page cannot be made to look broken from the editor. All colours
   run through the central --sidan-* variables, so the public site follows a
   customer rebranding automatically.
   ============================================================================ */

.site-page {
    --site-max-width: 72rem;
    --site-pad-x: 1.5rem;
    width: 100%;
    /* Sticky footer: the page fills at least the viewport and lays out as a
       column, the block container below absorbs the spare height — so the footer
       sits at the bottom edge even when the content is short. The editor preview
       opts out via .site-admin-previewframe .site-page in admin.css. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    color: var(--sidan-text);
    font-size: var(--sidan-text-md);
}

.site-page a:not(.btn) {
    color: var(--sidan-color-primary);
}

/* Filled primary buttons carry white text — the blanket link colour above would
   otherwise paint the label in the same colour as the button surface. */
.site-page .btn-primary {
    color: #fff;
}

/* ── Header menu across pages ──────────────────────────────────────────────── */

.site-main-nav {
    border-bottom: 1px solid var(--sidan-border);
}

.site-main-nav-inner {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0.75rem var(--site-pad-x);
}

.site-main-nav-link {
    color: var(--sidan-text);
    text-decoration: none;
    font-weight: 600;
    padding: 0.25rem 0;
}

.site-main-nav-link:hover {
    color: var(--sidan-color-primary);
}

.site-main-nav-link-current {
    color: var(--sidan-color-primary);
    border-bottom: 2px solid var(--sidan-color-primary);
}

.site-nav-group {
    position: relative;
}

.site-nav-toggle {
    border: none;
    background: transparent;
    padding: 0;
    color: var(--sidan-text);
    cursor: pointer;
}

.site-nav-chevron {
    font-size: 1.25rem;
}

.site-nav-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    background: #fff;
    border: 1px solid var(--sidan-border);
    border-radius: var(--sidan-radius, 0.5rem);
    box-shadow: var(--sidan-shadow, 0 0.25rem 1rem rgba(0, 0, 0, 0.1));
    padding: 0.5rem 0;
    z-index: 30;
}

.site-nav-group:hover .site-nav-submenu,
.site-nav-submenu-open {
    display: block;
}

.site-nav-submenu-link {
    display: block;
    padding: 0.375rem 1rem;
    color: var(--sidan-text);
    text-decoration: none;
}

.site-nav-submenu-link:hover {
    background: var(--sidan-surface);
    color: var(--sidan-color-primary);
}

/* ── In-page jump navigation ───────────────────────────────────────────────── */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--sidan-border);
}

.site-nav-inner {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0.625rem var(--site-pad-x);
    /* The d-flex utility does not wrap. Without this, the unfolded mobile menu
       does not drop below the bar but stands as a column BESIDE the login pill. */
    flex-wrap: wrap;
}

/* Deliberately without d-flex utilities: the flex layout must be overridable
   by the narrow-screen collapse below. */
.site-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    flex-grow: 1;
    min-width: 0;
}

.site-nav-link {
    color: var(--sidan-text);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.site-nav-link:hover {
    color: var(--sidan-color-primary);
}

/* Written as .site-page a.site-nav-login: the blanket link colour above carries
   the specificity of its :not(.btn) argument, and a plain class selector would
   lose to it — the label would then sit primary on primary, invisible. */
.site-page a.site-nav-login {
    margin-left: auto;
    color: #fff;
    background: var(--sidan-color-primary);
    padding: 0.375rem 1.125rem;
    border-radius: 2rem;
}

.site-page a.site-nav-login:hover {
    color: #fff;
    background: var(--sidan-color-primary-hover);
}

/* Burger only exists on narrow screens; on wide screens the links stay inline. */
.site-nav-burger {
    display: none;
    border: none;
    background: transparent;
    color: var(--sidan-text);
    padding: 0.25rem;
    cursor: pointer;
}

/* Footer content inside the burger menu exists only on narrow screens. */
.site-nav-mobile-extras {
    display: none;
}

@media (max-width: 47.98rem) {
    .site-nav-burger {
        display: inline-flex;
        align-items: center;
    }

    .site-nav-links-open .site-nav-mobile-extras {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        border-top: 1px solid var(--sidan-border);
        padding-top: 0.75rem;
        margin-top: 0.25rem;
    }

    .site-nav-links {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem 0 0.5rem;
        order: 10;
    }

    .site-nav-links-open {
        display: flex;
    }
}

/* ── Breadcrumbs ───────────────────────────────────────────────────────────── */

.site-breadcrumbs-inner {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0.75rem var(--site-pad-x) 0;
    font-size: var(--sidan-text-sm, 0.875rem);
}

.site-breadcrumb-link {
    color: var(--sidan-text-muted, #6c757d);
    text-decoration: none;
}

.site-breadcrumb-link:hover {
    color: var(--sidan-color-primary);
}

.site-breadcrumb-separator,
.site-breadcrumb-current {
    color: var(--sidan-text-muted, #6c757d);
}

/* ── Block frame and half-width pairs ──────────────────────────────────────────
   The block container is a two-column grid on wide screens: full blocks span
   both columns, half-width blocks take one. Two consecutive half-width blocks
   therefore stand side by side without the markup pairing them. */

.site-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Absorbs the spare viewport height on short pages (sticky footer). */
    flex: 1 0 auto;
}

.site-block {
    grid-column: 1 / -1;
    padding: 3rem 0;
}

@media (max-width: 47.98rem) {
    .site-block {
        padding: 1.75rem 0;
    }

    .site-block-hero {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }
}

@media (min-width: 62rem) {
    .site-block-half {
        grid-column: auto / span 1;
    }

    /* Content of a half block aligns with the page column: the start side keeps
       the left padding rhythm, the end side the right. */
    .site-block-half .site-block-inner {
        max-width: calc(var(--site-max-width) / 2);
    }

    .site-block-half-start .site-block-inner {
        margin-right: 0;
    }

    .site-block-half-end .site-block-inner {
        margin-left: 0;
    }
}

.site-block-inner,
.site-hero-inner,
.site-mediatext-inner {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 var(--site-pad-x);
}

/* ── Backgrounds ───────────────────────────────────────────────────────────── */

.site-bg-muted {
    background-color: var(--sidan-surface);
}

.site-bg-accent {
    background-color: var(--sidan-color-primary);
    color: #fff;
}

.site-bg-accent .site-headline,
.site-bg-accent .site-subline,
.site-bg-accent a:not(.btn) {
    color: #fff;
}

.site-bg-accent .site-btn {
    background: #fff;
    border-color: #fff;
    color: var(--sidan-color-primary);
}

/* ── Shared text elements ──────────────────────────────────────────────────── */

.site-headline {
    font-weight: 700;
    color: var(--sidan-color-primary);
    margin-bottom: 0.75rem;
}

h1.site-headline {
    font-size: var(--sidan-text-3xl, 2.25rem);
    line-height: 1.2;
}

h2.site-headline {
    font-size: var(--sidan-text-2xl, 1.75rem);
}

.site-subline {
    font-size: var(--sidan-text-lg, 1.25rem);
    color: var(--sidan-text);
    margin-bottom: 1.25rem;
    max-width: 50rem;
}

.site-body {
    max-width: 50rem;
}

.site-body p:last-child {
    margin-bottom: 0;
}

.site-body-columns {
    max-width: none;
    column-count: 2;
    column-gap: 3rem;
}

@media (max-width: 47.98rem) {
    .site-body-columns {
        column-count: 1;
    }
}

/* FocusOnNavigate puts the focus on the first h1 after every navigation, and the
   browser then draws its focus ring around the hero headline — a black frame no
   visitor asked for. Keyboard users lose nothing: the headline is no control. */
.site-page h1:focus,
.site-page h1:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Placeholder text in the editor preview, so an empty block stays visible and
   selectable instead of collapsing into something there is no way to click. */
.site-placeholder {
    opacity: 0.45;
    font-style: italic;
}

/* ── Links and buttons ─────────────────────────────────────────────────────── */

.site-links {
    margin-top: 1rem;
}

.site-btn {
    text-decoration: none;
}

.site-btn-secondary {
    background: transparent;
    border: 2px solid var(--sidan-color-primary);
    color: var(--sidan-color-primary);
}

.site-btn-secondary:hover {
    background: var(--sidan-color-primary);
    color: #fff;
}

.site-link-text {
    align-self: center;
    font-weight: 600;
    text-decoration: none;
}

/* ── Media (icons + images) ────────────────────────────────────────────────── */

.site-media-icon .material-symbols-outlined {
    font-size: 2.75rem;
    color: var(--sidan-color-primary);
}

.site-media-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sidan-radius, 0.5rem);
}

.site-media-image figcaption {
    font-size: var(--sidan-text-sm, 0.875rem);
    color: var(--sidan-text-muted, #6c757d);
    margin-top: 0.375rem;
}

.site-media-empty {
    min-height: 8rem;
    border: 2px dashed var(--sidan-border);
    border-radius: var(--sidan-radius, 0.5rem);
    color: var(--sidan-text-muted, #6c757d);
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.site-block-hero {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.site-hero-inner {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.site-hero-text {
    flex: 1 1 55%;
}

.site-hero-media {
    flex: 1 1 45%;
}

.site-block-hero.site-layout-medialeft .site-hero-inner {
    flex-direction: row-reverse;
}

.site-block-hero.site-layout-mediabelow .site-hero-inner {
    flex-direction: column;
}

@media (max-width: 61.98rem) {
    .site-hero-inner {
        flex-direction: column !important;
    }
}

/* ── Logo block ────────────────────────────────────────────────────────────── */

.site-logo-inner {
    /* The size steps set a font size; mark and wordmark are in em from here. */
    font-size: 2rem;
}

.site-logo-small { font-size: 1.25rem; }
.site-logo-medium { font-size: 1.75rem; }
.site-logo-large { font-size: 2.5rem; }
.site-logo-extralarge { font-size: 3.5rem; }

.site-logo-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375em;
}

.site-logo-horizontal {
    flex-direction: row;
    justify-content: center;
    gap: 0.5em;
}

.site-logo-mark {
    height: 2em;
    width: auto;
}

.site-logo-wordmark {
    font-size: 1em;
    font-weight: 700;
    color: var(--sidan-color-primary);
    letter-spacing: 0.04em;
}

.site-logo-subline {
    margin-top: 0.75rem;
    margin-left: auto;
    margin-right: auto;
}

/* ── MediaText ─────────────────────────────────────────────────────────────── */

.site-mediatext-inner {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.site-mediatext-text {
    flex: 1 1 55%;
}

.site-mediatext-media {
    flex: 1 1 45%;
}

.site-block-mediatext.site-layout-medialeft .site-mediatext-inner {
    flex-direction: row-reverse;
}

@media (max-width: 61.98rem) {
    .site-mediatext-inner {
        flex-direction: column !important;
    }
}

/* ── Feature grid ──────────────────────────────────────────────────────────── */

.site-feature-card {
    background: var(--sidan-surface);
    border-radius: var(--sidan-radius, 0.5rem);
    padding: 1.5rem;
}

.site-feature-card .site-media-icon {
    justify-content: flex-start;
    margin-bottom: 0.75rem;
}

.site-feature-title {
    font-size: var(--sidan-text-lg, 1.25rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.site-feature-text {
    margin-bottom: 0;
}

.site-bg-muted .site-feature-card {
    background: #fff;
}

/* ── Carousel ──────────────────────────────────────────────────────────────── */

.site-carousel {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.site-carousel-arrow {
    border: none;
    background: transparent;
    color: var(--sidan-color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.site-carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    flex-grow: 1;
}

.site-carousel-slide {
    flex: 0 0 min(20rem, 85%);
    scroll-snap-align: start;
}

.site-carousel-card {
    background: var(--sidan-surface);
    border-radius: var(--sidan-radius, 0.5rem);
    padding: 1.5rem;
}

.site-carousel-title {
    font-size: var(--sidan-text-lg, 1.25rem);
    font-weight: 700;
    margin: 0.75rem 0 0.5rem;
}

.site-carousel-text {
    margin-bottom: 0;
}

/* ── Bullet list ───────────────────────────────────────────────────────────── */

.site-bullets {
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.site-bullets-columns {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 47.98rem) {
    .site-bullets-columns {
        grid-template-columns: 1fr;
    }
}

.site-bullet {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.site-bullet-icon {
    color: var(--sidan-color-primary);
}

/* ── Steps ─────────────────────────────────────────────────────────────────── */

.site-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0;
}

.site-steps-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

.site-steps-horizontal .site-step {
    flex: 1 1 16rem;
}

.site-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.site-step-number {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--sidan-color-primary);
    color: #fff;
    font-weight: 700;
    font-size: var(--sidan-text-lg, 1.25rem);
}

.site-step-title {
    font-size: var(--sidan-text-lg, 1.25rem);
    font-weight: 700;
    margin-bottom: 0.375rem;
}

.site-step-text {
    margin-bottom: 0;
    color: var(--sidan-text-muted, #6c757d);
}

/* ── Stats ─────────────────────────────────────────────────────────────────── */

.site-stat-value {
    font-size: var(--sidan-text-3xl, 2.25rem);
    font-weight: 700;
    color: var(--sidan-color-primary);
}

.site-stat-label {
    color: var(--sidan-text-muted, #6c757d);
}

/* ── Quote ─────────────────────────────────────────────────────────────────── */

.site-quote {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}

.site-quote-mark {
    font-size: 2.5rem;
    color: var(--sidan-color-primary);
}

.site-quote-text {
    font-size: var(--sidan-text-lg, 1.25rem);
    margin: 0.5rem 0 1rem;
}

.site-quote-author {
    justify-content: center;
}

.site-quote-avatar .site-media-image img {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 50%;
}

.site-quote-name {
    font-weight: 700;
}

.site-quote-role {
    font-size: var(--sidan-text-sm, 0.875rem);
    color: var(--sidan-text-muted, #6c757d);
}

/* ── People ────────────────────────────────────────────────────────────────── */

.site-person {
    background: var(--sidan-surface);
    border-radius: var(--sidan-radius, 0.5rem);
    padding: 1.5rem;
}

.site-person-photo .site-media-image img {
    width: 8rem;
    height: 8rem;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.site-person-name {
    font-size: var(--sidan-text-lg, 1.25rem);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.site-person-role {
    color: var(--sidan-text-muted, #6c757d);
    margin-bottom: 0.5rem;
}

.site-person-text {
    margin-bottom: 0;
}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */

.site-faq-group {
    font-size: var(--sidan-text-lg, 1.25rem);
    font-weight: 700;
    margin: 1.5rem 0 0.75rem;
}

.site-faq {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 56rem;
}

.site-faq-entry {
    border: 1px solid var(--sidan-border);
    border-radius: var(--sidan-radius, 0.5rem);
    overflow: hidden;
}

.site-faq-question {
    border: none;
    background: var(--sidan-surface);
    padding: 0.875rem 1.25rem;
    font-size: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--sidan-text);
    cursor: pointer;
    gap: 1rem;
}

.site-faq-question:hover {
    color: var(--sidan-color-primary);
}

.site-faq-chevron {
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}

.site-faq-chevron-open {
    transform: rotate(180deg);
}

.site-faq-answer {
    padding: 1rem 1.25rem;
    background: #fff;
}

/* ── Collapsible section (container block) ─────────────────────────────────────
   One block = one accordion entry: the headline is the toggle, the panel renders
   the blocks placed inside. Consecutive collapsible blocks stack tightly, so a
   run of them reads as one accordion without any extra markup. */

.site-block-collapsible {
    padding: 0.375rem 0;
}

.site-collapsible {
    border: 1px solid var(--sidan-border);
    border-radius: var(--sidan-radius, 0.5rem);
    overflow: hidden;
}

.site-collapsible-headline {
    margin: 0;
    font-size: var(--sidan-text-lg, 1.25rem);
}

.site-collapsible-header {
    border: none;
    background: var(--sidan-surface);
    padding: 1rem 1.25rem;
    font-size: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--sidan-text);
    cursor: pointer;
    gap: 1rem;
}

.site-collapsible-header:hover {
    color: var(--sidan-color-primary);
}

.site-collapsible-chevron {
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}

.site-collapsible-chevron-open {
    transform: rotate(180deg);
}

.site-collapsible-body {
    background: #fff;
    padding: 0.25rem 1.25rem 0.75rem;
}

.site-collapsible-empty {
    padding: 0.75rem 0;
}

/* Children keep their block frames but on the panel's rhythm: tighter vertical
   padding, and no second horizontal inset — the panel already provides it. */
.site-collapsible-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.site-collapsible-blocks .site-block {
    padding: 1.25rem 0;
}

.site-collapsible-blocks .site-block-inner,
.site-collapsible-blocks .site-hero-inner,
.site-collapsible-blocks .site-mediatext-inner {
    padding-left: 0;
    padding-right: 0;
}

/* ── Link list / downloads ─────────────────────────────────────────────────── */

.site-linklist {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
}

.site-linkitem {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.site-linkitem-title {
    font-weight: 700;
}

.site-linkcard {
    background: var(--sidan-surface);
    border-radius: var(--sidan-radius, 0.5rem);
    padding: 1.5rem;
}

.site-linkcard-title {
    font-size: var(--sidan-text-lg, 1.25rem);
    font-weight: 700;
    margin: 0.5rem 0;
}

.site-downloads {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
}

.site-download {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.site-download-icon {
    color: var(--sidan-color-primary);
}

.site-download-title {
    font-weight: 600;
    text-decoration: none;
}

.site-download-description {
    font-size: var(--sidan-text-sm, 0.875rem);
    color: var(--sidan-text-muted, #6c757d);
}

/* ── CTA / divider ─────────────────────────────────────────────────────────── */

.site-cta-inner .site-subline {
    margin-left: auto;
    margin-right: auto;
}

.site-divider {
    max-width: var(--site-max-width);
    margin: 0 auto;
    border-color: var(--sidan-border);
    opacity: 1;
}

.site-block-divider {
    padding: 0.5rem 0;
}

/* ── Contact form ──────────────────────────────────────────────────────────── */

.site-contact-form {
    max-width: 42rem;
}

.site-contact-row {
    display: flex;
    gap: 1rem;
}

.site-contact-row .site-contact-field {
    flex: 1 1 0;
}

@media (max-width: 47.98rem) {
    .site-contact-row {
        flex-direction: column;
        gap: 0;
    }
}

.site-contact-field {
    margin-bottom: 1rem;
}

.site-contact-consent {
    margin-bottom: 1rem;
}

.site-contact-legend {
    font-size: var(--sidan-text-sm, 0.875rem);
    color: var(--sidan-text-muted, #6c757d);
    margin-bottom: 1rem;
}

.site-contact-alert {
    border-radius: var(--sidan-radius, 0.5rem);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    max-width: 42rem;
}

.site-contact-success {
    background: var(--sidan-success-soft, #e6f4ea);
    color: var(--sidan-success-ink, #1e4620);
}

.site-contact-error {
    background: var(--sidan-danger-soft, #fdecea);
    color: var(--sidan-danger-ink, #611a15);
}

/* Honeypot: parked off-screen rather than display:none, because primitive bots
   skip fields that are not rendered at all. */
.site-contact-trap {
    position: absolute;
    left: -624.9375rem;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ── Site footer ───────────────────────────────────────────────────────────────
   Legal links and the language picker at the end of the page. On narrow screens
   the whole bar disappears — the burger menu carries the same entries there. */

.site-footer {
    border-top: 1px solid var(--sidan-border);
    margin-top: 2rem;
}

.site-footer-inner {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 1rem var(--site-pad-x);
}

.site-footer-link {
    color: var(--sidan-text-muted, #6c757d);
    text-decoration: none;
    font-size: var(--sidan-text-sm, 0.875rem);
}

.site-footer-link:hover {
    color: var(--sidan-color-primary);
}

.site-footer-lang {
    margin-left: auto;
}

@media (max-width: 47.98rem) {
    .site-footer {
        display: none;
    }
}