/*
 Theme Name:   COLDECC
 Description:  Custom theme
 Author:       Carnoustie Creative
 Author URI:   https://www.carnoustiecreative.co.uk
 Template:     baseline
 Version:      1.0.2
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  baseline-child

// <uniquifier>: Use a uniquifier for the class name
// <weight>: Use a value from 200 to 1000

.nunito-sans-<uniquifier> {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
}

*/

:root {
    --c-limed-spruce: #2C3841;
    --c-blue-bayoux: #4D606E;
    --c-fire-gold: #E2972E;
    --c-glade-green: #6E9265;
    --c-mercury: #E3E3E3;
    --c-desert-storm: #F8F8F8;
    --c-brillian-white: #FFFFFF;
    --c-chunk-border: 2rem;
}

.baseline {
    --baseline-aos-distance: 100px;
    --baseline-aos-distance-negative: -100px;
}

body.baseline {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(1.6rem, 2vw, 1.8rem);
}

.baseline h1 {
    font-size: clamp(3.5rem, 2.7vw, 5rem);
    text-transform: uppercase;
    letter-spacing: 0.3vw;
    line-height: 1.3;
    font-weight: 900;    
    color: var(--c-blue-bayoux);
}

.baseline h2 {
    font-size: clamp(2.8rem, 2vw, 3.2rem);
    text-transform: uppercase;
    letter-spacing: 0.2vw;
    font-weight: 900;
    margin-bottom: 3.5rem;
    color: var(--c-blue-bayoux);
}

.baseline h3 {
    font-size: clamp(2.1rem, 2vw, 2.7rem);
    text-transform: uppercase;
    letter-spacing: 0.17vw;
    font-weight: 900;
    margin-bottom: 3.5rem;
    color: var(--c-blue-bayoux);
}

.baseline h4 {
    font-size: clamp(1.8rem, 2vw, 2.1rem);
    text-transform: uppercase;
    letter-spacing: 0.1vw;
    font-weight: 900;
    margin-bottom: 3.5rem;
    color: var(--c-blue-bayoux);
}

.baseline .large-text {
    font-size: clamp(1.8rem, 2vw, 2.2rem);
    font-weight: 700;
}

.header-wrap .container {
    width: 100%;
    max-width: 100%;
}

.baseline .header-wrap {
    background: transparent;
}

.baseline .header-wrap .logotitle {
    padding: 0;
    position: relative;
}

.logotitle .logo {
    background-color: var(--c-blue-bayoux);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    border-right: var(--c-chunk-border) solid #F5F5F5;
    border-bottom: var(--c-chunk-border) solid #F5F5F5;
    z-index: 99;
    position: relative;
}

footer .container {
    max-width: 94%;
}

.widget-area.footer-bottom {
    margin-bottom: 0;
}

.baseline footer {
    padding-top: 4rem;
}

footer .row:nth-child(2) {
    border-top: 0.1rem solid rgba(255, 255, 255, 0.2);
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2);
    margin: 3rem 0;
    padding: 3rem 0;
}

.footer-top .menu li {
    padding: 0 0 0 3rem;
}

.footer-top .menu li a {
    text-transform: uppercase;
    font-size: 1.4rem;
    letter-spacing: 0.2rem;
    font-weight: 900;
}

.baseline footer .widget-area .menu li:after {
    margin: 0 0 0 3rem;
}

.footer-50-left .widget_media_image {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.footer-50-left .widget_media_image img {
    max-width: 22rem !important;
}

.footer-menu-label {
    opacity: 0.8;
    margin-bottom: -1rem;
}

footer .footer-50-right.widget-area .menu li a {
    font-weight: 700;
    font-size: 1.6rem
}

footer .widget-area.footer-50-right .menu li:after {
    content: unset;
}


footer .widget-area.footer-50-right .menu li:before {
    content: "\f32b";
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    color: var(--c-fire-gold);
    margin-right: 0.8rem;
}

footer .footer-50-right.widget-area .menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}

.baseline header .first {
    margin-left: 6rem;
    bottom: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;        
}

.baseline header .right {
    border-bottom: var(--c-chunk-border) solid #F5F5F5;
    height: calc(100% - 3rem);
    margin-left: 0 !important;
    width: 78% !important;
    background-color: var(--c-mercury);
}

.baseline header .first .menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height: 100%;
    padding-right: 5rem;
}

.baseline header .first .menu li {
    margin-right: 5%;
    margin-bottom: 0;
}

.baseline header .first .menu li.button {
    margin-right: 0;
}

