/*
Theme Name: Morfes
Theme URI: https://morfes.gr/
Author: Giannis Papathanasiou
Author URI: https://www.webstation.gr/
Description: A custom WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: morfes
*/
/* ============================
   VARIABLES
============================ */

:root {
    --font-serif: "Playfair Display", serif;
    --font-sans: "Bricolage Grotesque", sans-serif;

    --color-bg: #EAEBE4;
    --color-text: #302a27;

    --max-width: 1560px;
    --gap: 100px;

}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: clamp(16px, 15.33px + 0.1389vw, 18px);
  line-height: clamp(24px, 23.33px + 0.1389vw, 26px);
  letter-spacing: -0.01em;
}
h1,h2,h3,p {margin:0;}

/* ============================
   GLOBAL
============================ */


img {
    max-width: 100%;
    height: auto;
    display: block;
}

.section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
}

.fullwidth {
    margin: 0 auto;
    padding: 0 16px;
}

p + p {
    margin-top: 1em;
}

.wp-block-heading {
    margin: 20px 0 10px;
}

.narrow-container {
    max-width: 1200px;
    margin: 30px auto;
}

/* ============================
   HERO
============================ */
.hero {
	overflow: hidden;
	padding-top: 100px;
}


.hero-text {
    max-width: 465px;
    font-size: clamp(18px, 16px + 0.4167vw, 24px);
    line-height: clamp(28px, 26px + 0.4167vw, 34px);
    margin-bottom: var(--gap);
}


.full-right img.hero-image {
	width: auto;
	max-width: 91vw;
    aspect-ratio: 2.06 / 1;
    object-fit: cover;
    object-position: center center;
}

.hero-content {
	display: flex;
    justify-content: end;
}



p.lead-text {
    font-size: clamp(26px, 24px + 0.4167vw, 32px);
    line-height: clamp(36px, 34px + 0.4167vw, 42px);
    letter-spacing: -0.03em;
    margin: var(--gap) 0;
}

@media (max-width: 1024px) {
    .full-right img.hero-image {
        width: 100%;
        max-width: unset;
        aspect-ratio: 4 / 3;
    }

    .hero-text {
        margin-bottom: calc(.5 * var(--gap));
    }

    p.lead-text {
        margin: calc(.5 * var(--gap)) ;
    }


}
/* ============================
   TYPOGRAPHY
============================ */


a {
    text-decoration: none;
    color: var(--color-text);
}

p.request-pricing {
    text-align: center;
    font-weight: 900;
    font-family: var(--font-sans);
    margin: 96px 0 16px;
    /*line-height: 1.1;*/
}

p.request-pricing a {
    text-decoration: underline;
}

/* ============================
   CTA CIRCLES
============================ */

.circle-cta {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 20px;
    position: relative;
    font-weight: 700;
}

.circle-cta-inner {
    padding: 20px;
    width: 100%;
    text-align: left;
    position: relative;
}

/* THE CIRCLE OUTLINE */
.circle-cta-inner:before {
    content: "";
    position: absolute;
    border-radius: 50%;
    height: 198px;
    width: 198px;
    border: 2px solid var(--color-text);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .6s ease;
}

/* TEXT — this is what we animate */
.circle-cta span.hob {
    display: inline-block;     /* REQUIRED for transform animation */
    transform: translateX(0);   /* start left */
    transition: transform .6s ease;
}

/* HOVER EFFECT — slide the text only */
.circle-cta:hover span.hob {
    transform: translateX(calc(160px - 100%));
    text-align: right;
}

/* shrinking circle */
.circle-cta:hover .circle-cta-inner:before {
    height: 130px;
}

.circle-cta .sans { font-size: 24px; font-size: clamp(16.8px, 16.8px + 0.468vw, 24px); /*line-height: .8em;*/ display: contents; }

/* ============================
   WHY MORFES
============================ */
.why {
    margin-bottom: calc(2*var(--gap));
    margin-top: calc(2*var(--gap));
}

.why-grid {
    display: flex;
    gap: 16px;
    margin-bottom: var(--gap);
}


/* ITEM POSITIONS */

.item1 {
    width: 30%;
    padding-top: 144px;
}

