global.css

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

@layer components {
  .global-margin {
    @apply max-w-7xl;
    @apply mx-4;
    @apply md:mx-10;
    @apply xl:mx-20;
    @apply 2xl:mx-auto;
  }

/* used in the nav component */
  .global-padding {
    @apply px-4;
    @apply md:px-10;
    @apply xl:px-20;
    @apply 2xl:px-40
  }

  /* new system */
  .heading-5xl {
    @apply font-jakarta text-7xl leading-16
  }

  .heading-5xl-semibold {
    @apply heading-5xl font-semibold 
  }

  .heading-4xl {
    @apply font-jakarta text-[40px] leading-[50px]
  }

  .heading-4xl-semibold {
    @apply heading-4xl font-semibold
  }

  .heading-3xl {
    @apply font-jakarta text-[32px] leading-[42px]
  }

  .heading-3xl-semibold {
    @apply heading-3xl font-semibold
  }

  .heading-2xl {
    @apply font-jakarta text-[24px] leading-[34px]
  }

  .heading-2xl-semibold {
    @apply heading-2xl font-semibold
  }

  .heading-xl {
    @apply font-jakarta text-[18px] leading-12
  }

  .heading-xl-semibold {
    @apply heading-xl font-semibold
  }
 
  .p-base {
    @apply font-jakarta text-base font-normal leading-11
  }

  .p-base-semibold {
    @apply p-base font-semibold
  }

  .p-base-bold {
    @apply p-base text-base font-bold
  }

  .p-xs {
    @apply font-jakarta text-xs font-normal leading-8;
  }

  .p-xs-semibold {
    @apply p-xs font-semibold;
  }

  .p-xs-bold {
    @apply p-xs font-bold;
  }

  .p-2xs {
    @apply font-jakarta text-xxs font-normal leading-2;
  }

  .p-2xs-semibold {
    @apply p-2xs font-semibold ;
  }

  .p-2xs-bold {
    @apply p-2xs font-bold;
  }

  .p-2xs-extrabold {
    @apply p-2xs font-extrabold;
  }

  .p-3xs {
    @apply text-[10px] font-jakarta leading-[12px]
  }

  .p-3xs-semibold {
    @apply p-3xs font-semibold
  }

   /* special fonts */
   .header-desktop {
    @apply font-jakarta text-8xl font-semibold leading-17;
  }

  .header-desktop-mobile {
    @apply font-jakarta text-5xl font-semibold leading-14;
  }

  .p-agenda-card-day {
    @apply font-jakarta text-[88px] font-bold leading-[88px]
  }

  .p-agenda-card-month {
    @apply font-jakarta text-[25px] font-bold leading-[40px]
  }

  .p-agenda-card-year {
    @apply font-jakarta text-[46px] font-bold leading-[40px] text-justify	
  }

  /* link fonts -- use the font styles above rather than re-defining these*/
  .link-lg {
    @apply font-jakarta text-xl font-semibold leading-13 underline;
  }

  .link-base {
    @apply font-jakarta text-base font-medium leading-11 underline;
  }

  .link-interaction {
    @apply hover:text-green-300 active:text-green-800 focus:text-green-200 focus:ring-2 focus:ring-white;
  }

  .link-interaction-light-green-bg {
    @apply text-gray-100 hover:text-green-200 active:text-green-100 focus:text-green-100 focus:right-2 focus:ring-white
  }

  .link-interaction-dark-bg {
    @apply text-gray-100 hover:text-green-200 active:text-green-400 focus:text-green-100 focus:right-2 focus:ring-white
  }

  .button {
    @apply font-jakarta text-base font-bold leading-10;
  }

  .enLink {
    @apply font-jakarta text-xs font-semibold leading-9;
  }
}


/* styles  */
body {
  padding-right: 0 !important;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.newlineDisplay {
  white-space: break-spaces;
}

/* CHECK GRADIENTS BY SEARCHING BG_GRAD*/

/* used on EU law card  */
.gradient-600 {
  background: linear-gradient(71deg, #6CAB93 3.79%, #30BD88 38.64%, #39B086 45.9%, #42D4A8 64.06%, #34C19A 76.4%);
}

.gradient-700 {
  background: linear-gradient(35deg, #3DB989 20.34%, #028453 56.51%, #03794F 64.05%, #066548 82.89%, #085E46 95.7%);
}

/* used for PDF blocks in Portable text */
.gradient-pdf {
  background: linear-gradient(#042D36 0%, rgba(34, 83, 44, 0) 100%);
}

/* used on gov level page  */
.overview-radial-gradient {
  background: radial-gradient(rgba(246, 214, 197, 0.3) 100%, rgba(247, 220, 206, 0.41) 89%, rgba(250, 232, 223, 0.62) 66%, 
  rgba(252, 242, 237, 0.78) 45%, rgba(253, 249, 246, 0.9) 26%, rgba(254, 253, 252, 0.97) 10%, #FFFFFF 0%);
}

/* used for filters on the Instrument list pages */
[type='checkbox']:checked {
  background-color: #22532c !important;
  border: 1px solid #22532c !important;
}

[type='checkbox']:focus {
  border-color: #22532c !important;
}


[type='checkbox']:not(:checked)  {
  border-color: #DAD8D8 !important;
  background-color: #FFFFFF !important;
}

[type='checkbox']:disabled {
  border-color: #DAD8D8 !important;
  background-color: #F8FBF8 !important;
}

/* cookie banner */
.shadow-top {
  -webkit-box-shadow: 0px -3px 3px rgb(0 0 0 / 0.06);
  -moz-box-shadow: 0px -3px 3px rgb(0 0 0 / 0.06);
  box-shadow: 0px -3px 3px rgb(0 0 0 / 0.06);
}

/* used for hover effect of social icons in footer */
.tooltip {
  position:relative;
}

.tooltip:before {
  content: attr(data-text);
  position: absolute;
  
  top:50%;
  transform:translateY(-50%);
  
  left:100%;
  margin-left:15px;
  
  width:200px;
  padding:10px;
  border-radius:10px;
  background:#000;
  color: #fff;
  text-align:center;

  display:none;
}

.tooltip:hover:before {
  display:block;
}

.social-svg-mask:hover {
  fill:#25C38B !important;
}

@layer utilities {
  @layer responsive {
    /* Hide scrollbar for Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    .no-scrollbar {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
  }
}


.ais-RefinementList:empty {
  display: none;
  }

  .goog-te-combo {
    border-width: 2px;
    border-color: #25C38B; 
    border-radius: 10px;
  }

  .loader {
    width: 48px;
    height: 48px;
    border: 5px solid #22532c;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }
  
    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 


    /* FAQ page styles */
.AccordionContent[data-state="open"] {
	animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
}
.AccordionContent[data-state="closed"] {
	animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
}

@keyframes slideDown {
	from {
		height: 0;
	}
	to {
		height: var(--radix-accordion-content-height);
	}
}

@keyframes slideUp {
	from {
		height: var(--radix-accordion-content-height);
	}
	to {
		height: 0;
	}
}

.containerx {
  position: relative;
 
  height: 100vh;
}

.svg {
  transform: rotate(-90deg); /* Start drawing from the top */
}

.bg-scroll-circles {
  background-color: 'transparent'; /* Replace with your preferred color or gradient */
  background-image: url('/scrolly/centered.svg'); /* Use this if you need an image background */
  background-size: cover;
  background-position: center;
}