/*
Theme Name: Generatepress Child
Template: generatepress
Theme URI: http://selena-art.com/
Author: Olena
Author URI: http://my-wp.com/author/
Description: Дочерняя тема для Generatepress
Tags: измененный футер, измененные стили
Version: 1.0
*/
:root {

    --content-width: 1300px;
    --scrollbar-width: 12px;
    /* --main-bg-color: #fdfefb;   */
    --main-bg-color: #fdfefb; 
    --light-card-bg-color: #deefdd94;
    --olvia-biege : #fffaf7;
    --deep-biege-color: #CACBBF;
    --olvia-olive : #84836A;
    --main-text-color: #545454;
    --deep-accent-color: #1b4d3a;
    /* --main-accent-color: #276f55; */
    --main-accent-color: #3f6c45;
    --step-accent-color: #4c956c;
    /* --main-accent-color: #606e4c; */
    --middle-accent-color: #a5caa8;  
    /* --light-accent-color: #e7ede3; */
    --light-accent-color: #e1f6d8;
    --light-yellow-color: #cdeda3;
    --light-button-color: #deefdd;
    --rgba-light-accent-color: rgba(208, 240, 192, 0.45);
    --rgba-accent-color: rgba(39, 111, 85, 0.5);
    --rgba-white-color: rgba(227, 227, 227, 0.5);
    --small-shadow-color: rgba(64, 64, 64, 0.3);
    --olvia-long-shadow: 0 32px 68px -46px rgba(31, 84, 64, 0.26), 0 18px 42px -30px rgba(88, 203, 120, 0.22);
    --grey-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    --small-line: rgba(34, 109, 60, 0.1);
}
/* custom scroll bar */
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-thumb {	background: var(--main-accent-color);}

html {  scroll-behavior: smooth; }
body {
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather', serif;
    font-weight: bold;
    color: var(--main-accent-color);
}

h1 {font-size: clamp(1.6em, 2.4em, 2.5em);}
h2 {font-size: clamp(1.4em, 1.7em, 2.2em);}
h3 {font-size: clamp(1.2em, 1.4em, 1.6em);}
h4 {font-size: clamp(1.05em, 1.2em, 1.3em);}

/* Text */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-bold { font-weight: bold; }
.text-italic { font-style: italic; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.no-decoration {text-decoration: none;}
.no-decoration:hover {text-decoration: underline; }
/* margins, padding */
.mt-60 {margin-top: 60px;}
.mb-60 {margin-bottom: 60px;}
.my-60 {margin-top: 60px; margin-bottom: 60px;}
.mt-30 {margin-top: 30px;}
.mb-30 {margin-bottom: 30px;}
.my-30 {margin-top: 30px;margin-bottom: 30px;}
.pt-20 {padding-top: 20px;}
.pb-20 {padding-bottom: 20px;}
.pb-60 {padding-bottom: 60px;}
.pt-60 {padding-top: 60px;}
.py-60 {padding-bottom: 60px;padding-top: 60px;}
.long-shadow img{box-shadow: var(--olvia-long-shadow);}
/* ol, ul */
.decimal-zero-strong { list-style-type: decimal-leading-zero;}
.decimal-zero-strong li::marker{ font-size: 1.1rem; font-weight: bold; color: var(--main-accent-color);}
.promo-list, .check-list, .dash-list {list-style-type: none;margin-left: .3em; overflow: hidden;}
.promo-list li{margin-bottom: 10px; opacity: 0; 
    animation: slideRight .5s ease-out .5s forwards;  }
.promo-list li:nth-child(2) {animation-delay:1s;}
.promo-list li:nth-child(3) {animation-delay:1.5s;}
.promo-list li:nth-child(4) {animation-delay:2s;}
.promo-list li:nth-child(5) {animation-delay:2.5s;}
.promo-list li:nth-child(6) {animation-delay:3s;}
.dash-list {margin-bottom: 1rem;}
.dash-list li::before{content: " – ";}
@keyframes slideRight{
    0% {opacity: 0; transform: translate(40px,0);}
    100% {opacity: 1; transform: translate(0,0);}
}
.promo-list li::before{content: "";display: inline-block;width: 9px; height: 9px; margin-right: 10px; transform: rotate(45deg);background-color: var(--main-accent-color);
 background: linear-gradient(293deg, var(--main-accent-color), var(--light-accent-color));}

.check-list li::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 11px;
    background: none;
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: var(--main-accent-color);
    transform-origin: bottom left;
    margin: 0 14px 5px 0;
    transform: rotate(45deg);
}
/* images */
.round-img img {border-radius: 17px;}

