/*
Theme Name: CRANDON
Author: Giuseppe Colonna
Author URI: https://www.fleeex.com/
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/


:root {
    --navbar-height: 80px;
    --wpadminbar: 32px
}
@media screen and (max-width: 782px) {
  :root {
    --wpadminbar: 46px
}
}

html {
  scroll-behavior: smooth;
}

#content {
    position: relative;
    z-index: 0;
    /* margin-top: calc(var(--navbar-height) * -1); */
}
.top-margin {
    padding-top: 300px;
}

.is-position-sticky {top: var(--navbar-height) !important;}
.logged-in .is-position-sticky {top: calc(var(--navbar-height) + var(--wpadminbar)) !important;}



/* Hero Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-bg img {
  animation: fadeIn 1.5s ease-out forwards;
}

.hero-title-1 {
  animation: fadeIn 1.5s ease-out forwards;
  animation-delay: 1s; /* Delay before fade in starts */
  opacity: 0; /* Ensure it's hidden before animation starts */
}

.hero-title-2 {
  animation: fadeIn 1.5s ease-out forwards;
  animation-delay: 1.5s; /* Delay before fade in starts */
  opacity: 0; /* Ensure it's hidden before animation starts */
}




/* Logo Navbar */
.site-branding {
    max-width: 140px;
    display: inline-block;
    padding: 1rem 0;
}

/* Body Text  */
p {margin-bottom: 1rem;}
p strong {color:var(--dark);}
.has-medium-font-size {
    line-height: 1.25;
}

/* Default link style */
a {text-decoration: none;}
p a,
.secondary-navigation a,
.secondary-navigation-footer a,
.underlined-link,
input[type="submit"] {text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-style: dashed;
    text-underline-offset: calc(0.26rem + 2px);
    text-decoration-thickness: 1px;
    color: currentColor;
    background-position: 0 100%;
    display: inline;
    padding-bottom: calc(0.26rem - 1px);
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0 2px;
    transition: .6s cubic-bezier(.19,1,.22,1);
    transition-property: background-size;
}
.crandon-form input[type="submit"] {
    border: 0 transparent !important;
    background-color: transparent;
    padding-bottom: calc(0.26rem - 1px);
    background-image: linear-gradient(transparent, transparent) !important;
    background-repeat: no-repeat;
    background-size: 0;
    transition: none;
    transition-property: background-size;
}
.crandon-form textarea {max-height: 120px;}
.crandon-form p {margin-bottom: 0;}



/* Adjust the breakpoint as needed */
@media (max-width: 991px) { 
    :root {
        --wp--preset--spacing--fluid-padding: var(--wp--preset--spacing--30) !important;
        --navbar-height: 55px;
    }
    p a {
        text-underline-offset: calc(0.26rem + 1px);
        padding-bottom: calc(0.26rem - 2px);
    }
}

/* Hover style */
input.underlined-link:hover,
.secondary-navigation a:hover,
.secondary-navigation-footer a:hover,
p a:hover,
input[type="submit"]:hover {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
    background-size: 100% 2px;
}

.crandon-mailchimp-form input[type="submit"]:hover {
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0px;
    background-size: 0;
    background-color: transparent;
    background-image: linear-gradient(transparent, transparent) !important;
    transition: none;
}

p.has-regular-font-size a {
    padding-bottom: calc(0.26rem - 2px);
}

.sticky-content {
    position: relative;
    height: auto;
    padding: 110px var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
    margin-bottom: -8vh;
    z-index: 9;
}

@media (min-width: 992px) { 
    
    .sticky-content {
        position: absolute;
        height: 100%;
        padding: var(--wp--preset--spacing--70) 0;
        margin-bottom: 0px;
    }
    
    .sticky-content .sticky-content-text {
        writing-mode: vertical-lr !important;
        display: block;
        /* margin-left: -10px !important; */
        position: sticky;
        position: -webkit-sticky;
        top: 50%;
        padding: 0 var(--wp--preset--spacing--20) 0 !important;
        line-height: 1;
        transform: translate(0%, -50%);
    }

    .wp-container-core-group-is-layout-1 > :where(.sticky-content):where(*),
    .wp-container-core-group-is-layout-1 > :where(.sticky-content *) {
        margin-left: -10px !important;
    }
}