.item1 img {
    aspect-ratio: 35 / 22;
    object-fit: cover;
    object-position: center center;
}


.item2 {
    width: 30%;
}
.why-item-image {
    overflow: hidden;
}
.item2 img {
    aspect-ratio: 50 / 39;
    object-fit: cover;
    object-position: center top;
    scale: 1.3;
}
.item3 {
    width: 20%;
    padding-top: 96px;
}
.item3 img {
    aspect-ratio: 0.709 / 1;
    object-fit: cover;
    object-position: center center;
}
.item4 {
    width: 20%;
    margin-top: -96px;
}
.item4 img {
    aspect-ratio: 0.688 / 1;
    object-fit: cover;
    object-position: center center;
}


.why-item h3 {
    font-family: var(--font-sans);
    font-size: 20px;
    font-size: clamp(18px, 16px + 0.4167vw, 24px);
    line-height: clamp(28px, 26px + 0.4167vw, 34px);
    letter-spacing: -0.01em;
    margin: 10px 0 4px;
}
.why-item p {
    margin-top: 0;
}
/* IMAGES */
.why-item img {
    width: 100%;
    object-fit: cover;
}

/* INTRO TEXT SITS IN THE MIDDLE COLUMN */
.why-item .why-intro {
    margin-bottom: 144px;


}
.why-item .why-intro p {
    margin-bottom: 0;
    font-size: clamp(18px, 16px + 0.4167vw, 24px);
    line-height: clamp(28px, 26px + 0.4167vw, 34px);
    letter-spacing: -0.01em;
}
.why-item .why-intro p.why-slogan {
    margin: 4px 0 0;
    font-weight: normal;
    font-size: clamp(38px, 34.6667px + 0.6944vw, 48px);
    line-height: clamp(48px, 44.6667px + 0.6944vw, 58px);
    letter-spacing: -0.03em;
}


@media (max-width: 1024px) {
    .why {
        margin-bottom: calc(1*var(--gap));
        margin-top: calc(1*var(--gap));
    }

    .why-grid {
        flex-flow: row wrap;
    }

    .item1 {
        width: calc(50% - 8px);
        padding-top: 64px;
    }

    .item2 {
        width: calc(50% - 8px);
    }

    .why-item .why-intro {
    margin-bottom: 64px;
}

    .item3 {
        width: calc(50% - 8px);
        padding-top: 80px;
    }

    .item3 img {
        aspect-ratio: 0.709 / 1;
        object-fit: cover;
        object-position: center center;
    }

    .item4 {
        width: calc(50% - 8px);
        margin-top: 32px;
    }

    .circle-cta-inner {
        padding: 0;
    }
    .circle-cta {
        width: 150px;
        height: 150px;
        font-size: 16px;
        line-height: 18px;
    }
}

@media (max-width: 580px) {
    .why-grid {
        flex-flow: row wrap;
    }

    .item1 {
        width: 100%;
        padding-top: 32px;
    }

    .item2 {
        width: 100%;
        margin-top: 32px;
    }

    .item3 {
        width: 100%;
        padding-top: 32px;
    }

    .item3 img {
        aspect-ratio: 0.709 / 1;
        object-fit: cover;
        object-position: center center;
    }

    .item4 {
        width: 100%;
        margin-top: 32px;
    }

}

/* ============================
   BUILT TO LAST
============================ */



/* ============================
   HEADER
============================ */
header {
    padding: 26px 40px 12px;
    font-size: 18px;
    font-size: clamp(15px, 15px + 0.351vw, 18px);
    background: var(--color-bg);
    position: fixed;
    z-index: 9;
    width: calc(100% - 80px);
}
.main-header-logo svg {
	max-width: 140px;
}
.display-flex { display: flex; flex-flow: row wrap; }
.nowrap {
	flex-flow: nowrap;
}
.align-items-center { align-items: center; }
.align-items-end { align-items: end; }

.justify-space-between { justify-content: space-between; }
.main-header-navigation,
.main-header-logo,
.main-header-menu {
	width: 33.33336%;
}
.main-header-logo {
	text-align: center;
}
.main-header-logo a {
    display: block;
    line-height: 0;
    width: 140px;
    margin: 0 auto;
}

.main-header-menu {
	text-align: right;
}

