/*

Theme Name: Flyttr
Theme URI: https://pokemarketing.co.uk/
Author: Poke Marketing
Author URI: https://pokemarketing.co.uk/
Description: A custom theme, designed for Flyttr.
Requires at least: 4.9.6
Tested up to: 8.2
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flyttr

*/

.center-quote {
    max-width: 30ch;
    width: 100%;
    margin: 0;
    padding-block: 3.5rem 6.75rem;
}

.about-quote {
    padding-block: 4.375rem 6.5rem;
    display: flex;
    flex-direction: row-reverse;
}

.about-quote p {
    max-width: 48ch;
    width: 100%;
}

.split {
    display: flex;
    flex-wrap: wrap;
}

.split .split__wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}

.split .split__col {
    flex: 1 1 calc(50% - 2rem);
    min-width: min(25rem, 100%);
}

.split.has-background-image {
    color: var(--white);
    padding: 5.75rem 3.5rem;
    font-weight: var(--light);
    min-height: 62rem;
}

.split.has-background-image .split__wrapper {
    flex: 0 1 50%;
    min-width: min(25rem, 100%);
    display: block;
}

.split.has-background-image p {
    max-width: 38ch;
}

/* Form Styles */

form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(0rem, -7.1429rem + 14.881vw, 6.25rem);
}

form .row-span {
    grid-column: span 2;
}

form label {
    margin-bottom: 2rem;
    font-size: var(--fs-18);
}

.form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 1rem;
}

.form-footer p {
    margin: 0;
    max-width: 48ch;
    width: 100%;
}

.form-footer .btn {
    flex: 0 1 fit-content;
}

form input:not(.btn),
form textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--black);
    transition: .2s all ease-in-out;
    height: 1rem;
    background-color: transparent;
    border-radius: none;
}

.has-background-image form input:not(.btn),
.has-background-image form textarea {
    border-bottom: 1px solid var(--white);
    margin-top: .5rem;
    color: var(--white);
}

form input:not(.btn):focus{
    height: 2.5rem;
}

form textarea:focus {
    height: 5rem;
}

form .wpcf7-spinner {
    display: none;
}

@media screen and (max-width: 768px) {
    form {
        display: flex;
        flex-direction: column;
    }
}

/* Explore Page Styling */

/* Fold */

.explore-fold {
    margin-bottom: clamp(3rem, 1.1119rem + 8.209vw, 8.5rem);
}

.explore-fold__item {
    border-top: 1px solid var(--black);
}

.explore-fold__item p:not(.fw--bold) {
    margin-top: 0;
}

@media screen and (min-width: 768px) {

    .explore-fold__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(clamp(3.125rem, 2.0522rem + 4.6642vw, 6.25rem) - 1em) 2.5rem;
    }

}

/* AI Powered */

.explore-ai-powered {
    padding-top: clamp(2rem, 0.9701rem + 4.4776vw, 5rem);
    border-top: 1px solid var(--black);
    margin-bottom: clamp(4.6875rem, 3.0784rem + 6.9963vw, 9.375rem);
}

.explore-ai-powered h2 {
    margin-bottom: clamp(1.5rem, 0.4701rem + 4.4776vw, 4.5rem);
}

.explore-ai-powered__wrapper {
    background-color: var(--grey-light);
}

.explore-ai-powered__wrapper .container {
    padding: clamp(3.125rem, 2.0522rem + 4.6642vw, 6.25rem) clamp(3.125rem, 2.0522rem + 4.6642vw, 6.25rem) 0;
}

.explore-ai-powered__text {
    margin-top: clamp(4.6875rem, 3.0784rem + 6.9963vw, 9.375rem);
    padding-bottom: clamp(2rem, -0.5317rem + 11.0075vw, 9.375rem);
    border-top: 1px solid var(--black);
}

.explore-ai-powered__images {
    padding: 0 clamp(1.25rem, 0.8209rem + 1.8657vw, 2.5rem) clamp(3.125rem, 1.0224rem + 9.1418vw, 9.25rem);
}