/* LIST STYLE */
.wp-block-list {
    /* padding-left: var(--wp--preset--spacing--30); */
    list-style: none;
}

.wp-block-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
  }

  .wp-block-list li::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}

/* SINGLE */
.hero-post {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-direction: column;
}
.single-img,
.hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-overlay {
    background-color: #132034;
    opacity: .5;
}

.post-content p {
    padding-left: 27.666%;
    padding-left: var(--indent);
}
.post-content p, .post-content * {
    color: #132034 !important
}

/* SINGLE CASE STUDY */
.cs-overview-img {
    position: relative;
    z-index: 4;
}
@media screen and (min-width: 991px) {
    .cs-overview-img {
        margin-top: -25vh;
    }
}

/* ICONS */
.arrow {
    width: 32px;
    height: 32px;
    background-color: var(--dark);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpolygon%20fill%3D%22black%22%20points%3D%2216%2023.3%202.5%209.8%203.2%209.1%2016%2021.9%2028.8%209.1%2029.5%209.8%2016%2023.3%22%20%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpolygon%20fill%3D%22black%22%20points%3D%2216%2023.3%202.5%209.8%203.2%209.1%2016%2021.9%2028.8%209.1%2029.5%209.8%2016%2023.3%22%20%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}
.arrow.text-primary {background-color: var(--primary);}
.arrow.text-secondary {background-color: var(--secondary);}
.arrow.text-tertiary {background-color: var(--tertiary);}
.arrow.text-white {background-color: var(--white);}

span.icon-close {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url('data:image/svg+xml;utf8,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 1L1.0004 21" stroke="currentColor"/><path d="M1 1L20.9996 21" stroke="currentColor"/></svg>') no-repeat center center;
    background-size: contain;
    color: #132034;
  }

.icon-linkedin {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_6281_1642)"><path d="M22.9972 9.70791C20.0782 7.09291 15.4682 7.65191 13.0982 10.6799V8.38291H8.32617V24.9889H13.3932V15.8319C13.3932 15.3179 13.8322 14.2979 14.1602 13.8899C15.4282 12.3149 18.4702 12.3279 19.4512 14.1929C19.5532 14.3869 19.8152 15.1149 19.8152 15.3019V24.9889H24.9412L24.9442 14.2979C24.8662 12.8129 24.1232 10.7149 22.9982 9.70691L22.9972 9.70791Z" fill="white"/><path d="M5.55748 8.38379H0.313477V24.9898H5.55748V8.38379Z" fill="white"/><path d="M2.41996 0.0380102C-1.08604 0.51201 -0.685043 6.07401 2.99196 5.97101C7.09196 5.85701 6.73196 -0.54499 2.41996 0.0380102Z" fill="white"/></g><defs><clipPath id="clip0_6281_1642"><rect width="24.944" height="24.99" fill="white"/></clipPath></defs></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_6281_1642)"><path d="M22.9972 9.70791C20.0782 7.09291 15.4682 7.65191 13.0982 10.6799V8.38291H8.32617V24.9889H13.3932V15.8319C13.3932 15.3179 13.8322 14.2979 14.1602 13.8899C15.4282 12.3149 18.4702 12.3279 19.4512 14.1929C19.5532 14.3869 19.8152 15.1149 19.8152 15.3019V24.9889H24.9412L24.9442 14.2979C24.8662 12.8129 24.1232 10.7149 22.9982 9.70691L22.9972 9.70791Z" fill="white"/><path d="M5.55748 8.38379H0.313477V24.9898H5.55748V8.38379Z" fill="white"/><path d="M2.41996 0.0380102C-1.08604 0.51201 -0.685043 6.07401 2.99196 5.97101C7.09196 5.85701 6.73196 -0.54499 2.41996 0.0380102Z" fill="white"/></g><defs><clipPath id="clip0_6281_1642"><rect width="24.944" height="24.99" fill="white"/></clipPath></defs></svg>') no-repeat center / contain;
  color: white;
}

