/* /themes/custom/olivero_sub/css/custom.css */
/* 1. Import the font weights you need (Example: Google Fonts import) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&display=swap');

/* --- Custom Layout Classes (For use in Layout Builder) --- */
.cosmos-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.layout-3-col-desktop {
    /* Default (mobile/small screen) is one column, achieved via normal flow */
    display: block;
}

/* Media query for desktop size (e.g., screens wider than 768px) */
@media (min-width: 768px) {
    .layout-3-col-desktop {
        /* Switch to CSS Grid for 3 columns on desktop */
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* Creates three equal columns */
        gap: 20px;
        /* Space between the columns */
        align-items: start;
    }

    /* Use this class on a child element if you want it to span all columns */
    .grid-span-3 {
        grid-column: 1 / -1;
    }
}

.block__content > .field--name-info {
    margin-block: 0 var(--sp);
    letter-spacing: 0.02em;
    color: black;
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-heading);
    text-align: center;
}

.block__content>.text-content {
    font-family: var(--font-family-body);
}

h1, h2 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-heading);
    margin-bottom: var(--spacing-l);
    font-family: var(--font-family-heading);
    font-weight: 800;
}

:root {
    --font-size-base: 1rem;
    --font-size-l: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;
    --font-size-3xl: 2.75rem;
    --line-height-body: 1.5;
    --line-height-heading: 1.2;
    --spacing-s: 0.5rem;
    --spacing-m: 1rem;
    --spacing-l: 2rem;
    --spacing-xl: 3rem;
    --font-family-body: 'Inter', sans-serif;
    --font-family-heading: 'Inter', sans-serif;
}

body {
    font-family: var(--font-family-body);
    font-weight: 400;
}

p,
li {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    font-weight: 400;
}

.bullet-number {
	ms-flex-align: center;
    align-items: center;
    background-color: #1a73e8;
    color: white;
    font-size: 30px;
    border-radius: 50%;
    display: -ms-flexbox;
    display: flex;
    height: 50px;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 0 26px;
    width: 50px;
}

.vertical-center {
    margin-left: auto;
    margin-right: auto;
}

.sign-in-button {
    border-style: solid;
    border-width: thin;
    border-radius: 20px;
    padding: 5px 5px 5px 5px;
    background: white;
    border-color: lightgray;
    max-width: 220px;
}

.teaser__content .layout__region--first img {
    border-style: solid;
    border-radius: 10px;
    border-width: thick;
    border-top: black;
    border-left: black;
    border-right: black;    
}