/*
 * The base a site on the new look is drawn on.
 *
 * Linked only when sites.look is `studio`. A classic site never sees this file
 * and keeps the inline stylesheet it has always had, byte for byte, which is the
 * promise made to the three websites already built with it.
 *
 * Everything here reads a token. There is no color and no measurement that a
 * theme cannot change, which is the difference between this and the stylesheet
 * it replaces: that one hard-coded the container width, the button padding, the
 * form border and the focus ring, and every site got the same ones.
 */

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--site-font-body, system-ui, sans-serif);
    font-size: var(--site-text-base, 17px);
    line-height: var(--site-lh, 1.6);
    color: var(--site-color-text, #14201A);
    background: var(--site-color-background, #fff);
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--site-font-heading, inherit);
    font-weight: var(--site-heading-weight, 700);
    letter-spacing: var(--site-heading-tracking, -0.01em);
    line-height: 1.15;
    margin: 0 0 .5em;
}

/* ── the two wrappers every block uses ────────────────────────────── */

.eb-container {
    max-width: var(--mw, var(--site-container, 1120px));
    margin: 0 auto;
    padding-inline: var(--site-gutter, clamp(16px, 3vw, 24px));
}

.eb-section {
    padding-top: var(--pt, var(--site-section-pad, 72px));
    padding-bottom: var(--pb, var(--site-section-pad, 72px));
    background: var(--bg, transparent);
    color: var(--tc, inherit);
    text-align: var(--ta, inherit);
    scroll-margin-top: 90px;
}
.eb-anchor { scroll-margin-top: 90px; }

/* ── buttons ──────────────────────────────────────────────────────── */

