/* Add your global styles here */
:root {
  scrollbar-gutter: stable;
}


/*CARDS*/

:where(.card-base){
  --card-padding: var(--space-m);
  --card-gap: var(--space-s);
  --card-border-color: color-mix(in oklch, var(--relative-text-color) 50%, transparent);
  --card-border-radius: var(--radius);
  --card-shadow: var(--box-shadow-m);
 
  
  padding: var(--card-padding);
  gap: var(--card-gap);
  border: 1px solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;  
}


/* SVG ICONS */

[data-icon] {
  --icon-color: currentColor;
}


/* LOGO WATERMARK UTILITY */

.has-logo-watermark {
  position: relative;
  overflow: hidden;

--logo-watermark-size-base: 16rem;  /*Adjust by for example using --logo-watermark-size-base: 20rem; */
--logo-watermark-size: clamp(
  calc(var(--logo-watermark-size-base) * 0.6),
  45%,
  calc(var(--logo-watermark-size-base) * 1.25)
);
  --logo-watermark-opacity: 0.08;

  /* default position = centered */
  --logo-watermark-x: 50%;
  --logo-watermark-y: 50%;
  --logo-watermark-translate-x: -50%;
  --logo-watermark-translate-y: -50%;
}

.has-logo-watermark::after {
  content: "";
  position: absolute;

  top: var(--logo-watermark-y);
  left: var(--logo-watermark-x);

  width: var(--logo-watermark-size);
  height: var(--logo-watermark-size);

 transform: translate(
  var(--logo-watermark-translate-x),
  var(--logo-watermark-translate-y)
) rotate(var(--logo-watermark-rotate, 0deg)); /*Adjust by for example using --logo-watermark-rotate: -15deg; */

  opacity: var(--logo-watermark-opacity);
  pointer-events: none;
  z-index: 0;

  background-image: var(--logo-watermark-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.has-logo-watermark > * {
  position: relative;
  z-index: 1;
}

/* POSITION MODIFIERS */

.has-logo-watermark.logo-watermark-top-right {
  --logo-watermark-x: 100%;
  --logo-watermark-y: 0%;
  --logo-watermark-translate-x: -100%;
  --logo-watermark-translate-y: 0%;
}

.has-logo-watermark.logo-watermark-top-left {
  --logo-watermark-x: 0%;
  --logo-watermark-y: 0%;
  --logo-watermark-translate-x: 0%;
  --logo-watermark-translate-y: 0%;
}

.has-logo-watermark.logo-watermark-bottom-left {
  --logo-watermark-x: 0%;
  --logo-watermark-y: 100%;
  --logo-watermark-translate-x: 0%;
  --logo-watermark-translate-y: -100%;
}

.has-logo-watermark.logo-watermark-bottom-right {
  --logo-watermark-x: 100%;
  --logo-watermark-y: 100%;
  --logo-watermark-translate-x: -100%;
  --logo-watermark-translate-y: -100%;
}


/* Optional CSS-only list markers */
.marker-list {
  --list-marker-size: 1em;
  --list-marker-gap: 0.5em;
  --list-marker-offset-y: 0.1em;
  --list-marker-colour: var(--scheme-accent, var(--primary));

  list-style: none;
}

.marker-list > li {
  position: relative;
}

.marker-list > li::before {
  content: '';
  position: absolute;
  inset-inline-start: calc((var(--list-marker-size) + var(--list-marker-gap)) * -1);
  inset-block-start: var(--list-marker-offset-y);
  inline-size: var(--list-marker-size);
  block-size: var(--list-marker-size);
  border-radius: var(--radius-circle);
  background-color: var(--list-marker-colour);
  transform: scale(0.45);
}

.marker-list--circle-tick {
  --list-marker-size: 18px;
  --list-marker-offset-y: 2px;
  --list-marker-icon: url('../assets/circle-tick.svg');
}

.marker-list--circle-tick > li::before {
  border: 0;
  border-radius: 0;
  background-color: var(--list-marker-colour);
  transform: none;
  -webkit-mask-image: var(--list-marker-icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-image: var(--list-marker-icon);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

.marker-list--circle-tick > li::after {
  content: none;
}

.marker-list--solid-tick {
  --list-marker-size: 1.25em;
  --list-marker-offset-y: 0.1em;
  --list-marker-tick-colour: var(--scheme-accent-solid-text, var(--text-light));
}

.marker-list--solid-tick > li::before {
  background-color: var(--list-marker-colour);
  transform: none;
}

.marker-list--solid-tick > li::after {
  content: '';
  position: absolute;
  inset-inline-start: calc((var(--list-marker-size) + var(--list-marker-gap)) * -1 + (var(--list-marker-size) * 0.27));
  inset-block-start: calc(var(--list-marker-offset-y) + (var(--list-marker-size) * 0.27));
  box-sizing: border-box;
  inline-size: calc(var(--list-marker-size) * 0.46);
  block-size: calc(var(--list-marker-size) * 0.26);
  border-block-end: calc(var(--list-marker-size) * 0.12) solid var(--list-marker-tick-colour);
  border-inline-start: calc(var(--list-marker-size) * 0.12) solid var(--list-marker-tick-colour);
  transform: rotate(-45deg);
}

.marker-list--circle-cross > li::before {
  border: 0.12em solid var(--list-marker-colour);
  border-radius: var(--radius-circle);
  background-color: transparent;
  transform: none;
}

.marker-list--circle-cross > li::after {
  content: '';
  position: absolute;
  inset-inline-start: calc((var(--list-marker-size) + var(--list-marker-gap)) * -1 + (var(--list-marker-size) * 0.28));
  inset-block-start: calc(var(--list-marker-offset-y) + (var(--list-marker-size) * 0.22));
  inline-size: calc(var(--list-marker-size) * 0.44);
  block-size: calc(var(--list-marker-size) * 0.24);
}

.marker-list--circle-cross > li::after {
  block-size: calc(var(--list-marker-size) * 0.44);
  background:
    linear-gradient(45deg, transparent 43%, var(--list-marker-colour) 44% 56%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--list-marker-colour) 44% 56%, transparent 57%);
}

/* Markerless semantic lists */
.list-none {
  list-style: none;
}

.divider{
    border: none;
  border-top: 1px solid color-mix(in oklch, var(--primary) 50%, transparent);
  width: 80%;
  margin-inline: auto;
  margin-block: var(--space-m);
}


/*Screen Reader Class - for when text should be available to screen readers but visually hidden*/
.u-screen-reader-text {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}