/*
Theme Name: Food & Mood Studio
Theme URI: https://foodandmoodstudio.hr
Author: Vertical Development Studio
Author URI: https://vertical.hr
Description: This theme is designed to be flexible. It comes with full page designs, is fully compatible with the site editor.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.0
Version: 0.0.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fmstudio
Domain Path: /languages
Tags: one-column, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, accessibility-ready
*/

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326cqi, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087cqi, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174cqi, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696cqi, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793cqi, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651cqi, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504cqi, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658cqi, 3.8147rem);

  --box-shadow-top: 0 -35px 20px -30px rgba(0,0,0,0.05);
  --box-shadow-bottom: 0px 35px 20px -30px rgba(0,0,0,0.05);
}

:where(
.entry-content > .wp-block-columns,
.entry-content > * > .wp-block-columns,
.entry-content .wp-block-group.is-layout-grid,
.entry-content .wp-block-group.is-layout-flex
).client-logos {
    --grid-min-column-size: 175px;
    gap: 60px;
}

.client-logos__item {
    filter: saturate(0);
    opacity: 0.7;
    text-align: center;

    .wp-block-image {
        place-items: center;
    }

    img {
        max-height: 120px;
        min-width: auto;
        object-fit: contain;
    }
}

.client-logos__item--invert {
    filter: saturate(0) invert(1);
}

h1, h2, h3, h4, h5, h6 {
    /*max-width: 20em !important;*/
    margin-inline: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left;
}

a {
    transition-property: background-color, color;
    transition-duration: var(--transition--duration);
    transition-timing-function: var(--transition--timing-function);
}

.header--hero {
    padding-block: var(--wp--preset--spacing--80) 0;
}

.header,
.section {
    > * + * {

    }

    > .wp-block-group {
        p {
            text-align: center;
        }
    }

    .wp-block-quote {
        p {
            text-align: left;
        }
    }

    .wp-block-heading {
        text-align: center;
    }

    > .wp-block-buttons {
        justify-content: center;
    }

    h3 {
        font-size: var(--wp--preset--font-size--large);
    }
}


.section {
    > .is-layout-flex,
    > .is-layout-grid {
        row-gap: 2rem;

        > .wp-block-group {
            display: grid;
            grid-template-rows: subgrid;

            * {
                margin-block-start: 0;
                text-align: center;
            }

            p.has-xx-large-font-size {
                aspect-ratio: 1;
                border-radius: 50%;
                color: var(--wp--preset--color--contrast);
                background-color: var(--wp--preset--color--base);
            }

            .wp-block-image {
                img {
                    width: 150px;
                    height: 150px;
                }
            }

            .wp-block-heading {
                align-self: end;
            }
        }
    }

    h3 {
        font-size: var(--wp--preset--font-size--medium);
    }
}

.section--services {
    > .is-layout-flex,
    > .is-layout-grid {
        > .wp-block-group {
            grid-row: span 3;
        }
    }
}

.section--outcomes {
    > .is-layout-flex,
    > .is-layout-grid {
        > .wp-block-group {
            grid-row: span 2;
        }
    }

    margin-block-start: 5rem;
    padding-block: var(--wp--preset--spacing--80);

    h3 {
        font-size: var(--wp--preset--font-size--large);
    }
}

.section--services {
    .wp-block-image {
        max-width: 130px;
        max-height: 130px;
    }
}

.section--benefits {
    > .is-layout-flex,
    > .is-layout-grid {
        > .wp-block-group {
            grid-row: span 2;
        }
    }
}

.section--approach {
    > .is-layout-flex,
    > .is-layout-grid {
        > .wp-block-group {
            grid-row: span 3;
        }
    }
}

.section--testimonials {
    .wp-block-columns + .wp-block-columns {
        margin-block-start: 120px;
    }
}

.section--work {
    .wp-block-gallery {
        gap: 10px;

        @media screen and (max-width: 768px) {
            &.has-nested-images figure.wp-block-image:not(#individual-image) {
                width: 100%;
            }
        }
    }
}

:root {
    --testimonial--color: var(--wp--preset--color--deep-forest-green);
    /*--testimonial--background: var(--wp--preset--color--sage-green-4);*/

    --testimonial--color: var(--wp--preset--color--sage-green-4);
    /*--testimonial--background: var(--wp--preset--color--deep-forest-green);*/
}

.testimonial-card {
    display: grid;
    justify-items: center;
    max-width: 450px;
    color: var(--testimonial--color);
    background-color: var(--testimonial--background);
    border-radius: 12px;
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/
    padding: var(--wp--preset--spacing--40);
    margin-inline: auto;
}

.testimonial-content {
    margin-bottom: 16px;
    color: var(--testimonial--color);
    line-height: 1.5;
}

.avatar-group {
    display: flex;
    margin-bottom: 16px;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--sage-green);
    border: 2px solid white;
    overflow: hidden;
}

.avatar:not(:first-child) {
    margin-left: -12px;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.star-rating {
    display: flex;
    gap: 4px;
}

.star {
    color: #ffc107;
    font-size: 30px;
}