.main-header-menu {
    font-weight: 700;
    display: flex;
    align-items: end;
    justify-content: end;
}

.product-search-column {
    margin-right: 20px;
}
/* ============================
   FINAL & BUILT
============================ */

.final {
    text-align: center;
    margin-top: calc(2*var(--gap));
}

.final .section-text {
    font-size: clamp(26px, 24px + 0.4167vw, 32px);
    line-height: clamp(36px, 34px + 0.4167vw, 42px);
    letter-spacing: -0.03em;
    margin-top: 16px;
    margin-bottom: 64px;
}

.built-content {
    max-width: 780px;
    margin: 0;
    padding-left: 150px;
}
@media (max-width: 580px) {
    .built-content {
         padding-left: 0;
    }

}
.section-heading {
    font-family: var(--font-serif);
    font-size: clamp(36px, 26.667px + 1.9444vw, 64px);
    line-height: clamp(28px, 13.333px + 3.0556vw, 72px);
    letter-spacing: -0.04em;
    margin-bottom: 0;
    font-style: italic;
    display: inline;
    font-weight: 400;
}

.built-content .section-text {

    margin-top: 16px;
    margin-bottom: 64px;
}
/* ============================
   FOOTER
============================ */

.footer {
    position: relative;
	padding: 0 16px;
    margin-top: calc(2*var(--gap));
    overflow: hidden;
    color: var(--color-bg);
}

.footer a {
    color: var(--color-bg);
}

.footer-bg {
    background: var(--color-text);

}

.footer-bg svg {
    position: relative;
	bottom: -15px;
	left: 0;
	width: 100%;
    height: auto;
}

.footer-content {
    padding-top: 70px;
    padding-bottom: 160px;
}
.footer-column-one,
.footer-column-two {
    width: 49.5%;
}
@media (max-width: 1024px) {
.footer-column-one,
.footer-column-two {
    width: 100%;
}

.footer-column-two {
    margin-top: 80px;
}
}
.footer-column-one-container {
    max-width: 465px;

}
.email-link a {
    font-size: clamp(28px, 28.6667px + 0.6944vw, 46px);
    line-height: clamp(38px, 38.6667px + 0.6944vw, 54px);
    letter-spacing: -0.04em;
    text-decoration: underline;
    font-family: var(--font-sans);
}

ul.footer-navigation {
    margin: 40px 0 0;
    padding: 0;
    list-style: none;

    column-count: 3;
    column-gap: 50px;
}

ul.footer-navigation li {
    white-space: nowrap;
}


ul.footer-navigation li a {
    font-family: var(--font-sans);
    font-size: clamp(12px, 11.3333px + 0.1389vw, 14px);
    line-height: clamp(16px, 15.3333px + 0.1389vw, 18px);
}

.footer-social {
    display: flex;
    align-items: center;
    margin-top: 30px;
}

.footer-social svg {
    width: 20px;
    height: auto;
}


.footer-column-two-container {
    max-width: 610px;
}
p.newsletter-title {
    font-style: italic;
    font-size: clamp(38px, 34.6667px + 0.6944vw, 48px);
    line-height: clamp(48px, 44.6667px + 0.6944vw, 58px);
    letter-spacing: -0.03em;
    margin-bottom: 40px;
}

p.newsletter-description {
    margin-bottom: 30px;
}

.newsletter-form {
    background: var(--color-bg);
    border-radius: 30px;
}

.newsletter-form .wpcf7-email {
    width: calc(100% - 96px);
    padding: 13px 10px;
    border: 0;
    background-color: var(--color-bg);
    border-radius: 30px;
}

.newsletter-form .wpcf7-submit {
   font-family: var(--font-serif);
  font-size: clamp(16px, 15.33px + 0.1389vw, 18px);
  line-height: clamp(24px, 23.33px + 0.1389vw, 26px);
  letter-spacing: -0.01em;
  color: var(--color-text);
  background: transparent;
  border: 0;
  font-weight: 700;
  position: relative;
	cursor: pointer;
}


.newsletter-form .wpcf7-submit::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--color-text);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.35s ease, all .5s ease;
    width: 40px;
    height: 40px;
    left: -16px;
    top: -8px;
    padding-left: 0;
}
.newsletter-form .wpcf7-submit {
  left: 0;
  transition: all .5s ease;
}
.newsletter-form .wpcf7-submit:hover {
  left: 8px;
}

