/*
 * Theme Name: La Bellenergie Provence
 * Description: La Bellenergie Provence Theme by mezcalito
 * Template: mezcalito
 * Author: Mezcalito
 * Text Domain: mezcalito
*/

:root {

  /* Primitives */
  --color-text-primary: rgba(85, 85, 85, 1);
  --color-text-primary-01: rgba(85, 85, 85, 0.1);
  --color-title: rgba(30, 30, 30, 1);
  --color-primary: rgba(26, 197, 240, 1);
  --color-primary-dark: rgba(12, 173, 214, 1);
  --color-primary-light: rgba(192, 241, 252, 1);
  --color-secondary: rgba(255, 194, 0, 1);
  --color-secondary-light: rgba(255, 237, 178, 1);
  --color-tertiary: rgba(69, 220, 175, 1);
  --color-tertiary-dark: rgba(43, 194, 149, 1);
  --color-surface-primary: rgba(12, 42, 69, 1);
  --color-surface-secondary: rgba(244, 245, 248, 1);
  --color-surface-tertiary: rgba(2, 61, 91, 1);
  --color-surface-accent: rgba(108, 240, 201, 1);
  --color-primary-grey: rgba(185, 187, 190, 1);
  --color-surface-grey: rgba(242, 242, 242, 1);
  --color-surface-background: rgba(244, 245, 248, 1);
  --color-white: rgba(255, 255, 255, 1);

  /* Assignation (components) */
  --selection: var(--color-white);
  --selection-bg: var(--color-surface-primary);

  --focus-outline: var(--color-text-primary);

  --page-bg: var(--color-surface-background);

  --hn-font-weight: 800;
  --hn-color: var(--color-title);

  --link: var(--color-primary-dark);

  --theme-radius: 15px;

  /* Contact form 7 */
  --contact-form7-label: var(--color-title);
  --contact-form7-error: var(--color-primary-dark);
  --contact-form7-success: var(--color-tertiary);
  --contact-form7-input-bg: var(--color-white);
  --contact-form7-input-bg-empty: var(--color-surface-grey);
  --contact-form-checkbox-bg: var(--color-surface-primary);
  --contact-file-border: var(--color-primary-grey);
  --contact-file-bg: var(--color-white);
  --contact-file-bg-hover: var(--color-surface-primary);

  /* Accessibility links */
  --accessibility-primary: var(--color-primary);
  --accessibility-secondary: var(--color-white);

  /* Burger */
  --burger: var(--color-text-primary);

  /* Btn plus less */
  --plus-less : var(--color-primary);

  /* Tag */
  --tag: var(--color-text-primary);
  --tag-hover: var(--color-white);
  --tag-bg: var(--color-surface-accent);
  --tag-bg-hover: var(--color-surface-primary);

  /* Button */
  --button-radius: var(--theme-radius);

  .c-button--plain {
    --button-label: var(--color-white);
    --button-label-hover: var(--color-primary);
    --button-bg: var(--color-primary);
    --button-bg-hover: var(--color-white);
  }

  .c-button--outline {
    --button-label: var(--color-primary);
    --button-label-hover: var(--color-white);
    --button-bg: var(--color-white);
    --button-bg-hover: var(--color-primary);
    --button-shadow: var(--color-primary);
    --button-shadow-hover: var(--color-primary);
  }

  /* Icon */
  --icon-radius: 100%;

  .c-icon--default {
    --icon: var(--color-white);
    --icon-bg: var(--color-secondary);
    --icon-shadow: var(--color-secondary);
  }

  .c-icon--light {
    --icon: var(--color-surface-primary);
    --icon-bg: var(--color-surface-accent);
    --icon-shadow: var(--color-surface-accent);
  }

  /* Promo bar */
  --promo-bar: var(--color-surface-tertiary);
  --promo-bar-bg: var(--color-surface-accent);

  /* Sticky nav */
  --sticky-nav: var(--color-white);
  --sticky-nav-bg: var(--color-tertiary);
  --sticky-nav-bg-hover: rgba(59, 187, 149, 1);
  --sticky-nav-radius: var(--theme-radius);

  /* Card */
  --card-bg: var(--color-white);
  --card-radius: var(--theme-radius);

  --card-horizontal-bg: var(--color-white);
  --card-horizontal-title: var(--color-text-primary);

  .c-card-post {
    --card-post-title: var(--color-text-primary);
    --card-post-date: var(--color-text-primary);
  }

  /* Pagination */
  --pagination-current: var(--color-text-primary);
  --pagination-current-bg-hover: var(--color-primary-light);
  --pagination-current-bg: var(--color-primary);

  /* Search */
  --search-bg: var(--color-white);
  --search-btn-radius: var(--theme-radius);
  --search-btn-label: var(--color-white);
  --search-btn-label-hover: var(--color-primary);
  --search-btn-bg: var(--color-primary);
  --search-btn-bg-hover: var(--color-white);
  --search-autocomplete-border: var(--color-surface-grey);
  --search-autocomplete-bg: var(--color-white);
  --search-result: var(--color-text-primary);
  --search-result-hover-bg: var(--color-text-primary-01);

  /* Swiper */
  --swiper-pagination-color: var(--color-primary);
  --swiper-pagination-bullet-inactive-color: var(--color-primary);

  /* Interjection */
  --interjection: var(--color-primary);

  /* Highlight */
  --highlight-green: var(--color-surface-accent);
  --highlight-yellow: rgba(255, 219, 102, 1);

  /* Multisite */
  --multisite-bg: var(--color-surface-primary);
  --multisite-link: var(--color-white);
  --multisite-link-current: var(--color-surface-primary);
  --multisite-link-bg: rgba(255, 255, 255, 0.1);
  --multisite-link-bg-hover: rgba(255, 255, 255, 0.2);
  --multisite-link-bg-current: var(--color-white);
  --multisite-height: 0rem;

  /* Social links */
  --social-links: var(--color-primary);

  /* Header */
  --header-bg: var(--color-white);
  --header-account: var(--color-text-primary);
  --header-account-hover: var(--color-white);
  --header-account-shadow: var(--color-primary-grey);

  /* Logo */
  --logo-width-reduced: 11rem;

  /* Breadcrumb */
  --breadcrumb: var(--color-text-primary);
  --breadcrumb-dot: var(--color-primary);

  .c-breadcrumb--white {
    --breadcrumb: var(--color-white);
  }

  /* Menu */
  --menu-link: var(--color-text-primary);
  --menu-link-hover: var(--color-secondary);
  --menu-submenu-bg: var(--color-white);
  --menu-submenu-border: var(--color-primary-grey);

  /* Footer */
  --footer-baseline-text: var(--color-white);
  --footer-baseline-bg: var(--color-surface-tertiary);
  --footer-sitemap-bg: var(--color-surface-primary);
  --footer-link: var(--color-white);
  --footer-link-hover: var(--color-primary);
  --footer-pdf-text: var(--color-primary);
  --footer-pdf-bg: var(--color-surface-primary);
  --footer-pdf-border: var(--color-primary);
  --footer-social-bg: var(--color-primary);
  --footer-social-svg: var(--color-white);
  --footer-bottom-border: var(--color-text-primary-01);

  /* Sticky subscription */
  --sticky-subscription: var(--color-white);
  --sticky-subscription-bg: var(--color-primary);

  /* Banner text image */
  --banner-text-image: var(--color-surface-secondary);
  --banner-text-image-link: var(--color-text-primary);

  /* Blocks 2 and 3 items */
  --block-2-items-item-title: var(--color-title);
  --block-2-items-svg: var(--color-surface-accent);

  .c-block-2-items--white,
  .c-block-3-items--white {
    --block-2-items-bg: var(--color-white);
    --block-2-items-svg: transparent;
  }

  .c-block-2-items--grey,
  .c-block-3-items--grey {
    --block-2-items-bg: var(--color-surface-secondary);
    --block-2-items-svg: transparent;
  }

  .c-block-2-items--fluo,
  .c-block-3-items--fluo {
    --block-2-items-bg: var(--color-surface-accent);
  }

  .c-block-2-items--green,
  .c-block-3-items--green {
    --block-2-items-bg: var(--color-surface-primary);
    --block-2-items-item-title: var(--color-white);
  }

  /* Encart */
  --encart-svg: var(--color-white);
  --encart-svg-bg: var(--color-secondary);

  .c-encart {
    --encart-bg: var(--color-surface-secondary);
  }

  .c-encart--red {
    --encart-bg: rgba(248, 236, 234, 1);
  }

  /* Steps */
  --steps-counter: var(--color-white);
  --steps-counter-bg: var(--color-secondary);
  --steps-counter-radius: var(--theme-radius);
  --steps-title: var(--color-title);

  .c-steps .c-icon {
    --icon-radius: var(--steps-counter-radius);
    --icon-bg: var(--color-white);
    --icon: var(--color-surface-primary);
    --icon-shadow: var(--color-white);
  }

  .c-steps--white {
    --steps-bg: var(--color-white);
  }

  .c-steps--grey {
    --steps-bg: var(--color-surface-secondary);
  }

  .c-steps--fluo {
    --steps-bg: var(--color-surface-accent);
    --steps-counter: var(--color-white);
  }

  .c-steps--green {
    --steps-bg: var(--color-surface-tertiary);
    --steps-title: var(--color-white);
  }

  /* Map */
  --map-pin: var(--color-white);
  --map-pin-bg-active: var(--color-primary);

  /* Faq */
  --faq-heading: var(--color-white);
  --faq-radius: var(--theme-radius);
  --faq-bg: var(--color-white);
  --faq-question-bg-hover: var(--color-secondary);
  --faq-title: var(--color-title);
  --faq-icon: var(--color-primary);
  --faq-plus-hover: var(--color-title);
  --faq-see-more: var(--color-secondary);

  /* Text edito 100 */
  --text-edito-100-bg: var(--color-white);
  --text-edito-100-title: var(--color-title);
  --text-edito-100-text: var(--color-text-primary);

  .c-text-edito-100--green {
    --text-edito-100-bg: var(--color-primary-light);
  }

  /* Little change */
  --little-change-bg: var(--color-tertiary-dark);
  --little-change-text: var(--color-white);

  .c-little-change .c-icon--default {
    --icon: var(--color-white);
    --icon-bg: rgba(255, 255, 255, 0.20);
    --icon-shadow: none;
  }

  .c-little-change--dark {
    --little-change-bg: var(--color-surface-primary);
    --little-change-text: var(--color-white);

    .c-icon {
      --icon: var(--color-text-primary);
    }
  }

  /* Contact tel */
  --contact-tel-bg: var(--color-surface-tertiary);
  --contact-tel-text: var(--color-white);
  --contact-tel-number: var(--color-secondary);

  .c-contact-tel__picture {
    mask-image: url('/app/themes/mezcalito-provence/assets/images/contact-tel-mask.svg');
    mask-position: 49% center;

    @media (min-width: 768px) {
      margin-top: -5rem;
      width: 113%;
      height: 100%;
      left: 2%;
    }

    @media (max-width: 767px) {
      margin-top: 4rem;
      width: 100%;
    }
  }

  /* Image custom */
  --image-custom-border: var(--color-secondary);

  /* Header edito */
  --header-edito-bg: var(--color-white);
  --header-edito-more: var(--font-tertiary);

  /* Post hero */
  --post-hero-more: var(--color-primary);

  /* Reviews */
  --reviews-svg: var(--color-tertiary);
  --reviews-bg: var(--color-surface-accent);

  /* Video */
  --video-play-bg: var(--color-white);
  --video-play-icon: var(--color-secondary);

  /* Slider offer */
  --slider-offer-bg: var(--color-surface-accent);

  /* Promo banner */
  --promo-banner: var(--color-white);
  --promo-banner-bg: var(--color-surface-primary);
  --promo-banner-svg: var(--color-secondary);
  --promo-banner-gift-svg: transparent;
  --promo-banner-title-line-height: normal;
  --promo-banner-text-font-weight: 500;
  --promo-banner-text-font-size: 1.8rem;
  --promo-banner-text-line-height: 2.7rem;

  @media (min-width: 1025px) {
    --promo-banner-title-font-size: 4.2rem;
  }

  @media (max-width: 1024px) {
    --promo-banner-title-font-size: 2.8rem;
  }

  .c-promo-banner {
    background-image: url('/app/themes/mezcalito-provence/assets/images/home-promo-banner-bg.jpg');
  }

  .c-promo-banner__baseline-wrapper {
    margin-top: -3rem;
  }

  /* Hero */
  --hero-rich-text: var(--color-title);

  /* 404 */
  --404-title: var(--color-primary);

  /* Template default */
  --page-default-h1: var(--color-primary-dark);

  /* Home */
  --home-hero-form-link: var(--color-primary);
  --home-hero-here: var(--color-primary);
  --home-hero-arrow: var(--color-primary);
  --home-hero-title-font-weight: 800;
  --home-hero-padding-top: 10rem;

  /* Fonts */
  --font-primary: 'Mulish', sans-serif;
  --font-secondary: 'Raleway', sans-serif;
  --font-tertiary: var(--font-special);
}

/* Mulish - Variable */
@font-face {
  font-family: 'Mulish';
  src: url('/app/themes/mezcalito-provence/assets/fonts/Mulish-VariableFont_wght.woff2') format('woff2-variations');
  font-stretch: 100%;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

/* Raleway - Variable */
@font-face {
  font-family: 'Raleway';
  src: url('/app/themes/mezcalito-provence/assets/fonts/Raleway-VariableFont_wght.woff2') format('woff2-variations');
  font-stretch: 100%;
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
}

/* Txt image centered */
.c-txt-image-centered__title-with-arrow {
  &::before,
  &::after {
    content: none !important;
  }
}