/*
Theme Name: calico
Author: Calico
Author URI: https://www.studio-calico.fr/
Version: 1.0.0
*/

/* @font-face */

/* font-family */

/* font-size */

/* font-weight */

/* color */
.has-black-color, .has-black-color strong, .has-blackLight-color.has-inline-color strong {color: #333333;}
.has-blackLight-color, .has-blackLight-color strong, .has-blackLight-color.has-inline-color strong {color: #505150;}
.has-white-color, .has-white-color strong, .has-white-color.has-inline-color strong {color: #ffffff;}
.has-pink-color, .has-pink-color strong, .has-pink-color.has-inline-color strong {color: #d81d6b;}
.has-green-color, .has-green-color strong, .has-green-color.has-inline-color strong {color: #75b743;}

/* background-color */
.has-black-background-color {background-color: #333333;}
.has-blackLight-background-color {background-color: #505150;}
.has-white-background-color {background-color: #ffffff;}
.has-pink-background-color {background-color: #d81d6b;}
.has-green-background-color {background-color: #75b743;}

/* text-align */
.tac {text-align: center;}
.tal {text-align: left;}
.tar {text-align: right;}

/* flexbox */
.dflex {display: flex;}
.jccenter {justify-content: center;}
.aicenter {align-items: center;}

/* margin */
.mb0 {margin-bottom: 0;}
.mb10 {margin-bottom: 10px;}
.mb50 {margin-bottom: 50px!important;}

/* padding */
.pb0 {padding-bottom: 0!important;}

/* Buttons */
.wp-block-button__link {transition: all ease-in-out 0.2s; font-weight: 700; font-size: 16px;}
.wp-block-button__link:hover {text-decoration: none;}

*:not(.is-style-link) > .wp-block-button__link {border-radius: 0; padding: 13px 45px; border: 2px solid #ffffff; }
*:not(.is-style-link) > .wp-block-button__link:hover {background-color: transparent!important; color: #ffffff;}
*:not(.is-style-link) > .wp-block-button__link.has-pink-background-color {border-color: #d81d6b;}
*:not(.is-style-link) > .wp-block-button__link.has-pink-background-color:hover {color: #d81d6b;}
*:not(.is-style-link) > .wp-block-button__link.has-green-background-color {border-color: #75b743;}
*:not(.is-style-link) > .wp-block-button__link.has-green-background-color:hover {color: #75b743;}
*:not(.is-style-link) > .wp-block-button__link.has-black-background-color {border-color: #333333;}
*:not(.is-style-link) > .wp-block-button__link.has-black-background-color:hover {color: #333333;}

.is-style-link .wp-block-button__link {padding: 0; background: transparent;}
.is-style-link .wp-block-button__link:after {content: '\F280'; font-family: 'bootstrap-icons'; font-size: 13px; margin-left: 10px;}
.is-style-link .wp-block-button__link:hover {transform: translateX(10px);}

/* Title */
h1, h2, h3, h4, h5, h6 {color: #333333!important;}
h2, h3, h4, h5, h6 {margin-bottom: 20px; font-weight: 700;}
h1 {font-weight: 900; font-size: 60px; text-align: center;}
.home h1 {margin-bottom: 11%;}
h2 {font-size: 47px; line-height: 46px; margin-bottom: 70px;}
h3 {font-size: 24px; font-family: 'Josefin Sans', sans-serif!important;}

/* Normalize */
*, ::before, ::after {box-sizing: border-box; margin: 0; padding: 0;}
#wpadminbar .display-name {color: #eee;}
body * {font-family: 'Roboto', sans-serif; color: #505150;}
p {margin-bottom: 30px; font-size: 16px; line-height: 140%;}
ul {padding-left: 16px;}
a {text-decoration: none; color: inherit;}
a:hover {text-decoration: underline;}
img {max-width: 100%; height: auto;}
mark {position: relative; z-index: 1; background: transparent;}
mark:after {position: absolute; left: 0; bottom: -20px;}
mark.has-pink-color:after, .entry-title mark:after {content: url('img/zig-zag-pink.svg'); position: absolute; left: 0; bottom: -20px;}
mark.has-white-color:after {content: url('img/zig-zag-white.svg');}
.entry-title mark {color: #d81d6b;}
.overflow-y-visible {overflow-y: visible;}
.wp-block-cover, .wp-block-cover-image {padding: 0;}
iframe {max-width: 100%;}
.grecaptcha-badge {display: none;}

.site-main {padding-top: 108px;}
.container, .entry-content .wp-block-columns {max-width: 1320px; margin-right: auto; margin-left: auto;}
.entry-content > div {margin-bottom: 2%; margin-top: 2%; padding-top: 3%; padding-bottom: 3%;}
.entry-content .wp-block-columns.alignfull {max-width: 100%;}
.entry-content .wp-block-columns .wp-block-column {margin-right: auto; margin-left: auto;}
section {padding-right: 0!important; padding-left: 0!important;}

/* wp-block-cover */
.wp-block-cover .wp-block-cover__image-background {object-fit: none;}

/* wp-block-media-text */
.wp-block-media-text {margin-bottom: 30px; grid-template-columns: auto auto!important}

/* Header */
.site-header {position: fixed; z-index: 999; width: 100%; background: #fff; box-shadow: 0 3px 6px #00000029;}
.site-header .container {display: flex; justify-content: space-between; align-items: stretch; padding: 10px 0;}
.site-header .custom-logo {width: 100px;}
.site-header #site-navigation {position: relative; display: flex; align-items: stretch;}
.site-header #primary-menu {display: flex; justify-content: flex-start; align-items: center; list-style-type: none; padding-left: 0; height: 100%;}
.site-header #primary-menu > li {display: flex; justify-content: center; align-items: center; height: 100%;}
.site-header #primary-menu a {font-weight: 900; margin: 0 15px; text-transform: uppercase; font-size: 16px;}
.site-header .menu-item-btn a {display: flex; justify-content: center; align-items: center; background-color: #d81d6b; border: 2px solid #d81d6b; transition: all 0.2s ease-in-out; color: #ffffff; padding: 7px 40px;}
.site-header .menu-item-btn a:hover {background-color: transparent; color: #d81d6b; text-decoration: none;}


#primary-menu>li>.sub-menu {position: absolute; z-index: 9999; opacity: 0; visibility: hidden; list-style-type: none; left: 0; top: 70px; width: 100%; background-color: #75b743; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; padding: 30px 30px 15px 30px;}
#primary-menu .sub-menu li {margin: 0;}
#primary-menu>li>.sub-menu>li {width: 30%; padding: 0 1.5% 15px;}
#primary-menu>li>.sub-menu>li:not(:nth-of-type(3n)) {border-right: 1px solid #fff;}
#primary-menu .sub-menu a {color: #fff; display: block; margin: 7px 0; font-size: 14px; font-weight: bold;}
#primary-menu .sub-menu .sub-menu {display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding-left: 0; list-style-type: none;}
#primary-menu .sub-menu .sub-menu a {text-transform: none; font-weight: 400;}
@media screen and (min-width: 1150px) {
    #primary-menu li:hover .sub-menu, #primary-menu li:focus .sub-menu {visibility: visible; opacity: 1;}
}

/* Menu burger */
.burger-menu {display: none; font-size: 45px;}

/* Mmenu */
.mm-menu {
  --mm-color-background: #f5f6f6;
  /* --mm-color-border: var(--color1);
  --mm-color-icon: var(--color1);
  --mm-color-text: var(--color1);
  --mm-color-text-dimmed: var(--color1); */
}
.mm-listitem:after {left: 0;}

.page-header, .entry-header {padding: 50px 0;}

/* breadcrumbs */
#breadcrumbs {line-height: 25px;}
#breadcrumbs strong {color: #d81d6b;}

/* Page */
.page:not(.home) main {background-image: url('/wp-content/uploads/2025/09/bg-header-page.svg'); background-repeat: no-repeat; background-position: center 200px;}

/* about-calico-numbers */
.about-calico-numbers {padding: 45px 20px; position: absolute; transform: translate(30px, 30px);}
.about-calico-numbers p {font-family: 'Josefin Sans', sans-serif;}
.about-calico-numbers strong {font-weight: 900; font-family: 'Roboto', sans-serif;;}
.about-calico-numbers img {margin: 0 20px;}

/* wp-block-list */
ol.numbered-list {list-style-type: none; counter-reset: li;}
ol.numbered-list li {margin-bottom: 20px; position: relative; padding-left: 80px;}
ol.numbered-list li::before {counter-increment: li; content: counter(li, decimal-leading-zero); position: absolute; top: 0; left: 0; font-weight: 900; font-size: 45px; line-height: 45px; z-index: 1;}
ol.numbered-list li::after {content: url('img/numbered-list-before.png'); position: absolute; top: 30px; left: -7px; z-index: 0;}
ol.numbered-list li strong {margin-bottom: 10px; display: inline-block;}

/* wp-block-details */
.wp-block-details summary {font-weight: 900; font-size: 20px; padding: 20px 30px 20px 0; position: relative;}
.wp-block-details summary::marker {content: '';}
.wp-block-details summary:after {content: '\F282'; font-family: 'bootstrap-icons'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.wp-block-details[open] summary:after {content: '\F286';}

/* Single realisation */
.single-realisation main {background-image: url('/wp-content/uploads/2024/02/content-calico-vecto.svg'); background-repeat: no-repeat; background-position: center 25%;}
.single-realisation article.container {max-width: 1100px;}
.single-realisation h1 {text-align: left;}
.realisation-details {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px;}
.realisation-details div {margin: 0 50px 20px 0;}
.realisation-details p {margin-bottom: 10px;}
.single-realisation .other-projects {background-color: #f5f6f6; padding: 70px 0 2%; margin-top: 50px;}

/* footer */
.talk-footer {background-color: #d81d6b; padding: 70px 0 60px 0;}
.talk-footer .container {display: flex; justify-content: space-evenly; align-items: center;}
.talk-footer h2 {margin-bottom: 0; color: #ffffff!important;}

.site-footer {background-color: #0e1217; padding: 50px 0;}
.site-footer * {color: #d4d4d4!important;}
.site-footer ul {list-style-type: none; padding-left: 0;}
.site-footer ul li {margin-bottom: 5px;}
.site-footer .wp-block-media-text {display: flex;}
.site-footer .wp-block-media-text img {width: auto;}
.site-footer .wp-block-media-text p {margin-bottom: 0;}
.site-footer .wp-block-categories-list {display: flex; flex-wrap: wrap; gap: 5px;}
/* .site-footer .wp-block-categories-list li:not(:last-of-type):after {content: ' - '; margin: 0 5px;} */
.site-footer .wp-block-categories-list li {margin-right: 5px;}

/* form */
form input, form select, form textarea {width: 100%; padding: 10px 15px; font-size: 16px; margin-bottom: 20px; border: 1px solid #cfcfcf;}
form input[type="submit"] {background-color: #d81d6b; border: 1px solid #d81d6b; cursor: pointer; color: #ffffff; transition: all ease-in-out 0.3s;}
form input[type="submit"]:hover {background-color: #9c144d;}

/* SVG ANIM */
#svg-0 {left: 50%; top: 60%; transform: translate(-50%, -50%);}
#svg-1 {left: 55%; top: 70%; transform: translate(-50%, -50%);}
#bg-header-home g {transform-box: fill-box; transform-origin: center;}
#bg-header-home #group4 {animation: beat 1s infinite alternate;}
#bg-header-home #group6 {animation: rotate 3s infinite alternate;}
#bg-header-home #group7 {animation: beat 1.5s infinite alternate;}

@keyframes beat{
	to { transform: scale(1.05); }
}

@keyframes rotate {
  0% {
    transform: rotate(-5deg)
  }
  100% {
    transform: rotate(10deg)
  }
}

@media screen and (max-width: 1400px) {
  .container, .entry-content > * {padding-left: 3vw!important; padding-right: 3vw!important;}
  .listing-projects article {width: 32.66%;}
  .listing-projects article:nth-child(4n) {margin-right: 0.5%;}
  .listing-projects article:nth-child(4n+1) {margin-left: 0.5%;}
  .listing-projects article:nth-child(3n) {margin-right: 0;}
  .listing-projects article:nth-child(3n+1) {margin-left: 0;}
  .listing-projects article a {height: 26.93vw;}
  .home h1 {font-size: 70px!important;}
}
@media screen and (max-width: 1200px) {
  .home h1 {font-size: 60px!important;}
}
@media screen and (max-width: 1100px) {
  .site-header .container {align-items: center;}
  .site-header .custom-logo {width: 70px;}
  .burger-menu {display: inline-block;}
  .mm-menu .menu-item-btn {position: fixed; bottom: 3%; left: 3%; width: 94%; background-color: #d81d6b; color: #ffffff; text-align: center; font-weight: 900; text-transform: uppercase; font-size: 16px;}
  .mm-menu .menu-item-btn br {display: none;}
  h1 {font-size: 50px;}
  .home h1 {font-size: 50px!important;}
  h2 {font-size: 37px; line-height: 110%; margin-bottom: 60px;}
  .site-main {padding-top: 80px;}
  .about-calico-numbers {transform: translate(0, 30px);}
  .about-calico-numbers p {font-size: 20px!important;}
  .about-calico-numbers .big {font-size: 80px!important;}
} 
@media screen and (max-width: 900px) {
  .section-expertise {flex-direction: column;}
  .section-expertise > .wp-block-column {flex-basis: 100%; width: 100%; position: relative;}
  /* .about-calico-numbers {top: 0; right: 0; transform: inherit;} */
  .about-calico-numbers {position: relative; transform: inherit;}
  .section-expertise > .wp-block-column:first-of-type > .wp-block-image {display: none;}
  .section-expertise .wp-block-media-text {grid-template-columns: 48px auto!important;}
  .section-expertise .wp-block-media-text__media {width: 48px;}
  .section-expertise .wp-block-media-text .wp-block-media-text__content {padding: 0 0 0 3vw;}

  .listing-projects article {width: 49.5%!important;}
  .listing-projects article:nth-child(3n) {margin-right: 0.5%;}
  .listing-projects article:nth-child(3n+1) {margin-left: 0.5%;}
  .listing-projects article:nth-child(2n) {margin-right: 0;}
  .listing-projects article:nth-child(2n+1) {margin-left: 0;}
  .listing-projects article a {height: 40.82vw!important;}
}
@media screen and (max-width: 800px) {
  .page-header, .entry-header {padding: 30px 0;}
  .project-filter {margin: 30px 0;}
  .talk-footer .container {flex-direction: column;}
  .talk-footer h2 {margin-bottom: 30px; text-align: center;}
}
@media screen and (max-width: 781px) {
  .section-together {padding-top: 40px; padding-bottom: 40px;}
  .section-together .wp-block-columns {gap: 0!important;}
  #svg-0 {left: 90%; top: 43%;}
}
@media screen and (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {margin-bottom: 30px;}
}
@media screen and (max-width: 550px) {
  .about-calico-numbers .wp-block-group {flex-wrap: wrap!important;}
  .about-calico-numbers .wp-block-image {width: 100%; text-align: center; height: 20px;}
  .about-calico-numbers .wp-block-image img {transform: rotate(90deg) translateX(-35px);}
}
@media screen and (max-width: 500px) {
  h1 {font-size: 40px;}
  .home h1 {font-size: 40px!important;}
  h2 {margin-bottom: 20px;}
  mark:after {display: none;}
  .entry-content > div {padding-top: 50px; padding-bottom: 50px;}
  /* .section-expertise .wp-block-media-text {display: flex; flex-direction: column;}
  .section-expertise .wp-block-media-text__media {margin-bottom: 30px;}
  .section-expertise .wp-block-media-text .wp-block-media-text__content {padding: 0;} */
}