.newsletter-form .wpcf7-submit:hover::after {
  opacity: 1;
    border-radius: 50%;
  width: calc(100% + 32px);

}


.newsletter-form .wpcf7-spinner {
    display: none;
}
/***/
.gallery {
    display: flex;
    flex-direction: column;
    gap: 16px; /* spacing between rows */
}

/* TOP IMAGE */
.gallery-top img {
    width: 100%;
    display: block;

}

/* GRID WRAPPER */
.gallery-grid {
display: grid;
    grid-template-columns: 1.20fr 0.85fr;
    gap: 16px;
}

/* LEFT COLUMN STACK */
.col-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* RIGHT COLUMN */
.col-right img {
    width: 100%;
    height: auto;

}

/* LEFT COLUMN IMAGES */
.col-left img {
    width: 100%;
    height: auto;
}


.img-3 {

    max-width: 75%;

    margin-left: auto;
}



/* RESPONSIVE */

@media (max-width: 1024px) {
.footer-bg {
    min-height: 600px;
}
}
@media (max-width: 580px) {
.footer-bg {
    min-height: 400px;
}



    .img-3 {
        max-width: 100%;
    }
}



.outdoor-furniture {
    margin-top: 128px;
}








/* ---- Base ---- */



.hero-image img {
    width: 100%;
    height: auto;
    display: block;
}



.small-text {
    font-size: 12px;
    letter-spacing: 1px;
    opacity: 0.8;
}

.main-text {
    font-size: 24px;
    max-width: 600px;
    margin-top: 20px;
    line-height: 1.5;
}

/* ---- Button ---- */
.btn-outline {
    display: inline-block;
    margin-top: 40px;
    padding: 15px 25px;
    border: 2px solid #0e244a;
    border-radius: 40px;
    text-transform: uppercase;
    font-size: 12px;
    text-decoration: none;
    color: #0e244a;
    letter-spacing: 1px;
}

/* ---- Scroll Animation Base ---- */

.section-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s ease-out;
}

.section-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Parallax Headline ---- */

.headline-large {
    font-size: 260px;
    font-weight: 700;
    color: #0e244a15; /* subtle transparent look */
    position: absolute;
    top: 200px;
    left: 0;
    width: 100%;
    text-align: center;
    pointer-events: none;
    transform: translateY(0) scale(1);
    transition: transform 0.2s linear;
    z-index: -1;
}


.wpcf7-list-item {
    display: block;
    margin-top: 16px;
}

.wpcf7-list-item-label {
    font-size: clamp(12px, 11.3333px + 0.1389vw, 14px);
    line-height: clamp(16px, 15.3333px + 0.1389vw, 18px);
}

.wpcf7-list-item input {
    position: absolute;
    left: -4px;
    top: 5px;
}




.section-furniture {
    margin-top: calc(2*var(--gap));
    margin-bottom: 64px;
}

.furniture-column-one {
    width: 320px;
}

.furniture-column-two {
    width: calc(100% - 320px);
}

.furniture-column-two .slick-prev,
.furniture-column-two .slick-next {
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
}

.furniture-column-two .slick-prev {
    left: -24px;
}

.furniture-column-two .slick-next {
    right: -24px;
}

.large-furniture-category-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(40px, 6.667px + 9.0278vw, 280px);
    line-height: .75em;
    letter-spacing: -0.04em;
	text-transform: lowercase;
}

.large-furniture-category-title.bottom {
    margin-top: 10px;
}

@media (max-width: 1500px) {
.furniture-column-two .slick-prev {
    left: 6px;
}

.furniture-column-two .slick-next {
    right: 6px;
}
}