.baseline header .first .menu li a {
    font-size: clamp(1.3rem, 1.3svw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    text-align: center;
}

.baseline header .first .menu li.current-menu-item a {
    font-weight: 900;
}

.baseline header .first .sub-menu {
    padding-top: 2rem;
}

.baseline header .first .sub-menu li a {
    font-size: 1.3rem;
    letter-spacing: 0.19rem;
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
    line-height: 1.3;
}

.logotitle.logotitle_tnm .logo {
    padding: 3rem;
    position: relative;
    z-index: 99;
}

.baseline header .first .button {
    height: 100%;
    display: flex;
    padding-left: 4rem;
    padding-right: 4rem;    
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    margin-bottom: 0;
}

.baseline header .first li.button a {
    font-weight: 800;
    margin-right: 6rem;
}

.property-homebar {
    background-color: var(--c-desert-storm);
    padding: 0.5rem 1.5rem;
    position: relative;
    z-index: 9;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-bottom: var(--c-chunk-border) solid #fff;
}

.property-homebar .fa-solid {
    color: var(--c-fire-gold);
    margin-right: 0.8rem;
}

.property-homebar img {
    max-width: 6rem;
}

li.coldecc-home .fa-solid {
    color: var(--c-fire-gold);
}

.baseline header .first li.coldecc-home a {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

li.coldecc-home span {
    display: block;
    width: 5rem;
    height: 3.5rem;
    background-image: url('mini-logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 0.8rem;
}

.icons-left .inner {
    display: grid;
    grid-template-columns: 43% 1fr;
    grid-column-gap: var(--cde-grid-gap);
}

.icons-left .after {
    margin-top: -8rem;
}

@media ( max-width: 1100px ) {

    .icons-left .inner {
        grid-template-columns: 1fr;
    }

}

.icons-left .icons:before {
    content: "Key features at a glace";
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.15rem;;
    text-align: center;
    display: block;
    text-transform: uppercase;
    position: absolute;
    left: 0;
    width: 100%;
    top: 4rem;
}

.icons-left .icons {
    position: relative;
    background-color: #fff;
    padding: 12rem 5rem 5rem 5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 4rem;
}

.icons-left .cde-icon {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.icons-left .icon-text {
    margin-top: 1rem;
    width: 10rem;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 700;   
}

.cde-panel {
    background-color: var(--c-fire-gold);
    color: #fff;
    text-align: center;
    padding: 1rem;
    margin-bottom: 3rem;
    margin-top: 2.7rem;
}

.cde-panel strong {
    font-size: 2.2rem;
    font-weight: 900;
}

.baseline .cde-text-left-image-right,
.baseline .cde-image-left-text-right  {
    grid-gap: 0;
    align-items: center;
}

.baseline .cde-text-left-image-right .left .inner,
.baseline .cde-image-left-text-right .right .inner {
    padding: 8rem 5rem;
}

.baseline .cde-text-left-image-right .left .inner {
    padding-right: 15rem;
}

.baseline .cde-image-left-text-right .right .inner {
    padding-left: 15rem;
}

.baseline .cde-text-left-image-right .img,
.baseline .cde-image-left-text-right .img {
    height: 33vw;
    z-index: 3;
}

.baseline .cde-text-left-image-right .img {
    margin-left: -8rem;
}

.baseline .cde-image-left-text-right .img {
    margin-right: -8rem;
}

.cde-text-left-image-right.col-blue-bayoux,
.cde-text-left-image-right.col-mercury,
.cde-text-left-image-right.col-white,
.cde-image-left-text-right.col-blue-bayoux,
.cde-image-left-text-right.col-mercury,
.cde-image-left-text-right.col-white {
    background-color: unset !important;
}

.cde-text-left-image-right.col-blue-bayoux .left {
    background-color: var(--c-blue-bayoux);
}

.cde-text-left-image-right.col-mercury .left {
    background-color: var(--c-mercury);
}

.cde-text-left-image-right.col-white .left {
    background-color: #fff;
}

.cde-image-left-text-right.col-blue-bayoux .right {
    background-color: var(--c-blue-bayoux);
}

.cde-image-left-text-right.col-mercury .right {
    background-color: var(--c-mercury);
}

.cde-image-left-text-right.col-white .right {
    background-color: #fff;
}

.widget .inner_linklist {
    margin-top: 4rem;
}

.widget .inner_linklist a {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    text-decoration: none;  
    border-bottom: none;        
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.widget .inner_linklist a:hover {
    border-bottom: none;        
}

.widget .inner_linklist a:after {
    content: "\f061";
    font-size: 3rem;
    font-weight: 300;
    font-family: "Font Awesome 6 Pro";
    color: var(--c-fire-gold);
    margin-left: 0.8rem;
}

.widget .col-blue-bayoux .inner_linklist a {
    color: #fff;
}

.baseline .button,
.baseline .woocommerce #respond input#submit,
.baseline .woocommerce a.button,
.baseline .woocommerce button.button,
.baseline .woocommerce input.button,
.baseline button,
.baseline input[type=button],
.baseline input[type=reset],
.baseline input[type=submit] {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.4rem;
    letter-spacing: 0.2rem;
    padding: 1.8rem 4.5rem;
}

.inner .button {
    margin-top: 2rem;
}

/* Collage trio */
.collage-trio .container {
    width: 100%;
    max-width: 100%;
}

.collage-trio .collage-wrap.tl-ir {
    position: relative;
    padding-bottom: 10rem;
}

.collage-trio .collage-wrap .collage-text-wrap {
    position: absolute;
    width: calc(45% - 12rem);
    bottom: 0;
    padding: 5rem;
    background-color: var(--c-blue-bayoux);
    color: #fff;
    margin-bottom: -2rem;
}

.collage-text-wrap h1 {
    margin-bottom: 0;
    color: #fff;
}

.collage-trio .collage-wrap ul {
    display: grid;
    grid-template-columns: 1fr 1fr 35%;
    grid-template-rows: 20vw 20vw;
    grid-gap: var(--c-chunk-border);
}

.collage-trio ul li {
    background-position: center;
    background-size: cover;
    margin-bottom: 0;
}

.collage-trio ul li:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;    
}

/* End of collage trio */

.cde-wide-text.narrow .inner {
    max-width: 80rem;
    margin: 0 auto;
}

.out-about .item-label {
    background-color: var(--c-blue-bayoux);
    color: #fff;
    padding: 2rem;
    font-size: 2rem;
    font-weight: 800;
}

.out-about .item-subtitle {
    padding: 1rem 2rem;
    font-size: 1.6rem;
    background-color: var(--c-glade-green);
    color: #fff;
}

.flex-elm.out-about .cde-grid-item {    
    background-color: #fff;
}

.out-about .item-content {
    padding: 2rem;
}

.out-about .item-image img {
    aspect-ratio: 1.4 / 1;
    object-fit: cover;
}

.cde-toggle-label {
    padding: 2.5rem;
    padding-right: 8rem;
    border: 0.1rem solid #ccc;
    border-radius: 0.5rem;
}

.baseline input.cde-toggle:checked + .cde-toggle-label:before {
    content: "\f078";    
    transform: ;
    top: 50%;    
    transform: translate(-50%, -50%)  rotate(180deg);
    right: 0.5rem;
}

.baseline .cde-toggle-label:before {
    content: "\f078";
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Font Awesome 6 Pro";
    color: var(--c-glade-green);
    position: absolute;
    right: 3rem;
    transition-duration: 0.3s;
    background-color: transparent;
    font-size: 3rem;
    line-height: 1.4;
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: 50%;    
    transform: translate(-50%, -50%);
    right: 0.5rem;
}

@media ( max-width: 600px ) {

    .baseline .cde-toggle-label {
        font-size: 1.7rem;
        line-height: 1.4;
        padding: 2rem;
        padding-right: 8rem;
    }    

}

.cde-expandable .cde-panel {
    background-color: var(--c-blue-bayoux);
}

/* Testimonials - grid/flickty */

.testi .flickity-viewport {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
}

.testi .container {
    width: 100%;
    max-width: 100%;    
}

.testi .cde-grid-item {        
    width: 100%;        
    box-sizing: border-box;    
}

.testi .inner {
    border-radius: 1.2rem;
    background-color: var(--rnm-martinique);                
    padding: 4rem 0;
}

.testi .before h2 {
    color: var(--rnm-saffron);
}

.testi .cde-grid-item-inner {    
    margin: 0 10%;
    border-radius: 1.2rem;            
    padding: 4rem 8rem;     
    display: grid;
    grid-template-areas: "testi-top" 
                         "testi-middle"
                         "testi-bottom";
    grid-column-gap: 4rem;
}

.testi .flickity-button {
    display: none;
}

.testi .flickity-slider {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testi .cde-grid-item-inner .item-label {
    grid-area: testi-top;
    font-size: 2rem;
    font-weight: 700;
    opacity: 1;
}

.testi .cde-grid-item-inner .item-subtitle span:before {
    content: "—";
    margin-right: 0.8rem;
}

.testi .cde-grid-item-inner .item-content {
    grid-area: testi-middle;
    font-size: clamp(1.7rem);    
}

.testi .cde-grid-item-inner {
    position: relative;
}

.testi .cde-grid-item-inner:before {
    content: "\f10d";
    display: block;
    font-family: "Font Awesome 6 Sharp";
    color: #E2972E;
    font-size: 10rem;
    left: -4rem;
    top: -4rem;
    font-weight: 900;
    position: absolute;
    z-index: -1;
}

.testi .xl .cde-grid-item-inner .item-content {
    font-size: clamp(2.3rem, 2vw, 3rem);
}

.testi .cde-grid-item-inner .item-subtitle {
    grid-area: testi-bottom;
    font-size: 1.6rem;
}

@media ( max-width: 720px ) {

    .testi .cde-grid-item-inner {
        margin: 0 2rem;
        padding: 3rem;
    }

    .testi .cde-grid-item-inner .item-label {
        font-size: 1.5rem;
    }

}

.testi .flickity-page-dots {
    bottom: 0rem;
}

.testi .flickity-page-dots .dot {
    background: var(--c-blue-bayoux);
}

.testi .flickity-page-dots .dot.is-selected {
    background: var(--c-fire-gold);
}

/* End of testimonials */

.baseline .swiper-container {
    position: relative;
    padding-bottom: 10rem;
    margin-bottom: 5rem;
}

.swiper-container .before {
    position: absolute;
    bottom: 0;
    background-color: var(--c-blue-bayoux);
    z-index: 9;
    width: 38vw;
    padding: 5rem;
    margin-bottom: -2rem;
}

.swiper-container .before h1 {
    color: #fff;
}

.baseline .swiper-wrapper {
    height: 50vw;
    width: 100%;
}

.baseline .swiper-slide {
    background-size: cover;
    background-position: center;
}

.baseline .flex-elm.first[style="margin-top: 0; "],
.baseline .cde-slides.first {
    margin-top: -3rem !important;
}

.facebook-ph {
    background-color: #E3E3E3;
    height: 90rem;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 + h4:before {
    content: "";
    width: 8rem;
    height: 1rem;
    background-color: var(--c-fire-gold);
    display: block;
    margin: -1rem auto 1.5rem auto;
}

.prop-overview .inner p,
.narrow-p .inner p {
    max-width: 90rem;
    margin: 0 auto;
}

.prop-overview ul {    
    margin: 2rem 0;
    text-align: center;
}

.prop-overview ul li {
    margin-bottom: 0;
    display: inline-block;
    padding: 1rem;
    border: 0.1rem solid var(--c-fire-gold);
    margin-bottom: 1rem;
    margin-right: 0.7rem;
    border-radius: 0.4rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
}

.baseline .image-grid-wrap .cols-five {
    grid-gap: 2rem;
}

.baseline .image-grid-wrap li:hover {
    opacity: 0.7;
}

.cde-grid-list.rooms .grid-list {
    margin-top: 7rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.cde-grid-list.rooms .item-label {
    font-weight: 700;
    text-transform: uppercase;
}

.cde-grid-list.rooms .cde-grid-item {
    width: 25%;
    margin: 2rem;   
    text-align: center;
    padding: 3rem;
    box-sizing: border-box;
    background-color: var(--c-mercury);
}

#shared-property-list li a {
    display: grid;
    grid-template-columns: 40rem 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 4rem;
    background-color: var(--c-blue-bayoux);
    padding-right: 6rem;
    position: relative;
}

#shared-property-list li a:after {
    content: "\f054";
    font-family: "Font Awesome 6 Sharp";
    color: var(--c-fire-gold);
    font-size: 10rem;
    font-weight: 200;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    right: 3rem;
}

#shared-property-list li .img {
    grid-row: span 2;
    margin-bottom: 0;
    height: 100%;
    min-height: 25rem;
}

#shared-property-list .option h2 {
    color: #fff;
    padding-top: 5rem;
    padding-right: 3rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#shared-property-list p {
    margin-top: -2rem;
    color: var(--c-mercury);
    padding-bottom: 5rem;
    padding-right: 3rem;
    line-height: 1.5;
}

#shared-property-list .items-per-row-1 {
    grid-gap: 4rem;
}

header .first .menu .divider {
    pointer-events: none;
    flex-grow: 1;
    opacity: 0.2;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-right: 3rem;
}

header .first .menu .fa-brands {
    font-size: 2.2rem;
}