.explore-ai-powered__image img {
    margin-bottom: clamp(1.25rem, 0.8209rem + 1.8657vw, 2.5rem);
}

@media screen and (min-width: 1024px) {

    .explore-ai-powered__text {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(2rem, 0.6269rem + 5.9701vw, 6rem);
    }

    .explore-ai-powered__images {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1.25rem, 0.8209rem + 1.8657vw, 2.5rem);
    }

    .explore-ai-powered__images figure {
        margin: 0;
    }

}

/* Video Groups */

.explore-video-group,
.explore-video-group--alt {
    padding-block: clamp(2.5rem, 1.6418rem + 3.7313vw, 5rem) clamp(4.8125rem, 3.1604rem + 7.1828vw, 9.625rem);;
    border-top: 1px solid var(--black);
}

.explore-video-group__wrapper {
    padding-top: clamp(3rem, 1.1978rem + 7.8358vw, 8.25rem);
}

.explore-video-group__wrapper video {
    max-width: 100%;
    margin-bottom: 2rem;
}

.explore-video-group--alt .explore-video-group__col ~ .explore-video-group__col {
    border-top: 1px solid var(--black);
    padding-top: 2rem;
}

.explore-video-group--alt .explore-video-group__textarea {
    border-top: 1px solid var(--black);
    padding-block: 2rem;
}

@media screen and (min-width: 1024px) {
    
    .explore-video-group__wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.25rem;
    }

    .explore-video-group__col > p {
        margin-top: 0;
    }

    .explore-video-group--alt .explore-video-group__textareas {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

    .explore-video-group--alt .explore-video-group__col {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 32rem;    
    }

}

/* Tool */

.explore-tool {
    padding-block: clamp(3.5rem, 2.2985rem + 5.2239vw, 7rem) clamp(2.75rem, 1.806rem + 4.1045vw, 5.5rem);
    border-top: 1px solid var(--black);
}

.tool__header {
    margin-bottom: clamp(1.875rem, 1.2313rem + 2.7985vw, 3.75rem);
}

.tool__text {
    padding-top: clamp(2.5rem, 1.6418rem + 3.7313vw, 5rem);
}

.tool__text > p {
    margin-top: 0;
}

@media screen and (min-width: 768px) {
.tool__header,
.tool__text {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

/* Forecasts */

.explore-forecasts {
    padding-block: clamp(2.5rem, 1.6418rem + 3.7313vw, 5rem) clamp(3.75rem, 2.4627rem + 5.597vw, 7.5rem);
    border-top: 1px solid var(--black);
}

.explore-forecasts h2 {
    max-width: 62rem;
}

.explore-forecasts__grid .explore-forecasts__col {
    padding-top: 2rem;
    margin-top: clamp(2rem, 0.1119rem + 8.209vw, 7.5rem);
    border-top: 1px solid var(--black);
}

@media screen and (min-width: 1024px) {
    
    .explore-forecasts__grid,
    .explore-forecasts__grid .explore-forecasts__col ~ .explore-forecasts__col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: clamp(3.125rem, 2.0522rem + 4.6642vw, 6.25rem);
    }

    .explore-forecasts__grid .explore-forecasts__col ~ .explore-forecasts__col {
        gap: clamp(2.25rem, 1.4776rem + 3.3582vw, 4.5rem);
    }

    .explore-forecasts__col > p {
        margin-top: 0;
    }


}

/* Comparison  */

.comparison-table {
    display: grid;
    grid-auto-rows: auto;
    border: 1px solid var(--grey-light);
    border-radius: 2.5rem;
    padding: 3.625rem;
}

.comparison-table__header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2.5rem;
    align-items: stretch;
}

.comparison-table__header .comparison-table__cell {
    display: flex;
    align-items: center;
}

.comparison-table__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2.5rem;
    align-items: stretch;
}

.comparison-table__cell {
    display: flex;
    box-sizing: border-box;
}

.comparison-table__cell.comparison-table__cell--label {
    justify-content: flex-end;
    padding: 1.625rem;
    border: none;
}