.icon-instagram {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_6281_1646)"><path d="M19.478 0L5.69 0.003C2.683 0.276 0.274 2.681 0.003 5.69L0 19.429C0.214 22.446 2.583 24.849 5.566 25.212H19.648C19.991 25.127 20.34 25.084 20.682 24.99C22.743 24.426 24.423 22.741 24.99 20.682C25.084 20.34 25.126 19.991 25.212 19.648V5.566C24.958 2.666 22.367 0.189 19.478 0ZM22.654 19.33C22.487 21.082 21.082 22.486 19.33 22.654H5.885C4.137 22.491 2.723 21.081 2.561 19.331L2.569 5.795C2.766 4.137 4.095 2.786 5.753 2.578L19.377 2.564C21.104 2.749 22.495 4.153 22.654 5.885V19.33Z" fill="white"/><path d="M11.9081 6.31889C7.44215 6.69589 4.96415 11.7169 7.01815 15.6109C9.62615 20.5569 17.1921 19.7959 18.6881 14.3789C19.9211 9.91589 16.4751 5.93289 11.9081 6.31889ZM16.2271 13.6909C15.4521 16.5949 11.5231 17.2889 9.65415 14.9939C7.87015 12.8029 9.17915 9.17289 12.0551 8.87889C14.8851 8.58989 16.9691 10.9069 16.2261 13.6899L16.2271 13.6909Z" fill="white"/><path d="M18.7013 5.03699C17.1203 5.26199 17.3683 7.76699 19.0773 7.57899C20.7133 7.39899 20.4623 4.78599 18.7013 5.03699Z" fill="white"/></g><defs><clipPath id="clip0_6281_1646"><rect width="25.212" height="25.212" fill="white"/></clipPath></defs></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_6281_1646)"><path d="M19.478 0L5.69 0.003C2.683 0.276 0.274 2.681 0.003 5.69L0 19.429C0.214 22.446 2.583 24.849 5.566 25.212H19.648C19.991 25.127 20.34 25.084 20.682 24.99C22.743 24.426 24.423 22.741 24.99 20.682C25.084 20.34 25.126 19.991 25.212 19.648V5.566C24.958 2.666 22.367 0.189 19.478 0ZM22.654 19.33C22.487 21.082 21.082 22.486 19.33 22.654H5.885C4.137 22.491 2.723 21.081 2.561 19.331L2.569 5.795C2.766 4.137 4.095 2.786 5.753 2.578L19.377 2.564C21.104 2.749 22.495 4.153 22.654 5.885V19.33Z" fill="white"/><path d="M11.9081 6.31889C7.44215 6.69589 4.96415 11.7169 7.01815 15.6109C9.62615 20.5569 17.1921 19.7959 18.6881 14.3789C19.9211 9.91589 16.4751 5.93289 11.9081 6.31889ZM16.2271 13.6909C15.4521 16.5949 11.5231 17.2889 9.65415 14.9939C7.87015 12.8029 9.17915 9.17289 12.0551 8.87889C14.8851 8.58989 16.9691 10.9069 16.2261 13.6899L16.2271 13.6909Z" fill="white"/><path d="M18.7013 5.03699C17.1203 5.26199 17.3683 7.76699 19.0773 7.57899C20.7133 7.39899 20.4623 4.78599 18.7013 5.03699Z" fill="white"/></g><defs><clipPath id="clip0_6281_1646"><rect width="25.212" height="25.212" fill="white"/></clipPath></defs></svg>') no-repeat center / contain;
  color: white;
}

.social-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid var(--secondary);
    transition: all 250ms ease-in-out;
}

.social-icon-wrap:hover {
    background-color: var(--secondary);
}
  

