@tailwind base;
@tailwind components;
@tailwind utilities;



@layer components {
  .slider {
    @apply w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer;

    /* WebKit thumb */
    &::-webkit-slider-thumb {
      @apply appearance-none w-4 h-4 rounded-full bg-[--light-yellow-color] cursor-pointer border-0 shadow-lg;
      margin-top: -4px;
    }

    /* Firefox thumb */
    &::-moz-range-thumb {
      @apply appearance-none w-4 h-4 rounded-full bg-[--light-yellow-color] cursor-pointer border-0 shadow-lg;
      margin-top: -4px;
    }

    /* WebKit track */
    &::-webkit-slider-runnable-track {
      @apply h-2 bg-gray-200 rounded-lg;
    }

    /* Firefox track */
    &::-moz-range-track {
      @apply h-2 bg-gray-200 border-0 rounded-lg;
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

:root {
  /* --brown-color: #50424b; */
  --brown-color: #3b3143;
  /* --light-grey-color: #645765; */
  --light-grey-color: #54485f;
  --very-light-grey-color: #7a7083;
  --light-grey-rgb: 84 72 95;
  --light-brown-color: #6c5965;
  --beige-color: #fff8ec;
  --greenish-gray-color: #9dbca6;
  --grayish-corail-color: #ddd5d5; /* Lateral navbar and bilan bg */
  --dark-grayish-cyan-lime-color: #728277;
  --light-saturated-orange-color: #e3c081;
  --dark-red-color: #b12737;
  --dark-beige-color : #bb9e6a;
  --light-yellow-color: #ffe8b6;
  /* --button-color: #A1D398; */
  --button-color: #70a87a;
  --dark-green-color: #305c47;
  --button-color-active: #bde2b6;
  --button-orange-color: #FF7F50;
  --off-white-color: #FAFAFA;
  --off-white-lighter-color: #F0EAE6;
  --tertiary-color: #9C7F8B;
  --purple-color: #886d8a;
  --bright-orange-color: #cc5216;
  --orange-color: #d45d37;
  --purple-text: #28222d;

  --card-bg: #f1ecf3;
  --card-bg-inactive: #e1d2e6;
  --card-bg-dark: #d5c2db;
  --page-bg-color: #fafafa;

  /* Thematics' colors */
  /* --tabac-color: #809ed1; */
  --tabac-color: #93adda;
  --tabac-lighter-color: #a6bee7;
  --tabac-gradient: linear-gradient(to right, var(--tabac-color) 50%, var(--tabac-lighter-color) 100%);
  --tabac-darker-color: #4f6b9a;

  /* --alcool-color: #fa6969; */
  --alcool-color: #fcb8aa;
  --alcool-lighter-color: #f7c7bd;
  --alcool-gradient: linear-gradient(to right, var(--alcool-color) 50%, var(--alcool-lighter-color) 100%);
  --alcool-darker-color: #b83c3c;

  /* --alimentation-color: #aacd8e; */
  --alimentation-color: #a2e0b9;
  --alimentation-lighter-color: #baefcd;
  --alimentation-gradient: linear-gradient(to right, var(--alimentation-color) 50%, var(--alimentation-lighter-color) 100%);
  --alimentation-darker-color: #7a9b5c;

  /* --sante-mentale-color: #a480d1; */
  --sante-mentale-color: #cbbad7;
  --sante-mentale-lighter-color: #e7dfed;
  --sante-mentale-gradient: linear-gradient(to right, var(--sante-mentale-color) 50%, var(--sante-mentale-lighter-color) 100%);
  --sante-mentale-darker-color: #6f4b8e;

  /* --activite-physique-color: #faa269; */
  --activite-physique-color: #fdda8b;
  --activite-physique-lighter-color: #f9dd9e;
  --activite-physique-gradient: linear-gradient(to right, var(--activite-physique-color) 50%, var(--activite-physique-lighter-color) 100%);
  /* --activite-physique-darker-color: #b86f3c; */
  --activite-physique-darker-color: #ed9458;



  /* Section colors */
  --tabac-color: #809ed1;

  /* BG */
  /* --hero-banner-IBM: url(/assets/hero_banner/IBM_test1-0d8110334ce1858be9adde18cc797e4be49252deedd25d5684ae4b43e676c66d.webp); */
  /* --hero-banner-IBM: url(/assets/hero_banner/ibm_test_2-ed00485e7a1525e6bbae1e339cc9c954abdae26772f11decc1054df02daada3a.jpg); */
  --hero-banner-IBM: url(/assets/hero_banner/ibm_test_5-114aa3a1d1e36f21bf895eee0816bab82cee3e2350500d2a4d1b19b7d9b2b173.jpg);
  --hero-banner-didyouknow: url(/hero_banner/food_2.webp);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

.breadcrumbs a {
  text-decoration: underline;
  text-decoration-color: var(--brown-color);
}

.bg-IBM-hero {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    var(--hero-banner-IBM);
}

.bg-didyouknow-hero {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    var(--hero-banner-didyouknow);
}

.bg-navbar-themes-illustrations {
  background-image: url('https://images.unsplash.com/photo-1568430462989-44163eb1752f?q=80&w=2673&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  background-size: cover;
  background-position: center;
}

/* Dropdown menus animations */
.dropdown-clip-enter {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path 0.15s ease-out, opacity 0.10s ease-out;
}

.dropdown-clip-enter-active {
  clip-path: inset(0 0 0% 0);
  opacity: 1;
}

.dropdown-clip-exit {
  clip-path: inset(0 0 0% 0);
  opacity: 1;
  transition: clip-path 0.15s ease-in, opacity 0.5s ease-in;
}

.dropdown-clip-exit-active {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
}

/* CSS Arrow rotate */
.arrow {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.arrow.rotated {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

/* Smooth toggle feature */
.smooth-toggle {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.togglable-element {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease, opacity 0.2s ease, max-height 0.3s ease, padding-bottom 0.3s ease, padding-top 0.3s ease;
  opacity: 0;
  max-height: 0;
  height: auto;
  padding-bottom: 0;
  padding-top: 0;
}

.togglable-element.expanded {
  transform: scaleY(1);
  opacity: 1;
  max-height: 10000px; /* Set this higher than your content will ever be */
  padding-bottom: 1rem;
  padding-top: 1rem;
}

/* .smooth-toggle {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.togglable-element {
  overflow: hidden;
  transition: height 0.3s ease;
  height: 0;
}

.togglable-element.expanded {
height: auto;
} */

/* Accordion meny styles for Stades de changement */
.accordion-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  .accordion-item.active {
    flex: 1;
  }

  .accordion-item:not(.active) {
    flex: 0 0 2.5rem;
  }

  .accordion-item:not(.active):hover {
    transform: scale(1.01);
  }

  .accordion-item:not(.active) .accordion-content {
    overflow: hidden;
  }

  .accordion-item:not(.active) .accordion-content p,
  .accordion-item:not(.active) .accordion-content h2,
  .accordion-item:not(.active) .accordion-content h3,
  .accordion-item:not(.active) .accordion-content div,
  .accordion-item:not(.active) .accordion-content ul {
    display: none;
  }

  .accordion-item.active .accordion-content {
    opacity: 1;
  }

  .accordion-content {
    transition: opacity 0.2s ease-in-out 0.1s;
  }

  .accordion-header {
    transition: all 0.2s ease;
  }

/* Sidebar hover effect */
.sidebar {
  fill: var(--off-white-color);
  transition: all 0.2s ease;
}

.sidebar:hover {
  background-color: var(--off-white-color);
  fill: var(--brown-color);
}

/* Deep shadow for questions */
.deep-shadow-brown {
  -webkit-box-shadow: 4px 4px 0px 0px #50424B;
  box-shadow: 4px 4px 0px 0px #50424B;
}

/* Same but for different shapes */
.deep-drop-shadow-brown {
  filter: drop-shadow(3px 3px 0px #50424B);
}

/* Dynamic CSS for the decision trees */
.node-highlighted {
  background-color: #b5e0ac !important;
}

/* Custom range input styles for "Echelles d'Evaluation de la Motivation" */
.range-wrapper {
  width: 600px;
  margin: 60px auto;
}

.range-label {
  font-size: 16px;
  color: #1f4f8a;
  display: block;
  margin-bottom: 30px;
}

.range-label strong {
  font-weight: 700;
}

.range-container {
  position: relative;
  width: 100%;
}

.custom-range {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #f47c20;
  outline: none;
  position: relative;
  z-index: 2;
}

/* WebKit Track */
.custom-range::-webkit-slider-runnable-track {
  height: 6px;
  background: #f47c20;
}

/* WebKit Thumb */
.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  background: #f47c20;
  border-radius: 50%;
  margin-top: -6px;
  cursor: pointer;
  border: 3px solid white;
}

/* Firefox Track */
.custom-range::-moz-range-track {
  height: 6px;
  background: #f47c20;
}

/* Firefox Thumb */
.custom-range::-moz-range-thumb {
  height: 18px;
  width: 18px;
  background: #f47c20;
  border-radius: 50%;
  border: 3px solid white;
  cursor: pointer;
}

/* Arrow at end */
.range-arrow {
  position: absolute;
  right: -20px;
  top: 5px;
  width: 0;
  height: 0;
  border-left: 20px solid #f47c20;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* Tick numbers */
.range-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  color: #f47c20;
  font-weight: bold;
  font-size: 18px;
}

/* Tick lines overlay */
.range-tick-lines {
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1;
}

.range-tick-lines span {
  width: 2px;
  height: 20px;
  background: #f47c20;
}

/* Colors for the input fields */
[type=checkbox]:checked:focus, [type=checkbox]:checked:hover, [type=radio]:checked:focus, [type=radio]:checked:hover {
    background-color: #A1D398;
    --tw-ring-color: #A1D398;
    outline-color: #A1D398;
}

input[type="radio"]:checked, input[type="checkbox"]:checked {
    background-color: #A1D398;
    border-color: #A1D398;
}

[type=checkbox], [type=radio] {
    color: #A1D398;
}

[type=checkbox]:checked:accent, [type=radio]:checked:accent {
    background-color: #A1D398;
}

input:focus,
input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border: 2px solid #A1D398 !important;
  -webkit-tap-highlight-color: transparent !important;
}

* {
  -webkit-tap-highlight-color: transparent;
}

input[type="text"]:focus {
  accent-color: #A1D398;
}

/* Hamburger menu */
#burger-menu-icon {
  width: 60px;
  height: 45px;
  position: relative;
  margin: 50px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  cursor: pointer;
}

#burger-menu-icon span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: var(--off-white-color);
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  -o-transition: .15s ease-in-out;
  transition: .15s ease-in-out;
}

#burger-menu-icon span:nth-child(1) {
  top: 0px;
}

#burger-menu-icon span:nth-child(2),#burger-menu-icon span:nth-child(3) {
  top: 10px;
}

#burger-menu-icon span:nth-child(4) {
  top: 20px;
}

#burger-menu-icon.open span:nth-child(1) {
  top: 10px;
  width: 0%;
  left: 50%;
}

#burger-menu-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#burger-menu-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#burger-menu-icon.open span:nth-child(4) {
  top: 10px;
  width: 0%;
  left: 50%;
}