.eb-btn {
    display: inline-block;
    padding: var(--site-btn-pad, .72em 1.6em);
    border-radius: var(--site-btn-radius, 8px);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--site-btn-weight, 600);
    text-transform: var(--site-btn-case, none);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--site-btn-shadow, none);
    background: var(--btn-color, var(--site-color-primary, #1E6F4E));
    color: var(--site-on-primary, #fff);
    /* No border: a button's height is its padding and its line. See the four style
       rules in site-elements.css, where an outline draws its line as an inset
       shadow so that every style measures the same. */
    border: 0;
    transition: filter .18s ease, transform .18s ease, background-color .18s ease;
}
.eb-btn:hover { filter: brightness(.93); }
.eb-btn:focus-visible { outline: 2px solid var(--site-color-primary, #1E6F4E); outline-offset: 2px; }

/* ── cards ────────────────────────────────────────────────────────── */

.eb-card-shape { border-radius: var(--site-card-radius, 12px); }

/* ── links inside content ─────────────────────────────────────────── */

[data-block-id] a:not(.eb-btn):not(.eb-social__one) {
    color: var(--site-link-color, var(--site-color-primary, #1E6F4E));
    text-decoration: var(--site-link-underline, none);
    text-underline-offset: .18em;
}
[data-block-id] a:not(.eb-btn):not(.eb-social__one):hover { text-decoration: underline; }
[data-block-id] nav a,
[data-block-id] header a { text-decoration: none; color: inherit; }

/* Bold and italic have to be synthesised where a face is missing, or a heading
   in a single-weight family renders at the same weight as its paragraph. */
[data-block-id] { font-synthesis: weight style; -webkit-font-synthesis: weight style; }
[data-block-id] strong, [data-block-id] b { font-weight: 700; }
[data-block-id] em, [data-block-id] i { font-style: italic; }

/* ── the header, which every page draws from the site layout ──────── */

.eb-header { position: relative; z-index: 200; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.08); }
.eb-header.is-sticky { position: sticky; top: 0; }
.eb-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-space-4, 24px);
    max-width: var(--site-container, 1120px);
    margin: 0 auto;
    padding: calc(var(--site-space-3, 18px) + 4px) var(--site-gutter, 24px);
}
.eb-header__nav { display: flex; gap: var(--site-space-5, 30px); align-items: center; }
.eb-header__nav a,
.eb-header__dropdown-btn {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: inherit;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.eb-header__nav-item { position: relative; }
.eb-header__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--site-color-background, #fff);
    box-shadow: 0 8px 24px rgb(0 0 0 / .12);
    border-radius: var(--site-card-radius, 12px);
    min-width: 180px;
    display: none;
    flex-direction: column;
    padding: .5rem 0;
    z-index: 50;
}
.eb-header__nav-item.is-open .eb-header__dropdown { display: flex; }
.eb-header__dropdown a { padding: .5rem 1rem; white-space: nowrap; }
.eb-header__hamburger { display: none; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: inherit; }

@media (max-width: 768px) {
    .eb-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg, var(--site-color-background, #fff));
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 8px 24px rgb(0 0 0 / .15);
        z-index: 199;
    }
    .eb-header__nav.is-open { display: flex; }
    .eb-header__hamburger { display: inline-block; }
}

/* ── forms ────────────────────────────────────────────────────────── */

.eb-form__group { display: flex; flex-direction: column; }
.eb-form__label { display: block; font-weight: 500; margin-bottom: .375rem; font-size: var(--site-text-sm, .9rem); }
.eb-form__input,
.eb-form__textarea,
.eb-form__select {
    width: 100%;
    padding: .7em .85em;
    border: 1px solid var(--site-color-border, #E2E7E0);
    border-radius: var(--site-radius, 8px);
    font-size: inherit;
    font-family: inherit;
    background: var(--site-color-background, #fff);
    color: inherit;
    box-sizing: border-box;
}
.eb-form__input:focus,
.eb-form__textarea:focus,
.eb-form__select:focus {
    outline: none;
    border-color: var(--site-color-primary, #1E6F4E);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-color-primary, #1E6F4E) 18%, transparent);
}
.eb-form__textarea { resize: vertical; min-height: 120px; }
select.eb-form__input { cursor: pointer; }
.eb-form__error { display: block; font-size: var(--site-text-sm, .8rem); color: var(--site-accent-text, var(--site-color-accent, #B3302A)); margin-top: .25rem; min-height: 1rem; }
.eb-form__radio-group,
.eb-form__checkbox-group { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.eb-form__choice { display: flex; align-items: center; gap: .4rem; cursor: pointer; font-size: var(--site-text-sm, .9rem); }

/* ── the classic FAQ block, which a converted page may still hold ─── */

.eb-faq__item { border-bottom: 1px solid var(--site-color-border, #E2E7E0); }
.eb-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0;
    text-align: left;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    gap: 1rem;
}
.eb-faq__a { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.eb-faq__a.open { max-height: 600px; }
.eb-faq__a p { padding: 0 0 1rem; margin: 0; color: var(--tc-muted, var(--site-color-textMuted, #5D6A61)); }

.eb-text__body { line-height: var(--site-lh, 1.7); margin: 0; color: var(--tc, inherit); }

/* ── editing marks, which only the canvas ever sees ───────────────── */

[data-builder-mode="edit"] .edit-field { outline: 1px dashed transparent; outline-offset: 2px; cursor: text; transition: outline-color .15s; }
[data-builder-mode="edit"] .edit-field:hover { outline-color: color-mix(in srgb, var(--site-color-primary, #1E6F4E) 45%, transparent); }
[data-builder-mode="edit"] .edit-field:focus { outline: 2px solid var(--site-color-primary, #1E6F4E); }
[data-builder-mode="edit"] .edit-field:empty::before { content: attr(data-placeholder); color: var(--site-color-textMuted, #5D6A61); font-style: italic; }

/* Somebody from the team looking as a member (Open As): one strip over the page. */
.eb-viewing {
    position: sticky; top: 0; z-index: 1000;
    padding: .6em 1em;
    background: var(--site-color-text, #1c1c1c);
    color: var(--site-color-background, #fff);
    font-size: .9rem; text-align: center;
}
.eb-viewing a { color: inherit; text-decoration: underline; }