/* SWIPER NAV */
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {content: '';}
.swiper-button-next .arrow {transform: rotate(-90deg);}
.swiper-button-prev .arrow {transform: rotate(90deg);}
.carousel-nav-container {height: 72px;position: relative;z-index: 3;}
.swiper-button-prev, .swiper-rtl .swiper-button-next {left: -12px;}
.swiper-button-next, .swiper-rtl .swiper-button-prev {right: -12px;}
.swiper-button-next, .swiper-button-prev {position: absolute;top: 0;width: 50px;height: 50px;margin-top:10px;}

/* MAP */
.acf-map {
    width: 100%;
    height: 450px;
    margin: 0 0 var(--wp--preset--spacing--30) 0;
}
  
.acf-map img {
    max-width: inherit !important;
}

/* INPUTS + CONTACT FORM */
input, textarea {
    font-size: var(--wp--preset--font-size--small);
    font-family: var(--wp--preset--font-family--sans-serif);
}
input.underlined-link {
    border: transparent;
    background: transparent;
    font-size: var(--wp--preset--font-size--small);
    font-family: var(--wp--preset--font-family--sans-serif);
  }
input[type="password"],
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    background-color: transparent;
    border: transparent;
    border-bottom: 1px solid var(--dark);
    padding: 0.5rem 0;
    width: 100%;
    font-size: var(--wp--preset--font-size--small);
    margin-bottom: 1rem;
  }

:focus-visible,
textarea:focus-visible {
    outline: 2px dashed #576578;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

.wpcf7-list-item {margin: 0;}



/* MAILCHIMP FORM */

.crandon-mailchimp-form {
    width: 100%;
    border-bottom: 1px solid white;
    display: flex;
    padding-bottom: var(--wp--preset--spacing--20);
    margin-bottom: var(--wp--preset--spacing--20);
}

.crandon-mailchimp-form input[type="email"] {
    flex-grow: 1;
    background-color: transparent;
    border: none !important;
    margin-right: var(--wp--preset--spacing--20);
    font-size: var(--wp--preset--font-size--small);
    margin-bottom: 0;
}

.crandon-mailchimp-form input[type="submit"] {
    border: none !important;
    padding-bottom: 0 !important;
    color: #BCC7CE !important;
    font-size: var(--wp--preset--font-size--small);
    background-color: transparent;
}

input[type="checkbox"].crandon-mailchimp-form-terms {
    margin: 0 var(--wp--preset--spacing--20) 4px 0;
}

.crandon-mailchimp-form *, .crandon-mailchimp-form-terms * {
    font-family: var(--wp--preset--font-family--sans-serif) !important;
    color: white !important;
}

input:focus-visible {
outline: 2px dashed #576578;
}


.crandon-form input[type="email"]::placeholder {
    color: var(--secondary);
    opacity: 1; /* optional: ensures full visibility in some browsers */
}

/* Optional vendor prefixes for wider browser support */
.crandon-form input[type="email"]::-webkit-input-placeholder {
    color: var(--secondary);
}

.crandon-form input[type="email"]:-ms-input-placeholder {
    color: var(--secondary);
}


/* checkbox custom */
/* Hide default checkbox */
.small.crandon-mailchimp-form-terms,
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 8px;
  }
  
  /* Custom checkmark when checked */

  .small.crandon-mailchimp-form-terms:checked::after,
  input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    border: 5px solid transparent;
    background-color: currentColor;
    background-color: #576578;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}


  /* .small.crandon-mailchimp-form-terms:checked {
    background-color: red;
    border-color: currentColor;
  } */
  
  .small.crandon-mailchimp-form-terms,
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 8px;
    border-radius: 50%;
}

/* FOOTER */
.footer-top * {color: #132034 !important;}
#legal-menu {
    display: flex;
    margin: 0;
    flex-wrap: wrap;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}
#legal-menu a {
    padding: .25rem .5rem;
    display: inline-block;
}