/* Default theme. Values such as --cms-primary come from the theme settings of the site
   (public/assets/generated/theme-site-<id>.css, loaded after this file); the fallbacks below
   apply only when a setting produces nothing. */
:root {
    --cms-container-width: 1140px;
    --cms-header-height: 64px;
    --cms-header-bg: #fff;
    --cms-footer-bg: #f8f9fa;
    --cms-body-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --cms-heading-font: var(--cms-body-font);
    --cms-radius: 6px;
}

body.cms-body { font-family: var(--cms-body-font); }
h1, h2, h3, h4, h5, h6 { font-family: var(--cms-heading-font); }

.container { max-width: var(--cms-container-width); }

/* Rows come from the site's layout; their classes (cms-row-header, cms-header...) are styled here. */
.cms-row-header { min-height: var(--cms-header-height); background: var(--cms-header-bg); }
.cms-row-footer { background: var(--cms-footer-bg); }
.cms-menu .nav-link.active, .cms-menu a.active { font-weight: 600; }

/* Bootstrap components take their colour from component-level variables, so map them to the setting. */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 70%, black);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
}

.cms-content img { max-width: 100%; height: auto; }
.cms-content > :last-child { margin-bottom: 0; }

/* Modern template (spec: themes may offer more than one body template). An
   oversized, tightly-tracked hero followed by a ~70ch reading column: see
   themes/default/README.md for the sources behind these values. */
.cms-modern-hero {
    background: color-mix(in srgb, var(--bs-primary) 6%, #fff);
    padding: clamp(40px, 8vw, 88px) 24px clamp(32px, 5vw, 56px);
    margin-bottom: clamp(32px, 5vw, 56px);
}
.cms-modern-hero-inner { max-width: var(--cms-container-width); margin-inline: auto; }

.cms-modern-crumbs { margin-bottom: 16px; }
.cms-modern-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(0, 0, 0, .5); }
.cms-modern-crumbs li:not(:last-child)::after { content: "/"; margin: 0 8px; opacity: .5; }
.cms-modern-crumbs a { color: inherit; text-decoration: none; }
.cms-modern-crumbs a:hover { color: var(--bs-primary); }
.cms-modern-crumbs li[aria-current="page"] { color: rgba(0, 0, 0, .8); font-weight: 600; }

.cms-modern-title {
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0 0 16px;
    max-width: 18ch;
}
.cms-modern-lead {
    font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
    line-height: 1.5;
    color: rgba(0, 0, 0, .65);
    max-width: 60ch;
    margin: 0 0 24px;
}
.cms-modern-meta {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    font-size: .875rem; color: rgba(0, 0, 0, .55);
}
.cms-modern-meta span:not(:last-child)::after { content: "\00b7"; margin-left: 16px; opacity: .6; }

.cms-modern-article { padding: 0 24px clamp(48px, 6vw, 80px); }
.cms-modern-prose {
    max-width: 70ch;
    margin-inline: auto;
    font-size: 1.125rem;
    line-height: 1.65;
}
.cms-modern-prose > * + * { margin-top: 24px; }
.cms-modern-prose h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); font-weight: 700; letter-spacing: -.01em; margin-top: 48px; margin-bottom: 8px; }
.cms-modern-prose h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 600; margin-top: 40px; margin-bottom: 8px; }
.cms-modern-prose h2 + *, .cms-modern-prose h3 + * { margin-top: 0; }
.cms-modern-prose p { max-width: 70ch; }
.cms-modern-prose a { color: var(--bs-primary); text-underline-offset: .2em; }
.cms-modern-prose blockquote {
    margin: 32px 0; padding: 4px 0 4px 24px;
    border-left: 3px solid var(--bs-primary);
    font-size: 1.25rem; font-style: italic; color: rgba(0, 0, 0, .75);
}
.cms-modern-prose img { border-radius: var(--cms-radius); }
.cms-modern-prose figure { margin: 32px 0; }
.cms-modern-prose figcaption { font-size: .875rem; color: rgba(0, 0, 0, .55); margin-top: 8px; text-align: center; }
.cms-modern-prose ul, .cms-modern-prose ol { padding-left: 1.5em; }
.cms-modern-prose li + li { margin-top: 8px; }

@media (max-width: 576px) {
    .cms-modern-title { max-width: none; }
    .cms-modern-hero { padding-left: 16px; padding-right: 16px; }
    .cms-modern-article { padding-left: 16px; padding-right: 16px; }
}