/* Content */
.site-content {display: block;}
/* width */
.w-100 {width: 100%;}
select.w-100 {width: calc(100% - 2px);}
.full-width-breakout {
  width: calc(100vw - var(--scrollbar-width));
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: none;
  overflow: hidden;
}
.grid-container, .wp-block-group__inner-container {  max-width: var(--content-width); }
.site-main .wp-block-group__inner-container {padding: 0;}

.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header, .sidebar .widget {
    background-color: var(--main-bg-color);
}
.separate-containers .comments-area, .separate-containers .inside-article, .separate-containers .page-header, .separate-containers .paging-navigation {
    padding: 10px;
}
.blog .site-content,.archive .site-content, .single .site-content {display: flex;justify-content: space-between;}
.blog .post-image,.archive .post-image {float: left;}
.blog .post-image img,.archive .post-image img{max-width: 200px; margin-right: 15px; border-radius: 10px;}
.blog article::after, .blog article::before, 
.archive article::after, .archive article::before  {content: ""; display: table; clear: both;}
.single .featured-image {display: none;}

/* Nav */
.main-navigation .main-nav ul li a {
    padding-left: 10px;
    padding-right: 10px;
    font-family: "Merriweather", serif;
}
.inside-header {padding: 0 0 2px;}
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 10px;
    animation: shrink-header linear both;
    animation-timeline: scroll();
    animation-range: 0 300px;
    box-shadow: 0 3px 8px rgba(63, 108, 69, 0.2);
}
@keyframes shrink-header {
    from { padding: 10px 10px; }
    to {  padding: 3px 2px; }
}
/* Contacts */
.pc-contact-info {
    align-self: center;
    padding: 35px 0 15px 35px;
    border-radius: 17px 0 0 17px;
    margin-right: -15px !important;
}
.pc-contact-info .wp-block-columns{
    gap: 10px !important;
    margin-bottom: 12px;
}
.pc-contact-info > * {  color: #fff !important;}
.pc-contact-info svg {  fill: #fff !important;}
.pc-contact-info a {  text-decoration: none;}
.pc-contact-info a:hover {  text-decoration: underline;}
.pc-contact-info p { margin-bottom: 0;}
/* Forms, buttons  */
button, :root :where(.wp-element-button, .wp-block-button__link), html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.wp-block-button__link:not(.has-background) {
    background-color: var(--main-accent-color);
    color: var(--main-bg-color);
    border-radius: 10px;
    padding: 6px 20px;
    display: inline-block;
    text-align: center;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
    color: var(--main-text-color);
    padding: 6px 12px;
    border-radius: 8px;
    width: clamp(250px, 100%, 420px);
    margin-bottom: 10px;
}
input[type="search"].wp-block-search__input {margin-bottom: 0;}
.center-button {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
select option:checked,
select option:hover {
  background-color: var(--main-accent-color); 
  color: var(--main-bg-color);
}
input:focus, textarea:focus, select:focus {
    outline: 0;
    border-color: grey;
    box-shadow: 0 0 8px var(--rgba-accent-color);
    color: #111;
}
textarea[name="your-message"] {height: 180px;}
.iti--input-container.iti--has-country-selector.iti--show-flags {
    width: clamp(250px, 100%, 420px);
    margin-bottom: 10px;
}
.iti__selected-country:hover, .iti__selected-country:focus {background-color: transparent;}

.olvia-form-bottom {background-color: var(--light-accent-color);}
.olvia-form-order {
    padding: 55px 30px;
    color: #fff;
    border-radius: 15px;
}

.olive-bg {
    background: url(./assets/img/olive-bg2.webp) center/cover no-repeat var(--olvia-biege);
    padding: 50px 0;
}
.pc-block {
    background: url(./assets/img/olive-top.webp) 100% -10% no-repeat var(--olvia-biege);
    box-shadow: 0 3px 46px rgba(0, 0, 0, 0.35);
    padding: 30px;
    border-radius: 17px;
    max-width: calc(var(--content-width) - 20px);
    width: 100%;
    margin: 15px auto;
    position: relative;
}
.pc-block.contacts {
    background: url(./assets/img/olive-bg-right.webp) 100% 0%/350px repeat-y var(--olvia-biege);
}
/* Course Page */

.whomfor-card {
    background-color: var(--light-card-bg-color);
    border-radius: 17px;
    box-shadow: var(--olvia-long-shadow);
    border: 1px solid var(--main-accent-color);
    margin: 20px 0 !important;
}
.whomfor-card__img img{
    border-radius: 17px 17px 0 0;
}
.whomfor-card__content {
    padding: 15px;
}

.whomfor-card__content .wp-block-button {
    margin-top: auto !important;
}

.whomfor-card__content ol {
    list-style-type: decimal-leading-zero;
    margin-left: 30px;
}
.whomfor-card .wp-block-buttons {
    margin-top: auto;
}
@media (min-width: 781px){
    .olvia-form-bottom {
        margin: 140px 0 80px;
        align-items: center !important;
        height: 350px;
        padding: 90px 50px;
        border-radius: 17px;
        box-shadow: var(--olvia-long-shadow);
    }
    .olvia-form-header {
        padding-right: 90px;
    }
    .olvia-form-header h2 {
        font-size: 3em;
        font-weight: normal;
    }
    .olvia-form-header h2 strong {display: block;}
    .olvia-form-order {
        margin-left: -70px !important;       
    }
}


/* schedule Page */
.wp-block-group.schedule-list__group {
    border-radius: 17px;
    border: 1px solid var(--rgba-light-accent-color);
    background-color: var(--olvia-biege);
    padding: 18px 12px;
    margin-bottom: 30px;
    box-shadow: var(--grey-box-shadow);
}
.schedule-filter__monthes { 
    background: var(--rgba-light-accent-color);
    border: 1px solid var(--main-accent-color);
    padding: 10px;
    border-radius: 7.5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.schedule-filter__monthes a {
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    padding: 3px 9px;
    border-radius: 4px;
}
.wp-block-columns.is-layout-flex.schedule-list__card {
    gap: 8px 15px !important;
    background: var(--rgba-light-accent-color);
    padding: 12px; 
    align-items: center !important;
    border: 1px solid var(--main-accent-color);
    border-top: none;
    box-shadow: var(--grey-box-shadow);
    margin-bottom: 0;
}

.schedule-list__header + .schedule-list__card:not(.course-price__card) {
    border-top: 1px solid var(--main-accent-color);
    border-radius: 7.5px 7.5px 0 0;
}
.wp-block-columns.is-layout-flex.schedule-list__card:not(.course-price__card):last-of-type {
    border-radius: 0 0 7.5px 7.5px;
}
.wp-block-columns.is-layout-flex.course-price__card {
    margin-bottom: 1rem;
    border-radius: 7.5px;
    border: 1px solid var(--main-accent-color);
}
.wp-block-columns.schedule-list__card:nth-of-type(even) {background-color: var(--olvia-biege);}
.wp-block-columns.schedule-list__card p {margin: 0;}
.schedule-list__header {font-size: 0.9em; margin-bottom: 8px;}
.schedule-list__header p{margin: 0;}
.color-beginner .schedule-list__logo{background-color: var(--step-accent-color); }
.color-universal .schedule-list__logo{background-color: var(--light-yellow-color);}
.color-psychologist .schedule-list__logo{background-color: var(--middle-accent-color);}

.schedule-list__logo {display: flex;justify-content: center;align-items: center;max-width: 50px; padding: 5px; align-self: stretch; margin: -12px 0 -12px -12px !important;  }
.course-price__card .schedule-list__logo {border-radius: 7.5px 0 0 7.5px;}
.schedule-list__header + .schedule-list__card:not(.course-price__card) .schedule-list__logo{border-radius: 7.5px 0 0 0;}
.schedule-list__card:not(.course-price__card):last-of-type .schedule-list__logo {border-radius:  0 0 0 7.5px;}
.schedule-list__title a, .schedule-main__title a{text-decoration: none;}
.schedule-list__title {flex-basis: 26% !important;}
.schedule-list__price {text-align: center; font-weight: bold;}
.schedule-list__button {flex: 0 1 150px; text-align: center;}
.schedule-list__button button, .olvia-form-order .wpcf7-submit, .wp-block-button.small-outline .wp-element-button, .wp-block-button.is-style-outline .wp-element-button  {
    background-color: var(--light-button-color);
    color: var(--main-accent-color);
    border: 2px solid var(--main-accent-color);
    border-radius: 10px;
    padding: 6px 20px;
    display: inline-block;
    text-align: center;
}
.wp-block-button.small-outline .wp-element-button  {
    background-color: var(--light-card-bg-color);
    border-width: 1px;
    box-shadow: var(--grey-box-shadow);
}
.schedule-list__button button:hover, .schedule-filter__monthes a:hover {  background-color: var(--main-accent-color);color: #fff;}
/* Main Page Schedule */

.schedule-main__card {margin-bottom: 20px; display: flex; justify-content: space-between;}
.schedule-main__header {font-size: 0.8rem; opacity: 0.9;text-align: center;}
.schedule-main__content {flex: 1 0 calc(100% - 120px);}
.schedule-main__date {display: flex; flex-wrap: wrap; gap: 4px; flex: 0 0 110px;}
.schedule-main-day {
    font-weight: bold;
    font-size: 3.5rem;
    line-height: 0.85;
}
.schedule-main-weekday {  text-transform: uppercase;}
.schedule-main-time {flex-basis: 100%; font-size: 1.1rem; margin-left: 5px;}
.schedule-main__title {flex-basis: 30%; }


/* Accordion */

.wp-block-accordion-item {
    border: 1px solid var(--rgba-accent-color);
    border-radius: 12px;
    box-shadow: var(--grey-box-shadow);
    padding: 15px;
    margin-bottom: 20px;
    counter-increment: olvia-counter;
    position: relative;
}
.wp-block-accordion-item::before {
  display: inline-block;
  content: counter(olvia-counter, decimal-leading-zero) ; 
  position: absolute;
  left: 15px;
  top: 0;
  transform: translateY(50%);
  font-weight: bold;
  font-family: 'Merriweather', serif;
  padding: 5px 8px;
  background-color: var(--light-accent-color);
  color: var(--main-accent-color);
  border-radius: 6px;
}
.start-1 { counter-reset: olvia-counter 0; }
.start-4 { counter-reset: olvia-counter 3; }
.start-5 { counter-reset: olvia-counter 4; }
.start-6 { counter-reset: olvia-counter 5; }
.start-7 { counter-reset: olvia-counter 6; }
.start-8 { counter-reset: olvia-counter 7; }
.start-9 { counter-reset: olvia-counter 8; }
.start-10 { counter-reset: olvia-counter 9; }
.start-20 { counter-reset: olvia-counter 19; }
.wp-block-accordion-heading {
    font-size: 1.1rem;
    margin: 0;
    padding-left: 45px;
}
button.wp-block-accordion-heading__toggle:focus,
button.wp-block-accordion-heading__toggle:hover {
    background-color: transparent;
    color: var(--main-text-color);
}
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
    text-decoration: none;
}
.wp-block-accordion-panel {
    margin-top: 1em;
}
.wp-block-accordion-panel p:last-of-type {margin-bottom: 0;}

/* Media */
@media (max-width: 780px) {
    .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header, .widget-area .widget {
        padding: 15px;
    }
    .site-main .wp-block-group__inner-container {padding-left: 0; padding-right: 0;}
    
    .m-row-gap-0 {row-gap: 0;}
    .m-mt-0 {margin-top: 0;}
    .m-mb-0 {margin-bottom: 0;}
    .promo-list li::before {
        width: 5px;
        height: 11px;
        background: none;
        border-width: 0 2px 2px 0;
        border-style: solid;
        border-color: var(--main-accent-color);
        transform-origin: bottom left;
        margin-bottom: 5px;
    }
    ul, ol {margin: 0 0 1.5em 1.5em;}
    .promo-list li {padding: 7px;}
    .promo-list li:nth-child(2n) {
        background-color: var(--light-accent-color);
        border-bottom: 1px solid var(--main-accent-color);   
    }
    .pc-block.contacts { background: url(./assets/img/olive-top.webp) 100% -10% no-repeat var(--olvia-biege);}
    .pc-contact-info {
        padding: 25px; border-radius: 17px; 
        margin: 10px 0 !important;
    }
    /* Forms */
    /* Bottom Form with CF7 */
    .olvia-form-bottom {
        margin: 50px -15px;
        padding: 40px;
        text-align: center;
    }
    .olvia-form-order { max-width: 500px; margin: -20px auto 20px !important;} 
    /* schedule Page */
    .schedule-list__group .wp-block-group__inner-container {
        display: flex;
        flex-wrap: wrap;
    }
    .schedule-list__group .wp-block-group__inner-container *{font-size: 14px;}
    .wp-block-columns.schedule-list__card {position: relative;  padding-left: 20px !important;
        border-left: none !important; border-bottom-left-radius: 7.5px;}
    .schedule-list__header + .schedule-list__card:not(.course-price__card) {border-bottom-left-radius: 7.5px;}
    .wp-block-columns.schedule-list__card::before {
        content: "";
        display: block;
        width: 10px;
        height: 100%;
        border-left: 1px solid var(--main-accent-color); 
        border-radius: 7.5px 0 0 7.5px;
        margin-right: 10px;
        position: absolute;
        left: 0;    
    }
    
    .wp-block-columns.schedule-list__card.color-beginner::before{background-color: var(--step-accent-color); }
    .wp-block-columns.schedule-list__card.color-universal::before{background-color: var(--light-yellow-color);}
    .wp-block-columns.schedule-list__card.color-psychologist::before{background-color: var(--middle-accent-color);}

    .wp-block-columns.schedule-list__card .schedule-list__duration,
    .wp-block-columns.schedule-list__card .schedule-list__date,
    .wp-block-columns.schedule-list__card .schedule-list__price,
    .wp-block-columns.schedule-list__card .schedule-list__button {
        flex-basis: 31% !important;    
    }
    /* .wp-block-columns.schedule-list__card div[class*="color-"] {
         flex: 0 0 10px !important;
         border-radius: 7.5px 0 0 7.5px;
    } */
    .schedule-list__header, .schedule-main__header, .schedule-list__logo,.schedule-list__teacher {display: none !important;}
    .schedule-list__title::before, .schedule-list__date::before, 
    .schedule-list__duration::before, .schedule-list__price::before {
        display: block;
        font-size: 0.8em;
    }
    .schedule-list__title {order: 1}
    .schedule-list__duration, .schedule-list__price  {order: 2}
    .schedule-list__date  {order: 3}
    .course-price__card, .schedule-list__button {order: 4;}
  
    /* .schedule-list__title::before {content: "Курс";} */
    .schedule-list__date::before {content: "Дата початку";}
    .schedule-list__duration::before  {content: "Тривалість";}
    .schedule-list__price::before  {content: "Вартість за 1 міс."; font-weight: bold;}
    .schedule-list__price {font-weight: normal;}
    
    .schedule-main__card,  .schedule-main__content {flex-wrap: wrap;}
    .schedule-main__content > div:nth-child(2n+1) {flex-basis: 58%;}
    .schedule-main__content > div:nth-child(2n) {flex-basis: 38%;}
    .pc-block {  background-position:  180% -90px;}

    #article-top-img {display: none;}
    
}
@media (max-width: 600px) {
    .m-hidden {display: none !important;}
    .m-width-100 {flex: 1 0 100%; width: 100%;}
    .m-order-1 {order: 1}
    .olvia-form-bottom {padding: 30px;}
    .olvia-form-order {padding: 30px;}
    .wp-block-columns.schedule-list__card .schedule-list__duration,
    .wp-block-columns.schedule-list__card .schedule-list__date,
    .wp-block-columns.schedule-list__card .schedule-list__price {
        flex-basis: 40% !important;    
    }
    .wp-block-columns.schedule-list__card .schedule-list__button {
        flex-basis: 100% !important;    
    }
    .schedule-main__duration {display: none;}
    .schedule-main__content > div:nth-child(2n+1) ,
    .schedule-main__content > div:nth-child(2n) {flex-basis: 100%;}
    .schedule-list__price {text-align: initial;}
    .whomfor-columns {
        padding: 15px 5px;
        max-width: 90vw; 
        overflow-x: auto;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 20px 10px;
    }
    .schedule-list__button button, .olvia-form-order .wpcf7-submit, .wp-block-button.small-outline .wp-element-button, .wp-block-button.is-style-outline .wp-element-button {padding: 3px 27px;}
    .whomfor-columns .wp-block-column.whomfor-card {
        flex: 1 0 90% !important;
    }   
}