/*
Theme Name: Love Your Look - Kadence Child
Theme URI: https://greatlynxdesigns.com/
Description: Child theme for the Love Your Look website.
Author: Joel / Great Lynx Designs
Template: kadence
Version: 1.0.0
Text Domain: loveyourlook-kadence
*/


/* ==========================================================
   Header
   ========================================================== */

.site-main-header-wrap .site-header-row-container-inner {
    background-color: #FFFFFF;
    background-image:
        radial-gradient(circle, #27E6DF 3px, transparent 3.5px);
    background-size: 24px 24px;
}


/* ==========================================================
   Home page section structure
   ========================================================== */

.lyl-section {
    width: 100vw;
    max-width: none;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0;

    min-height: 500px;

    padding:
        clamp(4rem, 8vw, 7rem)
        clamp(2rem, 8vw, 7rem);

    box-sizing: border-box;
}


/* ==========================================================
   Home page section colors
   ========================================================== */

.lyl-hero {
    background-color: #FFCC4D;
}

.lyl-about {
    background-color: #FFFFFF;
}

.lyl-services {
    background-color: #27E6DF;
}

.lyl-process {
    background-color: #27E6DF;
}

.lyl-booking {
    background-color: #F38391;
}


/* ==========================================================
   Gutenberg spacing
   ========================================================== */

.home .entry-content > .wp-block-group {
    margin-block-start: 0;
    margin-block-end: 0;
}


/* ==========================================================
   Kadence home-page reset
   ========================================================== */

.home .content-wrap {
    margin-top: 0;
    margin-bottom: 0;
}

.home .content-bg,
.home .single-entry,
.home .entry-content-wrap,
.home .site-main,
.home .content-area,
.home .entry-content {
    background: transparent;
}

.home .single-entry,
.home .entry-content-wrap {
    box-shadow: none;
    border-radius: 0;
}

.home .entry-content,
.home .entry-content-wrap {
    padding: 0;
}

.home #primary {
    margin-top: 0;
    margin-bottom: 0;
}

.home {
    overflow-x: clip;
}

.lyl-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
}

.lyl-hero-inner .wp-block-column:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lyl-hero-inner .wp-block-image {
    margin: 0;
}

.lyl-hero-inner .wp-block-image img {
    display: block;
    width: min(100%, 420px);
    height: auto;
    max-width: min(100%, 360px);
    max-height: 480px;
}

.lyl-about-inner {
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.lyl-about-inner .wp-block-image {
    margin: 0;
}

.lyl-about-inner .wp-block-image img {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
}

.lyl-services > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.lyl-service-grid {
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: 2.5rem;
}

.lyl-service-card {
    background: #FFFFFF;
    color: #242021;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 4px;
}

.lyl-service-card h3 {
    margin-top: 0;
}

.lyl-process > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.lyl-process-grid {
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: 2.5rem;
}

.lyl-process-step {
    padding: 1.5rem 0;
}

.lyl-process-step > p:first-child {
    font-size: 2rem;
    font-weight: 800;
    color: #F38391;
    margin-bottom: 0.5rem;
}

.lyl-process-step h3 {
    margin-top: 0;
}

.lyl-button,
.wp-block-button__link,
.site-header-item .button {
    border-radius: 999px;
}