@media (max-width: 1024px) {

    .section-furniture {
        margin-top: calc(1 * var(--gap));
        margin-bottom: 64px;
    }

    /*.furniture-carousel {
        margin: 0 32px;
    }

    .slick-prev {
        left: 0;
    }

    .slick-next {
        right: 0;
    }*/

    .furniture-column-two .slick-prev,
    .furniture-column-two .slick-next {
        position: absolute;
        bottom: -34px;
        transform: unset;
        top: auto;
    }

    .furniture-column-two .slick-prev {
        left: auto;
        right: 40px;
    }

    .furniture-column-two .slick-next {
        right: 0;
    }

    .furniture-column-one {
        width: 50%;
        margin-bottom: 1em;
        font-size: clamp(18px, 16px + 0.4167vw, 24px);
        line-height: clamp(28px, 26px + 0.4167vw, 34px);
        letter-spacing: -0.01em;
    }


    .furniture-column-two {
        width: 100%;
    }



    .large-furniture-category-title {
        /*display: none;*/
    }

    .large-furniture-category-title.bottom {
        margin-top: 4px;
    }

    .furniture-navigation {
        display: none;
    }
}

@media (max-width: 580px) {
    .furniture-column-one {
        width: 100%;
    }
}



.furniture-navigation {
    margin: 64px 0 0;
    padding: 0;
    list-style: none;
    font-style: italic;
    font-size: clamp(26px, 24px + 0.4167vw, 32px);
    line-height: clamp(36px, 34px + 0.4167vw, 42px);
    letter-spacing: -0.03em;
}

.furniture-navigation-link {
    cursor: pointer;
    position: relative;
    left: 0;
    transition: left .6s ease;
}

.furniture-navigation-link.active {
    font-weight: 700;
    left: 8px;
    transition: left .6s ease;

}

.furniture-container {
    position: relative;
}

.furniture-carousel {
    overflow: hidden;
}

.furniture-carousel .slick-list {
    margin: 0 -8px;
}

.furniture-carousel-slide {
    margin: 0 8px;
}

.furniture-carousel-slide img {
    aspect-ratio: 459 / 257;
    object-fit: cover;
    object-position: center center;
}

button.custom-arrow {
    width: 22px;
    height: 22px;
    border: 0;
    cursor: pointer;
}

.slick-prev.custom-arrow {
  background: url("/wp-content/themes/morfes/icons/left-arrow-active.svg") center/contain no-repeat;
}
.slick-next.custom-arrow {
  background: url("/wp-content/themes/morfes/icons/right-arrow-active.svg") center/contain no-repeat;
}


.slick-prev.slick-disabled.custom-arrow {
  background-image: url("/wp-content/themes/morfes/icons/left-arrow.svg");
}

.slick-next.slick-disabled.custom-arrow {
  background-image: url("/wp-content/themes/morfes/icons/right-arrow.svg");
}






main ol, main ul,
article ol, article ul {
    box-sizing: border-box;
    padding: 0 0 0 20px;
    margin: 0;
}



@media (max-width: 1200px) {
    .main-header-navigation, .main-header-menu {
        width: calc(50% - 70px);
    }

    .main-header-logo {
        width: 140px;
    }
}
@media (max-width: 1024px) {
    .footer-content {
        padding-top: 60px;
        padding-bottom: 40px;
    }
    ul.footer-navigation {
        column-count: 2;
        column-gap: 0;
    }

    p.newsletter-title {
        margin-bottom: 20px;
    }
    .footer {
        margin-top:var(--gap);
    }
    .final {
        text-align: center;
        margin-top: var(--gap);
    }
    p + p {
        margin-top: .75em;
    }

    .furniture-carousel-slide img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: center center;
    }
}
#cookie-notice img {
	margin: 0 auto;
	max-width: 125px;
}
#cookie-notice {
    font-family: var(--font-serif);
    width: 280px !important;
	min-width: 280px !important;
    right: auto !important;
    left: 0 !important;
}
#cookie-notice .cn-button {
	font-family: var(--font-sans) !important;
	text-transform: uppercase !important;
	color: #302a27 !important;
    display: block !important;
    margin: 15px !important;
	width: calc(100% - 20px);

}
/*#cookie-notice .cn-button:hover {
background: #383838 !important;
	color: #fff !important;
}*/
.grecaptcha-badge {
	/*visibility: hidden;*/
}
.cn-close-icon {
	display: none;
}

.cli-plugin-upsell,
.cli-plugin-notice,
.cli-advertisement {
    display: none !important;
}

html :where(.wp-block) {
    margin-bottom: 28px;
    margin-top: 28px;
    max-width: 100%;
}