.comparison-table__cell.comparison-table__cell--label ul,
.comparison-table__cell.comparison-table__cell--tools ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.comparison-table__cell.comparison-table__cell--flyttr .comparison-table__list {
    background-color: var(--grey-light);
    width: 100%;
}

.comparison-table__cell.comparison-table__cell--tools:not(.comparison-table__header .comparison-table__cell--tools) {
    border-left: 1px solid var(--grey-light);
    border-right: 1px solid var(--grey-light);
    padding: 1.625rem;
}

.comparison-table__cell.comparison-table__cell--flyttr .comparison-table__list li {
    padding: 1.625rem;
}

.comparison-table__header + .comparison-table__row .comparison-table__cell--flyttr ul,
.comparison-table__header + .comparison-table__row .comparison-table__cell--tools  {
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
    border-top: 1px solid var(--grey-light);
}

.comparison-table__row:last-child .comparison-table__cell--flyttr ul,
.comparison-table__row:last-child .comparison-table__cell--tools  {
    border-bottom-left-radius: 2.5rem;
    border-bottom-right-radius: 2.5rem;   
    border-bottom: 1px solid var(--grey-light);
}

.comparison-table__title,
.comparison-table__text,
.comparison-table__list {
    margin: 0;
}  

.comparison-table__header .comparison-table__list-item {
  background-color: var(--white);
  padding: 2rem;
}

.comparison-table__cell--flyttr ul {
    list-style: none;
    padding: 0;
}

.comparison-table__cell--flyttr li {
    display: flex;
    gap: 1rem;
}

.comparison-table__cell--flyttr li::before {
    content: url("./icons/tick.svg");
}


@media (max-width: 1024px) {

    .comparison-table__header,
    .comparison-table__row {
        grid-template-columns: 1fr;
    }

    .comparison-table__header + .comparison-table__row .comparison-table__cell--flyttr ul,
    .comparison-table__header + .comparison-table__row .comparison-table__cell--tools,
    .comparison-table__row:last-child .comparison-table__cell--flyttr ul,
    .comparison-table__row:last-child .comparison-table__cell--tools {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .comparison-table__header .comparison-table__cell.comparison-table__cell--label {
        display: none;
    }

    .comparison-table__cell.comparison-table__cell--label {
        justify-content: flex-start;
        border: 1px solid var(--grey-light);
    }


}

/* Case Studies */

.explore-case-studies {
    padding-block: clamp(2.625rem, 0.8228rem + 7.8358vw, 7.875rem) clamp(3.125rem, 0.9795rem + 9.3284vw, 9.375rem);
}

.explore-case-studies__grid {
    margin-top: clamp(2.5rem, 0.8694rem + 7.0896vw, 7.25rem);
}

.explore-case-studies__item {
    border-top: 1px solid var(--grey-light);
}

@media screen and (min-width: 1024px) {
    
    .explore-case-studies__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(2rem, 1.2276rem + 3.3582vw, 4.25rem);
    }

}

/* Call To Action */

.explore-call-to-action {
    padding-block: clamp(2.5rem, 1.6418rem + 3.7313vw, 5rem) clamp(2rem, 0.541rem + 6.3433vw, 6.25rem);
    border-top: 1px solid var(--black);
}


.explore-call-to-action h2 {
    margin-bottom: clamp(2.5rem, 0.569rem + 8.3955vw, 8.125rem);
}

.explore-call-to-action__buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-top:clamp(4.6875rem, 3.0784rem + 6.9963vw, 9.375rem);
}

.explore-call-to-action__buttons a {
    flex: 1 1 30rem;
    min-width: min(30rem, 100%);
    padding: 2.5rem clamp(1rem, 0.2705rem + 3.1716vw, 3.125rem) 11.25rem;
    font-size: var(--fs-60);
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--grey-light);
    border-radius: .625rem;
}
.explore-call-to-action__buttons a::after {
    content: '→';
}

.explore-call-to-action__buttons .cta-secondary {
    background-color: var(--grey-dark);
    color: var(--white);
}

@media screen and (min-width: 1024px) {
    
    .explore-call-to-action__wrapper {
        max-width: 50%;
    }

}