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

:root {

  /* Primitives */
  --color-text-primary: rgba(4, 46, 22, 1);
  --color-text-primary-01: rgba(4, 46, 22, 0.1);
  --color-title: rgba(4, 46, 22, 1);
  --color-primary: rgba(255, 103, 74, 1);
  --color-primary-dark: rgba(217, 65, 36, 1);
  --color-primary-light: rgba(255, 149, 129, 1);
  --color-secondary: rgba(130, 193, 40, 1);
  --color-secondary-light: rgba(155, 205, 83, 1);
  --color-tertiary: rgba(51, 88, 52, 1);
  --color-tertiary-dark: rgba(33, 107, 36, 1);
  --color-surface-primary: rgba(71, 145, 74, 1);
  --color-surface-secondary: rgba(251, 247, 240, 1);
  --color-surface-tertiary: rgba(51, 88, 52, 1);
  --color-surface-accent: rgba(219, 250, 142, 1);
  --color-primary-grey: rgba(168, 177, 172, 1);
  --color-surface-grey: rgba(242, 244, 243, 1);
  --color-surface-background: rgba(247, 248, 249, 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-white);

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

  --link: var(--color-secondary);

  --theme-radius: 25px;

  /* Contact form 7 */
  --contact-form7-label: var(--color-title);
  --contact-form7-error: var(--color-primary-dark);
  --contact-form7-success: var(--color-secondary);
  --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: 0 30px 0 30px;

  .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-surface-primary);
    --icon-shadow: var(--color-surface-primary);
  }

  .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-surface-primary);
  --sticky-nav-bg-hover: var(--color-secondary);
  --sticky-nav-radius: 0 var(--theme-radius) 0 var(--theme-radius);

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

  --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-white);
  --pagination-current-bg-hover: var(--color-primary-light);
  --pagination-current-bg: var(--color-primary);

  /* Search */
  --search-bg: var(--color-white);
  --search-btn-radius: 30px;
  --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-secondary);

  /* Multisite */
  --multisite-bg: var(--color-surface-primary);
  --multisite-link: var(--color-white);
  --multisite-link-current: var(--color-secondary);
  --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);

  @media (min-width: 1200px) {
    --multisite-height: 3rem;
  }

  @media (max-width: 1199px) {
    --multisite-height: 4rem;
  }

  /* 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: 18rem;

  /* 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-text-primary);
  --footer-baseline-bg: var(--color-surface-accent);
  --footer-sitemap-bg: var(--color-white);
  --footer-link: var(--color-text-primary);
  --footer-link-hover: var(--color-primary);
  --footer-pdf-text: var(--color-primary);
  --footer-pdf-bg: var(--color-white);
  --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-accent);
  --banner-text-image-link: var(--color-text-primary);

  /* Blocks 2 and 3 items */
  --block-2-items-item-title: var(--color-text-primary);
  --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);
  }

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

  .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-text-primary);
  --steps-counter-bg: var(--color-surface-accent);
  --steps-counter-radius: 0 var(--theme-radius);
  --steps-title: var(--color-text-primary);

  .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);
    --steps-counter-bg: var(--color-primary);
  }

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

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

  /* Faq */
  --faq-heading: var(--color-title);
  --faq-radius: 20px;
  --faq-bg: var(--color-white);
  --faq-question-bg-hover: var(--color-surface-accent);
  --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-surface-accent);
    --text-edito-100-title: var(--color-title);
    --text-edito-100-text: var(--color-text-primary);
  }

  /* Little change */
  --little-change-bg: var(--color-surface-accent);
  --little-change-text: var(--color-title);

  .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-accent);
  --contact-tel-text: var(--color-title);
  --contact-tel-number: var(--color-title);

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

    @media (min-width: 768px) {
      margin-top: -5rem;
      width: 122%;
      height: calc(100% + 10rem);
      left: 15%;
    }

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

  /* 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-surface-accent);
  --promo-banner-gift-svg: var(--color-surface-accent);
  --promo-banner-text-font-weight: 700;

  @media (min-width: 1025px) {
    --promo-banner-title-font-size: 2.4rem;
    --promo-banner-title-line-height: 2.9rem;
    --promo-banner-text-font-size: 2.4rem;
    --promo-banner-text-line-height: 2.9rem;
  }

  @media (max-width: 1024px) {
    --promo-banner-title-font-size: 2rem;
    --promo-banner-title-line-height: 2.4rem;
    --promo-banner-text-font-size: 1.6rem;
    --promo-banner-text-line-height: 2rem;
  }

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

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

  /* Home */
  --home-hero-form-link: var(--color-primary);
  --home-hero-here: var(--color-surface-primary);
  --home-hero-arrow: var(--color-secondary);
  --home-hero-title-font-weight: 700;
  --home-hero-padding-top: 14rem;

  /* Fonts */
  --font-primary: var(--font-common);
  --font-secondary: 'Playfair-Display-italic', sans-serif;
  --font-tertiary: var(--font-special);
}

/* Playfair Display Italic - Variable */
@font-face {
  font-family: 'Playfair-Display-italic';
  src: url('/app/themes/mezcalito-lbe/assets/fonts/PlayfairDisplay-Italic-VariableFont_wght.woff2') format('woff2-variations');
  font-stretch: 100%;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}