/*
 | Colour schemes and font sizes for legacy page builder blocks (layouts/default.htm).
 | Plain CSS, outside the Mix build. partials/site/legacy-section.htm wraps a block in
 | .legacy-section with a scheme class (assets/css/schemes.css) and the size flags
 | from partials/site/section-sizes.htm.
 |
 | Legacy blocks style their own headings, so these rules use !important to make the
 | editor's choice win. Heading = h1/h2, body = paragraphs and list items.
 */

/* Keep the block's margins inside the coloured background */
.legacy-section {
    display: flow-root;
}

/* .block-margin has a white top border to stop margin collapse; hide it on colour */
.legacy-section .block-margin {
    border-color: transparent;
}

/* Red and black schemes: legacy text is dark by default, so make it follow the scheme */
:is(.legacy-section.scheme-red, .legacy-section.scheme-black) :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, label, figcaption) {
    color: inherit !important;
}

/* Font sizes - desktop sizes scale down with the viewport unless a mobile size is set */
.legacy-section[data-heading-size] :is(h1, h2) {
    font-size: clamp(
        min(calc(var(--heading-size) * 1px), max(2.25rem, calc(var(--heading-size) * 0.42px))),
        calc(var(--heading-size) * 100vw / 1440),
        calc(var(--heading-size) * 1px)
    ) !important;
}

.legacy-section[data-body-size] :is(p, li) {
    font-size: max(1rem, calc(var(--body-size) * 0.9px)) !important;
}

@media (min-width: 1024px) {
    .legacy-section[data-body-size] :is(p, li) {
        font-size: calc(var(--body-size) * 1px) !important;
    }
}

@media (max-width: 1023.98px) {
    .legacy-section[data-heading-size-mobile] :is(h1, h2) {
        font-size: calc(var(--heading-size-mobile) * 1px) !important;
    }

    .legacy-section[data-body-size-mobile] :is(p, li) {
        font-size: calc(var(--body-size-mobile) * 1px) !important;
    }
}

/*
 | Button + secondary arrow link (partials/global/cta.htm, components/hero.htm).
 | The link matches the new site's .link-arrow: underlined in the accent colour, with an arrow.
 */
.legacy-cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 32px;
}

.legacy-cta-group--center {
    justify-content: center;
}

.legacy-cta-group--below {
    flex-direction: column;
    align-items: flex-start;
}

.legacy-cta-group--below.legacy-cta-group--center {
    align-items: center;
}

.legacy-cta-group > .button {
    margin: 0;
}

.legacy-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--scheme-accent, #ff472f);
    font-family: "sofia-pro", ui-sans-serif, system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none !important;
    color: var(--scheme-fg, currentColor) !important;
    transition: color 0.15s;
}

.legacy-link-arrow:hover,
.legacy-link-arrow:focus-visible {
    color: var(--scheme-accent, #ff472f) !important;
}

.legacy-link-arrow svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* The legacy hero has white text over a photo */
.hero .legacy-link-arrow {
    color: #ffffff !important;
}

.hero .legacy-link-arrow:hover,
.hero .legacy-link-arrow:focus-visible {
    color: var(--scheme-accent, #ff472f) !important;
}