/* Variables */
:root {
    --border-rounding: 0rem;

    /* z-index */
    --z-base: 0;
    --z-table-header: calc(var(--z-base) + 10);
    --z-section-header: calc(var(--z-table-header) + 10);
    --z-section-header-mask: calc(var(--z-section-header) + 10);
    --z-app-mask: calc(var(--z-section-header-mask) + 5);
    --z-app-highlight: calc(var(--z-app-mask) + 1);
    --z-navbar: calc(var(--z-section-header-mask) + 10);
    --z-navbar-mask: calc(var(--z-navbar) + 5);
    --z-popover: calc(var(--z-navbar) + 10);
    --z-alert: calc(var(--z-popover) + 10);
}

/* General Utilities */
.clickable {
    cursor: pointer;
}

.quote::before {
    content: '“';
    font-size: 1.2em;
    font-weight: bold;
}
.quote::after {
    content: '”';
    font-size: 1.2em;
    font-weight: bold;
}

:root {
    --big-quote-margin: 3rem;
}

.big-quote {
    position: relative;
    font-size: 1.8rem;
    margin-left: var(--big-quote-margin);
    margin-right: var(--big-quote-margin);
}

.big-quote:before,
.big-quote:after {
	position: absolute;
	font-size: 6rem;
	width: 3rem;
	height: 3.5rem;
}
.big-quote::before {
    content: '“';
    left: calc(-1 * var(--big-quote-margin));
	top: -2rem;
}
.big-quote::after {
    content: '”';
	bottom: 1rem;
    padding-left: 0.5rem;
}
.non-clickable {
    cursor: auto !important;
    pointer-events: none !important;
}

[hidden] {
    display: none !important;
}

[disabled] {
    cursor: auto;
    pointer-events: none;
}

.capitalize-first:first-letter {
    text-transform: uppercase
}
/* SM Link behaviour */
.sm-link, .sm-link-secondary {
    cursor: pointer;
}
.row-hover:hover .sm-link, .section-hover:hover .sm-link, .sm-link:hover {
    color: var(--purple);
    font-weight: bold;
    text-decoration: underline black;
}

.sm-link-secondary:hover {
    color: var(--purple);
    font-weight: bold;
    text-decoration: underline black;
}

/* WP Link behaviour */
.sm-link-white {
    color: var(--white);
    cursor: pointer;
    text-underline-offset: 6px;
    position: relative;
}
.sm-link-white::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--white);
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sm-link-white:hover::after {
    opacity: 1;
}

/* CTA Anchor */
.cta {
    cursor: pointer;
}
.cta.hover {
    color: inherit;
}

/* Partial Underline Effect */
.underline {
  position: relative;
  margin-bottom: 0.5em;
}
.underline::after {
    content: '';
    display: inline-block;
    width: 2em;
    position: absolute;
    bottom: -0.5em;
    border-bottom: solid 0.2em;
    border-bottom-color:  var(--purple);
    left: 0;
}
.underline.ublack::after {
    border-bottom-color: black;
}
.underline.uwhite::after {
    border-bottom-color: white;
}
.underline.ucenter::after {
    left: calc(50% - 1em)
}
.underline.uend::after {
    left: calc(100% - 2em)
}
.underline.ushort::after {
    width: 1.5em;
}

/* Round borders */
.sm-rounded {
    border-radius: var(--border-rounding);
}
.sm-rounded-top {
    border-top-left-radius: var(--border-rounding);
    border-top-right-radius: var(--border-rounding);
}
.sm-rounded-bottom {
    border-bottom-left-radius: var(--border-rounding);
    border-bottom-right-radius: var(--border-rounding);
}

/* Carousel */

/* Target captions only inside this carousel */
.custom-carousel .carousel-caption {
  position: static;          /* no absolute positioning */
  margin-top: 0.75rem;       /* space under the image */
  color: #000 !important;    /* black */
  text-shadow: none;
}

/* If the caption text is wrapped in <p>, also force that to black */
.custom-carousel .carousel-caption p {
  color: #000 !important;
}

/* 🔹 Make all carousel images same size */
.custom-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🔹 Change arrow (control) color */
.custom-carousel .carousel-control-prev-icon,
.custom-carousel .carousel-control-next-icon {
  background-color: #0b5ed7;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-size: 60%;
  opacity: 0.8;
}

/* 🔹 Add hover effect for arrows */
.custom-carousel .carousel-control-prev-icon:hover,
.custom-carousel .carousel-control-next-icon:hover {
  opacity: 1;
  background-color: #0b5ed7;
}

.custom-carousel .carousel-indicators {
    position: static;          /* take normal flow position */
    margin-top: 0.5rem;
}

/* 🔹 Change indicator (dot) color */
.custom-carousel .carousel-indicators [data-bs-target] {
  background-color: #00a6fb; /* inactive dot color */
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.custom-carousel .carousel-indicators .active {
  background-color: #0b5ed7; /* active dot color */
  width: 12px;
  height: 12px;
}


/* 🔹 Move arrows to extreme left/right outside image area */
.custom-carousel .carousel-control-prev {
  left: 0px; /* move further left; adjust as needed */
}

.custom-carousel .carousel-control-next {
  right: 0px; /* move further right */
}

/* 🔹 Keep arrows vertically centered */
.custom-carousel .carousel-control-prev,
.custom-carousel .carousel-control-next {
  top: 50%;
  transform: translateY(-50%);
  width: auto;
}