@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

* {
    box-sizing: border-box;
}

:root {
    --k-font-heading: "IBM Plex Sans", sans-serif;
    --k-font-body: "IBM Plex Mono", monospace;

    --font-base-size: 1rem;
    --font-extra-small: calc(var(--font-base-size) * .75);
    --font-small: calc(var(--font-base-size) * .875);
    --font-large: calc(var(--font-base-size) * 2);

    --spacing-unit: 1rem;
    --container-width: 1200px;

    --shadow-md: 0 4px 12px oklch(from var(--k-brand-base) 0.15 0.1 h / 0.14);

    /* Block theming vars */
    --k-hero-header-1-font-size: calc(var(--font-base-size) * 4);
    --k-hero-header-1-color: var(--text-on-brand);
    --k-hero-paragraph-font-size: var(--font-base-size);
    --k-hero-paragraph-color: var(--text-on-brand);
    --k-hero-background-color: var(--k-brand-base);
    --k-hero-display: flex;
    --k-hero-flex-direction: column;
    --k-hero-align-items: center;
    --k-hero-padding: calc(var(--spacing-unit) * 4);

    --k-navigation-background-color: var(--ui-bg-muted);
    --k-navigation-link-color: var(--text-color);

    --k-testimonial-quote-font-size: calc(var(--font-base-size) * 1.25);
    --k-testimonial-author-font-weight: 500;
    --k-testimonial-quote-margin: 0 0 var(--spacing-unit);
}

body {
    font-family: var(--k-font-body);
}

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

img, figure {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;

    &:hover {
        color: var(--k-brand-base);

        &::after {
            color: var(--k-brand-base);
        }
    }
}

/* ----------------------------------------
   BLOCKS
   ---------------------------------------- */

[data-type="hero_block"] {
    display: var(--k-hero-display);
    flex-direction: var(--k-hero-flex-direction);
    align-items: var(--k-hero-align-items);
    padding: var(--k-hero-padding);
    background-color: var(--k-hero-background-color);

    h1 {
        font-size: var(--k-hero-header-1-font-size);
        color: var(--k-hero-header-1-color);
    }

    p {
        font-size: var(--k-hero-paragraph-font-size);
        color: var(--k-hero-paragraph-color);
    }
}

[data-type="text_block"] p {
    padding: var(--spacing-unit);
}

[data-type="contact_form_block"] {
    padding: var(--spacing-unit);
}

[data-type="row_block"],
[data-type="navigation_block"] {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--spacing-unit), 1fr)
        [content-start] min(100% - (var(--spacing-unit) * 2), var(--container-width))
        [content-end] minmax(var(--spacing-unit), 1fr)
        [full-end];
}

.row-block {
    display: grid;
    gap: var(--spacing-unit);
    grid-column: full-start / full-end;
    grid-template-columns: 1fr;
}

.row-block[data-contained="true"] {
    grid-column: content-start / content-end;
}

@media (min-width: 768px) {
    [data-layout="1"]     { --row-block-ratio: 1fr; }
    [data-layout="1-1"]   { --row-block-ratio: 1fr 1fr; }
    [data-layout="1-2"]   { --row-block-ratio: 1fr 2fr; }
    [data-layout="2-1"]   { --row-block-ratio: 2fr 1fr; }
    [data-layout="1-1-1"] { --row-block-ratio: 1fr 1fr 1fr; }

    .row-block {
        gap: 0 var(--spacing-unit);
        grid-template-columns: var(--row-block-ratio);
    }
}

[data-type="navigation_block"] nav {
    grid-column: full-start / full-end;
    display: grid;
    grid-template-columns: inherit;
}

[data-type="navigation_block"] nav menu {
    grid-column: content-start / content-end;
    list-style: none;
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    padding: var(--spacing-unit);
    margin: 0;

    a {
        color: var(--k-navigation-link-color);
    }
}

[data-type="testimonial_block"] {
    padding: var(--spacing-unit);

    .row-block {
        gap: var(--spacing-unit);
    }

    .column {
        box-shadow: var(--shadow-md);
        padding: var(--spacing-unit);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .quote {
        font-size: var(--k-testimonial-quote-font-size);
        margin: var(--k-testimonial-quote-margin);
    }

    .author {
        font-weight: var(--k-testimonial-author-font-weight);
        text-align: right;

        &::before {
            content: "- ";
        }
    }
}

[data-type="custom_html_block"] {
    padding: var(--spacing-unit);
}